Automattic Design System
Automattic Design System is a collection of packages for building products with a shared design language.
What Automattic Design System is
Automattic Design System is a collection of packages for building products with a shared design language. Its public core includes @wordpress/ui, @wordpress/icons, @wordpress/dataviews, @wordpress/theme, and @wordpress/admin-ui. The UI package offers accessible, themeable React components for WordPress interfaces, including buttons, inputs, form controls, notices, and overlays. DataViews provides patterns for presenting and acting on collections through tables, grids, lists, filters, sorting, pagination, bulk actions, and view switching. Theme defines color, spacing, radius, and typography tokens, supports generated light and dark themes, and allows user and plugin customization. Public tokens are CSS custom properties following the Design Token Community Group specification, with WCAG 2.1 AA as the stated accessibility baseline. The website maps how the system’s parts fit together and how to contribute; detailed component guidance is in repositories and Storybooks. Packages typically have Figma libraries kept aligned with the shipping code and Storybook instances. An MCP server supplies AI agents with component guidance and token information. The system is free and open source, with web access.
Good
- Core packages cover UI, icons, data views, and themes.
- UI components are accessible and themeable React components.
- Theme supports light and dark modes.
- Accessibility baseline is WCAG 2.1 AA.
- Figma libraries track the shipping codebase.
Watch out
- The overall design-system layer is described as internal only.
- The UI package is distributed through npm, not window.wp.
- Detailed component guidance is maintained in repositories and Storybooks.
Who it suits
It suits designers and engineers building WordPress interfaces or products that need shared components, tokens, and data-view patterns. AI tool developers may also find its published component and token guidance useful.
Verdict
The package set offers a defined design language, reusable UI, and structured data-view patterns. Note the distinction between public core packages and the internally described system layer.
The facts
Each one read from Automattic Design System's own pages, with the date it was checked.
What it does
- Accessibility
- The design principles set a baseline of WCAG 2.1 AA across the board.checked 9 Oct 2026
- AI integration
- The WordPress Design System publishes an MCP server that gives AI agents component documentation, usage guidance, and design token information.checked 9 Oct 2026
- Contribution
- Development for the public packages takes place in the Gutenberg repository, where contributors can open an issue or pull request.checked 9 Oct 2026
- Core packages
- The public core packages listed are @wordpress/theme, @wordpress/ui, @wordpress/icons, @wordpress/dataviews, and @wordpress/admin-ui.checked 9 Oct 2026
- Data interfaces
- DataViews provides patterns for structured data, including tables, filters, pagination, empty states, and bulk actions.checked 9 Oct 2026
- Data views
- @wordpress/dataviews provides higher-level patterns for displaying, filtering, and acting on collections, including tables, grids, lists, sorting, pagination, bulk actions, and view switching.checked 9 Oct 2026
- Distribution
- The @wordpress/ui package is distributed using npm and is not available under window.wp.checked 9 Oct 2026
- Figma and documentation
- Packages typically have a corresponding Figma library and a Storybook instance, and the site says the Figma libraries are kept in lockstep with the shipping codebase.checked 9 Oct 2026
- Icons
- The Icons package provides reusable system icons designed for use in UI components and product interfaces.checked 9 Oct 2026
- Intended users
- The site describes the system as shared across Automattic products, brands, and contexts, and provides guidance for designers and engineers.checked 9 Oct 2026
- Notable limit
- The site describes the Automattic Design System layer as internal only, while its core packages are marked public on the homepage.checked 9 Oct 2026
- Purpose
- The Automattic Design System is a set of packages used together to build products.checked 9 Oct 2026
- Reusable components
- The UI package provides product-agnostic components such as buttons, inputs, form controls, notices, and overlays.checked 9 Oct 2026
- Shared design language
- It provides components, tokens, values, and rules to help developers, designers, and AI tools map mockups to what is built.checked 9 Oct 2026
- Support and contribution
- The site directs contributors to open an issue or pull request in the Gutenberg repository and suggests Slack for questions.checked 9 Oct 2026
- Theme tokens
- The Theme package defines semantic variables for color, typography, spacing, radius, and elevation.checked 9 Oct 2026
- Theming
- The Theme package supports light and dark modes, user and plugin customization, and dynamic color generation for accessible contrast.checked 9 Oct 2026
- Token standards
- The system’s public design tokens are exported as CSS custom properties conforming to the Design Token Community Group specification.checked 9 Oct 2026
- UI components
- @wordpress/ui provides accessible, themeable React components for WordPress interfaces and is intended for new WordPress, plugin, or WordPress-native standalone React interfaces.checked 9 Oct 2026
- What the site provides
- The site maps the design system’s pieces and explains how they fit together and how to contribute; component details and guidelines live in their own repositories and Storybooks.checked 9 Oct 2026
The company
- Founded
- 2005checked 28 Sep 2026
- Headquarters
- San Francisco, CA, USAchecked 28 Sep 2026
- Maker
- Automattic says it was founded in 2005 and is a remote-first company.checked 9 Oct 2026
Alternatives to Automattic Design System
- 1
Figma Wireframe Kit
Free planAndroidiOSWebAPI8.0From $3 a month - 2
Ant Design Icons
Free planAndroidiOSWeb7.1Free plan - 3
Shopify
Web7.1From $29 a month - 4
GitHub Primer
Free planOpen sourceWebAPI7.0Free plan - 5
MUI
Free planWeb6.8From $299 a year - 6
Shadcn Studio Figma UI Kit
Free planWeb6.7$99 one-time