Space

Space is the foundation of visual organization in Bolt. Consistent spacing patterns help users understand what belongs together, what is subordinate and what deserves focus. By controlling distance, rhythm and density, spacing establishes relationships and guides attention—reducing cognitive load and creating calmer, more readable experiences.

Bolt's spacing system is token-driven, using consistent incremental values as the foundational unit. This ensures predictable gaps that respect density settings (Compact / Default / Sparse) without breaking hierarchy or readability.

Space exists to communicate meaning through distance and rhythm. The amount of space between elements signals importance. Proper use of space allows layouts to remain clear and legible—even as content density increases.

Space should never be accidental. Elements placed close together are perceived as related. Increasing space between elements weakens their perceived relationship. Space is the primary method for grouping related content—prefer spacing over lines, boxes or decorative dividers.

Bolt's spacing system ensures consistency and scalability through strict standards:

• All spacing uses predefined tokens from the system spacing scale—no ad-hoc values
• Spacing respects density settings without breaking hierarchy or readability
• Vertical rhythm ensures consistent, predictable gaps between stacked elements and sections
• Spacing patterns repeat across similar layouts to reinforce familiarity and scanning efficiency

See also: Layout & Grid principles for how spacing works within grid structures.

• Elements with more surrounding space are perceived as more important
• Denser clusters signal supporting or subordinate content
• Critical or high-priority elements require additional space to attract focus
• Group related elements closely and separate unrelated elements with larger spacing intervals

• Apply consistent spacing patterns to create predictable scanning rhythm
• Use vertical rhythm to control separation between stacked elements—spacing must scale fluidly with density while preserving relative hierarchy
• Introduce variation thoughtfully to guide attention and create emphasis
• Prefer rhythm and spacing over decorative dividers for content separation
• Ensure spacing never compresses below minimum legibility or focus state requirements
• Content-heavy sections are allowed, but an entire page should not feel crowded—white space gives the eye places to rest. (Note: this refers to content density, not Bolt's global density settings.)
• While spacing tokens enforce consistency, visual balance may require minor optical adjustments—use visual judgment to correct imbalances caused by differing visual weight, but remain within the spacing system

Consistent spacing reduces visual noise, accelerates comprehension and improves usability.

Clear spatial relationships help users understand structure quickly, scan more efficiently and feel less overwhelmed—especially in dense interfaces such as dashboards, forms and content-heavy pages. By relying on spacing rather than decoration, interfaces feel cleaner, more intentional and more trustworthy.

Simple rule of thumb: If users must work to understand what belongs together, the spacing isn't doing its job.

• Fixed vs fluid
• Spacing sizes
• Spacing classes
• Spacing tokens

Spacing may be fixed or fluid, indicating whether it responds to global density configuration.

Spacing classes may be used in markup to add margin or padding to an individual element.

Spacing classes apply Bolt spacing tokens to margin or padding in the specified size and direction. The class names follow the pattern:

bolt-space-{type}-{size}

Type

• inner : Equal padding on all sides
• inner-wide : Less padding on top and bottom
• bottom : Adds margin on bottom
• left : Adds left margin for inline elements
• right : Adds right margin for inline elements

Size

• 3xs through 4xl: see spacing sizes

<div class="bolt-space-inner-xl">
  Equal padding on all sides
</div>

<div class="bolt-space-inner-wide-xl">
  Less padding on top and bottom
</div>

<div class="bolt-space-bottom-xl">
  Margin on bottom
</div>

Apply left and right space to inline items like navigation links to control the spacing between them.

<span>
  No margin
</span>
<span class="bolt-space-left-lg">
  Left margin
</span>
<span class="bolt-space-left-lg">
  Left margin
</span>

<span class="bolt-space-right-lg">
  Right margin
</span>
<span class="bolt-space-right-lg">
  Right margin
</span>
<span>
  No margin
</span>

Spacing tokens are used in styles for padding and margins of screen components and layouts.

See also: Space tokens for complete token documentation.