Thai Pop Market

Also called: Bangkok street market, Talad Thai pop, Street-stall UI

A Bangkok night market on screen: hot-pink, lime and orange plastic colours, marker-lettered signs on fluoro card, price tags, striped awnings and sticker badges.

“Talad neon”Thai & RegionalEra: 2010s–now Bangkok street culturePlayfulBoldFriendlyEdgyNew

Open full screen ↗

thai-pop-market / landingEN

thai-pop-market / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm6pxRadius md12pxRadius lg16pxRadius xl22pxDensity×1Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

hot pink lime orangemarker hand-letteringfluoro card signsstriped awningprice swing tagsdie-cut stickersplastic basket latticenight-market energy

Thai Pop Market borrows from the stalls of Bangkok’s street and night markets — fluorescent card signs hand-lettered in marker, candy-striped awnings, plastic baskets and stools in hot pink, lime and orange, and die-cut stickers slapped on everything. Headlines are marker script (Sriracha for Thai), prices hang on swing tags, cards wear striped awning tops, badges are tilted stickers with a white die-cut edge and the background is a faint plastic-basket lattice. It is loud, cheerful and very local, but sits on a warm white so menus and carts stay readable.

Best for

Street food, delivery and restaurant apps
Markets, pop-ups and festival campaigns
Thai snack, drink and FMCG brands with a fun voice
Local marketplace and deals apps

Avoid for

Luxury hospitality and fine dining
Banking, insurance and healthcare
Enterprise or B2B dashboards that need calm

✓ Do

Write headlines and prices like market signs: marker type on fluoro pink / lime / orange card, slightly rotated
Hang prices on swing-tag shapes with a punched hole
Use striped awning bands (pink/white, 28px stripes, scalloped edge) to top nav, cards and banners
Keep body text in a clean sans on warm white

✕ Don't

No muted, pastel or earthy palettes
Don’t set long paragraphs in the marker script
Don’t use hard black offset shadows — stickers have a white die-cut edge and soft lift
Don’t add temple or elephant clip-art

Not to be confused with

Thai Retro Poster →Thai Retro Poster is a faded 1970s print (red-yellow-teal, fat serif display, halftone); Thai Pop Market is today’s neon plastic market with marker signs, awnings and stickers.Neubrutalism →Neubrutalism relies on thick black outlines and hard offset shadows; Thai Pop Market uses fluoro sign cards, swing tags and white-edged stickers with soft lift.Gen Z Chaos / Maximalism →Gen-Z chaos is deliberately random collage; Thai Pop Market is a coherent market-stall system (awning, tag, sign, sticker) in three neon plastics.

On mobile

The awning band sits under the status bar, the home hero is a lime fluoro sign with tape on top, list prices hang on pink swing tags and the floating tab bar is a dark pill with a neon-pink active sticker. Keep stickers to one or two per screen.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinPermanent Marker · 400

The quick brown fox

Heading · ThaiSriracha · 400

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinArchivo · 400/500/700

Clear words make shared decisions.

Body · ThaiKanit · 300/400/500

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Sriracha is a lively looped marker hand like the price signs at every stall, matching Permanent Marker’s felt-tip strokes; Kanit is the punchy loopless sans of Bangkok shop fronts and pairs with Archivo’s sturdy grotesque body.

Colour palette

Light

Dark

Design tokens

Radius	`sm 6px · md 12px · lg 16px · xl 22px · pill 999px`
Border	`2px`
Shadow	`0 8px 18px rgba(27,16,53,0.18)`
Display	`clamp(2.8rem, 6.4vw, 5.4rem)`
Motion	`180ms cubic-bezier(.34,1.56,.64,1)`
Density	`×1`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Thai Pop Market (thai-pop-market) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400&family=Archivo:wght@400;500;700&family=Sriracha:wght@400&family=Kanit:wght@300;400;500&display=swap
 */
