Spacing
Ten values in multiples of 4. The smaller ones inside a component; the larger ones between sections.
← All case studies
The system behind this portfolio
Every spacing value, text size and color on these pages comes from a closed list. The site build fails when it finds a value outside it.
space-1 · 4
space-2 · 8
space-3 · 12
space-4 · 16
space-5 · 24
space-6 · 32
space-7 · 48
space-8 · 64
space-9 · 96
space-10 · 128
Type
Inter in three weights and six sizes, plus an opening headline that grows with the screen, from 40 to 72 px.
text-sm · 14
Labels and captions
text-md · 16
Body text
text-lg · 20
Lead text
text-xl · 24
Block title
text-2xl · 32
Section title
text-3xl · 48
Page
Color
Neutrals and one accent blue, used only for links, focus and states. Every text pair passes WCAG level AA with room to spare; the lowest is 6.34:1.
ink
18.86:1 on backgroundink-2
7.73:1 on backgroundaccent
7.15:1 on backgroundsuccess
indicator only, 4.48:1bg
backgroundsurface
secondary backgroundline
bordersaccent-soft
highlight backgroundThe rules the build checks
- No colors written in the component CSS: tokens only.
- No stray spacing or size values: tokens only, except the 1 px border and the 2 px focus ring.
- No inline styles in the HTML.
- Every image has alt text and every internal link points to a file that exists.
- Every text color pair has AA contrast, calculated from the tokens.
On top of that: visible focus on everything clickable, a link to skip straight to the content, animations turned off for people who ask for reduced motion in their system settings, and a layout tested from 390 px wide.