name: greenaudit-design
version: alpha
description: >
  A Tufte-inflected household energy audit rendered as a printed almanac. The page sits
  on warm parchment (`#ECE6D4`) under an "electric" hero gradient of amber filament glow,
  a copper engineering grid, and a red 60 Hz AC sine wave. Everything is set in EB Garamond
  with all-small-caps section labels and tabular-lining numerals; ink is near-black
  `#131110`. The chart vocabulary is hairline sparklines and small multiples drawn in three
  signal colors — red `#B02824` (peaks/heat), blue `#2A5A80` (cooling/troughs), green
  `#3A7A3A` (savings). No cards, no shadows, no rounded corners: structure comes entirely
  from 2px masthead rules, hairline section dividers, and a semicircular SVG thermostat gauge.
colors:
  # Surface
  parchment: '#ECE6D4'        # body background, base of hero gradient
  paper-total: '#E4DCC6'      # table total-row fill
  paper-hover: '#E8E3D6'      # row hover sweep target
  # Hero gradient stops
  amber-glow: '#E8AF48'       # rgba filament radial glow (top)
  amber-deep: '#D49438'       # secondary radial glow
  hero-top: '#E8C885'         # linear gradient start
  hero-mid: '#EAD9B6'         # linear gradient mid
  # Ink / Text
  ink: '#131110'              # near-black ink: heading, body, hairlines, rules, ticks
  copper-grid: 'rgba(120,80,30,0.08)'  # engineering grid lines in hero
  # Signal (data ink)
  signal-red: '#B02824'       # peaks, heating line, target caret, citations
  signal-blue: '#2A5A80'      # cooling line, troughs, testing-note rule
  signal-green: '#3A7A3A'     # dollars saved / recoverable
typography:
  masthead:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 60px
    fontWeight: 500
    letterSpacing: -0.01em
  section-head:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 36px
    fontWeight: 400
    lineHeight: 1.1
  lead:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 19px
    fontWeight: 400
    lineHeight: 1.65
  body:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.65
  smallcaps:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    letterSpacing: 0.08em
    textTransform: uppercase
  marginalia:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.45
  stat:
    fontFamily: "'EB Garamond', 'ETBembo', Georgia, serif"
    fontSize: 36px
    fontWeight: 400
rounded:                       # almost everything is sharp / square
  none: 0px
  full: 9999px                 # only the small status dots
spacing:                       # base unit 4px; Tailwind scale
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
components:
  masthead:
    textColor: '{colors.ink}'
    typography: '{typography.masthead}'
    border: '2px solid {colors.ink}'   # border-b-2
    padding: '40px 40px 24px'
  section-divider:
    border: '1px solid {colors.ink}'   # border-t between sections
  small-multiple:
    backgroundColor: 'transparent'
    typography: '{typography.smallcaps}'
    rounded: '{rounded.none}'
    # SVG polyline, stroke-width 1.1, baseline stroke #131110 @ 0.3
  rec-table:
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    headerBorder: '2px solid {colors.ink} top, 1px bottom'
    rowBorder: '1px solid rgba(19,17,16,0.15)'
    totalRow: '{colors.paper-total}'   # top border 2px ink
  total-row:
    backgroundColor: '{colors.paper-total}'
    textColor: '{colors.ink}'
  callout:
    border: '2px solid {colors.signal-blue}'  # left rule only, border-l-2
    typography: '{typography.body}'
    padding: '4px 0 4px 16px'
  thermostat-gauge:
    textColor: '{colors.ink}'
    accent: '{colors.signal-red}'      # target caret + status dot
    # semicircular SVG arc, stroke 0.75; central numeral font-size 78
  text-button:
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    decoration: 'underline, offset 4, decoration rgba(19,17,16,0.4)'
    rounded: '{rounded.none}'
  status-dot:
    backgroundColor: '{colors.signal-red}'
    rounded: '{rounded.full}'
    size: '8px'
motion:
  sparkline-draw: 'stroke-dashoffset len→0, 1400ms, anime ease inOut(3)'
  counter-tween: 'stat counters 0→target, 1200ms, anime ease out(3), tabular round'
  multiples-stagger: 'small multiples fade+rise y 12→0, 700ms, 80ms stagger, on inView'
  row-hover: 'table row backgroundColor → #E8E3D6, 250ms in / 300ms out (motion lib)'
  thermostat-set: 'numeral tween 600ms out(3); caret translates along arc 500ms out(3)'
icons:
  library: inline SVG only
  style: hairline data graphics (sparklines, small multiples, gauge) — no icon set
  stroke: 0.3–1.2px
  sizes: { spark: 140x22, multiple: 200x70, biggraph: 760x140, gauge: 360x220 }
  color: '{colors.ink}'

