Look, I get it. Runway's burning, backlog's growing, and your co-founder's already pinging you about the demo next Tuesday. A design system? Series B problem, right?
It isn't. Not even close.
I've watched teams hit this wall. Six months in, some poor developer opens the codebase and finds the primary button rendered four different ways. Slightly different padding here, a different hover color there. Nobody did it maliciously. It just... accumulated. Like technical debt usually does. Quietly, then all at once.
The cost nobody talks about
Here's the thing about a messy frontend: it rarely breaks. That's precisely what makes it dangerous. Your users don't see four button hover states as a bug. They just feel a vague unease that something's slightly off. And your developers? They slow down imperceptibly. Thirty extra seconds here, a ten-minute rabbit hole there.
Over six months, that compounds into something genuinely painful.
A rebrand, even a small one, just tweaking your primary color, becomes a grep-and-pray session across eighty files. A new engineer joins and spends their first week confused about why mt-6 means different things in different contexts. These aren't catastrophes. They're papercuts. And papercuts are what actually kill shipping velocity.
You don't need Storybook. You need three things.
Not a full design system. Not Figma tokens synced to your codebase via a plugin that breaks every major update. Just three things that take maybe a day to set up:
A token file. Boring? Yes. Transformative? Also yes.
// src/design/tokens.ts
export const tokens = {
space: { xs: 4, sm: 8, md: 16, lg: 24, xl: 40 },
radius: { sm: 6, md: 12, lg: 20, full: 9999 },
fontSize: { sm: 13, base: 15, lg: 18, xl: 24, h2: 32, h1: 44 },
};
Now mt-[37px] is a red flag, not a style choice. Every time a dev reaches for an arbitrary value, something went wrong upstream. Fix the token, not the usage.
A component that owns its own states. One file. All button variants. No duplicates, ever. If you catch yourself copying button styles into a feature component, stop. That's the smell.
One rule, enforced in code review: no magic numbers in feature code. That's it. Print it on a sticky note above your monitor if that helps.
When does it actually pay off?
Not on the tenth feature. The second one. Genuinely. The second time you build something and realize the spacing just works, the colors are consistent without you thinking about it, dark mode doesn't need special-casing, that's the moment. It's almost anticlimactic. Which is entirely the point.
Ship fast, everyone says. But there's a version of fast that creates drag, and a version that doesn't. A lightweight system isn't slowing you down. It's the difference between building on concrete and building on sand, and you won't notice which one you're on until the fourth floor.