name: climate-pulse-design
version: alpha
description: >
  A Tufte-grade climate monograph rendered as a long-form digital broadsheet. The
  surface is a deep ocean-night radial gradient (`#123247` → `#07111A`) read in
  ink-white EB Garamond serif. Two data voltages carry the whole story: a calm
  blue line (`#6FB0E6`) for historical trajectories and a warm-red dot (`#F0795E`)
  for the current-year anomaly. The signature moves are hand-drawn SVG sparklines
  (a self-drawing 143-year hero curve, a 4-column grid of 20 small multiples), a
  640px reading measure with a 200px marginalia column, small-caps IBM Plex Mono
  metadata, footnotes, and drop caps. No cards, no shadows — only hairline rules.
colors:
  # Brand / Data voltages
  warm-red: '#F0795E'        # current-year anomaly dots, drought/negative deltas, footnote markers
  calm-blue: '#6FB0E6'       # historical trajectory lines, sparkline strokes
  # Surface (radial gradient)
  surface-top: '#123247'     # top of fixed radial gradient (ocean blue)
  surface-mid: '#0B1B28'     # mid stop at 42%
  surface-bottom: '#07111A'  # outer stop (near-black navy)
  # Text
  ink: '#E9EEF2'             # primary body + heading text (.ink)
  baseline-grey: '#8A99A6'   # dashed climatological baseline lines in charts
  # Hairlines (derived from ink at low alpha)
  hairline: 'rgba(233,238,242,0.28)'      # section-leading rule
  hairline-thin: 'rgba(233,238,242,0.25)' # row dividers, masthead, section bottoms
  ghost-text: 'rgba(233,238,242,0.06)'    # giant decorative divider word
typography:
  display:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.05
    letterSpacing: -0.01em
  essay-head:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 40px
    fontWeight: 400
    lineHeight: 1.08
  body:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
  lede:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    fontStyle: italic
  section-head:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 20px
    fontWeight: 400
    fontStyle: italic
  meta:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.2em
    textTransform: smallcaps
  caption:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 10px
    fontWeight: 400
rounded:                      # essentially flat; only data dots are round
  none: 0px
  full: 9999px                # symbol swatches (w-2 h-2 rounded-full)
spacing:                      # base unit 4px (Tailwind scale)
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  '2xl': 40px
  '3xl': 80px                 # section pt-12 pb-20 rhythm
components:
  masthead:
    textColor: '{colors.ink}'
    typography: '{typography.meta}'
    border: '1px solid {colors.hairline-thin}'
    note: 'Vol/Issue · centered title · date; small-caps mono, flex space-between'
  hero-sparkline:
    stroke: '{colors.calm-blue}'
    marker: '{colors.warm-red}'
    note: 'Full-width SVG path stroke-width 1.4, self-draws over 2.5s; warm-red dot fades in at end'
  small-multiple:
    labelColor: '{colors.ink}'
    labelTypography: '{typography.caption}'
    line: '{colors.calm-blue}'
    marker: '{colors.warm-red}'
    baseline: '{colors.baseline-grey}'
    note: '4-col grid; mini sparkline + signed value in red/blue mono; gap-x-10 gap-y-7'
  essay-aside:
    textColor: '{colors.ink}'
    typography: '{typography.caption}'
    note: '200px marginalia column at pl-4 beside 640px body; holds mini SVG charts + figures'
  hairline-rule:
    border: '1px solid {colors.hairline}'
    note: 'border-top only; leads every section heading. No boxes, no shadows.'
  data-row:
    textColor: '{colors.ink}'
    typography: '{typography.meta}'
    border: '1px solid {colors.hairline-thin}'
    note: 'definition lists & download tables; grid columns, py-3/py-4, underlined links'
motion:
  hero-draw: 'strokeDashoffset len→0 over 2500ms, cubic-bezier(.4,.1,.2,1), fill forwards'
  hero-dot: 'opacity 0→1 + r 1→3.5 over 500ms after path finishes'
  reveal: 'opacity 0→1, translateY 18px→0; 700ms ease / cubic-bezier(.2,.7,.2,1) on IntersectionObserver'
  stagger: 'children translateY 10px→0, 600ms, transition-delay calc(var(--i) * 60ms)'
