Tokens fluidos de diseno
Generador de escala responsive
Crea escalas con clamp() para tipografia y espaciado, previsualiza su comportamiento en cualquier breakpoint y exporta un mapa de tokens listo para tu proyecto.
Controles de escala
Los campos tienen limites de rango. Si un valor sale del rango, los calculos usan automaticamente el limite valido mas cercano.
Escala tipografica
Escala de espaciado
Vista previa en vivo por breakpoint
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);
}Por que usar este generador
Tipografia fluida
Crea una jerarquia tipografica predecible que escala suavemente desde movil hasta pantallas de escritorio grandes.
Espaciado responsive
Genera tokens de espaciado que mantienen el ritmo visual entre breakpoints sin ajustar media queries a mano.
Exportacion lista para produccion
Copia variables CSS o tokens JSON y usalos directamente en Tailwind, mapas Sass o pipelines de design tokens.