Thai Retro Poster

Also called: Thai vintage movie poster, Hand-painted Thai poster, Nang Thai retro

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.

“Old cinema poster”Thai & RegionalEra: 1960s–70s Thai cinemaNostalgicBoldPlayfulEdgyNew

Open full screen ↗

thai-retro-poster / landingEN

thai-retro-poster / 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 sm2pxRadius md4pxRadius lg6pxRadius xl10pxDensity×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.

hand-painted posterfat Thai display typeextruded text shadowred yellow teal inkshalftone dotsstarburst badgesun-ray burstaged poster paperribbon banner

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

Not to be confused with

Thai Pop Market →Thai Pop Market is today’s neon plastic street market (hot pink, lime, marker hand-lettering); Thai Retro Poster is a faded 1970s print with fat serif display type, halftone and starbursts.Vintage Analog / Retro Film →Vintage analog film is about photo grain, polaroids and VHS; Thai Retro Poster is about painted typography, flat inks and poster graphics.Risograph Print →Risograph uses two fluoro inks with misregistration on zines; Thai Retro Poster uses red-yellow-teal with fat outlined Thai lettering and cinema-style composition.

On mobile

Keep the paper ground and halftone on the app background only; the featured card becomes a ticket stub with notched edges, and the onboarding art is a sun-ray burst. Use the extruded shadow only on screen titles, not in lists.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinAbril Fatface · 400

The quick brown fox

Heading · ThaiChonburi · 400

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

Body · LatinZilla Slab · 400/500/700

Clear words make shared decisions.

