CREATE SOMETHING

The Scale

Each step multiplies or divides by φ. Starting from 1rem (base), larger values multiply upward; smaller values divide downward. The result is spacing that relates harmoniously.

xs = 1/φ → sm = 1 → md = φ → lg = φ² → ...

Spacing Tokens

Use these tokens for padding, margins, gaps, and any spatial relationships.

--space-xs φ⁻¹

0.618rem ~10px

Tight gaps, inline spacing

--space-sm φ⁰ (base)

1rem 16px

Default component padding

--space-md φ¹

1.618rem ~26px

Section padding, gaps

--space-lg φ²

2.618rem ~42px

Large sections

--space-xl φ³

4.236rem ~68px

Page sections

--space-2xl φ⁴

6.854rem ~110px

Hero spacing

--space-3xl φ⁵

11.09rem ~177px

Major divisions

Visual Harmony

Nested containers demonstrating the golden ratio in action. Each container's padding relates to the next by φ.

--space-xl

--space-lg

--space-md

--space-sm

Border Radius

Radius tokens use a 4px base with multipliers for consistency across UI elements.

--radius-sm 6px Buttons, inputs

--radius-md 8px Cards, small panels

--radius-lg 12px Dialogs, large cards

--radius-xl 16px Modals, popovers

--radius-2xl 24px Feature cards

--radius-full 9999px Circles, pills

Usage Guidelines

Component Internals

Use --space-sm and --space-xs for internal component spacing.

Between Components

Use --space-md and --space-lg for gaps between components.

Page Sections

Use --space-xl and --space-2xl for major page divisions.

Consistency

Prefer adjacent scale steps. Don't jump from --space-xs to --space-xl.

Usage

spacing-usage.css
 /* Component spacing */
.card {
  padding: var(--space-md);
  gap: var(--space-sm);
}

/* Section spacing */
.section {
  padding-block: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

/* Grid gaps */
.grid {
  gap: var(--space-md);
}

/* Inline elements */
.button-icon {
  margin-right: var(--space-xs);
}