Usage

Overview

The Thrive Design System uses a purposeful spacing scale built on a base unit of 4px (0.25rem). This scale ensures consistent rhythm and alignment across all components and layouts, making interfaces feel cohesive and well-crafted.

• Spacing tokens define the whitespace between and within UI elements.
• Consistent spacing reduces cognitive load and creates a sense of order.
• The scale progresses from tight (compact UIs) to generous (breathing room for content-heavy layouts).

Spacing Scale

Best Practices

• Use smaller tokens (2xs-xs) for spacing within components (padding, inline gaps).
• Use medium tokens (s-xl) for spacing between related elements.
• Use larger tokens (2xl-supra) for spacing between sections and page-level layouts.
• Always use spacing tokens instead of arbitrary values to maintain consistency.
• When in doubt, use --spacing-default (16px) as your starting point.

When Not to Use

• Don't use spacing tokens for sizing elements (width/height); use sizing tokens or Tailwind utilities instead.
• Avoid mixing arbitrary pixel values with token-based spacing in the same context.

Usage in Code

CSS Custom Properties

.my-component {
  padding: var(--spacing-default);
  gap: var(--spacing-xs);
  margin-bottom: var(--spacing-2xl);
}

Tailwind Classes

The spacing scale maps to Tailwind utility classes:

<div class="p-4 gap-2 mb-8">
  <!-- p-4 = 16px, gap-2 = 8px, mb-8 = 32px -->
</div>

Accessibility

• Adequate spacing improves readability and reduces visual clutter, benefiting all users.
• Touch targets should have at least 44px of tappable area; use spacing to ensure sufficient clearance between interactive elements.
• Generous spacing around text improves readability for users with cognitive disabilities.