Quiet Luxury

Also called: Stealth Wealth, Old-Money Minimal, Understated Luxury

Warm stone and cream, a light Garamond, tiny tracked capitals and wide margins — luxury that whispers, with no logos or loud colour.

“Old money”Minimal & CleanEra: 2023 → todayLuxuryCalmTrustworthySeriousNew

Open full screen ↗

quiet-luxury / landingEN

quiet-luxury / 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 sm1pxRadius md2pxRadius lg2pxRadius xl2pxDensity×1.3Display 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.

cream and warm stonelight Garamond seriftiny tracked capitalstaupe hairlinesespresso, not blackstill-life imagerygenerous marginsno loud logos

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)

Not to be confused with

Minimalist Monochrome →Monochrome is stark #000/#FFF with a dramatic didone and inverted black bands; Quiet Luxury is warm cream and espresso with a light Garamond and almost no contrast drama.Japandi →Japandi leans on natural wood, sage and rounded organic forms; Quiet Luxury is tailored and urban — stone, espresso, tracked capitals and couture typography.Thai Modern Heritage →Thai Modern Heritage adds gold, temple red and cultural motifs; Quiet Luxury has no ornament or motif at all, only tone, type and space.

On mobile

Keep wide 24px margins, a centred tracked-caps wordmark, still-life image panels on stone for featured items, hairline-separated lists without icon tiles and a tab bar of thin icons with tiny capital labels. Slow, subtle fades only.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinCormorant Garamond · 300/400/500

The quick brown fox

Heading · ThaiTrirong · 300/400/500

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

Body · LatinJost · 300/400/500

Clear words make shared decisions.

Body · ThaiAthiti · 300/400/500

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

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.

Colour palette

Light

Dark

Design tokens

Radius	`sm 1px · md 2px · lg 2px · xl 2px · pill 2px`
Border	`1px`
Shadow	`none`
Display	`clamp(2.6rem, 5vw, 4.5rem)`
Motion	`600ms cubic-bezier(.25,.1,.25,1)`
Density	`×1.3`

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 · Quiet Luxury (quiet-luxury) — 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: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
 */
:root {
  --radius: 2px;
  --background: #F3EEE6;
  --foreground: #2A2520;
  --card: #F9F6F0;
  --card-foreground: #2A2520;
  --popover: #F9F6F0;
  --popover-foreground: #2A2520;
  --primary: #3B342C;
  --primary-foreground: #F6F1E9;
  --secondary: #7A6853;
  --secondary-foreground: #FFFFFF;
  --muted: #EAE3D7;
  --muted-foreground: #6A6156;
  --accent: #EAE3D7;
  --accent-foreground: #2A2520;
  --destructive: #8E3B2E;
  --border: #D8CFC1;
  --input: #D8CFC1;
  --ring: #3B342C;
  --chart-1: #3B342C;
  --chart-2: #9C8468;
  --chart-3: #B9AE9C;
  --chart-4: #6F7A63;
  --chart-5: #D8CFC1;
  --sidebar: #F9F6F0;
  --sidebar-foreground: #2A2520;
  --sidebar-primary: #3B342C;
  --sidebar-primary-foreground: #F6F1E9;
  --sidebar-accent: #EAE3D7;
  --sidebar-accent-foreground: #2A2520;
  --sidebar-border: #D8CFC1;
  --sidebar-ring: #3B342C;
}

