name: lucid-design
version: alpha
description: >
  Lucid is a cinematic, editorial eyewear landing page that opens on a full-bleed
  dual-video hero where a hand-held glasses frame follows the cursor and reveals a
  sharp "in-focus" world through lens-shaped masks over a blurred backdrop. The
  surface alternates between near-black cinema (`#0a0a0a`, `#1a1a1a`, `#15120f`)
  and warm paper creams (`#f4efe7`, `#fafaf7`, `#f5f3ee`), with a single warm amber
  (`rgba(245,198,140,…)` / `rgba(193,130,70,…)`) used only as a whisper on hover
  and ambient glows. The type story is editorial: Instrument Serif (often italic)
  for every headline, Instrument Sans for body and UI, and a Caveat script wordmark.
  Signature moves are the lens-reveal hero, oversized serif watermark numbers, a
  kinetic italic-serif marquee, and a giant italic "Look closer." finale. Geometry
  is soft-paper: pill buttons (999px) and near-square 4px image corners, structure
  carried by hairline rules rather than shadows.
colors:
  # Surface — dark
  surface-black: '#0a0a0a'        # html/body base, hero backdrop, finale
  surface-ink: '#1a1a1a'          # craft section bg; primary text on cream
  surface-espresso: '#15120f'     # materials section bg
  surface-espresso-deep: '#0e0c0a' # materials image placeholder bg
  # Surface — cream/paper
  surface-cream: '#f4efe7'        # Collection section bg + sticky rail
  surface-paper: '#fafaf7'        # Field Notes (journal) section bg
  surface-paper-warm: '#f5f3ee'   # footer bg
  surface-marquee: '#efe8dd'      # marquee band bg
  # Text
  text-on-dark: '#ffffff'         # headings/body on dark surfaces
  text-on-dark-85: 'rgba(255,255,255,0.85)'  # hero sub
  text-on-dark-88: 'rgba(255,255,255,0.88)'  # craft body
  text-on-dark-70: 'rgba(255,255,255,0.7)'   # materials body
  text-on-dark-65: 'rgba(255,255,255,0.65)'  # finale sub
  text-on-dark-muted: 'rgba(255,255,255,0.45)' # finale eyebrow
  text-heading: '#1a1a1a'         # serif headlines on cream
  text-body: '#4a4540'            # body copy on cream (desc, excerpts)
  text-body-soft: '#6b6660'       # secondary excerpt grey
  text-muted: '#8a857d'           # eyebrows/tags/meta on cream
  cta-text: '#111111'             # text inside white pills
  # Brand accent — warm amber (whisper only)
  amber-warm: 'rgba(245,198,140,0.95)'  # material number on hover; finale glow base
  amber-line: 'rgba(245,198,140,0.85)'  # underline drawn beneath material number
  amber-bronze: 'rgba(193,130,70,0.85)' # marquee separator dots
  # Hairlines / borders
  hairline-dark: 'rgba(26,26,26,0.12)'   # frame-row rules
  hairline-dark-soft: 'rgba(26,26,26,0.09)' # sticky rail bottom border
  hairline-light: 'rgba(255,255,255,0.1)'   # material-row rules
  hairline-nav: 'rgba(255,255,255,0.06)'    # sticky-nav bottom border
  rule-heavy: '#1a1a1a'           # 2px featured journal top rule
  # Gradient / overlay
  glass-nav: 'rgba(10,10,10,0.78)' # sticky nav fill (blur 24px)
  vignette: 'rgba(0,0,0,0.45)'     # hero radial/linear vignette edge
