Styleguide
Het visuele systeem van Edge to Edge.
Een overzicht van de kleuren, typografie en interactieve componenten zoals ze door de hele website worden ingezet.
Merkkleuren
Brand palette
De vier merkkleuren vormen de basis van iedere knop, link en beeldlaag.
#00232a
Brand Deep (secondary)
--brand-deep
oklch(0.27 0.04 200)
Donkere secties, footer, koppen
#0087be
Brand Blue (primary)
--brand-blue
oklch(0.62 0.13 230)
Knoppen, links, accenten
#005f8a
Brand Blue Dark (hover)
--brand-blue-dark
oklch(0.48 0.14 235)
Hover-staat van knoppen
#e6f1f8
Brand Blue Soft (accent)
--brand-blue-soft
oklch(0.95 0.03 230)
Subtiele blauwe achtergrondvlakken
Neutralen
Achtergronden & tekst
Neutrale tinten voor lagen, vlakken en typografie. Houd het contrast tussen ink en background hoog voor leesbaarheid.
#ffffff
Background
--background
oklch(1 0 0)
Hoofdachtergrond
#fcfcfd
Surface
--surface
oklch(0.99 0.003 230)
Subtiele paneelachtergrond
#f7f8fa
Surface Alt
--surface-alt
oklch(0.975 0.005 230)
Afwisselende secties
#00232a
Ink / Foreground
--ink
oklch(0.27 0.04 200)
Hoofdtekst
#5b6a73
Ink Soft
--ink-soft
oklch(0.45 0.02 220)
Subtekst, intro's
#e4e7ea
Hairline
--hairline
oklch(0.92 0.01 220)
Lijnen, kaders, scheidingen
Status
Feedbackkleuren
#dc2626
Destructive
--destructive
oklch(0.577 0.245 27.325)
Fouten, waarschuwingen
Typografie
Tekststijlen
eyebrow / label
.eyebrow
Display H1
text-5xl · font-semibold · text-secondary
Heading H2
text-3xl · font-semibold
Heading H3
text-lg · font-semibold
Lead paragraaf — gebruikt voor intro's en korte uitleg onder kopjes.
text-lg · text-ink-soft
Body tekst — standaard alinea-tekst voor inhoudblokken.
text-base · text-secondary
Small / muted tekst voor metadata en bijschriften.
text-sm · text-ink-soft
Link met accent
.link-accent
Componenten
Knoppen & states
Hover over de knoppen om de donkerblauwe hover-kleur te zien.
Formulieren
Inputs
Patronen