name: cumulus-design
version: alpha
description: >
  A cinematic, editorial dark-mode landing page for a fictional wilderness-
  expedition brand ("Horizon"). The surface is a near-black forest green
  (`#0D1B14`) carrying warm parchment text (`#EDE5D3`), lit by a single amber
  voltage (`#DE7B25`) with a quieter pine accent (`#3E8A70`). The type story is
  high-contrast: a 900-weight Bodoni Moda display for staircased headlines and a
  giant scroll-velocity marquee, an Italiana serif for elegant section heads and
  the wordmark, Inter Tight for body/UI, and italic JetBrains Mono for eyebrows
  and labels. Signature moves: a split-stacked staircase hero over looping video,
  a velocity marquee of destination names, a scroll-driven dark-to-parchment
  theme inversion, and sticky-stacked full-bleed dispatch panels. Geometry is
  sharp — zero border-radius throughout, defined by hairlines and amber rules
  rather than shadows.
colors:
  # Surface
  bg-primary: '#0D1B14'      # page surface — near-black forest green; body, nav scrolled, footer, sections
  bg-secondary: '#192E22'    # darker pine panel (token defined; sparing use)
  # Text
  text-primary: '#EDE5D3'    # parchment — headlines, wordmark, primary copy
  text-muted: '#7A9A84'      # sage muted — body copy in dest section, stat labels, attribution
  surface-light: '#EDE5D3'   # parchment as a light surface (theme-inversion target bg)
  text-dark: '#0D1B14'       # forest green as text on light surface (inverted state, CTA labels)
  # Brand / Accent
  accent-1: '#DE7B25'        # amber voltage — primary CTA, rules, eyebrows, marquee separators, stat numbers, quotemark
  accent-1-hover: '#c06818'  # darker amber — CTA hover
  accent-2: '#3E8A70'        # pine accent — dispatch panel fallback fill before image loads
  # Hairlines (parchment + amber, low alpha)
  hairline-parchment: 'rgba(237,229,211,0.07)'  # section borders, marquee divider
  hairline-amber: 'rgba(222,123,37,0.25)'       # dest divider, proof column rule, stat rows
  nav-cta-border: 'rgba(237,229,211,0.28)'      # nav "Begin" outline button
  # Glass
  nav-scrolled-bg: 'rgba(13,27,20,0.92)'        # nav fill on scroll, blur(12px)
typography:
  display:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(40px, 5vw, 66px)
    fontWeight: 900
    lineHeight: 1.05
    letterSpacing: -0.02em
  marquee:
    fontFamily: "'Bodoni Moda', serif"
    fontSize: clamp(90px, 12vw, 160px)
    fontWeight: 900
    lineHeight: 1
    letterSpacing: -0.025em
  serif-head:
    fontFamily: "'Italiana', serif"
    fontSize: clamp(32px, 2.8vw, 42px)
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0.04em
  body:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 15px
    fontWeight: 300
    lineHeight: 1.85
  ui-label:
    fontFamily: "'Inter Tight', sans-serif"
    fontSize: 11px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0.12em
    textTransform: uppercase
  mono-eyebrow:
    fontFamily: "'JetBrains Mono', monospace"
    fontSize: 10px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.18em
    textTransform: uppercase
rounded:                      # zero-radius system — everything is sharp
  none: 0px
