Design Tokens

Live token values. These update in real time as you change the theme. Currently showing: dark mode, neutral gray, blue accent.

Gray Scale

Core neutral palette. Adapts to mode and gray spectrum selection.

--ds-background-100background

...Page background

--ds-background-200background-secondary

...Recessed areas

--ds-gray-100surface

...Subtle surface

--ds-gray-200surface-hover

...Surface hover

--ds-gray-300surface-active

...Active surface

--ds-gray-400border

...Default border

--ds-gray-500border-hover

...Hover border

--ds-gray-600foreground-muted

...Subtle text

--ds-gray-900foreground-secondary

...Secondary text

--ds-gray-1000foreground

...Primary text

Gray Alpha

Translucent overlays for borders and surfaces. Tinted by gray spectrum.

--ds-gray-alpha-100

...Whisper overlay

--ds-gray-alpha-200

...Subtle overlay

--ds-gray-alpha-300

...Medium overlay

--ds-gray-alpha-400

...Default border (alpha)

--ds-gray-alpha-500

...Hover border (alpha)

Accent and Semantic Colors

Accent adapts to theme selection. Semantic colors (red, amber, green) are fixed.

--ds-blue-700Accent

--ds-blue-900Accent text

--ds-red-700Error

--ds-red-900Error text

--ds-amber-700Warning

--ds-green-700Success

--ds-green-900Success text

--ds-teal-700Teal (viz)

--ds-purple-700Purple (viz)

--ds-pink-700Pink (viz)

Type Scale

Font responds to theme selection. Currently: geist / geist-mono.

heading-4848pxDashboard

heading-3232pxOverview

heading-2424pxIntegrations

heading-2020pxInventory

heading-1616pxQuickBooks Sync

heading-1414pxSection Header

copy-1616pxBody text for longer content blocks.

copy-1414pxDefault body text used throughout the interface.

copy-1313pxSmall body text for compact layouts.

label-1414pxButton Label

label-1313pxField Label

label-1212pxCAPTION TEXT

Spacing

Base unit: 4px.

0.52px

14px

28px

312px

416px

624px

832px

1248px

1664px

Radius

Current: md. Controlled by --ds-radius.

base

md

pill

Elevation

Surface: default.

elevation-0

Cards, surfaces

elevation-1

Raised elements

elevation-2

Menus, popovers