Roosevelt Docs
Design System

Spacing

2px grid spacing scale voor consistente layouts

Spacing

Roosevelt OPS gebruikt een 2px grid spacing systeem geïnspireerd door Bento. Oneven waarden (7, 9, 11) zijn bewust weggelaten voor visuele consistentie.

Scale

TokenWaardeGebruik
--space-00pxReset
--space-12pxInline icon gap
--space-24pxTight gap, badge padding
--space-36pxSmall internal padding
--space-48pxButton padding, input padding
--space-510px—
--space-612pxCard padding (tight)
--space-816pxStandard card padding
--space-1020pxSection gap (small)
--space-1224pxSection gap (medium)
--space-1632pxLarge section padding
--space-2040pxPage section gap
--space-2448pxMajor section divider
--space-2856pxLarge page section
--space-3264pxPage top/bottom margin

Tailwind Mapping

Tailwind's default spacing schaal blijft werken. De design tokens bieden een extra laag voor consistentie:

<!-- Tailwind default -->
<div class="p-4">16px padding</div>
 
<!-- Equivalent via token: --space-8 = 16px -->
TailwindWaardeDesign Token
p-14px--space-2
p-28px--space-4
p-312px--space-6
p-416px--space-8
p-520px--space-10
p-624px--space-12
p-832px--space-16

Component Voorbeelden

<!-- Badge: tight padding -->
<span class="px-2 py-1">Badge</span>  <!-- 8px / 4px -->
 
<!-- Button: standard padding -->
<button class="px-4 py-2">Action</button>  <!-- 16px / 8px -->
 
<!-- Card: comfortable padding -->
<div class="p-6">Card content</div>  <!-- 24px -->
 
<!-- Section: large spacing -->
<section class="py-16">Section</section>  <!-- 64px -->

Previous

Colors

Next

Motion

On this page