# Polis Design Tokens

Source: `site/landing/styles.css`. Every CSS custom property below has a semantic role, a known value, at least one component or surface that uses it, and an approved contrast context when the token appears near text.

| Token | Value | Usage | Contrast pair | Component trace |
|---|---|---|---|---|
| `--commons-blue` | `#0B5FFF` | Primary civic action and link color. | `white/commons-blue` 5.13:1 | Buttons, route cards, links, status metrics. |
| `--bridge-green` | `#15A67A` | Success, availability, consent, bridge signal. | `ink/bridge-green` 5.00:1 | Trust list, plan cards, green swatches. |
| `--assembly-red` | `#D6422B` | Warning line, veto line, urgent accent only. | Not used as a text background; pair with `surface-danger`. | Eyebrows, step labels, alert borders. |
| `--sortition-violet` | `#6F4BD8` | Governance and sortition accent. | `white/sortition-violet` 5.72:1 | Governance swatch, receipts, design docs. |
| `--token-gold` | `#F2B705` | Agora token, primary warm call-to-action. | `ink/token-gold` 8.54:1 | Primary buttons, orientation panels, role badges. |
| `--paper-warm` | `#F7F4EA` | Page background. | `ink/paper-warm` 14.11:1 | Body, hero pages, page bands. |
| `--ink` | `#1D2433` | Primary text and dark footer background. | `ink/white` 15.53:1; `white/ink` 15.53:1 | Body text, footer, borders. |
| `--white` | `#FFFFFF` | Surface, inverse text. | `ink/white` 15.53:1 | Cards, inputs, headers. |
| `--surface` | `#FFFFFF` | Default raised surface. | `ink/surface` 15.53:1 | Cards, panels, forms. |
| `--surface-soft` | `#F1F7F5` | Quiet panel background. | `ink/surface-soft` 14.32:1 | Design-system panels, quiet blocks. |
| `--surface-warning` | `#FFF3C4` | Non-blocking warning surface. | `ink/surface-warning` 13.95:1 | Toast demo, warning state. |
| `--surface-danger` | `#FFF0EC` | Destructive or deletion support surface. | `ink/surface-danger` 14.00:1 | Deletion, alert, red swatch background. |
| `--danger-action` | `#A72614` | Destructive action background. | `white/danger-action` 7.17:1 | Destructive button. |
| `--evening-bg` | `#141B2A` | Low-luminance evening page background. | `evening-ink/evening-bg` 15.64:1 | Color matrix, future explicit evening mode. |
| `--evening-surface` | `#202B3F` | Low-luminance evening raised surface. | `evening-ink/evening-surface` 12.91:1 | Color matrix, future explicit evening mode. |
| `--evening-ink` | `#F7F4EA` | Text on evening surfaces. | `evening-ink/evening-bg` 15.64:1 | Color matrix. |
| `--line` | `color-mix(in srgb, var(--ink), transparent 84%)` | Hairline borders and separators. | Decorative only; not text. | Cards, panels, tables, inputs. |
| `--muted` | `color-mix(in srgb, var(--ink), transparent 28%)` | Secondary text on light surfaces. | Used on `paper-warm` or `surface`; visually checked against body-size contexts. | Helper copy, metadata, cards. |
| `--focus-ring` | `#0A3AA8` | Visible focus outline. | `focus-ring/white` 9.62:1 | Links, buttons, fields, summaries. |
| `--font-sans` | `Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif` | Primary local/system type stack. | n/a | All pages. |
| `--font-serif-accent` | `Georgia, "Times New Roman", serif` | Reserved accent stack for future research/vision pages only. | n/a | Tokenized, not used on current pages. |
| `--type-display` | `88px` | Display scale. | n/a | Design-system typography sample. |
| `--type-h1` | `72px` | Desktop H1 scale. | n/a | Hero and design-system pages. |
| `--type-h2` | `42px` | Desktop H2 scale. | n/a | Section headings. |
| `--type-h3` | `26px` | Large card heading scale. | n/a | Design-system type sample. |
| `--type-h4` | `21px` | Compact heading scale. | n/a | Design-system type sample. |
| `--type-body` | `17px` | Body copy. | n/a | Paragraphs and forms. |
| `--type-lead` | `22px` | Lead copy. | n/a | Hero and intro copy. |
| `--type-caption` | `14px` | Caption and label copy. | n/a | Captions, form labels, badges. |
| `--type-micro` | `12px` | Micro labels. | n/a | Footer section labels, microcopy. |
| `--space-4` | `4px` | Hairline/compact spacing. | n/a | Utility scale. |
| `--space-8` | `8px` | Small control spacing. | n/a | Utility scale and form controls. |
| `--space-12` | `12px` | Button/control padding. | n/a | Utility scale. |
| `--space-16` | `16px` | Component gap. | n/a | Grid utilities, form groups. |
| `--space-24` | `24px` | Card padding. | n/a | Account panels, cards. |
| `--space-32` | `32px` | Page gutter. | n/a | Header, major sections. |
| `--space-48` | `48px` | Section separation. | n/a | Design-system sections. |
| `--space-88` | `88px` | Major page vertical rhythm. | n/a | Landing sections. |
| `--container-narrow` | `760px` | Reading measure. | n/a | Hero text, narrow utility. |
| `--container-content` | `1060px` | Content measure. | n/a | Content utility. |
| `--container-wide` | `1180px` | Wide layout measure. | n/a | Landing sections, design-system main. |
| `--radius-control` | `8px` | Inputs and buttons. | n/a | Buttons, fields, chips. |
| `--radius-card` | `8px` | Cards and panels. | n/a | Cards, panels, route grids. |
| `--control-min-height` | `48px` | Accessible target height. | n/a | Button/control reference. |