---
title: "Design system"
description: "A design system is the shared set of rules, components and tokens a product is built from. What it contains, when it's worth it, and how we set one up."
canonical: "https://goodtogrid.com/glossary/design-system"
updated: "2026-10-02"
---

# Design system

> A design system is the shared set of rules, components and tokens a product is built from. What it contains, when it's worth it, and how we set one up.

URL: https://goodtogrid.com/glossary/design-system · Glossary · Updated: 2026-10-02

A design system decides the small things once: spacing, type sizes, colours, how a card is built. Then every new screen starts from the same parts instead of from scratch.

- **Term:** Design system
- **Backed by:** 1 case study · 1 for a client
- **Updated:** 2026-10-02

## What “Design system” means

The shared rules and parts an interface is built from: spacing, type, colour, and components such as buttons and cards, documented so designers and developers use the same ones.

## In practice

Every project we do starts with a small system: spacing on an 8px grid, a type scale, and a few colour and surface rules. Components grow from there as the screens need them.

On the KYZN Preschool site, each section got its own card, from timetables to a subject index. They read as one site because every card shares the same bones: radius, type scale and spacing. Consistency came from the system, not from repeating one template.

The payoff shows up at the third feature and at handover, when nobody has to guess which grey or which gap is the right one.

## Related work

- **[KYZN Preschool](https://goodtogrid.com/work/kyzn-preschool)** — Website for a preschool with campuses in Kuningan and BSD. _Client project · Education · Website · 2026_

## Frequently asked questions

### Does a small product need a design system?

A small one, yes. Spacing on an 8px grid, a type scale and a handful of components is enough. The full documentation can wait until more people are building with it.

### Is a design system the same as a UI kit?

A UI kit is a set of parts. A design system adds the rules for using them, so two people building different screens end up with ones that belong together.

### Does it limit what each screen can look like?

It limits the bones, not the shape. Sections can differ as long as they share radius, type scale and spacing.

## Read next

- [8px grid](https://goodtogrid.com/glossary/eight-pixel-grid) (Glossary) — Every size a multiple of eight, so spacing explains itself at handover.
- [Surface steps](https://goodtogrid.com/glossary/surface-steps) (Glossary) — The few background levels a dark interface uses to show what sits on what.
- [UI/UX design](https://goodtogrid.com/services/ui-ux-design) (Service) — Research, flows, prototypes and design systems, from the people who build them.
- [Designing on an 8px grid](https://goodtogrid.com/blog/eight-pixel-grid) (Note) — Why every size on this site is a multiple of eight, and what that one rule buys a client at handover.

[Start a project](https://goodtogrid.com/start-new-project#brief) · [All glossary](https://goodtogrid.com/glossary)