# Design Language for freedom.compare ## Aesthetics and Tone freedom.compare is a brutalist comparative-liberty dossier — a samizdat broadsheet that has been carbon-dated and laid out under fluorescent ceiling tubes in a 1971 reading-room. The site does not sell freedom, nor does it celebrate it; it weighs freedom, side by side, in two-column slabs, the way a forensic accountant weighs receipts. The tone is grounded-earthy, soil-toned, slow-blooded. There is no chrome, no glow, no friendly mascot. There is paper, ink, lacquer, and the occasional bruise of deep burgundy where someone has stamped a verdict. The mood lives in the seam between three references: (1) the printed Press Freedom dossiers that get smuggled across borders folded into a coat lining, (2) the architectural brutalism of the Boston City Hall interior at 4 p.m. in November — concrete, oxidised copper, exposed conduit — and (3) a forensic geology lab where every comparison comes with a core-sample swatch. We borrow nothing from SaaS. We borrow nothing from "modern minimalism." This is editorial brutalism with damp soil pressed into the gutter. Aesthetically, freedom is rendered as **terrain** — not as a flag, not as a bird, not as a dove. Two countries, two regimes, two centuries, two clauses of the same constitution: each is shown as a cross-sectioned core, a strata of earth in deep burgundy, oxidised iron, peat, and chalk. Comparison is the geology of liberty. The site never apologises for its weight. Headlines are set in tech-mono that has been printed once, photocopied twice, and re-scanned at low DPI. Body copy is stately, set in a humanist serif at 19px with generous leading so the eye is forced to *slow down* — comparison is not a swipe, it is a sit-down. There is grit in the gutters: a 4% multiply-blend grain layer, a hairline of misregistration on every section heading (tech-mono characters offset by 1px in cyan-shadow before being overprinted in burgundy ink — a deliberate printing-press fault). Tonally: grounded-earthy, archival, slightly mournful, never cynical. The site believes freedom is comparable; it does not believe comparison is comfortable. ## Layout Motifs and Structure The skeleton is a **magazine-spread** carried across the entire scroll — not a stack of cards, not a hero-then-features. Every viewport is a two-page spread, with a distinct **gutter** (a 4px deep-burgundy hairline) running floor to ceiling, separating Subject A from Subject B. The gutter is the load-bearing element of the layout, the way the spine of a printed newspaper is. Grid: a 14-column asymmetric editorial grid, 7 columns per side of the gutter, with a 3-column "**margin annotation rail**" intruding from the outer edges. The annotation rails are where footnotes, dates, source-citations, and interlinear corrections live — set in 11px tech-mono with a lighter peat-green underprint. The annotation rails are sticky on scroll *only sometimes* (every other section), creating a deliberate rhythm of "the margin caught up" / "the margin fell behind." Spread compositions, in order down the page: 1. **The Cover Spread.** Full-bleed deep-burgundy paper texture with a single tech-mono headline in oxidised-cream, run as a five-line verb phrase: COMPARE / WHAT / IS / NOT / COMPARABLE. The verb phrase animates in via path-draw-svg — each letter is constructed as a stroked outline that draws itself in over 1800ms, cubic-bezier(.7,0,.3,1), letter-by-letter with a 90ms stagger. Once drawn, the letters do not fill — they remain as *outlined* glyphs. Outline-only headlines persist throughout the site as the dominant typographic mode. 2. **The Index Spread.** A two-column geological cross-section. Left column: "Subject A" — labeled with a tech-mono spec-sheet (regime, year, instrument, method). Right column: "Subject B." Between them, the gutter widens into a 96px-tall **comparison strip** containing a horizontal scroll of strata-bars rendered as gradient-mesh organic-blobs: each stratum is a freedom-axis (assembly, press, movement, conscience, association), filled with a soft mesh of burgundy-into-peat-into-bone. 3. **The Verdict Spread.** A diagonal tear runs across the spread at -7°, dividing "Asserted" from "Documented." Above the tear, claims rendered as quoted broadsheet pull-quotes in 64px humanist serif, set ragged-right. Below the tear, evidence rendered as 14px tech-mono in tight justified columns, with hand-drawn red-ink underlines (path-draw-svg) appearing on scroll. 4. **The Footprint Spread.** A full-viewport gradient-mesh map — not a real geographic map, but an organic-blob continent-mesh in burgundy-on-peat that mutates between subjects as the viewer scrolls. The continent's coastline is a single SVG path that morphs (path-draw-svg) between two regimes' freedom-shapes, illustrating that "shape of liberty" is not the same shape between subjects. 5. **The Marginalia Spread.** Pure annotation rails. The center is empty save for one perfectly-set 11px tech-mono dateline. Both annotation rails are crowded with hand-set footnotes, corrections, errata, and inkblots. This is the site's "humility" page: every comparative claim above is footnoted here, in print. Sticky-margin: ON. 6. **The Imprint Spread.** Colophon. Set like a 1962 publishing house imprint page. Centred. Tech-mono. Five lines. Done. The page never auto-snaps between spreads — scroll is continuous, with each spread occupying ~140vh so there is always a "fold" visible at the page-break, just like a real newspaper folded once across the middle. ## Typography and Palette **Typefaces (Google Fonts only):** - **Display / Headlines:** `Space Mono` — used at sizes 48px–168px, *outlined-only* (text-stroke, no fill) for cover-spread + spread-headers. Weight 700. Tight tracking (-0.04em). All-caps. - **Body Serif:** `Lora` — 19px, 1.7 leading, weight 400, ragged-right alignment for editorial copy. Used for the long-form comparative paragraphs. - **Annotation / Margin Rail:** `JetBrains Mono` — 11px, weight 400, justified, with hanging punctuation. Used for footnotes, source citations, datelines, technical specs. - **Pull-quotes / Editorial Voice:** `Cormorant Garamond` — 48px–96px, weight 500, italic, used for "Asserted" claims that the site is about to test against documented evidence. - **Tabular / Spec Sheets:** `IBM Plex Mono` — 13px, weight 400, used inside the Index Spread for the regime/year/instrument/method tables. Five typefaces is heavy on purpose. A magazine has an editorial board, a copy desk, an annotations desk, and a printer. Each gets a voice. **Palette (deep-burgundy core, grounded-earthy support):** - `#3A0A14` — Deep burgundy ink, the printer's primary. Used for headlines, gutter rule, verdict stamps. - `#5C1A24` — Oxidised burgundy, slightly warmer, used for body-text of quoted material and for hover-state strata. - `#7A4F3A` — Earth umber. Used for body serif on cream backgrounds. - `#A47148` — Tobacco brown. Used for gradient-mesh midtones and annotation underprints. - `#C9A87C` — Faded chamois. Used for paper-stock background of "documented evidence" sections. - `#E8DCC4` — Bone cream. The default page background. Newsprint that has yellowed exactly enough. - `#3F4A2E` — Peat green (cool dark). Used sparingly for annotation-rail underprints and for "still-living" indicators on the strata. - `#6E7A5C` — Lichen grey-green. Used for annotation-rail body text. - `#1A1410` — Coal black. Used only for the imprint spread and for the keyline of headline outlines. Strict rule: **no pure white and no pure black** anywhere. Whitespace is `#E8DCC4`. Blackpoint is `#1A1410`. Burgundy is the only "loud" color and it earns its volume by being scarce. A 4% multiply-blend grain texture is applied above all content as a single `` overlay using `feTurbulence`. The grain has slow drift (8s ease-in-out infinite) so still pages still have the *thought* of motion in them. ## Imagery and Motifs freedom.compare's image vocabulary is **gradient-mesh + organic-blobs + path-draw-svg**, and it deliberately rejects photography. There is not one photograph on the site. Every visual is rendered, drawn, or computed. Visual building blocks: - **Gradient-mesh strata.** Every freedom-axis is rendered as an organic horizontal blob — an SVG path with 14 control points, filled with a 5-stop conic gradient-mesh in burgundy → umber → tobacco → chamois. The blobs are *not* perfect — they have a 2px irregular hand-drawn outer stroke (Lora-italic-pen feel) achieved via SVG `feDisplacementMap` with low-frequency turbulence. Each stratum has a dateline label in JetBrains Mono floating in its negative space. - **Continent-mesh maps.** The Footprint Spread's "freedom-shape" is a single closed SVG path morphing between two regime-states. Morphing uses GSAP `MorphSVGPlugin` (or a hand-rolled `path` interpolation) with a 1400ms ease. The continent is filled with a radial gradient-mesh from deep-burgundy (interior) to chamois (coast) to bone (sea). - **Path-draw-svg verdict marks.** Every "verdict" or "source citation" is accompanied by a hand-drawn ink mark — a circle, an underline, a marginal arrow, an asterisk — that draws in via stroke-dasharray animation triggered by IntersectionObserver. Stroke is `#3A0A14`, stroke-width 1.4px, stroke-linecap round. Each mark has a slight `transform: rotate()` of -2° to 3° randomly assigned per element to feel hand-set. - **Comparison gauges as scaled circles.** No bar charts, no donut charts, no dashboard widgets. Comparisons are shown as two filled organic-blob circles side-by-side, sized to the absolute count, both labeled in JetBrains Mono. The blobs visibly *seep* — irregular outlines that drift +/- 1.5px on a 6s breathing cycle. - **Margin annotation marks.** Hand-drawn marginalia as path-draw-svg: caret-insertions (`∧`), strike-throughs, "see also" arrows, query brackets `?[…]`. Each appears as the relevant footnote enters viewport. - **Stamps (used sparingly).** A "VERIFIED" / "DISPUTED" / "RESCINDED" stamp, rendered as a tilted (-6°) outlined Space Mono badge in deep-burgundy. Stamps appear on the Verdict Spread next to specific claims, animated in with a 200ms scale-bounce + 60ms blur-snap. - **NO icons.** No Heroicons, no Feather, no Lucide. If something needs an icon, it gets a margin annotation mark or a stamp. - **NO photographs, NO illustrations of people.** Liberty is rendered as terrain, not as faces. This is deliberate: comparing freedoms via headshots is the failure mode of every Press Freedom Index brochure ever printed. ## Prompts for Implementation Build freedom.compare as a **continuous scroll-driven editorial experience**, not a multi-page site, not a SPA with routes. One long broadsheet, six spreads, ~840vh total scrollable height. The viewer is *reading the dossier*, not navigating a product. Storytelling rules: - **Lead with verbs, not nouns.** The cover headline is a five-word verb phrase that draws itself in. Every section heading is a verb-or-imperative. ("Compare." "Weigh." "Cross-reference." "Recant." "Footnote." "Print.") - **Every claim has a margin.** The annotation rails are not decoration — they are functional. As the reader scrolls past a claim, the corresponding footnote in the rail draws its underline (path-draw-svg) and lights its margin caret. Reader can hover the caret to see the citation expand inline. - **The gutter is sacred.** The 4px deep-burgundy vertical gutter rule never breaks. It runs from top of viewport to bottom of viewport on every spread. It is the single most visually consistent element on the site. Treat it like the spine of a real newspaper. - **Comparison happens through morph, not toggle.** When the reader changes "Subject A vs Subject B" pairing (a small selector at the top of the Index Spread), do NOT swap content with fade. Morph the strata-blobs and the continent-path (path-draw-svg) over 1400ms ease-in-out-cubic. The reader sees liberty *deform* between regimes. This is the single most expensive animation on the site and it should be the only one that takes longer than 600ms. Animation system: - **Scroll-triggered path-draw-svg** for: cover-spread headline (1800ms, 90ms stagger), section dividers (600ms), verdict marks (450ms), annotation underlines (380ms). Use `IntersectionObserver` thresholds at 0.4 to trigger. - **Gradient-mesh slow drift.** All gradient-mesh fills have a 12s `transform: translate(0.5%, 0.3%)` infinite alternate ease-in-out drift so the paper *breathes*. Subtle. Almost subliminal. - **Outline glyph wobble.** Cover-spread outlined headline glyphs have a per-letter independent 0.4px x/y jitter on a 7s cycle (random phase per letter) so the typography never feels printed flat. It is *being printed* in real time. - **Cursor as a printer's loupe.** A 92px-diameter circular custom cursor, deep-burgundy hairline outline 1px, centre crosshair. When over a comparison-blob, it magnifies the underlying stratum 1.4x via `clip-path: circle()` and shows the JetBrains-Mono dateline of that stratum in tiny print at the cursor's southeast. No fancy spring physics — just clean position-tracking with a 60ms ease. - **NO parallax. NO tilt-3d. NO cursor-follow magnetic CTAs. NO spring bounce on cards.** Those animations belong to other sites. The frequency analysis shows path-draw-svg is at 27%, parallax/cursor-follow/spring/magnetic/stagger are all 75%+. We are deliberately joining the underused side and refusing the overused side. Component-level guidance: - **Cover Spread:** Single `
` 100vh, deep-burgundy bg, a `` of the five-line headline composed of stroked-outline text glyphs. Use `` with `fill="none" stroke="#E8DCC4" stroke-width="1.4"`. Trigger draw on page load. - **Index Spread:** CSS Grid, 14 columns, 7-7 split with a 4px middle column for the gutter. Strata blobs are SVG `` rendered server-side or via a small JS pass that interpolates 14 control points based on data; do NOT use Canvas. SVG keeps the editorial / printed feel. - **Verdict Spread:** Two stacked sections separated by a `clip-path: polygon()` diagonal cut at -7°. Above-cut: Cormorant italic pull-quotes. Below-cut: Lora 19px justified columns with JetBrains Mono inline citations. - **Footprint Spread:** Single full-viewport `` 100vw × 100vh. The continent path morphs on scroll using `getBoundingClientRect()` ratio between two predefined paths. - **Marginalia Spread:** Two `