Accessibility

Products have to be usable by any person who reaches them. That is the first product principle: interfaces are perceivable and operable. The visual system backs that with contrast targets, visible focus, a type floor on editable fields, and motion that can be turned down.

Best practices

• Give every interactive control a visible focus treatment. Strong borders and focus rings use step 8. The shared outline token is --aura-outline (var(--accent-9) solid 2px in globals.css).
• Keep steps 11 and 12 as the text pair. The color rule requires those steps to hit APCA Lc 60 and Lc 90 on a step 2 background.
• Leave editable input, textarea, and select at 17px or larger. iOS Safari zooms the viewport when a focused field is smaller.
• Honor prefers-reduced-motion. Overlay and content animations set animation: none under that media query.
• Prefer native elements and Radix primitives so keyboard behavior, roles, and names come with the control. Interactive components ship with keyboard operation, visible focus, an accessible name, and a correct role.
• Keep touch targets padded on the 13px scale. Sidebar and navigation collapse into sheet or drawer patterns on narrow screens.

Contrast and focus

Controls and dialogs keep legible borders. Marketing layouts may separate sections with background steps and space; inputs, buttons, and focus rings still use steps 6–8.

Type that stays readable

html { font-size: 17px; } in the base layer, so 1rem already meets the mobile floor. An unlayered rule then forces editable text fields:

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]):not([type="color"]),
textarea,
select {
  font-size: max(1rem, 17px);
}

That block lives in packages/registry/styles/globals.css and again in packages/registry/styles/main.css, outside @layer, so it wins over Tailwind text-sm / text-xs. Checkbox, radio, range, file, and button inputs are exempt. text-sm and text-xs stay available for non-editable meta text.

Body line-height on html is 1.21053, inside the 1.1–1.3 range the typography rule asks for on large headings.

Motion

Reduced motion is part of accessibility, specified on the Motion page. Dialog, alert dialog, accordion, collapsible, tooltip, popover, sheet, and sidebar styles each include a prefers-reduced-motion: reduce block.

Related

• Principles
• Color
• Typography
• Motion
• DESIGN.md §1, §2, §3, §8