Skip to content
garn

Foundations

The token layer every component is built on. Restyle the system by remapping these — components consume tokens, never raw values.

Tokens

Styling flows through semantic roles (bg-brand-solid, border-input, …) rather than raw hex or hand-set lengths — so restyling is a remap of the roles, never a hunt through component source.

Accessibility

Every garn component arrives with its accessibility already handled: accessible names, labelled controls, titled dialogs, and a complete keyboard model — arrow-key roving where the pattern calls for it, focus trapped and restored on overlays, visible focus rings you don't have to reinstate. Each component page spells out its own behaviour under Accessibility, so you know exactly what you get before you compose.