04 — Design Tokens

Design Tokens

Spacing, radii, shadows, borders, z-index, and breakpoints. Authored as JSON, compiled to CSS custom properties and TypeScript.

Spacing Scale

space-00px

Reset

space-14px

Inline icon gap, badge padding-y

space-28px

Input padding, small gaps

space-312px

Card padding (compact), list item gap

space-416px

Card padding (default), section content gap

space-520px

Group spacing

space-624px

Section gap, sidebar padding

space-832px

Major section spacing

space-1040px

Page horizontal padding

space-1248px

Page top/bottom padding

space-1664px

Section vertical padding

space-2496px

Hero vertical padding

Border Radius

radius-sm4pxSmall badges, inline chips

radius-md6pxInputs, buttons, dropdowns

radius-lg8pxCards, modals, smaller surfaces

radius-xl12pxLarge cards, popovers

radius-2xl16pxPanels, major surfaces

radius-full9999pxPills, avatars, toggle switches

Shadow Scale

shadow-xsSubtle lift, inputs

shadow-smCards at rest

shadow-mdCard hover, dropdowns

shadow-lgModals, command palette

shadow-xlFull-screen overlays

Z-Index Scale

z-base 0

Normal flow

z-dropdown 10

Dropdowns, select menus

z-sticky 20

Sticky headers, nav bars

z-overlay 30

Modal backdrops

z-modal 40

Modals, command palette

z-popover 50

Tooltips, popovers

z-toast 60

Toast notifications

Breakpoints

screen-sm 640px

Mobile landscape

screen-md 768px

Tablets

screen-lg 1024px

Small laptops

screen-xl 1280px

Desktops

screen-2xl 1536px

Large monitors

Border Width

Example

border-default 1px Cards, inputs, dividers

Example

border-thick 2px Focus rings, active indicators

Example

border-accent 3px Sidebar active, version accent