The META design system, in full.

Consistency builds trust. Visitors cannot explain why a site feels credible, but they feel it within three seconds. When every page uses the same orange, the same heading weight, the same button radius, the brain stops working and focuses on the content. A page that changes its rules in every section sends the opposite signal: nobody watches the details here. If the website is careless, why would the service be any different?

A token is a decision made once. Without a system, choosing a text grey is repeated on every page, in every component, with every new team member. You end up with forty near-identical greys and nobody to arbitrate. With a system, muted-fg exists, it has a value, and the question never returns. The day the brand evolves, you change one line in styles.css and the whole site follows — light, dark, in every language.

Development gets faster and maintenance gets cheaper. Building a new page becomes assembly: the .sec container, a kicker, an h-section heading, a grid framed in line, a primary button. There is nothing to invent, so nothing to correct in review. Over the lifetime of a website, maintenance far exceeds the cost of the initial build — that is exactly where the system pays for itself.

Accessibility is built in, not bolted on. Contrast is validated at the source: body text hits a very high ratio on white, and muted-fg stays above the AA threshold for running text. Focus states are visible and identical everywhere; the 2px orange ring never depends on the component. And prefers-reduced-motion is honoured globally rather than component by component. Someone navigating by keyboard or sensitive to motion is not an edge case to handle later.

Performance follows the same logic. Fonts are self-hosted as woff2, split by Unicode range and served with font-display: swap — no third-party request, no invisible text while loading. Two families, not eight. No component library imported for three buttons. The result is measurable: pages render in under a second, and that speed is itself a conversion argument.

Dark mode comes free from the structure. Because no component knows a hardcoded colour, going dark means redefining eight variables. No second mockup, no scattered patches, no regression a month later. This is exactly the kind of feature that costs a fortune when improvised and almost nothing when the foundation is clean.

Then there is the discipline of constraint, the hardest part. It is tempting to add a gradient, a shadow, a second accent colour. Every addition looks harmless, and every one drains a little strength from the whole. Five percent orange on a page lands; orange everywhere says nothing at all. A useful system is one that says no — that is precisely its value.

We apply this standard to client projects exactly as we apply it to our own site. The result is not a prettier website in the abstract: it is a website that is faster to evolve, cheaper to maintain, more accessible and more credible. Over three years, the difference shows up in the accounts.