Tokens

Eén bron

De tokens staan in één bestand: app/assets/css/tokens.css. Deze site gebruikt dat bestand, en hieronder staat het zoals het is. Een token verander je dus in dat bestand, nooit in een tweede kopie.

Licht is de standaard. Donker volgt het systeem, en data-theme op <html> gaat voor allebei. De rollen en waarom staan op Kleur.

:root {
  --bg: #ffffff;
  --surface: #fbfbfd;
  --surface-high: #efeef5;
  --border: #e7e6ee;
  --border-strong: #8a8c9b;
  --text: #0d0e14;
  --muted: #5f6273;
  --known: #ff5a36;
  --halo: #ffd6cc;
  --success: #1f7a4d;
  --warning: #955800;
  --error: #a61b1b;
  --brand-gradient: linear-gradient(100deg, #ffb020, #ff5a36 50%, #c2283a);

  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-sans: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;

  --radius-control: 8px;
  --radius-card: 12px;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg: #08090d;
    --surface: #0e0f15;
    --surface-high: #1b1d27;
    --border: #22242f;
    --border-strong: #5d6070;
    --text: #f4f4f8;
    --muted: #9a9cab;
    --halo: #5a2416;
    --success: #5fd3a3;
    --warning: #f5d06b;
    --error: #ff8a73;
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --bg: #08090d;
  --surface: #0e0f15;
  --surface-high: #1b1d27;
  --border: #22242f;
  --border-strong: #5d6070;
  --text: #f4f4f8;
  --muted: #9a9cab;
  --halo: #5a2416;
  --success: #5fd3a3;
  --warning: #f5d06b;
  --error: #ff8a73;
  color-scheme: dark;
}

Wat erin staat

Er is geen token voor koraal als tekst: koraal is nooit tekst. Zie Toestanden.

Hoeken

Knoppen, velden en labels 8px, kaarten en schermen 12px. Geen pilvorm.

Ruimte is nog in te vullen.