Softness is Strength

Fluid Type & Spacing

Swap fixed sizes for fluid

/* ❌ Rigid, breaks at breakpoints */
h1 {
  font-size: 24px;
}
@media (min-width: 768px) {
  h1 { font-size: 32px; }
}
@media (min-width: 1024px) {
  h1 { font-size: 48px; }
}

/* ✅ Soft, flows like water */
h1 {
  font-size: clamp(1.5rem, 4cqw + 1rem, 3rem);
}

.container {
  gap: clamp(0.5rem, 2cqw, 2rem);
}
Watch type and spacing flow with container width...

Fluid Typography

The softest thing in the universe overcomes the hardest. Text flows smoothly between sizes.

Flexible
Spacing
Too

(no code yet)