Spacing

A consistent spacing system ensures visual harmony and rhythm across all components and layouts. Brand uses a defined scale of spacing tokens.

Spacing Scale

The spacing system is built on a consistent scale that provides options for tight to relaxed layouts. Use these tokens consistently to maintain visual rhythm.

Usage

1/* Using spacing tokens */
2.card {
3  padding: var(--spacing-md);
4  margin-bottom: var(--spacing-lg);
5}
6
7.button {
8  padding: var(--spacing-sm) var(--spacing-md);
9}
10
11.section {
12  padding: var(--spacing-xxl) var(--spacing-xl);
13}

Spacing Guidelines

Component Internal Spacing (Padding)

• xs (4px) - Tight spacing within compact elements
• sm (8px) - Default padding for small components
• md (16px) - Standard component padding
• lg (24px) - Generous padding for cards and containers

Component External Spacing (Margin)

• sm (8px) - Tight spacing between related items
• md (16px) - Standard spacing between components
• lg (24px) - Section breaks and component groups
• xl (32px) - Major section separations
• xxl (48px) - Page section padding

Design Token Reference