The craft behind the defaults: design systems in AI tools

If you've ever wondered why some websites feel effortlessly coherent while others feel slightly off, the answer is often a design system. Not a single clever choice, but a set of agreed decisions about colour, type, spacing and components, applied everywhere.

Design systems are a discipline in their own right, developed by designers and engineers who needed large products to stay consistent as many people worked on them. Public examples such as Google's Material Design and the GOV.UK Design System show how much thought goes into them: documented rules, tested components, and careful reasoning about why each decision was made.

AI design tools depend on this kind of thinking. Understanding it helps you get more from them.

What a design system actually contains

A design system can be enormous, but at its heart it has three layers.

Tokens: the basic decisions

Tokens are named values for the most fundamental choices:

• Colours: a primary colour, an accent, a background, text colours, colours for success and error.
• Type: the typefaces, and a fixed set of sizes for headings, body text and small print.
• Spacing: a scale of distances, often built from a base unit, so gaps between elements are always one of a few values rather than any number at all.
• Shape: corner radius, border widths, shadow styles.

The power of tokens is that everything else refers to them. A button doesn't have "a blue"; it has "the primary colour". Change the primary colour, and every button changes with it.

Components: reusable building blocks

Components are the pieces a site is assembled from: buttons, cards, navigation bars, forms, testimonials, pricing blocks. Each one is designed once, with all its variations and states (hover, focus, disabled, error), and then reused.

This is why a well-built site has buttons that all look and behave alike. They are literally the same component.

Guidelines: when and how

The third layer is judgement written down. When should you use a primary button versus a secondary one? How many items should navigation hold? How should headings be ordered? Guidelines turn the experience of skilled designers into rules others can follow.

Why AI tools need design systems

An AI tool generating pages without a design system would be like a builder working without measurements. Each page might be reasonable in isolation, but sizes, colours and spacing would drift, and the site would feel subtly unstable.

With a system underneath, the tool's job becomes far more reliable. It isn't inventing every value; it's choosing components and arranging them, using tokens that have already been carefully balanced. The craft lives in the system. The AI applies it.

This also explains why the defaults in a good tool look polished. Someone has thought hard about how a heading relates in size to body text, how much space should separate sections, and which colour combinations stay readable. Those decisions are inherited by every site the tool makes.

How this helps you when editing

Knowing that a design system sits underneath your site changes how you can ask for things.

Ask for system-level changes

Instead of fixing elements one by one, think in terms of tokens:

• "Change the accent colour across the whole site to a deep orange."
• "Make all corners slightly more rounded."
• "Use a little more space between every section."
• "Make all headings a touch smaller."

Requests like these keep the site consistent, because they adjust the underlying decision rather than creating exceptions.

Be wary of one-off exceptions

It's tempting to ask for one special button in a different colour, or one section with its own font. Occasionally that's justified, for example a single highlighted offer. But each exception weakens the system. If you find yourself asking for several, it's usually a sign the underlying choice needs changing instead.

Reuse rather than invent

If you like how one section looks, ask for the same treatment elsewhere: "Style the team section the same way as the services cards." Reusing components keeps the site coherent and tends to give better results than describing a new design from scratch.

Spotting a broken system

Even with a solid system underneath, a lot of individual edits can introduce inconsistencies. Before you publish, look for these signs:

• Too many text sizes. Headings at the same level should be the same size on every page.
• Uneven spacing. Some sections tightly packed, others floating in space.
• Button drift. Buttons that do similar things should look the same.
• Colour creep. More colours than you meant to use, especially slightly different shades of the same one.
• Mixed shapes. Some rounded corners, some square, with no apparent reason.

If you spot any of these, ask for the affected elements to be brought back in line with the rest: "Make all the buttons match the style of the main booking button."

Building your own small system

You don't need technical knowledge to think in system terms. Before or during building, jot down a few decisions:

1. One main colour and one accent, plus a background and a text colour.
2. One or two typefaces, with a sense of mood for each.
3. A spacing feel: airy, balanced or compact.
4. A shape feel: rounded and soft, or crisp and square.
5. One primary button style for the most important action.

Share these with the tool at the start. In Katzero, you can describe them in plain words in the chat, and refer back to them as you refine. Having your own list also makes it easier to check the finished site for consistency.

The people behind the rules

It's easy to see a tidy, consistent website and assume it came about naturally. It didn't. Behind every good default are people who spent time testing type scales, debating spacing, checking contrast and writing down why. Design systems are how that knowledge travels, from large teams to small tools to your own site.

There are also limits worth naming. A design system makes things consistent; it doesn't make them distinctive on its own. If your brand needs a truly original system, with its own typography, components and visual language, that is work for experienced designers. For most sites, though, a well-made system applied with care is exactly what gives a page its quiet confidence, and it's one of the best things an AI tool can borrow from human craft.