The Design Language System
Corex has a WordPress-native Design Language System — its UI organized into six categories (Foundations,
Components, Blocks, Patterns, Templates, Guidelines), all token-driven and accessible. It lives in corex-ui
(one home, no separate plugin).
The full DLS — foundations (all token groups incl. motion/focus/z-index), every component with when-to-use / when-not-to-use, patterns, templates, the client-readiness matrix, and the evidence-based gap analysis — is in the dedicated Design System section. This page is the short orientation.
The taxonomy
Section titled “The taxonomy”| Category | What it is | Examples |
|---|---|---|
| Components | small UI atoms | alert, badge, breadcrumbs, copyright |
| Blocks | composed corex/* sections | hero, call-to-action, stat, testimonial, pricing, accordion, tabs, team, gallery, posts |
| Patterns | composed sections | hero section, content section, pricing table |
| Templates | FSE templates | front page, page, single, archive, 404 |
| Guidelines | the rules | design tokens, accessibility, RTL |
The DesignSystemCatalog (in corex-ui) enumerates these, and a drift test guarantees every listed Block
maps to a real registered corex/* block — the catalog can never list something that doesn’t exist.
The client-readiness matrix maps minimum company-site needs to existing Corex or WordPress-native mechanisms. It is the scope guard for the first client sites: native-first, token-only, RTL-ready, accessible, and not a final Corex visual redesign.
Components
Section titled “Components”The component layer covers feedback/status atoms, including:
corex/alert— an accessiblerole="alert"message with an info / success / warning / error variant.corex/badge— a small labelled, token-styled span.
Every component is server-rendered (dynamic), token-only (no hardcoded color/size), escaped, i18n-ready, and RTL-correct via logical properties — the same rules as the rest of the library.
Guidelines
Section titled “Guidelines”- Tokens are the single source of truth —
theme.json(+ per-sitebrand.json), exposed as CSS custom properties. No component hardcodes a color, size, or font. - Accessibility — WCAG 2.2 AA: roles, labels, focus, and status announced to assistive tech.
- RTL — logical CSS properties (
margin-inline,inset-inline, …) so Arabic is correct by default.
See also
Section titled “See also”- Create a block (CLI) — scaffold your own
corex/*component withmake:block. - Apply a brand — the tokens the system consumes.
- Client readiness matrix — classify company-site needs before adding UI scope.