Kleuren Systeem

Een gelaagd kleur token systeem voor consistente en themable styling.

Kleurlagen

Het kleuren systeem bestaat uit drie lagen die samen een flexibel en onderhoudbaar geheel vormen:

1. Primitives

Ruwe kleurwaarden georganiseerd in schalen (50-950). Dit zijn de bouwstenen van het systeem.

Nooit direct gebruiken in componenten of applicatiecode.

Bekijk het kleurenpallet →

2. Semantics

Betekenisvolle tokens die verwijzen naar primitives. Dit is de publieke API van het kleuren systeem.

Altijd gebruiken voor alle styling in componenten.

Bekijk semantische kleuren →

3. Themes

Override mappings die semantische tokens naar andere primitives verwijzen per thema.

Maakt dark mode en brand theming mogelijk.

:root.theme-dark { --surface-canvas: #0a0a0a; }

Hoe het werkt

Primitiveneutral.0#ffffff
→
Semanticsurface.canvasverwijst naar neutral.0
→
CSS Output--surface-canvas#ffffff

In dark mode verwijst surface.canvas naar neutral.950 (#0a0a0a). Door semantische tokens te gebruiken past je UI zich automatisch aan het actieve thema aan.

Gebruik in SCSS

example.scss
@use "tokens" as *;

.my-element {
  color: $text-default;
  background: $surface-panel;
  border: 1px solid $border-subtle;
}

Alle SCSS variabelen verwijzen naar CSS custom properties, waardoor runtime theme switching mogelijk is.