typography:
  display-italic:
    fontFamily: "'Instrument Serif', Georgia, 'Times New Roman', serif"
    fontSize: clamp(96px, 16vw, 240px)
    fontWeight: 400
    lineHeight: 0.9
    letterSpacing: -0.022em
    fontStyle: italic
  hero-h1:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: clamp(64px, 9.2vw, 132px)
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: -0.012em
  section-h:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: clamp(52px, 5.6vw, 80px)
    fontWeight: 400
    lineHeight: 1.04
    letterSpacing: -0.01em
  frame-name:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: clamp(56px, 6.6vw, 96px)
    fontWeight: 400
    lineHeight: 0.96
    letterSpacing: -0.012em
  watermark-number:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: clamp(140px, 19vw, 260px)
    fontWeight: 400
    lineHeight: 0.82
    letterSpacing: -0.025em
  marquee-word:
    fontFamily: "'Instrument Serif', Georgia, serif"
    fontSize: clamp(40px, 5.5vw, 84px)
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.015em
    fontStyle: italic
  wordmark:
    fontFamily: "'Caveat', cursive"
    fontSize: 44px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.01em
  body:
    fontFamily: "'Instrument Sans', system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
  sub:
    fontFamily: "'Instrument Sans', system-ui, sans-serif"
    fontSize: clamp(18px, 1.45vw, 24px)
    fontWeight: 400
    lineHeight: 1.5
  eyebrow:
    fontFamily: "'Instrument Sans', system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.22em
    textTransform: uppercase
  button:
    fontFamily: "'Instrument Sans', system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1
    letterSpacing: 0.01em
rounded:
  xs: 4px        # materials image corners
  pill: 999px    # all buttons / nav pills
spacing:          # base unit 4px; large layout gutters use 10vw
  xs: 4px
  sm: 10px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 40px
  '3xl': 56px
  section-pad: 140px   # materials/journal vertical padding
  gutter: 10vw         # section horizontal gutter
components:
  hero-cta:
    backgroundColor: '{colors.text-on-dark}'
    textColor: '{colors.cta-text}'
    typography: '{typography.button}'
    rounded: '{rounded.pill}'
    padding: '16px 32px'
    # white pill, box-shadow 0 12px 36px rgba(0,0,0,.28); hover lifts -2px to #f4f4f4
  nav-pill:
    backgroundColor: 'transparent'
    textColor: '{colors.text-on-dark}'
    typography: '{typography.sub}'
    rounded: '{rounded.pill}'
    padding: '10px 22px'
    # ghost: 1px solid rgba(255,255,255,0.55); hover inverts to white fill / #111 text
  finale-cta:
    backgroundColor: '{colors.text-on-dark}'
    textColor: '{colors.cta-text}'
    typography: '{typography.button}'
    rounded: '{rounded.pill}'
    padding: '18px 38px'
    # uppercase, letter-spacing 0.06em, shadow 0 12px 36px rgba(0,0,0,.32)
  frame-row:
    backgroundColor: '{colors.surface-cream}'
    textColor: '{colors.text-heading}'
    typography: '{typography.frame-name}'
    rounded: '{rounded.xs}'
    padding: '110px 0 100px'
    # two-col zig-zag editorial row, border-top 1px {colors.hairline-dark}
  material-row:
    backgroundColor: '{colors.surface-espresso}'
    textColor: '{colors.text-on-dark}'
    typography: '{typography.body}'
    rounded: '{rounded.xs}'
    padding: '36px 0 32px'
    # grid 92px/1fr; serif number 44px, border-bottom 1px {colors.hairline-light}
  journal-featured:
    backgroundColor: '{colors.surface-paper}'
    textColor: '{colors.text-heading}'
    typography: '{typography.section-h}'
    rounded: '{rounded.xs}'
    padding: '36px 0 0'
    # heavy 2px top rule ({colors.rule-heavy}); serif title clamp(40px,3.8vw,60px)
  sticky-nav:
    backgroundColor: '{colors.glass-nav}'
    textColor: '{colors.text-on-dark}'
    typography: '{typography.wordmark}'
    rounded: '0'
    padding: '20px 56px'
    # backdrop-filter blur(24px), border-bottom 1px {colors.hairline-nav}
  marquee:
    backgroundColor: '{colors.surface-marquee}'
    textColor: '{colors.text-heading}'
    typography: '{typography.marquee-word}'
    rounded: '0'
    padding: '40px 0'
    # hairline top/bottom rgba(26,26,26,0.06); 36s linear infinite slide