.dark {
  --background: #1C1916;
  --foreground: #EDE6DA;
  --card: #24201C;
  --card-foreground: #EDE6DA;
  --popover: #24201C;
  --popover-foreground: #EDE6DA;
  --primary: #E6DCCB;
  --primary-foreground: #1C1916;
  --secondary: #B79F80;
  --secondary-foreground: #1C1916;
  --muted: #2E2924;
  --muted-foreground: #ACA191;
  --accent: #2E2924;
  --accent-foreground: #EDE6DA;
  --destructive: #D07A6A;
  --border: #3F3830;
  --input: #3F3830;
  --ring: #E6DCCB;
  --chart-1: #E6DCCB;
  --chart-2: #B79F80;
  --chart-3: #7D7365;
  --chart-4: #8FA083;
  --chart-5: #4D453B;
  --sidebar: #24201C;
  --sidebar-foreground: #EDE6DA;
  --sidebar-primary: #E6DCCB;
  --sidebar-primary-foreground: #1C1916;
  --sidebar-accent: #2E2924;
  --sidebar-accent-foreground: #EDE6DA;
  --sidebar-border: #3F3830;
  --sidebar-ring: #E6DCCB;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Quiet Luxury (quiet-luxury) — 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: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
 */
@theme {
  --color-bg: #F3EEE6;
  --color-surface: #F9F6F0;
  --color-surface-2: #EAE3D7;
  --color-text: #2A2520;
  --color-text-muted: #6A6156;
  --color-primary: #3B342C;
  --color-on-primary: #F6F1E9;
  --color-secondary: #7A6853;
  --color-on-secondary: #FFFFFF;
  --color-accent: #9C8468;
  --color-border: #D8CFC1;
  --color-success: #4F6B4A;
  --color-warning: #8A6020;
  --color-danger: #8E3B2E;
  --color-chart-1: #3B342C;
  --color-chart-2: #9C8468;
  --color-chart-3: #B9AE9C;
  --color-chart-4: #6F7A63;
  --color-chart-5: #D8CFC1;
  --radius-sm: 1px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 2px;
  --radius-pill: 2px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 40px 80px -48px rgba(42,37,32,0.35);
  --font-heading: "Cormorant Garamond", "Trirong", system-ui, sans-serif;
  --font-body: "Jost", "Athiti", system-ui, sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, "Athiti", monospace;
}

.dark {
  --color-bg: #1C1916;
  --color-surface: #24201C;
  --color-surface-2: #2E2924;
  --color-text: #EDE6DA;
  --color-text-muted: #ACA191;
  --color-primary: #E6DCCB;
  --color-on-primary: #1C1916;
  --color-secondary: #B79F80;
  --color-on-secondary: #1C1916;
  --color-accent: #B79F80;
  --color-border: #3F3830;
  --color-success: #8FAE87;
  --color-warning: #D3A45A;
  --color-danger: #D07A6A;
  --color-chart-1: #E6DCCB;
  --color-chart-2: #B79F80;
  --color-chart-3: #7D7365;
  --color-chart-4: #8FA083;
  --color-chart-5: #4D453B;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Quiet Luxury (quiet-luxury). Default mode: light. Fonts: 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",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9529,
            0.9333,
            0.902
          ],
          "hex": "#f3eee6"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9765,
            0.9647,
            0.9412
          ],
          "hex": "#f9f6f0"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9176,
            0.8902,
            0.8431
          ],
          "hex": "#eae3d7"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1647,
            0.1451,
            0.1255
          ],
          "hex": "#2a2520"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4157,
            0.3804,
            0.3373
          ],
          "hex": "#6a6156"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.2039,
            0.1725
          ],
          "hex": "#3b342c"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9647,
            0.9451,
            0.9137
          ],
          "hex": "#f6f1e9"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4784,
            0.4078,
            0.3255
          ],
          "hex": "#7a6853"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.5176,
            0.4078
          ],
          "hex": "#9c8468"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8471,
            0.8118,
            0.7569
          ],
          "hex": "#d8cfc1"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3098,
            0.4196,
            0.2902
          ],
          "hex": "#4f6b4a"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5412,
            0.3765,
            0.1255
          ],
          "hex": "#8a6020"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5569,
            0.2314,
            0.1804
          ],
          "hex": "#8e3b2e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2314,
            0.2039,
            0.1725
          ],
          "hex": "#3b342c"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6118,
            0.5176,
            0.4078
          ],
          "hex": "#9c8468"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7255,
            0.6824,
            0.6118
          ],
          "hex": "#b9ae9c"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.4784,
            0.3882
          ],
          "hex": "#6f7a63"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8471,
            0.8118,
            0.7569
          ],
          "hex": "#d8cfc1"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.098,
            0.0863
          ],
          "hex": "#1c1916"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1255,
            0.1098
          ],
          "hex": "#24201c"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.1608,
            0.1412
          ],
          "hex": "#2e2924"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9294,
            0.902,
            0.8549
          ],
          "hex": "#ede6da"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6745,
            0.6314,
            0.5686
          ],
          "hex": "#aca191"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.8627,
            0.7961
          ],
          "hex": "#e6dccb"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.098,
            0.0863
          ],
          "hex": "#1c1916"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7176,
            0.6235,
            0.502
          ],
          "hex": "#b79f80"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1098,
            0.098,
            0.0863
          ],
          "hex": "#1c1916"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7176,
            0.6235,
            0.502
          ],
          "hex": "#b79f80"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.2471,
            0.2196,
            0.1882
          ],
          "hex": "#3f3830"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.6824,
            0.5294
          ],
          "hex": "#8fae87"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8275,
            0.6431,
            0.3529
          ],
          "hex": "#d3a45a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8157,
            0.4784,
            0.4157
          ],
          "hex": "#d07a6a"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.902,
            0.8627,
            0.7961
          ],
          "hex": "#e6dccb"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7176,
            0.6235,
            0.502
          ],
          "hex": "#b79f80"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4902,
            0.451,
            0.3961
          ],
          "hex": "#7d7365"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.5608,
            0.6275,
            0.5137
          ],
          "hex": "#8fa083"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.302,
            0.2706,
            0.2314
          ],
          "hex": "#4d453b"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 1,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 2,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {
    "lg": {
      "$type": "shadow",
      "$value": [
        {
          "color": {
            "colorSpace": "srgb",
            "components": [
              0.1647,
              0.1451,
              0.1255
            ],
            "hex": "#2a2520",
            "alpha": 0.35
          },
          "offsetX": {
            "value": 0,
            "unit": "px"
          },
          "offsetY": {
            "value": 40,
            "unit": "px"
          },
          "blur": {
            "value": 80,
            "unit": "px"
          },
          "spread": {
            "value": -48,
            "unit": "px"
          },
          "inset": false
        }
      ]
    }
  },
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Cormorant Garamond",
        "Trirong",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Jost",
        "Athiti",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Athiti",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 400
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 600,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.25,
      0.1,
      0.25,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.3
  }
}

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!