Basis

Ruimte en radius

Witruimte is het belangrijkste materiaal van PDK. Radius groeit mee met het element, zodat vormen bij elkaar passen.

Spacing

Raster van 4. Alleen deze waarden. Bij twijfel een stap groter.

--space-1 4px

--space-2 8px

--space-3 12px

--space-4 16px

--space-5 24px

--space-6 32px

--space-7 48px

--space-8 64px

--space-9 96px

--space-10 128px

Situatie	Waarde
Tussen icoon en label, binnen een knop	8
Tussen velden in een formulier	16 tot 24
Padding van een kaart	minimaal 16, standaard 24
Tussen een kop en de inhoud eronder	16 tot 24
Tussen secties op een pagina	minimaal 96

Hoe groter het element, hoe groter de radius. Losse acties en labels zijn altijd een pil.

--radius-0 0px Vlakken tegen een rand: full-bleed beeld, tabellen, print

--radius-xs 4px Heel klein: inline code, kbd, checkbox

--radius-sm 8px Binnen een container: inputs, menu-items, meldingen

--radius-md 12px Kaarten

--radius-lg 16px Grote containers: panelen, dialogs, mediablokken

--radius-pill pil Losse acties en labels: knoppen, badges, chips

Binnen een container is de radius kleiner: binnen = buiten min padding, met een minimum van 4. Zo lopen de bochten evenwijdig.

Wel: 16 buiten, 8 padding, 8 binnen.

Niet: binnen even rond als buiten, de bochten knellen.