name: nocturne-design
version: alpha
description: >
  A nocturnal luxury-perfume landing page on near-black ink (`#0E0B0C`) with a
  bone (`#F4EFE6`) counter-surface, lit by two voltages: oxblood (`#6E1423`) and
  gilded gold (`#C9A227`). The signature move is a split-screen hero that opens
  like a theatre curtain — a dark half and a light half pulled apart by a glowing
  gold seam. Typography pairs a high-contrast Fraunces serif (900 display +
  italic 300 prose) with a tight uppercase Archivo Narrow for labels and Inter
  for body. The geometry is sharp and editorial: zero border-radius everywhere,
  hairline rules, diagonal lines, and full-bleed pinned scroll scenes with a
  fixed film-grain overlay.
colors:
  # Surface
  ink: '#0E0B0C'        # primary page background, dark hero half, footer
  wine: '#1C1518'       # pyramid section bg, giant footer watermark
  bone: '#F4EFE6'       # body text on ink; maker section surface; light hero half
  reveal-black: '#0a0809'  # reveal section background
  # Brand / Voltage
  oxblood: '#6E1423'    # solid button fill, accent rule, portrait box, attribution
  gold: '#C9A227'       # outline buttons, hero seam, rules, footer headings, focus ring
  blood: '#B0263C'      # solid button hover state
  # Text
  muted: '#8A7F77'      # eyebrows, stage labels, footer links, fine print
  white: '#ffffff'      # nav (mix-blend difference), reveal word
  # Gradient stops
  wine-ink-grad: 'linear-gradient(135deg, #1C1518, #0E0B0C)'  # dark hero half base
  bone-grad: 'linear-gradient(135deg, #efe7d6, #F4EFE6)'      # light hero half base
  oxblood-glow: 'radial-gradient(circle at 50% 60%, rgba(110,20,35,.55), #1C1518 70%)'  # pyramid visual
  gold-glow: 'radial-gradient(circle, rgba(201,162,39,.55), transparent 65%)'  # pyramid orb
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(3rem, 15vw, 13rem)
    fontWeight: 900
    lineHeight: 0.9
    letterSpacing: -0.02em
  display-italic:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(1.5rem, 3.6vw, 3rem)
    fontWeight: 300
    lineHeight: 1.18
    fontStyle: italic
  watermark:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(4rem, 22vw, 20rem)
    fontWeight: 900
    lineHeight: 0.8
    letterSpacing: -0.03em
  eyebrow:
    fontFamily: "'Archivo Narrow', sans-serif"
    fontSize: 0.72rem
    fontWeight: 600
    letterSpacing: 0.22em
    textTransform: uppercase
  label:
    fontFamily: "'Archivo Narrow', sans-serif"
    fontSize: 0.8rem
    fontWeight: 600
    letterSpacing: 0.3em
    textTransform: uppercase
  button:
    fontFamily: "'Archivo Narrow', sans-serif"
    fontSize: 0.78rem
    fontWeight: 600
    letterSpacing: 0.18em
    textTransform: uppercase
  body:
    fontFamily: "'Inter', sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.62
    letterSpacing: -0.006em
rounded:                # everything is sharp; no rounding anywhere
  none: 0
  full: 9999px          # only the pyramid glow orb (border-radius:50%)
spacing:                # base unit ~8px; layout uses rem + viewport units
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 38px              # ~2.4rem, nav padding
components:
  buttonOutline:
    backgroundColor: 'transparent'
    textColor: '{colors.gold}'
    border: '1px solid {colors.gold}'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '0.95rem 1.7rem'
    hover: 'fill gold, text ink'
  buttonSolid:
    backgroundColor: '{colors.oxblood}'
    textColor: '{colors.bone}'
    border: '1px solid {colors.oxblood}'
    typography: '{typography.button}'
    rounded: '{rounded.none}'
    padding: '0.95rem 1.7rem'
    hover: 'fill blood'
  nav:
    backgroundColor: 'transparent'
    textColor: '{colors.white}'
    typography: '{typography.eyebrow}'
    padding: '1.5rem 2.4rem'
    note: 'fixed top; mix-blend-mode difference; wordmark in Fraunces 900'
  heroSeam:
    backgroundColor: '{colors.gold}'
    width: '2px (grows to 62px on scroll)'
    note: 'box-shadow 0 0 28px rgba(201,162,39,.6); vertical label in Archivo Narrow'
  rule:
    backgroundColor: '{colors.gold}'
    height: '2px'
    note: 'scaleX animated left-origin divider'
  panel:
    indexColor: '{colors.oxblood}'
    stageColor: '{colors.muted}'
    listTypography: '{typography.display-italic}'
    note: 'em-dash gold bullets; fades + slides up when active'
  newsletter:
    backgroundColor: 'transparent'
    textColor: '{colors.bone}'
    border: '1px solid {colors.muted} (bottom only)'
    accentColor: '{colors.gold}'
    note: 'gold underline grows on focus-within'
