Klantverhaal
Provincie Limburg digitaliseert mobiliteit
Hoe een grote overheidsorganisatie de overstap maakte van Excel naar CoreCubes, in 4 weken.
CoreCubes design system
Component reference
Levende referentie voor alle visuele bouwstenen van de CoreCubes-website. Niet geïndexeerd, niet zichtbaar voor bezoekers.
Kleur
colors
Brand
50
--color-brand-50
100
--color-brand-100
200
--color-brand-200
300
--color-brand-300
400
--color-brand-400
500
--color-brand-500
600
--color-brand-600
700
--color-brand-700
800
--color-brand-800
900
--color-brand-900
Ink (text)
50
--color-ink-50
100
--color-ink-100
200
--color-ink-200
300
--color-ink-300
400
--color-ink-400
500
--color-ink-500
600
--color-ink-600
700
--color-ink-700
800
--color-ink-800
900
--color-ink-900
Surface & Semantic
surface
--color-surface
surface-soft
--color-surface-soft
surface-muted
--color-surface-muted
surface-inset
--color-surface-inset
success
--color-success-500
warning
--color-warning-500
danger
--color-danger-500
info
--color-info-500
Typografie
typography
Display headline
.h-display
Heading 1, meeslepend en scherp
Heading 2, duidelijk gestructureerd
Heading 3, voor secties
Heading 4, voor subsecties
Lead paragraph: gebruik dit voor de eerste alinea van een sectie of voor introductietekst boven een hero.
Body tekst. Lato regular op 16px met een line-height van 1.55. Dit is de standaardwaarde voor alle bodytekst. Goede leesbaarheid op zowel desktop als mobiel.
Eyebrow label
Cards
cards
Soft variant
Een rustigere stijl
Gebruik card-soft voor secundaire content of grids met meerdere items.
Interactive
Volledig klikbare card
Hover effect: zachte schaduw, lichte upward shift. Ideaal voor blog grids.
Badges
badges
Default
Primary
Success
Warning
Danger
Info
Formulieren
forms
Hero
hero
CTA banner
cta
Shadows & Radii
shadows
Shadow
--shadow-xs
Shadow
--shadow-sm
Shadow
--shadow-md
Shadow
--shadow-lg
Shadow
--shadow-xl