Building a Design System on Mathematical Harmony

The algebra of beautiful design

16 January 20268 min read

Most design systems feel arbitrary—a collection of numbers chosen because they seemed reasonable. This one is different. Every spacing value, every font size, every breakpoint follows mathematical sequences that naturally create visual harmony.

The Philosophy

Design systems should be predictable. When you know that spacing follows the Fibonacci sequence and font sizes follow the same pattern, you don't need to guess. You don't need a design spec with 47 different margin values. You need one simple rule: multiply by φ (the golden ratio, ≈1.618).

The system is built on two foundational ideas:

  1. The Golden Ratio - A mathematical constant that appears throughout nature and has been used in art and architecture for centuries
  2. The Fibonacci Sequence - A series where each number is the sum of the two before it (0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89...)

These aren't decorative. They're the entire foundation.

The Golden Ratio Grid

The layout starts with a single column: 34em wide. For a reading experience optimized around 65–75 characters per line (the sweet spot for comprehension), this is perfect.

But a single column is boring. On larger screens, we need a secondary column. We get it by dividing by φ:

34em ÷ 1.618 ≈ 21em

The gutter between them is φ itself:

1.618em ≈ 26px at a 16px base font size

Total width:

34em + 1.618em + 21em = 56.618em

On mobile, the two-column layout collapses to a single column. The grid reactivates at 900px.

In CSS:

:root {
  --phi: 1.618;
  --grid-primary: 34em;
  --grid-secondary: 21em;
  --grid-gutter: calc(var(--phi) * 1em); /* 1.618em */
  --grid-total: 56.618em;
}

.grid-golden {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .grid-golden {
    grid-template-columns: var(--grid-primary) var(--grid-secondary);
    gap: var(--grid-gutter);
  }
}

Typography: Three Fonts, One Purpose

The typography system uses three fonts, each with a distinct role:

1. Monda (Body text)

  • Weights: 400, 500, 600, 700
  • Role: Primary reading font for paragraphs, UI labels, lists
  • Why: Geometric and readable; weights provide hierarchy without changing fonts

2. Kanit 100 (Display)

  • Weight: 100 (ultra-thin)
  • Role: h1 only—the page title
  • Why: Dramatic contrast. Ultra-thin at large size creates visual impact without noise

3. Space Mono (Structure + Code)

  • Weights: 400, 700
  • Role: Headings (h2–h6), code blocks, labels
  • Why: Monospace creates a structured, technical feel. Separates hierarchy visually

In CSS:

h1 {
  font-family: var(--font-display); /* Kanit 100 */
  font-size: var(--font-size-2xl);
  font-weight: 100;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-secondary); /* Space Mono */
  font-weight: 700;
}

body {
  font-family: var(--font-base); /* Monda */
}

code, pre {
  font-family: var(--font-secondary); /* Space Mono */
}

Fibonacci Font Sizes

Font sizes don't increment by fixed amounts (no +2px, +4px, +6px). Instead, they follow the Fibonacci sequence:

8, 13, 21, 34, 55, 89 (px equivalents at 16px base)

Mapped to variables:

--font-size-xs:   0.5em      /* 8px */
--font-size-sm:   0.8125em   /* 13px */
--font-size-base: 1em        /* 16px */
--font-size-lg:   1.3125em   /* 21px */
--font-size-xl:   2.125em    /* 34px */
--font-size-2xl:  3.4375em   /* 55px */
--font-size-3xl:  5.5625em   /* 89px */

Why Fibonacci? The ratio between consecutive Fibonacci numbers approaches φ. This creates a consistent visual growth where jumping from one size to the next feels natural, not jarring.

In CSS:

p {
  font-size: var(--font-size-base);
}

h3 {
  font-size: var(--font-size-lg);
}

h2 {
  font-size: var(--font-size-xl);
}

small {
  font-size: var(--font-size-sm);
}

Fibonacci Spacing

Spacing is everything in design. Too tight and text feels suffocating. Too loose and it feels disconnected. The solution: consistent, mathematically justified spacing.

The base unit is 0.25em (4px at 16px root). Multiples of the Fibonacci sequence:

--space-0:  0
--space-1:  0.25em     /* 4px */
--space-2:  0.5em      /* 8px */
--space-3:  0.75em     /* 12px */
--space-5:  1.25em     /* 20px */
--space-8:  2em        /* 32px */
--space-13: 3.25em     /* 52px */
--space-21: 5.25em     /* 84px */
--space-34: 8.5em      /* 136px */
--space-55: 13.75em    /* 220px */

Every spacing decision uses these values. No custom margins. No "15px because it looked right." This means the spacing rhythm propagates throughout the entire interface.

In CSS:

h2 {
  margin-top: var(--space-21);    /* 84px */
  margin-bottom: var(--space-5);  /* 20px */
}

p {
  margin-bottom: var(--space-5);  /* 20px */
}

button {
  padding: var(--space-3) var(--space-5); /* 12px 20px */
}

Mobile-First Breakpoints

