name: nightfall-design
version: alpha
description: >
  A deep midnight-blue editorial site for a fictional night-expedition brand
  ("Horizon"). The surface is near-black navy (`#0A0F1E`) layered with subtly
  bluer panels; a single warm gold "voltage" (`#E8AF4A`) carries every accent,
  rule, glow, and CTA, with a muted rose (`#D4637A`) as a rare secondary edge.
  The type story is high-contrast: an airy Italiana display for the brand,
  heavy italic Fraunces for section headlines, light Manrope for body, and an
  all-caps Space Mono micro-label for eyebrows, coords, and nav. Signature
  moves are a mouse-spotlight image reveal, a scroll-driven word-by-word gold
  fill, a slowly rotating constellation SVG, and a 3D mouse-tilt card grid.
  Geometry is uncompromisingly sharp — zero border-radius everywhere; depth
  comes from hairlines, gold glows, and glass-blur, never drop shadows.
colors:
  # Brand / Accent
  accent-gold: '#E8AF4A'        # the one voltage: CTAs, rules, eyebrows, glow, borders, arrows
  accent-gold-hover: '#f0bc5a'  # lighter gold on button hover
  accent-rose: '#D4637A'        # rare secondary: border of the featured crossing card
  # Surface
  bg-primary: '#0A0F1E'         # page base + hero + crossings + footer (near-black navy)
  bg-secondary: '#0F1930'       # routes section + featured card fill (bluer panel)
  surface-mid: '#141C33'        # voices section + card image wraps (mid navy)
  # Text
  text-primary: '#F2EBD8'       # warm bone — headings, body on dark, nav
  text-muted: '#8FA0B8'         # cool slate-blue — secondary body, coords, cites, captions
  # Hairlines (text-muted at low alpha)
  hairline-strong: 'rgba(143, 160, 184, 0.18)'  # route-card top/bottom rules
  hairline-faint: 'rgba(143, 160, 184, 0.12)'    # footer-bottom divider
  # Gradient / Glow
  hero-overlay: 'linear-gradient(to bottom, rgba(10,15,30,0.45), rgba(10,15,30,0.18), rgba(10,15,30,0.18), rgba(10,15,30,0.50))'  # video scrim
  gold-text-fill: 'linear-gradient(135deg, #E8AF4A 30%, #F2EBD8 80%)'  # active word-mask fill
  gold-glow: '0 0 40px rgba(232, 175, 74, 0.55), 0 0 80px rgba(232, 175, 74, 0.25)'  # "night" headline glow
typography:
  display:
    fontFamily: "'Italiana', serif"
    fontSize: clamp(28px, 3.6vw, 50px)
    fontWeight: 400
    lineHeight: 1.02
    letterSpacing: 0.04em
  display-logo:
    fontFamily: "'Italiana', serif"
    fontSize: clamp(52px, 7vw, 100px)
    fontWeight: 400
    lineHeight: 0.95
    letterSpacing: 0.03em
  headline:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(40px, 5vw, 68px)
    fontWeight: 900
    lineHeight: 1.04
  quote:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(26px, 3vw, 40px)
    fontWeight: 700
    lineHeight: 1.2
  body:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.68
  body-sm:
    fontFamily: "'Manrope', sans-serif"
    fontSize: 14px
    fontWeight: 300
    lineHeight: 1.72
  label:
    fontFamily: "'Space Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    letterSpacing: 0.20em
    textTransform: uppercase
rounded:                      # zero radius throughout — sharp-edged brutalist-editorial
  none: 0
spacing:                      # base unit 4px; layout uses viewport-relative gutters (6vw–8vw)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 36px
  2xl: 60px
  3xl: 100px
  4xl: 120px
