modular-scale

name	modular-scale
description	Use when creating consistent size hierarchies. Modular scale = all sizes derived from one base × ratio. Eliminates arbitrary sizes.

Modular Scale

All sizes derived from one base × scale ratio. Ratio examples: 1.2 (minor third), 1.25 (major third), 1.333 (perfect fourth), 1.618 (golden).

Modular scale CSS

:root {
  --base: 1rem;
  --scale: 1.333;
  --size-xs: calc(var(--base) / var(--scale) / var(--scale));  /* 0.56rem */
  --size-sm: calc(var(--base) / var(--scale));                 /* 0.75rem */
  --size-md: var(--base);                                       /* 1rem */
  --size-lg: calc(var(--base) * var(--scale));                 /* 1.333rem */
  --size-xl: calc(var(--base) * var(--scale) * var(--scale));  /* 1.78rem */
  --size-2xl: ...;
}

Recommended scale ratios for editorial

1.25 (major third): subtle hierarchy 1.333 (perfect fourth): balanced (recommended for CardPrepAI) 1.5 (perfect fifth): moderate hierarchy 1.618 (golden): dramatic, display-focused

Avoid: arbitrary sizes (14px, 17px, 22px) — these don't fit any ratio and feel random.

Application across components

Apply same modular scale to:

• Type sizes (h1, h2, h3, body, caption)
• Spacing (margin, padding)
• Component sizing (button heights, icon sizes)
• Border-radius (consistent corner radii)

Result: visual harmony across components.

Where this fits in the X3 empire

Modular scale system underpinning CardPrepAI's typographic and spacing system.