Design System for Small Business: One Set of Parts, Used Everywhere
Design systems are not only for banks and airlines. A modest one saves a growing firm time, money and a surprising amount of embarrassment.
A design system for a small business sounds like an indulgence reserved for companies with a hundred designers. In truth, the smaller the team, the more a modest one helps. If your site, your quotes, your emails and your social posts all look slightly different because each was made by someone in a hurry, you already feel the cost. A design system is simply one agreed set of parts, written down, that everybody uses.
What is actually in one?
At its lightest, a design system is a short document and a shared file. It records your colours with their exact values, your typefaces and sizes, the spacing you use between things, the style of your buttons, forms and headings, and a few rules about photography and tone. At its fullest it is a library of coded components that developers use directly, so a button on the booking page is literally the same button as the one on the homepage. Most small firms need something in between.
Start with the decisions you keep remaking
Look through your recent work and notice what is chosen afresh every time. Which blue is the brand blue? How much space sits above a heading? How big should body text be on a phone? Write down the answers you like best, then check them for contrast so that text remains readable against its background. The current accessibility guidance, WCAG 2.2, asks for a contrast ratio of at least 4.5 to 1 for normal text at level AA, and it is far easier to guarantee that once, in the system, than on every page.
Name things so people can use them
A palette of "blue 1" through "blue 7" is hard to remember, while names that describe the job, such as primary action, warning and quiet background, travel across designers and developers. Where the site is built in code, these names become design tokens, variables that hold the values. Change a token once and the whole site updates, which is how a rebrand stops being a month-long slog.
Components over pages
Rather than designing page after page from scratch, design the pieces: a navigation bar, a card, a form field, a pricing table, a call to action. Define how each behaves when hovered, when focused with a keyboard, when disabled and when something goes wrong. Those states are where inconsistent sites reveal themselves. Build them accessibly the first time, with proper labels and focus outlines, and every page inherits the work.
Keep it small and alive
The most common failure is a system that is too grand to maintain. Resist the urge to document components you do not use. Add a part when you need it a second time, and retire parts that nobody touches. Give one person responsibility for keeping the document current, and review it twice a year. A system that is out of date is worse than none, because people trust it.
Count the benefits
Consistency makes a business look established, and it makes new work faster, because designers and developers stop debating small choices. It reduces bugs, because tested components are reused. It also makes it easier to bring in a freelancer or a new studio, since the rules are written rather than living in somebody's head.
A week-long start
Documents and emails count too
A system should reach beyond the website. Quote templates, invoices, email signatures and presentation slides all carry your brand, and customers notice when a quote looks nothing like the site that attracted them. Add a short section covering these, with the exact fonts and colours to use and a few finished examples to copy. When a salesperson can produce a polished proposal in ten minutes without asking the office, the system is working.
Writing is part of design
Words are interface too. Agree how you address customers, whether you write in the first person plural, how you phrase buttons and error messages and which terms you avoid. A page of examples of good and poor phrasing, drawn from your real material, does more for consistency than a long brand statement. Include guidance for alternative text on images, so that blind visitors hear something useful rather than a file name.
In a week you can audit what exists, settle the colours, type and spacing, design ten core components and publish a one-page guide. Do that, use it on your next project and see what is missing. If you would like help setting one up for a site or a product, we would be glad to work with your team, whether you are in Northampton or further afield.