Luxury Typography demo
Luxury Typography

A luxury landing page where oversized, elegant typography itself is the primary design element, evoking haute couture fashion, premium packaging, and high-end magazine covers.
Category: Typography-Driven
Era: 2020s Modern
Prompt: 17.4 KB · 2376 words
# SYSTEM PROMPT — BUILD A "LUXURY TYPOGRAPHY" LANDING PAGE (HAUTE COUTURE EDITION)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready landing page on the first attempt. The core design principle: **typography IS the design** — every section must be composed of dramatic, editorial type. Minimal to zero photography; oversized glyphs, numerals, hairline rules, and calligraphic flourishes act as the imagery.

---

## 0. PROJECT BRIEF & DESIGN DIRECTION

**0.1 Theme Definition**
* **Name:** Luxury Typography — Refined, Calligraphic, Premium, Script-Based
* **Era:** Haute Couture & Fashion Editorial
* **Keywords:** Luxury typography, refined fonts, calligraphic scripts, elaborate ligatures, premium, haute couture, custom typefaces, elegant, fashion
* **Composition Language:** Stacked type compositions, mixed ultra-thin (100–200) and ultra-bold (800–900) weights on the same canvas, outline (stroked) display words, script accents overlapping serif display lines, champagne-gold hairlines, generous whitespace, sharp editorial edges.

**0.2 Required Sections (build in this order)**
1. Header — slim fixed bar: wordmark, anchor navigation, theme toggle, accessible mobile menu
2. Hero
3. Features — exactly 3 cards
4. How It Works — exactly 3 steps
5. Testimonials — 3 quotes
6. Pricing — exactly 3 tiers (middle tier featured)
7. FAQ — accordion, 5–6 items
8. Final CTA — email capture form + consultation modal trigger
9. Footer — secondary link groups

**0.3 Color Palette & Token Mapping**
* **Primary palette:** Jet Black `#0A0A0A`, Pure White `#FFFFFF`, Champagne Gold `#D4AF37`, Charcoal `#333333`
* **Secondary palette:** Platinum `#E5E4E2`, Blush `#F5E6E0`, Deep Burgundy `#4A0020`, Soft Ivory `#FAF0E6`
* **Light mode:** page background = Soft Ivory `#FAF0E6`; card surfaces = `#fefefe` with hairline borders; text = Jet Black / Charcoal; gold is decorative (hairlines, strokes, icons, shimmer).
* **Dark mode:** page background = Jet Black `#0A0A0A`; surfaces = Charcoal `#333333` (or `#0A0A0A` with gold hairline borders); text = Soft Ivory / Platinum; Champagne Gold text is permitted on dark backgrounds (contrast ≈ 9.4:1).
* **Exception clause (palette conflict):** Although the palette lists Pure White `#FFFFFF`, it must **never** be used as a light-mode background or card surface — reserve it for dark-mode display text and high-key accents. Light surfaces use Soft Ivory `#FAF0E6`, Platinum `#E5E4E2`, Blush `#F5E6E0`, or `#fefefe` if an additional near-white is required.
* **Accessible gold rule:** `#D4AF37` on light backgrounds fails contrast for text. Define a dedicated `--gold-text` token (`#8C6D1F` in light mode, `#D4AF37` in dark mode) and use it for **any gold-colored readable text**. Raw `#D4AF37` in light mode is restricted to non-text decoration: borders, hairlines, text-stroke outlines paired with a filled high-contrast color, and large icons.
* **Deep Burgundy `#4A0020`** is the thematic accent: use it for the danger/error family and for one rich moment (e.g., the Final CTA band background in dark mode, or oversized decorative glyphs).

**0.4 Typography System (Google Fonts only — see Rule 1.6)**
* `--font-display`: **Playfair Display** (weights 400–900 + italics) — headlines, ultra-bold display lines
* `--font-base`: **Cormorant** (weights 300–600 + italics) — refined body serif
* `--font-script`: **Great Vibes** (400) — calligraphic accents with elaborate ligatures (single overlapping words, never full sentences)
* `--font-label`: **Jost** (weights 100–600) — uppercase eyebrow labels, nav, buttons, oversized thin numerals. Jost supplies the 100–200 ultra-thin range that Playfair/Cormorant lack; the full 100–900 weight contrast must be exploited across these families.
* **Scale:** Display type `font-size: clamp(3rem, 10vw, 12rem)` (target 8–12vw at desktop), `line-height: 0.9–1.1`, `letter-spacing: -0.05em` to `-0.02em`. Eyebrow labels: 0.75–0.875rem, uppercase, `letter-spacing: 0.2em–0.3em`. Body: 1.05–1.25rem, `line-height: 1.6–1.8`.
* **Weight-contrast mandate:** every major section should visibly mix at least one ultra-thin (100/200) oversized element against one ultra-bold (800/900) element where the composition allows.

