Fluid design tokens
Responsive Scale Generator
Build clamp() scales for typography and spacing, preview behavior on any breakpoint, and export a ready-to-use token map for your project.
Scale controls
Fields have range limits. If a value is out of range, calculations use the nearest allowed boundary automatically.
Typography scale
Spacing scale
Live breakpoint preview
fs-2xsclamp(16.0000px, 14.6667px + 0.3704vw, 20.0000px)
fs-xsclamp(18.4000px, 16.4000px + 0.5556vw, 24.4000px)
fs-smclamp(21.1600px, 18.2907px + 0.7970vw, 29.7680px)
fs-mdclamp(24.3340px, 20.3397px + 1.1095vw, 36.3170px)
fs-lgclamp(27.9841px, 22.5432px + 1.5114vw, 44.3067px)
fs-xlclamp(32.1817px, 24.8909px + 2.0252vw, 54.0542px)
fs-2xlclamp(37.0090px, 27.3633px + 2.6794vw, 65.9461px)
fs-3xlclamp(42.5603px, 29.9290px + 3.5087vw, 80.4542px)
:root {
--fs-2xs: clamp(16.0000px, 14.6667px + 0.3704vw, 20.0000px);
--fs-xs: clamp(18.4000px, 16.4000px + 0.5556vw, 24.4000px);
--fs-sm: clamp(21.1600px, 18.2907px + 0.7970vw, 29.7680px);
--fs-md: clamp(24.3340px, 20.3397px + 1.1095vw, 36.3170px);
--fs-lg: clamp(27.9841px, 22.5432px + 1.5114vw, 44.3067px);
--fs-xl: clamp(32.1817px, 24.8909px + 2.0252vw, 54.0542px);
--fs-2xl: clamp(37.0090px, 27.3633px + 2.6794vw, 65.9461px);
--fs-3xl: clamp(42.5603px, 29.9290px + 3.5087vw, 80.4542px);
--space-2xs: clamp(8.0000px, 6.6667px + 0.3704vw, 12.0000px);
--space-xs: clamp(9.6000px, 7.6800px + 0.5333vw, 15.3600px);
--space-sm: clamp(11.5200px, 8.8064px + 0.7538vw, 19.6608px);
--space-md: clamp(13.8240px, 10.0434px + 1.0502vw, 25.1658px);
--space-lg: clamp(16.5888px, 11.3810px + 1.4466vw, 32.2123px);
--space-xl: clamp(19.9066px, 12.7982px + 1.9745vw, 41.2317px);
--space-2xl: clamp(23.8879px, 14.2583px + 2.6749vw, 52.7766px);
--space-3xl: clamp(28.6654px, 15.7026px + 3.6008vw, 67.5540px);
}Why use this generator
Fluid typography
Create a predictable type hierarchy that scales smoothly from mobile to large desktop screens.
Responsive spacing
Generate spacing tokens that preserve rhythm across breakpoints without manual media-query tuning.
Production-ready export
Copy CSS variables or JSON tokens and use them directly in Tailwind, Sass maps, or design token pipelines.