Design system
Live componenten en tokens. Alle stijlen op deze pagina komen rechtstreeks
uit tokens.css — gegenereerd uit DTCG-tokens. Wijzig de tokens-bron
en deze pagina toont automatisch het nieuwe resultaat na de volgende build.
Kleur
Primair palet
color.federal-blue.50
#EBF2FA
vs wit · 1.13:1 · fail
color.federal-blue.100
#D9E8F7
vs wit · 1.25:1 · fail
color.federal-blue.200
#B0CCEB
vs wit · 1.66:1 · fail
color.federal-blue.300
#739ED4
vs wit · 2.77:1 · fail
color.federal-blue.400
#3669B0
vs wit · 5.52:1 · AA
color.federal-blue.500
#0F458F
vs wit · 9.26:1 · AAA
color.federal-blue.600
#0A3878
vs wit · 11.35:1 · AAA
color.federal-blue.700
#052B5E
vs wit · 13.87:1 · AAA
color.federal-blue.800
#031F45
vs wit · 16.33:1 · AAA
color.federal-blue.900
#03122E
vs wit · 18.59:1 · AAA
Semantische rollen
color.feedback.success-500
#1A8C52
color.feedback.warning-500
#DB9C12
color.feedback.error-500
#C70F2E
color.feedback.info-500
#0F458F
color.feedback.success
#1A8C52
color.feedback.warning
#DB9C12
color.feedback.error
#C70F2E
color.feedback.info
#0F458F
color.background.default
#FFFFFF
color.background.subtle
#FAFAF7
color.background.muted
#F5F5F2
color.background.inverted
#121212
color.background.brand
#0F458F
color.background.brand-strong
#052B5E
color.text.default
#121212
color.text.muted
#575752
color.text.subtle
#75756E
color.text.inverted
#FFFFFF
color.text.brand
#052B5E
color.text.link
#0A3878
color.text.link-visited
#031F45
Typografie
typography.display
Een coherente federale identiteit voor de overheidscommunicatie
typography.heading-1
Een coherente federale identiteit voor de overheidscommunicatie
typography.heading-2
Een coherente federale identiteit voor de overheidscommunicatie
typography.heading-3
Een coherente federale identiteit voor de overheidscommunicatie
typography.heading-4
Een coherente federale identiteit voor de overheidscommunicatie
typography.body
Een coherente federale identiteit voor de overheidscommunicatie
typography.body-sm
Een coherente federale identiteit voor de overheidscommunicatie
typography.caption
Een coherente federale identiteit voor de overheidscommunicatie
typography.eyebrow
Een coherente federale identiteit voor de overheidscommunicatie
Componenten
Knoppen
Invoervelden
Niveaus / tags
Merkambassadeur
Flexibele integratie
Affiliatiekit
Feedback / alerts
Info. Een wijziging aan de federale core wordt automatisch gepubliceerd na merge.
WCAG-check geslaagd. Alle gewijzigde tokens voldoen aan minimum AA.
Let op. Een uitzondering moet halfjaarlijks heroverwogen worden.
Geblokkeerd. Contrast 3.2:1 — onder AA-drempel. Kies een donkerdere variant.
Token-explorer
Volledige flat-tabel van alle gegenereerde CSS-variabelen (120 tokens). Gebruik dit als referentie of als zoektabel voor je eigen styling.
Toon alle 120 tokens
| Naam | Type | Waarde |
|---|---|---|
--color-federal-blue-50 |
color | #EBF2FA |
--color-federal-blue-100 |
color | #D9E8F7 |
--color-federal-blue-200 |
color | #B0CCEB |
--color-federal-blue-300 |
color | #739ED4 |
--color-federal-blue-400 |
color | #3669B0 |
--color-federal-blue-500 |
color | #0F458F |
--color-federal-blue-600 |
color | #0A3878 |
--color-federal-blue-700 |
color | #052B5E |
--color-federal-blue-800 |
color | #031F45 |
--color-federal-blue-900 |
color | #03122E |
--color-tricolor-yellow |
color | #FCD117 |
--color-tricolor-red |
color | #C70F2E |
--color-tricolor-black |
color | #1A1A1A |
--color-neutral-0 |
color | #FFFFFF |
--color-neutral-50 |
color | #FAFAF7 |
--color-neutral-100 |
color | #F5F5F2 |
--color-neutral-200 |
color | #E8E8E3 |
--color-neutral-300 |
color | #D4D4CC |
--color-neutral-400 |
color | #A3A39C |
--color-neutral-500 |
color | #75756E |
--color-neutral-600 |
color | #575752 |
--color-neutral-700 |
color | #3D3D38 |
--color-neutral-800 |
color | #242421 |
--color-neutral-900 |
color | #121212 |
--color-feedback-success-500 |
color | #1A8C52 |
--color-feedback-warning-500 |
color | #DB9C12 |
--color-feedback-error-500 |
color | #C70F2E |
--color-feedback-info-500 |
color | #0F458F |
--color-feedback-success |
color | #1A8C52 |
--color-feedback-warning |
color | #DB9C12 |
--color-feedback-error |
color | #C70F2E |
--color-feedback-info |
color | #0F458F |
--color-background-default |
color | #FFFFFF |
--color-background-subtle |
color | #FAFAF7 |
--color-background-muted |
color | #F5F5F2 |
--color-background-inverted |
color | #121212 |
--color-background-brand |
color | #0F458F |
--color-background-brand-strong |
color | #052B5E |
--color-text-default |
color | #121212 |
--color-text-muted |
color | #575752 |
--color-text-subtle |
color | #75756E |
--color-text-inverted |
color | #FFFFFF |
--color-text-brand |
color | #052B5E |
--color-text-link |
color | #0A3878 |
--color-text-link-visited |
color | #031F45 |
--color-border-default |
color | #E8E8E3 |
--color-border-strong |
color | #A3A39C |
--color-border-brand |
color | #0F458F |
--color-border-focus |
color | #0A3878 |
--color-accent-yellow |
color | #FCD117 |
--color-accent-red |
color | #C70F2E |
--color-accent-black |
color | #1A1A1A |
--spacing-0 |
dimension | 0rem |
--spacing-50 |
dimension | 0.25rem |
--spacing-100 |
dimension | 0.5rem |
--spacing-150 |
dimension | 0.75rem |
--spacing-200 |
dimension | 1.0rem |
--spacing-300 |
dimension | 1.5rem |
--spacing-400 |
dimension | 2.0rem |
--spacing-500 |
dimension | 3.0rem |
--spacing-600 |
dimension | 4.0rem |
--spacing-700 |
dimension | 6.0rem |
--spacing-800 |
dimension | 8.0rem |
--radius-none |
dimension | 0rem |
--radius-sm |
dimension | 0.125rem |
--radius-md |
dimension | 0.25rem |
--radius-lg |
dimension | 0.5rem |
--radius-full |
dimension | 9999px |
--border-width-thin |
dimension | 1px |
--border-width-thick |
dimension | 2px |
--border-width-heavy |
dimension | 4px |
--font-family-primary |
fontFamily | Inter, "system-ui", "-apple-system", "Segoe UI", Roboto, "sans-serif" |
--font-family-serif |
fontFamily | "IBM Plex Serif", Georgia, serif |
--font-family-mono |
fontFamily | "IBM Plex Mono", Menlo, monospace |
--font-family-arabic |
fontFamily | "Noto Sans Arabic", "Geeza Pro", "sans-serif" |
--font-family-cjk |
fontFamily | "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans", "sans-serif" |
--font-weight-regular |
fontWeight | 400 |
--font-weight-medium |
fontWeight | 500 |
--font-weight-semibold |
fontWeight | 600 |
--font-weight-bold |
fontWeight | 700 |
--font-size-100 |
dimension | 0.75rem |
--font-size-200 |
dimension | 0.875rem |
--font-size-300 |
dimension | 1.0rem |
--font-size-400 |
dimension | 1.125rem |
--font-size-500 |
dimension | 1.25rem |
--font-size-600 |
dimension | 1.5rem |
--font-size-700 |
dimension | 1.875rem |
--font-size-800 |
dimension | 2.25rem |
--font-size-900 |
dimension | 3.0rem |
--font-size-display |
dimension | 4.0rem |
--font-line-height-tight |
number | 1.15 |
--font-line-height-snug |
number | 1.3 |
--font-line-height-normal |
number | 1.5 |
--font-line-height-relaxed |
number | 1.65 |
--button-primary-background |
color | #0F458F |
--button-primary-background-hover |
color | #052B5E |
--button-primary-text |
color | #FFFFFF |
--button-primary-border |
color | #0F458F |
--button-secondary-background |
color | #FFFFFF |
--button-secondary-background-hover |
color | #F5F5F2 |
--button-secondary-text |
color | #052B5E |
--button-secondary-border |
color | #0F458F |
--button-padding-y |
dimension | 0.75rem |
--button-padding-x |
dimension | 1.5rem |
--button-radius |
dimension | 0.25rem |
--button-font-weight |
fontWeight | 600 |
--office-font-heading-fallback |
fontFamily | "Aptos Display", Calibri, Arial |
--office-font-body-fallback |
fontFamily | Aptos, Calibri, Arial |
--office-page-letterhead-margin-top |
dimension | 4.5cm |
--office-page-letterhead-margin-bottom |
dimension | 2.5cm |
--office-page-letterhead-margin-left |
dimension | 2.0cm |
--office-page-letterhead-margin-right |
dimension | 2.0cm |
--print-color-federal-blue-cmyk |
color | #001F8F |
--print-color-federal-blue-pantone |
string | PMS 280 C |
--print-color-tricolor-yellow-cmyk |
color | #FFE600 |
--print-color-tricolor-yellow-pantone |
string | PMS 116 C |
--print-color-tricolor-red-cmyk |
color | #E60022 |
--print-color-tricolor-red-pantone |
string | PMS 186 C |
--print-bleed |
dimension | 3mm |
--print-safe-margin |
dimension | 5mm |