**0.5 Mandatory Visual Effects**
* **Outline typography:** `-webkit-text-stroke: 1px var(--gold)`. Light mode: filled `#0A0A0A` text + gold stroke. Dark mode: transparent fill + gold stroke (or `#FFFFFF` fill + gold stroke). Apply only at display sizes (≥3rem) for legibility.
* **Gold shimmer on hover:** CSS-only gradient sweep using `background: linear-gradient(...); -webkit-background-clip: text; background-clip: text;` animated on hover for nav links, buttons, and headings.
* **Scroll-triggered text reveals:** `IntersectionObserver` in `script.js` toggles an `.is-visible` class; CSS transitions handle fade + `translateY(24px → 0)` (+ optional letter-spacing settle). Content must be fully visible without JS.
* **Stacked hero composition:** overlapping display lines mixing families/weights; the script word overlaps the serif display via negative margin; gold hairline rules flanking eyebrow labels.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. **Forbidden:** the `style="..."` attribute anywhere in the HTML.
* Target all design properties, layout rules, and states exclusively via class or ID selectors.
* HTML must remain clean, semantic (header, nav, main, section, article, footer), and agnostic of visual styling — changing the site's look must require editing only `style.css`.

**1.2 CSS Variables & Theme Tokens**
Store all tokens in `:root`, overridden under `@media (prefers-color-scheme: dark)` and a `.dark` class:
* **Colors (required names):** `--primary`, `--secondary`, `--bg-primary`, `--bg-secondary`, `--text-primary`, `--text-secondary`, `--text-success`, `--text-error`, `--border-default`, `--border-error`, `--border-success`.
  * Light: `--primary: #0A0A0A`, `--secondary: #D4AF37`, `--bg-primary: #FAF0E6`, `--bg-secondary: #fefefe`, `--text-primary: #0A0A0A`, `--text-secondary: #333333`, `--text-success: #1B5E20`, `--text-error: #8E1B2F`, `--border-default: rgba(10,10,10,0.15)`, `--border-error: #8E1B2F`, `--border-success: #1B5E20`.
  * Dark: `--primary: #FAF0E6`, `--secondary: #D4AF37`, `--bg-primary: #0A0A0A`, `--bg-secondary: #333333`, `--text-primary: #FAF0E6`, `--text-secondary: #E5E4E2`, `--text-success: #81C784`, `--text-error: #E57373`, `--border-default: rgba(245,240,230,0.18)`, `--border-error: #E57373`, `--border-success: #81C784`.
  * **Theme extras:** `--gold: #D4AF37`, `--gold-text` (per 0.3), `--burgundy: #4A0020`, `--platinum: #E5E4E2`, `--blush: #F5E6E0`, `--ivory: #FAF0E6`, `--ink: #0A0A0A`, `--charcoal: #333333`.
  * **Contrast pairing:** every light background token must pair with a dark text token and vice versa — enforce this in both themes, not just the default.
