Space

Space defines the whitespace between elements, setting visual standards for proximity, rhythm, and alignment.

Three spatial concepts are woven into the fabric of all Spirit system components, creating a unified visual order: inset space within components, vertical stack space between elements and components, and horizontal inline spacing between elements in a row.

Inset

An inset applies padding on all sides of a block or inline element. By default, all four sides are equal. Inset at X (8px), 2X (16px), or 3X (24px) Apply an inset token to any container, such as a card or a or table cell, to create consistent padding around the content.

Inset example: a card
Inset example: a card showing inset spacing

Tokens

Token Value Preview

$spirit-space-inset-8-x

64px

example

$spirit-space-inset-6-x

48px

example

$spirit-space-inset-5-x

40px

example

$spirit-space-inset-4-x

32px

example

$spirit-space-inset-3-x

24px

example

$spirit-space-inset-2-x

16px

example

$spirit-space-inset-1-x

8px

example

$spirit-space-inset-half-x

4px

example

Inset Squish

The Spirit visual style applies a squished inset to many smaller containers, such as pills and buttons. This “Squish” inset provides twice as much padding left/right as it does top/bottom.

Inset at X (4px 8px), 2X (8px 16px), or 3X (12px 24px)

Apply inset-squish tokens to small containers, like buttons, to create wider padding around a text label.

Inset example: a button
Inset example: a button showing inset squish spacing
Token Value Preview

$spirit-space-inset-squish-6-x

24px 48px

example

$spirit-space-inset-squish-4-x

16px 32px

example

$spirit-space-inset-squish-3-x

12px 24px

example

$spirit-space-inset-squish-2-x

8px 16px

example

$spirit-space-inset-squish-1-x

4px 8px

example

$spirit-space-inset-squish-half-x

2px 4px

example

Stack

Apply stack space below block-level elements to normalize vertical distance between components.

Stack at X (8px), 2X (16px), or 3X (24px)

Use proximity to signal related elements. Use whitespace to form boundaries between components.

Stack example: a list showing stacking items and stacking of blocks within an item

Tokens

Token Value Preview

$spirit-space-stack-24-x

0 0 192px 0

example

$spirit-space-stack-12-x

0 0 96px 0

example

$spirit-space-stack-8-x

0 0 64px 0

example

$spirit-space-stack-6-x

0 0 48px 0

example

$spirit-space-stack-5-x

0 0 40px 0

example

$spirit-space-stack-4-x

0 0 32px 0

example

$spirit-space-stack-3-x

0 0 24px 0

example

$spirit-space-stack-2-x

0 0 16px 0

example

$spirit-space-stack-1-x

0 0 8px 0

example

$spirit-space-stack-half-x

0 0 4px 0

example

Inline

Inline spacing separates inline elements by consistent applying space on one side of each element. By default, left-aligned elements have right-side spacing (as shown) using inline-right. Right-aligned elements are the opposite.

Inline at X (8px), 2X (16px), or 3X (24px)

Use inline spacing to separate text, such as the inline links in a footer, or block elements, such as pills, tabs, or buttons.

Inline example: a row of tabs showing the inline space between each tab

Tokens

Left-aligned items use inline-right, which adds spacing to their right. This ensures the first item is flush left.

Token Value Preview

$spirit-space-inline-right-24-x

0 192px 0 0

example

$spirit-space-inline-right-12-x

0 96px 0 0

example

$spirit-space-inline-right-8-x

0 64px 0 0

example

$spirit-space-inline-right-6-x

0 48px 0 0

example

$spirit-space-inline-right-5-x

0 40px 0 0

example

$spirit-space-inline-right-4-x

0 32px 0 0

example

$spirit-space-inline-right-3-x

0 24px 0 0

example

$spirit-space-inline-right-2-x

0 16px 0 0

example

$spirit-space-inline-right-1-x

0 8px 0 0

example

$spirit-space-inline-right-half-x

0 4px 0 0

example

Right-aligned items use inline-left, which adds spacing to their left. This ensures the last item is flush right.

Token Value Preview

$spirit-space-inline-left-24-x

0 0 0 192px

example

$spirit-space-inline-left-12-x

0 0 0 96px

example

$spirit-space-inline-left-8-x

0 0 0 64px

example

$spirit-space-inline-left-6-x

0 0 0 48px

example

$spirit-space-inline-left-5-x

0 0 0 40px

example

$spirit-space-inline-left-4-x

0 0 0 32px

example

$spirit-space-inline-left-3-x

0 0 0 24px

example

$spirit-space-inline-left-2-x

0 0 0 16px

example

$spirit-space-inline-left-1-x

0 0 0 8px

example

$spirit-space-inline-left-half-x

0 0 0 4px

example

Generic Space

Although inset, stack, and inline spacing works in most cases, Spirit provides generic space tokens too.

Tokens

Token Value

$spirit-space-generic-24-x

192px

$spirit-space-generic-12-x

96px

$spirit-space-generic-8-x

64px

$spirit-space-generic-6-x

48px

$spirit-space-generic-5-x

40px

$spirit-space-generic-4-x

32px

$spirit-space-generic-3-x

24px

$spirit-space-generic-2-x

16px

$spirit-space-generic-1-x

8px

$spirit-space-generic-half-x

4px