Most design systems define breakpoints based on desktop first, then squeeze mobile. This system inverts that: mobile is the default, desktop is the enhancement.

Six breakpoints, heavily skewed toward mobile:

--breakpoint-xs:   320px   /* Tiny phones */
--breakpoint-sm:   375px   /* Small phones (iPhone SE) */
--breakpoint-md:   428px   /* Standard phones (iPhone 14/15) */
--breakpoint-lg:   520px   /* Large phones (Pro Max) */
--breakpoint-xl:   680px   /* Small tablets */
--breakpoint-2xl:  900px   /* Desktop → 2-column grid */

Why 6 breakpoints? Because mobile needs granularity. A 320px phone screen and a 680px tablet screen require different typography and spacing adjustments. But there's only one desktop breakpoint because once you reach 900px, the full two-column layout takes over.

In CSS:

.container {
  padding-inline: var(--gutter-xs); /* 12px on tiny screens */
}

@media (min-width: 375px) {
  .container {
    padding-inline: var(--gutter-sm); /* 16px on small phones */
  }
}

@media (min-width: 900px) {
  .container {
    padding-inline: 0; /* Grid handles spacing */
  }
}

Desktop Offset: Quirky Centering

On desktop, instead of centering the layout dead center, we offset it slightly to the right using—you guessed it—a Fibonacci value:

var(--space-13) = 52px offset

This creates visual breathing room on the left while keeping the layout slightly off-center. It feels intentional and quirky rather than perfectly balanced. The offset is applied using transform: translateX() on the desktop breakpoint, which means it doesn't affect the layout's centering calculations—the container still measures and aligns as centered, but appears shifted.

In CSS:

@media (min-width: 900px) {
  .container {
    padding-inline: 0;
    transform: translateX(var(--space-13)); /* 52px right */
  }
}

Why transform instead of margin? Transform is applied after layout is calculated, so it doesn't break centering logic. Pure elegance.

Responsive Gutters

Side padding isn't fixed—it scales with the breakpoints:

--gutter-xs: 0.75em  /* 12px */
--gutter-sm: 1em     /* 16px */
--gutter-md: 1.25em  /* 20px */
--gutter-lg: 1.5em   /* 24px */

On desktop, the gutter vanishes because the grid's gap handles spacing. This keeps the system predictable: you're not fighting the container for space.

Colors & Dark Mode

The color system is built on HSL. Instead of having 50 arbitrary hex colors, we define:

  1. Hue - The color (0-360°)
  2. Saturation - How colorful (0-100%)
  3. Lightness - How bright (0-100%)

This makes dark mode trivial. A light mode uses lightness 90%. Dark mode uses lightness 10%. No manual color tweaks.

:root {
  --hue-brand: 200; /* Sky blue */
  --sat-brand: 100%;
}

:root {
  --color-brand-50: hsl(var(--hue-brand), var(--sat-brand), 97%);
  --color-brand-500: hsl(var(--hue-brand), var(--sat-brand), 50%);
  --color-brand-900: hsl(var(--hue-brand), var(--sat-brand), 19%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text-primary: var(--color-gray-50);
    --color-bg-primary: var(--color-gray-900);
  }
}

Semantic tokens map to actual use:

:root {
  --color-text-primary: var(--color-gray-900);
  --color-bg-primary: var(--color-white);
  --color-border-primary: var(--color-gray-200);
}

Now you use var(--color-text-primary) instead of #1a1a1a, and dark mode works automatically.

Other Primitives

The system extends beyond spacing and typography:

  • Border radius: 0.125em (2px) to 1em (16px)—all em-based so they scale
  • Shadows: Layered for depth without heaviness
  • Transitions: 150ms, 200ms, 300ms, 500ms—all Fibonacci-adjacent
  • Z-index: Named layers (--z-dropdown: 1000, --z-modal: 1200)
  • Line heights: 1.25 (tight) through 2 (loose)

Putting It Together

These primitives don't exist in isolation. A button uses typography (font-size), spacing (padding), colors (background), transitions (hover state), and sizing. The magic is that every element cascades from the same foundation.

A simple component:

button {
  font-size: var(--font-size-sm);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse);
  border-radius: var(--radius-base);
  transition: background-color var(--duration-fast) var(--ease-out);
}

button:hover {
  background-color: var(--color-bg-brand-hover);
}

Every value traces back to a mathematical sequence or semantic choice. There's no guesswork.

The Result

A design system built on mathematical principles isn't just aesthetic—it's practical:

  • Predictability: You know how spacing works. You know how sizes scale.
  • Maintainability: Change one variable (--phi) and the entire system follows.
  • Scalability: Add a new feature, use the existing tokens, and it automatically feels cohesive.
  • Dark mode: Automatic, no manual tweaking.
  • Accessibility: Proper line heights, contrast ratios, and motion preferences built in.

The site you're reading now is built entirely on this system. Every margin, every font size, every color has a mathematical justification. That's not decoration—that's discipline. And discipline is what makes design systems work.