Ruimtemeesters Holding · Design System

Ruimtemeesters

Kleine acties. Grote impact.

Klein Blue · #002EA3 Pumpkin Orange · #F37021

Deze pagina toont het merkpakket: palet, rollen, typografie en schaal. Componenten staan bij het product dat ze gebruikt, niet hier (kit-indeling, 1 oktober 2026).

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

Klein Blue mark on light surfaces; the Smart White reversed mark on dark surfaces. Raisin Black and icon-only variants are also available in ruimtemeesters/logos/.

Kleur

Palet

De merkkleuren uit het merkhandboek en hun stappen van 10%, als dekkende kleur over de achtergrond. Eén rij per kleurfamilie, de stappen van 10 tot 100 naast elkaar. Een stap die niet duidelijk verschilt (CIEDE2000 < 5) blijft een leeg vak, zodat dezelfde stap van elke familie onder elkaar staat. Per stap: de toon (0 zwart, 100 wit) en het contrast van de best leesbare tekst erop.

Smart White

100%#F7F4EFtoon 96 · 15,1:1

Klein Blue

10%#DEE0E7toon 89 · 12,56:1

20%#C6CCE0toon 82 · 10,35:1

30%#ADB9D8toon 75 · 8,45:1

40%#94A5D1toon 68 · 6,76:1

50%#7C91C9toon 61 · 5,33:1

60%#637DC1toon 53 · 4,13:1

70%#4A69BAtoon 46 · 5,22:1

80%#3156B2toon 39 · 6,76:1

90%#1942ABtoon 32 · 8,72:1

100%#002EA3toon 26 · 10,94:1

Pumpkin Orange

10%#F7E7DAtoon 93 · 13,73:1

20%#F6DAC6toon 89 · 12,44:1

40%#F5BF9Dtoon 81 · 10,12:1

60%#F5A573toon 75 · 8,29:1

80%#F48A4Atoon 68 · 6,77:1

100%#F37021toon 62 · 5,64:1

Violet

10%#EBDCF1toon 89 · 12,66:1

20%#DFC3F2toon 82 · 10,44:1

30%#D3ABF4toon 76 · 8,6:1

40%#C792F5toon 69 · 6,99:1

50%#BB7AF7toon 63 · 5,71:1

60%#AF62F9toon 57 · 4,69:1

80%#9731FCtoon 47 · 5,05:1

100%#7F00FFtoon 41 · 6,28:1

Lion

40%#D3C9B4toon 81 · 10,09:1

60%#C0B397toon 73 · 8:1

80%#AE9E79toon 66 · 6,29:1

100%#9C885Ctoon 58 · 4,81:1

Mystified

60%#D8E3D3toon 89 · 12,51:1

100%#C3D7C1toon 84 · 10,9:1

Raisin Black

20%#CBC9C6toon 81 · 10,03:1

30%#B5B4B1toon 73 · 7,99:1

40%#9F9F9Dtoon 65 · 6,25:1

50%#8A8A88toon 57 · 4,79:1

60%#747473toon 49 · 4,68:1

70%#5E5F5Ftoon 40 · 6,41:1

80%#484A4Atoon 31 · 8,92:1

90%#323436toon 22 · 12,5:1

100%#1C1F21toon 12 · 16,57:1

Kleur

Rollen

Wat een scherm gebruikt. Elke rol wijst naar een goedgekeurde kleur en heeft een vaste contrasteis, die bij elke build wordt gecontroleerd. Lopende tekst haalt 4,5:1; grote tekst, randen van bedieningselementen en focus hebben doel 3,00:1 en ondergrens 2,5:1. In Tailwind 4: tailwind.css, klassen met voorvoegsel role- (text-role-muted).

