218 lines
14 KiB
JSON
218 lines
14 KiB
JSON
{
|
|
"meta": {
|
|
"name": "Sst Design Tokens",
|
|
"version": "0.1.0-draft",
|
|
"status": "Ter goedkeuring — nog niet gebruikt door de app",
|
|
"concept": "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."
|
|
},
|
|
|
|
"color": {
|
|
"surface.chassis": { "light": "#CBC8C0", "dark": "#1C1B19", "use": "Venster-achtergrond; het 'huis' van het apparaat" },
|
|
"surface.metalHigh": { "light": "#E3E1DB", "dark": "#3B3A36", "use": "Geborsteld metaal, bovenkant van de verloop" },
|
|
"surface.metalLow": { "light": "#BDBAB2", "dark": "#262522", "use": "Geborsteld metaal, onderkant van de verloop" },
|
|
"surface.panel": { "light": "#E2DFD5", "dark": "#2B2A27", "use": "Frontplaat van mat plastic; zijbalk en bedieningspanelen" },
|
|
"surface.well": { "light": "#B4B1A8", "dark": "#131211", "use": "Verzonken vlak: invoervelden, display-vensters" },
|
|
"surface.paper": { "light": "#EEE9D9", "dark": "#232220", "use": "Cassette-label crème: lijsten met transcripties en woordenboek" },
|
|
"surface.keyHigh": { "light": "#E6E3DA", "dark": "#44433F", "use": "Toetsdop, bovenkant" },
|
|
"surface.keyLow": { "light": "#CBC8BF", "dark": "#33322F", "use": "Toetsdop, onderkant" },
|
|
"surface.keyPressed": { "light": "#BEBBB2", "dark": "#2A2927", "use": "Ingedrukte toets" },
|
|
"surface.meterFace": { "light": "#EFE6C8", "dark": "#D8CEA6", "use": "Wijzerplaat van de VU-meter (blijft crème in beide afwerkingen)" },
|
|
"surface.selection": { "light": "#D4CDB2", "dark": "#3A3828", "use": "Geselecteerde rij in een lijst" },
|
|
"surface.display": { "light": "#1B1A18", "dark": "#0E0D0C", "use": "Displayglas van de teller; donker in beide afwerkingen" },
|
|
"display.segmentUnlit": { "light": "#3A3320", "dark": "#2A2415", "use": "Gedoofd segment op het displayglas" },
|
|
|
|
"ink.primary": { "light": "#1E1D1B", "dark": "#ECE8DC", "use": "Hoofdtekst en wijzer" },
|
|
"ink.secondary": { "light": "#403D38", "dark": "#C4BFB2", "use": "Secundaire tekst" },
|
|
"ink.tertiary": { "light": "#4D4A44", "dark": "#ABA79B", "use": "Zeefdruk-labels en hulptekst" },
|
|
"ink.disabled": { "light": "#8F8B82", "dark": "#6B685F", "use": "Uitgeschakeld; nooit voor essentiële tekst" },
|
|
"ink.inverse": { "light": "#F4EFE3", "dark": "#F4EFE3", "use": "Tekst op rode of donkere vulling; crème in beide afwerkingen" },
|
|
"ink.onMeter": { "light": "#1E1D1B", "dark": "#1E1D1B", "use": "Schaal, cijfers en wijzer op de wijzerplaat; vast donker in beide afwerkingen" },
|
|
|
|
"accent.record": { "light": "#C8281E", "dark": "#CC2A20", "use": "ENIGE accent: opnamelampje, REC-toets, piek-LED. Nooit voor lopende tekst" },
|
|
"accent.recordUnlit": { "light": "#7A2E28", "dark": "#4A1F1B", "use": "Lampje uit" },
|
|
|
|
"level.green": { "light": "#5E9E48", "dark": "#6DB556", "use": "Niveau-segment, brandend" },
|
|
"level.amber": { "light": "#D9A023", "dark": "#E5B032", "use": "Niveau-segment, waarschuwing, gecorrigeerd woord" },
|
|
"level.greenUnlit": { "light": "#A8B79C", "dark": "#26331F", "use": "Groen segment, uit" },
|
|
"level.amberUnlit": { "light": "#CDBA8A", "dark": "#3D3418", "use": "Amber segment, uit" },
|
|
|
|
"line.seamDark": { "light": "#8C8981", "dark": "#0A0A09", "use": "Naad tussen panelen, donkere helft" },
|
|
"line.seamLight": { "light": "#F3F1EB", "dark": "#45433F", "use": "Naad tussen panelen, lichte helft" },
|
|
"line.hairline": { "light": "#A9A69D", "dark": "#3A3834", "use": "Fijne scheidingslijn, zeefdruk-kader" },
|
|
"line.focus": { "light": "#1E1D1B", "dark": "#ECE8DC", "use": "Toetsenbord-focus" }
|
|
},
|
|
|
|
"opacity": {
|
|
"mark": { "value": 0.30, "use": "Amber markering achter een gecorrigeerd woord" },
|
|
"disabled": { "value": 0.45, "use": "Uitgeschakelde bediening" },
|
|
"unlit": { "value": 1.00, "use": "Gedoofde lampjes gebruiken eigen 'unlit'-kleuren, geen transparantie" },
|
|
"pressedRecord": { "value": 0.85, "use": "Ingedrukte REC-toets: het rood dooft licht" },
|
|
"specularOn": { "value": 0.60, "use": "Lichtvlekje op een brandend lampje" },
|
|
"specularOff": { "value": 0.30, "use": "Lichtvlekje op een gedoofd lampje" },
|
|
"caption": { "value": 0.75, "use": "Kleine opschriften op de wijzerplaat" }
|
|
},
|
|
|
|
"font": {
|
|
"family.chrome": { "value": "Helvetica Neue", "fallback": "Helvetica, Arial", "use": "Zeefdruk, toetsen, koppen: neutrale grotesk" },
|
|
"family.text": { "value": "SF Pro Text", "fallback": "system-ui", "use": "Leesbare tekst: transcripties, woordenboek" },
|
|
"family.mono": { "value": "SF Mono", "fallback": "Menlo, monospace", "use": "Teller, tijden, woordenboekbestand" }
|
|
},
|
|
|
|
"type": {
|
|
"label": { "family": "chrome", "size": 10, "weight": 500, "tracking": 0.09, "line": 12, "caps": true, "use": "Zeefdruk-label" },
|
|
"labelSmall": { "family": "chrome", "size": 9, "weight": 500, "tracking": 0.10, "line": 11, "caps": true, "use": "Schaalmarkeringen en eenheden" },
|
|
"control": { "family": "chrome", "size": 11, "weight": 500, "tracking": 0.06, "line": 14, "caps": true, "use": "Opschrift op toetsen" },
|
|
"heading": { "family": "chrome", "size": 12, "weight": 500, "tracking": 0.12, "line": 16, "caps": true, "use": "Paneelkop" },
|
|
"body": { "family": "text", "size": 13, "weight": 400, "tracking": 0, "line": 18, "caps": false, "use": "Standaardtekst" },
|
|
"reading": { "family": "text", "size": 15, "weight": 400, "tracking": 0, "line": 22, "caps": false, "use": "Transcript" },
|
|
"meta": { "family": "text", "size": 11, "weight": 400, "tracking": 0, "line": 14, "caps": false, "use": "Bijschriften" },
|
|
"counter": { "family": "mono", "size": 22, "weight": 500, "tracking": 0, "line": 26, "caps": false, "tabular": true, "use": "Teller" },
|
|
"counterSmall": { "family": "mono", "size": 12, "weight": 500, "tracking": 0, "line": 16, "caps": false, "tabular": true, "use": "Tijdstip in een rij" },
|
|
"code": { "family": "mono", "size": 12, "weight": 400, "tracking": 0, "line": 18, "caps": false, "use": "Woordenboekregels" }
|
|
},
|
|
|
|
"segment": {
|
|
"digitHeight": { "value": 36, "use": "Hoogte van een getekend segmentcijfer" },
|
|
"digitWidth": { "value": 20, "use": "Breedte van een segmentcijfer" },
|
|
"thickness": { "value": 4, "use": "Dikte van één segment" },
|
|
"gap": { "value": 1, "use": "Ruimte tussen segmenten" },
|
|
"slant": { "value": 0, "use": "Schuinte in graden; 0 = rechtop" },
|
|
"advance": { "value": 26, "use": "Afstand van cijfer tot cijfer" },
|
|
"colonWidth": { "value": 10, "use": "Breedte van een dubbele punt of punt" }
|
|
},
|
|
|
|
"space": {
|
|
"0": 0, "1": 2, "2": 4, "3": 8, "4": 12, "5": 16, "6": 24, "7": 32, "8": 48
|
|
},
|
|
|
|
"layout": {
|
|
"window.minWidth": { "value": 800, "use": "Minimale vensterbreedte" },
|
|
"window.minHeight": { "value": 560, "use": "Minimale vensterhoogte" },
|
|
"window.defaultWidth": { "value": 1080, "use": "Standaard vensterbreedte" },
|
|
"window.defaultHeight":{ "value": 700, "use": "Standaard vensterhoogte" },
|
|
"sidebar.width": { "value": 232, "use": "Breedte zijbalk" },
|
|
"settings.width": { "value": 560, "use": "Breedte instellingenvenster" },
|
|
"panel.padding": { "value": 16, "use": "Binnenmarge van een paneel (= space.5)" },
|
|
"panel.gap": { "value": 12, "use": "Afstand tussen panelen (= space.4)" }
|
|
},
|
|
|
|
"size": {
|
|
"control.height": { "value": 28, "use": "Standaardhoogte van toets of veld" },
|
|
"key.minWidth": { "value": 56, "use": "Minimale breedte van een toets" },
|
|
"key.recWidth": { "value": 64, "use": "REC-toets, breedte" },
|
|
"key.recHeight": { "value": 44, "use": "REC-toets, hoogte" },
|
|
"lamp.diameter": { "value": 10, "use": "Standaard lampje" },
|
|
"lamp.large": { "value": 14, "use": "Opnamelampje" },
|
|
"switch.width": { "value": 40, "use": "Tuimelschakelaar, breedte" },
|
|
"switch.height": { "value": 22, "use": "Tuimelschakelaar, hoogte" },
|
|
"row.height": { "value": 40, "use": "Rij in transcriptielijst" },
|
|
"icon.small": { "value": 16, "use": "Klein pictogram" },
|
|
"icon.medium": { "value": 20, "use": "Normaal pictogram" },
|
|
"hit.min": { "value": 24, "use": "Minimaal klikdoel" }
|
|
},
|
|
|
|
"radius": {
|
|
"none": { "value": 0, "use": "Panelen en velden: scherpe randen" },
|
|
"sharp": { "value": 1, "use": "Toetsranden: bijna scherp" },
|
|
"sm": { "value": 2, "use": "Toetsen, velden" },
|
|
"md": { "value": 4, "use": "Grote panelen" },
|
|
"bezel": { "value": 6, "use": "Rand van de VU-meter" },
|
|
"lamp": { "value": 999, "use": "Lampjes: rond" }
|
|
},
|
|
|
|
"border": {
|
|
"hairline": { "value": 1, "use": "Fijne lijn" },
|
|
"seam": { "value": 2, "use": "Naad: 1 donkere lijn boven, 1 lichte lijn eronder, leest als gegraveerde groef" },
|
|
"bezel": { "value": 3, "use": "Rand om de VU-meter" },
|
|
"focus": { "value": 2, "use": "Focusring, 2 pt offset" }
|
|
},
|
|
|
|
"shadow": {
|
|
"key.raised": {
|
|
"use": "Toets in rust: lichtvang boven, donkere onderrand, valschaduw",
|
|
"layers": [
|
|
{ "inset": true, "x": 0, "y": 1, "blur": 0, "spread": 0, "color": "#FFFFFF", "alpha": { "light": 0.65, "dark": 0.10 } },
|
|
{ "inset": true, "x": 0, "y": -1, "blur": 0, "spread": 0, "color": "#000000", "alpha": { "light": 0.25, "dark": 0.55 } },
|
|
{ "inset": false, "x": 0, "y": 2, "blur": 2, "spread": 0, "color": "#000000", "alpha": { "light": 0.35, "dark": 0.60 } }
|
|
]
|
|
},
|
|
"key.pressed": {
|
|
"use": "Ingedrukte toets: dop 1 pt omlaag, geen valschaduw",
|
|
"layers": [
|
|
{ "inset": true, "x": 0, "y": 2, "blur": 4, "spread": 0, "color": "#000000", "alpha": { "light": 0.50, "dark": 0.70 } },
|
|
{ "inset": true, "x": 0, "y": 0, "blur": 0, "spread": 1, "color": "#000000", "alpha": { "light": 0.35, "dark": 0.60 } }
|
|
],
|
|
"translateY": 1
|
|
},
|
|
"well": {
|
|
"use": "Verzonken vlak met lichtvang op de onderlip",
|
|
"layers": [
|
|
{ "inset": true, "x": 0, "y": 1, "blur": 3, "spread": 0, "color": "#000000", "alpha": { "light": 0.40, "dark": 0.70 } },
|
|
{ "inset": false, "x": 0, "y": 1, "blur": 0, "spread": 0, "color": "#FFFFFF", "alpha": { "light": 0.55, "dark": 0.07 } }
|
|
]
|
|
},
|
|
"panel": {
|
|
"use": "Frontplaat boven het chassis",
|
|
"layers": [
|
|
{ "inset": true, "x": 0, "y": 1, "blur": 0, "spread": 0, "color": "#FFFFFF", "alpha": { "light": 0.60, "dark": 0.08 } },
|
|
{ "inset": false, "x": 0, "y": 3, "blur": 8, "spread": 0, "color": "#000000", "alpha": { "light": 0.22, "dark": 0.55 } }
|
|
]
|
|
},
|
|
"lamp.on": {
|
|
"use": "Brandend lampje: kleine gloed, alleen voor lampjes en nooit voor tekst",
|
|
"layers": [
|
|
{ "inset": false, "x": 0, "y": 0, "blur": 6, "spread": 1, "color": "#CC2A20", "alpha": { "light": 0.45, "dark": 0.55 } },
|
|
{ "inset": true, "x": 0, "y": -1, "blur": 1, "spread": 0, "color": "#000000", "alpha": { "light": 0.35, "dark": 0.45 } }
|
|
]
|
|
}
|
|
},
|
|
|
|
"texture": {
|
|
"brushed": {
|
|
"use": "Geborsteld aluminium voor chassis en zijbalk",
|
|
"direction": "horizontaal",
|
|
"grain": { "light": 0.035, "dark": 0.05 },
|
|
"gradient": "surface.metalHigh naar surface.metalLow, van boven naar beneden"
|
|
}
|
|
},
|
|
|
|
"meter": {
|
|
"vu.referenceDbfs": { "value": -20, "use": "0 VU = -20 dBFS (RMS)" },
|
|
"vu.min": { "value": -20, "use": "Onderkant van de schaal in VU" },
|
|
"vu.max": { "value": 3, "use": "Bovenkant van de schaal in VU; vanaf 0 VU rood" },
|
|
"vu.arcDegrees": { "value": 90, "use": "Hoek tussen minimale en maximale stand" },
|
|
"vu.width": { "value": 260, "use": "Breedte van de meter" },
|
|
"vu.height": { "value": 150, "use": "Hoogte van de meter" },
|
|
"vu.needleWidth": { "value": 1.5, "use": "Dikte van de wijzer" },
|
|
"vu.ticks": { "value": "-20 -10 -7 -5 -3 0 +3", "use": "Genummerde schaalmarkeringen" },
|
|
"vu.pivotOffset": { "value": 22, "use": "Draaipunt van de wijzer, onder de onderrand van de wijzerplaat" },
|
|
"vu.scaleRadius": { "value": 142, "use": "Straal van de schaalboog vanaf het draaipunt" },
|
|
"vu.needleLength": { "value": 146, "use": "Lengte van de wijzer" },
|
|
"vu.tickMajor": { "value": 11, "use": "Lengte van een genummerde streep" },
|
|
"vu.tickMinor": { "value": 6, "use": "Lengte van een gewone streep" },
|
|
"vu.labelInset": { "value": 24, "use": "Afstand van de schaalboog tot de cijfers" },
|
|
"vu.redBandWidth": { "value": 5, "use": "Dikte van de rode band vanaf 0 VU" },
|
|
"led.segments": { "value": 12, "use": "Aantal segmenten: 8 groen, 3 amber, 1 rood" },
|
|
"led.segmentSize": { "value": "6x14", "use": "Segment in pt (breedte x hoogte)" },
|
|
"led.gap": { "value": 2, "use": "Ruimte tussen segmenten" },
|
|
"peak.holdMs": { "value": 1000, "use": "Piek-LED blijft zo lang branden" }
|
|
},
|
|
|
|
"motion": {
|
|
"duration.instant": { "value": 0, "unit": "ms", "use": "Geen overgang" },
|
|
"duration.fast": { "value": 60, "unit": "ms", "use": "Toets in/uit" },
|
|
"duration.base": { "value": 120, "unit": "ms", "use": "Standaardovergang" },
|
|
"duration.slow": { "value": 220, "unit": "ms", "use": "Paneel of venster" },
|
|
"easing.mechanical":{ "value": "cubic-bezier(0.2, 0, 0, 1)", "use": "Toetsen: direct, zonder veer" },
|
|
"easing.standard": { "value": "cubic-bezier(0.4, 0, 0.2, 1)", "use": "Overige overgangen" },
|
|
"key.press": { "value": 50, "unit": "ms", "use": "Toets indrukken" },
|
|
"key.release": { "value": 90, "unit": "ms", "use": "Toets loslaten" },
|
|
"lamp.on": { "value": 30, "unit": "ms", "use": "Lampje aan" },
|
|
"lamp.off": { "value": 200, "unit": "ms", "use": "Lampje uit: dooft langzaam, als een gloeidraad" },
|
|
"needle.response": { "value": 0.30, "unit": "s", "use": "VU-ballistiek: 300 ms om de stand te bereiken" },
|
|
"needle.damping": { "value": 0.80, "unit": "ratio", "use": "Veerdemping; geeft ongeveer 1,5 % overschot" },
|
|
"needle.updateHz": { "value": 60, "unit": "Hz", "use": "Verversing van de wijzer" },
|
|
"reducedMotion": { "value": "Overgangen 0 ms; wijzer blijft bewegen maar met demping 1.0 (geen overschot)", "use": "Systeeminstelling 'Verminder beweging'" }
|
|
}
|
|
}
|