What is a design system? The small-site version
A design system is the set of decisions that make every page of a product look and behave like the same product: tokens for type, colour, spacing and shape, a few reusable components, and rules for using them. Large companies document theirs across hundreds of pages. A small website's can fit on one.
The short answer
Ask a large organisation what is a design system and you'll be shown a website: Google's Material Design, IBM's Carbon or the GOV.UK Design System, each with documentation, code libraries, contribution processes and a team that maintains it. Those are design systems at the scale of thousands of screens and hundreds of designers.
The idea underneath is much smaller. A design system is any agreed set of choices that a whole product follows, written down so that nobody has to make the same decision twice. A café's one-page site has a design system if it uses one typeface, a fixed set of sizes, a palette with defined roles and a consistent button, and someone could add a new section without guessing.
The three layers
- Tokens
- The raw decisions, named: the typeface, the type scale, the colours by role (ground, text, action), the spacing steps, the corner radii, the shadows, the motion curves. Everything else is built from these.
- Components
- The repeated pieces built from tokens: button, link, form field, card, navigation, footer, section heading. Each defined once, with its states (hover, focus, disabled, error).
- Rules
- How the pieces are used: one primary button per section, the action colour only on things that respond to a click, headings never skip a level, images in two aspect ratios only.
Tokens without rules give you a palette that gets used for everything. Components without tokens drift apart. Rules without either are a mood board. All three together are what make a system.
Design system, style guide, component library
The terms overlap. A style guide traditionally describes the brand: logo use, colours, tone of voice. A component library is the coded set of reusable parts. A design system spans both and adds the reasoning: why the button is shaped as it is, when to use a card rather than a list. For a small site the distinction barely matters; what matters is that the decisions exist in one place.
A one-page system for a small site
- Type: one family; five or six sizes; two or three weights; body line height and reading width.
- Colour: ground, surface, text, muted, line, action, and the text colour that sits on the action. A light and a dark version if you need both.
- Spacing: eight or so steps on a 4 or 8 point base, and the rule that space inside a group is smaller than space between groups.
- Shape: corner radius assigned by role, such as pill buttons, slightly rounded cards and square images, rather than one radius on everything.
- Components: button (primary and secondary), text link, form field with label and error, card, header, footer.
- Motion: two or three easing curves and durations, and what changes for reduced motion.
- Voice: three adjectives and a short list of words the site never uses.
That's enough to keep a site of any size consistent, and enough to brief a designer, a developer or an AI model. The guides to design tokens and spacing systems go deeper into the first layers.
Why it matters more with AI
An AI model generating a page without a system makes every choice fresh: a size here, a colour there, a different radius on each card. Each choice is plausible, and the sum looks generated. Holding a build to a design system turns hundreds of small judgements into a handful of fixed ones, which is most of the difference between a page that looks designed and one that looks assembled. Why so many AI websites look the same covers the defaults that fill the gap when no system exists.
Anticode's seven systems
Anticode's Designer locks every design-engine build to one of seven complete design systems. Each has one font family, one action colour and corner radius assigned by role, plus a palette in light and dark versions and a signature element that gives it a recognisable character.
| System | Typeface | Shape | Signature |
|---|---|---|---|
| Editorial | Geist | Pill buttons, square cards | Oversized headline on a hairline rule system |
| Technical | IBM Plex Sans | Slightly rounded | Blueprint grid with amber status marks |
| Luxury | Jost | Square throughout | Light display type with wide-tracked capitals |
| Playful | Fredoka | Pill buttons, soft cards | Rounded type and sunflower shapes |
| Brutalist | Archivo | Square throughout | Condensed black headlines, 2px rules, hard offset shadows |
| Organic | Figtree | Pill buttons, soft cards | An arched hero photo and a hand-drawn underline |
| Swiss | Inter Tight | Square throughout | Numbered sections on a strict grid, with a single red |
You can switch system or action colour at any time and tune individual colour tokens. What you can't do is mix systems on one site, or write a new eighth system of your own in the builder; the constraint is the point. If your brand already has a documented system, pick the closest of the seven and adjust its colours.
Questions people ask
Does a small business website need a design system?
It needs the decisions, not the documentation site. A one-page list of type, colour, spacing, shape and a few components is enough.
What's the difference between a design system and a style guide?
A style guide usually covers brand use: logo, colours and voice. A design system adds the reusable components and the rules for building pages from them.
How long does it take to make a design system?
For a small site, an afternoon of decisions, then refinement as you build. Large organisations take months because they cover many products and teams.