A Design System for Small Business: How to Stop Reinventing Your Website Every Time
The scenario is familiar to almost any company that has been running a website for more than a year. A new landing page is needed. The designer draws it from scratch because the old mock-ups “are not quite right”. The developer writes new styles because the existing set lacks the button variant required. Six months later the site has four different buttons, three shades of blue and five ways of formatting a heading.
A design system is how you stop that cycle. And contrary to the common assumption, it is not only for large companies with twenty designers.
What it actually is
A design system for a small business is not a five hundred component library or a hundred page document. It is a set of agreements about what pages are assembled from, recorded in two places at once: in the design files and in the code.
The key words are “at once”. A Figma library that no line of CSS corresponds to works right up until the first build. Real savings begin when a component exists in both environments and changes in both.
The minimum set
| Layer | What it covers | What breaks without it |
|---|---|---|
| Tokens | Colours, type sizes, spacing, radii | Three shades of the same colour on one site |
| Typography | Styles for h1-h4, body text, captions | Every page looks like its own project |
| Base elements | Buttons, fields, links, icons | Duplicated code on every change |
| Blocks | Card, form, banner, feature list | New page means new design from zero |
| Rules | Grid, breakpoints, mobile behaviour | Layouts fall apart on unusual screens |
For a company with a twenty to thirty page site this is enough. Everything else is added when needed, not stockpiled in advance.
Tokens: the cheapest step with the biggest effect
A token is a variable in place of a hard-coded value. Instead of #3362FF appearing in thirty places, the code uses --color-primary, declared once.
The practical benefit is immediate: changing the brand colour stops being a week-long project and becomes a one-line edit. The same applies to spacing: a set of six values instead of arbitrary numbers removes the situation where gaps between blocks are sometimes 40 pixels and sometimes 43.
A sensible minimum: eight colours, six type sizes, six spacing values, three radii. More is unnecessary at the start; less becomes awkward quickly.
Which components pay off first
Ordered by benefit relative to effort:
- The button. The most frequent element and the most frequent source of inconsistency. Three variants: primary, secondary, text. Plus hover and pressed states.
- The form field. Together with error and hint states. Forms are everywhere and everywhere they look different.
- The card. A universal container: for a service, a case study, an article. One component covers three jobs.
- The section heading. That pairing of heading and subheading repeats on every page.
- The contact form. Built from fields and a button you already have, so it comes together quickly.
How this translates into money
The estimate is simple. Take how many hours a new landing page currently takes. Usually twenty to forty: design, build, integration.
With a design system the same page is assembled from ready blocks in six to ten hours. The difference multiplies by the number of pages you produce in a year. For a company launching one page a month, the system pays for itself in roughly three or four launches.
The second part of the saving is less obvious but larger: the revisions caused by inconsistency disappear. Nobody spends time on “why is this button different from the other one”.
Mistakes that kill design systems
- Too much detail at the start. Six months describing every possible state, and not a single page built in that time.
- The system lives only in the design files. The designer updates a component, nothing changes in code. Within three months the gap is wide enough that people stop using it.
- No owner. If nobody is responsible for getting new elements into the system, it freezes at version one.
- Banning exceptions. Sometimes a page genuinely needs a non-standard block. The right response is to add it to the system, not to forbid it.
- Copying someone else’s system. Ready-made sets from large companies are built for their problems and carry their visual language.
How to start in a week
Not with a new project. With an inventory of what already exists:
- Day 1. Collect screenshots of every button, field and card on the site. There are usually two or three times more variants than expected.
- Day 2. Pick one correct variant from each group. Mark the rest for replacement.
- Day 3. Fix the tokens: colours, fonts, spacing. Move them into variables in the code.
- Days 4-5. Unify buttons and form fields across the whole site.
After that the system grows naturally: any block built for a second time becomes a component.
A design system is not about beauty or fashion. It is about the site still being coherent a year from now, and the next page costing less than the last one rather than more.
