Spacing

Source: packages/shared/tokens/primitives.css

All spacing values follow a 4px base grid. Use these tokens for padding, margin, gap, and sizing to maintain vertical and horizontal rhythm.

---

Spacing Scale

Token	Value	px
--space-0	0px	0
--space-px	1px	1
--space-0-5	2px	2
--space-1	4px	4
--space-1-5	6px	6
--space-2	8px	8
--space-2-5	10px	10
--space-3	12px	12
--space-3-5	14px	14
--space-4	16px	16
--space-5	20px	20
--space-6	24px	24
--space-7	28px	28
--space-8	32px	32
--space-9	36px	36
--space-10	40px	40
--space-11	44px	44
--space-12	48px	48
--space-14	56px	56
--space-16	64px	64
--space-20	80px	80
--space-24	96px	96
--space-28	112px	112
--space-32	128px	128
--space-36	144px	144
--space-40	160px	160
--space-44	176px	176
--space-48	192px	192

---

Usage Guidelines

Component internals

Most components use Tailwind spacing utilities (p-4, gap-3, mb-6) which map directly to the 4px grid. Common patterns:

{/* Card content padding */}
<CardContent className="p-[25px]" />

{/* Form field spacing */}
<div className="space-y-6">
  <div className="space-y-2">
    <Label />
    <Input />
  </div>
</div>

{/* Section spacing */}
<section className="py-20">
  <div className="section-content-aligned">...</div>
</section>

Content alignment

The landing site uses a custom .section-content-aligned class with responsive padding:

Breakpoint	Horizontal Padding
Default (> 1440px)	200px
≤ 1440px	128px
≤ 1024px	56px
≤ 768px	24px
≤ 480px	16px

Max content width is constrained to 920px plus the horizontal padding.