Design system
v1Bron: Figma-frames 1-35 en 8-167. Tokens leven in app/globals.css. Koppen in Clash Display, interface in Object Sans, één accentkleur: lime.
Kleur
--bg
#000000
podium (achtergrond)
#000000
podium (achtergrond)
--panel
#333333
dock, kaarten, gates
#333333
dock, kaarten, gates
--panel-line
#565656
randen op panelen
#565656
randen op panelen
--panel-deep
#262626
verdiepte vlakken
#262626
verdiepte vlakken
--lime
#B1FF00
hét accent — spaarzaam
#B1FF00
hét accent — spaarzaam
--ink
#FFFFFF
primaire tekst
#FFFFFF
primaire tekst
--ink-dim
rgba(255,255,255,.45)
datums, hints
rgba(255,255,255,.45)
datums, hints
--danger
#FF5C39
waarschuwingen, verwijderen
#FF5C39
waarschuwingen, verwijderen
Typografie
Clash Display Bold 27Regular 45%
Titels: Clash Display Bold, met metadata (datum) ernaast in Regular op 45% dekking — altijd op één regel.
Object Sans Regular 15 — interfacetekst, comments, formulieren.
Object Sans Bold 15 — knoplabels en nadruk.
Vorm
--r-video
20px
video, kaarten, edit-panel
20px
video, kaarten, edit-panel
--r-dock
30px
dock en gates
30px
dock en gates
--r-input
10px
invoervelden
10px
invoervelden
--r-pill
999px
knoppen, chips, rails
999px
knoppen, chips, rails
Knoppen
Regels: lime = primaire actie, maximaal één zwaartepunt per view. Secundair = transparant met rand. Hover: lift (−2 à −4px) met spring-easing cubic-bezier(0.34, 1.56, 0.64, 1).
Dock (reactie-paneel)
#333-paneel, radius 30, rand #565656. Emoji's in cirkels van 56 op #262626. Send-knop = brand/comment.svg.