A label with an arrow after the text

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Low-chroma outline button

Red on a short white plane

A soft pressable button

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

A toggle built from a checkbox

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

A label that rides the field, without script

Red on a short white plane

Large radii and a pale plane

An underline input bound to its label

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

A multi-line input surface

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

A native select menu

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

An input for search

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

A labeled checkbox

Exclusive radio buttons

A slider for choosing an amount

File picker

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

A card that splits color and copy

A short stub with a tear rule

A native dialog shown with the open attribute

A modal that dims the back

A hint opened with popovertarget

Extra copy on hover and focus

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

details that open one at a time via the same name

Red on a short white plane

A standard accordion with no JavaScript

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Tabs switched with radios

Large radii and a pale plane

Breadcrumbs for hierarchy

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Pagination

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

A rail that marks the current item as a pill

Horizontal site navigation

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Steps led by large numbers

Large radii and a pale plane

A stacked list of items

Thick rules and uppercase

Serif type and a thin rule

A small data table

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

A short mark that sits on a corner

A badge that shows a count

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

A selectable chip

A short word led by a hash mark

Red on a short white plane

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

Call out a note with aside

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

A pull that enlarges a marked phrase

Red on a short white plane

A large quote that splits the page

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

A bar that shows progress

Red on a short white plane

Large radii and a pale plane

A progress bar kept as a thin line

An initial avatar

A row of kbd keys for shortcuts

Empty bars that pulse while content loads

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

A price stacked over its unit

Large radii and a pale plane

A tile with one large number and a short label

A five-star rating made of radio inputs

Thick rules and uppercase

Serif type and a thin rule

A pre/code pair for a short CSS snippet

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

A short empty-state prompt

Red on a short white plane

Empty copy on a ruled notebook field

Large radii and a pale plane

A numbered vertical sequence joined by a line

A fieldset that pairs two name fields

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane

An aside with a left rule for status copy

A note with a strip of tape on top

Author and date under a title

Thick rules and uppercase

Serif type and a thin rule

Tight gaps and mono type

Measure against a heading

Red on a short white plane

Large radii and a pale plane