spacing:                      # base unit 4px; horizontal gutter is 8vw
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 80px
components:
  nav-cta:
    backgroundColor: 'transparent'
    textColor: '{colors.text-primary}'
    border: '1px solid {colors.nav-cta-border}'
    typography: '{typography.ui-label}'
    rounded: '{rounded.none}'
    padding: '10px 22px'
    # label: "Begin" — hover: border accent-1, bg rgba(222,123,37,0.12)
  hero-cta:
    backgroundColor: '{colors.accent-1}'
    textColor: '{colors.bg-primary}'
    typography: '{typography.ui-label}'
    rounded: '{rounded.none}'
    padding: '15px 36px'
    # label: "Begin Your Expedition →" — hover bg accent-1-hover
  text-link:
    textColor: '{colors.accent-1}'
    border: '1px solid {colors.accent-1}'   # bottom border only
    typography: '{typography.ui-label}'
    padding: '0 0 3px 0'
    # label: "View all expeditions →" — hover opacity 0.6
  stat-row:
    textColor: '{colors.accent-1}'
    border: '1px solid {colors.hairline-amber}'  # top/bottom rules
    typography: '{typography.display}'           # number; label uses body
    padding: '22px 0'
  footer-cta-box:
    backgroundColor: 'transparent'
    border: '1px solid {colors.accent-1}'
    textColor: '{colors.text-primary}'
    typography: '{typography.serif-head}'
    rounded: '{rounded.none}'
    padding: '40px 32px'
  dispatch-panel:
    backgroundColor: '{colors.accent-2}'   # fallback before image
    textColor: '{colors.text-primary}'
    rounded: '{rounded.none}'
    # full-bleed bg image + bottom-up dark gradient overlay
motion:
  hero-staircase: 'words rise + un-skew (translateY 40px / skewY 7deg → 0), 700ms cubic-bezier(.2,.8,.2,1), stagger 80ms per word via --i'
  cinema-rule: 'amber rule scaleX(0)→1 from left, 600ms cubic-bezier(0.16,1,0.3,1)'
  blur-in-head: 'opacity + blur(10px)→0, 800ms cubic-bezier(0.16,1,0.3,1) on dest head; blur(16px)→0 on panel headlines'
  clip-reveal: 'text clip-path inset(0 100% 0 0)→0, 900ms cubic-bezier(0.16,1,0.3,1), staggered lines'
  marquee: 'JS rAF translateX loop, 48s per full cycle, seamless duplicate'
  theme-inversion: 'scroll-driven lerp of bg/text/muted from forest-green to parchment between progress 0.25–0.65 (260vh sticky)'
  sticky-panels: 'three full-bleed panels stack via position:sticky; outgoing panel scales 1→0.96 (300vh)'
  hero-video: 'scroll-linked opacity 1→0.85 and scale 1→1.04 over first 0.6vh'
  chevron-bounce: 'scroll cue chevron translateY 0→6px, 2.2s ease-in-out infinite'
  nav-scroll: 'at scrollY>80, nav gains blur(12px) glass bg, padding 26px→16px, 400ms ease'
icons:
  library: inline glyphs / typographic
  style: 'no icon library — uses text glyphs (› chevron, × marquee separator, → in CTAs, “ quotemark)'
  color: '{colors.accent-1}'

Cumulus

cumulus-design · alpha

Design spec — version alpha. Source: static HTML (index.html); tokens read from inline styles + :root custom properties and class rules. Fictional/ sample product (the "Horizon" expedition brand); described factually.

Overview

