Kernsysteem
Drie smaken van hetzelfde MD3-systeem
Deze ene statische site laat exact dezelfde componenten leven onder drie token-sets. Je ziet color roles, type scale, shape scale, elevation, state layers en motion tokens live terug.
Foundations
Kleur, type, shape, elevation en motion
Elke tegel gebruikt dezelfde structuur maar leest andere design tokens uit het actieve thema.
Color roles
Primary
Secondary
Tertiary
Surface
Type scale
Display
Headline
Body text is bewust rustig gehouden voor leesbaarheid op mobiel.
Shape scale
Elevation + state layers
Motion tokens
Speels veert, Corporate dempt, canoniek blijft leerboek-MD3.
Componenten
Buttons + cards
Morphing is zichtbaar op buttons en de globale FAB via CSS-first clip-path en radius-transities.
Alle vijf button-varianten
Zelfde content, andere nadruk en shape response.
Cards
Elevation, surface tint en radius reageren mee met het actieve thema.
Hero card
Elevated focus
Speels krijgt meer lift, Corporate houdt het vlakker.
Info card
Calme body
Body copy gebruikt een beperkte measure en rustige contrasten.
Outlined
Structurele kaart
Handig om state layers en borders naast elkaar te tonen.
Form controls
Text fields, chips en switches
De controls zijn echt interactief zodat states, focus en labels live zichtbaar blijven.
Text fields
Chips
Switches
Feedback
Dialog + snackbar
Twee klassieke MD3-feedbackmomenten, gekoppeld aan dezelfde tone of voice.
Dialog
Open de uitleg over de huidige themakeuze.
Snackbar
Gebruik deze voor korte bevestiging zonder de flow te blokkeren.
Rationale
Waarom deze keuzes zijn gemaakt
Dit paneel documenteert de gemaakte designbeslissingen per thema en per foundation.
Gebruik dit paneel als leeswijzer: eerst foundations, daarna thematische afwijkingen, en tenslotte de expliciete uitleglaag via de info-ballonnen.