# Quiet Luxury > Warm stone and cream, a light Garamond, tiny tracked capitals and wide margins — luxury that whispers, with no logos or loud colour. - Nickname: Old money - Also called: Stealth Wealth, Old-Money Minimal, Understated Luxury - Category: Minimal & Clean - Moods: Luxury, Calm, Trustworthy, Serious - Industries: Luxury & Premium, E‑commerce, Travel & Hospitality, Real Estate, Fitness & Wellness - Style page: https://uilingo.dev/styles/quiet-luxury/ Quiet Luxury borrows from old-money fashion houses and boutique hotels: a cream and warm-stone palette, espresso instead of black, and a light, high-contrast Garamond for headlines set at modest sizes. Labels, navigation and buttons are tiny capitals with very wide tracking, rules are 1px taupe hairlines, and imagery is a calm still life on a stone backdrop. Nothing shouts — no badges in bright colours, no big logos, no shadows — and generous margins do the talking. It signals quality through restraint and craft. ## Best for - Premium fashion, leather goods and homeware shops - Boutique hotels, villas and private members clubs - Private banking, real estate and concierge services - Fine skincare, fragrance and craft brands ## Avoid for - Discount retail, flash sales and urgency-driven funnels - Youth, gaming and playful consumer apps - Dense data tools that need strong colour coding ## Do - Use cream #F3EEE6 grounds, warm stone #EAE3D7 panels and espresso #3B342C for type and actions - Set labels and buttons in 0.66–0.72rem capitals with 0.24–0.3em tracking (Latin only) - Keep headlines light (Cormorant 400) and modest — 4.75rem max — with wide margins around them - Separate with 1px taupe (#D8CFC1) hairlines; show products as still lifes on stone ## Don't - No saturated colour, gold foil, gradients or glossy effects - No drop shadows, pill buttons or rounded “app” cards - Don’t enlarge the logo or stamp it on everything - Don’t use urgency patterns (countdowns, red sale badges) ## 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 "Quiet Luxury" UI style Platform: Web (responsive, 1440px desktop down to 375px) · Stack: Plain HTML + CSS · Mode: light ## The style in one line Warm stone and cream, a light Garamond, tiny tracked capitals and wide margins — luxury that whispers, with no logos or loud colour. Design keywords: cream and warm stone, light Garamond serif, tiny tracked capitals, taupe hairlines, espresso, not black, still-life imagery, generous margins, no loud logos. ## Visual language Old-money restraint for premium commerce: a cream ground (#F3EEE6), warm-stone panels (#EAE3D7) and espresso (#3B342C) instead of black, with a single camel/taupe tone for hairlines and details. Headlines are a light Garamond (Cormorant 300–400) at modest sizes; everything else that labels or navigates is tiny uppercase with very wide tracking. Products appear as calm still lifes on a stone backdrop, cards are mostly just a top hairline, and margins are generous. Nothing is loud — no bright badges, no big logo, no shadows — quality is implied by restraint. ## Signature details (must be visible) - Palette: cream #F3EEE6 bg, #F9F6F0 surface, stone #EAE3D7, espresso #3B342C for text and primary, camel #9C8468 for hairline accents - Labels, nav, buttons, badges and table heads: 0.62–0.7rem uppercase, 0.26em tracking, Jost 500 (Thai: 0.9rem, no tracking) - Light Garamond headlines (Cormorant Garamond 300–400), hero ≤ 4.5rem, sentence case, italic for quotes and decks - Wordmark in spaced capitals (0.34em) and no logo mark - 1px #D8CFC1 hairlines; radius 1–2px; no shadows - Still-life imagery: stone backdrop split at a horizon with a soft contact shadow, a tall vase and a low bowl in muted taupes - Centred section heads followed by a 1px × 40px camel vertical rule - Slow 600ms fades only; no lifts, bounces or scale ## Design tokens — use these exact values Colours (light mode): - background #F3EEE6 - surface #F9F6F0 - surface-2 #EAE3D7 - text #2A2520 - text-muted #6A6156 - primary #3B342C (text on it #F6F1E9) - secondary #7A6853 (text on it #FFFFFF) - accent #9C8468 - border #D8CFC1 - success #4F6B4A · warning #8A6020 · danger #8E3B2E - chart series #3B342C, #9C8468, #B9AE9C, #6F7A63, #D8CFC1 Radius: sm 1px, md 2px, lg 2px, xl 2px, pill 2px Border width: 1px Shadows: sm `none`, md `none`, lg `0 40px 80px -48px rgba(42,37,32,0.35)` (where shadows reference var(--c-border) use the border colour) Spacing: 8px base unit × 1.3 density Motion: 600ms cubic-bezier(.25,.1,.25,1) ## Typography (Latin + Thai) - Headings: Cormorant Garamond 300/400/500 with Thai fallback Trirong 300/400/500 - Body: Jost 300/400/500 with Thai fallback Athiti 300/400/500 - Google Fonts URL: https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jost:wght@300;400;500&family=Trirong:wght@300;400;500&family=Athiti:wght@300;400;500&display=swap - CSS stacks: heading `"Cormorant Garamond", "Trirong", system-ui, sans-serif`; body `"Jost", "Athiti", system-ui, sans-serif` — Latin font first, Thai font second, so each script gets its own face. - Display size clamp(2.6rem, 5vw, 4.5rem), 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: Trirong is a classic looped Thai text serif whose light weights share Cormorant Garamond’s calligraphic contrast; Athiti is slim and elegant, matching Jost’s refined geometric body. ## Components - Primary button: espresso rectangle, cream tracked caps, 46–54px tall, 1px radius; hover fades to camel-brown #7A6853 - Secondary button: transparent with 1px espresso border; hover fills espresso. Ghost: text with a camel underline - Input: #F9F6F0 field, 1px #D8CFC1 border, light 300 text; focus simply darkens the border to espresso (no glow) - Feature cards: no box — a top hairline, a thin 1.25-stroke icon in camel, Garamond title, muted body - Data cards (dashboard, forms, kit): #F9F6F0 with a 1px stone border, generous 24px padding - Badges: square, 1px stone border, tiny tracked caps in a muted tone (sage / ochre / oxblood for status) - Nav: split layout, cream bar with a hairline, tracked caps links in muted taupe, CTA as an outlined button - Charts: espresso 1.5px line, camel dotted comparison, soft area tint, funnel in stone-to-camel tints - Tab bar (mobile): cream bar, thin outline icons, tiny caps labels, active label underlined in camel - Testimonials: centred italic Garamond quotes without cards, small stone avatar ## 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: centred headline with the product visual below it. Navigation: split style. Sections in order: hero → features → showcase → testimonials → trust → faq → cta. Feature section as grid. Landing: split nav with a spaced-caps wordmark, a centred hero (eyebrow, light Garamond headline, short lead, two slim buttons, tiny caps note) followed by a wide 21:9 still-life panel. Then hairline feature grid, stone-coloured showcase band with a refined product card, centred italic testimonials, trust items divided by hairlines, an FAQ in Garamond and a stone CTA panel. Container ~1120px with very wide margins. Dashboards: cream sidebar with a 1px active rule, light Garamond KPI numerals and quiet charts. ## Content Use realistic product copy (fictional brand) suited to: Premium fashion, leather goods and homeware shops. 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 cream #F3EEE6 grounds, warm stone #EAE3D7 panels and espresso #3B342C for type and actions - Set labels and buttons in 0.66–0.72rem capitals with 0.24–0.3em tracking (Latin only) - Keep headlines light (Cormorant 400) and modest — 4.75rem max — with wide margins around them - Separate with 1px taupe (#D8CFC1) hairlines; show products as still lifes on stone ## Don't - No saturated colour, gold foil, gradients or glossy effects - No drop shadows, pill buttons or rounded “app” cards - Don’t enlarge the logo or stamp it on everything - Don’t use urgency patterns (countdowns, red sale badges) - Gold foil, metallic gradients or bright colour — that reads as flashy luxury, not quiet - Pure black/white contrast and inverted black bands (that is Minimalist Monochrome) - Natural wood textures, sage-heavy palettes and rounded organic shapes (Japandi) - Big logos, sale stickers, countdowns or urgency badges - Drop shadows, pill buttons and rounded app-style cards - Heavy bold headlines or large display sizes ## Stack notes One self-contained HTML file with a