Tokens
Spacing
Spacing steps on a 4px unit, and the breakpoints layouts respond to.
Steps
Every step is a multiple of --spacing (4px). Use the Tailwind step (p-4, gap-2) or --spacing(4) in CSS.
| Preview | Token | Value | Use |
|---|---|---|---|
| spacing/0 | 0px0 | p-0, gap-0, m-0… | |
| spacing/1 | 4px0.25rem | p-1, gap-1, m-1… | |
| spacing/2 | 8px0.5rem | p-2, gap-2, m-2… | |
| spacing/3 | 12px0.75rem | p-3, gap-3, m-3… | |
| spacing/4 | 16px1rem | p-4, gap-4, m-4… | |
| spacing/5 | 20px1.25rem | p-5, gap-5, m-5… | |
| spacing/6 | 24px1.5rem | p-6, gap-6, m-6… | |
| spacing/7 | 28px1.75rem | p-7, gap-7, m-7… | |
| spacing/8 | 32px2rem | p-8, gap-8, m-8… | |
| spacing/10 | 40px2.5rem | p-10, gap-10, m-10… | |
| spacing/12 | 48px3rem | p-12, gap-12, m-12… | |
| spacing/14 | 56px3.5rem | p-14, gap-14, m-14… | |
| spacing/16 | 64px4rem | p-16, gap-16, m-16… | |
| spacing/20 | 80px5rem | p-20, gap-20, m-20… | |
| spacing/24 | 96px6rem | p-24, gap-24, m-24… | |
| spacing/0.5 | 2px0.125rem | p-0.5, gap-0.5, m-0.5… | |
| spacing/1.5 | 6px0.375rem | p-1.5, gap-1.5, m-1.5… | |
| spacing/2.5 | 10px0.625rem | p-2.5, gap-2.5, m-2.5… |
Breakpoints
Mobile first: md: applies from that width up. A coach-admin rule written as max-width: 768px becomes "below md".
| Token | Value | Use |
|---|---|---|
| breakpoint/xsfrom tokens/globals.css | 480px30rem | xs: |
| breakpoint/smTailwind default, kept per tokens/globals.css and audit/token-map.html | 640px40rem | sm: |
| breakpoint/mdTailwind default, kept per tokens/globals.css and audit/token-map.html | 768px48rem | md: |
| breakpoint/lgTailwind default, kept per tokens/globals.css and audit/token-map.html | 1024px64rem | lg: |
| breakpoint/xlTailwind default, kept per tokens/globals.css and audit/token-map.html | 1280px80rem | xl: |
| breakpoint/2xlTailwind default, kept per tokens/globals.css and audit/token-map.html | 1536px96rem | 2xl: |