Consistency: building a tiny design system for one site

"Design system" sounds like something only large companies with dedicated teams need. In practice, the core idea is simple: decide on a small set of reusable choices, write them down and stick to them. That's useful for a single website run by one person just as much as for a product with hundreds of screens.

Without some rules, small sites drift. A new page gets a slightly different blue. A button on the contact page has rounder corners than the one on the homepage. Headings vary in size from section to section. None of it is dramatic, but together it makes a site feel less trustworthy and harder to use.

This post walks through building a tiny design system: a page or two of decisions that keeps everything coherent.

Why consistency matters

Consistency helps visitors in quiet ways:

• It teaches patterns. Once people learn what a button looks like on your site, they recognise every other button instantly.
• It reduces doubt. When a link looks different from other links, people wonder whether it does something different.
• It signals care. A coherent site suggests a business that pays attention to detail, which matters for anyone from an accountant to a cake maker.

It also helps you. With rules in place, adding a page becomes a matter of assembling known parts rather than making fresh decisions every time.

Step one: colours

Start by limiting your palette. Most small sites need far fewer colours than they end up using.

A workable set:

• One primary colour for buttons, links and key highlights.
• One or two neutral tones for text, plus a few lighter and darker shades for backgrounds and borders.
• One accent colour, optional, used sparingly for things like badges or highlights.
• Status colours for success, warning and error messages, if your site has forms.

Give each a name based on its role rather than its appearance. "Primary", "text", "surface", "border" and "error" are more useful than "teal" and "light grey", because they tell you where each colour belongs. If you later change the primary colour from teal to plum, the name still makes sense.

Write down the exact values and where each is used. For a bookshop, the note might read: primary is the deep burgundy, used for buttons and links only; text is the near-black; surface is the warm off-white page background.

Step two: typography

Typography rules prevent the slow creep of random sizes and weights.

Choose fonts and stop there

One typeface is often enough. Two, perhaps a characterful one for headings and a plain one for body text, is plenty. More than two usually looks unplanned.

Define a type scale

Instead of picking sizes freely, decide on a short list:

1. Page title
2. Section heading
3. Subheading
4. Body text
5. Small text for captions and labels

Each level gets a fixed size, weight and line height. The steps between sizes should be clearly noticeable so the hierarchy reads at a glance. Then every piece of text on the site uses one of those five levels. If you find yourself wanting a sixth, ask whether one of the existing five would do.

Step three: spacing

Spacing is where inconsistency hides most often, and where a simple rule makes the biggest visual difference.

Pick a base unit, commonly 4 or 8 pixels, and use only multiples of it. A scale might be 4, 8, 16, 24, 32, 48 and 64. Then assign roles:

• Small gaps, like between a label and its field, use 8.
• Gaps between related items in a group use 16.
• Gaps between groups use 32.
• Gaps between major page sections use 64.

When spacing follows a small set of values, layouts start to feel orderly even if visitors can't say why. Related things look related; separate things look separate.

Step four: shape and surface

Decide a few details that affect the overall feel:

• Corner radius. Sharp, slightly rounded or very rounded. Pick one value for buttons and fields, and perhaps a larger one for cards. Then use them everywhere.
• Borders. One thickness and one colour for dividers and outlines.
• Shadows. If you use them, define one or two levels and don't invent new ones page by page.

These choices carry personality. A children's swimming school might choose generous rounded corners and soft shadows; an architect might choose sharp corners and fine borders. The important part is that each site picks once and applies it consistently.

Step five: components

Components are the reusable building blocks: buttons, form fields, cards, alerts, navigation. For a small site, define just the few you use.

Buttons

Most sites need two or three button styles:

• Primary: filled with the primary colour, for the main action in any given area.
• Secondary: outlined or subtle, for less important actions.
• Text link button: for minor actions.

Define how each looks at rest, on hover, on keyboard focus, when pressed and when disabled. Then only ever use one primary button per section, so the main action is always clear.

Form fields

One field style: label above, consistent height, clear border, a visible focus state and a defined error appearance. Every form on the site uses it.

Cards

If you show services, team members or products in cards, use the same structure each time: image, heading, short text, link. A consistent card makes a grid easy to scan.

Writing it down

The system only works if it's recorded somewhere you'll actually look. This can be a simple document or a single page in your notes containing:

• Colour names, values and roles.
• Fonts and the type scale.
• The spacing scale and its uses.
• Corner radius, border and shadow values.
• A short description of each component and its states.

If you write any CSS yourself, store these values as variables so they're defined once and reused everywhere. Many website builders let you set global colours and fonts, which does much of this work for you; take advantage of those settings rather than styling each section by hand.

Keeping it alive

A design system for one site doesn't need governance meetings, but it does need a habit:

• When you add something new, check whether an existing component or style would do.
• If you genuinely need something new, add it to the document so it becomes part of the system.
• Every few months, click through the site looking for drift: stray colours, odd sizes, mismatched buttons. Bring them back into line.

Tiny design system checklist

• A small, named colour palette with roles.
• One or two fonts and a five-level type scale.
• A spacing scale based on a single unit.
• Fixed values for corners, borders and shadows.
• Defined buttons, fields and cards, including their states.
• Everything written down in one place.
• A regular check for drift.

A few hours spent on these decisions saves countless small ones later, and your site will feel calmer and more professional for it.