Ruimtemeesters Holding · Design System

Prophys

Maakt morgen mee

Imperial Red · #FA383B Chocolate Cosmos · #61191B

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

Use Imperial Red on light surfaces, White Smoke variant on dark/low-contrast surfaces.

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.

White Smoke

100%#F5F5F5toon 97 · 17,56:1

Imperial Red

10%#F6E2E2toon 91 · 15,4:1

20%#F6CFD0toon 86 · 13,45:1

30%#F7BCBDtoon 82 · 11,74:1

40%#F7A9ABtoon 77 · 10,23:1

60%#F88485toon 68 · 7,87:1

80%#F95E60toon 61 · 6,2:1

100%#FA383Btoon 56 · 5,19:1

Chocolate Cosmos

10%#E6DFDFtoon 89 · 14,57:1

20%#D7C9C9toon 82 · 11,93:1

30%#C9B3B4toon 75 · 9,65:1

40%#BA9D9Etoon 67 · 7,66:1

50%#AB8788toon 60 · 5,97:1

60%#9C7172toon 52 · 4,58:1

70%#8D5B5Ctoon 44 · 5,55:1

80%#7F4547toon 36 · 7,38:1

90%#702F31toon 29 · 9,81:1

100%#61191Btoon 21 · 12,63:1

Rich Black

20%#C4C7CAtoon 80 · 11,28:1

30%#ACB1B4toon 72 · 8,84:1

40%#939A9Etoon 63 · 6,71:1

50%#7B8389toon 54 · 4,97:1

60%#626C73toon 45 · 5,37:1

70%#4A555Dtoon 35 · 7,64:1

80%#313F47toon 26 · 10,87:1

90%#192832toon 15 · 15,1:1

100%#00111Ctoon 4 · 19,14: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	`white-smoke`	`#F5F5F5`	geen eis
`background/subtle`	Aa	`imperial-red-10`	`#F6E2E2`	geen eis
`background/strong`	Aa	`chocolate-cosmos-100`	`#61191B`	geen eis
`background/quiet`	Aa	`role-background-quiet`	`#DDDEDF`	geen eis
`background/surface`	Aa	`role-background-surface`	`#FFFFFF`	geen eis
Tekst
`text/default`	Aa	`rich-black-100`	`#00111C`	4,50 / 4,50	17,56 op page · 15,4 op subtle · 14,21 op quiet · 19,14 op surface
`text/muted`	Aa	`rich-black-70`	`#4A555D`	4,50 / 4,50	7,01 op page · 6,15 op subtle · 5,67 op quiet · 7,64 op surface
`text/link`	Aa	`chocolate-cosmos-100`	`#61191B`	4,50 / 4,50	11,58 op page · 10,16 op subtle · 9,37 op quiet · 12,63 op surface
`text/on-strong`	Aa	`white-smoke`	`#F5F5F5`	4,50 / 4,50	11,58 op strong
`text/accent`	Aa	`chocolate-cosmos-100`	`#61191B`	4,50 / 4,50	11,58 op page · 10,16 op subtle · 9,37 op quiet · 12,63 op surface
Rand
`border/decorative`		`rich-black-20`	`#C4C7CA`	geen eis
`border/control`		`rich-black-60`	`#626C73`	3,00 / 2,50	4,92 op page · 4,32 op subtle · 3,98 op quiet · 5,37 op surface
Focus
`focus`		`chocolate-cosmos-100`	`#61191B`	3,00 / 2,50	11,58 op page · 10,16 op subtle · 9,37 op quiet · 12,63 op surface
`focus/on-strong`		`white-smoke`	`#F5F5F5`	3,00 / 2,50	11,58 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`	`#EFF6FF`	`#1E40AF`	`#1E40AF`	Info: voorbeeldmelding · 8,01: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: Exo 2. Serif/accent: Exo 2 (italic for emphasis). 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.