Design system · ASSEMBLY v2.0
Parts catalogue
One system for the page and the world. The DOM grid and the 3D construction grid share a unit; the paper, charcoal and construction yellow are the same tokens in CSS and in the materials. The full spec lives in DESIGN.md; this page renders it.
1 · The ten primitives
Every scene on the home page — the first piece, the ecosystem, the eight project sculptures — is assembled from these. One bevel radius, one unit, declared connection points. Drag to orbit.
2 · Colour
3 · Type
--t-giant · Archivo 600 wdth 92Aa--t-h1I design how they connect--t-h2A component is a brick--t-h3Designing for recognition instead of recall--t-leadRather than treating imports as a single action, the experience becomes a guided process.--t-body · 17pxBody copy sits in a 62ch measure with 1.55 line-height. Emphasis is semibold, never colour.--t-mono · IBM Plex MonoChapter 03 · The System · A-044 · Spacing
4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128 · 192. The 3D unit (one grid cell) maps to the DOM's 8px unit conceptually: a 2×1×1 block is the smallest thing that reads as a piece, a 24px gutter is the smallest gap that reads as a column.
5 · Components
Materials
MATTE (roughness .84, no metal) is the default. SYSTEM fades every surface into a blueprint: paper faces, blueprint edges, contour lines, silhouettes on round parts, connection rings and bounding boxes.
Camera language
Push in = detail. Pull out = context. Orbit = relationships. Travel = workflows. Explode = systems. Snap = decisions. Every move goes through one rig.
Motion
Scroll drives everything; nothing plays on its own. Pieces snap with a small overshoot, never bounce. Reduced motion → a static editorial version drawn as isometric SVG from the same layouts.