Colors

Each color carries its light and dark value through light-dark().

Type

Atkinson Hyperlegible Next for reading, JetBrains Mono for the interface.

Space

Radius

Depth

Raised things sit on a hard bottom edge. Sunken things get an inset well.

Other

Text

From base.css. Headings use the mono face, body text the sans face.

Text fields

Fields sink into the surface. Focus one to see its halo.

Select

A keycap like the button. Browsers with customizable selects also get a raised option list.

Checkboxes

Radios

Details

Table

Rows line up with the content edge, so a table sits flush inside a card.

Dialog

A raised panel over a dimmed page. Open it with showModal().

Button

A keycap that presses into its edge. Works on button and a elements.

Card

Kicker

Segmented

One choice out of a few. The chosen item rises out of the well. Mark it with aria-pressed or the --on modifier.

Toolgroup

A raised group of tools. The active tool sinks in. Click again to release it.

Chip

A small pill. As a button it toggles with the --on modifier. Tones mark a status.

Meter

Callout

A message banner. Accent by default, with good, warn and bad tones.

Menu

A floating list of actions. Works as a popover; placement is up to the app.

Screen reader only

Hidden on screen, read aloud by screen readers. The button below has a hidden label.

Together

Components composed into a settings card.