Skip to content
Lauren DormanDesign Engineer

Design system

The tokens and primitives behind this site. Base UI handles behavior, and StyleX handles styling with the tokens below.

Color

  • bgPage background
  • fgPrimary text
  • mutedSecondary text
  • faintDecoration only
  • lineHairlines
  • surfaceInsets and code
  • raisedRaised controls

Type

large · 18px

Hierarchy comes from weight, color and position.

body · 15px

Body text runs about 68 characters to a line, at a 1.6 line height.

small · 13px

Small text carries captions, labels and metadata.

Set with Text, which takes a size, a tone and a render prop.

Components

Button, raised and quiet.
Tooltip, with the action’s shortcut. Hover one, then the next.
Menu. Arrow keys move, and typing jumps to an item.
Checkbox. Click the label or press Space.
Switch, for settings that apply right away.
Density
Radio group. Arrow keys move the selection.
  • Between click and content
  • The second reader
  • Hosting HTML you didn’t write
Tabs, as a segmented control. Arrow keys switch the panel.

Used only for note updates.

Field and Input. Submit without an @ to see the error.
Text size
Option slider. Drag the thumb or use the arrow keys.
⌘KGthenI↑or↓
Kbd. ⌘ and ⌥ read as Ctrl and Alt on Windows and Linux.