Micaela Avigliano

Mobile navigation

Design System

Design System

Focus

Tokens

Focus ring: Tokens
TokenValueUse it for
focus-ring-primary#0066ffOuter focus ring. Sits outside the control with a 3px offset, so it is measured against the surface: 4.83:1 on paper, 4.36:1 on fill, 4.09:1 on wash, and 3.73:1 on ink, the dark surface of the code block.
focus-ring-soft#a5c8ffInner halo of the focus ring, between the control and focus-ring-primary. Decoration around the 3:1 ring because it is not the indicator of the focus state. On ink it reads at 10.57:1.
focus-ring-width4pxWidth of the outer focus ring where it is drawn as an outline.
focus-halo0 0 0 3px #a5c8ff, 0 0 0 7px #0066ffThe focus indicator on links, buttons, summaries and inputs: a 3px focus-ring-soft halo, then a 4px focus-ring-primary ring. It is a box-shadow, and the outline of focus-ring-width sits over the same ring. On a light and on a dark surface it is the same: the control keeps its own shape and fill inside the halo, as the copy button of a code block does on ink.
z-raised10A focused link lifts so its ring is not clipped.
z-skip-link100The skip link when focused: above everything.
ringinkDefault ring color. The site draws its focus indicator from focus-ring-primary, not from this.

On light and on dark

Focus ring
TokenOn lightOn dark
focus-halo
:focus-visible {
  outline: 4px solid #0066ff;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #a5c8ff, 0 0 0 7px #0066ff;
}

Interactive elements

Focus ring: Interactive elements
ElementSampleOn focusUsed by
Links, buttons and summaries a, button, summaryoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: focus-halo;The site's own, and the one every control has unless a rule below says otherwise. A link also lifts to z-raised so the ring is not clipped.Card, Chip, Chip List, Disclosure, Form, Modal Dialog, Non-modal Dialog, Post Item, Quantity, Site Footer, Site Header, Table of Contents, Video control button, Video player
Navigation links and buttons .nav-focusoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: focus-halo; background: color-mix(in srgb, ink 8%, transparent);The site's ring and a tint of ink at 8% inside it.Language Switcher, Site Header
Link .lnkoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: focus-halo; background: marker; color: ink;The site's ring, a marker fill with ink words, and the underline thickens to 3px.Link
Skip link .skip-linkoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: focus-halo; background: lilac; color: paper; z-index: z-skip-link;Hidden until it has focus. Then a lilac fill with the site's ring, above everything at z-skip-link.Skip to Main Content
Copy button of a code block .code-block__copyoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: focus-halo;The site's ring on ink. The button keeps its own radius and fill inside it.Code Block
Input, select, textarea and slider .fm-control, .qty-input, .dialog-input, .vid-selectoutline: none; box-shadow: focus-halo; border-color: focus-ring-primary;The halo and no outline. Where the control has an edge, it takes the colour of the ring. Forced colors: the quantity input gets outline: 3px solid Highlight.Form, Modal Dialog, Quantity, Video player
Checkbox and radio .fm-checkoutline: none; box-shadow: focus-halo;The halo and no outline.Form
Text field .ds-field__inputoutline: none; box-shadow: focus-halo; border-color: focus-ring-primary;The halo and no outline. The 2px edge takes the colour of the ring.TextField
Button button.bt, input.btoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: none;The ring without the halo. The hard shadow drops, so the ring is the only edge. The same on an input of type button, submit and reset.Button, Form
Card .cd-cardoutline: focus-ring-width solid focus-ring-primary; outline-offset: 4px;The whole card, while its stretched link or summary has focus.Card
Stretched link or summary of a card .cd-card__link, .cd-card__summaryoutline: none; box-shadow: focus-halo;The halo around the words, with the card's outline around the whole.Card
Swatch of a card .cd-swatch > inputoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px;Drawn round the colour, which is the span after the input.Card
Hotspot trigger .hs-triggeroutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: 0 0 0 2px ink;The ring without the halo. The 2px ink ring the trigger always has stays inside it.Hotspot
Title of a hotspot card .hs-card__titleoutline: focus-ring-width solid focus-ring-primary; outline-offset: 2px;Focus goes to it when the card opens. Not a tab stop.Hotspot
Close button of a dialog .dialog-closeoutline: focus-ring-width solid focus-ring-primary; outline-offset: -4px; box-shadow: none;The ring without the halo, drawn inside its 44px.Modal Dialog, Non-modal Dialog
Tab .tb-tabs__taboutline: focus-ring-width solid focus-ring-primary; outline-offset: 0;The site's ring, hugging the tab.Tabs
Tab panel .tb-tabs__paneloutline: focus-ring-width solid focus-ring-primary; outline-offset: 2px;The site's ring, 2px off the panel.Tabs
Scroll arrows of tabs .tb-tabs__arrowoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: none;The ring without the halo.Tabs
Video slider .vid-rangeoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: focus-halo; border-color: transparent;The site's ring, as on the copy button of a code block. The 3px edge it always has stays transparent, so the track never moves.Video player
Heading with a link in a post .post-heading-linkoutline: focus-ring-width solid focus-ring-primary; outline-offset: 3px; box-shadow: focus-halo;The site's ring, and the underline thickens to 3px in lilac.Heading
Headings and regions with a tabindex [tabindex]outline: focus-ring-width solid focus-ring-primary; outline-offset: 3px;Where focus lands after a skip link or a contents link, and the scrolling regions and media of a dialog. The page's h1 draws none.Modal Dialog, Non-modal Dialog, Skip to Main Content, Table of Contents

No focus of their own: Slab, Rule, Label, Underline, Blockquote, InlineCode, Kbd, Icon, Tooltip, Meter, Progress.