Design Tokens Reference

Spacing (SCSS variables from core/_variables.scss)

Variable	Value
$spacing-size-1	4px
$spacing-size-2	8px
$spacing-size-3	12px
$spacing-size-4	16px
$spacing-size-5	20px
$spacing-size-6	24px
$spacing-size-8	32px
$spacing-size-10	40px
$spacing-size-12	48px
$spacing-size-16	64px
$spacing-size-20	80px
$spacing-size-24	96px

Breakpoints (SCSS variables from core/_breakpoints.scss)

Variable	Value	Use For
$breakpoint-hero-small	620px	Small hero layouts
$breakpoint-hero-large	1020px	Large hero layouts
$breakpoint-landing-page-medium	1020px	Landing pages
$breakpoint-docs-nav-medium	1052px	Docs navigation
$breakpoint-pricing-small	620px	Pricing page
$breakpoint-pricing-medium	820px	Pricing page
$breakpoint-pricing-large	1260px	Pricing page

Typography (CSS variables from _root.scss)

Variable	Value
--text-fs-2xs	10px
--text-fs-xs	12px
--text-fs-sm	14px
--text-fs-base	16px
--text-fs-lg	20px
--text-fs-xl	24px
--text-fs-2xl	32px
--text-fs-3xl	40px
--text-lh-tight	1.2
--text-regular	400
--text-semibold	600
--text-bold	700

Layout (CSS variables from _root.scss)

Variable	Description
--layout-gap	Grid gap (32px)
--layout-max-width	Max page width (1800px)
--layout-max-width-small	Narrow content width (1240px)
--layout-horizontal-margins	Side margins

Border Radius

• --radius-xs (4px), --radius-sm (6px), --radius-md (8px), --radius-lg (10px), --radius-xl (12px), --radius-2xl (16px)

Shadows

• --shadow-xs, --shadow-sm, --shadow-md, --shadow-lg, --shadow-xl, --shadow-2xl