Spacing System

Fluid, responsive spacing that adapts to viewport size

What is Fluid Spacing?

BreakColorUI's spacing system uses CSS clamp() to create responsive spacing values that scale smoothly between minimum and maximum values based on viewport width. Perfect spacing on every device without breakpoints.

Why Fluid Spacing?

  • • Automatically adapts to any screen size
  • • Two spacing scales: Components & Sections
  • • No complex breakpoint management
  • • Consistent visual rhythm across devices
  • • Uses modern CSS clamp() for precision

Two Spacing Scales

BreakColorUI provides two distinct spacing systems for different purposes:

Component Spacing

Smaller, precise spacing for UI elements like buttons, cards, forms, and flex/grid gaps

Section Spacing

Larger, page-level spacing for sections, hero areas, and content blocks

Component vs Section Spacing

Component Spacing (--hcl-space-comp-*)

Use for: Button padding, card internal spacing, form fields, flex/grid gaps, small UI elements

Section Spacing (--hcl-space-sec-*)

Use for: Section padding (top/bottom), content block spacing, hero sections, large layout spacing

7-Step Spacing Scale

Both component and section spacing use the same 7-step scale from extra-small to triple-extra-large:

Scale: XS → S → M → L → XL → XXL → 3XL

Each step uses fluid clamp() to scale smoothly between minimum and maximum values as the viewport changes.

XS: Tiny gaps
S: Small spacing
M: Medium spacing
L: Large spacing
XL: Extra large
XXL: Double XL
3XL: Triple XL

Section Multiplier (1.5x)

Section spacing includes an optional multiplier (default: 1.5x) applied to all values. This ensures sections always have noticeably more breathing room than components, creating clear visual hierarchy between micro (component) and macro (section) spacing.

Configuring Spacing

Set up your spacing system in the dashboard:

Configuration Steps

  1. 1. Open Spacing Tab - Navigate to your project's Spacing section
  2. 2. Configure Component spacing - Set min/max values for each step (XS to 3XL)
  3. 3. Configure Section spacing - Set min/max values (typically 1.5-2x larger than components)
  4. 4. Adjust viewport range - Customize if needed (default: 320px to 1440px)
  5. 5. Set section multiplier - Fine-tune the ratio (default: 1.5x)
  6. 6. Save - Click save to generate CSS variables

Using Spacing Variables

Once configured, your spacing system becomes available as CSS variables:

Spacing CSS Variablescss
/* Component Spacing (fluid clamp) */ --hcl-space-comp-xs --hcl-space-comp-s --hcl-space-comp-m --hcl-space-comp-l --hcl-space-comp-xl --hcl-space-comp-xxl --hcl-space-comp-3xl /* Section Spacing (fluid clamp with multiplier) */ --hcl-space-sec-xs --hcl-space-sec-s --hcl-space-sec-m --hcl-space-sec-l --hcl-space-sec-xl --hcl-space-sec-xxl --hcl-space-sec-3xl
Practical Usage Examplescss
/* Component spacing - for UI elements */ .button { padding: var(--hcl-space-comp-s) var(--hcl-space-comp-m); gap: var(--hcl-space-comp-xs); } .card { padding: var(--hcl-space-comp-l); gap: var(--hcl-space-comp-m); } .form-field { margin-bottom: var(--hcl-space-comp-m); } /* Section spacing - for page layout */ .section { padding-top: var(--hcl-space-sec-xl); padding-bottom: var(--hcl-space-sec-xl); } .hero { padding-top: var(--hcl-space-sec-3xl); padding-bottom: var(--hcl-space-sec-3xl); } .content-block { margin-bottom: var(--hcl-space-sec-l); }

Best Practices

Follow these guidelines for effective spacing:

Component Spacing for UI

Use for buttons, cards, forms, and UI element internal spacing

Section Spacing for Layout

Use for page sections, hero areas, and large content blocks

Maintain Hierarchy

Section spacing should always be visibly larger to create clear separation

Spacing hierarchy

Think of spacing as having two levels: micro (components) and macro (sections). This creates a natural rhythm where small UI elements feel tight and organized, while page sections feel spacious and easy to scan.

Real-World Example

Here's how component and section spacing work together in a complete page:

Complete Page Layoutcss
/* Hero section - large section spacing */ .hero { padding-top: var(--hcl-space-sec-3xl); /* Lots of breathing room */ padding-bottom: var(--hcl-space-sec-3xl); } .hero-content { gap: var(--hcl-space-comp-l); /* Components use smaller spacing */ } /* Features section */ .features-section { padding-top: var(--hcl-space-sec-xl); padding-bottom: var(--hcl-space-sec-xl); gap: var(--hcl-space-sec-m); /* Gap between section items */ } /* Feature card - component spacing */ .feature-card { padding: var(--hcl-space-comp-l); /* Internal padding */ gap: var(--hcl-space-comp-m); /* Gap between card elements */ } .feature-card-icon { margin-bottom: var(--hcl-space-comp-s); } /* CTA section */ .cta-section { padding-top: var(--hcl-space-sec-xxl); padding-bottom: var(--hcl-space-sec-xxl); } .cta-button { padding: var(--hcl-space-comp-m) var(--hcl-space-comp-xl); gap: var(--hcl-space-comp-s); }

Visual rhythm in action

Notice how section spacing (3xl, xl, xxl) creates macro rhythm between page areas, while component spacing (l, m, s) creates micro rhythm within UI elements. This two-tier system creates professional, balanced layouts automatically.

Next Steps

With spacing configured, you're ready to set up your theme system:

Continue to Theme

Head to Theme Configuration to configure page layout, responsive breakpoints, and border radius presets.