utopia-fluid-scales

Fluid typography uses CSS clamp() to scale type smoothly between minimum and maximum sizes across viewports. This Skill provides pre-configured type scale tokens (--step--2 through --step-5) that automatically adjust sizing from 360px to 1240px viewports, eliminating the need for multiple breakpoints.

Container queries (cqi units) let elements respond to their container's width rather than viewport width. This Skill applies container-type: inline-size to enable fluid spacing and typography tokens that adapt based on their immediate parent's size, not the window.

Yes. This Skill exposes space scale tokens from --space-3xs to --space-3xl as CSS variables, enabling consistent, fluid spacing across all components. Values scale automatically between 360px and 1240px without hardcoding breakpoints.

Define root typography and space tokens, apply var(--step-0) to body text, and set container-type: inline-size on a parent element. The Skill provides the complete token structure; you configure initial scale values and apply variables throughout your layout.

Viewport-based sizing scales with window width, affecting all elements uniformly. Container-based sizing (cqi) scales elements relative to their parent container, enabling independent scaling within nested components—useful for flexible dashboards and modular component libraries.

No. Fluid scales with CSS clamp() eliminate discrete breakpoints by creating smooth transitions across the entire range. This Skill's token system covers 360px to 1240px continuously, reducing or removing the need for media queries for sizing.