Design system

Vlakken

Tekst

Glas

Lijnen

Diepte

Overig

Accenten

Sfeer

Translucent values are composited over the surface behind them first, because a border of 12% white is not 12% white but whatever you end up seeing. The requirement is 4.5:1 for text and 3:1 for the boundary of a control.

Type sizes

• Ag --text-xs 0.8rem
• Ag --text-sm 0.889rem
• Ag --text-base 1rem
• Ag --text-lg 1.125rem
• Ag --text-xl 1.25rem
• Ag --text-2xl 1.5rem
• Ag --text-3xl 1.875rem
• Ag --text-4xl 2.25rem
• Ag --text-5xl 3rem
• Ag --text-6xl 3.75rem

Typefaces

Three faces, and until 29 August 2026 none of them existed as a token — thirty literal occurrences of "Space Grotesk" and thirty-six of "JetBrains Mono" scattered through the stylesheet. The bottom two belong to the older layer and still point at Inter; the site no longer uses it, the admin does, and that is why they are still here.

• Ag
  --font-body "Inter", system-ui, -apple-system, sans-serif
  older layer
• Ag
  --font-heading "Space Grotesk", "Inter", system-ui, sans-serif
  older layer
• Ag
  --font-kop "Space Grotesk", system-ui, sans-serif
• Ag
  --font-tekst "Hanken Grotesk", system-ui, sans-serif
• Ag
  --font-mono "JetBrains Mono", ui-monospace, monospace

Corner radii

• --radius-sm 0.375rem
• --radius-md 0.75rem
• --radius-lg 1rem
• --radius-xl 1.5rem
• --radius-full 9999px

Spacing

• --space-1 0.5rem
• --space-2 1rem
• --space-3 1.5rem
• --space-4 2rem
• --space-5 2.5rem
• --space-6 3rem
• --space-8 4rem
• --space-10 5rem
• --space-12 6rem
• --space-16 8rem

• Build it, do not generate it Imagery that depicts an object is built in Blender. That buys four things at once: no image credits, real work and therefore within the content-truth rule, a demonstration of the service we sell, and a visual language nobody can copy because it is not a stock style.
• One idea per image Navy ground, side light, and one thing carrying the frame. The brand seed fixes a palette — amber, cyan, navy — and not a material. When everything turned to brass the material stopped meaning anything: you start choosing objects that render well in brass instead of objects that are true.
• The cross-section is the proof Beside the finished image stands the same scene in clay, edges in amber. A generated image has no cross-section, so there is nothing to explain and nothing to refute. A caption saying "rendered in Blender" is a claim, and claims get checked.
• Imagery gets its own ground A render can be re-lit; footage cannot — a night flight will not grade light without becoming a bad night flight. So the mount does not follow the theme. On a light page dark imagery then reads as a mounted photograph rather than as a hole.
• Motion only where it is true Three of the twenty-three article images move: the scale hunts, the gears turn one revolution so the wear comes past, and on the stamp only the camera moves — the impression has been struck, so any movement of the object itself would be invented. The loop closes to the pixel, so you never see a jump. The still stays the element that decides load time; the clip fades in over it once it can play. Below 768 pixels and under reduced motion it is never fetched at all.

• A button without a palette The design has two theme buttons, but `dark` determines exactly two values in it: the icon and the label. No colours change. The entire light palette is ours, including the darker accent — orange will not reach 4.5:1 on a light ground.
• Image slots without images The design reserves the space and shows a placeholder. What belongs there, how it survives two themes and where it comes from was written nowhere. That became the previous section.
• A scale nobody used The corner radii and the typefaces existed as tokens and were ignored: eighteen hard-coded values for five tokens, and sixty-six literal font names. Faithful transfer was right at the time — cleaning up was part of the job and happened later.