Keyboard focus
Every focusable element inside .rd (links, buttons, form fields, summary, carousel controls) shows the same ring when it is reached from the keyboard. The rule is :focus-visible, so the browser decides when to show it: clicking a link or a button shows no ring, while clicking into a text field does, because typing follows. Press Tab on this page to see it.
The ring is 2px of --focus-ring-color, offset by 2px. The default --blue keeps at least 3:1 contrast on every library surface, light and dark. Restyle it with the tokens; don't remove it.
:root {
--focus-ring-color: var(--blue);
--focus-ring-width: 2px;
--focus-ring-offset: 2px;
}
On macOS, Safari moves Tab only between form fields unless "Press Tab to highlight each item on a webpage" is enabled (Safari → Settings → Advanced); Option+Tab reaches links and buttons either way. Firefox follows the system setting "Keyboard navigation" (System Settings → Keyboard).
Links
A text link is underlined in --brand-color-dark. On hover a soft fill of the same colour rises from the bottom of the line. With reduced motion it appears without the animation.
A paragraph with a text link in it, and a thicker link with .link-thick.
At rest a link has exactly one line, the underline. Until v0.7.0 the hover fill sat at rest as a 1px strip just below the text box. Chrome clipped it, but Safari showed it as a second, lighter underline.
Links that are not text links (icons, cards, logos) take .no-decoration.
Buttons
.button turns a link or a <button> into a rounded control sized to its content.
The full button system (variants, sizes, states) arrives with the interactive core in v0.7.9.
Forms
Form fields are not styled by the library yet; that is the forms work of v0.7.9. Inside .rd they already inherit the page font and size (from normalize) and show the focus ring.