SoD2 Diary v2 — Token Preview

design/preview.html · live render of design/tokens.css · PHA-346

This page renders the locked v2 vocabulary with zero raw hex in markup — every color, font, shadow, and spacing pulls from tokens.css. If something here looks wrong, the fix lands in the token sheet, not in components.

1 · Palette

paper
--paper
#F1E4C8
Page surface — the canvas.
paper-stained
--paper-stained
#C9B388
Edge of paper, water rings, dog-ears.
leather
--leather
#3B2A1A
Book chrome — outside the page.
leather-shadow
--leather-shadow
#1B120A
Spine fold, deepest ambient.
ink-blue
--ink-blue
#1F2A4A
Handwriting accents — names, dates, mood.
ink-brown
--ink-brown
#2A1F12
Default body / typewriter labels.
ink-red
--ink-red
#7E1E1E
KIA, plague hearts, alerts.
amber
--amber
#D4A24C
Decorative-only on paper. Focus rings, active tab.

2 · WCAG-AA Contrast vs --paper

PairRatioAA bodyAA largeAAAVerdict
--ink-brown on --paper12.79:1PASSPASSAAADefault body / labels.
--ink-blue on --paper11.20:1PASSPASSAAAHandwriting accents.
--leather on --paper10.88:1PASSPASSAAADivider tabs / hairlines.
--ink-red on --paper7.97:1PASSPASSAAAKIA, plague hearts.
--ink-brown on --paper-stained7.89:1PASSPASSAAABody over stains.
--ink-blue on --paper-stained6.91:1PASSPASS—Handwriting over stains.
--leather on --paper-stained6.71:1PASSPASS—Tabs over stained margin.
--ink-red on --paper-stained4.92:1PASSPASS—KIA stamp, body size safe.
--amber on --paper1.84:1FAILFAILFAILDecorative-only — never sole carrier.
--amber on --paper-stained1.13:1FAILFAILFAILDecorative-only.

3 · Type Specimens

--font-typewriter · Special Elite · 400
THE PEOPLE — DAY 12
Section labels, button captions, tab titles. Always uppercase.
--font-mono · IBM Plex Mono · 400 / 600
Plague Hearts: 9 → 8. Food: 3 → 5. Medicine: 5 → 4.
Plague Hearts: 9 → 8. Food: 3 → 5. Medicine: 5 → 4. (bold 600)
Body text, form data, generated dispatch block.
--font-hand · Caveat · 400 (decorative-only)
Rosa Vargas — mourned husband Marco
Names, mood label, the date scrawl. Never sole carrier of meaning — always pair with a typewriter sub-label.

4 · Buttons / Stamps

Every stamp has --touch-min: 44px. Press states use --shadow-press + --press-duration. Hover/focus uses --ink-bleed-duration ≤200ms.

5 · Form Slot (clarity-wins fallback)

Real <input>/<label> under every painted control — Plan §0. Focus ring = amber halo + ink-brown inner.

6 · Index Card (People tab — card front)

Rosa Vargas
28 · Latina F · Joined Day 1
Tough · Leader · Shooting · Medicine
★ Marco — husband (KIA d47, mourned)
↗ Luz — daughter (alive, strained d51)
Ed Donovan
42 · White M · Joined Day 1
Asthma · Wits · Repair
↗ Maya — trained me on guns
Marcus Hill
35 · Black M · Joined Day 1 · KIA Day 3
Endurance · Cardio
— ties severed. Mourned by Rosa.

7 · Sync "Last Contact" Bar (--amber on --leather)

5.92:1 contrast on leather — only safe place amber can carry meaning.

Last contact: 4m ago.

8 · Generated Dispatch Block (must paste plain)

The Survivors - Day 12 Report
Cascade Hills | Dread | Vogel House (Starter)
Plague Hearts: 8
Food: 3 -> 5
Medicine: 5 -> 4

Events: Cleared the police station. Lost Marcus to a feral ambush.

Active Roster:
- Rosa Vargas, 28, Latina F | Tough, Leader | Shooting, Medicine | Joined Day 1
  TIES: husband Marco (KIA day 47, mourned), daughter Luz (alive, strained since day 51)
- Ed Donovan, 42, White M | Asthma | Wits, Repair | Joined Day 1

Lost:
- Marcus Hill, 35, Black M | Killed Day 3