WordPress Components

# WordPress Components — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by WordPress / Automattic. "WordPress Components" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** WordPress Components
**Owner:** WordPress / Automattic
**Official documentation:** https://developer.wordpress.org/block-editor/reference-guides/components/
**Visual character:** Editor-of-the-web utility: 13px admin chrome, one Gutenberg blue, system fonts, and primitives that power a third of the internet's publishing.

---

## Summary

The @wordpress/components React library providing the reusable UI primitives behind the WordPress block editor.

_Confidence: high. Values are drawn from well-documented public token references._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| WordPress Blue | `#3858e9` | `--wp-admin-theme-color` | Primary actions (Gutenberg accent) |
| Gray 900 Text | `#1e1e1e` | `--wp-components-color-foreground` | Primary text |
| Gray 700 | `#757575` | `--wp-gray-700` | Secondary text |
| White | `#ffffff` | `--wp-components-color-background` | Surfaces |
| Gray 100 | `#f0f0f0` | `--wp-gray-100` | Subtle background |
| Gray 300 Border | `#dddddd` | `--wp-gray-300` | Borders |
| Alert Red | `#cc1818` | `--wp-alert-red` | Errors |
| Alert Green | `#4ab866` | `--wp-alert-green` | Success |
| Alert Yellow | `#f0b849` | `--wp-alert-yellow` | Warnings |

## Typography

- **Body:** System stack — weights 400, 500, 600 — `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| heading-1 | `32px` | `40px` |
| heading-3 | `20px` | `28px` |
| default (UI) | `13px` | `20px` |
| body (editor) | `16px` | `24px` |
| small | `11px` | `16px` |

## Spacing

Base unit: `4px (grid unit)`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `2px` |
| default | `4px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| popover | `0 4px 6px rgba(0,0,0,0.05), 0 4px 40px rgba(0,0,0,0.15)` |

## Motion

| Name | Value |
| --- | --- |
| default | `100ms ease` |

## Quick start (CSS)

```css
/* WordPress Components — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://developer.wordpress.org/block-editor/reference-guides/components/ */

:root {
  /* Color */
  --wp-admin-theme-color: #3858e9; /* Primary actions (Gutenberg accent) */
  --wp-components-color-foreground: #1e1e1e; /* Primary text */
  --wp-gray-700: #757575; /* Secondary text */
  --wp-components-color-background: #ffffff; /* Surfaces */
  --wp-gray-100: #f0f0f0; /* Subtle background */
  --wp-gray-300: #dddddd; /* Borders */
  --wp-alert-red: #cc1818; /* Errors */
  --wp-alert-green: #4ab866; /* Success */
  --wp-alert-yellow: #f0b849; /* Warnings */

  /* Typography */
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;

  /* Type scale */
  --text-heading-1: 32px /* line-height 40px */;
  --text-heading-3: 20px /* line-height 28px */;
  --text-default-ui-: 13px /* line-height 20px */;
  --text-body-editor-: 16px /* line-height 24px */;
  --text-small: 11px /* line-height 16px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  /* Radius */
  --radius-small: 2px;
  --radius-default: 4px;

  /* Elevation */
  --shadow-popover: 0 4px 6px rgba(0,0,0,0.05), 0 4px 40px rgba(0,0,0,0.15);

  /* Motion */
  --motion-default: 100ms ease;
}
```

## Engineering profile

- **Ships for:** React
- **Source model:** Open source

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of WordPress Components by WordPress / Automattic — The @wordpress/components React library providing the reusable UI primitives behind the WordPress block editor. Character: Editor-of-the-web utility: 13px admin chrome, one Gutenberg blue, system fonts, and primitives that power a third of the internet's publishing. Use a primary colour near #3858e9, the typeface "System stack" (or a close equivalent), corner radius around 2px, a spacing rhythm on a 4px (grid unit) base. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official reference

- [WordPress Components documentation](https://developer.wordpress.org/block-editor/reference-guides/components/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/wordpress-components) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._