Styleguide

Live reference for tokens and UI components.

Colors

Token-backed swatches.

Background
Surface
Surface 2
Border
Primary
Secondary
Accent
Success
Warning
Danger

Typography

Display for headings, sans for body, mono for code.

Heading / Display
Body text uses the system font stack. Keep line-height between 1.5 and 1.75.
{
  "json": true,
  "example": "mono"
}

Components

Touch targets are at least 44px.

LinkButton
NeutralPrimarySuccessWarningDanger
Select
Tooltip
This is a tooltip
Tabs
Tab content one
CodeBlock
{
  "hello": "world",
  "indent": "2"
}
Table
KeyValue
editorenabled
privacyclient-side