Design system examples: what the public ones share, scaled down to one site
The well-known public design systems differ in size and style, but they share a structure: foundations (tokens for colour, type, spacing), components with their states, patterns for common tasks, and guidance on when to use each. A small website needs the same structure in miniature: one typeface, a few colour roles, a spacing scale, a radius rule and half a dozen components.
Four public design systems worth studying
- GOV.UK Design System
- The UK government's design system is organised into styles (layout, type, colour, images), components (forms, navigation, tables) and patterns for tasks such as entering an address or creating an account. Its patterns, backed by research across government services, are the part most worth reading for any form-heavy site.
- IBM Carbon
- IBM's open-source Carbon covers foundations such as grid, colour, type, motion and themes, more than forty components, patterns, and a full data-visualisation section. It shows how a system handles light and dark themes and dense product interfaces.
- U.S. Web Design System
- The USWDS offers design tokens for colour, type, spacing and shadow, components with accessibility guidance, utility classes, patterns and page templates. Its token naming is a good model for anyone setting up variables.
- GitHub Primer
- Primer is GitHub's system, with separate product and brand interfaces, an icon set and design tokens it calls primitives. It shows one company running two visual languages from shared foundations.
What they have in common
- Tokens before components. Colour, type, spacing and radius are decided once and named; components only refer to the names.
- Components with every state. Each button, field and link is documented in normal, hover, focus, disabled and error states, not just its resting look.
- Patterns for tasks, not only parts. How to ask for a date of birth matters as much as what a text field looks like.
- Accessibility written in. Contrast, focus, labelling and keyboard behaviour are part of each component's page, not an appendix.
- Rules about when not to use something. Good systems say when a component is the wrong choice.
- An owner. A team decides changes and publishes versions, so the system stays true to the product.
What they don't have in common is look. GOV.UK is plain and functional by intent; Carbon is engineered and dense; Primer serves developers. A design system is a way of making decisions stick, not a style.
A small design system example
Scaled down to a five-page site for a single business, the same structure fits on a page. Here is one for an imaginary bakery:
| Part | Decision |
|---|---|
| Type | One rounded sans-serif in two weights; body 18px; headings on a 1.25 scale |
| Colour roles | Cream ground, white surface, dark brown text, warm grey muted text, one tomato-red action colour |
| Spacing | 8, 16, 24, 40, 72 and 120px; sections 120px apart on desktop, 72px on phones |
| Radius | Buttons fully rounded, cards 20px, photos 20px, inputs 12px |
| Components | Primary button, text link, card, price list row, form field, FAQ item |
| Patterns | Order for collection: product, day, time slot, name, phone |
| Voice | First person plural, plain words, prices with the unit ("per loaf") |
That's enough to keep a site consistent for years. The temptation is to add more: a second accent colour, a third typeface for quotes, six button styles. Each addition makes the site a little less coherent. For the theory, see what is a design system; for writing it down, website style guide.
Seven worked website design system examples
Anticode's seven design systems are worked examples of the small version. Each follows the same rules: one font family, one action colour (red, orange, gold, green, teal, blue, pink or black), and radius assigned by role, with separate values for controls such as buttons and for cards and images.
| System | Typeface | Default ground | Radius by role | Signature |
|---|---|---|---|---|
| Editorial | Geist | Light | Pill buttons, square cards | Oversized headline on hairline rules |
| Technical | IBM Plex Sans | Dark | 6px controls, 10px cards | Blueprint grid with amber marks |
| Luxury | Jost | Dark | Square throughout | Light display type, wide-tracked capitals |
| Playful | Fredoka | Light | Pill buttons, 28px cards | Rounded type and sunflower blobs |
| Brutalist | Archivo | Light | Square throughout | Condensed headlines, 2px rules, hard shadows |
| Organic | Figtree | Light | Pill buttons, 22px cards | Arched hero photo, hand-drawn underline |
| Swiss | Inter Tight | Light | Square throughout | Numbered sections on a strict grid, one red |
The Designer picks one for each build and holds every section to it, and the Critic checks the result, including that the page uses one font family or one pairing and that shape follows role. Each system also has a light and a dark palette.
Questions people ask
Which design systems are open source?
Many public systems publish their guidance and code openly; IBM describes Carbon as open source, for example. Check each one's licence before reusing code or assets.
Does a small website need a design system?
It needs the decisions a design system records: type, colour roles, spacing, radius and a few components. It doesn't need the team and tooling.
What's the difference between a design system and a UI kit?
A UI kit is a set of drawn components. A design system adds tokens, rules, guidance and code, and someone responsible for keeping them current.
Sources
- GOV.UK Design System, checked
- Carbon Design System, IBM, checked
- U.S. Web Design System (USWDS), checked
- Primer, GitHub's design system, checked