Appearance
Sizes
The FastTrack sizing system provides a unified scale for gaps, padding, margins, and border-radius. Token definitions live in tokens/spacing.tokens.json, and legacy CSS variables are in public/assets/styles/measures.css.
Spacing Scale
Each bar is rendered at its actual pixel width.
Spacing Scale
00px
sizing.02xs2px
sizing.2xsxs4px
sizing.xssm8px
sizing.sms12px
sizing.smd16px
sizing.mdlg24px
sizing.lgxl32px
sizing.xl2xl48px
sizing.2xl3xl64px
sizing.3xlUsage Guidelines
| Token | Value | Typical Use |
|---|---|---|
0 | 0px | Reset / flush alignment, sharp corners |
2xs | 2px | Icon inner padding, tight inline elements |
xs | 4px | Compact gaps, tag padding, subtle border-radius |
sm | 8px | Default inline gaps, form spacing, card border-radius |
s | 12px | Intermediary for compact layouts |
md | 16px | Default content gaps, card padding, large container radius |
lg | 24px | Section spacing, between card groups |
xl | 32px | Page section margins, pill-ish radius |
2xl | 48px | Major page section divisions |
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
| Variable | Value |
|---|---|
--padding-null | 0 |
--padding-xs | 4px |
--padding-s | 8px |
--padding-m | 16px |
--padding-l | 32px |
--padding-xl | 64px |
--padding-xxl | 128px |
Margin
| Variable | Value |
|---|---|
--margin-null | 0 |
--margin-xs | 4px |
--margin-s | 8px |
--margin-m | 16px |
--margin-l | 32px |
--margin-xl | 64px |
--margin-xxl | 128px |
Border Radius
| Variable | Value |
|---|---|
--border-radius-xxs | 2px |
--border-radius-xs | 4px |
--border-radius-s | 8px |
--border-radius-m | 16px |
--border-radius-l | 32px |
--border-radius-xl | 64px |
Utility classes (.padding-m, .margin-s, .border-radius-xs, etc.) are also available for quick prototyping.