Design System

Atoms

Atoms here are low-level signals, not a full component set. This page shows the repeated pieces that are clearly visible and shared in the current UI.

Labels, rules, links, actions, focus cues, and framed media are the clearest current atoms.

Labels, links, and rules

The clearest low-level signals are small uppercase labels, restrained links, thin rules, and caption text.

Preview

Atom Signals

Current signal preview

Labels

Page eyebrow

Caption label

Docs label

AA on white

Shell and docs labels

Short uppercase naming signals

Link signal

Docs linkRelated reading

AAA on white

Text links on white

Keep a clear text affordance

Divider

Border role

Separates adjacent content

Caption

CaptionA small naming signal for evidence and media.

Case-study caption

Media evidence naming

Action states

Shared action roles now connect shell buttons, hub actions, docs links, and WPForms submit states.

Preview

Action Signals

Current action preview

Primary default

Primary action
AAA pair

Primary buttons, hub CTA, WPForms submit

Action primary token + rest shadow

Primary hover

Primary hover
State cue

Primary action hover state

Hover mix + hover shadow

Secondary default

Secondary action
AAA on white

Outline buttons, docs chips, hub secondary CTA

Action secondary token + rest shadow

Text link action

Related reading link

AAA on white

Reading, archive, and post-body links

Action secondary text role without button chrome

Focus

Focused docs linkFocused action
2px focus ring

Docs links, hub buttons, form controls

Shared focus token across shell, runtime, and forms

Disabled

Disabled action
State-only

Disabled action tokens

Use on temporarily unavailable button-like actions

Media frame

The case-study media frame is a stable low-level surface for images and videos.

Preview

Atom Media Frame

Live runtime fragment Source: clarity-in-high-season-sales

Atom Media Frame

Holiday campaign research slide one
Image Early campaign analysis focused on where visual polish failed to create decision confidence.
AA Content

Source: clarity-in-high-season-sales

Live runtime fragment

Current limits

This page does not claim a full atomic inventory.

  • Inputs, icons, and specialized controls are not yet catalogued as a full atomic system.
  • The current inventory focuses on repeated low-level signals and shared action states visible now.