theo/sst
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
This commit is contained in:
theo
2026-10-01 11:53:33 +02:00
co-authored by Claude Sonnet 5.5
parent 65f9a93a19
commit 9c2b4e540f
5 changed files with 1386 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/design/tokens-preview.html
+380
View File
File diff suppressed because one or more lines are too long
docs/design/tokens.md
+283
View File
@@ -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.