motion:
  hero-rise: 'h1/sub rise 1100ms cubic-bezier(0.16,1,0.3,1) staggered 200/450ms; CTA fadeIn at 700ms'
  lens-follow: 'JS rAF: glasses PNG lerps to cursor (0.15), idle sine bob, rotation tied to velocity, entrance scale 0.85→1.0 over 600ms; lens mask tracks via CSS vars'
  scroll-reveal: '[data-animate] opacity+translateY(24px) 600ms cubic-bezier(0.16,1,0.3,1) via IntersectionObserver, staggered per section'
  counter: 'material numbers count 00→N over 800ms ease (1-(1-t)^4) on reveal'
  marquee: 'translateX(0→-50%) 36s linear infinite; pauses on hover'
  craft-parallax: 'scroll-driven translateY (±20px) on scale(1.05) craft image'
  finale-rise: 'finale-h 1000ms translateY(36px) rise; sub +200ms, cta +350ms delay'
  hover-lift: 'cards translateY(-3/-4/-6px) 350ms; pills :active scale(0.96-0.97)'
icons:
  library: inline text glyphs (no icon font)
  style: typographic arrows
  sizes: { sm: 12px, md: 16px, lg: 18px }
  color: '{colors.text-heading}'
  # → (U+2192) on CTAs and links, • bullet separators in marquee

Lucid

lucid-design · alpha

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

Overview