components:
  nav:
    backgroundColor: 'transparent'         # → rgba(10,15,30,0.94) + blur(14px) when scrolled
    textColor: '{colors.text-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '24px 6vw'                     # → 16px vertical when scrolled
  nav-cta:
    backgroundColor: '{colors.accent-gold}'
    textColor: '{colors.bg-primary}'
    typography: '{typography.label}'
    rounded: '{rounded.none}'
    padding: '8px 20px'
  hero-cta:
    backgroundColor: '{colors.accent-gold}'
    textColor: '{colors.bg-primary}'
    typography: '{typography.label}'       # Space Mono 11px / 0.14em uppercase
    rounded: '{rounded.none}'
    padding: '14px 28px'
  route-card:
    backgroundColor: 'transparent'         # → rgba(232,175,74,0.07) on hover
    textColor: '{colors.text-primary}'
    typography: '{typography.quote}'       # route-name is Fraunces italic 20px
    rounded: '{rounded.none}'
    padding: '18px 12px 18px 20px'
    border: '3px solid {colors.accent-gold} (left) + 1px {colors.hairline-strong} (top/bottom)'
  crossing-card-featured:
    backgroundColor: '{colors.bg-secondary}'
    textColor: '{colors.text-primary}'
    typography: '{typography.quote}'
    rounded: '{rounded.none}'
    padding: '40px 32px'
    border: '1px solid {colors.accent-rose}'
  footer-cta-box:
    backgroundColor: 'transparent'
    textColor: '{colors.text-primary}'
    typography: '{typography.quote}'
    rounded: '{rounded.none}'
    padding: '36px 28px'
    border: '1px solid {colors.accent-gold}'
motion:
  ease-expo: 'cubic-bezier(0.16, 1, 0.3, 1) — the house easing for all reveals'
  hero-wipe: 'headline cover block scaleX(1)→0 over 700ms ease-expo on load'
  nav-scrolled: 'background + padding 400ms ease, blur(14px) glass at scrollY>60'
  hero-parallax: 'video opacity 1→0.45 and scale 1→1.06 driven by scroll'
  spotlight-reveal: 'radial-gradient mask (black 180px → transparent 280px) follows mouse; touch fallback pulses via sin/cos'
  word-fill: 'headline words flip to gold gradient one-by-one as scroll progress crosses per-word thresholds, 500ms color transition'
  headline-skew: 'routes headline translateY(30px) skewY(5deg)→0, 700ms ease-expo on intersect'
  headline-track: 'crossings headline letter-spacing 0.4em→0.01em over 1000ms ease-expo'
  card-tilt: '3D rotateX/rotateY ±6deg following mouse over crossing grid (perspective 1500px)'
  constellation-rotate: 'SVG group rotate 360deg over 120s linear infinite'
  scroll-bounce: 'scroll indicator translateY 7px loop, 2.2s ease-in-out'
icons:
  library: inline SVG + Unicode glyphs
  style: hairline SVG strokes; ✦ four-point star and → arrow as text glyphs
  stroke: 0.3px–1.4px (constellation lines / scroll chevron)
  sizes: { sm: 16px, md: 20px, lg: 28px }
  color: '{colors.accent-gold}'

Nightfall (Horizon — Night Expeditions)

nightfall-design · alpha

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

Overview

Nightfall is a cinematic, dark-mode editorial landing page for a fictional elite night-expedition outfitter, "Horizon." The whole surface lives in deep midnight navy — a near-black #0A0F1E base, a bluer #0F1930 panel, and a mid-navy #141C33 — so the page reads like night itself. Against that, one warm gold voltage (#E8AF4A) does all the work: it lights the CTAs, the eyebrow micro-labels, every hairline rule, the card borders, the arrows, and a literal glow on the word "night" in the hero. Text is a warm bone #F2EBD8 for headings and body, with a cool slate-blue #8FA0B8 for secondary copy. The type story is deliberately four-voiced: an elegant, airy Italiana serif for the "Horizon" wordmark and hero headline; a heavy 900-weight italic Fraunces (variable SOFT 100 / opsz 144) for section headlines and quotes; a light 300-weight Manrope for body; and an all-caps Space Mono at tiny sizes with wide tracking for eyebrows, coordinates, durations, and nav. The geometry is uncompromisingly sharp — there is no border-radius anywhere — and depth never comes from drop shadows; it comes from hairlines, gold glows, and a single glass-blur on the scrolled nav. The signature moves are theatrical: a mouse-driven spotlight that reveals a vivid image through a radial mask, a scroll-synced word-by-word gold fill on "They chose the dark.", a slowly rotating constellation SVG, and a 3D tilt card grid that responds to the mouse.

Colors

