Automattic Design System

Paid Web

Visit Automattic Design System Alternatives

What Automattic Design System is

Automattic Design System is a free, open-source set of packages for building products with shared interface patterns, design tokens, and guidelines. Its public core includes @wordpress/ui, @wordpress/dataviews, @wordpress/theme, @wordpress/icons, and @wordpress/admin-ui. The UI package provides accessible, themeable React components for WordPress interfaces, while DataViews supplies patterns for working with collections through tables, grids, lists, filters, sorting, pagination, bulk actions, and view switching. Theme defines color, spacing, radius, and typography tokens and supports generated light and dark themes. Public tokens are available as CSS custom properties following the Design Token Community Group specification; the stated accessibility baseline is WCAG 2.1 AA. The website maps how the packages fit together and how to contribute, while component details and guidance sit in repositories and Storybooks. Packages typically have matching Figma libraries, which the site says stay aligned with the shipping codebase. An MCP server provides AI agents with component documentation, usage guidance, and token information. The overall system layer is described as internal, although its core packages are public.

Who it suits

The system is suited to designers and engineers building WordPress interfaces or products that need reusable components and shared design tokens. It also provides documentation and token context for AI agents.

What it does well

Free and open source.
UI package provides accessible, themeable React components.
DataViews includes tables, filters, and bulk actions.
Theme supports light and dark themes.
Accessibility baseline is WCAG 2.1 AA.

What to know first

The overall design system layer is described as internal only.
Component details and guidelines live in repositories and Storybooks.
@wordpress/ui is distributed through npm, not window.wp.

Limits

The site describes the Automattic Design System layer as internal only, although its core packages are marked public. The @wordpress/ui package is distributed through npm and is not available under window.wp.

Getting started

Visit https://system.automattic.design/ to review the system and its packages.
Use the package repositories and Storybooks for component details and guidance.
Use the corresponding Figma library where one is available.
Install @wordpress/ui through npm for React interfaces.
Open an issue or pull request in the Gutenberg repository to contribute; use Slack for questions.

Verdict

Automattic Design System offers public packages for interface components, data patterns, icons, and design tokens, with related Figma libraries and Storybooks. Note the distinction between those public packages and the system layer, which the site describes as internal.

Questions

Is Automattic Design System free?

Yes. It is listed as free and open source.

What are its core packages?

The public core packages are @wordpress/theme, @wordpress/ui, @wordpress/icons, @wordpress/dataviews, and @wordpress/admin-ui.

What platforms does it support?

Web is the listed platform.

Does it have Figma libraries?

Packages typically have a corresponding Figma library and Storybook. The Figma libraries are kept in step with the shipping codebase.

How can contributors participate?

Development for the public packages takes place in the Gutenberg repository, where contributors can open an issue or pull request. The site also suggests Slack for questions.

How is @wordpress/ui distributed?

It is distributed using npm and is not available under window.wp.

Facts from Automattic Design System's own pages

Accessibility: The design principles set a baseline of WCAG 2.1 AA across the board. · system.automattic.design, 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. · system.automattic.design, 9 Oct 2026
Contribution: Development for the public packages takes place in the Gutenberg repository, where contributors can open an issue or pull request. · system.automattic.design, 9 Oct 2026
Core packages: The public core packages listed are @wordpress/theme, @wordpress/ui, @wordpress/icons, @wordpress/dataviews, and @wordpress/admin-ui. · system.automattic.design, 9 Oct 2026
Data interfaces: DataViews provides patterns for structured data, including tables, filters, pagination, empty states, and bulk actions. · system.automattic.design, 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. · system.automattic.design, 9 Oct 2026
Distribution: The @wordpress/ui package is distributed using npm and is not available under window.wp. · system.automattic.design, 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. · system.automattic.design, 9 Oct 2026
Founded: 2005 · system.automattic.design, 28 Sept 2026
Headquarters: San Francisco, CA, USA · system.automattic.design, 28 Sept 2026
Icons: The Icons package provides reusable system icons designed for use in UI components and product interfaces. · system.automattic.design, 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. · system.automattic.design, 9 Oct 2026
Maker: Automattic says it was founded in 2005 and is a remote-first company. · automattic.com, 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. · system.automattic.design, 9 Oct 2026
Purpose: The Automattic Design System is a set of packages used together to build products. · system.automattic.design, 9 Oct 2026
Reusable components: The UI package provides product-agnostic components such as buttons, inputs, form controls, notices, and overlays. · system.automattic.design, 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. · system.automattic.design, 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. · system.automattic.design, 9 Oct 2026
Theme tokens: The Theme package defines semantic variables for color, typography, spacing, radius, and elevation. · system.automattic.design, 9 Oct 2026
Theming: The Theme package supports light and dark modes, user and plugin customization, and dynamic color generation for accessible contrast. · system.automattic.design, 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. · system.automattic.design, 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. · system.automattic.design, 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. · system.automattic.design, 9 Oct 2026

Where Automattic Design System stands on Freedom251

UI Kit Libraries#24 of 26