name: maisondore-design
version: alpha
description: >
  A candlelit fine-dining landing page rendered almost entirely in darkness. The
  surface is a near-black espresso (`#100D0A`) lit by a single voltage of muted
  gilt gold (`#C9A24C`) and warmed by a deep Bordeaux wine (`#5A1F22`). Text is a
  warm parchment cream (`#EAE0CE`). The signature moves are hairline gilt grids
  that quarter the screen, all-caps wide-tracked smallcaps labels, a serif type
  pairing (Cormorant Garamond display + Lora body) leaning heavily on italics,
  and a scroll-scrubbed "candle reveal" that brightens darkened photography from
  shadow into full color. Geometry is strictly sharp — zero corner radius on every
  panel, frame and button, except the small gold timeline dots.
colors:
  # Surface
  espresso: '#100D0A'          # page background; the dark room
  wine: '#5A1F22'              # Bordeaux feature panel (atelier) + button fill + ::selection bg
  # Brand / Voltage
  gilt: '#C9A24C'             # the single gold voltage: labels, headings, rules, dots, borders, icons
  # Text
  parchment: '#EAE0CE'        # primary cream text / selection foreground
  parchment-82: 'rgba(234,224,206,0.82)' # body copy
  parchment-70: 'rgba(234,224,206,0.70)' # quieter body / footer captions
  parchment-55: 'rgba(234,224,206,0.55)' # pairing / muted captions
  parchment-35: 'rgba(234,224,206,0.35)' # input placeholders (italic)
  # Hairlines (all gilt at low alpha)
  hairline: 'rgba(201,162,76,0.4)'   # primary grid borders / section dividers / input underline
  hairline-strong: 'rgba(201,162,76,0.55)' # button + CTA frame borders
  hairline-soft: 'rgba(201,162,76,0.3)'    # inner booking frame / divider rules
  hairline-faint: 'rgba(201,162,76,0.18)'  # unfilled timeline track
  # Gradient / Glow
  hero-scrim: 'linear-gradient(120deg, rgba(16,13,10,0.55) 0%, rgba(16,13,10,0) 45%, rgba(16,13,10,0.7) 100%)' # video legibility scrim
  grain: 'radial-gradient(circle at 30% 20%, rgba(201,162,76,0.05), transparent 60%)' # faint gold corner haze on body
  dot-glow: '0 0 16px 2px rgba(201,162,76,0.6)' # glow under timeline course dots
typography:
  display:
    fontFamily: "'Cormorant Garamond', serif"
    fontSize: clamp(1.875rem, 6vw, 4.5rem)
    fontWeight: 500
    lineHeight: 0.85
  display-italic:
    fontFamily: "'Cormorant Garamond', serif"
    fontSize: clamp(1.125rem, 3vw, 1.875rem)
    fontWeight: 400
    lineHeight: 1.3
  body:
    fontFamily: "'Lora', serif"
    fontSize: 1rem
    fontWeight: 400
    lineHeight: 1.9
  smallcaps:
    fontFamily: "'Cormorant Garamond', serif"
    fontSize: 0.6rem
    fontWeight: 400
    letterSpacing: 0.32em
    textTransform: uppercase
rounded:                      # near-zero; this is a sharp-edged system
  none: 0px                   # every panel, frame, image, button, input
  full: 9999px                # timeline course dots only
spacing:                      # Tailwind 4px base unit; section rhythm runs large
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  section: 80px               # py-20 vertical section padding
  section-lg: 112px           # lg:py-28 large-screen section padding
components:
  smallcaps-label:
    textColor: '{colors.gilt}'
    typography: '{typography.smallcaps}'
  display-heading:
    textColor: '{colors.parchment}'      # gilt for accent/italic lines
    typography: '{typography.display}'
    rounded: '{rounded.none}'
  hero-cell:
    backgroundColor: '{colors.espresso}'
    borderColor: '{colors.hairline}'      # 1px gilt hairline grid
    rounded: '{rounded.none}'
  atelier-panel:
    backgroundColor: '{colors.wine}'
    textColor: '{colors.parchment-82}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '64px 56px'
  cta-frame:
    backgroundColor: 'transparent'
    textColor: '{colors.gilt}'
    borderColor: '{colors.hairline-strong}' # 1px
    typography: '{typography.smallcaps}'
    rounded: '{rounded.none}'
    padding: '16px 36px'
  button:
    backgroundColor: '{colors.wine}'
    textColor: '{colors.parchment}'        # gilt icon
    borderColor: '{colors.hairline-strong}'
    typography: '{typography.smallcaps}'
    rounded: '{rounded.none}'
    padding: '16px 40px'
  course-image:
    borderColor: '{colors.hairline}'
    rounded: '{rounded.none}'              # aspect-[4/3], candle-reveal filter
  timeline-dot:
    backgroundColor: '{colors.gilt}'
    rounded: '{rounded.full}'
    # 12px circle with dot-glow box-shadow
  md-input:
    backgroundColor: 'transparent'
    textColor: '{colors.parchment}'
    borderColor: '{colors.hairline}'       # bottom border only; focus -> solid gilt
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    padding: '0.6rem 0.25rem'
motion:
  hero-fade: 'GSAP from opacity 0 / y 30px, 1.1s, stagger 0.15s, power2.out, 0.2s delay'
  atelier-fade: 'GSAP scroll-triggered (top 80%) opacity 0 / y 30px, 1s, stagger 0.12s, power2.out'
  candle-reveal: 'scrubbed (scrub:1) filter brightness(0.15) saturate(0.4) -> brightness(1) saturate(1) as image scrolls from top 85% to center'
  course-text-rise: 'GSAP scroll (top 82%) opacity 0 / y 36px, 1s, power2.out'
  timeline-fill: 'scrubbed (0.6) scaleY 0 -> 1 gold vertical line, ease none'
  book-fade: 'GSAP scroll (top 75%) opacity 0 / y 28px, 1s, stagger 0.12s, power2.out'
  input-focus: 'border-bottom-color transitions to solid gilt #C9A24C'
