All spacing and sizing is based on a 4px grid system. This creates consistent rhythm and predictable layouts.

Spacing scale

Token	Value	Visual
--of-space-1	4px
--of-space-2	8px
--of-space-3	12px
--of-space-4	16px
--of-space-5	20px
--of-space-6	24px
--of-space-8	32px
--of-space-10	40px
--of-space-12	48px
--of-space-16	64px
--of-space-20	80px

Spacing visualization

Border radii

Used for rounding corners on buttons, cards, and containers.

Token	Value	Usage
--of-radius-xs	4px	Inline chips, small tags
--of-radius-sm	6px	Inputs, small buttons
--of-radius-md	10px	Buttons (default)
--of-radius-lg	14px	Cards
--of-radius-xl	20px	Panels, modals
--of-radius-2xl	28px	Large surfaces
--of-radius-pill	999px	Badges, avatars

Radius visualization

Layout measurements

Standard layout dimensions for consistent page structure.

Measurement	Value	Usage
Sidebar width	260px	Dashboard sidebar
Docs nav width	240px	Documentation sidebar
Content max-width	760px	Documentation content
Content max-width	1280px	Dashboard content
Header height	48px	Site header

Spacing tokens reference

/* Spacing */
--of-space-1   /* 4px */
--of-space-2   /* 8px */
--of-space-3   /* 12px */
--of-space-4   /* 16px */
--of-space-5   /* 20px */
--of-space-6   /* 24px */
--of-space-8   /* 32px */
--of-space-10  /* 40px */
--of-space-12  /* 48px */
--of-space-16  /* 64px */
--of-space-20  /* 80px */

/* Radii */
--of-radius-xs    /* 4px */
--of-radius-sm    /* 6px */
--of-radius-md    /* 10px */
--of-radius-lg    /* 14px */
--of-radius-xl    /* 20px */
--of-radius-2xl   /* 28px */
--of-radius-pill  /* 999px */