The word “design system” gets thrown around like it belongs in a boardroom slide deck. Something about tokens and governance and a cross-functional steering committee. The reality is less glamorous and more useful.

Look, if two or more people have ever made a visual decision for your brand, you already have a design system. The question is whether it’s written down or living in someone’s head. The ones living in someone’s head are the ones that die when that someone walks out the door.

“A design system is just the decisions you were going to make anyway, written down before you forget them.”

Vincint Coetzer, Founder at Toolrealm

01 : What a Design System Actually Is (And Isn’t)

Strip away the jargon and a design system is just a record of what your brand decided. Not a Figma library. Not a 60-page PDF. Not a Storybook deployment. It’s the answers to questions your team keeps asking over and over: which blue, which font size, how much padding, why this corner radius.

Think of it as a shared memory. When you write down “our primary colour is #1a1a1a, used for text and buttons, because the brand is built on contrast,” you’ve made a decision once instead of forty times. The next person who needs to design something doesn’t have to guess. They look it up. They move on. That’s the whole pitch.

The reasoning matters more than the hex codes. Anyone can write down a colour value. What makes it a system is the “because” that follows it. “We use 8px spacing because our scale is golden-ratio based and 8px is the smallest practical unit.” That sentence lets anyone make the next decision without calling a meeting.

But we’re just a small business, we don’t need that

This objection is the wrong way round. Small teams need systems more, not less. When you have twelve designers, someone usually catches the inconsistency. When you have one designer and a marketing intern, nobody catches it. The inconsistency ships. It accumulates. It becomes the brand.

We’ve watched a five-person company lose their only designer and spend the next eight months reverse-engineering decisions from screenshots of old social posts. Every new asset was an argument about which blue was the real blue. A two-page design system would have saved them roughly seven months of that pain. The system isn’t overhead. It’s insurance against the day someone leaves.

02 : The Four Things a Small Brand Actually Needs

You don’t need the 200-page Figma Community file. You need four things. The rest is decoration.

Tokens, not palettes. A palette says “these colours look nice together.” A token says “this one is for backgrounds, this one is for text, this one is for accents, and here’s when you reach for each.” The difference is that tokens carry instructions. Your intern doesn’t guess which blue. They grab –color-accent and ship.

A type scale, not vibes. Two typefaces. One for display, one for body. A mathematical scale that determines every heading size. No more “this heading feels a bit big” conversations. The size is what the scale says it is. We use a golden-ratio-based scale at Toolrealm, which is why every heading on this site sits in proportion to the next one.

Spacing rules, not eyeballing it. This is the one everyone skips and the one that makes the biggest visual difference. Define a spacing scale (ours runs from –space-4xs to –space-3xl), apply it everywhere, and your layouts stop feeling approximate and start feeling intentional. Most “something looks off” problems are spacing problems wearing a different mask.

Three components, used everywhere. Your button. Your card. Your input field. Define them once. Use them everywhere. If you want to see this in practice, our website cost breakdown runs on the exact same components we use across every client project. Same cards, same type, same spacing. That’s why it reads as one thing, not forty.

Do I need a dedicated tool for this?

No. A Notion page works. A Google Doc works. A printed sheet taped to the wall works. We’ve seen small brands run on a two-page system for three years without issue. The tool isn’t the bottleneck. The discipline to actually open the document before making a decision is the bottleneck.

03 : What It Actually Costs You

The cost isn’t in design fees. It’s in the slow drain of time that nobody measures because it’s distributed across a hundred small decisions.

Every marketing asset takes an extra twenty minutes because someone has to re-decide what was already decided last month. Every website update starts with a Slack thread about which font weight to use. Every social post involves a back-and-forth about whether the logo is too big, too small, or sitting in the wrong corner. Individually, these are nothing. Collectively, they’re a tax on every piece of work you ship.

We audited a client last year who’d been operating this way for three years. Seven different shades of “brand blue” across their assets. Three button styles on the same website. Four heading sizes on their homepage. None of it was intentional. It was just what happens when five people make isolated decisions without a shared reference point.

We tracked the before and after for that client. The 40% time saving wasn’t from anyone working faster. It came from removing decisions. When the system says “use –color-primary,” there’s nothing left to debate. You just build. The efficiency isn’t in speed. It’s in the elimination of the question.

04 : How to Start Without Overthinking It

The trap isn’t building the system. It’s planning the system. Brands spend three months researching tools and never ship a single decision. So here’s the shortest path from nothing to working.

Screenshot what you have. Open your website, your last three social posts, your last email newsletter. Put them side by side. The patterns that repeat are already your system. They’re just not written down yet. Start there.

Write the reasoning, not the hex codes. Don’t begin with “primary: #1a1a1a.” Begin with “we use black for text and buttons because the brand is built on contrast.” The reasoning is what lets the next person make a decision without calling you. The hex code is just the implementation detail.

Three components. Not thirty. Button. Card. Input. Define those three well, use them everywhere, and resist the urge to build a 47-component library before you’ve shipped the first three in real work. Small and used beats large and theoretical every single time.

Put it in front of a real project immediately. The day you write something down, use it on something real. If it breaks in practice, fix it. A design system that’s never touched production is a hypothesis. It only becomes a system when it survives a deadline.

05 : Conclusions

Design systems aren’t enterprise infrastructure. They’re the difference between a brand that holds together as it grows and one that fractures into five competing versions of itself. Small businesses feel that fracture faster, because there are fewer people to absorb the drift.

If you’ve been winging it, you’re in good company. Most small brands are. The work you’ve already put into your visual identity deserves to hold together though, not splinter every time someone new touches it. Get in touch with Toolrealm and we’ll build you a system that fits your business, not a 47-component library that requires a steering committee to maintain.

Vincint Coetzer

Founder & Creative Director at Toolrealm

Vincint leads creative direction and systems architecture at Toolrealm, building custom CMS setups, brand identities, and websites that hold up once real visitors start using them, not just once the demo ends.

View Profile