icons:
  library: Tabler Icons (webfont, ti)
  style: outline
  sizes: { md: 16px }
  color: '{colors.gilt}'

Maison Doré

maisondore-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + class rules. Fictional/sample product; described factually.

Overview

Maison Doré is a two-Michelin-star restaurant landing page staged as a dark room lit by candlelight. The entire page sits on a near-black espresso surface (#100D0A) carrying a faint gold radial grain (rgba(201,162,76,0.05)), and is illuminated by exactly one voltage: a muted gilt gold (#C9A24C) used for every label, heading accent, hairline, timeline dot and icon. A deep Bordeaux wine (#5A1F22) appears as the single saturated fill — the chef's "Atelier" panel, the reservation button, and the text-selection highlight. All copy is warm parchment cream (#EAE0CE) stepped down through alpha for hierarchy. The type story is entirely serif: Cormorant Garamond for display (large, weight 500, very tight line-height: 0.85, frequently italic) paired with Lora for loose-leaded body. A .smallcaps treatment — Cormorant, uppercase, letter-spacing: 0.32em — sets the wide-tracked eyebrow labels everywhere. The signature structural move is a hairline gilt grid: the hero is quartered using the golden ratio (61.8% / 38.2%) into four cells divided by rgba(201,162,76,0.4) borders, and the whole page is sectioned by the same hairlines. Photography is the second hallmark — images load darkened (brightness(0.15) saturate(0.4)) and brighten to full color on scroll, a literal "candle reveal," while a scroll-scrubbed gold line fills down the tasting-menu timeline. Geometry is uncompromisingly sharp: every panel, frame, image, button and input has zero radius; only the small timeline course dots are round.

Colors

Surface. The page background is espresso #100D0A, a warm near-black, with a faint gold radial grain overlaid via .grain. The one saturated surface is wine #5A1F22 (Bordeaux), used for the chef Atelier feature panel, the Request Reservation button fill, and as the ::selection background.

Brand / voltage. A single gold, gilt #C9A24C, carries all the luxury signal: smallcaps labels, italic accent lines in headings, the thin decorative rules (w-10 h-px), timeline dots, input underline-on-focus, and the Tabler key icon. There is no second accent.

Text. Primary text is parchment #EAE0CE. Body and supporting copy step down in alpha: rgba(234,224,206,0.82) for body paragraphs, 0.70 for quieter intro text and footer, 0.55 for pairing captions, 0.35 for italic input placeholders, and 0.40 for the copyright line.

Hairlines. Borders are always gold at low alpha. rgba(201,162,76,0.4) is the primary grid/divider/input-underline line; 0.55 strengthens button and CTA frames; 0.3 and 0.2 set the nested booking frames; 0.18 is the unfilled timeline track.

Gradient / glow. A 120° espresso scrim (rgba(16,13,10,0.55) → 0 → 0.7) keeps the hero video legible. Timeline course dots carry a soft gold glow box-shadow: 0 0 16px 2px rgba(201,162,76,0.6).

Typography

Two Google Fonts, both serif, imported together: Cormorant Garamond (400/500/600 + italics) and Lora (400/500 + italics). .font-display is Cormorant; .font-body is Lora. Cormorant carries all display and label work; Lora carries running body copy. Italic is a deliberate, recurring expressive device on display lines and the chef's pull-quote. The .smallcaps class is Cormorant set uppercase at letter-spacing: 0.32em.

Token	Size	Weight	Line-height	Tracking	Usage
display	text-5xl→7xl (≈3rem–4.5rem)	500	0.85–0.95	—	Wordmark, section H2/H3
display-italic	text-lg→3xl	400	snug/relaxed	—	Italic accent lines, pull-quotes
body	text-sm/text-base (1rem)	400	loose (leading-loose/1.9)	—	Paragraphs, dish descriptions
smallcaps	0.5rem–0.7rem	400	normal	0.32em	Eyebrows, labels, pairings, footer

Layout

Tailwind's 4px base unit; vertical rhythm runs large (py-20 / lg:py-28 sections, mb-20/lg:mb-28 between courses). The page is a single scroll of full-width sections separated by gilt hairlines. The hero is a CSS-grid composition keyed to the golden ratio — 61.8% / 38.2% columns and rows — that quarters the viewport into a tall video cell, a centered wordmark, a CTA cell and an intro cell, each separated by 1px gold borders. The Atelier section is a 4-column grid: two darkened still-life images flank a centered Bordeaux text panel (lg:col-span-2). The tasting menu is a left gold timeline rail (track + scrubbed fill + glowing dots) alongside alternating two-column course rows that swap image/ text order via lg:order. The booking section nests three concentric gold-hairline frames around a centered form, max-width max-w-4xl. Whitespace is generous and quiet, letting the dark surface dominate.

Elevation & Depth

There are essentially no drop shadows and no glass. Depth is created three ways: (1) gilt hairlines that draw the grid and frames; (2) the darkened-to-revealed photographic filter that pushes images into and out of shadow; and (3) a single glow — the gold box-shadow: 0 0 16px 2px rgba(201,162,76,0.6) under each timeline dot, reading as candlelight. The hero video carries a gradient scrim for legibility rather than for elevation.

Shapes

Sharp. The radius scale is effectively 0 — every section, panel, image frame, CTA box, button and input has square corners, reinforcing the gallery/atelier austerity. The only rounded element is the 12px rounded-full timeline course dot. Decorative thin horizontal rules (h-px, widths 10/12 units) act as fine-jewelry separators.

Components

• Smallcaps label — gilt #C9A24C, Cormorant uppercase, 0.32em tracking, ~0.5–0.7rem. Eyebrows everywhere ("The Atelier — Chef Aurélien Vasseur").
• Display heading — Cormorant 500, parchment with gilt italic accent line (e.g. "We do not cook with fire. / We cook with patience."); zero radius.
• Hero cell — espresso background, 1px gilt hairline borders forming the golden-ratio quartered grid.
• Atelier panel — wine #5A1F22 fill, parchment body, gilt label + gilt pull-quote; large padding; square.
• CTA frame ("Reserve a Table / Be seated →") — transparent fill, 1px rgba(201,162,76,0.55) border, gilt smallcaps over parchment italic, square, px-7/9 py-4/5.
• Button ("Request Reservation") — wine fill, 1px gilt border, gilt Tabler key icon + parchment smallcaps, square, px-10 py-4.
• Course image — aspect-[4/3], 1px gilt hairline border, candle-reveal filter, square.
• Timeline dot — 12px gold circle, rounded-full, gold glow shadow.
• md-input — transparent, no box; only a rgba(201,162,76,0.4) bottom border that becomes solid gilt on focus; parchment Lora text; italic muted placeholder.

Motion

GSAP + ScrollTrigger drive everything. The hero fades in on load (opacity 0 → 1, y 30 → 0, 1.1s, 0.15s stagger, power2.out, 0.2s delay). Section content (.atelier-fade, .course-text, .book-fade) rises into place on scroll-trigger at ~75–82% viewport with similar 1s power2.out fades. The hallmark motion is the candle reveal: every .candle-img starts at brightness(0.15) saturate(0.4) and is scrubbed to full brightness(1) saturate(1) as it scrolls from top 85% toward center center (scrub:1). The tasting-menu timeline fill scrubs a gold vertical line from scaleY(0) to scaleY(1) (ease: none, scrub 0.6). Inputs transition their underline to solid gilt on focus.

Iconography

Tabler Icons via the webfont (ti classes), outline style. Used sparingly — the only icon present is ti-key inside the reservation button, sized ~16px (text-base) in gilt #C9A24C. Decorative typographic glyphs (✶✶ for the Michelin stars, ·, em dashes, Roman numerals) carry more of the visual punctuation than icons do.

Do's and Don'ts

• Do keep the surface near-black and use gold as the single voltage — gilt for everything that should read precious.
• Do divide the page with thin gold hairlines and keep all corners square.
• Do lean on serif italics for expressive accent lines and pull-quotes.
• Do set labels in wide-tracked uppercase Cormorant smallcaps (0.32em).
• Do let photography arrive from shadow via the candle-reveal filter.
• Don't introduce a second accent color or saturate beyond the Bordeaux wine.
• Don't add corner radius to panels, frames, buttons or inputs (dots only).
• Don't use drop shadows or glass; depth comes from hairlines, the photo filter, and the single dot glow.
• Don't switch to sans-serif or tighten the smallcaps tracking.

Known Gaps

• Display fontSize is expressed as a representative clamp() summarizing the Tailwind responsive ramp (text-5xl→text-7xl, plus text-3xl/4xl/6xl on section headings); individual headings use specific step sizes.
• Line-heights for body/display are read from leading-loose/leading-[0.85]/ leading-tight utilities and approximated to numeric values.
• The hero golden-ratio grid only applies at min-width: 640px; below that it stacks to a single column.
• Spacing scale values above lg (xl/section) are inferred from the dominant py-20/lg:py-28 and px utilities actually used rather than a declared scale.