Styleguide

Live reference for tokens and UI components.

Colors

Token-backed swatches.

Background

Surface

Surface 2

Border

Primary

Secondary

Accent

Success

Warning

Danger

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"
}

Touch targets are at least 44px.

NeutralPrimarySuccessWarningDanger

Select

Tooltip

Tabs

Tab content one

CodeBlock

{
  "hello": "world",
  "indent": "2"
}

Table

Key	Value
editor	enabled
privacy	client-side