# 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 |
| `opacity.pressedRecord` | 0.85 | Ingedrukte REC-toets: het rood dooft licht |
| `opacity.specularOn` | 0.6 | Lichtvlekje op een brandend lampje |
| `opacity.specularOff` | 0.3 | Lichtvlekje op een gedoofd lampje |
| `opacity.caption` | 0.75 | Kleine opschriften op de wijzerplaat |

## 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 |
| `segment.advance` | 26 | Afstand van cijfer tot cijfer |
| `segment.colonWidth` | 10 | Breedte van een dubbele punt of punt |

## 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.vu.pivotOffset` | 22 | Draaipunt van de wijzer, onder de onderrand van de wijzerplaat |
| `meter.vu.scaleRadius` | 142 | Straal van de schaalboog vanaf het draaipunt |
| `meter.vu.needleLength` | 146 | Lengte van de wijzer |
| `meter.vu.tickMajor` | 11 | Lengte van een genummerde streep |
| `meter.vu.tickMinor` | 6 | Lengte van een gewone streep |
| `meter.vu.labelInset` | 24 | Afstand van de schaalboog tot de cijfers |
| `meter.vu.redBandWidth` | 5 | Dikte van de rode band vanaf 0 VU |
| `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.