Spacing
Spacing tokens from the Eclipse Design System
The Eclipse Design System defines spacing tokens in two categories: Margin for gaps and layout spacing, and Element for component sizing (heights, widths, padding). All values use rem units for scalability.
Margin
Use margin tokens for gaps between elements, padding within containers, and general layout spacing.
margin-4xs
4px (0.25rem)
margin-3xs
8px (0.5rem)
margin-2xs
12px (0.75rem)
margin-xs
16px (1rem)
margin-sm
20px (1.25rem)
margin-md
24px (1.5rem)
margin-lg
28px (1.75rem)
margin-xl
32px (2rem)
margin-4xl
48px (3rem)
Margin reference
| Token | Value |
|---|---|
--spacing-margin-4xs | 4px (0.25rem) |
--spacing-margin-3xs | 8px (0.5rem) |
--spacing-margin-2xs | 12px (0.75rem) |
--spacing-margin-xs | 16px (1rem) |
--spacing-margin-sm | 20px (1.25rem) |
--spacing-margin-md | 24px (1.5rem) |
--spacing-margin-lg | 28px (1.75rem) |
--spacing-margin-xl | 32px (2rem) |
--spacing-margin-4xl | 48px (3rem) |
Element
Use element tokens for component heights, minimum widths, icon sizes, and other fixed dimensions.
element-2xs
12px (0.75rem)
element-xs
16px (1rem)
element-sm
20px (1.25rem)
element-md
24px (1.5rem)
element-lg
28px (1.75rem)
element-xl
32px (2rem)
element-2xl
36px (2.25rem)
element-3xl
40px (2.5rem)
element-4xl
48px (3rem)
element-5xl
64px (4rem)
element-6xl
96px (6rem)
Element reference
| Token | Value |
|---|---|
--spacing-element-2xs | 12px (0.75rem) |
--spacing-element-xs | 16px (1rem) |
--spacing-element-sm | 20px (1.25rem) |
--spacing-element-md | 24px (1.5rem) |
--spacing-element-lg | 28px (1.75rem) |
--spacing-element-xl | 32px (2rem) |
--spacing-element-2xl | 36px (2.25rem) |
--spacing-element-3xl | 40px (2.5rem) |
--spacing-element-4xl | 48px (3rem) |
--spacing-element-5xl | 64px (4rem) |
--spacing-element-6xl | 96px (6rem) |
Usage
// Margin tokens as gap, padding, margin
<div className="flex gap-margin-sm">
<Card />
<Card />
</div>
<div className="p-margin-xs m-margin-3xs">
Content with token-based padding and margin
</div>
// Element tokens for sizing
<div className="h-element-3xl w-element-3xl">
<Avatar />
</div>
// Mixing with other utilities
<div className="min-h-element-xl px-margin-xs gap-margin-2xs">
<Button />
</div>