FDS - Flowtitude Design System

FDS genera una escala tipografica completa (xs a 9xl) a partir de 4 knobs, usando clamp() para transiciones fluidas.

Modelo general

La tipografia fluida tiene dos piezas:

Un tamano base que cambia entre mobile y desktop.
Un step ratio que decide cuanto crece cada nivel de la escala.

En mobile, FDS usa una progresion mas contenida para que los displays no se disparen. En desktop, la escala se abre un poco mas para crear jerarquia visual.

Fallback de compatibilidad

La escala tipografica tiene valores estaticos de fallback antes de activar la version fluida. Esto protege a navegadores que soportan variables CSS pero fallan con calc(), clamp(), division dentro de calc() o math functions anidadas.

Nivel	Comportamiento
Fallback base	Usa la escala mobile estatica
`@media (min-width: 1280px)`	Cambia a la escala desktop estatica
`@supports` moderno	Activa la escala fluida derivada de los knobs

Los componentes (.display, .heading, .text-*) no necesitan cambiar: siguen usando text-*, y esos tokens reciben el mejor valor disponible segun el navegador.

Knobs de tipografia

--ft-text-min: 1rem;        /* Tamano base en viewport minimo */
--ft-text-max: 1.125rem;    /* Tamano base en viewport maximo */
--ft-type-step-min: 1.125;  /* Ratio de escala en viewport minimo */
--ft-type-step-max: 1.2;    /* Ratio de escala en viewport maximo */
--ft-text-factor: 1;        /* Multiplicador global */

Escala generada

Cada paso se calcula multiplicando el anterior por el step ratio:

--text-base: calc(var(--ft-text-value) * var(--ft-text-factor));
--text-sm:   calc(var(--text-base) / var(--ft-type-step));
--text-xs:   calc(var(--text-sm) / var(--ft-type-step));
--text-lg:   calc(var(--text-base) * var(--ft-type-step));
--text-xl:   calc(var(--text-lg) * var(--ft-type-step));
--text-2xl:  calc(var(--text-xl) * var(--ft-type-step));
--text-3xl:  calc(var(--text-2xl) * var(--ft-type-step));
--text-4xl:  calc(var(--text-3xl) * var(--ft-type-step));
--text-5xl:  calc(var(--text-4xl) * var(--ft-type-step));
--text-6xl:  calc(var(--text-5xl) * var(--ft-type-step));
--text-7xl:  calc(var(--text-6xl) * var(--ft-type-step));
--text-8xl:  calc(var(--text-7xl) * var(--ft-type-step));
--text-9xl:  calc(var(--text-8xl) * var(--ft-type-step));

Token	Tamano aprox. (1280px)
`text-xs`	~12px
`text-sm`	~14px
`text-base`	~18px
`text-lg`	~21px
`text-xl`	~24px
`text-2xl`	~28px
`text-3xl`	~32px
`text-4xl`	~37px
`text-5xl`	~43px
`text-6xl`	~49px
`text-7xl`	~56px
`text-8xl`	~65px
`text-9xl`	~75px

Efecto del step ratio

Cambiar --ft-type-step-min o --ft-type-step-max no cambia solo un tamano: recalcula toda la escala.

Cambio	Resultado
Step mas bajo, por ejemplo `1.1`	Escala mas compacta, menos contraste entre niveles
Step mas alto, por ejemplo `1.25`	Escala mas expresiva, mas diferencia entre cuerpo y titulos
Subir solo `--ft-type-step-min`	Mobile gana jerarquia, pero puede apretar headings largos
Subir solo `--ft-type-step-max`	Desktop gana contraste, util en landings y paginas editoriales
Cambiar `--ft-text-factor`	Todo el sistema tipografico sube o baja en bloque

Verificar ambos extremos

Cuando cambies el step ratio, revisa mobile y desktop. Los titulos grandes son los primeros que revelan si la escala se ha abierto demasiado.

Relacion con componentes

Los componentes tipograficos no tienen tamanos fijos. Usan los tokens de esta escala:

Componente	Token
`.display`, `.display-lg`	`text-9xl`
`.display-md`	`text-8xl`
`.display-sm`, `.display-single`	`text-7xl`
`.heading-lg`	`text-6xl`
`.heading`, `.heading-md`	`text-5xl`
`.heading-sm`	`text-4xl`
`.subheading-lg`	`text-3xl`
`.subheading`, `.subheading-md`	`text-2xl`
`.subheading-sm`	`text-xl`
`.text-large`	`text-lg`
`.text-medium`	`text-base`
`.text-small`	`text-sm`

Por eso un cambio en --ft-text-min, --ft-text-max o --ft-type-step-* afecta tambien a las clases semanticas de components/typography.css.

Rango de viewport

La interpolacion ocurre entre --viewport-min (410px) y --viewport-max (1280px):

--ft-fluid-t: calc(
  (100vw - var(--viewport-min)) /
  (var(--viewport-max) - var(--viewport-min))
);

Por debajo de 410px se usa el valor minimo. Por encima de 1280px, el maximo.

Recetas de ajuste

Marca mas sobria

Reduce ligeramente el contraste entre niveles:

--ft-type-step-min: 1.1;
--ft-type-step-max: 1.16;

Esto hace que .display, .heading y .subheading esten mas cerca del cuerpo. Funciona bien en SaaS, herramientas internas y documentacion tecnica.

Marca mas editorial

Abre la escala en desktop:

--ft-type-step-min: 1.125;
--ft-type-step-max: 1.24;

El cuerpo se mantiene controlado, pero los titulos ganan presencia en pantallas grandes.

Mobile mas contenido

Si los titulares largos rompen demasiado en telefono:

--ft-type-step-min: 1.1;

Despues revisa los heroes. A veces el ajuste correcto no es bajar toda la escala, sino usar .display-sm en lugar de .display.

Como validar un cambio

Despues de modificar knobs tipograficos, comprueba:

Contexto	Que mirar
Hero con `.display`	Que no rompa en demasiadas lineas en mobile
Seccion con `.heading`	Que tenga jerarquia sin parecer hero
Card con `.subheading-sm`	Que el titulo no se coma el contenido
Texto `.text-medium`	Que el cuerpo siga siendo comodo de leer
`.prose`	Que titulos, parrafos y listas mantengan ritmo

El cambio ideal se nota en el caracter de la marca, pero no obliga a reescribir clases en cada componente.