# Warm print magazine: tokens

Use the role. Never a raw hex in component CSS except to define the token.

## Color

| Token | Value | Role |
| --- | --- | --- |
| `paper` | `#F3EAD9` | Page ground |
| `tint` | `#ECE1CB` | Notice and figure-caption blocks. Darker paper, never white |
| `ink` | `#2A2118` | Display type, heavy rules, primary fill |
| `text` | `#3A2E22` | Body and table text (one step lighter than ink) |
| `mute` | `#6B5A48` | Dek, bylines, captions, secondary labels |
| `hair` | `rgba(42, 33, 24, 0.35)` | Hairline rules, contents dividers, link underline |
| `vermillion` | `#A8461A` | Three uses per view: kicker, one rule, primary hover |
| `on-ink` | `#F3EAD9` | Type on ink fills |

Contrast on paper: `text` 11.0:1, `mute` 5.5:1, `vermillion` 4.9:1 (passes AA at 15px small caps). `on-ink` on `ink` 13.2:1.

## Type

Serif: `"Iowan Old Style", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, serif`
Sans: `"Avenir Next", Avenir, "Gill Sans", "Gill Sans MT", "Trebuchet MS", sans-serif`

| Token | Family | Size / line | Style | Use |
| --- | --- | --- | --- | --- |
| `masthead` | serif | clamp(44px, 6vw, 64px) / 1 | roman, -0.02em | Publication name |
| `display` | serif | clamp(40px, 5.2vw, 60px) / 1.02 | roman, -0.025em, `text-wrap: balance`, discretionary ligatures | Feature title |
| `quote` | serif | 28px / 35px | italic, hung opening quote (`text-indent: -0.42em`) | Pull quote, once per feature |
| `dek` | serif | 22px / 28px | italic | Dek |
| `section` | serif | 26px / 28px | roman, -0.015em | Section titles (ledger, reply card) |
| `entry` | serif | 22px / 28px | roman | Contents entries, card titles |
| `body` | serif | 18px / 28px | roman, justified, `hyphens: auto`, old-style numerals | Running text, input values |
| `small` | serif | 15px to 16px / 21px to 24px | roman | Captions, notice body, contents summaries |
| `label` | serif | 15px / 21px | `font-variant-caps: all-small-caps`, 0.12em | Kicker, byline, dateline, contents numbers, figure label, buttons, notice title |
| `chrome` | sans | 11px / 21px | uppercase, 0.12em to 0.14em | Nav, table heads, tabs, form labels, pagination, footer |
| `table` | sans | 14px / 21px | lining tabular numerals | Table cells |

Italic is used by `quote` and `dek` only.

## Spacing rhythm

Baseline 28px. Every vertical value is a multiple of 7.

| Token | Value |
| --- | --- |
| `xs` | 7px |
| `sm` | 14px |
| `md` | 21px |
| `lg` | 28px |
| `xl` | 42px |
| `2xl` | 56px |

Column gutter is `lg` (28px). Page padding is `xl` vertical, `2xl` horizontal.

## Grid

12 columns, 28px gutter. Feature measure on columns 1 to 8. Rail on 10 to 12 for byline, pull quote, and figure caption. Column 9 is deliberate air. Reply card on 1 to 6, notes on 8 to 12.

## Rules

| Rule | Value | Use |
| --- | --- | --- |
| hairline | 1px `hair` | Table rows, contents dividers, tab index baseline |
| section | 1px `ink` | Section breaks, table head, input baseline, byline top |
| heavy | 3px `ink` | Under the masthead, above the ledger, above the colophon |
| double | 3px `ink`, 2px gap, 1px `ink` | Notices, colophon |
| accent | 1px `vermillion` | Once per view, under the masthead dateline row |

## Shape

Radius 0 on everything.

## Motion

| Token | Value |
| --- | --- |
| `duration` | 200ms |
| `ease` | `ease-out` |

Applies to hover color and background only. Focus changes are instant. Honor `prefers-reduced-motion`.

## Paper

Ground is `paper` with a 7% fractal-noise SVG multiplied on top and a soft highlight toward the upper center. Disable both under `prefers-contrast: more`.