# Thai Modern Heritage > Ivory paper or lacquer black, temple red and leaf gold, framed with Prajam Yam motifs and pointed-arch shapes — Thai craft in a clean modern layout. - Nickname: Gold & lacquer - Also called: Contemporary Thai, Thai Luxe - Category: Thai & Regional - Moods: Luxury, Calm, Trustworthy, Nostalgic - Industries: Travel & Hospitality, Luxury & Premium, Food & Restaurant, Government & Nonprofit, Fitness & Wellness - Style page: https://uilingo.dev/styles/thai-modern-heritage/ Borrowing from lai rot nam (gold-on-lacquer) cabinets and temple architecture, this style pairs a warm ivory or lacquer-black ground with gold hairline double frames, a repeating Prajam Yam (four-petal) pattern at low opacity and pointed temple-window arches for imagery. Headlines use a high-contrast Thai serif; body text stays in a looped, highly readable Thai sans so it works for real products, not just posters. ## Best for - Boutique hotels, spas and Thai restaurants - Cultural, tourism and government campaigns - Premium Thai product brands (tea, silk, crafts) - Festive and ceremonial landing pages ## Avoid for - Developer tools and dense dashboards - Global brands with no Thai connection - Playful kids apps ## Do - Keep the motif layer at 16% (light) / 12% (dark) with 1px strokes, never behind body text inside cards - Use leaf gold for lines and small accents; temple red for ink (arch art, icons, chart line) and the one primary plaque button per view - Give Thai text generous line-height (1.75+) ## Don't - Don’t use clip-art temples or elephants - Don’t set long body text in decorative or script fonts - Avoid bright yellow “gold” — use muted leaf gold ## Audit Passed after 6 rounds · builder claude-haiku-5-5 · auditor claude-opus-5-5 ## 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 Modern Heritage" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Ivory paper or lacquer black, temple red and leaf gold, framed with Prajam Yam motifs and pointed-arch shapes — Thai craft in a clean modern layout. Design keywords: lacquer & gold, Prajam Yam motif, temple-arch frames, gold double hairline, temple red, high-contrast Thai serif, ivory paper ground, ceremonial calm. ## Visual language Gold-on-lacquer Thai craft translated into a calm modern layout. The ground is warm ivory paper (#FBF6EC) with a faint repeating Prajam Yam (four-petal diamond) pattern drawn in thin leaf-gold lines, and a few deep lacquer-brown (#2A1A12) blocks carry ivory text. Imagery and hero panels sit inside pointed temple-window arches outlined by a double gold hairline, temple red #8E1B1B is the brand ink and the single main action, and headlines are a high-contrast calligraphic serif with a looped Thai body face. It feels ceremonial, quiet and premium rather than touristy. ## Signature details (must be visible) - Prajam Yam texture: one background layer at 16% opacity with 1px strokes, so it reads as a faint texture — background only, never inside lists, cards or the CTA. Draw the tile as an inline SVG data-URI in CSS (no remote URLs): 56×56, diamond M28 6 L50 28 L28 50 L6 28Z, four almond petals around the centre (petals: M28 16c4 4 4 8 0 12c-4-4-4-8 0-12z M28 40c4-4 4-8 0-12c-4 4-4 8 0 12z M16 28c4-4 8-4 12 0c-4 4-8 4-12 0z M40 28c-4-4-8-4-12 0c4 4 8 4 12 0z) and a r=1 centre dot, stroke #B8892B 1px, fill none - Temple-arch frames: border-radius 50% 50% 4px 4px / V V 4px 4px (rounded dome top, square bottom) with the vertical radius V set per use — hero frame 22%, showcase frame 18%, feature art 28%, article figure 34%. Every arch has a double line: its own 1px solid #B8892B border plus outline: 1px solid #B8892B; outline-offset: 6px (the outline follows border-radius in current browsers). Arch frames that hold content pad their top by about V × the frame's height so nothing touches the dome (hero 22% × ≈600px ≈ 130px; showcase 18% × ≈500px ≈ 90px) - Arch art fills: temple red #8E1B1B with a gold glow rising from the bottom (radial gradient of #B8892B at 55% centred at 50% 120%) and a gold #B8892B line icon in the middle — the icon inside every red arch (feature art, onboarding art, red avatar or logo tiles) is always gold, never the red icon colour used on ivory, which disappears on red. Arch art is roughly 4:3 landscape (aspect-ratio 4/3, max 420×320px) — never a tall slab - Gold double hairlines: feature and price cards carry an inner 1px #D9C49A outline inset 6px (outline-offset: -6px); dividers are 3px tall with 1px rules top and bottom; the footer opens on a 3px double gold border. If you draw an inset frame with ::after instead of a negative outline-offset, give it pointer-events: none and put the card content at position: relative; z-index: 1 so it stays clickable and above the line - Lacquer surfaces — the CTA block, the featured pricing card, the mobile featured card and outgoing chat bubbles — are #2A1A12 with a 1px #B8892B outline inset 7–10px, and every heading, lead, price and list item on them is ivory #FBF6EC; muted text there is 75% ivory (color-mix(in srgb, #FBF6EC 75%, transparent)). Never let a global heading colour (#2A1A12) leak onto them - Primary button: red #8E1B1B with ivory #FFF8EC text and box-shadow: inset 0 0 0 1px #8E1B1B, inset 0 0 0 3px #FFF8EC, inset 0 0 0 4px #B8892B. These are cumulative spreads, so the visible result is a 1px red edge, a 2px ivory band, then a 1px gold line — a framed lacquer plaque, 2px radius. Hover: background color-mix(in srgb, #8E1B1B 88%, #fff); pressed: #741515 + translateY(1px) - Ornaments: eyebrow text in a darker text gold #8A6414 (≈5:1 on ivory; keep #B8892B for lines and ornaments), flanked by ❖ glyphs in #B8892B; uppercase + 0.18em for Latin only, Thai eyebrows use letter-spacing 0. The centred section heads — features, testimonials, trust, pricing and faq — end with a small gold ◆ under the title; the showcase head is left-aligned beside its arch. Pull-quotes are centred red text between rows of '❖ ❖ ❖'. ❖ and ◆ are the only Unicode ornaments; every functional icon is SVG - Red #8E1B1B is the brand ink (arch art, icons, chart line 1, pull-quote text). The red plaque button appears ONCE per viewport: hero, form submit, dashboard primary action. The nav CTA is always the gold-outline secondary button (1px #B8892B, dark text), even where the markup marks it as a primary button. On lacquer surfaces the main action is a solid gold #B8892B button with #1C120C text (featured pricing card, CTA block); any additional secondary button on lacquer is transparent with a 1px #B8892B border and ivory #FBF6EC text. Other plans use the gold-outline secondary ## Design tokens — use these exact values Colours (light mode): - background #FBF6EC - surface #FFFDF8 - surface-2 #F3EAD7 - text #2A1A12 - text-muted #6B5646 - primary #8E1B1B (text on it #FFF8EC) - secondary #B8892B (text on it #1C120C) - accent #1F5C4A - border #D9C49A - success #2F6B3A · warning #A4660A · danger #A61B1B - chart series #8E1B1B, #B8892B, #1F5C4A, #3A3F7A, #6B5646 Radius: sm 2px, md 4px, lg 6px, xl 10px, pill 999px Border width: 1px Shadows: sm `0 1px 2px rgba(60,35,10,0.08)`, md `0 8px 24px rgba(60,35,10,0.10)`, lg `0 20px 50px rgba(60,35,10,0.16)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.1 density Motion: 320ms cubic-bezier(.33,0,.15,1) ## Typography (Latin + Thai) - Headings: Cormorant Garamond 600/700 with Thai fallback Taviraj 500/600 - Body: Source Sans 3 400/600 with Thai fallback Sarabun 300/400/600 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Source+Sans+3:wght@400;600&family=Taviraj:wght@500;600&family=Sarabun:wght@300;400;600&display=swap - CSS stacks: heading `"Cormorant Garamond", "Taviraj", system-ui, sans-serif`; body `"Source Sans 3", "Sarabun", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.75rem, 6vw, 5rem), heading weight 600, 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: Taviraj’s high-contrast strokes echo Cormorant’s calligraphic serif; looped Sarabun keeps body text traditional yet very readable beside Source Sans. ## Components - Buttons: the primary is the red plaque from the signature with generous 24px horizontal padding (an icon-only plaque is a square with no side padding, and that includes the stepper buttons `.ui-stepper .ui-btn`, which carry no `--icon` class, so the + icon is never squeezed out); secondary is transparent with a 1px leaf-gold #B8892B border and dark #2A1A12 text (ivory on lacquer). Hover tint = background color-mix(in srgb, #B8892B 12%, transparent) on cards and secondary buttons; links hover to #8A6414 with a 1px gold underline. Slow, ceremonial motion: 320ms cubic-bezier(.33,0,.15,1); nothing bounces - Card: ivory #FFFDF8 surface, 1px #D9C49A border, 4px radius, soft 0 1px 2px rgba(60,35,10,.08) shadow, with the inner hairline frame 6px inside. Keep 16px+ padding so content clears the 6–10px inset frames - Featured pricing card: the lacquer surface from the signature (#2A1A12, gold outline inset 7px, ivory name, price, blurb and list, gold check icons) holding the solid gold #B8892B button with #1C120C text and a solid gold 'Most popular' badge - Inputs: ivory surface, 1px #D9C49A border, 2px radius; focus turns the border gold with a 3px gold ring at 25% - Badges and chips: badges have 2px radius, transparent with a 1px currentColor border, and the solid badge is gold #B8892B with dark text; chips have a 1px gold-beige border and the active chip is solid temple red with ivory text - Icons: Tabler outline at a 1.5px stroke with round caps, in red #8E1B1B or gold #B8892B — never Unicode glyphs or emoji. Icon tiles (feature cards, list rows) are small domes (border-radius 50% 50% 3px 3px) with a 1px gold border and a red icon - Nav and sidebar: ivory nav bar at 92% opacity closed by a 1px #D9C49A bottom rule, a red dome-shaped logo with gold mark, Latin links at 0.04em tracking (Thai links 0) and a gold-outline CTA. Sidebar active item: red text with a 3px gold bar on the left edge, no fill - Charts: red primary line with a vertical red #8E1B1B 18%→0% area fill under line 1 and a dashed gold comparison line; progress bars fill with a two-stop red → gold gradient (gold only on lacquer cards) - Gradients: allowed are the two-stop red→gold progress fill, the radial gold glow inside red arches, and the vertical red #8E1B1B 18%→0% area fill under chart line 1. Banned: shiny multi-stop metallic gold on text, borders or buttons - Font stacks and figures: override the generated heading stack — use "Cormorant Garamond", "Taviraj", Georgia, serif (never system-ui). Cormorant defaults to old-style figures, so set font-variant-numeric: lining-nums on every heading and lining-nums tabular-nums on stats, KPIs, prices and table numbers. Declare it AFTER any `font:` shorthand on the same element (or in a later rule), because the shorthand resets font-variant-numeric - Testimonials: three ivory quote cards (red quote mark, avatar, name) under a centred head; on article pages the pull-quote is centred red text between ❖ rows. Checklists use red check icons (gold on lacquer). FAQ: ruled rows separated by 1px #D9C49A rules (top rule on the first row) and a gold ❖ marker on the right that rotates 45deg when open (320ms). Footer: 3px double gold top border, 4 link columns, ❖ divider - Dark mode (optional): ground becomes lacquer black #14100D with the Prajam Yam layer at 12%; lacquer surfaces (CTA block, featured pricing card, mobile featured card) turn temple red #C9372C with #FFF8EC text and keep the gold outline; gold lines switch to #D4AF5A and eyebrow text uses #D4AF5A - Chat bubbles: incoming = ivory #FFFDF8 with a 1px #D9C49A border, 4px radius (2px on the tail corner, bottom-left) and the soft card shadow; outgoing = lacquer #2A1A12 with ivory #FBF6EC text and a 1px #B8892B hairline inset 4px (outline-offset -4px), tail bottom-right — never red, because red stays the single primary action (the send plaque). Meta (time, read ticks) 0.7rem in muted text, 75% ivory on lacquer, ticks gold. The day divider is a single 1px gold rule drawn by a ::before on the row with `z-index: 0`, and a centred label at `position: relative; z-index: 1` with an ivory background and 12px side padding, so the rule never crosses the text. An attachment card inside a bubble is an ivory tile with a dome icon tile. Quick replies are gold-outline chips - Sign-in: one centred ivory card with the inner gold hairline frame (inset 6px), the ❖-flanked gold eyebrow, a serif title, inputs per the input recipe, the red plaque as the only red button (full width), gold-outline "continue with" buttons, and the "or" divider as the 3px double gold rule with its label centred on ivory - Settings: the ivory dashboard sidebar (active item red text with a 3px gold left bar); each group is an ivory card with the inner hairline frame and 1px #D9C49A row dividers; switches have an ivory track with a 1px gold border and turn temple red with an ivory knob when on. The danger action is transparent with a 1px danger #A61B1B border and danger text — never a second red plaque - States (empty, error, 404) and alerts: each state centres a small temple-arch frame (V 34%, double gold line, about 120×100px) holding a red line icon, then a serif title, muted copy and one red plaque action. Alerts are ivory panels with a 1px border, a 3px left bar in success/warning/danger and the matching thin icon - Article: the inline figure is a temple arch (V 34%) spanning the full text column at the template's 16:9 — the 420×320px cap is for landing feature art only; related-article art keeps the demo's hue rotation — never set `filter: none` on `.ui-figure__art`. ## 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: two columns — copy left, product visual right. Navigation: split style. Sections in order: hero → features → showcase → testimonials → trust → pricing → faq → cta. Feature section as alternating. Split hero: left column holds the ❖-flanked gold eyebrow, a large Cormorant/Taviraj serif headline in 600 weight, a lead and a red plaque button (the only red button in view) beside a gold-outlined secondary; right column is a temple-arch frame (V 22%, double gold hairline, interior surface-2 #F3EAD7 at 70%, ≈130px top padding) containing the product chart and stat cards. The nav is split: logo left, links centred, gold-outline CTA right. Features open on a centred head, then alternate left/right, each pairing a red arch artwork (≈4:3, capped at 420×320px) with copy that opens on a small dome ornament tile (about 28×32px, border-radius 50% 50% 3px 3px, 1px gold border, a red ◆ centred; the copy has no element for it, so draw it with a ::before) above the serif title and lead. Beige #F3EAD7 bands between 1px gold rules are showcase, trust and faq (every second section after the hero). Showcase: a left-aligned eyebrow, serif title and checklist with red check icons beside a wide temple-arch frame (V 18%, double gold line, ≈90px top padding) holding tabs and a product mock. Testimonials, trust, pricing and faq use centred heads with the gold ◆. Trust: 4 ivory tiles with a 1px gold border, a gold line icon and a one-line credential. Pricing: the featured plan is the lacquer card with ivory text and a gold button; the other plans use gold-outline secondary buttons. The CTA is a lacquer block with a 1px gold frame inset 10px, an ivory serif headline and lead, and a gold #B8892B button with #1C120C text. Dashboards keep the ivory ground with an ivory sidebar, gold-accented KPI cards and red/gold charts; the single red plaque is the dashboard's primary action. Sign-in, settings and states pages keep the ivory Prajam Yam ground and the split nav; their cards follow the card recipe with the inner hairline frame. ## Icons - Library: Tabler (MIT, https://tabler.io/icons), variant "Outline". Every icon comes from this library in this variant: do not mix libraries, draw icons or use emoji. - Package: the SVG files of @tabler/icons inlined. SVG path in @tabler/icons: `outline/{name}.svg`. - Paint: stroke icons — stroke="currentColor", fill="none", round caps and joins, so they take the text colour; keep one stroke width across the UI. - Usage: 1.5px stroke everywhere: 20px in buttons, list rows and icon tiles, 22px in the tab bar. Red #8E1B1B on ivory, gold #B8892B on lacquer, ivory on red. ## Content Use realistic product copy (fictional brand) suited to: Boutique hotels, spas and Thai restaurants. Make the UI bilingual: Thai and English, with a visible TH/EN switch that swaps every string. Set the lang attribute to match. ## Do - Keep the motif layer at 16% (light) / 12% (dark) with 1px strokes, never behind body text inside cards - Use leaf gold for lines and small accents; temple red for ink (arch art, icons, chart line) and the one primary plaque button per view - Give Thai text generous line-height (1.75+) ## Don't - Don’t use clip-art temples or elephants - Don’t set long body text in decorative or script fonts - Avoid bright yellow “gold” — use muted leaf gold - Literal clip-art temples, elephants, Thai-silk photo textures or embossed 3D gold — that is Skeuomorphism; craft is abstracted into flat lines and motifs - A culture-neutral serif magazine grid with no motifs, arches or red/gold symbolism — that is Editorial Grid Magazine - Bright yellow #FFD700-style gold or shiny multi-stop metallic gold gradients on text, borders or buttons — use muted leaf gold #B8892B as thin lines - More than one red button per view, or filling large areas with gold — red is ink for art, icons and charts, and the single primary plaque - Dark #2A1A12 text on lacquer surfaces, old-style figures in prices or headings, or Unicode glyphs standing in for icons - Repeating the Prajam Yam pattern inside cards, lists or the CTA — one quiet background layer is enough - Large radii, pill cards or playful bounce animations — corners stay 2–6px except the arch tops ## Stack notes One self-contained HTML file with a