Brand / Accent. A single gold voltage accent-gold #E8AF4A is the entire accent system — nav/hero/footer CTAs, all eyebrows and micro-labels, the left rule on route cards, arrows, the constellation's brightest stars, the footer top-rule gradient, and the glowing "night" in the hero headline. Its hover state is a lighter accent-gold-hover #f0bc5a. A muted accent-rose #D4637A appears exactly once, as the 1px border of the featured "Atacama" crossing card — the only non-gold accent in the system.

Surface. Three navy tones build the night. bg-primary #0A0F1E is the page base, used by the hero, the crossings section, and the footer. bg-secondary #0F1930 is a slightly bluer panel for the routes section and the featured card fill. surface-mid #141C33 backs the voices section and the card image wraps.

Text. text-primary #F2EBD8 is a warm bone used for all headings, body on dark, and nav links. text-muted #8FA0B8 is a cool slate-blue for secondary body copy, route metadata, coordinates, citations, and captions.

Hairlines. Borders are text-muted at low alpha: hairline-strong rgba(143,160,184,0.18) for the route-card top/bottom rules, and hairline-faint rgba(143,160,184,0.12) for the footer-bottom divider.

Gradient / Glow. The hero hero-overlay is a top-to-bottom navy scrim over the video (rgba(10,15,30,0.45→0.18→0.18→0.50)). The active word in the masked headline uses gold-text-fill — a 135deg gradient from #E8AF4A to #F2EBD8 clipped to text. The hero "night" carries gold-glow, a double gold text-shadow (0 0 40px / 0 0 80px). The footer top-rule is a horizontal gold gradient fading to transparent at both ends.

Typography

Four families, all loaded from Google Fonts in one request: Italiana (display serif), Fraunces (variable italic serif, opsz 9–144), Manrope (300/400/500 sans body), and Space Mono (400 mono labels). All are open-source / on Google Fonts, so no substitutes are needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(28px,3.6vw,50px)	400	1.02	0.04em	Italiana — hero headline
display-logo	clamp(52px,7vw,100px)	400	0.95	0.03em	Italiana — footer wordmark (nav logo 22px)
headline	clamp(40px,5vw,68px)	900 italic	1.04	—	Fraunces — section headlines (voices up to clamp(44,6vw,80))
quote	clamp(26px,3vw,40px)	700 italic	1.2	—	Fraunces — primary quote, route names, card titles
body	16px	300	1.68	—	Manrope — hero sub, body copy
body-sm	14px	300	1.72	—	Manrope — section/crossing body, footer links
label	10px	400	—	0.20em	Space Mono uppercase — eyebrows, nav, coords, cites

Note: micro-labels vary tracking by context — nav 0.12em, eyebrows 0.20em, coords 0.22em, vertical rail 0.24em. The crossings headline animates tracking from 0.4em to 0.01em on entry.

Layout

Base spacing unit is 4px, but the page is governed by viewport gutters: page padding is 6vw–8vw horizontal, content maxes at 1440px centered. The hero is a full-viewport (100vh, min 600px) cinematic block with a video background, a navy scrim, a rotating constellation SVG pinned top-left, a rotated vertical text rail on the far right edge, and the headline/sub/CTA anchored hard right (max-width: 54%, right-aligned). The routes section is a two-column grid (1fr 1fr, 60px gap) over a spotlight-masked image. The voices section is a centered 1100px column with the masked headline and three testimonials that step down in size and alternate alignment (left → right → center). Night Crossings is an asymmetric 3-column grid (44fr 32fr 24fr) with staggered top margins (0 / 80px / 160px) and perspective: 1500px for the tilt. The footer is a 1.8fr 1.6fr 1.3fr grid with a giant Italiana wordmark, a two-column link block, and a bordered CTA box. Whitespace is generous and section padding is large (100–120px vertical).

Elevation & Depth

There are no drop shadows on any UI element. Depth is created three ways: (1) glass — the nav gains backdrop-filter: blur(14px) over a 94%-opaque navy when scrolled; (2) glow — the hero "night" carries a double gold text-shadow (0 0 40px / 0 0 80px rgba(232,175,74,...)); (3) borders & 3D transform — the crossing cards use real translateZ separation (0 / -40px / -80px) inside a 1500px perspective and mouse-driven rotateX/Y, so depth is literal rather than simulated with shadow. Layering otherwise relies on opacity, grayscale filters, and the radial spotlight mask.

Shapes

