CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

/* clamp(min, preferred, max) */
h1 { font-size: clamp(2.5rem, 6vw, 6rem);   }
h2 { font-size: clamp(2rem,   4vw, 3.75rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem);  }
p  { font-size: clamp(1rem,   1.5vw, 1.125rem); }

/* Alternative: fluid spacing */
.section {
  padding: clamp(2rem, 5vw, 6rem) clamp(1rem, 5vw, 2rem);
}