The Household Energy Review

greenaudit-design · alpha

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

Overview

GreenAudit is a household electricity audit dressed as a printed annual, explicitly "in the manner of Edward Tufte — small multiples, sourced numbers, no chart junk." The page is one continuous broadsheet on warm parchment #ECE6D4, set entirely in EB Garamond serif with all-small-caps .smallcaps section labels (tracking 0.08em) and font-variant-numeric: tabular-nums everywhere. The single dramatic gesture is the hero's .electric-bg: an amber filament glow (rgba(232,175,72,0.50)), a faint copper engineering grid (48px), and a red 60 Hz AC sine wave drawn as an inline SVG data-URI over a dashed zero-volt baseline. Below the hero the signature move repeats — hairline SVG sparklines and a five-panel "small multiples" grid on a common 0–800 scale — coded in three signal colors: red #B02824 for peaks/heating, blue #2A5A80 for cooling/troughs, green #3A7A3A for dollars saved. Ink is near-black #131110; structure is pure typography and rules (2px masthead borders, hairline section dividers, a left-rule callout) with zero cards, zero shadows, and zero rounded corners except the 8px status dots. It closes on a semicircular SVG thermostat gauge with a 78px numeral and two italic text buttons — "a control, not a dashboard."

Colors

Surface. The body is parchment #ECE6D4. The hero replaces it with a layered gradient: two amber radial glows (rgba(232,175,72,0.50) and rgba(212,148,56,0.32)) over a vertical ramp from #E8C885 through #EAD9B6 down to the parchment base. The recommendations total row fills #E4DCC6; table rows sweep to #E8E3D6 on hover.

Ink / Hairlines. A single near-black #131110 does almost all the work: headings, body copy, the masthead's 2px borders, section dividers, sparkline strokes, SVG ticks, axis baselines (drawn at low stroke-widths 0.3–0.75 and opacities). The hero's engineering grid is copper rgba(120,80,30,0.08) / 0.06.

Signal (data ink). Three saturated colors carry meaning and nothing else. Red #B02824 marks peaks, the heating sparkline, the thermostat target caret, citation superscripts, and the heating/cost figures. Blue #2A5A80 marks the cooling line and seasonal troughs, plus the "note on testing" left rule. Green #3A7A3A is reserved for money saved — every "$ / yr saved" cell and the recoverable headline stat.

Typography

