Foundations

A design system is the shared set of rules and pieces an interface is built from: colours, spacing, type, buttons, forms, tables, each defined once and used everywhere, so that every page looks and behaves the same.

What everything else is spent from. Nothing on these pages is a component: they are the scales — colour, spacing, type, and the skin that draws them — that every other section reads without ever showing them.

Colours The surfaces a page is stacked from, the invert levels borders and muted text are drawn with, and the five semantic families. Both faces of the theme, side by side. Spacing The nine spacing steps, the sizes, and the density pattern — how a region declares itself compact and what that does to everything it holds. Typography The type scale and the weights, then the same scale at work in a page of prose. Skin How things are drawn, at equal colour and density: the radii, the shadows, the borders and the separators. The one axis of the theme that has a character.