Skip to content
Design system

Borders and focus

Lines come from one small scale of two widths: borders, the focus ring and the underline of links all use it. The colors of these lines are on the color page.

How to use lines

  • Use --border-width-default for every border. Pick its color from the border colors on the color page.
  • The widths are set in rem, so lines grow with the reader's font size, like the text next to them.
  • Links are underlined, so they can be found without relying on color. On hover the underline gets thicker and changes color.

The focus ring

Every link, button and form field gets the same ring when it has keyboard focus. The base styles add it, so a component does not need to.

  • The ring only shows for keyboard focus (:focus-visible), not when you click.
  • It follows the shape of the element. An element without a radius of its own gets --radius-interactive-sm.
  • The gap between the element and the ring keeps the ring visible around a primary button, which has the same color as the ring.
  • In Windows high contrast mode, the system picks the color, and the ring is still drawn.
  • Never remove the ring without putting an equally visible one in its place.
The focus ring around a primary button, drawn here without focus. Press Tab to see it on the links of this page.

Border width

Preview Token Value Use
--border-width-default 1 px border-width.1 Borders on buttons, form fields, cards, the theme switcher and dividers.

Focus ring

Preview Token Value Use
--focus-ring-width 2 px border-width.2 The width of the focus ring.
--focus-ring-offset 2 px border-width.2 The gap between an element and its focus ring. It keeps the ring visible around a primary button, which has the same color as the ring.

Underline

Preview Token Value Use
--text-underline-thickness 1 px border-width.1 The underline of a link at rest.
--text-underline-thickness-hover 2 px border-width.2 A thicker underline on hover, so the change does not rely on color alone.
--text-underline-offset 2 px border-width.2 The space between the text and its underline.

Primitives

The two widths that every line points to. The name is the value in pixels, so --border-width-2 is 2 px. Use a role instead of these.

Preview Token Value
--border-width-1 0.0625rem
--border-width-2 0.125rem