Choosing a design system
What a design system decides, how to pick one, and what changing it later does.
A design system here is a brand and a brief. The brand is the colours, the type and the shapes. The brief is the instructions the builder designs from: how dense the screens run, whether records live in tables or cards, where navigation sits, how detail is revealed.
The usual answer: your own#
If your workspace has a design system of its own, pick it. That is the point of having one — every application you build is in your brand, and the fifth looks like it came from the same company as the first. Nobody re-specifies the colours and nothing drifts because a different person asked for the next one.
Building for a client? Pick theirs. See Your own design systems for how one gets set up, including importing it from a website or a Figma library.
The thirteen below are what you start from when you do not have one yet — and what a new design system of your own is usually copied from.
Picking one of the thirteen#
Pick the one that feels like the software the people using it already use. That is a better test than which one you find most attractive.
Thirteen ship with the platform, in three families.
Enterprise — business software, in six tempers#
| Enterprise Dense | A dense operational console; crisp blue, tiny corners |
| Enterprise Classic | A formal system of record; warm, serif headings, deep red |
| Enterprise Soft | A rounded modern workspace; friendly indigo, roomy |
| Enterprise Slate | A monitoring board of figures and charts; colour is the data |
| Enterprise Contrast | Legibility ahead of elegance; top tabs, large type, loud focus |
| Enterprise Ledger | A printed statement — no chrome, ruled lines, a running balance |
SaaS — the product-company end of the shelf#
| SaaS Aurora | Deep violet, soft light; a bento grid around a generated answer |
| SaaS Signal | Pure neutrals, one electric accent; one full-bleed list, ⌘K first |
| SaaS Bloom | Warm cream and sage, a soft serif; a centred column of prose |
And four of their own#
| Smooth | Editorial and unhurried. The default, and what this documentation is built in |
| Techie | An instrument panel: monospaced, keyboard-first |
| Modern Retro | Cream paper, heavy black outlines, hard offset shadows |
| Jukebox | Mid-century American in a modern frame; capsule shapes, a chrome lip |
The architecture is binding#
This is the part that is easy to underestimate. Each brief states where navigation lives and what the content actually is, and the builder treats that as binding rather than advisory.
Ledger has no navigation chrome at all and reads as a printed statement. Bloom is a centred column of prose. Signal is one full-bleed list with an overlay. Aurora is a bento grid. None of them will draw a sidebar and a table, because left to decide for itself that is what any builder draws every time.
So choosing a design system is choosing a shape of application, not a palette. It is worth a minute's thought at creation, and it is not fatal to get wrong.
Changing it later#
Change how it looks… in the application menu.
When none of them is it#
Describe it yourself, the last tile when you are creating an application, and the box under the systems in Change how it looks… afterwards.
Write what it should be like in your own words — dense and quiet, like a spreadsheet; serif headings; no colour except for warnings; everything on one screen, no wizards.
A design system still supplies the colours, the type and the shape of a screen, because those have to come from somewhere and be consistent. What you write decides everything else, and wins wherever the two disagree. Pick which system it starts from underneath the box.
Colours, type and shapes are re-rendered into the application immediately, in seconds, with no build spent. If the new brief implies a genuinely different page architecture, the workbench says the design system has moved on and offers Restyle, which runs a build to rearrange the screens while keeping the behaviour and the data intact.
Restyling is never automatic. One person changing a shared design system should not silently spend a build on every application in the workspace.
Your own#
A workspace can author its own design systems, including by importing your brand from your guidelines, your website or your Figma library. They are visible only to your workspace. See Your own design systems.