The Atlas
119 design systems,
mapped.
The whole gallery, placed by the numbers each system publishes: its primary colour inside the sRGB gamut, corner radius against body size, a similarity map across all of it, and the Agent-Ready Index as rings. Where a system publishes nothing to place it by, it waits on a shelf below the map rather than at a coordinate someone made up. Drag it, click a point, or place your own system to see who it sits next to.
drag to orbit · scroll to zoom · click a pointdrag · pinch · tap a point
Primary colours in OKLCH
What the map shows
Four habits the industry has, in numbers you can check.
Colour
71 of the 105 verified primaries are blues — 68% of them. The next band, reds & pinks, has 9. 6 systems lead with a green and 5 with an orange or yellow. 7 use black or grey as the primary: Polaris, Base Web, shadcn/ui, RadianUI, Square Design System, Audi UI, Geist, Porsche Design System, Skapa, Redwood, Horizon, Canvas, Siemens iX, Mística, GC Design System, Lyne, LINE Design System, Salt, DB UX Design System, VTEX Styleguide and Fusion Design. 1 of 88 default to a dark surface. The remaining 14 of 119 publish no colour anyone has verified — the gallery gives those cards a neutral ground for the same reason.
Feel
Across the 94 systems with a published spec, the most common default radius is 8px, used by 29 of 88: 43 systems sit at 4px or below, 34 at 8px or above. Government systems are the sharpest group — a median of 0px across 10. Body text is 16px in 40 of 79; 27 run at 14px or less. The spacing base splits 44 to 34 between 4px and 8px.
Similarity
The similarity layout keeps the three directions of greatest spread across all seven traits, so distance is a fair summary of likeness and nothing else. It is the view for shortlisting: pick a system you already like and read off the three that would feel most familiar to your team.
Readiness
37 of the 119 systems here are in the Agent-Ready Index (audited 2026-09-04). 19 score zero, 8 score one, 7 score two, and 2 — Carbon Design System — score three. Nothing scores four or five, which is why the top two rings are empty. The other 82 have not been audited yet. See the full Index.
How systems are placed
- Primary colour.The spec token ranked highest by its own name and role — brand, then primary, then accent, action, link or button — after dropping status colours, plain text tokens and unbranded surfaces. If nothing qualifies, the first colour in the spec, which is the rule each system's design.md already uses. A system with no style spec falls back to
coverTint(), the same verified-brand-colour rule the gallery uses for cards without a screenshot; it returns nothing rather than guess, and 14 systems end up with no colour at all. - Radius, body, spacing. The radius token marked default, base, medium or control, otherwise the median of the finite radii. The body-text step, preferring the one marked regular or default. The declared spacing base, otherwise the smallest step. Where a spec had no usable value the trait is defaulted and marked in the list below — 15 of 94 today. These traits come only from a full style spec, so the 25 systems without one are placed on no layout but Readiness.
- OKLCH.Hexes are converted with Björn Ottosson's reference matrices. The gamut shell is the surface of the sRGB cube pushed through the same conversion, so its bulges and its yellow spike are real, not drawn.
- Similarity. Eight standardised features — lightness, chroma, hue as a chroma-weighted unit vector, surface lightness, log radius, body size, spacing — reduced to three principal components. Nearest neighbours are measured in the full feature space, not on the screen.
- Why the shelf isn't filled in.Two automated routes were tried and measured against the systems whose brand colour is already published, so the answer is checkable rather than assumed. Reading the live site's served CSS agreed with the published token on 2 of 5 — it returns whatever colour the docs theme uses most, which on a Docusaurus or Tailwind site is the framework's default, not the system's brand. The site's declared
theme-coloragreed on 0 of 2, because it describes browser chrome rather than a token. Neither clears the bar for a map whose whole claim is that the numbers can be checked, so these systems stay on the shelf until their maintainers publish a spec. - Confidence. 5 of the 94 specs are marked low confidence in
lib/design-style-specs.ts; the map shows them like any other and the panel says so.
List view — all 119 systems and their numbers
| System | Primary | L · C · h | Radius | Body | Spacing | Index | |
|---|---|---|---|---|---|---|---|
| AcornMozilla / Firefox | #0060df | 0.52 · 0.208 · 259° | 8px | 15px | 4px | — | |
| Airbnb Design SystemAirbnb | #ff5a5f | 0.69 · 0.200 · 22° | 8px | 16px | 8px | 0 / 5 | |
| Alibaba Design SystemAlibaba | #ff6a00 | 0.70 · 0.201 · 45° | 4px | 14px | 4px | — | |
| Ant DesignAnt Group | #1677ff | 0.60 · 0.219 · 259° | 6px | 14px | 8px | 2 / 5 | |
| Apple Human Interface GuidelinesApple | #007aff | 0.60 · 0.218 · 257° | 8px | 17px | 8px | 0 / 5 | |
| AriakitAriakit | #007acc | 0.57 · 0.155 · 249° | 8px | 16px | 4px | — | |
| Asana Design SystemAsana | #f06a6a | 0.69 · 0.166 · 22° | 8px | 14px | 4px | — | |
| Atlassian Design SystemAtlassian | #0c66e4 | 0.54 · 0.207 · 259° | 3px | 14px | 8px | 2 / 5 | |
| Audi UIAudi | #000000 | 0.00 · 0.000 · 0° | 0px | 16px | 4px | 0 / 5 | |
| Australian Government Design SystemAustralian Government | #00698f | 0.49 · 0.100 · 232° | 4px | 16px | 8px | — | |
| BackpackSkyscanner | #0770e3 | 0.56 · 0.194 · 257° | 12px | 16px | 8px | 2 / 5 | |
| Bank of Canada Design SystemBank of Canada | #005c5b | 0.43 · 0.073 · 193° | 4px | 16px | 8px | — | |
| Base WebUber | #000000 | 0.00 · 0.000 · 0° | 8px | 16px | 4px | — | |
| BBC GEL (Global Experience Language)BBC | #eb0000 | 0.59 · 0.242 · 29° | 0px | 16px | 8px | 0 / 5 | |
| BlueprintPalantir | #2d72d2 | 0.56 · 0.163 · 258° | 2px | 14px | 10px | — | |
| BootstrapBootstrap Team | #0d6efd | 0.58 · 0.228 · 260° | 6px | 16px | 16px | — | |
| BraidSEEK | #0d3880 | 0.36 · 0.130 · 260° | 8px | 16px? | 4px | — | |
| BulmaBulma Team | #00d1b2 | 0.77 · 0.143 · 177° | 4px | 16px | 4px | — | |
| Canada.ca Design SystemGovernment of Canada | #eb2d37 | 0.61 · 0.223 · 25° | 0px | 20px | 5px | — | |
| CanvasHubSpot | — | — | — | — | — | — | |
| Canvas Design SystemWorkday | #0875e1 | 0.57 · 0.186 · 255° | 4px | 16px | 4px | 1 / 5 | |
| Carbon Design SystemIBM | #0f62fe | 0.56 · 0.243 · 262° | 0px | 16px | 8px | 4 / 5 | |
| Cedar Design SystemREI | #295e33 | 0.43 · 0.090 · 148° | 4px | 16px | 8px | — | |
| Chakra UIChakra UI | #3182ce | 0.59 · 0.140 · 250° | 6px | 16px? | 4px | 2 / 5 | |
| Cloudscape Design SystemAmazon Web Services | #0972d3 | 0.55 · 0.171 · 254° | 8px | 14px | 4px | 1 / 5 | |
| Columbia Design SystemColumbia University | #1d4f91 | 0.43 · 0.121 · 257° | 3px | 16px | 8px | — | |
| DB UX Design SystemDeutsche Bahn | — | — | — | — | — | — | |
| Design System for Digital AgencyDigital Agency, Government of Japan | #0017c1 | 0.38 · 0.245 · 264° | 8px? | 16px? | 8px? | — | |
| DesignsystemetDigdir (Norwegian Digitalisation Agency) | #0062ba | 0.50 · 0.159 · 254° | — | — | — | — | |
| DKFDSDanish Government | #004d99 | 0.43 · 0.140 · 255° | — | — | — | — | |
| Dropbox Design SystemDropbox | #0061fe | 0.55 · 0.245 · 261° | 8px | 16px | 8px | 0 / 5 | |
| Duolingo Design SystemDuolingo | #58cc02 | 0.75 · 0.229 · 138° | 12px | 17px | 8px | — | |
| eBay Design SystemeBay | #f7b100 | 0.81 · 0.167 · 80° | 8px | 14px | 8px | 0 / 5 | |
| Elastic UIElastic | #0077cc | 0.56 · 0.158 · 250° | 6px | 14px | 16px | — | |
| Element PlusElement Plus | #409eff | 0.69 · 0.168 · 252° | 8px? | 16px? | 8px? | — | |
| European Commission Design SystemEuropean Commission | #004494 | 0.40 · 0.145 · 257° | 0px | 16px | 4px | — | |
| EvergreenSegment | #3366ff | 0.57 · 0.234 · 265° | 4px | 14px | 8px | — | |
| Fluent Design SystemMicrosoft | #0f6cbd | 0.53 · 0.149 · 252° | 4px | 14px | 4px | 0 / 5 | |
| FoundationZURB | #1779ba | 0.56 · 0.131 · 245° | 3px | 16px | 16px | — | |
| Fusion DesignAlibaba | — | — | — | — | — | — | |
| GardenZendesk | #04444d | 0.35 · 0.060 · 210° | 4px | 18px? | 4px | — | |
| GC Design SystemCanadian Digital Service | — | — | — | — | — | — | |
| GeistVercel | #000000 | 0.00 · 0.000 · 0° | 8px | 16px | 4px | 0 / 5 | |
| GestaltPinterest | #e60023 | 0.58 · 0.236 · 26° | 8px | 16px | 4px | 0 / 5 | |
| GOV.UK Design SystemUK Government | #1d70b8 | 0.53 · 0.136 · 250° | 0px | 16px | 5px | 0 / 5 | |
| GrommetHewlett Packard Enterprise | #7d4cdb | 0.55 · 0.207 · 294° | 4px | 18px | 12px | — | |
| HeliosHashiCorp | #1060ff | 0.55 · 0.246 · 262° | 6px | 13px | 4px | 1 / 5 | |
| Helsinki Design System (HDS)City of Helsinki | #0000bf | 0.36 · 0.252 · 264° | 0px | 16px | 4px | — | |
| HeroUIHeroUI | #006fee | 0.57 · 0.209 · 258° | 12px | 16px? | 4px | — | |
| HorizonServiceNow | — | — | — | — | — | — | |
| HSBC Design SystemHSBC | #db0011 | 0.56 · 0.229 · 28° | 0px | 16px | 4px | — | |
| Instructure UIInstructure (Canvas LMS) | #0374b5 | 0.54 · 0.133 · 244° | 4px | 16px | 4px | — | |
| Johns Hopkins Design SystemJohns Hopkins Medicine | #002d72 | 0.32 · 0.128 · 260° | 0px | 16px | 8px | — | |
| KumoCloudflare | #f6821f | 0.72 · 0.172 · 54° | — | — | — | — | |
| LeafyGreen UIMongoDB | #00ed64 | 0.83 · 0.237 · 148° | — | — | — | — | |
| LexiconLiferay | #0b5fff | 0.55 · 0.248 · 262° | 4px | 16px | 4px | — | |
| Lightning Design SystemSalesforce | #0176d3 | 0.56 · 0.167 · 252° | 4px | 13px | 4px | 1 / 5 | |
| LINE Design SystemLINE | — | — | — | — | — | — | |
| LinearLinear | #5e6ad2 | 0.57 · 0.159 · 275° | 8px | 15px | 4px | 0 / 5 | |
| LyneSBB (Swiss Federal Railways) | — | — | — | — | — | — | |
| Mailchimp Design SystemMailchimp | #ffe01b | 0.91 · 0.184 · 99° | 8px | 16px | 8px | 0 / 5 | |
| MantineMantine | #228be6 | 0.63 · 0.164 · 250° | 8px | 16px | 16px | 2 / 5 | |
| Material DesignGoogle | #6750a4 | 0.50 · 0.130 · 294° | 12px | 14px | 4px | 0 / 5 | |
| Material UIMUI | #1976d2 | 0.56 · 0.163 · 253° | 4px | 16px | 8px | 2 / 5 | |
| MísticaTelefónica | — | — | — | — | — | — | |
| MomentumCisco / Webex | #0070d2 | 0.55 · 0.173 · 254° | 8px | 14px | 8px | — | |
| Naive UITuSimple | #18a058 | 0.62 · 0.153 · 153° | 8px? | 16px? | 8px? | — | |
| New Zealand Government Design SystemDepartment of Internal Affairs, New Zealand Government | #005ea5 | 0.48 · 0.136 · 250° | — | — | — | — | |
| NHS Design SystemNational Health Service | #005eb8 | 0.49 · 0.161 · 255° | 4px | 19px | 8px | 1 / 5 | |
| NL Design SystemICTU, on behalf of the Dutch Ministry of the Interior (BZK) | #005ea5 | 0.48 · 0.136 · 250° | — | — | — | — | |
| NordNordhealth | #3559c7 | 0.50 · 0.176 · 266° | 8px | 16px | 4px | — | |
| OdysseyOkta | #546be7 | 0.58 · 0.188 · 271° | 6px | 14px | 4px | — | |
| Ontario Design SystemGovernment of Ontario | #0066cc | 0.52 · 0.177 · 256° | 4px | 18px | 8px | — | |
| OrbitKiwi.com | #00a58e | 0.65 · 0.119 · 178° | 4px | 14px | 4px | — | |
| PajamasGitLab | #7759c2 | 0.55 · 0.158 · 294° | 8px | 14px | 8px | 1 / 5 | |
| PasteTwilio | #f22f46 | 0.63 · 0.226 · 21° | 4px | 18px? | 4px | 0 / 5 | |
| PatternFlyRed Hat | #0066cc | 0.52 · 0.177 · 256° | 16px | 14px | 16px | 0 / 5 | |
| PolarisShopify | #303030 | 0.31 · 0.000 · 90° | 8px | 14px | 4px | 1 / 5 | |
| PonchoGovernment of Argentina | #232d4f | 0.31 · 0.063 · 270° | — | — | — | — | |
| Porsche Design SystemPorsche | #010205 | 0.09 · 0.015 · 262° | 8px | 16px? | 4px | — | |
| Priceline OnePriceline | #0068ef | 0.55 · 0.219 · 259° | 4px | 16px | 4px | — | |
| PrimerGitHub | #0969da | 0.54 · 0.191 · 257° | 6px | 14px | 4px | 3 / 5 | |
| RadianUIRadian | — | — | — | — | — | — | |
| Radix UIWorkos | #3e63dd | 0.54 · 0.191 · 267° | 6px | 16px? | 4px | 0 / 5 | |
| Rakuten Design SystemRakuten | #bf0000 | 0.51 · 0.207 · 29° | 4px | 14px | 8px | — | |
| RedwoodOracle | — | — | — | — | — | — | |
| Ring UIJetBrains | #008eff | 0.64 · 0.195 · 252° | 4px | 13px | 8px | — | |
| SaltJ.P. Morgan | — | — | — | — | — | — | |
| SAP FioriSAP | #0070f2 | 0.57 · 0.213 · 258° | 8px | 14px | 8px | — | |
| ScaleDeutsche Telekom | #2238df | 0.46 · 0.247 · 267° | — | — | — | — | |
| SeedsSprout Social | #2bb656 | 0.68 · 0.178 · 149° | 4px | 16px | 8px | — | |
| Semantic UISemantic UI | #2185d0 | 0.60 · 0.144 · 247° | 4.66px | 14px | 14px | — | |
| Semi DesignByteDance | #0064fa | 0.56 · 0.237 · 261° | 8px? | 16px? | 8px? | — | |
| shadcn/uishadcn | #18181b | 0.21 · 0.006 · 286° | 8px | 16px? | 4px | 3 / 5 | |
| ShorelineVTEX | #3993f4 | 0.66 · 0.167 · 253° | — | — | — | — | |
| Siemens iXSiemens | — | — | — | — | — | — | |
| Singapore Government Design SystemSingapore Government | #0f71bb | 0.54 · 0.141 · 249° | 5px | 16px | 8px | — | |
| SkapaIKEA | — | — | — | — | — | — | |
| SmartHR Design SystemSmartHR | #0077c7 | 0.56 · 0.152 · 248° | 8px? | 16px? | 8px? | — | |
| SpectrumAdobe | #2680eb | 0.61 · 0.181 · 256° | 8px | 14px | 8px | 2 / 5 | |
| SpindleCyberAgent | #2d8c3c | 0.57 · 0.146 · 146° | — | — | — | — | |
| Splunk UISplunk | #f38037 | 0.72 · 0.164 · 49° | 3px | 14px | 4px | — | |
| Square Design SystemSquare | #000000 | 0.00 · 0.000 · 0° | 6px | 16px | 8px | 0 / 5 | |
| Stacks (Stack Overflow Design System)Stack Overflow | #f48024 | 0.72 · 0.171 · 53° | 3px | 15px | 4px | — | |
| Stripe Design SystemStripe | #635bff | 0.58 · 0.235 · 278° | 8px | 15px | 4px | 1 / 5 | |
| Tailwind PlusTailwind Labs | #4f46e5 | 0.51 · 0.230 · 277° | 8px | 16px? | 4px | 0 / 5 | |
| TDesignTencent | #0052d9 | 0.49 · 0.217 · 261° | — | — | — | — | |
| U.S. Web Design SystemU.S. Government | #005ea2 | 0.47 · 0.132 · 249° | 4px | 17px | 8px | 0 / 5 | |
| UC Berkeley Design SystemUC Berkeley | #003262 | 0.32 · 0.098 · 253° | 0px | 16px | 8px | — | |
| VantYouzan | #1989fa | 0.63 · 0.192 · 254° | 8px? | 16px? | 8px? | — | |
| Vibe Design Systemmonday.com | #0073ea | 0.57 · 0.200 · 257° | 8px | 16px | 8px | — | |
| Visa Design SystemVisa | #1434cb | 0.43 · 0.231 · 266° | 8px | 16px | 4px | — | |
| VitaminDecathlon | #3643ba | 0.45 · 0.185 · 272° | 8px | 16px | 4px | — | |
| VTEX StyleguideVTEX | — | — | — | — | — | — | |
| VuetifyVuetify Team | #1867c0 | 0.52 · 0.157 · 255° | 4px | 16px | 4px | — | |
| Washington Post Design SystemThe Washington Post | #166dfc | 0.58 · 0.227 · 261° | 4px | 16px | 4px | — | |
| Wonder BlocksKhan Academy | #1865f2 | 0.55 · 0.224 · 262° | 8px | 16px | 8px | — | |
| WordPress ComponentsWordPress / Automattic | #3858e9 | 0.53 · 0.221 · 268° | 4px | 13px | 4px | — | |
| Yale Design SystemYale University | #00356b | 0.33 · 0.107 · 254° | 0px | 17px | 8px | — |