Design System

Foundations

Foundations records the current shared baseline: ownership, heading roles, system signals, spacing rhythm, and layout constraints. It is a compact working token map, not a full platform catalogue.

Use this page as the proof surface for the roles currently driving shell, runtime, docs, and form styling.

Ownership and reading frame

The shell owns templates, page frame, and specimen-side theme styling. The plugin owns parsing, renderers, component CSS, and the docs runtime.

  • Theme evidence: page templates, Geometries of Use pattern, theme.json, and site.css.
  • Plugin evidence: shortcodes.php, renderer files, az-components.css, and az-docs.css.

Typography ladder

The strongest type role is the page lead. Lower reading headings now follow a restrained current token scale rather than an isolated display style.

Preview

Typography Ladder

Current heading preview

H1 / Display

Page lead

Display title

The page lead is the clearest explicit title role in the current shell.

Shell page lead

Strongest visible title role

H2

Section heading

Current reading heading

Use in ordered reading flow

H3

Subsection heading

Current reading heading

Use in ordered reading flow

H4

Detail heading

Current reading heading

Use in ordered reading flow

H5

Minor heading

Current reading heading

Use in ordered reading flow

H6

Eyebrow-sized heading

Current reading heading

Use in ordered reading flow

System signals

A small set of roles repeats often enough to browse directly: text, primary signal, support signal, accent, muted text, surface, surface subtle, and border treatment.

Preview

Foundations Signals

Current signal preview

Text

Reading text
AAA on white

Base text on surface

Default reading role

Signal primary

Primary signal
AA on white

Primary violet on white

Main signal for links, buttons, and emphasis

Signal support

Support signal
Support role

Support violet on white

Use for chips, preview accents, and secondary emphasis

Accent

Pink support
Sparing accent

Pink accent support

Use sparingly against the violet-led system

Surface

Surface with text
Structural surface

Base surface

Default structural background

Surface subtle

Panel with text
Supporting surface

Violet-soft support surface

Use for cards, notes, inventories, and preview frames

Border

Structural divider

Separates content, not reading text

Text muted

Theme eyebrow

Docs label

Short labels only

Muted text on white

Use for labels, metadata, and secondary notes

Spacing rhythm

The structural spacing rhythm is now explicit in 20px multiples so shared layouts, actions, cards, and forms can stay aligned.

Preview

Spacing Tokens

Current spacing preview

20

20px

–az-space-20

Button gaps, card padding, form spacing, and footer nav rhythm

40

40px

–az-space-40

Tabbed layout gaps, footer grid spacing, and section groupings

60

60px

–az-space-60

Case-study section starts and primary vertical shell spacing

80

80px

–az-space-80

Page-lead separation and footer padding

100

100px

–az-space-100

Large shell separation bands

120

120px

–az-space-120

Reserved for large editorial bands and future wide specimens

Current limits

The system now has a clearer shared token map, but this page is still a compact baseline rather than a full component catalogue.

  • The shell remains the visual owner even when plugin/runtime surfaces consume shared roles.
  • Geometries of Use still carries specimen-specific theme decisions.
  • This page documents active roles, not every future token candidate.