Spacing
Aurora's spacing scale starts at 4px (0.25rem) and doubles or steps in 4-pixel increments. Use it for margin, padding, gap, width, height, border-radius, and any other layout dimension.
Scale
14px · 0.25rem
28px · 0.5rem
312px · 0.75rem
416px · 1rem
520px · 1.25rem
624px · 1.5rem
832px · 2rem
1040px · 2.5rem
1248px · 3rem
1664px · 4rem
2080px · 5rem
2496px · 6rem
32128px · 8rem
The scale skips 7, 9, 11, 13–15, 17–19, 21–23, 25–31 — those are intentionally absent to nudge you toward consistent rhythm.
Where to use
The same scale powers every spacing-related Tailwind utility:
html
<!-- Padding -->
<div class="p-4">All sides 16px</div>
<div class="px-6 py-3">Horizontal 24px, vertical 12px</div>
<!-- Margin -->
<div class="mt-8 mb-4">Top 32px, bottom 16px</div>
<!-- Gap (flex / grid) -->
<div class="flex gap-3">Items separated by 12px</div>
<!-- Width / height -->
<div class="w-12 h-12">48px square</div>
<!-- Border radius -->
<div class="rounded-2">8px corners</div>Border radius
Border radius shares the same numeric scale. In practice, aurora uses three values almost exclusively: rounded-1 for small chrome (chips, tags, inline rows), rounded-2 for surfaces (cards, modals, buttons), and rounded-full for circular avatars and pills.
rounded-1
4px
rounded-2
8px
rounded-full
pill
The full numeric scale (rounded-3, rounded-4, rounded-5…) exists but isn't part of the canonical set — reach for it only when 1 or 2 don't fit.
Don't use rounded-sm / rounded-md / rounded-lg
Tailwind's default rounded-sm, rounded-md, rounded-lg still resolve, but aurora's convention is the numeric scale. Stick to rounded-1, rounded-2, rounded-full.