Rol	Staal	Paletstap	Hex	Doel / ondergrens	Gemeten
Achtergrond
`background/page`	Aa	`smart-white`	`#F7F4EF`	geen eis
`background/subtle`	Aa	`klein-blue-10`	`#DEE0E7`	geen eis
`background/strong`	Aa	`klein-blue-100`	`#002EA3`	geen eis
`background/quiet`	Aa	`role-background-quiet`	`#E1DFDA`	geen eis
`background/surface`	Aa	`role-background-surface`	`#FFFFFF`	geen eis
Tekst
`text/default`	Aa	`raisin-black-100`	`#1C1F21`	4,50 / 4,50	15,1 op page · 12,56 op subtle · 12,44 op quiet · 16,57 op surface
`text/muted`	Aa	`raisin-black-70`	`#5E5F5F`	4,50 / 4,50	5,84 op page · 4,86 op subtle · 4,81 op quiet · 6,41 op surface
`text/link`	Aa	`klein-blue-100`	`#002EA3`	4,50 / 4,50	9,97 op page · 8,29 op subtle · 8,21 op quiet · 10,94 op surface
`text/on-strong`	Aa	`smart-white`	`#F7F4EF`	4,50 / 4,50	9,97 op strong
`text/accent`	Aa	`role-text-accent`	`#924314`	4,50 / 4,50	6,31 op page · 5,25 op subtle · 5,2 op quiet · 6,92 op surface
Rand
`border/decorative`		`raisin-black-20`	`#CBC9C6`	geen eis
`border/control`		`raisin-black-60`	`#747473`	3,00 / 2,50	4,26 op page · 3,55 op subtle · 3,51 op quiet · 4,68 op surface
Focus
`focus`		`klein-blue-100`	`#002EA3`	3,00 / 2,50	9,97 op page · 8,29 op subtle · 8,21 op quiet · 10,94 op surface
`focus/on-strong`		`smart-white`	`#F7F4EF`	3,00 / 2,50	9,97 op strong

Kleur

Status

Info, waarschuwing, fout en gelukt: elk een vlak, een tekst en een rand. Waar het merkhandboek geen kleur heeft, zijn het functionele uitbreidingen van het palet (--palette-status-*); de tekst haalt 4,5:1 op zijn eigen vlak en op de pagina. In Tailwind 4: bg-role-status-error-surface, text-role-status-error-text, border-role-status-error-border.

Soort	Vlak	Tekst	Rand	Voorbeeld
Info `status/info`	`#DEE0E7`	`#002EA3`	`#002EA3`	Info: voorbeeldmelding · 8,29:1
Waarschuwing `status/warning`	`#FFFBEB`	`#92400E`	`#92400E`	Waarschuwing: voorbeeldmelding · 6,84:1
Fout `status/error`	`#FEF2F2`	`#B91C1C`	`#B91C1C`	Fout: voorbeeldmelding · 5,91:1
Gelukt `status/success`	`#F0FDF4`	`#166534`	`#166534`	Gelukt: voorbeeldmelding · 6,81:1

Foundations

Typografie

Kop: Futura PT (Book) — the licensed brand face; League Spartan is the served stand-in. Serif/accent: Abhaya Libre. Mono voor code & data.

displayAa

h1Kleine acties, grote impact

h2Ruimtelijke ontwikkeling

h3Omgevingsrecht in de praktijk

serifVerfijnde display in serif

body-lgGrotere bodytekst voor intro's en leads.

bodyReguliere bodytekst zoals in de interface — helder, direct en toegankelijk.

captionSecundaire tekst en bijschriften.

overlineSectielabel

mononpm run build

Foundations

Tokens & scales

Spacing

Radius

2xl

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

Kleur

Datavisualisatie

Categorische reeks voor grafieken en servicecategorieën, opgebouwd uit het goedgekeurde palet.

Staafdiagram

Donut

Uitfaseren

Verouderd

Nog uitgeleverd, niet meer gebruiken. Alles hieronder verdwijnt in 1.0.0; de lijst met vervangers staat in deprecated.json.

Tonale ramps (verouderd sinds 0.3.0)

Gegenereerde tinten, geen goedgekeurde kleuren. Gebruik het palet en de rollen.

Oude semantische namen (verouderd sinds 0.6.0)

--primary, --muted-foreground en de rest van de oude set. Gebruik de rollen (--role-*).

theme.css en components.css (verouderd sinds 0.6.0)

De gedeelde componentklassen worden door geen product gebruikt. Componenten staan bij het product; importeer tokens.css of tailwind.css.