The Base-6 Modular Layout System for Web Applications

The Mathematical Beauty of Base-6 (Multiples of 3)

Digital design systems frequently oscillate between Base-4 (Tailwind defaults) and Base-8 (Material Design). However, when balancing typography line heights (typically 1.5x of font size) with container layout grids, Base-6 provides superior divisibility across factors of 2 and 3.

The Hierarchy of 3s and 6s

By enforcing a strict Base-6 metric ladder (6px, 12px, 18px, 24px, 30px, 36px, 42px, 48px, 60px, 72px, 84px, 96px, 120px, 144px, 180px, 240px, 300px, 360px, 480px, 600px, 720px, 840px, 960px, 1080px), every margin, padding, border-radius, and font size snaps to an integer grid without sub-pixel blurring.

/* Base-6 Spatial Design Tokens */
:root {
  --space-1: 6px;
  --space-2: 12px;
  --space-3: 18px;
  --space-4: 24px;
  --space-6: 36px;
  --space-8: 48px;
  --space-12: 72px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
}

Triad Visual Rhythm

Human visual perception naturally parses information grouped into triads. Organizing features, steps, benchmark metrics, and pricing tiers in sets of 3 or 6 creates an immediate impression of balance and completeness.