Body · ThaiPridi · 300/400/600

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 4px · lg 6px · xl 10px · pill 999px`
Border	`3px`
Shadow	`5px 5px 0 var(--c-accent)`
Display	`clamp(3rem, 7vw, 6rem)`
Motion	`160ms cubic-bezier(.3,.7,.3,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 Retro Poster (thai-retro-poster) — 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=Abril+Fatface:wght@400&family=Zilla+Slab:wght@400;500;700&family=Chonburi:wght@400&family=Pridi:wght@300;400;600&display=swap
 */
:root {
  --radius: 6px;
  --background: #F2E3C2;
  --foreground: #1E1410;
  --card: #FBF1DA;
  --card-foreground: #1E1410;
  --popover: #FBF1DA;
  --popover-foreground: #1E1410;
  --primary: #C8231E;
  --primary-foreground: #FFF4DA;
  --secondary: #F5B800;
  --secondary-foreground: #1E1410;
  --muted: #EBD3A2;
  --muted-foreground: #5A4434;
  --accent: #EBD3A2;
  --accent-foreground: #1E1410;
  --destructive: #B3201B;
  --border: #1E1410;
  --input: #1E1410;
  --ring: #C8231E;
  --chart-1: #C8231E;
  --chart-2: #12746B;
  --chart-3: #E0A000;
  --chart-4: #1E1410;
  --chart-5: #D9632B;
  --sidebar: #FBF1DA;
  --sidebar-foreground: #1E1410;
  --sidebar-primary: #C8231E;
  --sidebar-primary-foreground: #FFF4DA;
  --sidebar-accent: #EBD3A2;
  --sidebar-accent-foreground: #1E1410;
  --sidebar-border: #1E1410;
  --sidebar-ring: #C8231E;
}

.dark {
  --background: #1B1210;
  --foreground: #F7E8C8;
  --card: #2A1C17;
  --card-foreground: #F7E8C8;
  --popover: #2A1C17;
  --popover-foreground: #F7E8C8;
  --primary: #C8231E;
  --primary-foreground: #FFF4DA;
  --secondary: #F5B800;
  --secondary-foreground: #1E1410;
  --muted: #3A2720;
  --muted-foreground: #CDB693;
  --accent: #3A2720;
  --accent-foreground: #F7E8C8;
  --destructive: #FF6B5B;
  --border: #F2E3C2;
  --input: #F2E3C2;
  --ring: #C8231E;
  --chart-1: #E2402F;
  --chart-2: #3FB3A3;
  --chart-3: #F5B800;
  --chart-4: #F7E8C8;
  --chart-5: #E07A3F;
  --sidebar: #2A1C17;
  --sidebar-foreground: #F7E8C8;
  --sidebar-primary: #C8231E;
  --sidebar-primary-foreground: #FFF4DA;
  --sidebar-accent: #3A2720;
  --sidebar-accent-foreground: #F7E8C8;
  --sidebar-border: #F2E3C2;
  --sidebar-ring: #C8231E;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Thai Retro Poster (thai-retro-poster) — 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=Abril+Fatface:wght@400&family=Zilla+Slab:wght@400;500;700&family=Chonburi:wght@400&family=Pridi:wght@300;400;600&display=swap
 */
@theme {
  --color-bg: #F2E3C2;
  --color-surface: #FBF1DA;
  --color-surface-2: #EBD3A2;
  --color-text: #1E1410;
  --color-text-muted: #5A4434;
  --color-primary: #C8231E;
  --color-on-primary: #FFF4DA;
  --color-secondary: #F5B800;
  --color-on-secondary: #1E1410;
  --color-accent: #12746B;
  --color-border: #1E1410;
  --color-success: #2E6B2F;
  --color-warning: #A35F00;
  --color-danger: #B3201B;
  --color-chart-1: #C8231E;
  --color-chart-2: #12746B;
  --color-chart-3: #E0A000;
  --color-chart-4: #1E1410;
  --color-chart-5: #D9632B;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --shadow-sm: 3px 3px 0 var(--color-border);
  --shadow-md: 5px 5px 0 var(--color-accent);
  --shadow-lg: 8px 8px 0 var(--color-primary);
  --font-heading: "Abril Fatface", "Chonburi", system-ui, sans-serif;
  --font-body: "Zilla Slab", "Pridi", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Pridi", monospace;
}

.dark {
  --color-bg: #1B1210;
  --color-surface: #2A1C17;
  --color-surface-2: #3A2720;
  --color-text: #F7E8C8;
  --color-text-muted: #CDB693;
  --color-primary: #C8231E;
  --color-on-primary: #FFF4DA;
  --color-secondary: #F5B800;
  --color-on-secondary: #1E1410;
  --color-accent: #3FB3A3;
  --color-border: #F2E3C2;
  --color-success: #7CC27E;
  --color-warning: #F0A93A;
  --color-danger: #FF6B5B;
  --color-chart-1: #E2402F;
  --color-chart-2: #3FB3A3;
  --color-chart-3: #F5B800;
  --color-chart-4: #F7E8C8;
  --color-chart-5: #E07A3F;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Thai Retro Poster (thai-retro-poster). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.8902,
            0.7608
          ],
          "hex": "#f2e3c2"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9451,
            0.8549
          ],
          "hex": "#fbf1da"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9216,
            0.8275,
            0.6353
          ],
          "hex": "#ebd3a2"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0784,
            0.0627
          ],
          "hex": "#1e1410"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3529,
            0.2667,
            0.2039
          ],
          "hex": "#5a4434"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.1373,
            0.1176
          ],
          "hex": "#c8231e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9569,
            0.8549
          ],
          "hex": "#fff4da"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.7216,
            0
          ],
          "hex": "#f5b800"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0784,
            0.0627
          ],
          "hex": "#1e1410"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.4549,
            0.4196
          ],
          "hex": "#12746b"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0784,
            0.0627
          ],
          "hex": "#1e1410"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.4196,
            0.1843
          ],
          "hex": "#2e6b2f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6392,
            0.3725,
            0
          ],
          "hex": "#a35f00"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.1255,
            0.1059
          ],
          "hex": "#b3201b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.1373,
            0.1176
          ],
          "hex": "#c8231e"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0706,
            0.4549,
            0.4196
          ],
          "hex": "#12746b"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6275,
            0
          ],
          "hex": "#e0a000"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0784,
            0.0627
          ],
          "hex": "#1e1410"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.3882,
            0.1686
          ],
          "hex": "#d9632b"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.0706,
            0.0627
          ],
          "hex": "#1b1210"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1098,
            0.0902
          ],
          "hex": "#2a1c17"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.1529,
            0.1255
          ],
          "hex": "#3a2720"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9098,
            0.7843
          ],
          "hex": "#f7e8c8"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8039,
            0.7137,
            0.5765
          ],
          "hex": "#cdb693"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7843,
            0.1373,
            0.1176
          ],
          "hex": "#c8231e"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9569,
            0.8549
          ],
          "hex": "#fff4da"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.7216,
            0
          ],
          "hex": "#f5b800"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0784,
            0.0627
          ],
          "hex": "#1e1410"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.702,
            0.6392
          ],
          "hex": "#3fb3a3"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.949,
            0.8902,
            0.7608
          ],
          "hex": "#f2e3c2"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.7608,
            0.4941
          ],
          "hex": "#7cc27e"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.6627,
            0.2275
          ],
          "hex": "#f0a93a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.4196,
            0.3569
          ],
          "hex": "#ff6b5b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8863,
            0.251,
            0.1843
          ],
          "hex": "#e2402f"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.702,
            0.6392
          ],
          "hex": "#3fb3a3"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9608,
            0.7216,
            0
          ],
          "hex": "#f5b800"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9098,
            0.7843
          ],
          "hex": "#f7e8c8"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.4784,
            0.2471
          ],
          "hex": "#e07a3f"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 4,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 6,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 10,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 999,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 3,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1176,
              0.0784,
              0.0627
            ],
            "hex": "#1e1410"
          },
          "offsetX": {
            "value": 3,
            "unit": "px"
          },
          "offsetY": {
            "value": 3,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.0706,
              0.4549,
              0.4196
            ],
            "hex": "#12746b"
          },
          "offsetX": {
            "value": 5,
            "unit": "px"
          },
          "offsetY": {
            "value": 5,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.7843,
              0.1373,
              0.1176
            ],
            "hex": "#c8231e"
          },
          "offsetX": {
            "value": 8,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 0,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Abril Fatface",
        "Chonburi",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Zilla Slab",
        "Pridi",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Pridi",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 160,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0.7,
      0.3,
      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!