This project is not covered by Drupal’s security advisory policy.
Design System API gives Drupal a shared design contract that themes implement and modules build against. Modules use semantic design tokens and pattern specs instead of theme-specific CSS, so their UI looks and behaves consistently under any theme that implements the contract, and acceptably under themes that don't, thanks to built-in defaults.
Watch the explainer (9 min): Design System API on YouTube. It covers the problem, the contract and how modules, themes and site builders each use it.
Chapters:
- 0:21 Same widget, two places
- 0:44 Design system, component library
- 2:02 Count the design systems
- 2:47 The promise
- 3:25 Where it applies
- 4:06 Its type
- 4:39 Its icons
- 5:09 Everything else
- 5:40 Keeping it together
- 6:23 Something to follow
- 7:12 Freedom to override
- 7:28 Freedom of technology
- 7:55 Where each piece stands
- 8:31 Decided together
- 8:50 Join
Built on core's Design Tokens API (W3C DTCG format) and Single Directory Components. Framework-agnostic: works for Twig, vanilla JS and islands in any framework.
Includes:
- the contract vocabulary of semantic tokens, with default values for admin and frontend contexts
- structured design rules (must / should / may) with stable IDs, readable by people, linters and AI assistants
- a resolver that merges contract, theme and project layers and outputs CSS custom properties
- adapters for the core themes Claro and Default Admin
Status: experimental. The vocabulary will change while it's being developed together with theme maintainers.
| Attachment | Size |
|---|---|
| Design System API explainer video thumbnail | 100.58 KB |
Project information
Seeking co-maintainer(s)
Maintainers are looking for help reviewing issues.- Project categories: Developer tools
- Created by d34dman on , updated
This project is not covered by the security advisory policy.
Use at your own risk! It may have publicly disclosed vulnerabilities.
