name: burgundy-mystic-design
version: alpha
description: >
  A cinematic, candle-lit antiquarian canvas built on deep burgundy-oxblood
  surfaces (#1F1014 base, #3A1B1E elevated) with warm parchment ink (#FBF7F2).
  The brand voltage is a coral-pink CTA (#FF5A5F → #FF385C on hover) used
  sparingly, while gilt-bronze (#CBA135) and an animated gold-foil gradient
  carry the "heritage vault" luxury. Type splits an italic Cormorant Garamond
  serif (display/editorial) against Geist sans (body) and Geist Mono (labels).
  Shapes are large-radius (32px cards, full pills) and every surface carries
  film-grain, vitrine inner-shadows and a slow cinematic ease.
colors:
  # Brand
  primary: '#FF5A5F'            # coral CTA fill ("INQUIRE", "ENTER THE VAULT")
  primary-hover: '#FF385C'      # rausch hover for primary
  on-primary: '#1F1014'         # dark ink on the coral button
  accent-rose: '#D4988A'        # italic taglines, dusty-rose quotes
  gold-bronze: '#CBA135'        # gilt labels, spine nodes, rules
  foil-gold: 'rgba(201,169,97,0.25)' # card hairline borders (gilt foil)
  # Surface
  surface: '#1F1014'            # page canvas (oxblood near-black)
  surface-elevated: '#3A1B1E'   # cards / vault panels
  surface-deep: '#2A1517'       # alternate section + footer ground
  # Text
  on-surface: '#FBF7F2'         # primary parchment ink
  on-surface-secondary: 'rgba(251,247,242,0.7)' # body prose
  on-surface-muted: 'rgba(251,247,242,0.5)'      # captions, fine print
  # Hairlines
  hairline: 'rgba(255,255,255,0.1)'  # nav + structural dividers
  hairline-soft: 'rgba(255,255,255,0.05)'
typography:
  display:
    fontFamily: '"Cormorant Garamond", serif'
    fontSize: clamp(2.5rem, 5.8vw, 7rem) # hero title
    fontWeight: 500
    lineHeight: 0.95
    letterSpacing: -0.035em
  display-italic:
    fontFamily: '"Cormorant Garamond", serif'
    fontWeight: 400
    fontStyle: italic            # "of", pull-quotes, taglines
  headline:
    fontFamily: '"Cormorant Garamond", serif'
    fontSize: 36px               # section h2 (text-6xl/7xl)
    fontWeight: 500
    lineHeight: 1.1
  body-md:
    fontFamily: '"Geist", sans-serif'
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.6
  label-mono:
    fontFamily: '"Geist Mono", monospace'
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.25em        # eyebrows, ERA tags, captions (uppercase)
rounded:
  sm: 6px      # spine cards
  lg: 28px     # hero video plate
  xl: 32px     # vault cards (--radius-2xl)
  pill: 999px  # buttons, nav, monitor chips
spacing:
  # base unit = 4px; Tailwind scale 4/8/12/16/24/32/48/64
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
components:
  button-primary:
    background: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.label-mono}'
    rounded: '{rounded.pill}'
    padding: '16px 32px'
    hoverBackground: '{colors.primary-hover}'
    boxShadow: '0 0 48px rgba(255,90,95,0.25)'  # coral glow
  button-secondary:
    background: 'transparent'
    border: '1px solid rgba(255,255,255,0.2)'
    textColor: '{colors.on-surface}'
    rounded: '{rounded.pill}'
    padding: '16px 32px'
  card-vault:
    background: 'linear-gradient(135deg, #4A2329 0%, {colors.surface-elevated} 38%, #2C1518 100%)'
    border: '2px solid {colors.foil-gold}'
    rounded: '{rounded.xl}'
    boxShadow: 'inset 0 1px 1px rgba(255,255,255,0.09), inset 0 -40px 80px rgba(20,8,12,0.35)'
    grain: 'fractalNoise overlay @ 0.05 opacity'
  nav-pill:
    background: 'rgba(31,16,20,0.7)'   # backdrop-blur 2xl
    border: '1px solid {colors.hairline}'
    rounded: '{rounded.pill}'
  gold-foil-text:
    background: 'linear-gradient(105deg, #6e4e18, #d8ad48, #fff4c2, #d8ad48, #6e4e18)'
    clip: text
    animation: 'gilt-shimmer 8s ease-in-out infinite'
motion:
  easing-cinematic: 'cubic-bezier(0.16, 1, 0.3, 1)'   # --ease-cinematic
  easing-spring: 'cubic-bezier(0.32, 0.72, 0, 1)'      # buttons / image tilts
  duration-card: 500ms
  duration-image: 700ms
  gsap: 'ScrollTrigger blur-dissolve reveals + Lenis smooth scroll'
icons:
  library: game-icons + tabler   # quill, wax-seal, feathered-wing motifs
  style: solid-glyph (tinted bronze via filter)
  colorRule: 'tinted to {colors.gold-bronze}; decorative at 6-20% opacity'

Burgundy Mystic — "The Archive"

Design spec — version alpha. Source: static HTML implementation (burgundy-mystic.html), tokens read directly from :root custom properties and component CSS. Fictional antiquarian-book brand; described factually, no external lore.

Overview

This is a cinematic, candle-lit vault aesthetic. The canvas is a deep burgundy-oxblood near-black ({colors.surface} #1F1014) with parchment-white ink ({colors.on-surface} #FBF7F2). It reads as a luxury rare-book archive: every card is a "doppelrand" vitrine with a directional inner-shadow, a gilt-foil hairline border, and a film-grain overlay. The single brand voltage is a coral CTA ({colors.primary} #FF5A5F, deepening to #FF385C on hover) reserved for the primary action; secondary richness comes from gilt-bronze {colors.gold-bronze} #CBA135 and an animated gold-foil gradient on the hero keyword. Type pairs an italic Cormorant Garamond serif (editorial display, pull-quotes) with Geist sans for body and Geist Mono for uppercase eyebrows/labels. Shapes are generously rounded (32px cards, full pills). Motion is slow and filmic — a cinematic ease, GSAP blur-dissolve reveals, Lenis smooth scroll, and a gold-dust cursor trail.

Colors

Brand. Coral {colors.primary} #FF5A5F fills the primary CTAs and shifts to {colors.primary-hover} #FF385C on hover, always over a coral glow shadow. Gilt-bronze {colors.gold-bronze} #CBA135 marks ERA tags, the ladder spine, rules and decorative icons. The dusty {colors.accent-rose} #D4988A carries italic taglines and quotes. A translucent {colors.foil-gold} rgba(201,169,97,0.25) is the universal card border.

Surfaces. {colors.surface} #1F1014 is the canvas; {colors.surface-elevated} #3A1B1E is the card/panel ground (often via a 135° gradient); {colors.surface-deep} #2A1517 is the alternate section and footer.

Text. Parchment {colors.on-surface} #FBF7F2, with {colors.on-surface-secondary} (70% alpha) for prose and {colors.on-surface-muted} (50%) for captions.

Typography

Family split: Cormorant Garamond (serif) for display, headlines and italic editorial; Geist (sans) for body; Geist Mono for uppercase eyebrows, ERA labels and captions (heavy 0.25em+ tracking). The hero title is clamp(2.5rem, 5.8vw, 7rem), weight 500, tight -0.035em tracking, 0.95 line-height.

Token	Family	Size	Weight	Tracking	Usage
display	Cormorant Garamond	clamp 2.5–7rem	500	-0.035em	Hero title
display-italic	Cormorant Garamond	inherit	400 i	normal	"of", pull-quotes, taglines
headline	Cormorant Garamond	36px+ (6xl/7xl)	500	normal	Section headers
body-md	Geist	15px	400	normal	Body prose
label-mono	Geist Mono	9–11px	400	0.25em+	Eyebrows, ERA tags, captions

Layout

Base unit 4px (Tailwind scale). Content max-width ~1280px with generous py-32/py-48 section rhythm. Signature primitives: a full-bleed hero with bottom-left content over a darkened video; an infinite horizontal "foliated spine" marquee of book cards; an offset cascade grid of vault cards (columns staggered vertically); and a center-spine conservation ladder with alternating left/right steps. The footer is a split CTA + form.

Elevation & Depth

Rich and layered, not flat. Cards combine inset highlights and inset bottom-shadows (vitrine lighting) plus large ambient drop shadows on hover (0 16px 48px rgba(31,16,20,0.6)). The hero plate stacks multiple shadows. A persistent film-grain overlay (3%) and per-card grain texture sit above everything.

Shapes

{rounded.sm} 6px (spine cards), {rounded.lg} 28px (hero plate), {rounded.xl} 32px (vault cards), {rounded.pill} (buttons, nav, monitor chips). Philosophy: large, soft, museum-frame radii.

Components

• button-primary — coral pill, mono uppercase label, coral glow, hover → #FF385C.
• button-secondary — transparent pill, 1px white/20 border.
• card-vault ("doppelrand") — 135° burgundy gradient, gilt-foil border, vitrine inner shadows, grain, lifts -4px on hover.
• nav-pill — floating blurred oxblood pill with hairline border.
• gold-foil-text — animated gilt gradient clipped to the hero keyword.
• live monitor chip — blurred pill with a pulsing coral dot and tabular mono stats.

Motion

{motion.easing-cinematic} cubic-bezier(0.16,1,0.3,1) for cards/reveals; {motion.easing-spring} cubic-bezier(0.32,0.72,0,1) for buttons and image tilts. GSAP + ScrollTrigger drive blur-dissolve, directional ladder reveals and spine-node activation; Lenis provides smooth scroll; an 8s gilt-shimmer animates the foil text; a canvas gold-dust trail follows the cursor. All motion respects prefers-reduced-motion.

Iconography

Decorative game-icons glyphs (quill-ink, wax-seal, feathered-wing) tinted to gilt-bronze via CSS filters and held at low opacity, plus Tabler icons. Functional icons are simple stroked arrows in the ink color.

Do's and Don'ts

• Do keep the canvas deep oxblood-burgundy; this is a dark-only theme.
• Do reserve coral for one primary CTA per viewport; let bronze/foil carry the luxury.
• Do wrap cards in the gilt-foil border + vitrine inner-shadow + grain.
• Do pair italic Cormorant serif against Geist sans; use mono only for tiny uppercase labels.
• Don't use pure black or pure white — ink is #FBF7F2, ground is #1F1014.
• Don't flatten the cards or drop the film-grain; depth and texture are the brand.
• Don't introduce a second saturated accent beyond coral + gold.

Known Gaps

• All values are read directly from the static implementation's resolved tokens. Hero/section copy and imagery are sample content. No authenticated or alternate (light) surfaces exist in the source.