Golden Ratio Calculator

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 */