Quiet Luxury / Old Money demo
Quiet Luxury / Old Money

An understated, logo-free luxury aesthetic inspired by old-money style and post-'Succession' culture, featuring muted neutral palettes, classic serif typography, and heritage-inspired elegance.
Category: Luxury & Editorial
Era: 2020s Modern
Prompt: 17.8 KB · 2392 words
# System Prompt: "Quiet Luxury / Old Money" Landing Page — Complete Build Specification

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt — no drafts, no placeholders, no follow-up questions.

**Objective:** Build a single-page landing page in the **Quiet Luxury / Old Money** aesthetic (stealth wealth, understated neutral tones — camel, cream, navy; serif type; restrained elegance; timeless, expensive-looking calm; 'Succession' costuming; Loro Piana-adjacent). The page must contain exactly these sections, in order: **Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.**

---

## 1. Theme Direction & Design Foundation

**1.1 Aesthetic Brief**
* Mood: quiet confidence, stealth wealth, old-money restraint. Generous whitespace (`--space-24` section rhythm), near-still motion, muted neutrals.
* **Signature move:** one thin, muted-gold hairline (`var(--hairline)`) is the *sole ornament* — repeated on nav, cards, and inputs. Never a heavy border, never a shadow that shouts.
* Strictly forbidden: gradients, glows, neon accents, loud drop shadows, pill-shaped exuberance (except the `.badge` component), exclamation marks in copy, hype words ("revolutionary", "unlock", "game-changing"), visible logo marks, rounded-corner exuberance beyond the token radii.

**1.2 Provided Design Tokens — adopt verbatim as the foundation of `style.css`**

```css
/* Quiet Luxury / Old Money — design tokens */
/* 2022–present | Anti-logo luxury minimalism (post-'Succession') */
:root {
  /* color */
  --color-bg: #f6f2e9;
  --color-surface: #fffdf8;
  --color-surface-strong: #ece3d1;
  --color-border: #d9cdad;
  --color-text: #2a2620;
  --color-text-muted: #6b6153;
  --color-primary: #1f2a44;
  --color-accent: #a9825c;
  --color-hairline: #b8a575;
  /* radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;
  /* shadow */
  --shadow-sm: 0 1px 2px rgba(42, 38, 32, 0.06);
  --shadow-md: 0 4px 12px rgba(42, 38, 32, 0.08);
  --shadow-lg: 0 12px 28px rgba(42, 38, 32, 0.10);
  /* font */
  --font-sans: 'Inter', 'Neue Haas Grotesk', 'Helvetica Neue', system-ui, sans-serif;
  --font-display: 'Cormorant Garamond', 'Canela', 'Times New Roman', Georgia, serif;
  --font-mono: ui-monospace, monospace;
  /* text */
  --text-xs: 0.75rem;  --text-sm: 0.875rem; --text-base: 1rem;
  --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem;
  --text-3xl: 2.25rem; --text-4xl: 3rem;    --text-5xl: 4rem;
  /* space */
  --space-1: 4px;  --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-6: 24px; --space-8: 32px;  --space-12: 48px; --space-16: 64px;
  --space-24: 96px;
  /* ease */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  /* ornament */
  --hairline: 1px solid var(--color-hairline);
  --letterspace-label: 0.08em;
}
/* Reference specification: references/00-flagship-implementation-specs/quiet-luxury.md */
```

**1.3 Mandatory Token Extensions (add to `:root`)**
* Semantic aliases: `--primary: var(--color-primary); --secondary: var(--color-accent); --bg-primary: var(--color-bg); --bg-secondary: var(--color-surface); --text-primary: var(--color-text); --text-secondary: var(--color-text-muted); --border-default: var(--color-border);`
* Feedback tokens (light): `--text-success: #4a6b52; --text-error: #9c4a3f; --border-success: #7d9a84; --border-error: #c48a7e;`
* Motion & layout: `--transition-fast: 150ms; --transition-normal: 300ms; --spacing-gap: var(--space-6);`
* Elevation/stacking: `--z-dropdown: 100; --z-modal: 200; --z-toast: 300;`

