Borders separate and emphasize. Two widths carry every edge in the system, and the focus ring — the one outline allowed to stand off the layout box — is assembled from them.
| Example | Token | Usage |
|---|---|---|
border.thin | Hairlines: dividers, outlines, table rules | |
border.medium | Emphasis: focus rings, active tab underline |
One recipe, everywhere: every focusable component draws the same ring from these three roles — components never improvise a focus look. The driver is :focus-visible, so keyboard focus paints the ring and pointer clicks stay quiet. Text-entry controls are the one placement exception: browsers show their focus on click too, so Input and Textarea move the emphasis onto the border — same focus.ring color, zero offset — instead of standing a permanent ring off the label. The ring draws outside the element and never replaces the border, so invalid and disabled looks stay visible under focus.
| Example | Token | Value | Usage |
|---|---|---|---|
focus.ring | Ring color — full-contrast ink; non-text, min 3:1 on page and canvas (validator-gated) | ||
focus.width | Ring thickness — references border.medium | ||
focus.offset | Gap between ring and element — a literal: an offset is not a spacing step |
The same three roles on every focusable shape — buttons, circles, boxes, switches — with the ring standing off the layout box at focus.offset.