Thai Modern Heritage

Also called: Contemporary Thai, Thai Luxe

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.

“Gold & lacquer”Thai & RegionalEra: 2020s (rooted in Rattanakosin craft)LuxuryCalmTrustworthyNostalgicNew

Open full screen ↗

thai-modern-heritage / landingEN

thai-modern-heritage / 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

Style palettes

UI Lingo pool

Radius sm2pxRadius md4pxRadius lg6pxRadius xl10pxDensity×1.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.

lacquer & goldPrajam Yam motiftemple-arch framesgold double hairlinetemple redhigh-contrast Thai serifivory paper groundceremonial calm

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

Not to be confused with

Skeuomorphism →Skeuomorphism imitates real materials literally; Thai Modern Heritage abstracts craft into flat lines and motifs.Lanna Craft →Lanna Craft is indigo on raw cotton with woven stripe hems and running-stitch outlines; Thai Modern Heritage is ivory or lacquer with leaf-gold hairline double frames and temple arches.Thai Retro Poster →Thai Retro Poster is loud red-yellow-teal with fat outlined display type, halftone and starbursts; Thai Modern Heritage is quiet ivory and lacquer with thin gold lines and a calligraphic serif.

On mobile

Use the arch frame for the onboarding art and make the featured card a lacquer panel with ivory text and an inset gold hairline; keep the Prajam Yam texture only on the app background and splash, never inside lists.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinCormorant Garamond · 600/700

The quick brown fox

Heading · ThaiTaviraj · 500/600

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

Body · LatinSource Sans 3 · 400/600

Clear words make shared decisions.

Body · ThaiSarabun · 300/400/600

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

Taviraj’s high-contrast strokes echo Cormorant’s calligraphic serif; looped Sarabun keeps body text traditional yet very readable beside Source Sans.

Colour palette

Light

Dark

Design tokens