:root {
  --radius: 16px;
  --background: #FFF7EE;
  --foreground: #1B1035;
  --card: #FFFFFF;
  --card-foreground: #1B1035;
  --popover: #FFFFFF;
  --popover-foreground: #1B1035;
  --primary: #FF2E88;
  --primary-foreground: #1B1035;
  --secondary: #B6F500;
  --secondary-foreground: #1B1035;
  --muted: #FFE4F0;
  --muted-foreground: #4F4268;
  --accent: #FFE4F0;
  --accent-foreground: #1B1035;
  --destructive: #C8102E;
  --border: #1B1035;
  --input: #1B1035;
  --ring: #FF2E88;
  --chart-1: #FF2E88;
  --chart-2: #FF7A00;
  --chart-3: #7BC400;
  --chart-4: #00A3E0;
  --chart-5: #7B2CBF;
  --sidebar: #FFFFFF;
  --sidebar-foreground: #1B1035;
  --sidebar-primary: #FF2E88;
  --sidebar-primary-foreground: #1B1035;
  --sidebar-accent: #FFE4F0;
  --sidebar-accent-foreground: #1B1035;
  --sidebar-border: #1B1035;
  --sidebar-ring: #FF2E88;
}

.dark {
  --background: #170C2B;
  --foreground: #FFF4FA;
  --card: #24153F;
  --card-foreground: #FFF4FA;
  --popover: #24153F;
  --popover-foreground: #FFF4FA;
  --primary: #FF4D9A;
  --primary-foreground: #1B1035;
  --secondary: #C3FF1A;
  --secondary-foreground: #1B1035;
  --muted: #311C52;
  --muted-foreground: #CDBDE6;
  --accent: #311C52;
  --accent-foreground: #FFF4FA;
  --destructive: #FF5A78;
  --border: #FFF4FA;
  --input: #FFF4FA;
  --ring: #FF4D9A;
  --chart-1: #FF4D9A;
  --chart-2: #FF8A1F;
  --chart-3: #C3FF1A;
  --chart-4: #33C3FF;
  --chart-5: #B57BFF;
  --sidebar: #24153F;
  --sidebar-foreground: #FFF4FA;
  --sidebar-primary: #FF4D9A;
  --sidebar-primary-foreground: #1B1035;
  --sidebar-accent: #311C52;
  --sidebar-accent-foreground: #FFF4FA;
  --sidebar-border: #FFF4FA;
  --sidebar-ring: #FF4D9A;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Thai Pop Market (thai-pop-market) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400&family=Archivo:wght@400;500;700&family=Sriracha:wght@400&family=Kanit:wght@300;400;500&display=swap
 */
@theme {
  --color-bg: #FFF7EE;
  --color-surface: #FFFFFF;
  --color-surface-2: #FFE4F0;
  --color-text: #1B1035;
  --color-text-muted: #4F4268;
  --color-primary: #FF2E88;
  --color-on-primary: #1B1035;
  --color-secondary: #B6F500;
  --color-on-secondary: #1B1035;
  --color-accent: #FF7A00;
  --color-border: #1B1035;
  --color-success: #127A3A;
  --color-warning: #A85A00;
  --color-danger: #C8102E;
  --color-chart-1: #FF2E88;
  --color-chart-2: #FF7A00;
  --color-chart-3: #7BC400;
  --color-chart-4: #00A3E0;
  --color-chart-5: #7B2CBF;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 6px rgba(27,16,53,0.16);
  --shadow-md: 0 8px 18px rgba(27,16,53,0.18);
  --shadow-lg: 0 16px 34px rgba(27,16,53,0.22);
  --font-heading: "Permanent Marker", "Sriracha", system-ui, sans-serif;
  --font-body: "Archivo", "Kanit", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Kanit", monospace;
}

.dark {
  --color-bg: #170C2B;
  --color-surface: #24153F;
  --color-surface-2: #311C52;
  --color-text: #FFF4FA;
  --color-text-muted: #CDBDE6;
  --color-primary: #FF4D9A;
  --color-on-primary: #1B1035;
  --color-secondary: #C3FF1A;
  --color-on-secondary: #1B1035;
  --color-accent: #FF8A1F;
  --color-border: #FFF4FA;
  --color-success: #5BE38A;
  --color-warning: #FFB54D;
  --color-danger: #FF5A78;
  --color-chart-1: #FF4D9A;
  --color-chart-2: #FF8A1F;
  --color-chart-3: #C3FF1A;
  --color-chart-4: #33C3FF;
  --color-chart-5: #B57BFF;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Thai Pop Market (thai-pop-market). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Permanent+Marker:wght@400&family=Archivo:wght@400;500;700&family=Sriracha:wght@400&family=Kanit:wght@300;400;500&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9686,
            0.9333
          ],
          "hex": "#fff7ee"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.8941,
            0.9412
          ],
          "hex": "#ffe4f0"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0627,
            0.2078
          ],
          "hex": "#1b1035"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.2588,
            0.4078
          ],
          "hex": "#4f4268"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1804,
            0.5333
          ],
          "hex": "#ff2e88"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0627,
            0.2078
          ],
          "hex": "#1b1035"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7137,
            0.9608,
            0
          ],
          "hex": "#b6f500"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0627,
            0.2078
          ],
          "hex": "#1b1035"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0
          ],
          "hex": "#ff7a00"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0627,
            0.2078
          ],
          "hex": "#1b1035"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.4784,
            0.2275
          ],
          "hex": "#127a3a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6588,
            0.3529,
            0
          ],
          "hex": "#a85a00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.0627,
            0.1804
          ],
          "hex": "#c8102e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.1804,
            0.5333
          ],
          "hex": "#ff2e88"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4784,
            0
          ],
          "hex": "#ff7a00"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.7686,
            0
          ],
          "hex": "#7bc400"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0,
            0.6392,
            0.8784
          ],
          "hex": "#00a3e0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4824,
            0.1725,
            0.749
          ],
          "hex": "#7b2cbf"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0902,
            0.0471,
            0.1686
          ],
          "hex": "#170c2b"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.0824,
            0.2471
          ],
          "hex": "#24153f"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1922,
            0.1098,
            0.3216
          ],
          "hex": "#311c52"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9569,
            0.9804
          ],
          "hex": "#fff4fa"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8039,
            0.7412,
            0.902
          ],
          "hex": "#cdbde6"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.6039
          ],
          "hex": "#ff4d9a"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0627,
            0.2078
          ],
          "hex": "#1b1035"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7647,
            1,
            0.102
          ],
          "hex": "#c3ff1a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0627,
            0.2078
          ],
          "hex": "#1b1035"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.1216
          ],
          "hex": "#ff8a1f"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9569,
            0.9804
          ],
          "hex": "#fff4fa"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3569,
            0.8902,
            0.5412
          ],
          "hex": "#5be38a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.7098,
            0.302
          ],
          "hex": "#ffb54d"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.3529,
            0.4706
          ],
          "hex": "#ff5a78"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.302,
            0.6039
          ],
          "hex": "#ff4d9a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.5412,
            0.1216
          ],
          "hex": "#ff8a1f"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7647,
            1,
            0.102
          ],
          "hex": "#c3ff1a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2,
            0.7647,
            1
          ],
          "hex": "#33c3ff"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7098,
            0.4824,
            1
          ],
          "hex": "#b57bff"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 12,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 16,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 22,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 2,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1059,
              0.0627,
              0.2078
            ],
            "hex": "#1b1035",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 2,
            "unit": "px"
          },
          "blur": {
            "value": 6,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1059,
              0.0627,
              0.2078
            ],
            "hex": "#1b1035",
            "alpha": 0.18
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 18,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1059,
              0.0627,
              0.2078
            ],
            "hex": "#1b1035",
            "alpha": 0.22
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 16,
            "unit": "px"
          },
          "blur": {
            "value": 34,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Permanent Marker",
        "Sriracha",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Archivo",
        "Kanit",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Kanit",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 180,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.34,
      1.56,
      0.64,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 1
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!