Design Operating System

Ons designsysteem

De visuele basis die al onze projecten consistent maakt. Tokens, paletten, typografie, witruimte — open en gedocumenteerd.

Kleurenpalet

Primary — Terracotta

--primary: 16 71% 42%

DÉ actiekleur: CTA's, links. 5,3:1 op wit

Accent — Navy

--accent: 214 52% 25%

Koppen, structuur. 11,3:1 op wit

Diep navy

--navy-deep: 213 56% 17%

Achtergronden van banners en footer

Helder goud

--gold-bright: 41 88% 62%

Cijfers uitsluitend op navy achtergronden

Tekst

--foreground: 215 28% 17%

Lopende tekst. 14,7:1 op wit

Secundaire tekst

--muted-foreground: 215 14% 40%

Notities, bijschriften. 6,0:1 op wit

Roze

--rose: 14 62% 40%

Uitgebreid palet, afgestemd op het kleurbereik

Violet

--violet: 214 52% 32%

Uitgebreid palet, afgestemd op het kleurbereik

Cyaan

--cyan: 205 48% 33%

Uitgebreid palet, afgestemd op het kleurbereik

Goud

--gold: 40 90% 30%

Reviews, onderscheidingen. ≥ 4,5:1 op wit

Indigo

--indigo: 213 56% 25%

Uitgebreid palet, afgestemd op het kleurbereik

Destructive

--destructive: 0 72% 42%

Fouten, verwijderen

Typografie

Display — Outfit Variable

Typografische elegantie uit Lyon

Koppen, CTA's, accenten. 100–900.

Body — Plus Jakarta Sans Variable

Optimale leesbaarheid voor lange alinea's, met een verzorgd redactioneel ritme.

Lopende tekst, navigatie, labels. 200–800.

Element	Grootte (fluïde)	Regelhoogte	Gebruik
`h1`	clamp(2.125rem, 1.35rem + 3.3vw, 4.25rem)	1.06	Paginatitel, eerste scherm
`h2`	clamp(1.625rem, 1.2rem + 1.8vw, 2.75rem)	1.14	Sectietitel
`h3`	clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem)	1.25	Subtitel, kaart
`h4`	1.125rem	1.35	Tussenkop
`h5, h6`	1rem	1.4	Kleinere koppen
`body`	1rem	1.65	Lopende tekst (Plus Jakarta Sans)
`text-sm`	0.875rem	1.25rem	Secundaire tekst, notities
`text-xs`	0.75rem	1rem	Meta, badges, bijschriften

Witruimte (Tailwind-schaal)

0.52px

14px

28px

312px

416px

624px

832px

1248px

1664px

2496px

Schaduwen

shadow-e1

Nauwelijks zichtbare lijn — velden, chips

shadow-e2

Kaarten in rust

shadow-e3

Kaarten bij hover, zwevende knoppen

shadow-e4

Dialogen, panelen

Eigen CSS-utilities

.glass

Witte kaart, dunne lijn, zachte schaduw — kaarten, velden

.glass-strong

Zelfde vlak, sterkere schaduw — dialogen, headers

.glass-premium

Uitgelicht vlak — eerste scherm, portfolio

.surface-sunken

Afwisselende koelgrijze sectie, randen vervaagd over 40 px

.section-y

Verticaal sectieritme (--section-y)

.measure

Regellengte begrensd op 68 tekens

.text-gradient-warm

Terracotta vlak op een woord in de titel

.text-gradient-cool

Navy vlak op een woord in de titel

.cta-gradient

Terracotta vlak + label in --primary-foreground

.section-divider

Lijn van 1 px, aan beide uiteinden vervaagd

.card-img-frame

Afbeeldingskader 16/10, nul CLS, zoom bij hover

.spot-card

Gloed en rand die de cursor volgen

.btn-glow-fill

Gevulde knop: glans + terracotta halo bij hover

.btn-glow-ring

Omlijnde knop: oplichtende rand bij hover

.link-grow

Onderstreping die vanaf links uitrekt

.skip-link

Skiplink, zichtbaar bij focus

Voorbeeld van componenten

Knoppen

Badges

PrimarySuccessWarningError

Kleurverlopen

Kayzen Premium

Moderne engineering

Glass Strong

Voorbeeldkaart met de klasse .glass-strong.

Een herbruikbaar designsysteem

Uw projecten profiteren van dit beproefde designsysteem. Visuele consistentie, toegankelijkheid en performance zijn vanaf de basis gegarandeerd.

Bekijk de techstack Wijzigingslogboek Start een project