# Thai Pop Market > 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. - Nickname: Talad neon - Also called: Bangkok street market, Talad Thai pop, Street-stall UI - Category: Thai & Regional - Moods: Playful, Bold, Friendly, Edgy - Industries: Food & Restaurant, E‑commerce, Travel & Hospitality, Creative & Portfolio, Media & Entertainment - Style page: https://uilingo.dev/styles/thai-pop-market/ 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 ## Audit Passed after 1 round · builder unknown · auditor unknown ## Prompt Paste this into any coding agent. Composed for: Landing page, Plain HTML + CSS, Thai + English, light mode. For another page, stack, language or mode, use the prompt builder on the style page. ```markdown # Build a landing web page in the "Thai Pop Market" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line 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. Design keywords: hot pink lime orange, marker hand-lettering, fluoro card signs, striped awning, price swing tags, die-cut stickers, plastic basket lattice, night-market energy. ## Visual language A Bangkok street and night market on screen: warm white ground (#FFF7EE) with a faint pink plastic-basket lattice, and on it neon plastic colours — hot pink #FF2E88, lime #B6F500, orange #FF7A00 — used as fluorescent card signs hand-lettered in marker (Permanent Marker / Sriracha), candy-striped scalloped awnings, swing-tag prices with a punched hole and die-cut stickers with a white edge, everything slightly rotated as if taped up by the stall owner. Text and outlines are a deep purple-black ink (#1B1035), never pure black. Loud, cheerful and very local, but body copy stays in a clean sans (Archivo / Kanit) so menus and carts read easily. ## Signature details (must be visible) - Striped scalloped awning: repeating-linear-gradient(90deg, #FF2E88 0 28px, #FFFFFF 28px 56px) masked with a row of 14px-radius semicircles; under the nav (with a 2px ink drop-shadow on the parent so the scallops read), on top of feature cards (pink / orange / lime in turn), the CTA and under the mobile status bar - Fluoro sign cards: lime, pink or orange fill with ink text, marker headline, rotated −0.6° to 1°, a strip of semi-transparent tape (rgba(255,255,255,.55), 46–80px wide) stuck across the top edge - Swing-tag prices: lime tag clip-path polygon(14px 0,100% 0,100% 100%,14px 100%,0 50%) with a punched hole (radial-gradient ring at 17px 50%), marker numerals, rotated −3°; list prices on mobile are smaller pink / orange / lime tags - Die-cut stickers: badges, buttons and the active tab icon get box-shadow 0 0 0 3px #FFFFFF, 0 6px 14px rgba(27,16,53,.25) and a −4° to −8° tilt; a round 92px hot-pink 'HOT!' sticker (Thai: 'best seller' in Sriracha) overlaps the hero sign - Marker headlines (Permanent Marker for Latin, Sriracha for Thai) with a hot-pink highlighter swash behind the key phrase (62%–90% of the line height) - Plastic-basket lattice background: two 22px grids of 5px pink bars at 7% opacity - Testimonials pinned like notes: pale-yellow cards alternately rotated −1.2° / 1°, a lime tape strip on top ## Design tokens — use these exact values Colours (light mode): - background #FFF7EE - surface #FFFFFF - surface-2 #FFE4F0 - text #1B1035 - text-muted #4F4268 - primary #FF2E88 (text on it #1B1035) - secondary #B6F500 (text on it #1B1035) - accent #FF7A00 - border #1B1035 - success #127A3A · warning #A85A00 · danger #C8102E - chart series #FF2E88, #FF7A00, #7BC400, #00A3E0, #7B2CBF Radius: sm 6px, md 12px, lg 16px, xl 22px, pill 999px Border width: 2px Shadows: sm `0 2px 6px rgba(27,16,53,0.16)`, md `0 8px 18px rgba(27,16,53,0.18)`, lg `0 16px 34px rgba(27,16,53,0.22)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 180ms cubic-bezier(.34,1.56,.64,1) ## Typography (Latin + Thai) - Headings: Permanent Marker 400 with Thai fallback Sriracha 400 - Body: Archivo 400/500/700 with Thai fallback Kanit 300/400/500 - Google Fonts URL: 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 - CSS stacks: heading `"Permanent Marker", "Sriracha", system-ui, sans-serif`; body `"Archivo", "Kanit", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.8rem, 6.4vw, 5.4rem), heading weight 400, heading tracking 0 (Latin only), uppercase small labels (Latin only). - Thai rules: body line-height ≥ 1.7, headings ≥ 1.3; never apply negative letter-spacing or condensed tracking to Thai; do not fake-bold or italicise Thai; keep Thai text at least 1px larger than the equivalent Latin size when they sit side by side. - Why this pairing: 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. ## Components - Buttons: pill, 2px ink border, 700 upper-case Latin labels (Thai normal case); primary hot pink, secondary lime, accent orange — all with the white die-cut sticker edge; hover rotates −2° and scales 1.03 with a springy ease - Cards: white, 2px ink border, 16px radius, soft lift shadow 0 8px 18px rgba(27,16,53,.18); feature cards carry the awning top band; icons sit in neon circles with a white gap and an ink ring - Eyebrow: small orange fluoro sign in marker type, rotated −2°, with tape - Badges: neon-tint pills with dark same-hue text; the featured badge is a lime sticker in marker type - Inputs: white, 2px ink border, 12px radius; focus = 4px hot-pink ring at 45% - Checked states: checkbox hot pink with ink tick; radio card turns pale pink with a 4px pink offset; switch on = lime with an ink knob; segmented selection = lime with ink inset ring - Progress: ink-outlined track with pink/orange 12px candy stripes - Navigation: white bar, marker brand with a tilted pink sticker logo, the current link is a tilted lime label; awning hangs below - Dashboard: deep ink sidebar with a tilted hot-pink sticker for the active item; KPI cards with a coloured tape strip on top and marker numerals; heatmap in hot pink; dashed table rules - Mobile tab bar: floating ink pill; the active icon is a hot-pink sticker circle with a white edge, rotated −8° ## Layout for this web page Marketing landing page: top navigation, hero with headline/sub-headline/two CTAs and a product visual, then the content sections, and a footer. Hero: a bento grid where the headline is the largest tile and stats/features fill the others. Navigation: bar style. Sections in order: hero → logos → features → showcase → testimonials → pricing → faq → cta. Feature section as grid. Bento hero made of market signs: the big tile is a lime sign holding the marker headline, lead and sticker buttons with the round 'HOT!' sticker on its corner; neighbouring tiles are an orange stat sign, a white stat card and a pink feature sign, each slightly rotated. Then a logo row in marker type with alternating tilts, feature cards with awning tops on a pale-pink section, a tabbed showcase, pinned testimonial notes, pricing with swing-tag prices, a dashed FAQ and an orange CTA with an awning across its top. ## Content Use realistic product copy (fictional brand) suited to: Street food, delivery and restaurant apps. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## 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 - Muted, pastel, earthy or luxury palettes - Long paragraphs in the marker script - Hard black offset shadows on every element (neubrutalism) — use white die-cut edges and soft lift instead - Faded paper, halftone and fat serif display (that is Thai Retro Poster) - Random collage clutter with no system (Gen-Z chaos) — stick to sign, tag, sticker and awning - Temple, elephant or tuk-tuk clip-art ## Stack notes One self-contained HTML file with a