motion:
  curtain: 'cubic-bezier(.86,0,.07,1) — hero clip-path reveal, head wipe, watermark'
  settle: 'cubic-bezier(.2,.8,.2,1) — fades, slides, rule grows, button hovers'
  heroReveal: 'clip-path inset 1.2s; right half staggered +.08s'
  titleStagger: 'per-char letter-spacing + fade, delay calc(var(--i)*45ms + .5s)'
  scrollScrub: 'rAF scroll loop — hero pull-apart, pyramid panel swap, glow scale, reveal scale, maker parallax'
  spotlight: 'reveal section radial mask follows cursor (150px solid / 270px fade)'
  grain: 'fixed film-grain image, mix-blend overlay, opacity .32'
icons:
  library: none (text glyphs only — ↓ and → arrows, em-dash, curly quote)
  style: typographic
  color: '{colors.gold}'

Nocturne

nocturne-design · alpha

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

Overview

Nocturne is a nocturnal luxury-perfume landing page — "a scent that arrives after dark." The surface is near-black ink (#0E0B0C) with a deep wine variant (#1C1518) and a warm bone counter-surface (#F4EFE6) used for the maker section and the light half of the hero. Two voltages do the work: oxblood (#6E1423, brightening to #B0263C on press) and a gilded gold (#C9A227). The signature move is a theatre-curtain hero — a dark image half and a light image half that open via animated clip-path, split by a 2px gold seam that glows (box-shadow 0 0 28px rgba(201,162,39,.6)) and widens as you scroll while the word NOCTURNE is split across the seam (N-O-C-U light, T-U-R-N-E dark). The type story is high-contrast editorial: Fraunces serif at weight 900 for display and watermarks, Fraunces italic 300 for poetic prose, a tight uppercase Archivo Narrow (letter-spacing up to .45em) for every label and button, and Inter for body. The geometry is uncompromisingly sharp — zero border-radius, hairline gold rules, a diagonal oxblood line in the maker scene, pinned full-bleed scroll stages, and a fixed film-grain overlay (mix-blend overlay, opacity .32) draped over the whole page.

Colors

Surface. ink #0E0B0C is the page background, the dark hero half, the footer, and the nav text color (via mix-blend). wine #1C1518 backs the pyramid section and the giant footer watermark. reveal-black #0a0809 is a hair darker for the spotlight reveal section. bone #F4EFE6 is the default body text on ink, and flips to a surface color for the maker section and the light hero half.

Brand / Voltage. oxblood #6E1423 fills the solid button, the panel index numbers, the portrait box, the diagonal line, and the attribution. gold #C9A227 is the precious accent: outline-button strokes, the hero seam, the gold rules, footer column headings, the focus ring, em-dash list bullets, and the spotlight caption. blood #B0263C appears only as the solid-button hover.

Text. muted #8A7F77 carries eyebrows, stage labels, footer links, and fine print. white #ffffff is used for the nav (which inverts against any background via mix-blend-mode: difference) and the reveal word.

Gradients. The hero halves use linear-gradient(135deg, …) bases (wine→ink on the left, #efe7d6→bone on the right) behind their photos. The pyramid visual is a radial oxblood-to-wine wash; its floating orb is a radial gold glow. The footer divider is a linear-gradient(90deg, transparent, gold, transparent) hairline.

Typography

Three families, all from Google Fonts: Fraunces (the high-contrast display serif, used at 900 and italic 300), Archivo Narrow (condensed grotesque for labels/buttons at 500–600), and Inter (400–500 body). All open-source — no substitutes needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(3rem,15vw,13rem)	900	0.9	-0.02em	Hero title, reveal word
display-italic	clamp(1.5rem,3.6vw,3rem)	300 (italic)	1.18	—	Pyramid notes, maker quote, hero sub
watermark	clamp(4rem,22vw,20rem)	900	0.8	-0.03em	Footer NOCTURNE watermark
eyebrow	0.72rem	600	—	0.22em	Eyebrow, footer headings, nav links
label	0.8rem	600	—	0.3em	Stage labels
button	0.78rem	600	—	0.18em	Buttons, nav links
body	17px	400	1.62	-0.006em	Body copy

Layout

Base unit is roughly 8px, but the layout is dominated by rem and viewport units (vw/vh/vmin). The page is a vertical sequence of full-bleed cinematic stages: a 100vh split hero, a 300vh pinned pyramid (sticky 100vh two-column grid where panels swap on scroll), a 100vh spotlight reveal, a 115vh maker scene with an absolutely-placed portrait and corner quote, and a footer with a 1200px three-column rail topped by a colossal watermark. Composition is absolute/sticky positioning rather than flow; nav is fixed with mix-blend difference. Whitespace is generous and theatrical — content pinned to viewport corners (6vw/13vh insets), large negative space around oversized type.

Elevation & Depth

Depth comes from light, not boxes. There are essentially no drop shadows on components — the only box-shadow is the hero seam's gold glow (0 0 28px rgba(201,162,39,.6)). Depth is built instead from: radial glows (the gold orb uses filter: blur(8px); the oxblood radial wash), mix-blend-mode (nav difference, reveal word difference, grain overlay), the spotlight radial mask, image filters in the reveal base (grayscale(1) brightness(.45) contrast(1.1)), and the omnipresent film-grain overlay at opacity .32. Everything is flat and matte except where gold light spills.

Shapes

Resolutely rectilinear. border-radius is 0 on every component — buttons, panels, portrait, inputs are all hard-cornered. The single curve is the pyramid glow orb (border-radius: 50%). Lines are a recurring motif: the 2px vertical gold seam, 2px gold horizontal rules that animate via scaleX, the 1px footer gradient hairline, and a 2px oxblood diagonal rotated -30deg in the maker scene.

Components

• Outline button (.btn) — transparent fill, 1px gold border, gold text, 0.95rem 1.7rem padding, no radius; hover fills gold with ink text. Labels: "The Notes ↓".
• Solid button (.btn--solid) — oxblood fill + border, bone text; hover shifts to blood. Label: "Discover the No. 1".
• Nav — fixed, transparent, mix-blend difference so it reads white on any background; NOCTURNE wordmark in Fraunces 900; uppercase Archivo Narrow links.
• Hero seam — 2px vertical gold bar with a 28px gold glow and a rotated vertical label "NOCTURNE · MMXXVI"; widens to ~62px on scroll.
• Rule — 2px gold horizontal divider, left-origin scaleX grow.
• Panel — note group with oxblood index ("01"), muted uppercase stage label, animated gold rule, and Fraunces-italic list items with gold em-dash bullets.
• Newsletter — borderless email input over a 1px muted bottom border; a gold underline grows on focus-within; gold "Join" button.
• Footer column — gold uppercase h4 heading, muted text links that lighten to bone on hover.

Motion

Two custom easings drive everything: --e-curtain cubic-bezier(.86,0,.07,1) for theatrical wipes and --e-settle cubic-bezier(.2,.8,.2,1) for soft arrivals. On load the body gets .is-loaded, triggering the hero curtain (both halves' clip-path inset over 1.2s, right half staggered +.08s) and a per-character title reveal (each letter animates letter-spacing from .4em→-.02em and fades in, staggered calc(var(--i)*45ms + .5s)). An IntersectionObserver adds .in to sections for entrance reveals. A single rAF scroll loop scrubs: the hero halves pull apart (±12vw) while the seam widens, the pyramid swaps three panels and scales its gold glow, the reveal stage scales 1→1.04, and the maker portrait parallaxes (-60px) with the quote mark sliding. The reveal section has a cursor-following radial spotlight mask (150px solid → 270px transparent), with a sin/cos auto-pulse fallback on no-hover devices.

Iconography

No icon library. All "icons" are typographic glyphs: a down arrow (↓) and right arrow (→) in button/link labels, em-dashes (—) as gold list bullets, and a giant curly quote (“) in Fraunces 900 gold as the maker quote mark. Accent color is gold throughout.

Do's and Don'ts

• Do keep everything sharp — border-radius: 0 is the law (only the glow orb is round).
• Do reserve gold for precious accents (seam, rules, headings, bullets) and oxblood for the heavier brand fills.
• Do keep the film grain and the high-contrast Fraunces/Archivo Narrow pairing — they carry the after-dark, editorial mood.
• Do lean on light (glows, blends, masks) for depth, not drop shadows.
• Don't add box shadows, soft cards, or rounded corners — they break the matte, rectilinear language.
• Don't brighten the surface; the page lives in ink and wine, with bone as the only relief.
• Don't mix in extra hues — the palette is ink/wine/bone + oxblood/gold only.

Known Gaps

• The film-grain texture is a hosted JPG (kombai-assets…) used as a fixed mix-blend overlay at opacity .32; its visual character is inferred, not re-derived.
• The hero seam's animated width (2px → ~62px) and the panel rule's scaleX progress are computed in JS on scroll; the listed maxima are read from the script, not authored CSS values.
• Spacing tokens are approximated from the rem/viewport values actually used; the design has no formal numeric spacing scale.