Spacing & Sizing

Unified size scale for padding, margin, gap, width and height. Token name = pixels, rem values under the hood.

Size Scale

All available values. Token number equals pixels — no conversion needed.

px rem Visual
0 0
2 0.125
4 0.25
6 0.375
8 0.5
12 0.75
16 1
20 1.25
24 1.5
32 2
40 2.5
48 3
56 3.5
64 4
72 4.5
80 5
96 6

Token Syntax

Prefix defines the property, number equals pixels. rem conversion happens automatically.

Property Token CSS Output
Padding padding-16 padding: 1rem
Padding X / Y padding-x-16, padding-y-12 padding: 0.75rem 1rem
Margin margin-8 margin: 0.5rem
Gap gap-12 gap: 0.75rem
Width width-40 width: 2.5rem
Height height-40 height: 2.5rem
Size (W + H) size-32 width: 2rem; height: 2rem

Scale Progression

How the scale grows: small increments for fine control, larger for layout.

html
Fine (0-8px)
+2px steps for component internals
0
2
4
6
8
Medium (8-16px)
+4px steps for element spacing
8
12
16
Large (16px+)
+8px steps for layout gaps
16
24
32
40
48 
<!-- Fine: 0-8px, +2px steps -->
<div class="uc-p-2">...</div>   <!-- 8px padding -->
<div class="uc-gap-3">...</div> <!-- 12px gap -->

<!-- Medium: 8-16px, +4px steps -->
<div class="uc-p-4">...</div>   <!-- 16px padding -->

<!-- Large: 16px+, +8px steps -->
<div class="uc-gap-8">...</div> <!-- 32px gap -->
<div class="uc-p-12">...</div>  <!-- 48px padding -->

Usage Guidelines

When to use each size range.

Compact (0-8px)
Icon-to-label gaps, inline element spacing, tight padding inside small controls.
Label
gap-8
Comfortable (12-24px)
Card padding, list item spacing, form field gaps, section paddings.
padding-16
Spacious (32-48px)
Section gaps, page margins, hero areas, content separation.
gap-32
Layout (56-96px)
Page-level spacing, section dividers, major content blocks.
margin-64

Applied Example

A card showing size tokens in action.

html
padding-16
Card Header
margin-top-4 Subtitle text
padding-16
gap-12 Content block with comfortable spacing between elements.
gap-8
User Name
padding-16
<div class="uc-surface-card">
  <!-- Header: padding-16 -->
  <div class="uc-p-4">
    <div class="uc-text-sm uc-font-semibold">Card Header</div>
    <div class="uc-text-xs uc-text-fg-disabled uc-mt-1">Subtitle</div>
  </div>
  <!-- Body: padding-16, gap-12 -->
  <div class="uc-p-4 uc-flex uc-flex-col uc-gap-3">
    <p class="uc-text-xs uc-text-fg-disabled">Content block</p>
    <div class="uc-flex uc-items-center uc-gap-2">
      <div class="uc-w-6 uc-h-6 uc-rounded-full uc-bg-neutrals-muted"></div>
      <span class="uc-text-xs">User Name</span>
    </div>
  </div>
  <!-- Footer: padding-16, gap-8 -->
  <div class="uc-border-t uc-border-border-default uc-p-4 uc-flex uc-justify-end uc-gap-2">
    <button class="uc-btn uc-btn-bordered uc-btn-sm">Cancel</button>
    <button class="uc-btn uc-btn-primary uc-btn-sm">Save</button>
  </div>
</div>