One family throughout: EB Garamond (loaded from Google Fonts), falling back to ETBembo (Tufte's bembo), Georgia, then generic serif. It is used at every level — there is no second sans or mono face; numeric "monospacing" comes from font-variant-numeric: tabular-nums applied globally and via .tnum. The voice is editorial: italics for sub-heads and notes, all-small-caps for labels, a .drop first-letter cap on the lead paragraph.

Token	Size	Weight	Line-height	Tracking	Usage
masthead	60px	500	—	-0.01em	"The Household Energy Review" title
section-head	36px / 30px	400	1.1 (tight)	—	italic section headlines (text-4xl/text-3xl)
lead	19px	400	1.65	—	opening narrative paragraphs, drop-cap
body	16px	400	1.65	—	thermostat copy, general prose
stat	36px	400	—	—	the three big tnum stat figures
smallcaps	11px	400	—	0.08em (uc)	section labels, table heads, kickers
marginalia	11px	400	1.45	—	left aside notes, sources (italic, opacity 0.7)

Layout

Base unit 4px (Tailwind scale). Every section is a max-w-6xl (72rem) centered column with px-10 gutters, separated by border-t hairlines. The composition follows the table of contents printed in the masthead: I. a two-column narrative (grid-cols-[180px_1fr] — marginalia rail + article) with a full-width annual sparkline and three inline stats; II. a five-column small-multiples grid (grid-cols-5); III. a recommendations table beside a 220px marginalia rail (grid-cols-[1fr_220px]); IV. a two-up thermostat panel (grid-cols-[1fr_1fr]) with copy left and the SVG gauge right; V. a two-column numbered sources footer. Whitespace is generous and print-like; the marginalia rails are the signature structural move.

Elevation & Depth

Flat by doctrine — no box-shadow anywhere. Depth is implied only in the hero by the layered gradient, the masked engineering grid (mask-image fading the grid out below 36%), and the overlaid sine wave. Hierarchy elsewhere is built from rule weight: 2px borders bracket the masthead and the table header/total; 1px hairlines divide sections; 0.15-opacity ink rules separate table rows; dotted underlines and a blue left-rule mark emphasis.

Shapes

Sharp. There are no rounded-* utilities on any container, button, table, or chart — the default radius is 0. The only curvature is rounded-full on the two 8px status dots (the red "heating" indicator and the gauge legend swatch) and the inherent arcs of the SVG sparklines and the semicircular thermostat gauge.

Components

• Masthead — full-width header, border-b-2 border-[#131110]; small-caps volume/date line, centered 60px serif title (weight 500), italic standfirst, and a small-caps five-part table of contents row.
• Marginalia rail — narrow aside (180px / 220px), .marginalia italic at 11px, opacity 0.7; small-caps not-italic mini-labels (Utility / Method / Comparable / etc.).
• Annual sparkline — full-width SVG (viewBox 0 0 760 140) bracketed top and bottom by border-y border-[#131110]; ink polyline, red peak dot + blue trough dot, dashed median reference line, single-letter month ticks.
• Small multiple — one of five panels; small-caps label, 28px tnum value, italic percent caption, and a 200×70 SVG sparkline (stroke-width 1.1, baseline #131110 @0.3), colored per end-use (red heating, blue cooling, ink the rest).
• Recommendations table — full-width; header row border-t-2 border-b border-[#131110], small-caps column heads; body rows border-b border-[#131110]/15, tnum numerals, green $ / yr saved column; final .totalrow with 2px top border on #E4DCC6. Rows hover-sweep to #E8E3D6.
• Callout — "A note on testing": border-l-2 border-[#2A5A80] with pl-4, 13px italic.
• Thermostat gauge — 360×220 SVG semicircular arc (stroke 0.75), 5° tick marks 55–80°, red target caret at 68°, ink "now" dot, a 78px serif central numeral, a red status dot + small-caps "heating · stage 1 of 2" line, three border-top stat cells, and two italic underlined text buttons.
• Text buttons — "decrease" / "increase": italic, underline underline-offset-4, decoration rgba(19,17,16,0.4) darkening to full ink on hover; no fill, no border, no radius.
• Sources footer — border-t-2; two-column ordered list (grid-cols-2) of 12 numbered references in 12px .marginalia not-italic, plus a build-stamp footer line.

Motion

Three libraries are imported as ES modules: anime.js v4 and Motion v12. On load, every sparkline (.sparkline, #bigsparkLine, #multiples polyline) draws itself in by tweening stroke-dashoffset from its full length to 0 over 1400ms with anime ease inOut(3) (the final state is forced visible). The three hero stats count up 0→target over 1200ms (out(3), rounded with tabular formatting). The five small multiples fade and rise (y 12→0, 700ms, 80ms stagger) when scrolled into view via Motion's inView (with a fallback that sets them visible regardless). Table rows animate backgroundColor to #E8E3D6 on hover (250ms in / 300ms out). The thermostat numeral tweens over 600ms and the target caret translates along the arc over 500ms on increase/decrease.

Iconography

No icon library. All graphics are bespoke inline SVG: hairline sparklines (140×22), the five small-multiple charts (200×70), the annual graph (760×140), and the semicircular gauge (360×220). Strokes run 0.3–1.2px; everything is ink #131110 except data-coded reds and blues. The 60 Hz AC sine wave in the hero is itself an inline SVG encoded as a data: URI background. Decoration and UI are one and the same — the charts are the interface.

Do's and Don'ts

• Do keep one serif (EB Garamond) at every level and tabular-nums on all figures.
• Do restrict color to the three signals — red peaks, blue troughs, green savings — and let #131110 ink carry everything else.
• Do build structure from rules (2px / 1px / 0.15-opacity hairlines) and marginalia, not cards.
• Do draw data as hairline sparklines / small multiples on a shared scale; footnote every number.
• Don't add box-shadows, rounded corners (beyond the 8px dots), or filled buttons.
• Don't introduce a sans-serif, a second accent, or chart junk (gridlines, 3D, gradients inside charts).
• Don't let the electric hero gradient bleed into the body sections — it belongs only at the top.

Known Gaps

• The hero .electric-bg gradients are described from their CSS stops; the precise visual blend of the amber radials + copper grid + sine wave is an inferred composite.
• section-head covers two sizes (text-4xl ≈ 36px and text-3xl ≈ 30px) under one token; Tailwind's exact rem values are approximated to px.
• spacing is the standard Tailwind scale inferred from the utilities used (px-10, gap-6, mt-8, etc.); no custom spacing tokens are defined in the HTML.
• Row-hover "out" target is rgba(244,241,233,0) (transparent) in the JS, slightly off the parchment base; treated as transparent reset.