A design system, not a pile of overrides.
Colour, space, type and radius are named tokens. Change the brand and every block that referenced a token follows — because it referenced the token, not a colour you typed.
Three colours in. A whole scale out.
Give the brand a primary, a secondary and a page colour. Everything a design needs is derived from them — and the text colours are derived to meet contrast, not set to a value that happens to pass for one brand.
brand, accent, heading, body, muted, border, surface, surface-alt, the inverse band and its text, and a readable variant of your accent for small type.
One scale, used by every margin and padding on this site. Off-scale values are the classic silent bug — a token that does not exist resolves to nothing and the gap disappears.
Font slots, bound to roles. Two weights of one family cost a single request, which is how you get a real bold instead of one the browser fakes.
Named steps rather than numbers, so a rounded corner is a decision made once for the site.
Three widths, and you can style each one.
Every node carries its own desktop, tablet and mobile styling — not a single layout that shrinks. The mobile version of this site was composed, not collapsed.
States are styled the same way. Hover and focus are separate, and both are expected on anything you can click — a control that answers a mouse and ignores a keyboard is half a control.
Thirty-five kinds of element, and a library to keep your own.
Headings, text, images, video, forms, navigation, tabs, modals, accordions, carousels, listings for your products, events and articles — plus the booking, ticket and cart widgets. Drag one onto the canvas, or save a section you have designed into your own library and reuse it across sites.
Anything you build can also be edited by an agent, because a block is JSON and the tools address it by path.
See what it looks like with your own colours in it.
Three hexes and a font choice is about ten minutes of work, and it changes every page at once.