Main Content (61.8034%)
The golden ratio divides space naturally, with the main content taking the larger segment.
Core Layout Patterns
Classic Blog Layout
grid grid-cols-phi-fixed
Golden Thirds Grid
The golden thirds grid (38.2% : 23.6% : 38.2%) creates naturally balanced layouts based on nested golden ratios. The center column is derived from applying the golden ratio to the side columns.
Basic Proportions
38.2%
Primary column
23.6%
φ² of total width
38.2%
Primary column
grid grid-cols-phi-thirds
Harmonious Whitespace
Primary Content
The golden ratio creates natural visual rhythm, even in empty space. Notice how the center gap feels perfectly balanced.
Secondary Content
The space between elements is as important as the elements themselves.
The Math Behind Golden Thirds
The golden thirds grid is derived from nested applications of the golden ratio:
- 1. First split: 61.8% and 38.2% (1/φ and 1/φ²)
- 2. Second split: The 61.8% segment is divided again by φ
- 3. Result: 38.2% : 23.6% : 38.2%
38.2% = 1/φ²
23.6% = 1/φ³
Sum = 100%
Typography Scale
The Quick Brown Fox
text-phi-3xl (φ⁴ ≈ 6.854rem)
The Quick Brown Fox
text-phi-2xl (φ³ ≈ 4.236rem)
The Quick Brown Fox
text-phi-xl (φ² ≈ 2.618rem)
The Quick Brown Fox
text-phi-lg (φ ≈ 1.618rem)
The Quick Brown Fox
text-phi (1rem = 16px)
The Quick Brown Fox
text-phi-sm (1/φ ≈ 0.618rem)
The Mathematics
Base = 16px
φ⁴ = 6.854rem
φ³ = 4.236rem
φ² = 2.618rem
φ¹ = 1.618rem
φ⁰ = 1.000rem
φ⁻¹ = 0.618rem
Usage
<h1 class="text-phi-2xl">
<h2 class="text-phi-xl">
<p class="text-phi">
Pro Tips
- • Use font-light for larger sizes
- • Pair with leading-phi utilities
- • Works with responsive prefixes
Golden Rectangle
1 : 1.618034
aspect-phi
1.618034 : 1
aspect-phi-reverse
Example Components
Card Title
Using phi-based padding and typography.
Card Title
Natural proportions create visual harmony.
Card Title
Perfect for content-driven layouts.
Featured Content
The golden ratio (φ) appears throughout nature, from spiral galaxies to sunflower seeds. Now you can bring these divine proportions to your web layouts.
Quick Math
φ = 1.618034
1/φ = 0.618034
1/φ² = 0.381966
Asymmetric φ Layouts
Using the smallest golden ratio division (23.6%) for subtle asymmetry that feels natural and balanced
Main Content
The larger section (76.4%) provides ample space for content while the narrow sidebar creates a subtle asymmetric balance that feels natural to the eye.
76.4% width
grid-cols-phi-small-start
Article Content
The main content takes up the majority of the space, creating a natural reading width while the meta information sits in a harmonious smaller column.
76.4% width
grid-cols-phi-small-end
Flex-based Golden Layouts
Using flex and width utilities to create golden ratio compositions
Simple Flex Split
Major Section
Takes up 61.8% of the space using w-phi
Minor Section
38.2% width using w-phi-sm
flex gap-4 + w-phi + w-phi-sm
Nested Golden Ratios
Sidebar Image
Navigation
- Dashboard
- Analytics
- Settings
Primary Content
Nested golden ratio split within the main content area
Meta
Secondary information
23.6%
Tertiary width
Remaining Space
Flex-1 takes the rest
Nested flex layouts with w-phi-sm, w-phi, w-phi-xs
Feature Box Layout
Main Feature
Primary content area using w-phi (61.8%)
Featured Content
Secondary
Using w-phi-sm (38.2%)
Additional Info
flex + w-phi + w-phi-sm with nested flex columns
Golden Ratio Spacing
Using phi-based units for padding, margins, and gaps creates harmonious spatial relationships
Padding Scale
p-phi
1.618rem (26px)
p-phi-sm
1rem (16px)
p-phi-xs
0.618rem (10px)
Nested Spacing Harmony
Content Hierarchy
Primary Content
Important information
Key details
Spacing: p-phi, p-phi-sm, space-y-phi-sm, space-y-phi-xs
Hover over items to see interactive states
Card Grid with Golden Spacing
Card Title
Using phi-based spacing for consistent rhythm
Card Title
Margins and padding follow the golden ratio
Card Title
Creating visual harmony through spacing
Form Layout with Golden Spacing
Form using p-phi, space-y-phi-sm, space-y-phi-xs
Content Rhythm
Article Title
Main paragraph with phi-based line height. The golden ratio creates natural rhythm in typography and spacing.
"The golden ratio has been used in art and architecture for thousands of years."
Another paragraph demonstrating the harmonious spacing between elements.
Supporting point 1
Supporting point 2
Article using space-y-phi-sm, p-phi-xs, gap-phi-xs
Line Height Harmony
Basic Line Heights
leading-phi (1.618034)
The golden ratio creates perfect rhythm in typography. This paragraph uses the classic φ value for line height, creating natural spacing between lines.
leading-phi-0.5 (√φ ≈ 1.272019)
For tighter spacing, we can use the square root of φ. This creates a more compact but still harmonious spacing, perfect for headings or short paragraphs.
leading-phi-2 (φ² ≈ 2.618034)
For more spacious text, we can use φ². This creates airy, open spacing that's perfect for important quotes or featured text.
Refined Variations
leading-phi-tight (1 + 1/φ ≈
1.381966)
A slightly tighter spacing that maintains the golden ratio's harmony while providing more density. Perfect for body text that needs to be compact but readable.
leading-phi-relaxed (φ + 1/φ ≈
2.236068)
A more relaxed spacing that combines φ with its reciprocal. This creates an open, airy feel while maintaining mathematical harmony.
Line Height Mathematics
Basic φ Values:
- φ = 1.618034
- φ² = 2.618034
- √φ = 1.272019
Derived Values:
- 1 + 1/φ = 1.381966
- φ + 1/φ = 2.236068
Each line height value is derived from the golden ratio, creating a harmonious scale of spacing options.
Deep Nested Golden Harmony
Nested Golden Spiral
Primary Section
61.8%
Major
38.2%
Minor
φ
Secondary
Reciprocal
0.618034
Square
2.618034
Nesting Levels & Values:
Level 1: φ¹ = 1.618034
Level 2: φ² = 2.618034
Level 3: φ³ = 4.236068
Level 4: φ⁴ = 6.854102
Level 5: φ⁵ = 11.09017
Each level multiplies by φ (1.618034)