**1.4 Mandatory Dark Mode Palette**
Define under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`. Suggested starting values (verify WCAG AA before publishing):
```css
.dark {
  --color-bg: #15171e;
  --color-surface: #1c1f28;
  --color-surface-strong: #252935;
  --color-border: #363b4a;
  --color-text: #efe9da;
  --color-text-muted: #a89e8c;
  --color-primary: #e8e0cb;   /* action color inverts in dark mode */
  --color-accent: #c9a273;
  --color-hairline: #7c6c49;
  --text-success: #9dbb9f; --text-error: #d69a8f;
  --border-success: #5d7a63; --border-error: #8a5a50;
}
```
* `.btn--primary` must invert in dark mode: cream background (`var(--color-primary)`) with navy text `#1f2a44` — never navy-on-navy.
* **Contrast pairing is mandatory for every theme:** light backgrounds pair with dark text tokens; dark backgrounds pair with light text tokens.
* Accent `#a9825c` on cream is decorative-only (hairlines, icons, large text). For small accent text in light mode, darken to `#7d5f42` to pass AA.

**1.5 Typography**
* **Exception clause:** the source spec names licensed fonts (Canela, Neue Haas Grotesk) that are not on Google Fonts. The Google Fonts mandate is retained — substitute **Cormorant Garamond** (display serif; weights 400/500/600 + italic) and **Inter** (sans; 400/500) as the primary families, keeping the licensed names as secondary fallbacks in the stacks (already reflected in the token block above).
* Load via Google Fonts `<link>` tags with `preconnect`. Bind to `--font-display` and `--font-sans`.
* Headlines and pull quotes: `--font-display`. Body, labels, buttons, nav: `--font-sans`.
* Small-caps treatment for labels/eyebrows: `text-transform: uppercase; letter-spacing: var(--letterspace-label); font-size: var(--text-xs)`.

**1.6 Imagery & Branding Constraints**
* No raster images, no external assets. Build atmosphere purely through typography, whitespace, hairlines, and layered surfaces (`--color-surface`, `--color-surface-strong`).
* No logo or icon marks anywhere. Identity is limited to a discreet, letterspaced text wordmark in the nav and footer (e.g., "HARRINGTON & SONS") rendered visually weightless.

---

## 2. Strict Rules & Architecture

**2.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **The `style="..."` attribute is forbidden in the HTML.**
* All design properties, layout rules, and states are targeted via class or ID selectors only.
* HTML remains clean, semantic, and styling-agnostic — changing the look must require editing only `style.css`.

**2.2 CSS Variables & Theme Tokens**
* Every color, radius, shadow, spacing, transition, and z-index value must reference a CSS variable from Sections 1.2–1.4. No hard-coded hex values in component rules (theme-inversion logic excepted).
* Light mode must never default to pure white; the cream/surface tokens govern. If a near-white is genuinely required, use `#fefefe`, never `#ffffff`.

**2.3 Mandatory Dark Mode Support**
* Implement via `.dark` class on `<html>` **and** `@media (prefers-color-scheme: dark)` fallback, so variables switch with zero HTML restructuring.
* Provide a visible, understated theme toggle in the nav: a `.btn`-styled icon button using a Material Symbol (`dark_mode` / `light_mode`), with `aria-pressed` reflecting current state and a dynamic `aria-label` ("Switch to dark mode" / "Switch to light mode").
* Persist choice in `localStorage` (e.g., key `theme`); on first visit fall back to `prefers-color-scheme`. Apply the class as the first statement in `script.js` to minimize flash.

**2.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. **Every flex container defaults to `align-items: center` unless an exception is explicitly justified in a CSS comment** (e.g., card interiors top-aligned for editorial reading).
* Mobile-first: all multi-column rows (features, steps, pricing, footer columns) collapse to a single column below ~768px and expand to rows on larger viewports. **No horizontal scrolling at any viewport width down to 320px.**

**2.5 Styling Approach**
* **Exception clause:** because the source specification ships a complete custom CSS token system and BEM-style component classes, build with **pure custom CSS** — do not introduce Tailwind or any framework. Do not mix utility classes with BEM.

**2.6 Typography & Icons (Google Fonts Mandatory)**
* Text: Google Fonts only, per Section 1.5.
* Icons: **Google Material Symbols (Outlined)** loaded via Google Fonts, configured with `font-variation-settings: 'FILL' 0, 'wght' 300`. Use sparingly: feature icons, step markers, pricing check marks, theme toggle, mobile menu, accordion indicators. **Raw inline SVGs and local icon files are forbidden.**

---

## 3. Component Design Specifications

