Many sites are a collection of screens designed one by one. Each page has its own sizes, its own margins, its own approximate colours. From a distance it holds. Up close, nothing is aligned: the title on page A does not weigh the same as the one on page B, the same button has three heights. Nobody decided that. It happened, page after page.

The collection against the system

A site made of isolated screens ages badly and changes even worse. Every modification gets repeated by hand, page after page, with one more chance to get it wrong each time. By the end, nothing is quite consistent any more, and nobody dares touch it.

The same button measured across six page silhouettes Two rows of three page silhouettes, all drawn at the same scale. In the top row, each silhouette has its own margins and its own title bar, and its button, drawn in the accent colour, is not the same height as the other two: a measuring caliper sits to the right of each button, and the three calipers are of different lengths. In the bottom row, the three silhouettes have the same margins, the same title bar and the same button, and the three calipers are the same length. Under each column, the labels page A, page B and page after page. THE COLLECTION THREE HEIGHTS page A page B page after page THE SYSTEM THE SAME BUTTON page A page B page after page
What changes from one row to the other is not the drawing of the pages, it is the measure of the same button.

One source of truth

A design system sets the intent once: a type scale, a spacing rhythm, a palette, components. The whole site follows from it. Changing one value at the source propagates it everywhere, consistently. The colour of this site is the proof in numbers: six values per theme where there used to be a hundred and ten. You stop designing screens, you roll out a system.

Two ways of carrying a changed value to the pages Two stacked bands, built from the same elements. At the top, a box labelled one value, from which a horizontal line runs above four small pages and drops an arrow onto each of them; under the row the word everywhere is written. At the bottom, the same box and the same four pages, but set in a chain and joined by four successive arrows; on each arrow sits a ring marked with a cross, drawn in the accent colour, four rings in all. Under the chain the words one more chance to get it wrong are written. AT THE SOURCE CONSISTENTLY one value everywhere BY HAND PAGE AFTER PAGE one value one more chance to get it wrong
At the top the value changes once, at the bottom it changes on every page, and every repeat is a place where it can drift.

Fluid and consistent from end to end

EVA CSS pushes that principle all the way to sizing: a single scale in clamp(), rolled out from mobile to large screen, with an easing curve in the resize. On this site it comes down to 23 spacing steps and 20 text sizes, declared once in src/styles/_eva.scss. SCSS structures the rest, variables and components.

An isolated screen, AI will design a thousand on demand. A coherent system still takes a decision and a hand.