name: headwaters-design
version: alpha
description: >
  An editorial alpine-expedition landing page on a warm parchment surface
  (#F0EEE8) with a deep slate-blue dark band (#1B2535). Two cool field accents
  — pine green (#2E7D5A) and glacial teal (#5B9FB0) — carry every CTA, eyebrow
  and annotation. The type story is a triad: italic Crimson Pro serif headlines,
  Lora serif body, and italic JetBrains Mono for coordinate strips, eyebrows and
  stats, plus heavy Bodoni Moda for the giant stat numerals. Signature moves are
  the letter-spacing wind-up on headlines, a hover-expand bento grid, a
  scroll-pinned topographic SVG that draws its contour lines and route, and
  count-up stat numerals. Geometry is uniformly sharp — zero border-radius,
  hairline borders and 1px-frame imagery, no shadows except a glass nav blur.
colors:
  # Surface
  bg-primary: '#F0EEE8'      # page surface — warm parchment; itinerary/ridge/footer bg
  bg-dark: '#1B2535'         # deep slate-blue dark band; proof section bg, video fallback
  surface-alt: '#E4E1D8'     # declared alternate parchment surface (--surface-alt)
  # Text
  text-primary: '#1B2535'    # headings + body on parchment (= bg-dark hue)
  text-muted: '#687888'      # muted body, intros, footer bottom
  text-light: '#F0EEE8'      # text on dark band + hero (= bg-primary hue)
  # Brand / Accent
  accent-1: '#2E7D5A'        # pine green — primary CTA fill, eyebrows, route line
  accent-2: '#5B9FB0'        # glacial teal — coords, annotations, focus ring, contours
  accent-1-hover: '#266b4d'  # darker pine on CTA hover (also #26704f variant)
  # Hairlines (rgba over surfaces)
  hairline-teal: 'rgba(91, 159, 176, 0.35)'   # stat dividers on dark
  hairline-teal-soft: 'rgba(91, 159, 176, 0.2)' # quote divider on dark
  hairline-dark: 'rgba(27, 37, 53, 0.1)'       # footer-bottom rule on parchment
  # Glass / Overlay
  nav-glass: 'rgba(240, 238, 232, 0.6)'        # scrolled nav fill (blur 20px sat 1.4)
  overlay-dark: 'rgba(27, 37, 53, 0.72)'       # bento tile bottom gradient
typography:
  headline:
    fontFamily: "'Crimson Pro', serif"
    fontSize: clamp(28px, 3.6vw, 52px)
    fontWeight: 700
    lineHeight: 1.08
    letterSpacing: -0.03em
    fontStyle: italic
  section-headline:
    fontFamily: "'Crimson Pro', serif"
    fontSize: clamp(36px, 4vw, 52px)
    fontWeight: 700
    lineHeight: 1.06
    letterSpacing: -0.02em
    fontStyle: italic
  stat-number:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(64px, 7vw, 96px)
    fontWeight: 900
    lineHeight: 0.95
    letterSpacing: -0.02em
  body:
    fontFamily: "'Lora', serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
  body-sm:
    fontFamily: "'Lora', serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.75
  quote:
    fontFamily: "'Lora', serif"
    fontSize: clamp(20px, 2.8vw, 34px)
    fontWeight: 400
    lineHeight: 1.4
    fontStyle: italic
  eyebrow:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.18em
    textTransform: uppercase
    fontStyle: italic
  coord:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0.16em
    fontStyle: italic
  mono-cta:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0.14em
    textTransform: uppercase
rounded:                      # uniformly sharp — no radius anywhere
  none: 0px
spacing:                      # base unit 4px; horizontal gutter is 4vw
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 28px
  3xl: 48px
  4xl: 80px
  5xl: 100px
components:
  navCta:
    backgroundColor: '{colors.accent-1}'
    textColor: '#ffffff'
    typography: '{typography.mono-cta}'
    rounded: '{rounded.none}'
    padding: '8px 20px'
  heroCta:
    backgroundColor: '{colors.accent-1}'
    textColor: '#ffffff'
    typography: '{typography.mono-cta}'
    rounded: '{rounded.none}'
    padding: '14px 28px'
    focusRing: '2px solid {colors.accent-2}'
  bentoTile:
    backgroundColor: '{colors.accent-2}'
    overlay: 'linear-gradient(to bottom, transparent 40%, {colors.overlay-dark} 100%)'
    rounded: '{rounded.none}'
    nameTypography: "'Crimson Pro', serif italic 18px/700"
    labelBackground: 'rgba(27, 37, 53, 0.65)'
    labelTypography: '{typography.coord}'
  statBlock:
    numberTypography: '{typography.stat-number}'
    labelTypography: '{typography.coord}'
    divider: '1px solid {colors.hairline-teal}'
  ridgeImageFrame:
    border: '1px solid {colors.accent-2}'
    padding: '8px'
    rounded: '{rounded.none}'
  footerCtaBox:
    border: '1px solid {colors.accent-1}'
    padding: '36px 28px'
    rounded: '{rounded.none}'
    copyTypography: '{typography.quote}'
  nav:
    scrolledBackground: '{colors.nav-glass}'
    backdropFilter: 'blur(20px) saturate(1.4)'
    borderBottom: '1px solid rgba(255, 255, 255, 0.3)'
motion:
  ease-expo: 'cubic-bezier(0.16, 1, 0.3, 1)'
  headline-windup: 'letter-spacing 0.28em→-0.03em + opacity over 900ms ease-expo'
  ridge-headline-windup: 'letter-spacing 0.35em→-0.02em over 1000ms ease-expo'
  nav-shrink: 'background/padding/box-shadow 400ms ease on scroll>80px'
  hero-parallax: 'video opacity 1→0.45 + scale 1→1.055 on scroll (rAF)'
  bento-hover: 'hovered tile scale(1.04), siblings opacity 0.55 + scale(0.98)'
  bento-stagger: 'tiles enter translateY(24px)→0, 80ms stagger'
  topo-svg-draw: 'stroke-dashoffset driven by scroll progress on pinned 200vh wrap'
  count-up: 'easeOutQuad numeral count to target over 1200ms, 200ms stagger'
icons:
  library: inline svg
  style: 'topographic contour ellipses + route path, stroke-only'
  stroke: 1.5px (contours) / 2.5px (route)
  sizes: { svg: 600x400 viewBox }
  color: '{colors.accent-2}'   # contours teal; route line {colors.accent-1}

Horizon — Headwaters

headwaters-design · alpha

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

Overview

Headwaters is the design system behind "Horizon," a fictional elite alpine- expedition site. The page lives on a warm parchment surface #F0EEE8 punctuated by one deep slate-blue dark band #1B2535 (the proof / stat wall). Two cool field accents do all the brand work: pine green #2E7D5A (--accent-1) fills every CTA and draws the summit route, and glacial teal #5B9FB0 (--accent-2) handles coordinates, eyebrows, contour lines and focus rings. The type story is a deliberate triad-plus-one: italic Crimson Pro serif for headlines, Lora serif for body and quotes, italic JetBrains Mono for the cartographic detail (coordinate strips, eyebrows, stat labels, CTAs), and heavy black Bodoni Moda reserved for the oversized stat numerals. The geometry is uniformly sharp — there is no border-radius anywhere; depth comes from hairline borders, 1px image frames, a single glass-blur nav, and gradient overlays rather than shadows. The signature motion is editorial: headlines wind up from wide letter- spacing to tight on enter, the bento grid expands the hovered tile while dimming its siblings, a topographic SVG draws its contour ellipses and a green route line as you scroll through a pinned 200vh section, and the stat numerals count up.

Colors

Surface. The page background is parchment --bg-primary: #F0EEE8, used by the itinerary, ridge and footer sections. The proof section inverts to the dark band --bg-dark: #1B2535, which also backs the hero video while it loads. A declared but lightly-used --surface-alt: #E4E1D8 is the alternate parchment tone.

Text. Headings and body on parchment use --text-primary: #1B2535 (same hue as the dark band). --text-muted: #687888 carries intros, dispatch text and the footer bottom rule. On dark/hero surfaces, --text-light: #F0EEE8 is the light text (same hue as the page surface).

Brand / Accent. --accent-1: #2E7D5A (pine green) is the primary action color — every CTA fill, every section eyebrow on parchment, the footer top border, the SVG route line and summit dot. It darkens to #266b4d/#26704f on hover. --accent-2: #5B9FB0 (glacial teal) is the cartographic accent — hero coordinate text, the bottom coordinate strip, footer coords, contour-line strokes, the SVG altitude label, and all focus-ring outlines.

Hairlines. Dividers are teal-tinted rgba over the dark band: rgba(91,159,176,0.35) between stats, rgba(91,159,176,0.2) above the quote; on parchment the footer-bottom rule is rgba(27,37,53,0.1).

Glass / Overlay. The scrolled nav fills rgba(240,238,232,0.6) under a blur(20px) saturate(1.4) backdrop with a rgba(255,255,255,0.3) bottom hairline. Bento tiles carry a bottom gradient to rgba(27,37,53,0.72); the hero uses a two-band slate overlay (0.22 top → transparent mid → 0.28 bottom).

Typography

All faces load from Google Fonts in one stylesheet link. Crimson Pro (italic 700) is the headline serif used at the hero, every section headline and the footer logo. Lora (400/500, with italics) is the body/quote serif and the default body font. JetBrains Mono (italic, 400/500) is the monospace used for every coordinate, eyebrow, stat label, nav link and CTA — set uppercase with wide tracking. Bodoni Moda (black 900, optical sizing on) is reserved for the giant stat numerals only. All faces are open-source Google Fonts; no substitution needed.

Token	Size	Weight	Line-height	Tracking	Usage
headline	clamp(28–52px)	700 italic	1.08	-0.03em (settled)	Hero H1
section-headline	clamp(36–52px)	700 italic	1.06	-0.02em	Itinerary / ridge H2
stat-number	clamp(64–96px)	900	0.95	-0.02em	Bodoni stat numerals
body	16px	400	1.6	0	Default body, hero sub
body-sm	14px	400	1.75	0	Dispatch text, footer links
quote	clamp(20–34px)	400 italic	1.4	0	Proof blockquote, footer CTA copy
eyebrow	11px	500 italic	1.5	0.18em / uppercase	Section eyebrows
coord	11px	400 italic	1.5	0.16em	Hero / footer coordinates, stat labels
mono-cta	11px	500	1.5	0.14em / uppercase	CTA button labels

Headlines also use extreme transient tracking during entry — 0.28em (hero), 0.35em (ridge) — winding tight to the settled values above. The bottom hero coordinate strip scales to clamp(22px, 3vw, 38px) italic mono.

Layout

Base spacing unit is 4px; the horizontal page gutter is a fluid 4vw, with content capped at max-width: 1440px. Vertical section padding is 100px desktop / 72px mobile. The page composition: a fixed glass nav; a full-viewport hero (100vh, min 600px) with a looping background video, two-band overlay, bottom- left stacked headline/sub/CTA and a bottom coordinate strip that intentionally bleeds off-right; an itinerary section with a bento grid (2fr 1fr 1fr × two 320px rows, large tile spanning both rows, 12px gap); the dark proof section with a 3-column stat row over a bordered quote; a scroll-pinned ridge section (.ridge-pin-wrap at 200vh, .ridge sticky) split 55% / 45% between a topo SVG column and a dispatch text column; and a 3-column footer (1.8fr 1.6fr 1.3fr) over a justified bottom bar. Whitespace is generous and editorial, with asymmetric grids and a deliberate off-canvas bleed.

Elevation & Depth

The system is near-flat and prefers borders to shadows. The only true elevation is the scrolled nav: a translucent rgba(240,238,232,0.6) fill with backdrop-filter: blur(20px) saturate(1.4), a 0 1px 0 rgba(27,37,53,0.06) hairline shadow, and a white bottom border. Depth elsewhere is communicated by: the dark proof band against parchment, gradient overlays on hero and bento tiles, 1px hairline dividers, the 1px --accent-2 image frame, and the 2px --accent-1 footer top border. No drop shadows or glows are used on cards or buttons.

Shapes

Uniformly sharp. There is no border-radius anywhere in the stylesheet — buttons, tiles, the image frame, the footer CTA box and the nav are all hard-cornered rectangles. The geometric language is rectilinear and architectural; the only curves in the design are organic and illustrative — the elliptical topographic contour lines and the quadratic-bézier route path in the ridge SVG.

Components

• Nav CTA ("Begin →") — --accent-1 fill, white text, mono-cta type, no radius, 8px 20px padding; hover darkens to #266b4d.
• Hero CTA ("Begin Your Expedition →") — --accent-1 fill, white, mono-cta, 14px 28px padding, lifts translateY(-1px) on hover, 2px teal focus ring.
• Bento tile — teal placeholder bg, full-bleed cover image, bottom slate gradient overlay; top-right mono label chip on rgba(27,37,53,0.65) glass, bottom-left Crimson Pro italic name + mono region; image scales 1.04 on hover.
• Stat block — Bodoni 900 numeral (teal / green / parchment variants) over a mono italic label; 1px rgba(91,159,176,0.35) left divider between columns.
• Ridge image frame — 8px padding inside a 1px solid --accent-2 border, 280px wide, 2:3 image.
• Footer CTA box — 1px solid --accent-1 border, 36px 28px padding, Lora italic copy over an accent-1 mono button.
• Nav (scrolled) — glass blur fill, white hairline bottom border; logo and links flip from light to --text-primary once scrolled.

Motion

A custom expo ease cubic-bezier(0.16,1,0.3,1) (--ease-expo) governs nearly everything. Hallmark moves: the headline letter-spacing wind-up (hero 0.28em→-0.03em over 900ms; ridge 0.35em→-0.02em over 1000ms paired with a fade-in); the nav shrink (background/padding/shadow over 400ms once scrolled past 80px); hero parallax (video opacity 1→~0.45 and scale 1→1.055 driven by a single rAF scroll loop); the bento hover-expand (:has()-driven — hovered tile scales 1.04 while siblings drop to 0.55 opacity / 0.98 scale) plus an 80ms staggered entry; the topographic SVG draw, where six stroke paths reveal via stroke-dashoffset mapped to scroll progress across a pinned 200vh wrapper, with the summit dot and altitude label fading in as the route completes; and the count-up stat numerals (easeOutQuad to target over 1200ms, 200ms stagger). Entry animations are disabled on mobile (!important resets) and the section is unpinned below 769px.

Iconography

There is no icon font. The sole iconography is the inline ridge SVG: a 600×400 topographic composition of five concentric ellipse contour lines stroked in teal #5B9FB0 (1.5px, graduated opacity 0.35→0.7) and one green #2E7D5A route path (2.5px, round caps) tracing base-to-summit, capped by a small green summit circle and a JetBrains Mono altitude text label. Directional cues elsewhere are plain "→" glyphs inside CTA labels and an em-dash "—" bullet on dispatch items.

Do's and Don'ts

• Do keep every corner sharp — border-radius: 0 is the rule across the system.
• Do reserve Bodoni Moda for stat numerals only and Crimson Pro italic for headlines and the logo.
• Do route all coordinates, eyebrows, labels and CTA text through italic JetBrains Mono with wide uppercase tracking.
• Do use the two accents by role: pine green for action/route, glacial teal for cartographic detail and focus rings.
• Don't add drop shadows or glows; use hairlines, borders and gradient overlays for depth, and reserve blur for the nav only.
• Don't introduce a third brand color or warm accent — the warmth lives in the parchment surface, the cool accents stay cool.
• Don't straighten the headlines' entry tracking or remove the expo ease; the wind-up is the signature.

Known Gaps

• The hero background video and all imagery are remote CDN assets; described by role, not pixel-inspected.
• Hover-darken CTA uses two near-identical greens in the source (#266b4d and #26704f); captured #266b4d as accent-1-hover and noted the variant.
• --surface-alt: #E4E1D8 is declared in :root but not visibly applied in the markup; listed for completeness.
• SVG contour path lengths are computed at runtime (Ramanujan ellipse approximation) to drive the draw; the draw timing is scroll-progress-relative, not a fixed duration.
• The /* REDUCED MOTION */ comment block at the end of the stylesheet has no rules under it; no prefers-reduced-motion overrides are actually implemented.