A design system for a small business website

Key takeaways

A design system is a short set of rules and reusable parts, such as colours, type sizes, buttons, spacing and page sections, that keeps every page consistent. A small business does not need a large one. One page of rules and a handful of built components stop the gradual drift that makes sites look improvised.

• Most small business sites need one page of rules, not a library.
• Define colours, two fonts, a type scale, one button style and spacing.
• Build reusable sections, such as a review block and a contact panel.
• Consistency across pages reads as a business that is in control.

What is a design system?

A design system is a documented set of visual rules and reusable interface components used to build pages consistently. Large organisations, such as GOV.UK, publish extensive ones. For a small business, it can be a single page listing colours, fonts, heading sizes, button styles and spacing, plus the reusable sections in the website builder or code.

• How website design influences brand credibility
• Brand guidelines for your website: what to include

Why does consistency affect credibility?

Consistency affects credibility because inconsistency looks improvised. When buttons change shape between pages, headings change size and spacing varies, visitors sense that nobody is in charge of the details. The Web Content Accessibility Guidelines also ask for consistent identification: the same function labelled and shown the same way everywhere.

• What makes a website look professional?
• Inconsistent branding across your website and channels

What should a small business design system include?

Keep it to what you actually use. Each rule should answer a question a future editor would otherwise guess at.

• Colours: primary, neutrals, one accent, with contrast-checked text pairs.
• Type: two fonts, five heading and body sizes, line height.
• Buttons: one primary style, one secondary, one link style.
• Spacing: three or four standard gaps used everywhere.
• Sections: hero, service card, review block, case study, contact panel.
• Images: sizes, ratios and what each type is for.

• Choosing a website colour scheme: mistakes to avoid
• Website typography mistakes that make pages hard to read

How do you keep it in use?

Build the rules into the site so the easy path is the right one. In WordPress, Shopify or a page builder, set global colours and fonts and save reusable sections. Name an owner who checks new pages against the rules. Review twice a year, because drift creeps in with every quick edit.

• Website maintenance costs in the UK

When is a design system overkill?

A formal system is overkill for a five-page site that rarely changes. Even then, write down the colours, fonts and button style, because someone will eventually add a page. It becomes essential once several people edit the site or you add pages often, such as a blog or location pages.

• Website for multiple locations: when to restructure

What does this look like in practice?

A pattern we see: after three years of edits by different people, a site has seven button styles and four shades of the brand colour. Agreeing one page of rules, setting them as global styles and replacing the old components brings the whole site back into line in about a week.

• See client work
• Website Design & Development for UK businesses

Design system checklist

• List the colours, fonts and button styles currently in use.
• Choose one of each and document them.
• Set them as global styles in your platform.
• Save reusable sections for common content.
• Name an owner and review twice a year.

• The website credibility score: rate your site out of 10
• Website visual refresh: new look without a rebuild

Next step

Count the button styles on your site. If there is more than two, that is your first consistency fix.