Accessible primitive workbench

Design from behavior contracts before visual variants.

A calm product system for dialogs, menus, tabs, popovers, forms, and command-like workflows where the agent must preserve keyboard paths, focus, portals, and data-state styling.

Review primitives Map tokens

Dialog primitive

data-state=open

Edit profile

Trap focus, close on Escape, then restore trigger focus.

Dropdown contract

typeahead
data-highlighted Arrow keys collision-aware

Color Palette

Color follows a 12-step mental model: backgrounds, component states, borders, solid fills, and text roles are mapped into local semantic tokens.

primary#3e63dd / solid accent
surface-selected#edf2fe / selected bg
hairline#dfe3e6 / borders
ink#1c2024 / high text
123456789101112

Typography

Use compact system typography for implementation-facing pages. Mono appears only where code, package names, tokens, or data attributes are the content.

Primitive first
display-xl / 52 / 650
State matrixheading-md / 20 / 650
Readable component copy with enough line height for labels, descriptions, helper text, and validation details.
body / 14 / 1.5
data-state="open"mono / attributes

Components

Signature components expose the implementation contract: primitive choice, state attributes, focus behavior, and token mapping.

Dialog panelModal, labelled, described, focus-trapped, Escape-close, focus-return.
openportal
Menu itemHighlighted, disabled, checkable, submenu, arrow keys, typeahead.
highlightedcollision
Input fieldVisible label, description, invalid state, focus ring, disabled style.
invalidvalid

Layout & Spacing

A 4px base supports compact primitives. The workbench grid keeps preview, state matrix, token table, and implementation notes visible together.

4pxMicro gaps inside controls and icon/text spacing.
12pxField and card internal rhythm for readable primitive examples.
24pxGroup separation between preview, token map, and state matrix.

Responsive Behavior

Below tablet widths, the workbench stacks. Keep current primitive, primary action, and state chips visible; make state matrices scroll or convert into grouped cards.

DesktopTwo-column hero and side-by-side primitive preview.
TabletRail becomes horizontal, preview stacks above contract notes.
MobileControls fill width; overlays need safe max-height and internal scroll.