The kit's components in their real states, and how each one answers a press, a hover or a focus.
Default
Hover
Focus
Active
Disabled
Loading
A press answers at once by settling slightly smaller — felt more than watched. Arrows nudge forward on hover. A disabled button does neither.
Default
Hover
Focus
Active
Disabled
Kbd
⌘KA quiet button that ends with the shortcut it answers to. It presses like Button; the shortcut chip is the Kbd component.
Chip · Default
Chip · Hover
Chip · Focus
Chip · Active
Chip · Disabled
Chip · Selected
ChoiceChips
ChoiceChips · Disabled
Used in
The one rounded element: a candidate someone can pick. Choosing turns it spark-tinted; a disabled chip stays still.
Used in
The background slides to the option you choose instead of cutting to it, so you see where you were and where you went.
A link is a line that draws itself. Hover or tab to this link and the underline runs left to right, then stays until you leave.
Forced states
A link is a line that draws itself, left to right, on hover and focus, and stays until you leave. Nothing else on the link moves.
No lift and no shadow. The border darkens and four registration marks appear at the corners.
Field · Default
TextField · Error
TextField · Disabled
TextField caret
A square input with a spark border and ring on focus. A hint says what it takes; an error says what to do, in words as well as the red border.
Textarea
Select
Multi-line text takes the body face because it holds prose. The select is the browser’s own, restyled, so it keeps native keyboard and touch behaviour.
Toggle
Default
Hover
Focus
Active
Disabled
A square switch. The knob crosses on the spring curve — the one place in the system that overshoots — while the track follows in a straight line.
Checkbox
Radio
Square one-pixel boxes. A spark check or a filled square marks the choice, and the label is part of the target.
Banner
Callout
Something worth knowing.
Check this before you go on.
It worked.
Inline notices. A banner leads with a spark rule; a callout takes a tone — info, warning or success — and says it in words.
A short notice that floats over the page, so it is the one surface allowed a shadow; cards have none. The design system page animates it in and out; the component itself is still.
A dashed frame, a hatched slot and one next step. It says what is missing and offers the way to fill it.
A quiet label that rises above its trigger on hover. It is hover-only, so keep anything a keyboard or touch user needs out of it.
An overlay with a centred panel. Open it here to see it above this page; it closes from the backdrop, the × or the footer button.
A square status tag in the label face. Spark is for the one thing that needs seeing; outline and neutral stay quiet.
Body copy is for reading at length.
A lede opens a section and reads a step larger.
A quote carries what a person said.
Three emphases of running text: body, lede and quote. The quote takes the voice face and a spark rule.
Section label
The small labels that start a section: an eyebrow names it, and a rail number places it in the sequence.
A shimmering line standing in for text on its way. It only hints at the shape and carries no meaning of its own, so it is hidden from assistive technology.
| Key | Value |
|---|---|
| a | 1 |
| b | 2 |
Hairline rows, a label header and numbers aligned right, so they can be compared down the column.
A stat is one proof number beside a spark rule; a metric is the same idea in a bordered tile with a caption.
A hatched 16:9 placeholder for a figure that has not arrived. The caption says what belongs there.