# Thai Retro Poster > Hand-painted 60s–70s Thai movie poster: fat high-contrast Thai display type with outlined drop shadows, red-yellow-teal on aged paper, halftone and starbursts. - Nickname: Old cinema poster - Also called: Thai vintage movie poster, Hand-painted Thai poster, Nang Thai retro - Category: Thai & Regional - Moods: Nostalgic, Bold, Playful, Edgy - Industries: Media & Entertainment, Creative & Portfolio, Food & Restaurant, Travel & Hospitality, Gaming - Style page: https://uilingo.dev/styles/thai-retro-poster/ Inspired by the hand-painted posters that hung outside Thai stand-alone cinemas, this style sets headlines in a fat, high-contrast looped Thai display face with a hard yellow-and-black extruded shadow, on yellowed poster paper with a halftone dot screen. Poster red, marigold yellow and deep teal are the only inks; frames are bold black lines with an inner rule, announcements sit in rotated starbursts and ribbon banners, and hero sections burst out of sun-ray backgrounds. Body text stays in a sturdy slab serif so the drama never hurts reading. ## Best for - Film, music and festival campaigns - Retro-themed restaurants, bars and street-food brands - Streaming catalogues of classic Thai content - Event and ticketing landing pages ## Avoid for - Banking, healthcare and government services - Dense data tools and admin back-offices - Minimal premium brands ## Do - Use three inks only — poster red #C8231E, marigold #F5B800, teal #12746B — plus black and paper - Give display type a hard 3–6px yellow + black stacked shadow, no blur - Frame cards with a 3px black border and an inner 1px rule - Put one starburst or ribbon per view to shout the key offer ## Don't - No glossy gradients, glass or soft blur shadows - Don’t set body text in the display face - Don’t letter-space or upper-case Thai - Avoid pure white — keep the warm paper tone ## 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 Retro Poster" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Hand-painted 60s–70s Thai movie poster: fat high-contrast Thai display type with outlined drop shadows, red-yellow-teal on aged paper, halftone and starbursts. Design keywords: hand-painted poster, fat Thai display type, extruded text shadow, red yellow teal inks, halftone dots, starburst badge, sun-ray burst, aged poster paper, ribbon banner. ## Visual language A hand-painted Thai cinema poster from the late 1960s–70s turned into an interface: yellowed poster paper (#F2E3C2) under a fine halftone dot screen and a faint brown vignette, printed in three inks only — poster red #C8231E, marigold #F5B800 and deep teal #12746B — plus warm black #1E1410. Headlines are fat, high-contrast display letters (Chonburi for Thai, Abril Fatface for Latin) painted red with a hard marigold-then-black stacked shadow, bursting out of sun-ray backgrounds; announcements live in rotated starbursts and teal ribbon banners. Frames are bold 3px black lines with a thin inner rule, like a printed poster border. Loud, nostalgic and theatrical, but body copy stays in a calm slab serif. ## Signature details (must be visible) - Extruded poster lettering: display text colour #C8231E with text-shadow 3px 3px 0 #F5B800, 6px 6px 0 #1E1410 (h1: 2/4px, h2: 2px yellow only); hero headline also gets a 1px black text stroke - Paper ground: #F2E3C2 with a halftone screen radial-gradient(rgba(30,20,16,.16) 1.1px, transparent 1.6px) at 7px and a soft brown edge vignette - Sun-ray burst: repeating-conic-gradient (7° marigold at 38% / 7° transparent) radiating from behind the hero headline, faded out with a radial mask; full-strength red or teal rays inside art panels and the CTA - 28-point starburst (clip-path polygon) in marigold with red display text, rotated 12°, for 'NOW SHOWING' style call-outs and step numbers - Ribbon banner eyebrow: teal fill, paper text, notched ends via clip-path polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%) - Poster frames: 3px #1E1410 border + 1px inner outline at −8px offset on every card, 2px corner radius - Double rules: 6px double black line under the nav, above the footer and around the article byline ## Design tokens — use these exact values Colours (light mode): - background #F2E3C2 - surface #FBF1DA - surface-2 #EBD3A2 - text #1E1410 - text-muted #5A4434 - primary #C8231E (text on it #FFF4DA) - secondary #F5B800 (text on it #1E1410) - accent #12746B - border #1E1410 - success #2E6B2F · warning #A35F00 · danger #B3201B - chart series #C8231E, #12746B, #E0A000, #1E1410, #D9632B Radius: sm 2px, md 4px, lg 6px, xl 10px, pill 999px Border width: 3px Shadows: sm `3px 3px 0 var(--c-border)`, md `5px 5px 0 var(--c-accent)`, lg `8px 8px 0 var(--c-primary)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1 density Motion: 160ms cubic-bezier(.3,.7,.3,1) ## Typography (Latin + Thai) - Headings: Abril Fatface 400 with Thai fallback Chonburi 400 - Body: Zilla Slab 400/500/700 with Thai fallback Pridi 300/400/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Abril+Fatface:wght@400&family=Zilla+Slab:wght@400;500;700&family=Chonburi:wght@400&family=Pridi:wght@300;400;600&display=swap - CSS stacks: heading `"Abril Fatface", "Chonburi", system-ui, sans-serif`; body `"Zilla Slab", "Pridi", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(3rem, 7vw, 6rem), heading weight 400, heading tracking 0.005em (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: Chonburi and Abril Fatface are both fat, high-contrast display faces with ball terminals, straight off a painted poster; Pridi’s slab-ish looped Thai matches Zilla Slab for sturdy, print-like body copy. ## Components - Primary button: red #C8231E, paper text, 3px black border and an inner paper hairline (inset 0 0 0 2px red, inset 0 0 0 3.5px paper) like a marquee sign; Latin labels upper-case with 0.1em tracking - Secondary button: marigold with black text and an inner black hairline; ghost = underlined text - Cards: paper surface #FBF1DA, framed as above; feature icons sit in 2px-outlined circles rotating marigold / teal / red; hover tilts −0.6° and drops a 6px teal offset shadow - Highlighted pricing card and mobile featured card: red with a light halftone overlay, marigold title and inner rule - Mobile featured card = cinema ticket: notched semicircles cut from both sides with a mask, 2px dashed marigold inner border - Badges: outlined stamps (2px currentColor, upper-case Latin) in teal, amber, red; the 'popular' badge is a tilted marigold sticker in the display face - Inputs: paper fill, 2px black border, square; focus = teal border + 4px marigold offset shadow - Navigation: paper bar, display-face brand in red, upper-case tracked links (Latin), current link underlined with a wavy marigold line - Dashboard: black top bar with paper links and a marigold active tab; KPI numbers in the display face (red / teal / black); bar chart bars outlined in black with a halftone texture; dashed table rules - Tab bar: paper with a 3px black top rule; the active icon sits in a marigold circle with a black outline ## 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: poster-sized headline that fills the viewport width, visual below. Navigation: split style. Sections in order: hero → features → showcase → testimonials → pricing → cta. Feature section as grid. Poster hero: everything centred — teal ribbon eyebrow, a very large two-to-three-line painted headline over sun rays, a starburst stuck to the top-right corner, a short lead, two marquee buttons, then the product shot framed below like a lobby card. Sections alternate paper and darker ochre paper with halftone, separated by 3px black rules; centred section titles are red display type with a ★ ★ ★ ornament. The closing CTA is a red sun-ray panel with a marigold inner frame and yellow headline. Dashboards keep the paper ground with a black top bar. ## Content Use realistic product copy (fictional brand) suited to: Film, music and festival campaigns. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Use three inks only — poster red #C8231E, marigold #F5B800, teal #12746B — plus black and paper - Give display type a hard 3–6px yellow + black stacked shadow, no blur - Frame cards with a 3px black border and an inner 1px rule - Put one starburst or ribbon per view to shout the key offer ## Don't - No glossy gradients, glass or soft blur shadows - Don’t set body text in the display face - Don’t letter-space or upper-case Thai - Avoid pure white — keep the warm paper tone - Neon or fluorescent colours, hot pink and lime (that is Thai Pop Market) - Glossy gradients, glass, blur or soft drop shadows - Photo grain, polaroid frames or VHS overlays (vintage film) - Body text in the display face, or Thai text with letter-spacing / upper-case - Pure white backgrounds — keep the aged paper tone - Hard black offset shadows on every component (that reads as neubrutalism); frames and inner rules carry the structure ## Stack notes One self-contained HTML file with a