Render, vooraanzicht
2026
Rust
Kaart in ruststand: paneel op papier, geen rand, geen schaduw.
Design system
Quiet Confidence - Unbleached
Ongebleekt papier als grond, inktgroene tekst, ocher als enige accent en salie als steunkleur. Koppen in Newsreader 500, tekst in Karla. Zachte hoeken, geen randen waar een vlak het werk kan doen, geen schaduw.
Deze pagina is intern documentatiemateriaal en blijft in het Nederlands, ook als de rest van de site naar Engels wordt geschakeld. Zo stond het ook in het brondocument.
Kleur
Papier
Paneel
Inktgroen
Ocher tekst
Ocher vlak
Ocher op donker
Salie
Haarlijn
Typografie
Display 56 / 1.12
Newsreader 500
Newsreader 500
Productontwerp voor kleine teams
H1 48 / 1.15
Newsreader 500
Newsreader 500
Paginakop
H2 34 / 1.2
Newsreader 500
Newsreader 500
Sectiekop
H3 28 / 1.15
Newsreader 500
Newsreader 500
Projecttitel
Quote 19 / 1.65
Newsreader 300 italic
Newsreader 300 italic
Kleine budgetten zijn de opdracht, geen compromis.
Lead 19 / 1.7
Karla 400
Karla 400
Introtekst boven de vouw: één alinea, hoogstens drie regels, geen jargon.
Body 17 / 1.7
Karla 400
Karla 400
Lopende tekst. Regelbreedte hoogstens 64 tekens, zodat lange stukken leesbaar blijven.
Small 15 / 1.6
Karla 400
Karla 400
Opdrachtgever, jaartal, bijschrift bij beeld.
Caption 14 / 1.6
Karla 400
Karla 400
Proceslijn en materiaalregel onder een project.
Eyebrow 14 / .16em
Karla 400, uppercase
Karla 400, uppercase
Industrieel ontwerp, één persoon
Ruimte, hoeken en beeld
4
icoon tot label
8
binnen een regelgroep
12
label tot veld
16
beeld tot beeld
24
binnen een paneel
32
paneelbinnenruimte
44
kolomafstand
64
paginamarge
88
sectieafstand
12px
14px
16px
Hoeken: 12px op invoervelden, 14px op knoppen, 16px op panelen en beeld. Geen schaduw; verschil komt van het paneel (#E2DAC7) op het papier (#EDE7D9), of van één haarlijn (#DDD4BF).
Beeld: staand 3/4 of 4/5 naast tekst, liggend 16/10 in de kaartweergave. Bijschrift altijd links onder in het beeldvlak.
Componenten en toestanden
Knop, primair
Start een project
Hover
Active
Focus
Disabled
Knop, secundair en tekstlink
Bekijk werk
Hover
Disabled
Lees de case
Hover
Formuliervelden
Navigatie, taalschakelaar en labels
Projectkaart
Render, vooraanzicht
2026
Hover
Hover: paneel een halve stap lichter, 3px omhoog, 150ms.