name: marginalia-design
version: alpha
description: >
  Marginalia is a long-form science-writing layout dressed as a physicist's lab
  notebook. The surface is a warm paper ivory (#F4F4F1) printed with a faint 32px
  graph-paper grid; ink-navy (#1C2541) carries all type and hairline rules, a teal
  "voltage" (#3FBFB5) marks instruments, terms and data, and a vermilion accent
  (#FF5A36) handles annotations and folio marks. The type story pairs a heavy
  Fraunces display serif against a Source Sans 3 body and an IBM Plex Mono used
  pervasively for captions, callouts and metadata. Signature moves: a 12-column
  reading grid with sticky marginal notes and a rotated pinned "evidence" index
  card, an overlaid teal coordinate-grid SVG on the hero plate drawn in on scroll,
  dotted-underline glossary terms with mono tooltips, and a dark navy glossary
  appendix. Geometry is squared-off — 2px ruled borders, zero radius, one hard
  offset shadow.
colors:
  # Brand / Voltage
  teal: '#3FBFB5'        # primary voltage — instruments, terms on hover, data figures, drop cap, hero grid SVG, selection text-bg
  vermilion: '#FF5A36'   # secondary accent — annotations (NOTE/PLATE/Fig.), pin icon, folio marks, callout rules
  # Surface
  paper: '#F4F4F1'       # page surface (ivory), card fills, light type on dark sections
  black: '#000000'       # hero image backing plate behind figure
  # Text
  ink: '#1C2541'         # ink-navy — all headings, body copy, hairlines, dark glossary section bg
  ink-80: 'rgba(28,37,65,0.80)'  # body lede / kicker meta text
  ink-70: 'rgba(28,37,65,0.70)'  # captions, secondary mono meta
  ink-60: 'rgba(28,37,65,0.60)'  # byline / fine print
  paper-85: 'rgba(244,244,241,0.85)'  # glossary body copy on dark
  paper-55: 'rgba(244,244,241,0.55)'  # glossary footer meta on dark
  # Hairlines / Grid
  ink-30: 'rgba(28,37,65,0.30)'  # thin header/divider rules on paper
  ink-18: 'rgba(28,37,65,0.18)'  # index-card ruled lines, hard offset shadow tint
  ink-04: 'rgba(28,37,65,0.04)'  # paper graph-grid lines (32px repeat)
  paper-30: 'rgba(244,244,241,0.30)'  # divider on dark glossary header
  paper-20: 'rgba(244,244,241,0.20)'  # row dividers on dark glossary
  # Glow
  teal-glow: 'rgba(63,191,181,0.55)'  # text-shadow on hovered terms
typography:
  display:
    fontFamily: "'Fraunces', serif"
    fontSize: clamp(58px, 9vw, 120px)
    fontWeight: 900
    lineHeight: 0.92
    letterSpacing: -0.02em
  display-card:
    fontFamily: "'Fraunces', serif"
    fontSize: 24px
    fontWeight: 800
    lineHeight: 1.2
  dropcap:
    fontFamily: "'Fraunces', serif"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 0.7
  body:
    fontFamily: "'Source Sans 3', sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.75
  lede:
    fontFamily: "'Source Sans 3', sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.6
  mono:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 11px
    fontWeight: 400
    lineHeight: 1.5
  kicker:
    fontFamily: "'IBM Plex Mono', monospace"
    fontSize: 12px
    fontWeight: 400
    letterSpacing: 0.32em
    textTransform: uppercase
rounded:                  # squared-off system — no radius anywhere
  none: 0px
spacing:                  # 4px base unit; section rhythm in 8px multiples
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 40px
  xxl: 64px
  section: 96px           # py-24 section padding
components:
  masthead:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.display-card}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.ink} (top), 1px {colors.ink-30} (under-rule)'
    padding: 'py-3 / py-5, max-w-[1180px]'
  glossary-term:
    textColor: '{colors.ink}'
    typography: '{typography.body}'
    border: '1.5px dotted {colors.ink}; hover -> {colors.teal} + teal-glow text-shadow'
    rounded: '{rounded.none}'
  tooltip:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    padding: '10px 12px'
    border: '3px solid {colors.teal} (left)'
  evidence-card:
    backgroundColor: '{colors.paper}'
    textColor: '{colors.ink}'
    typography: '{typography.mono}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.ink}'
    padding: 'p-6 pt-9'
    transform: '-rotate-2'
    shadow: '6px 8px 0 {colors.ink-18}'
  figure:
    backgroundColor: '{colors.black}'
    rounded: '{rounded.none}'
    border: '2px solid {colors.ink}'
    caption: '{typography.mono} on {colors.paper}, vermilion label'
  callout-note:
    textColor: '{colors.ink-80}'
    typography: '{typography.mono}'
    border: '2px solid {colors.vermilion} (left)'
    rounded: '{rounded.none}'
    padding: 'pl-3'
  glossary-section:
    backgroundColor: '{colors.ink}'
    textColor: '{colors.paper}'
    typography: '{typography.body}'
    rounded: '{rounded.none}'
    dividers: '1px {colors.paper-20}'
motion:
  hero-grid-draw: 'GSAP DrawSVGPlugin — teal grid lines + crosshairs draw 0->100% on scroll-scrub (scrub:1), staggered 0.08/0.10s'
  body-reveal: 'paragraphs fade + rise y:24 opacity:0, dur 0.7s, stagger 0.08, power2.out @ top 80%'
  fig-reveal: 'figure rise y:40, dur 0.8s, power3.out @ top 85%'
  card-reveal: 'evidence card rise y:60 rotation:4, dur 0.9s, power3.out @ top 88%'
  callout-reveal: 'notes slide x:-30, dur 0.7s, stagger 0.15, power2.out'
  gloss-reveal: 'glossary rows rise y:30, dur 0.6s, stagger 0.1, power2.out @ top 82%'
  term-hover: 'CSS — color->teal, teal text-shadow glow, tooltip opacity 0->1'
icons:
  library: Tabler (tabler-icons-webfont)
  style: outline
  sizes: { sm: 11px, md: 20px, lg: 24px }
  color: '{colors.teal} (UI/instrument), {colors.vermilion} (pin)'
  usage: 'ti-clock-hour-4 (logo mark), ti-book-2 (glossary entries), ti-pin (evidence card)'

Marginalia

marginalia-design · alpha

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

Overview

Marginalia is a long-form science article rendered as a physicist's working lab notebook. The page surface is a warm ivory paper (#F4F4F1) overprinted with a faint navy graph-paper grid (two repeating-linear-gradient rules at 32px, rgba(28,37,65,0.04)), so every section feels printed on engineering paper. Ink-navy #1C2541 does the heavy lifting — all headings, all body copy, every 2px ruled border and hairline divider, and even an inverted dark "Index of Terms" appendix. The signal color is a clinical teal #3FBFB5 ("voltage"): it draws the instruments, the drop cap, the hero coordinate-grid SVG, glossary terms on hover, and the headline data figures. A vermilion #FF5A36 is the annotator's red pen — NOTE / PLATE / Fig. labels, the pushpin, the folio sign-off, the curved leader lines pointing from margin notes. The type story is a heavy Fraunces display serif (700–900) for the giant clamp(58px, 9vw, 120px) headline and card titles, a Source Sans 3 body at 18px/1.75, and IBM Plex Mono used pervasively for kickers, captions, callouts, the terminal-style evidence card, and all metadata. The signature moves: a 12-column reading grid with a sticky left margin of red-pen callout notes, a 6-column body column, and a rotated, pushpinned "evidence" index card with ruled lines and a hard offset shadow; an overlaid teal coordinate grid on the hero photo that draws itself in on scroll; and dotted-underline inline terms that reveal mono tooltips. Geometry is uniformly squared — zero radius, 2px borders, one single hard shadow.

Colors

Brand / Voltage. teal #3FBFB5 is the primary instrument color: the logo clock glyph, the article drop cap "E", the hero overlay SVG grid and crosshairs, glossary ti-book-2 icons and term names, the big 10⁻¹⁸ figures, the term hover state, and the text-selection background. vermilion #FF5A36 is the secondary annotation accent: the "Open Archive" masthead tag, PLATE / NOTE / Fig. / How-We-Know labels, the ti-pin pushpin, the curved leader paths and their end dots, callout left-rules, and the "End of entry" folio line.

Surface. paper #F4F4F1 is the page ivory, also the evidence-card fill, the figure caption strip, and the light type color on dark sections. black #000000 backs the hero photo plate beneath the border-2 frame.

Text. ink #1C2541 is the base ink for headings and body. Opacity ramps carry hierarchy on paper: ink-80 for the lede and kickers, ink-70 for captions and meta, ink-60 for the byline/fine print. On the dark glossary, paper-85 is body copy and paper-55 the footer meta.

Hairlines / Grid. Rules are ink at low alpha: ink-30 header under-rule and card sub-divider, ink-18 index-card ruled lines and the offset-shadow tint, ink-04 the 32px paper graph grid. On dark, paper-30 and paper-20 divide the glossary header and rows.

Glow. teal-glow rgba(63,191,181,0.55) is the text-shadow bloom on hovered glossary terms.

Typography

Three Google Fonts via one @import: Fraunces (opsz 9..144, weights 600–900) as the display serif, Source Sans 3 (400/600/700 + italic) as the body, and IBM Plex Mono (400/500/600) as the mono/metadata face. All three are open-source on Google Fonts, so no substitution is needed.

Token	Size	Weight	Line-height	Tracking	Usage
display	clamp(58→120px)	900	0.92	-0.02em	Hero headline
display-card	24px	800	1.2	—	Card / glossary titles
dropcap	64px	800	0.7	—	Floated article drop cap (teal)
body	18px	400	1.75	—	Article body copy
lede	22px	400	1.6	—	Opening paragraph
mono	11px	400	1.5	—	Captions, callouts, card, meta
kicker	12px	400	—	0.32em, UPPERCASE	Section kickers / eyebrows

Tracking on mono metadata varies by role: 0.12em–0.32em uppercase across kickers, header tags, captions and folio lines.

Layout

Base unit 4px; section vertical rhythm in 8px steps up to py-24 (96px). Everything centers in a max-w-[1180px] container with px-6 / md:px-10 gutters. The masthead is a full-width band opened by a 2px top border with an under-rule. The hero is centered (max-w-4xl) over a md:w-[85%] figure plate. The article body is a 12-column grid: a lg:col-span-2 sticky left margin of callout notes, a lg:col-start-3 col-span-6 reading column constrained for measure, and a lg:col-start-9 col-span-4 right rail holding the rotated, sticky evidence card. The glossary appendix inverts to a dark full-bleed band with its own 12-column term/definition rows. Whitespace is generous and editorial — wide margins, real measure, breathing room around figures.

Elevation & Depth

The system is essentially flat and print-like: depth comes from 2px ink borders, not blur. The one true shadow is the evidence card's hard offset shadow-[6px_8px_0_rgba(28,37,65,0.18)] — a printed-card lift, no spread or blur. The hero photo sits on a bg-black plate inside a 2px frame; mono corner-tag chips use bg-[#1C2541]/70 translucent backing. Hovered terms get a soft teal text-shadow glow. No backdrop-filter glass, no elevation ramp.

Shapes

Resolutely squared. Radius is 0 everywhere — frames, cards, chips, tooltips, icon box. The only curves in the design are intentional and illustrative: the SVG hero crosshair circles, and the hand-drawn C-curve leader paths (with end dots) connecting margin notes to the text. The evidence card's -rotate-2 tilt and a rotate-12 pin are the only off-axis elements.

Components

• Masthead — paper bg, ink type, border-t-2 top rule + border-b ink-30 under-rule; mono kicker tags ("Lab Notebook · Vol. IV", "Open Archive" in vermilion); 7×7 bordered icon box with teal ti-clock-hour-4; Fraunces-800 "Marginalia" wordmark.
• Glossary term — inline span, 1.5px dotted ink underline, cursor:help, 600 weight; hover flips to teal with teal-glow text-shadow.
• Tooltip — ink-navy bg, paper text, 11px mono, border-left:3px teal, 240px wide, arrow notch; fades in on term hover.
• Evidence card — paper bg with index-card-lines ruled background, 2px ink border, p-6 pt-9, -rotate-2, hard 6px 8px 0 offset shadow; vermilion pushpin (ti-pin) overhang, mono terminal log lines (> clock_A : Sr-87…), big teal 10⁻¹⁸ Fraunces figure.
• Figure — bg-black + 2px ink frame, image, mono caption strip on paper with border-t-2 and vermilion "Fig. 2 —" / "PLATE A —" label.
• Callout note — margin annotation, 2px vermilion left-rule, 11px mono, vermilion "NOTE —" label, curved SVG leader path pointing at the text.
• Glossary section — inverted: ink-navy bg, paper text, teal mono term names with ti-book-2, Source Sans definitions, paper-20 row dividers, vermilion folio sign-off.

Motion

All scroll-driven via GSAP + ScrollTrigger (+ DrawSVGPlugin). The hallmark is the hero coordinate grid: teal grid lines and crosshairs draw 0%→100% (DrawSVG) scrubbed to scroll. Body paragraphs fade/rise (y:24, 0.7s, stagger 0.08, power2.out); the figure rises y:40 (0.8s, power3.out); the evidence card rises and de-rotates (y:60, rotation:4, 0.9s, power3.out); margin callouts slide in from the left (x:-30, stagger 0.15); glossary rows rise (y:30, stagger 0.1). The only CSS motion is the term hover (color + glow + tooltip opacity). If DrawSVGPlugin fails to load, the grid simply renders static (guarded by if (window.DrawSVGPlugin)).

Iconography

Tabler icons via tabler-icons-webfont CDN, outline style. Three glyphs only: ti-clock-hour-4 (logo, teal, in a bordered box), ti-book-2 (glossary entries, teal, ~20px), ti-pin (evidence card pushpin, vermilion, 4xl rotated). Icons are functional/decorative markers, never filled, and follow the two-color rule — teal for instruments, vermilion for annotation.

Do's and Don'ts

• Do keep the paper grid, the 2px ink borders, and zero radius — the print/notebook character lives there.
• Do reserve teal for instruments/data and vermilion for annotations; never swap their roles.
• Do use IBM Plex Mono for every caption, callout, kicker and metadata line.
• Do keep the one hard offset shadow exclusive to the index card.
• Don't introduce rounded corners, blur shadows, or glass.
• Don't add new accent colors — the palette is strictly paper/ink + teal + vermilion.
• Don't set body copy in the serif or headlines in the sans; the Fraunces/Source Sans/Plex Mono roles are fixed.

Known Gaps

• Hero headline size is expressed as clamp(58px, 9vw, 120px) to summarize the responsive ramp text-[58px] sm:[80px] lg:[110px] xl:[120px]; the source uses discrete breakpoint classes, not a literal clamp.
• All fonts load from a single Google Fonts @import; the tokens.json url carries that full combined import string for each face.
• Spacing scale is inferred from the Tailwind utilities actually used; the page does not declare a formal scale.