Designsysteem

Alles op deze site komt uit dezelfde onderdelen

Eén schaal, één palet, één set componenten. Wat je op de landing ziet is hetzelfde als wat er in de applicatie draait, en daardoor blijft het consistent als er iets bijkomt.

Merk

Het teken en het woordmerk

Een document met een scheurrand. Links de perforatie, rechts een claim met de kortere bron eronder, want dat is de kleinste eenheid van dit product. Het woordmerk staat in een serif, en dat is het enige plekje waar we van de grotesk afwijken. Minimaal 20 pixels voor het teken, vrije ruimte rondom is de helft van de tekenhoogte.

PRODUCTRAOp licht
PRODUCTRAOp donker
PRODUCTRAAlleen lijn
Het teken op maat
64px
48px
32px
24px
16px
Kleur

Papier, inkt en drie statuskleuren

Het papier is neutraal en koel, de inkt is bijna zwart maar nooit puur zwart. Groen is hier geen merkkleur maar een status. Statuskleuren dragen uitsluitend de staat van een gegeven. Ze verschijnen als stip, als tekst of als zacht merkje, nooit als achtergrond van een sectie of als hoofdknop.

Papier
canvas#f8f8f6
canvas-deep#efefec
surface#ffffff
surface-2#f3f3f0
surface-3#e7e7e3
Inkt
ink#16171a
ink-2#55575c
ink-3#5f6167
ink-4#64666c
Status
signal#267445
attention#9d5209
missing#b1403a
marker#a04f2a
Typografie

Eén schaal voor de hele omgeving

Geist voor de interface, Fraunces voor het merk, Geist Mono uitsluitend voor echte data: een SKU, een batchnummer, een datum, een getal.

Onder elke claim ligt een bron
display-xl38 tot 56 / 1.02 / -0.04em / 700
Onder elke claim ligt een bron
display44 / 1.06 / -0.034em / 700
Onder elke claim ligt een bron
title38 / 1.1 / -0.03em / 700
Onder elke claim ligt een bron
heading21 / 1.32 / -0.02em / 600
Onder elke claim ligt een bron
lede17 / 1.65 / -0.006em
Onder elke claim ligt een bron
body15 / 1.65 / -0.003em
Onder elke claim ligt een bron
small13,5 / 1.55
Onder elke claim ligt een bron
mini12,5 / 1.5
Onder elke claim ligt een bron
micro11 / 1.45 / 0.01em
Componenten

De onderdelen waar alles uit bestaat

Elke knop, elk veld en elke tabel op deze site komt hier vandaan. Wijzig je hier iets, dan verandert het overal.

Knoppen
Merkjes en status
NeutraalGeverifieerdAandachtActieOmlijndInkt
GeverifieerdAandachtActieOnbekend
Velden
Maximaal 200 tekens

Vul een geldig e-mailadres in.

Tabel
ClaimBronStatusDatum
MateriaalsamenstellingGRS 8841-PTGeverifieerd12-08-2026
Recycled contentgeen bronActie
Paspoortelementen

Het motief dat overal terugkomt

Hoekmarkeringen, een machineleesbare regel en een stempel die alleen verschijnt als alles klopt. Spaarzaam gebruiken, want een stempel die overal staat betekent niets meer.

Digitaal productpaspoortLuxe Knitted Trui
HerkomstGemaakt in PortugalTecidos Aurora Lda
Materialen72% biologisch katoen28% gerecycled polyester
Watermerk

Het merkteken zit in het papier van elk paspoortvlak. Zichtbaar genoeg om te herkennen, te zwak om te lezen als inhoud.

UI-snippetEen stukje echte interface
  • Geverifieerd91
  • Aandacht4
  • Actie1
Vorm en patroon

Ronding, schaduw en achtergrond

Buiten groot, binnen kleiner, en nooit twee gelijke radii op elkaar. Schaduw in drie lagen: een contactrand, een zachte val en een diepe val.

Ronding
sm
md
lg
xl
2xl
Schaduw
card-soft
card-lift
card-float
Patronen
Regels

Waar we ons aan houden

Een systeem is pas een systeem als de afspraken opgeschreven staan.

Ruimte komt uit gap

Geen losse marges op onderdelen. Een ouder bepaalt de ruimte, een kind bepaalt alleen zichzelf. Daardoor blijft elke sectie hetzelfde ritme houden.

Monospace is voor data

Een SKU, een batchnummer, een datum of een getal. Nooit voor lopende tekst, want dan gaat de interface als een console lezen.

Statuskleuren dragen alleen data

Groen, amber en rood staan voor de staat van een gegeven. Ze verschijnen als stip, als tekst of als zacht merkje, nooit als achtergrond van een sectie of als hoofdknop.

Geen bron, geen claim

Wat geen bron heeft, wordt niet getoond als waarde maar als openstaande actie. Dat geldt in de app en op het publieke paspoort.

Beweging heeft een reden

Alleen waar iets verandert of laadt. De hele boom staat in een MotionConfig die de systeeminstelling voor minder beweging volgt, en niets is onzichtbaar zonder JavaScript.

Alles is bereikbaar

Zichtbare focus, echte labels, tabellen die op mobiel schuiven in plaats van breken, en tekst die op elke breedte leesbaar blijft.