Spacing

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.

<div className="not-prose my-8 space-y-3"> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-4xs</p> <p className="text-xs text-foreground-neutral-weak">4px (0.25rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "4px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-3xs</p> <p className="text-xs text-foreground-neutral-weak">8px (0.5rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "8px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-2xs</p> <p className="text-xs text-foreground-neutral-weak">12px (0.75rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "12px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-xs</p> <p className="text-xs text-foreground-neutral-weak">16px (1rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "16px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-sm</p> <p className="text-xs text-foreground-neutral-weak">20px (1.25rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "20px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-md</p> <p className="text-xs text-foreground-neutral-weak">24px (1.5rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "24px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-lg</p> <p className="text-xs text-foreground-neutral-weak">28px (1.75rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "28px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-xl</p> <p className="text-xs text-foreground-neutral-weak">32px (2rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "32px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">margin-4xl</p> <p className="text-xs text-foreground-neutral-weak">48px (3rem)</p> </div> <div className="h-4 bg-background-ppg-strong rounded" style={{ width: "48px" }} /> </div> </div>

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.

<div className="not-prose my-8 space-y-3"> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-2xs</p> <p className="text-xs text-foreground-neutral-weak">12px (0.75rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "12px", height: "12px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-xs</p> <p className="text-xs text-foreground-neutral-weak">16px (1rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "16px", height: "16px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-sm</p> <p className="text-xs text-foreground-neutral-weak">20px (1.25rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "20px", height: "20px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-md</p> <p className="text-xs text-foreground-neutral-weak">24px (1.5rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "24px", height: "24px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-lg</p> <p className="text-xs text-foreground-neutral-weak">28px (1.75rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "28px", height: "28px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-xl</p> <p className="text-xs text-foreground-neutral-weak">32px (2rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "32px", height: "32px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-2xl</p> <p className="text-xs text-foreground-neutral-weak">36px (2.25rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "36px", height: "36px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-3xl</p> <p className="text-xs text-foreground-neutral-weak">40px (2.5rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "40px", height: "40px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-4xl</p> <p className="text-xs text-foreground-neutral-weak">48px (3rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "48px", height: "48px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-5xl</p> <p className="text-xs text-foreground-neutral-weak">64px (4rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "64px", height: "64px" }} /> </div> <div className="flex items-center gap-4 p-3 border border-stroke-neutral rounded-lg"> <div className="w-32 shrink-0"> <p className="text-xs font-mono text-foreground-neutral-weak">element-6xl</p> <p className="text-xs text-foreground-neutral-weak">96px (6rem)</p> </div> <div className="bg-background-orm-strong rounded" style={{ width: "96px", height: "96px" }} /> </div> </div>

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