Basic Calculator

1. Choose calculation mode (Forward, From Small, or From Large)
2. Enter your value (supports numbers, px, %)
3. View the golden ratio split instantly
4. See visual representation with golden spiral
5. Copy results or export as JSON/TXT

Typography Scale

1. Switch to "Typography" tab
2. Enter base font size (e.g., 16px)
3. View generated scale with visual samples
4. Copy individual sizes or entire scale
5. Use in your design system or CSS

Spacing System

1. Switch to "Spacing" tab
2. Enter base spacing value (e.g., 8px)
3. View generated spacing scale with visual bars
4. Copy values for your design tokens

Layout Split

1. Switch to "Layout" tab
2. Enter total width (e.g., 1440px)
3. View main content and sidebar widths
4. See visual layout preview
5. Copy CSS code for implementation

CSS Grid Layout

.container {
  display: grid;
  grid-template-columns: 1.618fr 1fr;
  gap: 20px;
}

/* Main content gets 61.8% */
/* Sidebar gets 38.2% */

Flexbox Layout

.container {
  display: flex;
  gap: 20px;
}

.main {
  flex: 1.618;
}

.sidebar {
  flex: 1;
}

Typography Scale

:root {
  --text-xs: 10px;
  --text-sm: 16px;
  --text-base: 26px;
  --text-lg: 42px;
  --text-xl: 68px;
}

/* Each size is previous × 1.618 */

Why is the golden ratio considered aesthetically pleasing?

The golden ratio creates proportions that feel naturally balanced and harmonious. It appears throughout nature, and humans have evolved to find these proportions visually appealing.

Should I use golden ratio for all my designs?

No. The golden ratio is a helpful guideline, not a strict rule. Use it where it makes sense, but prioritize usability, accessibility, and your specific design requirements.

How do I apply golden ratio to responsive design?

Use CSS Grid with fr units (1.618fr and 1fr) or Flexbox with flex values. These scale proportionally across different screen sizes while maintaining the golden ratio.

Can I use golden ratio for mobile layouts?

Yes, but consider stacking elements vertically on mobile instead of side-by-side. Apply golden ratio to vertical spacing, typography scales, and component sizing.

What's the difference between golden ratio and rule of thirds?

Rule of thirds divides space into equal thirds (33.3% each), while golden ratio uses 61.8% and 38.2%. Golden ratio is more precise and creates slightly different visual balance.