Spacing

Crystal uses a Fibonacci-inspired spacing scale that provides natural visual rhythm. Each step is approximately the sum of the previous two, creating proportions found throughout nature and classical design.

The Scale

Fibonacci Spacing Scale

4 → 8 → 16 → 24 → 40 → 64 → 104 → 168 → 272

0

0px

1

4px

2

8px

3

16px

4

24px

5

40px

6

64px

7

104px

8

168px

9

272px

Click any bar to copy the CSS variable. Use: spacing-{n} in Tailwind or var(--spacing-{n}) in CSS.

Spacing Tokens

Token	Variable	Value	Description
`spacing-0`	`--spacing-0`	0px	Reset
`spacing-1`	`--spacing-1`	4px	Tight inline spacing, icon gaps
`spacing-2`	`--spacing-2`	8px	Default inline spacing, small padding
`spacing-3`	`--spacing-3`	16px	Standard padding, section gaps
`spacing-4`	`--spacing-4`	24px	Card padding, form field spacing
`spacing-5`	`--spacing-5`	40px	Section padding, large gaps
`spacing-6`	`--spacing-6`	64px	Section margins, hero padding
`spacing-7`	`--spacing-7`	104px	Page-level spacing
`spacing-8`	`--spacing-8`	168px	Major layout breaks
`spacing-9`	`--spacing-9`	272px	Maximum spacing (rarely used)

Values update live with theme changes. Click any row to copy the CSS variable.

Tailwind Usage

The spacing scale maps to Tailwind's spacing utilities:

<div class="p-3">16px padding</div>
<div class="gap-2">8px gap</div>
<div class="mt-5">40px top margin</div>
<div class="py-6">64px vertical padding</div>

CSS Custom Properties

.hero {
  padding: var(--spacing-6) var(--spacing-4);  /* 64px 24px */
  margin-bottom: var(--spacing-7);              /* 104px */
}

.card {
  padding: var(--spacing-4);     /* 24px */
  gap: var(--spacing-2);          /* 8px */
}

Why Fibonacci?

Traditional spacing systems use linear scales (4, 8, 12, 16, 20...) or powers of 2 (4, 8, 16, 32, 64...). Crystal's Fibonacci-inspired scale provides:

Natural harmony: Ratios approximate the golden ratio (1.618)
Clear hierarchy: Each step is visually distinct from adjacent steps
Fewer decisions: 10 values cover all use cases from inline gaps to full-page margins
Consistent proportion: The ratio between any two adjacent steps feels balanced