Focus rings — keyboard navigation
2px offset · 2px ring · primary color · visible on every focusable element via :focus-visible
Errors — icon + color (never color alone)
Email required
not-a-valid-email
Enter a valid email address (e.g. you@company.com).
aria-describedby="email-error" · aria-invalid="true"
error message exposed to screen readers
Color contrast — WCAG 2.1 AA
Body text · #15181D
on #FFFFFF · 17.4:1 ✓ AAA
Secondary text
on #FFFFFF · 6.1:1 ✓ AA
CTA · primary white
on #AC0022 · 8.2:1 ✓ AAA
Danger pill
on tinted bg · 7.1:1 ✓ AAA
Screen readers — live regions + labels
aria-label="Open audit trail for commission"
aria-live="polite"
role="status"
→ used on toasts, MFA code, password strength.
Icon-only buttons labeled
prefers-reduced-motion
Skip to content link