Spacing
Apollo Vertex uses the standard Tailwind 4px base unit (--spacing: 0.25rem). Every spacing value is a multiple of this base, giving you a consistent and predictable scale across margin, padding, gap, width, height, and more.
Base unit: 1 = 4px = 0.25rem
Usage
<div className="p-4 gap-6 mt-2" />/* CSS variable */
margin: calc(var(--spacing) * 4); /* 16px */| Token | px | rem | Visual |
|---|---|---|---|
| 0 | 0px | 0rem | |
| 0.5 | 2px | 0.125rem | |
| 1 | 4px | 0.25rem | |
| 1.5 | 6px | 0.375rem | |
| 2 | 8px | 0.5rem | |
| 2.5 | 10px | 0.625rem | |
| 3 | 12px | 0.75rem | |
| 3.5 | 14px | 0.875rem | |
| 4 | 16px | 1rem | |
| 5 | 20px | 1.25rem | |
| 6 | 24px | 1.5rem | |
| 7 | 28px | 1.75rem | |
| 8 | 32px | 2rem | |
| 9 | 36px | 2.25rem | |
| 10 | 40px | 2.5rem | |
| 11 | 44px | 2.75rem | |
| 12 | 48px | 3rem | |
| 14 | 56px | 3.5rem | |
| 16 | 64px | 4rem | |
| 20 | 80px | 5rem | |
| 24 | 96px | 6rem | |
| 28 | 112px | 7rem | |
| 32 | 128px | 8rem | |
| 36 | 144px | 9rem | |
| 40 | 160px | 10rem | |
| 44 | 176px | 11rem | |
| 48 | 192px | 12rem | |
| 52 | 208px | 13rem | |
| 56 | 224px | 14rem | |
| 60 | 240px | 15rem | |
| 64 | 256px | 16rem | |
| 72 | 288px | 18rem | |
| 80 | 320px | 20rem | |
| 96 | 384px | 24rem |
Bars are capped at 320px for readability. Steps beyond
80(320px) render as full-width bars.