Appearance
Sizes
The FastTrack sizing system provides a unified scale for gaps, padding, margins, and border-radius. Spacing tokens live in public/assets/styles/spacing.css; legacy padding/margin/border-radius vars are in public/assets/styles/measures.css.
The tiles below are generated at build time from those CSS files via sizes.data.js. To add, remove, or rename a token, edit the CSS — this page updates automatically.
Spacing Scale
Each bar is rendered at its actual pixel width.
Spacing Scale
--spacing-2xs2px--spacing-xs4px--spacing-sm8px--spacing-md16px--spacing-lg24px--spacing-xl32px--spacing-2xl48px--spacing-3xl64pxUsage Guidelines
| Token | Value | Typical Use |
|---|---|---|
--spacing-2xs | 2px | Icon inner padding, tight inline elements |
--spacing-xs | 4px | Compact gaps, tag padding, subtle border-radius |
--spacing-sm | 8px | Default inline gaps, form spacing, card border-radius |
--spacing-md | 16px | Default content gaps, card padding, large container radius |
--spacing-lg | 24px | Section spacing, between card groups |
--spacing-xl | 32px | Page section margins, pill-ish radius |
--spacing-2xl | 48px | Major page section divisions |
--spacing-3xl | 64px | Page-level vertical spacing |
Legacy CSS Variables
The following variables from measures.css are still available. They map to similar values in the unified scale.
Padding
Padding
--padding-null0--padding-xs4px--padding-s8px--padding-m16px--padding-l32px--padding-xl64px--padding-xxl128pxMargin
Margin
--margin-null0--margin-xs4px--margin-s8px--margin-m16px--margin-l32px--margin-xl64px--margin-xxl128pxBorder Radius
Border Radius
--border-radius-xxs2px--border-radius-xs4px--border-radius-s8px--border-radius-m16px--border-radius-l32px--border-radius-xl64pxUtility classes (.padding-m, .margin-s, .border-radius-xs, etc.) are also available for quick prototyping.