Five values run the whole site.

The normal way, and what it costs

On most sites, a colour is written down wherever it is used. The brand green appears in the header, again in the buttons, again in the links, again in the footer, and again in four places someone added later. Nobody knows how many. So when the brand changes, the work is not “change the green”. It is find every green, which is slower, and which always misses a few. You have seen the result: a site that is mostly rebranded, with one old-coloured button on a page nobody checked.

What happens here instead

Nothing on this site names a colour, a size or a gap directly. Each one points at a shared value, and those shared values are computed from the five numbers above. The green in the header and the green in the footer are not two greens that happen to match; they are one green, read twice. That is why dragging the colour slider moves all of them together and cannot leave one behind. There is no “behind” for it to be left in.

The same holds for the rest. Every gap on the page is a multiple of one spacing unit, so the spacing slider re-proportions the entire layout without any element losing its relationship to its neighbours. Every text size is the previous size multiplied by one ratio, so the type scale stays a scale at any setting instead of becoming five unrelated sizes.

Why you cannot break it

Try. Push the sliders to their extremes and the contrast readout in the panel stays at AA or better the whole way. That is not luck. The colour axis rotates hue only; the lightness and chroma that actually determine contrast are pinned per role, so no rotation can produce unreadable text. The other ranges are clamped the same way: the type scale stops before the largest heading overflows a phone screen, and the spacing floor sits above the point where tap targets would drop under the 44-pixel minimum.

A control surface that could be dragged into a broken state would argue the opposite of what it is for, so the reachable range is the part that was designed.

What this buys you after launch

Most of a site’s life happens after it goes live, and most of its cost does too. A rebrand becomes an afternoon rather than a re-build. “Can we tighten this up, it feels cramped” becomes one number rather than a week of nudging margins. A client who needs larger text for an older audience gets it without a redesign. None of these are hypothetical requests. They are the ones that actually arrive, and they are expensive precisely in proportion to how many places the answer is written down.

One honest caveat

Sliders are a demonstration, not the deliverable. Real projects do not ship with a control panel bolted to the homepage; they ship with the system underneath it, and the five values set once to the right answer. What the panel proves is that the values are genuinely shared. A site can only survive being dragged around like this if nothing in it was hard-coded in the first place.