Why your website needs a design system (and how to build one in a weekend)

Most founders hear "design system" and picture a Figma file with 400 components, a team of five, and six months of runway dedicated to button states. That's not what I mean. What I mean is a handful of decisions, written down, that stop you from making the same call twice.

A lean design system has three things: a color palette, a type scale, and a spacing rule. Everything else is optional until it's obviously needed.

Start with the decision you make most often

Look at your codebase (or your Figma file, or your CSS) and ask: what value do I keep typing? For most sites, it's a shade of gray, a font size, and a container width. Those three values are your design system's core.

Lock them down. Give them names. Make them CSS variables. Now you have a system — and it took twenty minutes.

"A design system isn't a deliverable. It's a way of working. Ship the smallest useful piece, then add to it as you encounter real problems."

The color palette

You need five colors to ship a real site: a background, a body text, a heading text, a border, and an accent. That's it. The accent does the heavy lifting — CTAs, highlights, hover states. Keep it singular and make it distinctive.

Start with your neutrals. An off-white, a near-black, two or three grays of increasing darkness. The palette should feel complete before you introduce any accent. If your accent color could only exist on a screen — if you couldn't put it on a poster, a jacket, a street sign — be skeptical of it.

On brand colors

Your logo color and your accent color can be the same, but they don't have to be. Often there's a version of your brand color that works beautifully at logo scale but feels aggressive at button scale. The token system is where you make that distinction explicit.

The type scale

Pick a base size (16–17px), then define display, heading, subheading, body, and caption. You don't need ten steps — five is enough. Apply them consistently. The magic isn't in the scale itself; it's in using it so predictably that the hierarchy reads without the user noticing.

Weight contrast matters more than size contrast. A 48px regular weight headline competes with a 17px bold subheading. A 48px bold headline with a 13px medium label gives you an instant hierarchy even at a glance.

---

Putting it together in a weekend

Here's the practical sequence:

Saturday morning: audit your current site. Note every color value that appears more than twice. Note every font size. Note every spacing value. You're not redesigning — you're documenting what already exists.

Saturday afternoon: consolidate. Merge similar values. Pick one shade for each role. Define your five colors and your five type sizes as CSS custom properties. Wire them in.

Sunday: apply the variables everywhere in your codebase. Remove anything that doesn't use a token. You'll find a few edge cases — that's the system telling you it needs another token, not that the system is failing.

By Sunday evening you have a real design system. Not a beautiful one, but an operational one — and operational wins every time.