Radius	`sm 2px · md 4px · lg 6px · xl 10px · pill 999px`
Border	`1px`
Shadow	`0 8px 24px rgba(60,35,10,0.10)`
Display	`clamp(2.75rem, 6vw, 5rem)`
Motion	`320ms cubic-bezier(.33,0,.15,1)`
Density	`×1.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 Modern Heritage (thai-modern-heritage) — 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=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
 */
:root {
  --radius: 6px;
  --background: #FBF6EC;
  --foreground: #2A1A12;
  --card: #FFFDF8;
  --card-foreground: #2A1A12;
  --popover: #FFFDF8;
  --popover-foreground: #2A1A12;
  --primary: #8E1B1B;
  --primary-foreground: #FFF8EC;
  --secondary: #B8892B;
  --secondary-foreground: #1C120C;
  --muted: #F3EAD7;
  --muted-foreground: #6B5646;
  --accent: #F3EAD7;
  --accent-foreground: #2A1A12;
  --destructive: #A61B1B;
  --border: #D9C49A;
  --input: #D9C49A;
  --ring: #8E1B1B;
  --chart-1: #8E1B1B;
  --chart-2: #B8892B;
  --chart-3: #1F5C4A;
  --chart-4: #3A3F7A;
  --chart-5: #6B5646;
  --sidebar: #FFFDF8;
  --sidebar-foreground: #2A1A12;
  --sidebar-primary: #8E1B1B;
  --sidebar-primary-foreground: #FFF8EC;
  --sidebar-accent: #F3EAD7;
  --sidebar-accent-foreground: #2A1A12;
  --sidebar-border: #D9C49A;
  --sidebar-ring: #8E1B1B;
}

.dark {
  --background: #14100D;
  --foreground: #F4E9D4;
  --card: #1E1813;
  --card-foreground: #F4E9D4;
  --popover: #1E1813;
  --popover-foreground: #F4E9D4;
  --primary: #C9372C;
  --primary-foreground: #FFF8EC;
  --secondary: #D4AF5A;
  --secondary-foreground: #14100D;
  --muted: #2A211A;
  --muted-foreground: #C2B092;
  --accent: #2A211A;
  --accent-foreground: #F4E9D4;
  --destructive: #E5584F;
  --border: #6E5631;
  --input: #6E5631;
  --ring: #C9372C;
  --chart-1: #D4AF5A;
  --chart-2: #C9372C;
  --chart-3: #4FA387;
  --chart-4: #8C93E0;
  --chart-5: #C2B092;
  --sidebar: #1E1813;
  --sidebar-foreground: #F4E9D4;
  --sidebar-primary: #C9372C;
  --sidebar-primary-foreground: #FFF8EC;
  --sidebar-accent: #2A211A;
  --sidebar-accent-foreground: #F4E9D4;
  --sidebar-border: #6E5631;
  --sidebar-ring: #C9372C;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Thai Modern Heritage (thai-modern-heritage) — 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=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
 */
@theme {
  --color-bg: #FBF6EC;
  --color-surface: #FFFDF8;
  --color-surface-2: #F3EAD7;
  --color-text: #2A1A12;
  --color-text-muted: #6B5646;
  --color-primary: #8E1B1B;
  --color-on-primary: #FFF8EC;
  --color-secondary: #B8892B;
  --color-on-secondary: #1C120C;
  --color-accent: #1F5C4A;
  --color-border: #D9C49A;
  --color-success: #2F6B3A;
  --color-warning: #A4660A;
  --color-danger: #A61B1B;
  --color-chart-1: #8E1B1B;
  --color-chart-2: #B8892B;
  --color-chart-3: #1F5C4A;
  --color-chart-4: #3A3F7A;
  --color-chart-5: #6B5646;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-xl: 10px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(60,35,10,0.08);
  --shadow-md: 0 8px 24px rgba(60,35,10,0.10);
  --shadow-lg: 0 20px 50px rgba(60,35,10,0.16);
  --font-heading: "Cormorant Garamond", "Taviraj", system-ui, sans-serif;
  --font-body: "Source Sans 3", "Sarabun", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Sarabun", monospace;
}

.dark {
  --color-bg: #14100D;
  --color-surface: #1E1813;
  --color-surface-2: #2A211A;
  --color-text: #F4E9D4;
  --color-text-muted: #C2B092;
  --color-primary: #C9372C;
  --color-on-primary: #FFF8EC;
  --color-secondary: #D4AF5A;
  --color-on-secondary: #14100D;
  --color-accent: #4FA387;
  --color-border: #6E5631;
  --color-success: #6BBF7A;
  --color-warning: #E0A53C;
  --color-danger: #E5584F;
  --color-chart-1: #D4AF5A;
  --color-chart-2: #C9372C;
  --color-chart-3: #4FA387;
  --color-chart-4: #8C93E0;
  --color-chart-5: #C2B092;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Thai Modern Heritage (thai-modern-heritage). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9647,
            0.9255
          ],
          "hex": "#fbf6ec"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9922,
            0.9725
          ],
          "hex": "#fffdf8"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9176,
            0.8431
          ],
          "hex": "#f3ead7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.102,
            0.0706
          ],
          "hex": "#2a1a12"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.3373,
            0.2745
          ],
          "hex": "#6b5646"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.1059,
            0.1059
          ],
          "hex": "#8e1b1b"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9255
          ],
          "hex": "#fff8ec"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.5373,
            0.1686
          ],
          "hex": "#b8892b"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.0706,
            0.0471
          ],
          "hex": "#1c120c"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.3608,
            0.2902
          ],
          "hex": "#1f5c4a"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.851,
            0.7686,
            0.6039
          ],
          "hex": "#d9c49a"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1843,
            0.4196,
            0.2275
          ],
          "hex": "#2f6b3a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6431,
            0.4,
            0.0392
          ],
          "hex": "#a4660a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.651,
            0.1059,
            0.1059
          ],
          "hex": "#a61b1b"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.1059,
            0.1059
          ],
          "hex": "#8e1b1b"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7216,
            0.5373,
            0.1686
          ],
          "hex": "#b8892b"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1216,
            0.3608,
            0.2902
          ],
          "hex": "#1f5c4a"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2275,
            0.2471,
            0.4784
          ],
          "hex": "#3a3f7a"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.3373,
            0.2745
          ],
          "hex": "#6b5646"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0627,
            0.051
          ],
          "hex": "#14100d"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1176,
            0.0941,
            0.0745
          ],
          "hex": "#1e1813"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1294,
            0.102
          ],
          "hex": "#2a211a"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9569,
            0.9137,
            0.8314
          ],
          "hex": "#f4e9d4"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.6902,
            0.5725
          ],
          "hex": "#c2b092"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.2157,
            0.1725
          ],
          "hex": "#c9372c"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            0.9725,
            0.9255
          ],
          "hex": "#fff8ec"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.6863,
            0.3529
          ],
          "hex": "#d4af5a"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0784,
            0.0627,
            0.051
          ],
          "hex": "#14100d"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.6392,
            0.5294
          ],
          "hex": "#4fa387"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4314,
            0.3373,
            0.1922
          ],
          "hex": "#6e5631"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4196,
            0.749,
            0.4784
          ],
          "hex": "#6bbf7a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6471,
            0.2353
          ],
          "hex": "#e0a53c"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.898,
            0.3451,
            0.3098
          ],
          "hex": "#e5584f"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8314,
            0.6863,
            0.3529
          ],
          "hex": "#d4af5a"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7882,
            0.2157,
            0.1725
          ],
          "hex": "#c9372c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.6392,
            0.5294
          ],
          "hex": "#4fa387"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5765,
            0.8784
          ],
          "hex": "#8c93e0"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7608,
            0.6902,
            0.5725
          ],
          "hex": "#c2b092"
        }
      }
    }
  },
  "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": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "sm": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1373,
              0.0392
            ],
            "hex": "#3c230a",
            "alpha": 0.08
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 1,
            "unit": "px"
          },
          "blur": {
            "value": 2,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "md": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1373,
              0.0392
            ],
            "hex": "#3c230a",
            "alpha": 0.1
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 8,
            "unit": "px"
          },
          "blur": {
            "value": 24,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    },
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.2353,
              0.1373,
              0.0392
            ],
            "hex": "#3c230a",
            "alpha": 0.16
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 20,
            "unit": "px"
          },
          "blur": {
            "value": 50,
            "unit": "px"
          },
          "spread": {
            "value": 0,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Cormorant Garamond",
        "Taviraj",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Source Sans 3",
        "Sarabun",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Sarabun",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 600
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 320,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.33,
      0,
      0.15,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.1
  }
}

Prompt builder

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

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 6
Builder: claude-haiku-5-5
Auditor: claude-opus-5-5

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!