Cumulus is a cinematic, scroll-driven editorial landing page rendered almost entirely in a single near-black forest green (#0D1B14). Warm parchment text (#EDE5D3) and a quieter sage muted (#7A9A84) carry the copy, while one amber voltage (#DE7B25) does all the pointing — CTAs, hairline rules, eyebrows, the marquee × separators, the oversized stat numbers, and the opening quotemark. A second pine accent (#3E8A70) only surfaces as the fallback fill behind dispatch images. The type story is deliberately high-contrast: a 900-weight Bodoni Moda serif drives the staircased hero headline and a viewport-spanning velocity marquee of destination names; an Italiana serif handles the elegant section heads, blockquote, and the ghosted HORIZON wordmark; Inter Tight (light/300 and medium/500) carries body and UI; and an italic JetBrains Mono stamps every eyebrow and label. Geometry is uncompromisingly sharp — every corner is 0px — and depth comes from hairlines (parchment at 7% alpha, amber at 25–35%) plus a single amber border, never shadows. The signature moves are theatrical: a split-stacked staircase hero over looping background video, a scroll-driven theme inversion that lerps the whole proof section from forest green to parchment, and three sticky-stacked full-bleed dispatch panels.

Colors

Surface. The entire page sits on --bg-primary: #0D1B14, a near-black forest green used for body, the scrolled nav, every section, and the footer. A darker pine --bg-secondary: #192E22 is defined but used sparingly. Two dispatch panels add bespoke radial-gradient tints (#2A5C3A/#3A2A0E fading into the base).

Text. --text-primary: #EDE5D3 (parchment) is the headline and primary copy color; --text-muted: #7A9A84 (sage) covers secondary body and stat labels. Many copy elements use parchment at reduced alpha — rgba(237,229,211,0.72), 0.6, 0.52, 0.48, down to 0.16 for the ghost wordmark.

Brand / Accent. --accent-1: #DE7B25 is the single amber voltage: hero/footer CTA fills, the 80px cinema rule, all eyebrows and the proof quotemark, marquee separators, stat numbers, and link underlines. Its hover is a darker #c06818. --accent-2: #3E8A70 (pine) is only the panel fallback color before imagery loads.

Hairlines. Two families: parchment at very low alpha rgba(237,229,211,0.07) for section/marquee borders, and amber rgba(222,123,37,0.25–0.35) for the dest divider, proof column rule, and stat rows. The nav outline button uses rgba(237,229,211,0.28).

Inversion / Glass. The proof section animates a target light surface (surface-light #EDE5D3) with inverted text-dark #0D1B14 text. The scrolled nav fills with rgba(13,27,20,0.92) under a blur(12px).

Typography

Four Google Fonts loaded via one <link>: Bodoni Moda (opsz 6..96, weight 900), Italiana (400), Inter Tight (300/400/500 + italic 300), and JetBrains Mono (italic). Bodoni Moda is the high-drama display face; Italiana is the refined serif; Inter Tight is the workhorse; italic JetBrains Mono is the technical label voice.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(40px,5vw,66px)	900	1.05	-0.02em	hero staircase words, panel headlines, stat numbers
marquee	clamp(90px,12vw,160px)	900	1	-0.025em	scroll-velocity destination marquee
serif-head	clamp(32px,2.8vw,42px)	400	1.2	0.04em	dest head, proof quote, footer CTA head, wordmark
body	15px	300	1.85	0	dest/panel body, footer tagline
ui-label	11px	500	1.2	0.12em (CTA 0.16em)	nav links, CTAs, footer col links
mono-eyebrow	10px (9–11px)	400 italic	1.4	0.18–0.22em	eyebrows, scroll cue, attribution, counters, copyright

Layout

Base spacing unit is 4px; the dominant horizontal gutter is 8vw (6vw on mobile). The page is a full-bleed, single-column scroll narrative: a 100vh hero (min 600px) with looping video → a destinations section (full-width marquee strip

• a 5fr 7fr copy grid with an amber-ruled right column) → a 260vh proof wrapper whose inner sticks for one viewport in a 55fr 45fr grid (quote left, amber-ruled stat list right, vertical section label) → a 300vh dispatches wrapper of three sticky full-bleed panels → a footer on a 2fr 1fr 1fr 2fr grid. There is no central max-width container; content runs to the 8vw gutters. Whitespace is generous and cinematic — large vertical padding (80–108px) and oversized type carry the rhythm.

Elevation & Depth

There are essentially no drop shadows. Depth is built from: (1) hairlines — parchment at 7% alpha and amber at 25–35% — separating sections and rows; (2) a single amber 1px border on the footer top edge and footer-CTA box; (3) the scrolled nav's glass (rgba(13,27,20,0.92) + backdrop-filter: blur(12px)); (4) full-bleed gradient overlays on the hero (light two-band wash) and dispatch panels (bottom-up forest-green-to-transparent); and (5) z-index stacking of the sticky panels. The mood is flat, editorial, and matte.

Shapes

Radically sharp. Every element has border-radius: 0 — no rounded-* anywhere. Buttons are crisp rectangles, the footer CTA is a plain bordered box, images and panels are hard-edged. The only "soft" gestures are typographic (skew, blur-in) and the rounded animation curves, not geometry.

Components

• nav-cta ("Begin") — transparent fill, 1px solid rgba(237,229,211,0.28) border, uppercase 11px Inter Tight 500, 10px 22px, 0 radius; hover sets amber border + rgba(222,123,37,0.12) fill.
• hero-cta ("Begin Your Expedition →") — solid #DE7B25 fill, #0D1B14 text, uppercase 12px/0.16em, 15px 36px, 0 radius; hover #c06818.
• text-link ("View all expeditions →") — amber text with a 1px amber bottom border, uppercase 11px; hover opacity 0.6.
• stat-row — baseline flex row, amber 1px top/bottom hairlines, 22px 0; 900 Bodoni number in amber + sage Inter Tight label (e.g. "14 / Countries across five continents", "2,300+", "98%", "2012").
• footer-cta-box ("Begin an expedition.") — 1px solid #DE7B25 border, 40px 32px, Italiana head + light body + solid amber button.
• dispatch-panel — full-bleed bg image over #3E8A70 fallback, bottom-up forest-green gradient overlay, eyebrow + Bodoni headline + excerpt, with a mono 01 / 03 counter.

Motion

Heavily choreographed, all CSS transitions + one rAF scroll loop and one rAF marquee loop. Hero entrance: an amber rule scales in from the left (600ms), six headline words rise and un-skew (translateY(40px) skewY(7deg) → 0, 700ms cubic-bezier(.2,.8,.2,1), 80ms stagger via --i), then subhead, CTA, and scroll cue fade up on delays. Section heads and panel headlines blur-in (blur 10–16px → 0, 800–900ms). Quote and excerpt lines use a left-to-right clip-path inset reveal (900ms, staggered). The marquee scrolls via JS translateX at 48s per cycle. On scroll, the proof section lerps its entire palette from forest green to parchment between progress 0.25–0.65, and the three dispatch panels stack via position: sticky with the outgoing panel scaling to 0.96. The chevron scroll-cue bounces (2.2s infinite). The hero video dims and scales slightly with scroll. Note: prefers-reduced-motion has a commented placeholder but no rules.

Iconography

No icon library is loaded. All "icons" are typographic glyphs in amber: a › chevron in the scroll cue, × separators between marquee destinations, → arrows appended to CTA labels, and a “ quotemark above the proof blockquote. Color is uniformly --accent-1 (#DE7B25).

Do's and Don'ts

• Do keep the surface a single near-black forest green and let amber be the only pointing color.
• Do keep every corner sharp (0 radius) and lean on hairlines, not shadows.
• Do pair Bodoni Moda 900 for drama, Italiana for elegance, Inter Tight for text, and italic JetBrains Mono for labels.
• Do preserve the scroll choreography — staircase, blur-in, clip reveals, theme inversion, sticky panels.
• Don't introduce rounded corners, drop shadows, or a second saturated accent beyond pine's fallback role.
• Don't put body copy in serif or headlines in Inter Tight — the contrast is the identity.
• Don't flatten the eyebrows to non-italic or non-mono; the italic mono is a signature.

Known Gaps

• The theme-inversion colors (forest-green ↔ parchment, sage muted) are interpolated in JS via lerpColor; the listed values are the dark/light endpoints, intermediate frames are computed.
• --bg-secondary: #192E22 is defined in :root but barely used in the visible markup; included for completeness.
• Dispatch panels 2 and 3 add bespoke radial-gradient tints (#2A5C3A, #3A2A0E, #1C3A2A, #2A1F0E) layered under images; treated as panel-local, not global tokens.
• --scroll-boost custom property is declared but unused.