* **Fonts:** `--font-display`, `--font-base`, `--font-script`, `--font-label` (per 0.4).
* **Radius & shadows:** `--radius-sm: 0px`, `--radius-md: 2px`, `--radius-lg: 4px` (sharp couture edges); `--shadow-sm: 0 2px 12px rgba(10,10,10,0.06)`, `--shadow-md: 0 12px 32px rgba(10,10,10,0.12)`. In dark mode, prefer gold hairlines over shadows for elevation.
* **Spacing & transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 350ms`, `--ease-standard: cubic-bezier(0.19, 1, 0.22, 1)`.
* **Elevation/stacking:** `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 2000` — layered components (mobile menu, modal, toasts) must never conflict.

**1.3 Mandatory Dark Mode Support**
* Define dark tokens under **both** `@media (prefers-color-scheme: dark)` **and** a `.dark` class on `<html>` so switching never requires HTML restructuring.
* Provide a **visible theme toggle** in the header using Material Symbols (`light_mode` / `dark_mode`) with correct `aria-pressed` and `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 stored theme at the very top of the deferred `script.js`, and set the `html` element's background color in CSS per color scheme to prevent a theme flash.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox (`display: flex` / Tailwind flex utilities).
* **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified (equal-height stretched cards are the one sanctioned exception — document it in a CSS comment).
* Mobile-first: rows convert to columns at breakpoints (suggested: 768px, 1024px). **No horizontal scrolling ever** — display type must use `clamp()`, `max-width: 100%`, and `overflow-wrap: break-word`; `overflow-x: clip` on `body` is permitted only as a final guard.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS via CDN. Custom typography effects, component classes, and theme tokens live in `style.css` (use `@layer` / `@apply` where useful).
* All utility usage must map back to CSS variables or generic reusable classes: `.btn`, `.card`, `.input-group`, plus BEM modifiers (see Section 4).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **only** Google Fonts via `<link>`: Playfair Display, Cormorant, Great Vibes, Jost (per 0.4), bound to the font tokens.
* Icons: **Google Material Symbols** only. **Explicitly forbidden:** raw inline SVGs, local icon files, emoji-as-icons.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component (`.btn`)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; `--font-label`, uppercase, `letter-spacing: 0.15em`.
* **Variants:** `.btn--primary` (solid ink: black in light mode / ivory in dark mode; gold shimmer sweep on hover), `.btn--outline` (1px gold border, transparent background), `.btn--danger` (burgundy/crimson family — visually distinct in **both** themes), `.btn--ghost`.
* **Hover:** brightness/shadow shift + `cursor: pointer`.
* **Focus:** distinct gold focus ring via `outline`/`box-shadow` using tokens (`:focus-visible`).
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** disables interaction, prevents double-clicks, renders a CSS border-spinner or rotating Material icon **without changing button dimensions**; set `aria-busy="true"`.
* **Disabled:** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error`.

**2.2 Card Component (`.card`)**
* **Default:** flexible flexbox layout, `--bg-secondary` surface, 1px `--border-default` hairline, `--radius-md`, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` + shadow shift + a gold top hairline (via `::before`).
* **Focus-within:** gold border when a child link/button receives focus.
* **Loading (Skeleton):** define a `.card--skeleton` shimmer keyframe animation in CSS to prevent layout jumps (define it even if default content never triggers it).
* **Empty State:** define a fallback layout with a Material icon and clear guidance text.
* **Variants to build:** `.card--feature`, `.card--step`, `.card--testimonial`, `.card--pricing`, `.card--pricing--featured`.

**2.3 Form & Input Requirements (`.input-group`)**
* **Structure:** flex container wrapping a `<label>`, the input field, and a dedicated error feedback container.
* **States — all styled:** Empty, Focused (gold outline ring), Filled, Valid (success border + Material check icon), Invalid (error border, error text + icon, `aria-invalid="true"`, `aria-describedby` pointing to the error container), Disabled, Read-only.
* Error and success messages must live in `aria-live="polite"` regions. Never communicate validity by color alone — always pair with icon + text.

**2.4 Modal / Popup Requirements (`.modal`)**
* Build one modal: **"Request a Private Consultation"**, triggered by the Final CTA's secondary button.
* **States — all animated via CSS transitions:** Opening, Open, Loading (submit), Success/Error, Closing.
* **UX:** centered flex container (`align-items: center`), backdrop overlay (dimmed, above all content at `--z-modal`), Material `close` icon button, keyboard **focus trapping**, close via `Esc` and overlay click, focus returns to the trigger on close, `role="dialog"` + `aria-modal="true"`, body scroll locked while open.

