Design System

Component Library

Comprehensive documentation for our unified spacing system, components, and design tokens. Built for consistency, maintainability, and developer productivity.

Unified Spacing System

Built on a 4px base unit for consistent, semantic spacing across all components.

Base Spacing Scale

Token

Value

8px (0.5rem)

Classes

space-xs, p-xs, gap-xs

Use case: Tight spacing, badges, icon gaps

Token

Value

12px (0.75rem)

Classes

space-sm, p-sm, gap-sm

Use case: Small gaps, compact layouts

Token

Value

16px (1rem)

Classes

space-md, p-md, gap-md

Use case: Default spacing, form fields

Token

Value

24px (1.5rem)

Classes

space-lg, p-lg, gap-lg

Use case: Comfortable spacing, card padding

Token

Value

32px (2rem)

Classes

space-xl, p-xl, gap-xl

Use case: Generous spacing, section gaps

Token

2xl

Value

48px (3rem)

Classes

space-2xl, p-2xl, gap-2xl

Use case: Large spacing, between sections

Token

3xl

Value

64px (4rem)

Classes

space-3xl, p-3xl, gap-3xl

Use case: Extra large, hero sections

Token

4xl

Value

96px (6rem)

Classes

space-4xl, p-4xl, gap-4xl

Use case: Section padding vertical

Semantic Layout Tokens

--section-padding-y

Vertical padding for major sections

96px

--section-padding-x

Horizontal padding for sections

24px

--container-padding

Container side padding (24-64px)

Responsive

--card-padding

Internal card spacing

24px

--component-gap

Space between related components

32px

--element-gap

Space between UI elements

16px

Usage Examples

Section Pattern

Standard page section with semantic spacing

<section className="py-section-y">
  <div className="container">
    <div className="max-w-4xl mx-auto space-y-xl">
      {/* Content */}
    </div>
  </div>
</section>

Live Preview: Section with py-section-y

Ready to build with our system?

All components and tokens are available in your codebase. Start building consistent, maintainable interfaces today.