docs: add design tokens (draft) with generated reference and preview

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

docs/design/tokens.md

@@ -0,0 +1,283 @@
+# Sst Design Tokens — v0.1.0-draft
+
+**Status:** Ter goedkeuring — nog niet gebruikt door de app
+
+Draagbare veldrecorder / cassettedeck uit de jaren 80 (Sony TC-D5, Marantz PMD, Nakamichi, Braun). Twee afwerkingen: ALUMINIUM (licht) en GRAPHITE (donker). Eén accent: het rode opnamelampje. Amber en groen alleen voor niveau-indicatoren.
+
+Bron: `Design/tokens.json`. Dit bestand en `tokens-preview.html` worden gegenereerd met `python3 Design/build_tokens.py`; pas nooit alleen deze bestanden aan.
+
+## Kleur
+
+Verwijs ernaar als `color.<naam>`. Kolommen: ALUMINIUM (licht) en GRAPHITE (donker).
+
+| Token | Aluminium | Graphite | Gebruik |
+|---|---|---|---|
+| `color.surface.chassis` | `#CBC8C0` | `#1C1B19` | Venster-achtergrond; het 'huis' van het apparaat |
+| `color.surface.metalHigh` | `#E3E1DB` | `#3B3A36` | Geborsteld metaal, bovenkant van de verloop |
+| `color.surface.metalLow` | `#BDBAB2` | `#262522` | Geborsteld metaal, onderkant van de verloop |
+| `color.surface.panel` | `#E2DFD5` | `#2B2A27` | Frontplaat van mat plastic; zijbalk en bedieningspanelen |
+| `color.surface.well` | `#B4B1A8` | `#131211` | Verzonken vlak: invoervelden, display-vensters |
+| `color.surface.paper` | `#EEE9D9` | `#232220` | Cassette-label crème: lijsten met transcripties en woordenboek |
+| `color.surface.keyHigh` | `#E6E3DA` | `#44433F` | Toetsdop, bovenkant |
+| `color.surface.keyLow` | `#CBC8BF` | `#33322F` | Toetsdop, onderkant |
+| `color.surface.keyPressed` | `#BEBBB2` | `#2A2927` | Ingedrukte toets |
+| `color.surface.meterFace` | `#EFE6C8` | `#D8CEA6` | Wijzerplaat van de VU-meter (blijft crème in beide afwerkingen) |
+| `color.surface.selection` | `#D4CDB2` | `#3A3828` | Geselecteerde rij in een lijst |
+| `color.surface.display` | `#1B1A18` | `#0E0D0C` | Displayglas van de teller; donker in beide afwerkingen |
+| `color.display.segmentUnlit` | `#3A3320` | `#2A2415` | Gedoofd segment op het displayglas |
+| `color.ink.primary` | `#1E1D1B` | `#ECE8DC` | Hoofdtekst en wijzer |
+| `color.ink.secondary` | `#403D38` | `#C4BFB2` | Secundaire tekst |
+| `color.ink.tertiary` | `#4D4A44` | `#ABA79B` | Zeefdruk-labels en hulptekst |
+| `color.ink.disabled` | `#8F8B82` | `#6B685F` | Uitgeschakeld; nooit voor essentiële tekst |
+| `color.ink.inverse` | `#F4EFE3` | `#F4EFE3` | Tekst op rode of donkere vulling; crème in beide afwerkingen |
+| `color.ink.onMeter` | `#1E1D1B` | `#1E1D1B` | Schaal, cijfers en wijzer op de wijzerplaat; vast donker in beide afwerkingen |
+| `color.accent.record` | `#C8281E` | `#CC2A20` | ENIGE accent: opnamelampje, REC-toets, piek-LED. Nooit voor lopende tekst |
+| `color.accent.recordUnlit` | `#7A2E28` | `#4A1F1B` | Lampje uit |
+| `color.level.green` | `#5E9E48` | `#6DB556` | Niveau-segment, brandend |
+| `color.level.amber` | `#D9A023` | `#E5B032` | Niveau-segment, waarschuwing, gecorrigeerd woord |
+| `color.level.greenUnlit` | `#A8B79C` | `#26331F` | Groen segment, uit |
+| `color.level.amberUnlit` | `#CDBA8A` | `#3D3418` | Amber segment, uit |
+| `color.line.seamDark` | `#8C8981` | `#0A0A09` | Naad tussen panelen, donkere helft |
+| `color.line.seamLight` | `#F3F1EB` | `#45433F` | Naad tussen panelen, lichte helft |
+| `color.line.hairline` | `#A9A69D` | `#3A3834` | Fijne scheidingslijn, zeefdruk-kader |
+| `color.line.focus` | `#1E1D1B` | `#ECE8DC` | Toetsenbord-focus |
+
+**Regel:** `accent.record` is het enige accent en wordt nooit voor lopende tekst gebruikt. Amber en groen zijn alleen voor niveau-indicatoren en markeringen.
+
+### Contrast (berekend)
+
+| Tekst | Op | Afwerking | Verhouding |  |
+|---|---|---|---|---|
+| `ink.primary` | `surface.chassis` | light | 10.08:1 | ok |
+| `ink.primary` | `surface.chassis` | dark | 14.05:1 | ok |
+| `ink.primary` | `surface.panel` | light | 12.63:1 | ok |
+| `ink.primary` | `surface.panel` | dark | 11.72:1 | ok |
+| `ink.primary` | `surface.paper` | light | 13.87:1 | ok |
+| `ink.primary` | `surface.paper` | dark | 12.98:1 | ok |
+| `ink.primary` | `surface.well` | light | 7.86:1 | ok |
+| `ink.primary` | `surface.well` | dark | 15.27:1 | ok |
+| `ink.primary` | `surface.selection` | light | 10.57:1 | ok |
+| `ink.primary` | `surface.selection` | dark | 9.65:1 | ok |
+| `ink.onMeter` | `surface.meterFace` | light | 13.49:1 | ok |
+| `ink.onMeter` | `surface.meterFace` | dark | 10.67:1 | ok |
+| `ink.primary` | `surface.keyHigh` | light | 13.13:1 | ok |
+| `ink.primary` | `surface.keyHigh` | dark | 8.08:1 | ok |
+| `ink.primary` | `surface.keyLow` | light | 10.07:1 | ok |
+| `ink.primary` | `surface.keyLow` | dark | 10.47:1 | ok |
+| `ink.secondary` | `surface.chassis` | light | 6.47:1 | ok |
+| `ink.secondary` | `surface.chassis` | dark | 9.38:1 | ok |
+| `ink.secondary` | `surface.panel` | light | 8.11:1 | ok |
+| `ink.secondary` | `surface.panel` | dark | 7.82:1 | ok |
+| `ink.secondary` | `surface.paper` | light | 8.90:1 | ok |
+| `ink.secondary` | `surface.paper` | dark | 8.66:1 | ok |
+| `ink.tertiary` | `surface.chassis` | light | 5.28:1 | ok |
+| `ink.tertiary` | `surface.chassis` | dark | 7.16:1 | ok |
+| `ink.tertiary` | `surface.panel` | light | 6.62:1 | ok |
+| `ink.tertiary` | `surface.panel` | dark | 5.97:1 | ok |
+| `ink.tertiary` | `surface.paper` | light | 7.27:1 | ok |
+| `ink.tertiary` | `surface.paper` | dark | 6.61:1 | ok |
+| `ink.tertiary` | `surface.metalHigh` | light | 6.75:1 | ok |
+| `ink.tertiary` | `surface.metalHigh` | dark | 4.73:1 | ok |
+| `ink.tertiary` | `surface.metalLow` | light | 4.55:1 | ok |
+| `ink.tertiary` | `surface.metalLow` | dark | 6.37:1 | ok |
+| `ink.inverse` | `accent.record` | light | 4.84:1 | ok |
+| `ink.inverse` | `accent.record` | dark | 4.67:1 | ok |
+| `level.amber` | `surface.display` | light | 7.46:1 | ok |
+| `level.amber` | `surface.display` | dark | 9.79:1 | ok |
+
+## Opaciteit
+
+| Token | Waarde | Gebruik |
+|---|---|---|
+| `opacity.mark` | 0.3 | Amber markering achter een gecorrigeerd woord |
+| `opacity.disabled` | 0.45 | Uitgeschakelde bediening |
+| `opacity.unlit` | 1.0 | Gedoofde lampjes gebruiken eigen 'unlit'-kleuren, geen transparantie |
+
+## Lettertypen
+
+| Token | Familie | Terugval | Gebruik |
+|---|---|---|---|
+| `font.family.chrome` | Helvetica Neue | Helvetica, Arial | Zeefdruk, toetsen, koppen: neutrale grotesk |
+| `font.family.text` | SF Pro Text | system-ui | Leesbare tekst: transcripties, woordenboek |
+| `font.family.mono` | SF Mono | Menlo, monospace | Teller, tijden, woordenboekbestand |
+
+## Tekststijlen
+
+| Token | Familie | Grootte | Gewicht | Spatiëring | Regelhoogte | Hoofdletters | Gebruik |
+|---|---|---|---|---|---|---|---|
+| `type.label` | chrome | 10 pt | 500 | 0.09 em | 12 pt | ja | Zeefdruk-label |
+| `type.labelSmall` | chrome | 9 pt | 500 | 0.1 em | 11 pt | ja | Schaalmarkeringen en eenheden |
+| `type.control` | chrome | 11 pt | 500 | 0.06 em | 14 pt | ja | Opschrift op toetsen |
+| `type.heading` | chrome | 12 pt | 500 | 0.12 em | 16 pt | ja | Paneelkop |
+| `type.body` | text | 13 pt | 400 | 0 em | 18 pt | nee | Standaardtekst |
+| `type.reading` | text | 15 pt | 400 | 0 em | 22 pt | nee | Transcript |
+| `type.meta` | text | 11 pt | 400 | 0 em | 14 pt | nee | Bijschriften |
+| `type.counter` | mono | 22 pt | 500 | 0 em | 26 pt | nee | Teller |
+| `type.counterSmall` | mono | 12 pt | 500 | 0 em | 16 pt | nee | Tijdstip in een rij |
+| `type.code` | mono | 12 pt | 400 | 0 em | 18 pt | nee | Woordenboekregels |
+
+## Segmentcijfers (getekend, geen lettertype)
+
+| Token | Waarde | Gebruik |
+|---|---|---|
+| `segment.digitHeight` | 36 | Hoogte van een getekend segmentcijfer |
+| `segment.digitWidth` | 20 | Breedte van een segmentcijfer |
+| `segment.thickness` | 4 | Dikte van één segment |
+| `segment.gap` | 1 | Ruimte tussen segmenten |
+| `segment.slant` | 0 | Schuinte in graden; 0 = rechtop |
+
+## Ruimte
+
+| Token | Waarde |
+|---|---|
+| `space.0` | 0 pt |
+| `space.1` | 2 pt |
+| `space.2` | 4 pt |
+| `space.3` | 8 pt |
+| `space.4` | 12 pt |
+| `space.5` | 16 pt |
+| `space.6` | 24 pt |
+| `space.7` | 32 pt |
+| `space.8` | 48 pt |
+
+## Indeling
+
+| Token | Waarde | Gebruik |
+|---|---|---|
+| `layout.window.minWidth` | 800 | Minimale vensterbreedte |
+| `layout.window.minHeight` | 560 | Minimale vensterhoogte |
+| `layout.window.defaultWidth` | 1080 | Standaard vensterbreedte |
+| `layout.window.defaultHeight` | 700 | Standaard vensterhoogte |
+| `layout.sidebar.width` | 232 | Breedte zijbalk |
+| `layout.settings.width` | 560 | Breedte instellingenvenster |
+| `layout.panel.padding` | 16 | Binnenmarge van een paneel (= space.5) |
+| `layout.panel.gap` | 12 | Afstand tussen panelen (= space.4) |
+
+## Afmetingen
+
+| Token | Waarde | Gebruik |
+|---|---|---|
+| `size.control.height` | 28 | Standaardhoogte van toets of veld |
+| `size.key.minWidth` | 56 | Minimale breedte van een toets |
+| `size.key.recWidth` | 64 | REC-toets, breedte |
+| `size.key.recHeight` | 44 | REC-toets, hoogte |
+| `size.lamp.diameter` | 10 | Standaard lampje |
+| `size.lamp.large` | 14 | Opnamelampje |
+| `size.switch.width` | 40 | Tuimelschakelaar, breedte |
+| `size.switch.height` | 22 | Tuimelschakelaar, hoogte |
+| `size.row.height` | 40 | Rij in transcriptielijst |
+| `size.icon.small` | 16 | Klein pictogram |
+| `size.icon.medium` | 20 | Normaal pictogram |
+| `size.hit.min` | 24 | Minimaal klikdoel |
+
+## Hoekradius
+
+| Token | Waarde | Gebruik |
+|---|---|---|
+| `radius.none` | 0 | Panelen en velden: scherpe randen |
+| `radius.sharp` | 1 | Toetsranden: bijna scherp |
+| `radius.sm` | 2 | Toetsen, velden |
+| `radius.md` | 4 | Grote panelen |
+| `radius.bezel` | 6 | Rand van de VU-meter |
+| `radius.lamp` | 999 | Lampjes: rond |
+
+## Randen
+
+| Token | Waarde | Gebruik |
+|---|---|---|
+| `border.hairline` | 1 pt | Fijne lijn |
+| `border.seam` | 2 pt | Naad: 1 donkere lijn boven, 1 lichte lijn eronder, leest als gegraveerde groef |
+| `border.bezel` | 3 pt | Rand om de VU-meter |
+| `border.focus` | 2 pt | Focusring, 2 pt offset |
+
+## Schaduw en diepte
+
+### `shadow.key.raised`
+
+Toets in rust: lichtvang boven, donkere onderrand, valschaduw
+
+| Laag | Inset | x | y | blur | spread | kleur | alpha aluminium | alpha graphite |
+|---|---|---|---|---|---|---|---|---|
+| 1 | ja | 0 | 1 | 0 | 0 | `#FFFFFF` | 0.65 | 0.1 |
+| 2 | ja | 0 | -1 | 0 | 0 | `#000000` | 0.25 | 0.55 |
+| 3 | nee | 0 | 2 | 2 | 0 | `#000000` | 0.35 | 0.6 |
+
+### `shadow.key.pressed`
+
+Ingedrukte toets: dop 1 pt omlaag, geen valschaduw Dop verschuift 1 pt omlaag.
+
+| Laag | Inset | x | y | blur | spread | kleur | alpha aluminium | alpha graphite |
+|---|---|---|---|---|---|---|---|---|
+| 1 | ja | 0 | 2 | 4 | 0 | `#000000` | 0.5 | 0.7 |
+| 2 | ja | 0 | 0 | 0 | 1 | `#000000` | 0.35 | 0.6 |
+
+### `shadow.well`
+
+Verzonken vlak met lichtvang op de onderlip
+
+| Laag | Inset | x | y | blur | spread | kleur | alpha aluminium | alpha graphite |
+|---|---|---|---|---|---|---|---|---|
+| 1 | ja | 0 | 1 | 3 | 0 | `#000000` | 0.4 | 0.7 |
+| 2 | nee | 0 | 1 | 0 | 0 | `#FFFFFF` | 0.55 | 0.07 |
+
+### `shadow.panel`
+
+Frontplaat boven het chassis
+
+| Laag | Inset | x | y | blur | spread | kleur | alpha aluminium | alpha graphite |
+|---|---|---|---|---|---|---|---|---|
+| 1 | ja | 0 | 1 | 0 | 0 | `#FFFFFF` | 0.6 | 0.08 |
+| 2 | nee | 0 | 3 | 8 | 0 | `#000000` | 0.22 | 0.55 |
+
+### `shadow.lamp.on`
+
+Brandend lampje: kleine gloed, alleen voor lampjes en nooit voor tekst
+
+| Laag | Inset | x | y | blur | spread | kleur | alpha aluminium | alpha graphite |
+|---|---|---|---|---|---|---|---|---|
+| 1 | nee | 0 | 0 | 6 | 1 | `#CC2A20` | 0.45 | 0.55 |
+| 2 | ja | 0 | -1 | 1 | 0 | `#000000` | 0.35 | 0.45 |
+
+## Textuur
+
+**`texture.brushed`** — Geborsteld aluminium voor chassis en zijbalk. Richting horizontaal; korrel 0.035 (aluminium) / 0.05 (graphite); surface.metalHigh naar surface.metalLow, van boven naar beneden.
+
+## Meters
+
+| Token | Waarde | Gebruik |
+|---|---|---|
+| `meter.vu.referenceDbfs` | -20 | 0 VU = -20 dBFS (RMS) |
+| `meter.vu.min` | -20 | Onderkant van de schaal in VU |
+| `meter.vu.max` | 3 | Bovenkant van de schaal in VU; vanaf 0 VU rood |
+| `meter.vu.arcDegrees` | 90 | Hoek tussen minimale en maximale stand |
+| `meter.vu.width` | 260 | Breedte van de meter |
+| `meter.vu.height` | 150 | Hoogte van de meter |
+| `meter.vu.needleWidth` | 1.5 | Dikte van de wijzer |
+| `meter.vu.ticks` | -20 -10 -7 -5 -3 0 +3 | Genummerde schaalmarkeringen |
+| `meter.led.segments` | 12 | Aantal segmenten: 8 groen, 3 amber, 1 rood |
+| `meter.led.segmentSize` | 6x14 | Segment in pt (breedte x hoogte) |
+| `meter.led.gap` | 2 | Ruimte tussen segmenten |
+| `meter.peak.holdMs` | 1000 | Piek-LED blijft zo lang branden |
+
+## Beweging
+
+| Token | Waarde | Eenheid | Gebruik |
+|---|---|---|---|
+| `motion.duration.instant` | 0 | ms | Geen overgang |
+| `motion.duration.fast` | 60 | ms | Toets in/uit |
+| `motion.duration.base` | 120 | ms | Standaardovergang |
+| `motion.duration.slow` | 220 | ms | Paneel of venster |
+| `motion.easing.mechanical` | cubic-bezier(0.2, 0, 0, 1) |  | Toetsen: direct, zonder veer |
+| `motion.easing.standard` | cubic-bezier(0.4, 0, 0.2, 1) |  | Overige overgangen |
+| `motion.key.press` | 50 | ms | Toets indrukken |
+| `motion.key.release` | 90 | ms | Toets loslaten |
+| `motion.lamp.on` | 30 | ms | Lampje aan |
+| `motion.lamp.off` | 200 | ms | Lampje uit: dooft langzaam, als een gloeidraad |
+| `motion.needle.response` | 0.3 | s | VU-ballistiek: 300 ms om de stand te bereiken |
+| `motion.needle.damping` | 0.8 | ratio | Veerdemping; geeft ongeveer 1,5 % overschot |
+| `motion.needle.updateHz` | 60 | Hz | Verversing van de wijzer |
+| `motion.reducedMotion` | Overgangen 0 ms; wijzer blijft bewegen maar met demping 1.0 (geen overschot) |  | Systeeminstelling 'Verminder beweging' |
+
+## Wat bewust ontbreekt
+
+Geen neon, vaporwave, synthwave, paars-roze verlopen, gloeiende tekst, chromen letters of rasterhorizonten. Lampjes mogen een kleine gloed hebben (`shadow.lamp.on`); tekst nooit.