The design system under every block
Carbon is IBM’s open-source design system. A decade of engineering, research, and accessibility work sits behind every component.
It is built on five foundations, which Carbon calls elements: color, icons, spacing, themes, and typography. Together they give you a real type scale, consistent spacing, and named values instead of one-off guesses.
AWT brings that system to the block editor without watering it down. The markup, the class names and the behavior match Carbon’s own reference build, so a page built with AWT blocks follows the same rules as a Carbon application. Below: a short summary of each element, with a link to Carbon’s documentation for the full story.
Where AWT departs from Carbon
Carbon is the reference AWT follows. In a few places, following it would fall short of the accessibility standard AWT is built to meet. There, AWT departs from Carbon on purpose. For most of them, a setting brings back Carbon’s default implementation.
Text field borders
Carbon’s text fields have only bottom borders.
AWT draws the border on all four sides instead. Any single field can go back to Carbon’s look with its toggle.
The Select placeholder option
Carbon’s select hides the first option (Choose an option) from screen readers. Some screen readers announce how many options a select has, and a hidden option is still counted even though its label is not read. So a select with four choices can be announced as having five. AWT keeps that first option visible and disabled instead. It still cannot be picked, and the announced option count is correct.
Link focus indicator
In Carbon’s default look, a link’s focus indicator is 1 pixel thick. AWT draws all focus indicators at least 2 pixels thick.
Button focus indicator
Carbon marks a focused button with three layers at once: it recolors the button’s existing thin border, draws a ring just inside it, and adds a third ring in the button’s own background color. The result is two rings of different thickness, built from a border and two shadows. Together they meet the requirements, but the indicator’s thickness is hard to measure.
AWT draws one outline, 2 pixels thick, just outside the button. Turn it off under AWT Settings to bring back Carbon’s default implementation.
Link underlines
Carbon’s stand-alone links have no underline by default. Underlines are possible, but they take an extra setting.
AWT underlines links by default. You can turn underlines on or off separately in each location: main content, the header, side navigation, breadcrumbs and the footer.
Form text size
Carbon sets a field’s label, hint and error message one step smaller than the text a visitor types into the field. That makes the text people must read to fill in your form the smallest text on the page.
AWT sets all three at the same size as the rest of the form. Turn this off under AWT Settings to bring back Carbon’s default sizes.
Notification type
Carbon shows whether a notification is an error, a warning, a success or information through its color and icon. Screen readers hear the icon only as “notification”.
AWT starts the title with the type, as text only screen readers read, so a warning is read as “Warning: Storage almost full”.
Read our accessibility statementColor
The layering model is at work right here: this band sits on the layer-01 token, one step above the page background.
Carbon does not guess at colors. Every surface, text, border, and state has a named token, and the token decides the actual color in each theme. AWT loads the full set, over 300 tokens per theme, and replaces the default WordPress palette with 37 Carbon color presets: background, layer, text, link, border, support, and button roles. When you pick “Text secondary” or “Support error” in the editor, you are using the same role a Carbon application would.
Color at the Carbon Design System site (opens in a new tab)
Icons
AWT’s icon picker searches Carbon’s icon library: 2,536 icons, found by name, alias, or category, so “trash” finds the trash can. Ten blocks use the same picker, from buttons and links to the standalone Icon block. Icons render as inline SVG in Carbon’s 16, 20, 24, and 32 pixel sizes, and each one is either decorative (hidden from screen readers) or meaningful (with a required label). A few of them, live:
Spacing
Carbon spaces everything on one 13-step scale, from 0.125rem to 10rem. AWT uses that scale everywhere spacing is set: the editor’s spacing presets, the inside padding of every Section, and a per-block control for the gap below each block. With no free-hand values to drift from the scale, AWT pages keep an even rhythm without anyone measuring.
Spacing at the Carbon Design System site (opens in a new tab)
Themes
Carbon defines four themes: two light (White, Gray 10) and two dark (Gray 90, Gray 100). AWT includes all four, and one setting picks your site’s light and dark pairing. Visitors get the mode they prefer: the site honors their system preference, offers a toggle in the header, and remembers their choice. You can also pin any section to one theme. This band is pinned to Gray 100, so it stays dark on a light page, and every color token re-resolves automatically.
Typography
Carbon’s typeface is IBM Plex, and it is what you are reading now. AWT bundles IBM Plex Sans, Mono, and Serif with the theme and serves them from your own site, with no calls to outside font servers. Text sizes come from Carbon’s type scale: 15 named steps, from label-01 up to display-04, so headings and body copy keep Carbon’s proportions. A site-wide size scale setting (compact, default, comfortable) resizes all of it at once, because every size is defined relative to one root.
The same system, block by block
These five foundations run through over 50 blocks and over 40 patterns.