Developer workflow

Tokens first

The token sheet is the contract between design and engineering. Colours, spacing, radii, shadows, and motion all ship as CSS custom properties — browse and copy them in Design tokens. If a value isn’t a token, it isn’t in the system yet: raise it before hard-coding.

Using the variables

/* pull the token sheet into any project */
@import "tokens.css";

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
}

.cta {
  background: var(--brand-primary);
  color: var(--white);
  border-radius: var(--radius-md);
  transition: transform 160ms ease-out;
}

Compose with variables and the documented radii/shadow levels; motion uses the standard durations and easings from Elevation & motion. Respect prefers-reduced-motion — every animation in this portal is wrapped, and product code should match.

Accessibility

• Text meets WCAG AA against its documented surface — the pairings in Colour are pre-checked; don’t create new ones ad hoc.
• Every interactive element has a visible focus state and a keyboard path.
• Icons ship with labels or aria-labels; decorative motion is skippable.