HOOFDSTUK 09 ยท RUIMTE EN HOEKEN
Ruimte, hoeken en randen¶
Dit is de complete tokenlijst voor ruimte, hoeken, randen, schaduw en layout. De waarden komen uit atlas-tokens.css (uit de canon, niet bedacht). Gebruik alleen deze stappen. De visuele weergave en de paginaopbouw staan in Layout en grid.
Ruimteschaal¶
| Token | Waarde | Gebruik |
|---|---|---|
--atlas-space-1 |
4 px | Icoon naast tekst, kleine tussenruimte |
--atlas-space-2 |
8 px | Binnenruimte van chips en labels |
--atlas-space-3 |
12 px | Ruimte tussen label en veld |
--atlas-space-4 |
16 px | Standaard binnenruimte, gutter op mobiel |
--atlas-space-5 |
24 px | Binnenruimte van kaarten, grid-gutter |
--atlas-space-6 |
32 px | Ruimte tussen blokken in een sectie |
--atlas-space-7 |
48 px | Ruimte tussen kop en inhoud |
--atlas-space-8 |
64 px | Grote tussenruimte |
--atlas-space-9 |
96 px | Verticale sectie-ruimte (desktop) |
--atlas-space-10 |
120 px | Hero en bandkoppen |
Hoeken¶
| Token | Waarde | Waar |
|---|---|---|
--atlas-radius-input |
4 px | Knoppen, velden, standaard |
--atlas-radius-card |
5 px | Kaarten |
--atlas-radius-modal |
6 px | Modals en menu's |
--atlas-radius-cta |
8 px | CTA-knop met verloop |
--atlas-radius-pill |
9999 px | Pills en chips |
Scherp en klein is de stijl. Maak geen grotere hoeken dan hierboven.
Randen¶
De randen zijn witte lijnen met weinig dekking op het donkere canvas. Een rand is altijd 1 px, behalve de focusring (zie Toestanden en toegankelijkheid).
| Token | Waarde | Waar |
|---|---|---|
--atlas-color-border-hairline |
rgba(255,255,255,.06) |
Scheidingslijnen binnen een kaart |
--atlas-color-border-base |
rgba(255,255,255,.08) |
Standaardrand van kaarten en panelen |
--atlas-color-border-strong |
rgba(255,255,255,.14) |
Velden, secundaire knop, hover |
--atlas-color-border-brand |
rgba(47,140,255,.35) |
Gemarkeerde kaart, actieve rand |
Hoogte (schaduw)¶
| Token | Waarde | Waar |
|---|---|---|
--atlas-shadow-sm |
0 8px 22px rgba(0,0,0,.36) |
Kaart |
--atlas-shadow-md |
0 16px 44px rgba(0,0,0,.48) |
Menu |
--atlas-shadow-lg |
0 20px 60px rgba(0,0,0,.55) |
Modal |
--atlas-shadow-btn |
0 0 18px rgba(46,128,255,.28) |
Primaire knop |
--atlas-shadow-btn-hover |
0 0 28px rgba(46,128,255,.45) |
Primaire knop bij hover |
--atlas-shadow-glow |
0 0 0 3px rgba(46,128,255,.22) |
Focusring-gloed |
Layout¶
| Token | Waarde |
|---|---|
--atlas-layout-container |
1180 px |
--atlas-layout-section-padding |
96 px |
--atlas-breakpoint-xs tot -xl |
480, 640, 768, 1024, 1280 px |
Downloads¶
De tokens staan als CSS, JSON, SCSS (Odoo en Bootstrap) en Tailwind-preset in 03_Kleur-en-Typografie/tokens/dist/. De CSS en JSON staan ook op de Downloads-pagina.