# Swiss editorial: tokens

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

## Color

| Token | Value | Role |
| --- | --- | --- |
| `paper` | `#FFFFFF` | Page ground |
| `ink` | `#1A1A1A` | Type, rules, reverse-video fills |
| `mute` | `#5C5C5C` | Bylines, datelines, captions, secondary labels |
| `hair` | `rgba(26, 26, 26, 0.25)` | Row rules, column dividers, link underline |
| `signal` | `#C41E3A` | Once per view: the primary button, or the kicker when there is no primary |
| `on-signal` | `#FFFFFF` | Type on signal |

Contrast on paper: `ink` 17.4:1, `mute` 6.7:1, `signal` 5.8:1. `on-signal` on `signal` 5.8:1.

## Type

One family: `"Helvetica Neue", Helvetica, Arial, sans-serif`. Weights 400 and 700 only.

| Token | Size / line | Weight | Tracking | Case | Use |
| --- | --- | --- | --- | --- | --- |
| `display` | clamp(44px, 6.6vw, 80px) / 0.95 | 700 | -0.045em | sentence | Feature headline |
| `statement` | clamp(28px, 3.6vw, 44px) / 1.02 | 700 | -0.04em | sentence | Pull quote, modal title |
| `dek` | 20px / 28px | 400 | -0.01em | sentence | Dek |
| `title` | 20px / 24px | 700 | -0.025em | sentence | Index entries, card titles |
| `body` | 16px / 24px | 400 | 0 | sentence | Running text, input values |
| `small` | 13px / 20px or 14px / 20px | 400 | 0 | sentence | Table cells, notes, index summaries |
| `label` | 11px / 16px | 700 | 0.12em to 0.16em | UPPERCASE | Kicker, masthead, nav, section titles, table heads, buttons, tabs, form labels |
| `meta` | 11px / 16px | 400 | 0.06em | UPPERCASE | Byline, dateline, caption, pager, footer |

Everything is flush left, ragged right. `text-wrap: balance` on `display` and `statement`. `hyphens: none`.

## Spacing rhythm

Baseline 24px. Values are 8, 16, 24, 48, 72.

| Token | Value |
| --- | --- |
| `xs` | 8px |
| `sm` | 16px |
| `md` | 24px |
| `lg` | 48px |
| `xl` | 72px |

Column gutter is `md`. Section break is `xl`. Air under the masthead is `xl`.

## Grid

12 columns, 24px gutter. Marginalia on columns 1 to 3: kicker, byline, section titles, figure caption. Measure on 4 to 12: headline, dek, body (max 62ch), pull quote, figure, table. Form on 1 to 6, notes on 8 to 12. Index (cards) is three equal columns across 1 to 12 with hairlines between.

## Rules

| Rule | Value | Use |
| --- | --- | --- |
| hairline | 1px `hair` | Table rows, index dividers, tab baseline, link underline |
| section | 1px `ink` | Masthead, section breaks, table head, input baseline, footer |
| heavy | 2px `ink` | Selected tab, alert, current pager, input focus |

Nothing heavier than 2px. No double rules.

## Shape

Radius 0 on everything. No shadow, no blur, no gradient.

## Motion

| Token | Value |
| --- | --- |
| `duration` | 120ms |
| `ease` | `linear` |

Hover color only. Focus is instant. Honor `prefers-reduced-motion`.