**2.5 Landing Page Section Specifications**
* **Header:** fixed slim bar; wordmark in script or Playfair; anchor links (Features, Process, Testimonials, Pricing, FAQ, Contact) with gold shimmer hover and smooth scrolling; theme toggle (Rule 1.3); mobile menu button with `aria-expanded`, keyboard-operable panel at `--z-dropdown`, `Esc` closes.
* **Hero:** `min-height: 100svh` (with `100vh` fallback); eyebrow label flanked by gold hairlines; stacked display composition — line 1 in Playfair 800/900, line 2 as a stroked outline word (per 0.5), line 3 in Great Vibes overlapping via negative margin; Cormorant 300 subcopy; primary + outline CTA pair; animated scroll cue; staggered load-in reveal.
* **Features (3 cards):** section header pattern (eyebrow + display title + optional lede, reused site-wide); three `.card--feature` items, each with a Material icon inside a thin gold ring (or an oversized decorative glyph), Playfair title, Cormorant copy; flex row → column on mobile.
* **How It Works (3 steps):** three `.card--step` items with oversized ultra-thin numerals (Jost 100, ~6–10vw, stroked or gold), connected by a gold hairline (horizontal on desktop, vertical on mobile); step title + copy per card.
* **Testimonials (3 quotes):** `.card--testimonial` items: oversized decorative gold quotation glyph (`aria-hidden`), quote in Cormorant italic, attribution (name + role/brand), optional star rating using filled Material Symbols with an `aria-label`. Static grid preferred; if a carousel is used it must be fully keyboard operable with `aria-roledescription="carousel"`.
* **Pricing (3 tiers):** three `.card--pricing` items; the middle `.card--pricing--featured` gets a 1–2px gold border, slight elevation/scale, and a "Most Popular"-style badge in label style; each card: tier name (script or display), price in display numerals with a currency/period label, feature list with Material `check` icons, one CTA per tier (featured = primary, others = outline). If a billing-period toggle is included, it must use `aria-pressed` group semantics.
* **FAQ:** accordion with 5–6 items; each toggle is a `<button>` with `aria-expanded` + `aria-controls` controlling a region (or styled `<details>/<summary>`); Material chevron rotates 180°; smooth height animation via CSS (`grid-template-rows: 0fr → 1fr` technique); fully keyboard operable.
* **Final CTA:** inverted band — light mode: Jet Black background with ivory/gold type; dark mode: Deep Burgundy background with ivory/gold type; huge display line + script accent; email capture form per 2.3 with a primary submit button showing loading → inline success state (Material check + message in an `aria-live` region); secondary button opens the consultation modal per 2.4.
* **Footer:** flex/grid columns — brand wordmark, secondary link groups (e.g., Atelier, Support, Legal), social links (text or Material icons), copyright with dynamic year via JS; all links get shimmer hover; hairline top border.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid sizing and breakpoints with zero horizontal overflow — guard all 8–12vw display type with `clamp()`, `max-width: 100%`, and `overflow-wrap: break-word`.
* **Smooth animations:** `transition: var(--transition-normal)` on all state changes; **respect `prefers-reduced-motion`** — disable reveals, shimmer, and scale transforms, and keep all content visible.
* **Accessibility (a11y):** WCAG AA contrast in **both** light and dark modes. Never rely on color alone to communicate state (pair icons + text). Use semantic HTML5, correct ARIA roles/labels on the accordion, modal, theme toggle, and mobile menu, logical DOM/focus order, full keyboard operability (no mouse-only interactions), visible focus rings, `aria-live` regions for dynamic feedback (form errors, loading, success), a skip-to-content link, `lang="en"`, meta viewport, and a descriptive `<title>`.
* **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
* **Destructive actions:** `.btn--danger` must be visually distinct in both themes via the burgundy/error token family.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File structure:** three separate files — `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred entry point (`<script src="script.js" defer></script>`).
* **Naming convention:** strict **BEM** (`.block__element--modifier`) for all custom classes, never mixed with other conventions. Tailwind utilities may be used for layout/spacing only — never for the custom typography effects, which live in `style.css`.
* **Copy:** author original, polished **English** copy in a refined haute-couture editorial voice (e.g., an atelier/brand voice) — **no lorem ipsum anywhere**. All user-facing text, labels, ARIA labels, and alt/aria-hidden decisions in English.
* **Completeness:** the page must work fully on the first attempt — theme toggle persists, accordion opens/closes, form validates with inline feedback, modal opens/closes with focus management, scroll reveals trigger. No TODOs, no placeholder stubs, no external assets beyond Google Fonts, Google Material Symbols, and the Tailwind CDN.
* **Output:** deliver the complete contents of all three files in a single response.