Sign In

Canvas Design Tokens, Patterns, and Accessibility

Canvas separates authored content from presentation by using native blocks and stable semantic roles. The theme supplies the visual interpretation; WordPress stores the block content.

Semantic tokens​

The theme defines reusable roles for colors, typography, spacing, radii, shadows, and gradients in theme.json. Style variations can change the values behind those roles while preserving the same slugs. Prefer these presets over hard-coded colors, arbitrary spacing, or inline CSS.

Templates, parts, and patterns​

Canvas includes eleven templates, seven template parts, and 38 core-block patterns. The patterns cover headers, footers, heroes, features, benefits, process steps, media splits, architecture, comparison, pricing, FAQ, calls to action, article structures, related content, documentation navigation, and full-page starters.

Patterns use core Gutenberg blocks. Canvas adds presentational wrapper and slot classes where a stable semantic target helps editors or compatible tools, but those classes do not become a separate content model.

Style variations​

Cloud, Aurora, Emerald, Coral, Slate, Warm, and High Contrast share the same token vocabulary. Evaluate a variation across navigation, body copy, buttons, cards, tables, Details blocks, focus indicators, and mobile layouts before adopting it for a live site.

Accessibility foundation​

Canvas includes visible focus handling, reduced-motion behavior, responsive layout rules, RTL compatibility, and editor/frontend parity. These foundations do not replace editorial accessibility work:

  • keep heading levels sequential;
  • write meaningful link and button labels;
  • use alt text only for informative images;
  • preserve sufficient contrast when overriding tokens;
  • test keyboard navigation after changing navigation or interactive layouts;
  • review content at narrow and zoomed viewports.

Canvas includes the accessibility-ready theme tag, but final accessibility also depends on authored content, installed blocks, plugins, and site-specific changes.