name: luxe-noir-design
version: alpha
description: >
  An editorial luxury-chocolate aesthetic: a warm parchment canvas (#F4F0EC)
  alternating with onyx (#111111) and dark-cocoa (#2A1B1A) sections, threaded
  with a single metallic gold accent (#D4AF37) and a wine-red secondary
  (#8C3B3A). Typography is a three-serif system — Cinzel (engraved caps logo &
  display), Bodoni Moda (high-contrast editorial headlines & italics), Raleway
  (uppercase sans body/labels with luxurious 0.3–0.8em tracking). Signatures are
  diagonal clip-path splits, thin gold rules, double-frame borders, blueprint
  spec annotations, polaroid product cards and a fine noise texture overlay.
colors:
  # Brand
  gold: '#D4AF37'              # metallic accent — rules, labels, hovers, frames
  wine: '#8C3B3A'              # secondary — section blocks, eyebrow text, CTA bg
  onyx: '#111111'             # primary ink + dark surfaces
  on-onyx: '#F4F0EC'
  # Surface
  surface: '#F4F0EC'          # parchment canvas
  surface-dark: '#111111'     # onyx hero/footer
  surface-cocoa: '#2A1B1A'    # dark-cocoa collections section
  surface-card: '#FFFFFF'     # polaroid cards
  # Text
  on-surface: '#111111'       # onyx ink on parchment
  on-surface-secondary: 'rgba(17,17,17,0.7)'
  on-dark: '#F4F0EC'          # parchment ink on dark
  on-dark-muted: 'rgba(244,240,236,0.5)'
typography:
  display:
    fontFamily: '"Cinzel", serif'
    fontSize: 126px            # hero "SACRED ALCHEMY"
    fontWeight: 900
    lineHeight: 0.82
    letterSpacing: -0.07em
  editorial:
    fontFamily: '"Bodoni Moda", serif'
    fontSize: 67px             # section headlines (high-contrast)
    fontWeight: 900
    lineHeight: 0.85
    letterSpacing: -0.04em
  editorial-italic:
    fontFamily: '"Bodoni Moda", serif'
    fontStyle: italic          # pull-quotes, product names, "SNAP/WHISPERS"
    fontWeight: 400
  body:
    fontFamily: '"Raleway", sans-serif'
    fontSize: 20px
    fontWeight: 500
    lineHeight: 1.6
  label:
    fontFamily: '"Raleway", sans-serif'
    fontSize: 11px
    fontWeight: 800
    letterSpacing: 0.6em       # uppercase eyebrows (tracking-[0.4–0.8em])
  blueprint-detail:
    fontFamily: '"Raleway", sans-serif'
    fontSize: 8px
    fontWeight: 800
    letterSpacing: 0.3em
    color: '{colors.gold}'     # spec annotations (ARCHIVE NO. 729-A)
rounded:
  none: 0px                    # sharp editorial; no rounded corners on chrome
  full: 9999px                 # tiny dots only
spacing:
  # base unit = 4px; very generous editorial whitespace (py-40/48)
  sm: 16px
  md: 32px
  lg: 48px
  xl: 96px
  xxl: 192px
components:
  button-outline:
    background: 'transparent'
    border: '2px solid {colors.onyx}'
    textColor: '{colors.onyx}'
    typography: '{typography.label}'   # Cinzel/Raleway uppercase, wide track
    rounded: '{rounded.none}'
    padding: '20px 56px'
    hover: 'bg {colors.onyx}, text {colors.surface}'
  button-invoke:
    background: '{colors.surface}'
    textColor: '{colors.wine}'
    border: '2px solid {colors.surface}'
    hover: 'bg {colors.gold}, text white'
  link-arrow:
    borderBottom: '2px solid {colors.gold}'
    hover: 'gap widens, → arrow in {colors.gold}'
  card-polaroid:
    background: '{colors.surface-card}'
    padding: '28px'            # thick white polaroid frame
    boxShadow: '0 40px 80px -15px rgba(0,0,0,0.6)'
    rotate: '-2deg to 3deg'    # hover → straighten, lift -20px, scale 1.02
  double-frame:
    border: '4px solid {colors.gold}'
    inner: '1px dashed rgba(212,175,55,0.4) inset 6px'  # newsletter block
  marquee:
    background: '{colors.onyx}'
    border: '2px solid {colors.gold} (top+bottom)'
    items: 'Raleway caps + gold diamond glyphs'
  noise-overlay: 'fractalNoise SVG @ 0.05 opacity over surfaces'
motion:
  easing-lux: 'cubic-bezier(0.23, 1, 0.32, 1)'  # polaroid hover
  marquee: 'marquee 50s linear infinite'
  duration-image: '1000-2000ms slow zoom on hover'
  note: 'source globally disables transitions; durations are nominal'
icons:
  library: tabler-icons-webfont + game-icons   # ti-leaf/coffee/star, gold diamonds
  style: line (tabler), tinted gold via filter (game-icons)
  colorRule: 'gold for accents/markers; onyx or parchment for inline UI'

Luxe Noir — "The Cacao Ritual"

Design spec — version alpha. Source: static HTML (luxe-noir.html); tokens read from :root and component CSS. Fictional luxury-chocolate brand; described factually.

Overview

An editorial luxury aesthetic for an artisanal chocolate "ritual." The system alternates a warm parchment canvas ({colors.surface} #F4F0EC) with onyx (#111111) and dark-cocoa (#2A1B1A) sections, threaded with one metallic gold accent ({colors.gold} #D4AF37) and a wine-red secondary ({colors.wine} #8C3B3A). Typography is the centerpiece: a three-serif system — Cinzel engraved caps for the wordmark and hero display, Bodoni Moda high-contrast for editorial headlines and italic pull-quotes/product names, and Raleway uppercase sans for body and luxuriously letter-spaced labels (0.3–0.8em). Signatures include diagonal clip-path splits (hero), thin gold rules and dividers, double-frame borders, blueprint-style spec annotations (ARCHIVE NO. 729-A, FLOW: 31.8°C), polaroid product cards, and a subtle fractal-noise texture over surfaces. Corners are sharp; whitespace is generous (py-40/py-48).

Colors

Brand. Gold {colors.gold} #D4AF37 is the connective luxury thread — rules, eyebrow labels, frame borders, link underlines, hover fills, and metallic icon tints. Wine {colors.wine} #8C3B3A is the secondary block color (the "Purity" tile, newsletter panel, eyebrow text). Onyx {colors.onyx} #111111 is both the primary ink and the dark surfaces. Discipline: gold accents, never floods; wine anchors one block per group.

Surfaces. Parchment {colors.surface}, onyx {colors.surface-dark}, dark-cocoa {colors.surface-cocoa}, white polaroids {colors.surface-card}.

Text. Onyx ink {colors.on-surface} (70% for prose) on light; parchment {colors.on-dark} (50% muted) on dark.

Typography

Three serifs, by role: Cinzel (engraved caps — logo, hero, journal title, buttons), Bodoni Moda (high-contrast editorial headlines + italics — section titles, product names, quotes), Raleway (uppercase sans — body, eyebrows, blueprint details).

Token	Family	Size	Weight	Tracking	Usage
display	Cinzel	126px	900	-0.07em	Hero "SACRED ALCHEMY"
editorial	Bodoni Moda	67px	900	-0.04em	Section headlines
editorial-italic	Bodoni Moda	inherit	400 i	normal	Pull-quotes, product names
body	Raleway	20px	500	normal	Body prose
label	Raleway	11px	800	0.4–0.8em	Uppercase eyebrows
blueprint-detail	Raleway	8px	800	0.3em	Gold spec annotations

Layout

Base 4px with very generous editorial whitespace. A diagonal clip-path split hero (parchment text panel over a cacao photo, gold dividing line), a gold-bordered marquee band, a 48/52 split feature (image + editorial quote with spec annotations), a dark-cocoa collections section with rotated polaroid cards over diagonal gold rules, a 12-col tasting journal mosaic (large image + stacked wine/white/gold numbered tiles), and an onyx footer with a wine double-frame newsletter block + 4-column links.

Elevation & Depth

Refined and editorial. Polaroid cards carry deep soft drop-shadows (0 40px 80px -15px rgba(0,0,0,0.6)) and lift dramatically on hover. The newsletter block glows (0 0 80px rgba(140,59,58,0.3)). A faint noise texture (5%) sits over surfaces; depth otherwise comes from thin gold rules, dashed inner frames and layered diagonal lines rather than heavy material shadow.

Shapes

Sharp radius 0 — this is an editorial, framed look (double-frames, hairline borders, diagonal cuts). Only tiny dots and accents are circular.

Components

• button-outline — transparent, 2px onyx border, wide-tracked caps; hover fills onyx.
• button-invoke — parchment fill, wine text; hover → gold fill, white text.
• link-arrow — gold-underlined caps with a widening gap + gold arrow on hover.
• card-polaroid — thick white frame, deep shadow, rotated; straightens and lifts on hover.
• double-frame — 4px gold border with a dashed inner frame (newsletter CTA).
• marquee — onyx band, gold top/bottom borders, Raleway caps separated by gold diamonds.

Motion

{motion.easing-lux} cubic-bezier(0.23,1,0.32,1) on polaroid hovers; slow 1000–2000ms image zooms on hover; the marquee runs 50s linear. Motion is restrained and elegant — gentle straightening, lifts and reveals, no spectacle. (Transitions are globally disabled in the capture source, so timings are authored intent.)

Iconography

Tabler line icons (ti-leaf, ti-coffee, ti-star, brand socials) and gold-tinted game-icons diamond glyphs in the marquee. Gold for accents/markers; onyx or parchment for inline UI; ~20–48px.

Do's and Don'ts

• Do alternate parchment with onyx/cocoa sections and thread gold through as the accent.
• Do use the three-serif system: Cinzel caps, Bodoni editorial/italics, Raleway tracked caps.
• Do keep corners sharp and lean on gold rules, double-frames and blueprint annotations.
• Do rotate polaroid product cards and let them straighten/lift on hover.
• Don't round chrome corners or introduce a third saturated accent beyond gold + wine.
• Don't crowd the layout — generous editorial whitespace is essential.
• Don't letterspace body tightly; eyebrows/labels carry the wide luxury tracking.

Known Gaps

• Values read from the implementation's resolved :root. Hero/section copy and imagery are sample content; the source disables transitions globally so timings reflect authored intent.