Lucid is a cinematic editorial landing page for a fictional eyewear maker, built around a single conceptual move: focus. The hero is a full-viewport stack of two synced background videos — a blurred world (#bg-blurred) and a sharp one (#bg-sharp) — where a hand-held glasses PNG follows the cursor and its lens shapes act as a CSS mask that reveals the sharp footage only inside the lenses, so the world literally comes "into focus" wherever you point. From there the page moves through alternating beats: warm paper-cream editorial sections (#f4efe7, #fafaf7) carrying oversized serif headlines and watermark numbers, near-black cinema sections (#0a0a0a, #1a1a1a, #15120f) with grain overlays and amber ambient glows, a kinetic italic-serif marquee on #efe8dd, and a giant italic clamp(96px,16vw,240px) "Look closer." finale before a quiet light footer. The type story is unapologetically editorial — Instrument Serif (frequently italic) for every headline, Instrument Sans for body and UI, and a Caveat script "Lucid" wordmark — and the one accent, a warm amber, is rationed almost entirely to hover states and glows. Geometry is soft and paper-like: pill buttons (999px), nearly-square 4px image corners, and structure carried by hairline rules instead of shadows.

Colors

Surface (dark). The page base is #0a0a0a (html/body, hero backdrop, finale). Three further dark surfaces give the cinema beats distinct temperatures: #1a1a1a (craft section, and the primary text color on cream), #15120f warm espresso (materials), and #0e0c0a (materials image placeholder).

Surface (cream/paper). The light beats run warm: #f4efe7 (Collection + its sticky rail), #fafaf7 (Field Notes), #f5f3ee (footer), and #efe8dd (marquee band).

Text. On dark, white #ffffff headlines drop to graded whites for body — rgba(255,255,255,0.88) (craft), 0.85 (hero sub), 0.7 (materials body), 0.65 (finale sub), and 0.45 (finale eyebrow). On cream, headings are #1a1a1a, body is #4a4540, softer excerpts #6b6660, and eyebrows/tags/meta are muted #8a857d. Text inside white pills is #111111.

Brand accent — warm amber. A single warm voltage appears only as a whisper: rgba(245,198,140,0.95) colors a material number on row hover with a 0.85 underline drawing under it, rgba(193,130,70,0.85) colors the marquee separator dots, and faint rgba(245,198,140,0.10/0.04) radial gradients glow behind the finale headline.

Hairlines. Structure is drawn with thin rules: rgba(26,26,26,0.12) between frame rows, 0.09 under the sticky rail, rgba(255,255,255,0.1) between material rows, rgba(255,255,255,0.06) under the sticky nav, and a heavy solid #1a1a1a 2px top rule on the featured journal card.

Gradient / overlay. The sticky nav is glassy rgba(10,10,10,0.78) over a blur(24px); the hero carries a radial+linear vignette fading to rgba(0,0,0,0.45) at the edges; the craft image sits under stacked black-to-transparent overlays.

Typography

Three Google Fonts families are imported: Instrument Serif (regular + italic), Instrument Sans (400–700), and Caveat (600/700). Instrument Serif is the editorial voice for every headline class (h1, .section-h, .frame-info-name, .material-title numbers, .marquee-word, .finale-h) at weight 400, frequently set in italic. Instrument Sans is the body/UI face. Caveat is the handwritten "Lucid" wordmark only.

Token	Size	Weight	Line-height	Tracking	Usage
display-italic	clamp(96px,16vw,240px)	400	0.9	-0.022em	Finale "Look closer." (italic)
hero-h1	clamp(64px,9.2vw,132px)	400	1.02	-0.012em	Hero headline (em runs italic)
section-h	clamp(52px,5.6vw,80px)	400	1.04	-0.01em	Section headlines
frame-name	clamp(56px,6.6vw,96px)	400	0.96	-0.012em	Frame product names
watermark-number	clamp(140px,19vw,260px)	400	0.82	-0.025em	Faint 01/02/03 watermarks
marquee-word	clamp(40px,5.5vw,84px)	400 (italic)	1	-0.015em	Marquee phrases
wordmark	44px	600	1	0.01em	Caveat "Lucid"
body	18px	400	1.55	0	Descriptions, excerpts, craft/materials body
sub	clamp(18px,1.45vw,24px)	400	1.5	0	Hero subhead
eyebrow	13px	500	1.4	0.22em (upper)	Section eyebrows / tags
button	16px	600	1	0.01em	CTA / pill labels

Layout

Base spacing unit is 4px; the recurring layout gutter is 10vw and big editorial sections pad 140px vertically. The page is a single scroll of full-height sections. The hero is 100vh/100dvh, cursor:none, with five stacked z-layers (blurred video → vignette → masked sharp video → hero text → glasses frame). The Collection uses a sticky compact rail (top:71px, eyebrow + headline side-by-side) above an editorial zig-zag of 1fr 1fr frame rows with reversed alternation and oversized serif watermark numbers bled to -2vw. Materials is a 1fr 1.2fr spread (3:4 image + numbered rows), Field Notes a 1.5fr 1fr masthead (featured + stacked sidebars), craft a full-bleed image with bottom-left content. A fixed glass sticky nav fades in past the hero. Whitespace is generous and editorial; below 880px the grids collapse to single column.

Elevation & Depth

The system is deliberately flat — depth comes from hairlines, blur, glows, and grain, not card shadows. The only real box-shadows are on the floating white pills (hero CTA 0 12px 36px rgba(0,0,0,0.28) → hover 0 18px 44px, finale CTA 0 12px 36px rgba(0,0,0,0.32)) and as text-shadows on hero/craft headlines for legibility over video/photo. The sticky nav is glass (backdrop-filter blur(24px) over rgba(10,10,10,0.78)). Dark sections (materials, craft) carry a tiled base64 noise/grain at opacity 0.12, mix-blend-mode: overlay, 48px tile. The finale glows with faint amber radial gradients.

Shapes

Two radii only. Buttons and nav pills are fully rounded at 999px, the signature soft shape. Image containers (materials) use a near-square 4px corner. Everything else — rows, rails, marquee band, footer — is hard-edged with 0 radius, letting hairline rules and type carry the structure. The lens mask is the one organic shape: two glasses-lens silhouettes traced as SVG paths.

Components

• Hero CTA — white #fff pill, #111 text, 16px 32px, 999px, shadow 0 12px 36px; label "Shop the collection →"; hover lifts -2px to #f4f4f4.
• Nav pill — ghost: transparent, white text, 1px solid rgba(255,255,255,0.55), 10px 22px, 999px; label "Contact"; hover inverts to white fill / #111 text; :active scale(0.96).
• Finale CTA — white pill, uppercase 0.06em tracking, 18px 38px, shadow 0 12px 36px rgba(0,0,0,0.32); "Shop the collection →".
• Frame row — cream #f4efe7, two-column zig-zag, top rule rgba(26,26,26,0.12), serif name clamp(56px,6.6vw,96px), price meta + underlined "See the Maple" link; hover floats the frame visual -6px.
• Material row — espresso #15120f, 92px/1fr grid, serif 44px number that counts up 00→N, amber underline on hover, bottom hairline rgba(255,255,255,0.1).
• Journal featured card — paper #fafaf7, heavy 2px #1a1a1a top rule, serif title clamp(40px,3.8vw,60px), "Read the essay →"; sidebars use 1px hairline.
• Sticky nav — glass rgba(10,10,10,0.78) + blur(24px), 20px 56px, slides down from translateY(-100%) when past hero.
• Marquee band — #efe8dd, italic serif words sized to clamp(40px,5.5vw,84px) with bronze • dots, 36s linear loop, pauses on hover.

Motion

Hero text rises with cubic-bezier(0.16,1,0.3,1) staggered (h1 200ms, sub 450ms, CTA fade 700ms). The hallmark is the JS-driven lens: the glasses PNG lerps toward the cursor (factor 0.15), idle-bobs on a sine, rotates with horizontal velocity, and enters scaling 0.85→1.0 over 600ms while CSS mask variables track the lens windows. Below the hero, all [data-animate] elements reveal once via IntersectionObserver (opacity + translateY(24px), 600–1000ms, per-section staggered delays); material numbers count up 00→N over 800ms. The marquee slides 0→-50% over 36s (paused on hover), the craft image gets scroll-driven parallax, and cards lift -3/-4/-6px on hover with pills scaling on :active.

Iconography

No icon font or SVG icon library. Directionality is conveyed with typographic glyphs: a right arrow → (U+2192, via content:'\2192' or inline span) on CTAs, product links, and journal links — animating translateX on hover — and • bullet separators in the marquee. The one bespoke vector is the lens mask, two glasses-lens paths embedded as a base64 SVG used as a CSS mask-image.

Do's and Don'ts

• Do keep headlines in Instrument Serif at weight 400 and reach for italic on the emphatic beats (hero em, marquee, finale).
• Do alternate warm cream and near-black sections to keep the cinematic rhythm.
• Do ration the amber to hover states and ambient glows only.
• Do carry structure with hairline rules and let whitespace breathe.
• Don't add drop shadows to cards — depth here is hairlines, glass, glow, grain.
• Don't round anything except pills (999px) and the 4px image corners.
• Don't introduce a second accent hue or saturate the amber into a solid fill.
• Don't swap Caveat out of the wordmark or use it anywhere else.

Known Gaps

• The hero's visual payload (blurred/sharp videos, glasses-frame PNGs, materials/ craft photos) are remote CDN assets; only the CSS treatment around them is documented, not the media themselves.
• The lens-follow, counter, parallax, and marquee behaviors are JS/@keyframes driven; durations and easings are read from code, but the perceived feel is an approximation in prose.
• Spacing tokens are inferred from the recurring 4px-multiple paddings and the 10vw / 140px layout gutters; the markup uses no formal spacing scale.
• The amber accent has several near-identical alpha variants (rgba(245,198,140,0.95/0.85/0.10/0.04)); these are grouped under a few tokens rather than listed exhaustively.