Alle kleuren, koppen en bouwstenen van het framework op één pagina. De vlakken lezen de Design Tokens van deze site, dus ze veranderen mee als je een token aanpast.
Hexwaarden, contrast en maten verschijnen alleen op de voorkant, niet in de editor. Wit is --bg-surface, donker is --text-strong. Gebruik in blokken altijd de rol-tokens uit deel 2, nooit het palet direct.
Palet · Tokens per rol · Combinaties · Typografie · Breedtes · Knoppen · Kaarten en meldingen · Formulier
Palet
De bouwstenen. Per site gevuld door het kleuradvies; in blokken kies je ze nooit direct.
Neutraal
--palette-white
--palette-gray-5
--palette-gray-10
--palette-gray-50
--palette-gray-60
--palette-gray-70
--palette-gray-90
Merk (primair accent)
--palette-brand
--palette-brand-hover
--palette-brand-text
--palette-brand-subtle
--palette-brand-medium
--palette-brand-light
Highlight (secundair accent)
--palette-highlight
--palette-highlight-text
--palette-highlight-subtle
--palette-highlight-medium
--palette-highlight-light
Actie (alles wat klikbaar is)
--palette-action
--palette-action-light
--palette-action-hover
Koopknop
--palette-yellow
--palette-yellow-hover
--palette-yellow-active
Fout
--palette-red
--palette-red-subtle
--palette-red-border
Waarschuwing
--palette-orange
--palette-orange-subtle
--palette-orange-border
Succes
--palette-green
--palette-green-subtle
--palette-green-border
Illustratie (alleen decoratief)
--illustration-1
--illustration-2
--illustration-3
--illustration-4
--illustration-5
Tokens per rol
Deze tokens kies je in de editor. Achter de pijl staat de paletkleur waar het token naar verwijst.
Tekst
--text-strong
→ --palette-gray-90
--text-body
→ --palette-gray-70
--text-subtle
→ --palette-gray-60
--text-brand
→ --palette-brand-text
--text-action
→ --palette-action
--text-action-hover
→ --palette-action-hover
--text-highlight
→ --palette-highlight-text
--text-error
→ --palette-red
--text-warning
→ --palette-orange
--text-success
→ --palette-green
--text-on-inverse
→ --palette-white
--text-on-status
→ --palette-white
--text-on-status-subtle
→ --palette-gray-90
--text-on-brand
→ --palette-gray-90
--text-on-highlight
→ --palette-white
--text-on-cta
→ --palette-gray-90
--text-on-field
→ --palette-gray-90
--text-on-field-subtle
→ --palette-gray-60
--text-on-disabled
→ --palette-gray-60
--text-on-inverse-subtle
→ --palette-gray-10
--text-on-inverse-brand
→ --palette-brand-medium
--text-on-inverse-action
→ --palette-white
Achtergrond
--bg-page
→ --palette-gray-5
--bg-surface
→ --palette-white
--bg-hover
= rgb(27 27 27 / 6%)
--bg-on-inverse
→ --palette-gray-70
--bg-on-inverse-hover
= rgb(255 255 255 / 12%)
--bg-inverse
→ --palette-gray-90
--bg-inverse-hover
→ --palette-gray-70
--bg-scrim
= rgb(27 27 27 / 65%)
--bg-mark
→ --palette-brand-light
--bg-brand
→ --palette-brand
--bg-brand-hover
→ --palette-brand-hover
--bg-brand-subtle
→ --palette-brand-subtle
--bg-brand-subtle-hover
→ --palette-brand-light
--bg-action-subtle-hover
→ --palette-action-light
--bg-decor
→ --palette-highlight-medium
--bg-highlight
→ --palette-highlight
--bg-highlight-subtle
→ --palette-highlight-subtle
--bg-highlight-decor
→ --palette-highlight-medium
--bg-highlight-section
→ --palette-highlight-light
--bg-cta
→ --palette-yellow
--bg-cta-hover
→ --palette-yellow-hover
--bg-cta-active
→ --palette-yellow-active
--bg-field
→ --palette-white
--bg-field-focus
= color-mix(in srgb, var(--palette-yellow) 12%, var(--palette-white))
--bg-field-checked
→ --palette-gray-90
--bg-disabled
→ --palette-gray-10
--bg-nav-current
→ --palette-gray-5
--bg-rating
→ --palette-yellow
--bg-error
→ --palette-red
--bg-error-subtle
→ --palette-red-subtle
--bg-warning
→ --palette-orange
--bg-warning-subtle
→ --palette-orange-subtle
--bg-success
→ --palette-green
--bg-success-subtle
→ --palette-green-subtle
Rand
--border-subtle
→ --palette-gray-10
--border-strong
→ --palette-gray-50
--border-focus
→ --palette-gray-90
--border-brand
→ --palette-brand-text
--border-action
→ --palette-action
--border-nav-current
→ --palette-gray-90
--border-brand-subtle
→ --palette-brand-light
--border-error
→ --palette-red
--border-warning
→ --palette-orange
--border-success
→ --palette-green
--border-error-subtle
→ --palette-red-border
--border-warning-subtle
→ --palette-orange-border
--border-success-subtle
→ --palette-green-border
--border-on-inverse-brand
→ --palette-brand-medium
--border-on-inverse-action
→ --palette-white
--border-on-inverse-focus
→ --palette-white
--border-field
→ --palette-gray-50
--border-field-hover
→ --palette-gray-70
--border-field-focus
→ --palette-gray-90
--border-field-checked
→ --palette-gray-90
--border-disabled
→ --palette-gray-10
--border-rating
→ --palette-gray-90
--border-cta
→ --palette-gray-50
--border-on-inverse-subtle
→ --palette-gray-70
Combinaties
De combinaties die het framework gebruikt, met hun contrast. Tekst vraagt minstens 4,5:1 (WCAG AA), randen en focusringen 3:1.
Neutraal
Koppen en nadruk
--text-strong op --bg-surface
Broodtekst
--text-body op --bg-surface
Bijschrift en small
--text-subtle op --bg-surface
Broodtekst op de pagina
--text-body op --bg-page
Bijschrift op de pagina
--text-subtle op --bg-page
Actie en accenten
Link, secundaire knop
--text-action op --bg-surface
Link op de pagina
--text-action op --bg-page
Link bij hover
--text-action-hover op --bg-surface
Secundaire knop bij hover
--text-action op --bg-action-subtle-hover
Merktekst (niet klikbaar)
--text-brand op --bg-surface
Merktekst op merkvlak
--text-brand op --bg-brand-subtle
Tekst op merkkleur
--text-on-brand op --bg-brand
Markering
--text-on-brand op --bg-mark
Highlight op vlak
--text-highlight op --bg-highlight-subtle
Tekst op highlight
--text-on-highlight op --bg-highlight
Koopknop
Koopknop
--text-on-cta op --bg-cta
Koopknop bij hover
--text-on-cta op --bg-cta-hover
Koopknop ingedrukt
--text-on-cta op --bg-cta-active
Status
Op foutvlak
--text-on-status op --bg-error
Foutmelding
--text-on-status-subtle op --bg-error-subtle
Fouttekst
--text-error op --bg-surface
Op waarschuwingsvlak
--text-on-status op --bg-warning
Waarschuwing
--text-on-status-subtle op --bg-warning-subtle
Waarschuwingstekst
--text-warning op --bg-surface
Op succesvlak
--text-on-status op --bg-success
Succesmelding
--text-on-status-subtle op --bg-success-subtle
Successtekst
--text-success op --bg-surface
Formulier
Ingevulde tekst
--text-on-field op --bg-field
Placeholder
--text-on-field-subtle op --bg-field
Veld met focus
--text-on-field op --bg-field-focus
Uitgeschakeld (geen eis)
--text-on-disabled op --bg-disabled
Donker (.gbc-inverse)
Tekst op donker
--text-on-inverse op --bg-inverse
Subtle op donker
--text-on-inverse-subtle op --bg-inverse
Merk op donker
--text-on-inverse-brand op --bg-inverse
Link op donker
--text-on-inverse-action op --bg-inverse
Kaart op donker
--text-on-inverse op --bg-on-inverse
Randen en focus (eis 3:1)
Veldrand
--border-field op --bg-surface
Veldrand op de pagina
--border-field op --bg-page
Veld met fout
--border-error op --bg-surface
Rand koopknop
--border-cta op --bg-page
Sterke rand
--border-strong op --bg-surface
Focusring
--border-focus op --bg-surface
Focusring op donker
--border-on-inverse-focus op --bg-inverse
Typografie
De tag bepaalt de structuur en de ruimte, de class het uiterlijk. Onder elke regel staan grootte, regelhoogte, gewicht en font zoals de browser ze nu berekent.
Display (p.gbc-heading–display)
Kop één (p.gbc-heading–h1)
Kop twee
Kop drie
Kop vier
Kop vijf
Kop zes
Lead. Een introductie die groter is dan de broodtekst, maar niet vetter of grijzer.
Broodtekst. Lang genoeg om de regellengte te beoordelen: in deze kolom passen ongeveer zestig tot vijfenzeventig tekens per regel. Met vette tekst, een link, een markering, inline code en kleine tekst.
Kapitalen (gbc-text–caps)
- Eerste punt van een lijst
- Tweede punt, dat zo lang is dat het op een smal scherm over meerdere regels loopt
- Derde punt
Breedtes
De balken zijn even breed als de maximale breedte; het getal is de breedte op dit scherm.
--width-prose Tekstkolom (.gbc-prose)
--width-wide Breed (.alignwide in .gbc-prose)
--width-container Container (.gbc-container)
Knoppen
Eén primaire knop per scherm. Secundair en tertiair gebruiken de actiekleur.
Op donker
In een sectie met .gbc-inverse wisselen de tokens vanzelf: tekst wordt licht en links worden wit.
Kleine tekst gebruikt –text-on-inverse-subtle.
Kaarten en meldingen
Kaart
Een gewone kaart (.gbc-card) met vlak, rand en padding uit de class.
Linkkaart
De hele kaart is klikbaar (.gbc-card–link). Bij hover kleurt de kop.
Er ging iets mis. Controleer de velden die rood zijn gemarkeerd.
Let op. Deze datum is bijna volgeboekt.
Gelukt. Je aanvraag is verstuurd.
Formulier
Velden blijven wit, ook op donker. Test de focus met Tab. Dit formulier heeft geen acties, dus versturen doet niets.