icons:
  library: inline SVG (no icon font)
  style: hand-drawn data marks — strokes, lines, dots
  sizes: { dot: 3.5px, swatch: 8px, legend-line: 22px }
  color: '{colors.calm-blue}'

Climate Pulse — The Anomaly Review

climate-pulse-design · alpha

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

Overview

Climate Pulse is a digital climate monograph dressed as a printed broadsheet — "The Anomaly Review, Vol. XII · Issue 04." It is unapologetically Tufte: the data is the design. The page floats on a fixed radial gradient that reads like ocean at night, radial-gradient(125% 100% at 50% 0%, #123247 0%, #0B1B28 42%, #07111A 100%), with all type set in ink-white #E9EEF2 EB Garamond serif. Exactly two data voltages do the storytelling: a calm blue line #6FB0E6 for historical trajectories and a warm red dot #F0795E for the current-year anomaly and negative/drought deltas. Numerals and metadata switch to IBM Plex Mono in tabular figures and small caps with wide 0.2em tracking. The signature moves are all hand-drawn SVG: a full-width hero sparkline that self-draws across 143 years of warming, a 4-column grid of twenty regional small multiples generated in JS, and per-paragraph marginalia charts sitting in a 200px column beside a 640px reading measure. There are no cards, no shadows, no rounded boxes — structure is carried entirely by hairline rules at ~25–28% ink opacity, plus drop caps, superscript footnote markers, and a giant ghosted divider word at 6% opacity.

Colors

Data voltages (brand). Only two colors carry meaning. warm-red #F0795E marks the current-year anomaly dot at the end of every sparkline, drought / negative-delta values, the ● legend mark, and superscript footnote numbers. calm-blue #6FB0E6 is the stroke of every historical line — hero path, essay asides, and small multiples.

Surface. A single fixed radial gradient (.tufte-cream, despite the name a deep ocean-night): surface-top #123247 at the apex, surface-mid #0B1B28 at 42%, fading to surface-bottom #07111A. background-attachment: fixed keeps it stationary while content scrolls.

Text. ink #E9EEF2 is the one text color, modulated only by Tailwind opacity-* utilities (50–80%) for hierarchy. baseline-grey #8A99A6 is used exclusively for the thin dashed climatological-baseline lines inside charts.

Hairlines. Borders are ink at low alpha: hairline rgba(233,238,242,0.28) leads each section heading; hairline-thin rgba(233,238,242,0.25) divides rows and the masthead. ghost-text rgba(233,238,242,0.06) is the 160px decorative divider word "precipitation, by region."

Typography

Two families, loaded via one Google Fonts @import: EB Garamond (italic + roman, 400/500/600) for everything editorial, with 'ETBembo', Georgia, serif fallbacks — explicitly "after the manner of ETBembo" per the colophon — and IBM Plex Mono (400/500) for all numerals, metadata, captions, and labels, with font-variant-numeric: tabular-nums so figures align in columns. Small caps come from font-variant: small-caps + 0.08em tracking; metadata adds 0.2em–0.25em letter-spacing. Drop caps are EB Garamond at 4.2rem, floated, line-height 0.85.

Token	Size	Weight	Line-height	Tracking	Usage
display	44px	400	1.05	tight	Hero headline
essay-head	40px	400	1.08	—	Lead essay title
body	18px	400	1.55	—	Essay paragraphs (drop-cap on first)
section-head	20px	400 italic	—	—	Section titles ("Twenty regions…")
lede	15px	400 italic	1.5	—	Standfirst / sub-deck
meta	11px	400	—	0.2em, small-caps	Masthead, kickers, units
caption	10px	400	—	—	Figure captions, plate notes

Layout

Base unit is 4px (Tailwind scale). Every section is a max-width: 1000px centered column with px-8 gutters and a pt-12 pb-20 vertical rhythm. The structural signature is the lead essay grid: grid-template-columns: 640px 1fr — a fixed 640px reading measure with body paragraphs (.reveal) on the left and a ~200px marginalia column (<aside class="pl-4">) carrying mini SVG charts, SST sparklines, and a grayscale plate. The dashboard is a grid-cols-4 of small multiples (gap-x-10 gap-y-7). Methodology and downloads use 2-/4-column data grids (22% 1fr, 1fr auto auto auto). The footer is a grid-cols-12 cartographer's legend in four col-span-3 columns (Symbols / Units / Methodology / Colophon). Whitespace is generous and print-like; sections are separated by hairlines, never by background blocks.

Elevation & Depth

There is no elevation. No box-shadow, no glass, no glow anywhere. Depth is purely typographic and tonal: the fixed radial gradient gives the page a subtle vignette, and every boundary is a 1px hairline rule at 25–28% ink opacity. The only "lift" is the giant 6%-opacity ghost divider word behind the page, and the grayscale-filtered archival photo (filter: grayscale(1) contrast(1.05)).

Shapes

Effectively flat and rectilinear — rounded.none (0px) governs everything: images, dividers, data rows, the photo plate. The only curves are intrinsic to the data marks: SVG line stroke-linecap/linejoin: round on the hero path, and the small rounded-full circular dots (anomaly markers, the 8px symbol swatch in the legend). The aesthetic is print broadsheet, not UI chrome.

Components

• Masthead — flex row: "Vol. XII · Issue 04" / centered "The Anomaly Review"
  • sub-line / "April MMXXIV"; 11px mono small-caps, hairline-thin top border.
• Hero sparkline — full-width viewBox 0 0 1000 220 SVG; calm-blue path at stroke-width 1.4, self-drawing; warm-red dot fades in at the terminus; mono endpoint labels (−0.16°C → +1.36°C, 1880 → 2023) and a "Fig. 1 —" caption.
• Small multiple — name label (10px mono small-caps) over a 40px-tall mini SVG (calm-blue line, dashed baseline, colored dot) + a signed value in red/blue mono; twenty of them in a 4-col grid, JS-generated with deterministic paths.
• Essay aside — 200px marginalia block (pl-4) holding a labelled mini chart, a metric (e.g. "3.1σ", "−18.4%"), or a grayscale photographic plate with caption.
• Hairline rule — border-top only; .hairline leads every <h2>. No boxes.
• Data row — definition-list / download-table rows: grid columns, py-3/py-4, hairline-thin dividers, underlined "download ↓" links, mono filenames + sizes.
• Footnote marker — <span class="footnote-num">: 0.7em superscript, warm-red, mono.

Motion

Three authored effects, all subtle. (1) Hero draw: the path's strokeDashoffset animates len → 0 over 2500ms cubic-bezier(.4,.1,.2,1), then the anomaly dot fades in (opacity 0→1, r 1→3.5) over 500ms. (2) Reveal: essay blocks start opacity:0; translateY(18px) and ease in over 700ms when they enter the viewport (IntersectionObserver, threshold 0.15). (3) Stagger: the small-multiples grid children rise 10px over 600ms with a var(--i) * 60ms cascade. GSAP + ScrollTrigger are loaded but the actual reveals run on a native IntersectionObserver and the Web Animations API.

Iconography

No icon font. All marks are inline SVG drawn as data: line strokes (calm-blue 1.2–1.4px, baseline grey 0.4px dashed), circular dots (warm-red, r 1.4–3.5), and the legend's tiny 22×6 line swatches and 8px rounded-full color chip. Directional affordances are typographic glyphs ("↓", "→", "●"). Color follows the data semantics: blue = trajectory, red = anomaly/drought, grey dashed = baseline.

Do's and Don'ts

• Do keep the two-voltage discipline: blue for history, red for the current anomaly — never introduce a third data color.
• Do set numerals and metadata in IBM Plex Mono tabular figures and small caps.
• Do carry structure with hairline rules and the 640px+200px measure.
• Do let the data marks be the only curves; everything else stays flat.
• Don't add cards, shadows, glows, or rounded panels — there are none.
• Don't color body text; modulate hierarchy with ink opacity only.
• Don't smooth or ornament the charts beyond what the caption declares.

Known Gaps

• The surface class is named .tufte-cream but is in fact a dark ocean-night radial gradient; the name is a misnomer in the source, documented as-is.
• letterSpacing: -0.01em on the display token is approximated from Tailwind's tracking-tight (the HTML uses the utility, not a literal value).
• textTransform: smallcaps is shorthand for the source's font-variant: small-caps (CSS font-variant, not text-transform).
• Small-multiple SVG paths are procedurally generated at runtime (seeded sine/ cosine), so individual curve geometry is non-deterministic in description.
• GSAP/ScrollTrigger are loaded but unused for the visible reveals (native IO + WAAPI drive them); the libraries are present without authored timelines.