sst/docs/design/tokens.md

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.