**3.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`)**
Implement the provided base classes (flex layout, uppercase letterspaced sans, hairline border, `--radius-sm`, transitions on border-color/color) and extend with every state below, styled via classes only:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px (`min-height: 44px`).
* **Hover:** border-color shifts to `--color-hairline`, text to `--color-primary`, subtle `--shadow-sm`. `cursor: pointer`.
* **Focus:** distinct `:focus-visible` ring — `outline: 2px solid var(--color-primary); outline-offset: 2px` — for keyboard navigation.
* **Active/Pressed:** restrained click feedback via `transform: translateY(1px)` (theme-appropriate substitute for scale; feedback must never be omitted).
* **Loading (`.is-loading`):** sets `aria-busy="true"`, disables pointer events to prevent double-clicks/double-submits, and renders a CSS spinner (1px hairline-colored ring) or gently rotating Material Symbol — **without changing button dimensions**.
* **Disabled:** `opacity: 0.5; cursor: not-allowed;` no hover/active effects.
* **Success/Error (`.btn--success`, `.btn--error`):** temporary feedback states driven by `--text-success` / `--text-error`, always paired with an icon and an `aria-live` announcement — never color alone.
* **Danger (`.btn--danger`):** if any destructive action exists, it must be visually distinct (muted brick tones) in **both** light and dark themes.

**3.2 Card Component (`.card`)**
Implement the provided base (surface background, hairline border, `--radius-md`, `--shadow-sm`, `--space-8` padding) and extend:
* **Default:** flexible flexbox column layout; content may top-align (documented exception to the center rule).
* **Hover (interactive cards only):** `transform: translateY(-2px)` with `--shadow-md` — nothing louder.
* **Focus-within:** hairline border shifts to `--color-primary` when a child link/button receives focus.
* **Loading (skeleton):** define a `.card--skeleton` shimmer keyframe animation for any asynchronously loaded content; skeleton dimensions must match loaded content to prevent layout jumps.
* **Empty state:** structured fallback (Material Symbol + guidance text) — only if an empty condition can occur.

**3.3 Form & Input Components (`.input-group`, `.input`)**
Implement the provided `.input` base (full-width, surface background, no box border — single bottom hairline, `--radius: 0`) and account for every state:
* **States:** empty, focused (bottom hairline → `--color-primary` plus visible focus ring), filled, valid (success hairline + small check icon), invalid (error hairline, `--text-error` message, error icon), disabled, read-only.
* **Structure:** each `.input-group` is a flex column wrapping a `<label>`, the input, and a dedicated error-feedback container. Errors are announced via `aria-live="polite"` and linked with `aria-describedby`; state is never communicated by color alone.
* **Submission flow:** submit button enters loading state → simulated success (success message or toast at `--z-toast`) or error, with `aria-live` feedback throughout.

**3.4 FAQ Accordion (and Modal Policy)**
* The FAQ must be an accessible accordion: each item is a `<button aria-expanded>` controlling a panel (`aria-controls` / region), separated by hairlines, with a rotating Material Symbol `expand_more` indicator. Fully keyboard-operable; panels animate open/closed via CSS transitions that respect `prefers-reduced-motion`.
* **Modal/popup:** no modals are required for this page — do not add any. If one were requested, it would require: centered flex overlay (`align-items: center`), backdrop, animated opening/open/closing states, focus trapping, `Esc` and overlay-click closing, and `--z-modal` stacking.

---

## 4. Core UX & Micro-Interaction Rules

* **Responsive by default:** fluid type via `clamp()` for the hero headline; fluid spacing; zero horizontal overflow at any width.
* **Smooth animations:** every state change transitions with `transition: var(--transition-normal) var(--ease-standard)` (or `--transition-fast` for hovers); all motion disabled under `@media (prefers-reduced-motion: reduce)`.
* **Accessibility (a11y):** WCAG AA contrast in **both** light and dark modes; semantic HTML5 landmarks (`header`, `nav`, `main`, `section`, `footer`) with a skip-to-content link; strict `h1 → h2 → h3` hierarchy; correct ARIA roles/labels on all custom widgets (toggle, mobile menu, accordion); logical DOM/focus order; full keyboard operability — no mouse-only interactions; `aria-live` regions for all dynamic feedback (form errors, toasts, loading).
* **Mandatory visual feedback:** every click, hover, focus, and submission produces a visible state change.
* **Anchor navigation:** in-page links smooth-scroll via CSS (`scroll-behavior: smooth`) with a reduced-motion override, and respect the sticky header offset.
* **Destructive actions:** none expected; if introduced, they must be visually distinct in both themes.

---

## 5. Page Architecture — Section-by-Section Requirements

**5.1 Header & Navigation**
* Sticky header: `--color-surface` background, bottom hairline, restrained padding. Left: discreet letterspaced text wordmark. Center/right: small-caps sans nav links (Features, How It Works, Pricing, FAQ) + theme toggle.
* Below ~768px: nav links collapse behind a Material Symbol `menu` button opening an accessible dropdown panel (`aria-expanded`, closes on `Esc`, focus returns to the toggle, stacked at `--z-dropdown`).

**5.2 Hero**
* Full-width, `--space-24` vertical rhythm, flex column, centered. Small-caps eyebrow label (`.badge` or label style), single muted-gold hairline rule as ornament, `h1` in `--font-display` at fluid `clamp(2.5rem, 6vw, var(--text-5xl))` in navy, muted subcopy (`--text-lg`, max-width ~60ch), and a CTA row: one `.btn--primary` + one ghost `.btn` (or hairline-underlined text link). No imagery — typography and whitespace carry the section.

**5.3 Features — 3 Cards**
* Flex row (wraps to column on mobile) of three `.card` elements. Each: outlined Material Symbol icon in accent camel, small-caps label, serif heading, muted body copy. Hover/focus-within per Section 3.2.

**5.4 How It Works — 3 Steps**
* Three steps separated by hairline dividers (vertical on desktop, horizontal on mobile). Each step: oversized serif numeral (01 / 02 / 03) in `--color-hairline` tone, small-caps step label, muted description.

**5.5 Testimonials**
* Three quote cards (or one featured centered quote flanked by hairlines). Quotation set in `--font-display` italic; attribution in small-caps muted sans with tasteful placeholder attributions (e.g., "J. M., Geneva"). Static layout — no carousels, no autoplay.

**5.6 Pricing — 3 Tiers**
* Three `.card` tiers; the middle tier is featured with **subtle** emphasis only: `--color-surface-strong` background or a navy header band, plus a `.badge` ("Most Requested"). Each tier: serif tier name, price, feature list with small muted Material Symbol check marks, and a CTA (`.btn--primary` on the featured tier, `.btn` elsewhere).

**5.7 FAQ**
* Accessible accordion per Section 3.4 — 5–6 questions with on-theme answers.

**5.8 Final CTA**
* Full-width panel on `--color-surface-strong` (inverted appropriately in dark mode), centered flex column: serif headline, muted subcopy, and an email-capture `.input-group` (label + `.input` + `.btn--primary` submit). Full client-side validation and state flow per Section 3.3, including loading → success with `aria-live` confirmation.

**5.9 Footer — Secondary Links**
* Top hairline border, muted text. Multi-column flex layout (column on mobile): discreet wordmark, small-caps column labels, and secondary links (About, Journal, Contact, Careers, Privacy, Terms). Links show hairline-colored underline on hover and visible focus rings. Closing copyright line.

**5.10 Copy Direction**
* Write all user-facing copy in **English**, in an understated old-money register: complete sentences, no exclamation marks, no hype vocabulary, quiet confidence. **No lorem ipsum** — author original on-brand copy for every section, since none was supplied.

---

## 6. Deliverable & Output Format

* **Files:** separate `index.html`, `style.css`, `script.js`. The HTML contains exactly one `<script src="script.js" defer></script>` reference — no inline script blocks, no inline styles.
* **Naming:** BEM convention exclusively (`block__element--modifier`), consistent with the provided `.btn--primary` pattern. Never mix conventions.
* **Script scope:** `script.js` handles only theme toggle + persistence, mobile menu, FAQ accordion, form validation/feedback, and smooth-scroll offset. No libraries, no frameworks.
* **No unrequested placeholders:** no lorem ipsum, no "TODO", no stub sections. Every section ships complete with final copy and full state styling.

---

## 7. Pre-Publish QA Checklist (Light & Dark Validation)

The source specification does not declare color modes — therefore, before considering the build complete, you must **validate the page in both light and dark modes**:
1. Every token pair passes WCAG AA contrast in both themes (text on backgrounds, buttons, form feedback).
2. Theme toggle persists across reloads; first visit honors `prefers-color-scheme`; no flash of wrong theme.
3. Full keyboard pass: skip link, nav, mobile menu, accordion, form, footer links — all operable, all focus rings visible.
4. `prefers-reduced-motion` disables all animation.
5. No horizontal scroll from 320px upward; all multi-column layouts collapse correctly.
6. Every interactive element exhibits default, hover, focus, active, and (where applicable) loading/disabled/success/error states — in both themes.