Ruimtemeesters Holding · Design System
Ruimtemeesters
Kleine acties. Grote impact.
Identity
Logo & gebruik
Het logo schaalt proportioneel en wordt nooit uitgerekt. Gebruik altijd voldoende witruimte. Hieronder de aanbevolen weergave op lichte en donkere ondergrond.
Op licht
Op donker
Asset-notitie
No reversed/white logo asset exists. Use the Klein Blue mark on light surfaces; for dark surfaces place it on a light plate or request a white variant.
Foundations
Kleurpalet
Volledige tonale ramps (50–950) gegenereerd uit de goedgekeurde merkkleuren. De exacte merkkleur blijft altijd behouden in de ramp.
Semantische tokens
Rolgebaseerde kleuren die automatisch wisselen tussen licht en donker. Tekstcontrast is live berekend (WCAG 2.1).
Data-visualisatie
Categorische reeks voor grafieken en servicecategorieën — opgebouwd uit het goedgekeurde palet.
Bar chart
Donut
Foundations
Elevatie & oppervlakken
In light mode komt diepte uit schaduw; in dark mode uit oplichtende oppervlakken (schaduw is daar onzichtbaar).
Foundations
Typografie
Kop: Jost — Futura substitute (Futura is licensed; Jost is the closest free geometric). Serif/accent: Abhaya Libre. Mono voor code & data.
Foundations
Tokens & scales
Spacing
Radius
Shadow
Motion & easing
| --duration-fast | 120ms · micro-interacties |
| --duration-normal | 200ms · standaard |
| --duration-slow | 320ms · overlays |
| --ease-emphasized | entree van panelen |
| --z-modal | 1400 |
| --z-toast | 1600 |
Components
Forms
Components
Feedback
Ter info
Nieuwe versie van het sjabloon beschikbaar.
Gelukt
Het project is opgeslagen.
Let op
Controleer de gemeentegrenzen.
Fout
Opslaan is mislukt. Probeer opnieuw.
Badges & tags
Tooltip · progress · spinner · skeleton
Components
Overlays
Modal
Project verwijderen?
Drawer
Filters
Dropdown menu
Accordion
Wat is een BOPA?
Hoe lang duurt een procedure?
Welke documenten zijn nodig?
Components
Data display
Timeline
Avatar group · kbd · code
npm run build
Accessibility
Contrast & conflictoplossing
Elke *-foreground wordt automatisch gekozen (wit of bijna-zwart) op basis van het hoogste WCAG-contrast met zijn achtergrond. Live berekend voor het actieve thema — wissel naar dark mode om de waarden te zien aanpassen.
| Rol | Achtergrond | Tekst | Ratio | WCAG |
|---|