Zero radius, everywhere. Every button, card, image wrap, input edge, and badge is a hard rectangle (rounded.none = 0). The only curves in the design are organic, not UI: the constellation circles, the ✦ star glyph, and the rounded stroke caps on the scroll-indicator chevron. The sharp-edged geometry is core to the editorial, almost map-like character.

Components

• nav — transparent bar, 24px 6vw padding; on scroll becomes rgba(10,15,30,0.94) + blur(14px) and tightens to 16px vertical. Logo is Italiana 22px; links are Space Mono 10px uppercase at 0.75 opacity.
• nav-cta — gold fill #E8AF4A, navy text, 8px 20px, no radius, label "Begin →"; hover → #f0bc5a.
• hero-cta — gold fill, navy text, Space Mono 11px / 0.14em, 14px 28px, label "Begin Your Expedition →"; hover lightens + lifts 1px.
• route-card — transparent row with a 3px gold left border and 1px hairline top/bottom rules; Fraunces italic 20px name + Space Mono region + Manrope duration + gold arrow; hover tints rgba(232,175,74,0.07).
• crossing-card (3 variants) — image-wrap (surface-mid bg) + body; card-2 is the featured variant with bg-secondary fill and a 1px accent-rose border, 40px 32px padding; coords in gold mono, title in Fraunces italic.
• footer-cta-box — 1px gold border, 36px 28px, Fraunces copy + gold mono button "Begin an Expedition →".
• eyebrow / section-label — Space Mono 10px uppercase gold, prefixed with ✦ in the hero.

Motion

The house easing is --ease-expo: cubic-bezier(0.16,1,0.3,1), used for every reveal. On load, the hero headline wipes in via a cover block scaling scaleX(1)→0 over 700ms. The nav cross-fades to glass at scrollY > 60. The hero video dims (opacity 1→0.45) and scales (1→1.06) on scroll. Section headlines reveal distinctively: routes translates up and un-skews (skewY(5deg)→0); crossings animates letter-spacing 0.4em→0.01em over 1000ms. The voices headline fills word-by-word — each word flips to the gold gradient as scroll progress crosses its threshold (500ms color transition). The routes spotlight follows the mouse via a radial-gradient mask (black 180px → transparent 280px); on touch it pulses on a sin/cos loop. The crossing grid tilts cards in 3D (±6deg rotateX/Y) following the mouse. Ambient loops: the constellation rotates 360° over 120s, and the scroll indicator bounces 7px on a 2.2s loop. IntersectionObservers add .is-in to stagger card/quote entrances.

Iconography

No icon font. Iconography is hand-drawn inline SVG plus Unicode glyphs. The hero scroll-indicator is a small inline-SVG down-chevron with 1.4px gold rounded strokes. The constellation is a custom SVG of lines (0.3–0.6px) and circles in gold and bone at varying opacity. UI "icons" are text glyphs: the ✦ four-point star (eyebrows, footer bullets) and → arrows (CTAs, route rows), both rendered in gold or inheriting text color.

Do's and Don'ts

• Do keep gold (#E8AF4A) as the only accent — let it carry every CTA, rule, label, and glow against the navy field.
• Do keep every corner sharp (radius 0) and build depth from hairlines, glow, glass, and real 3D transforms — never drop shadows.
• Do honor the four-voice type system: Italiana brand, heavy italic Fraunces headlines, light Manrope body, all-caps Space Mono micro-labels.
• Don't introduce a second loud accent; rose (#D4637A) is a one-off card edge, not a palette member.
• Don't add rounded corners, soft shadows, or light backgrounds — they break the nocturnal, map-like editorial mood.
• Don't set body type heavier than 300, or labels in anything but uppercase wide-tracked Space Mono.

Known Gaps

• The reduced-motion block in the stylesheet is empty (the comment header exists with no rules), so motion is not actually suppressed for users with prefers-reduced-motion.
• The spotlight mask radii (180px / 280px), tilt angle (±6deg), z-separations, and word-fill thresholds are read directly from the inline JS, but their perceived effect depends on runtime mouse/scroll input.
• Hero, routes, and crossing images/video are remote CDN assets; colors here describe the CSS layer (scrims, fills, filters), not the imagery itself.
• Spacing tokens are inferred groupings of the recurring padding values (4px base; 6vw–8vw gutters); the HTML does not declare a formal scale.