Filosofía

Los principios que guían cada decisión de FDS: tokens primero, composición sobre configuración, fluidez sin media queries y cero lock-in.

Tokens primero

Los valores de diseño (tamaños, colores, espacios, radios) se definen como custom properties antes que como utilities. Cambiar un token actualiza todo el sistema en cascada, sin tener que tocar componentes ni plantillas.

:root {
  --color-primary-500: oklch(0.55 0.18 250);
}

/* Se actualiza automáticamente en todos los componentes que referencian la variable */
.btn-primary { background: var(--color-primary-500); }

Composición sobre configuración

En lugar de un tailwind.config.js hinchado, FDS usa la sintaxis nativa de Tailwind 4:

• @theme para tokens.
• @layer para cascada.
• @utility para utilidades propias.

Todo es CSS, editable con cualquier editor, sin build tools complejas. No hay plugin de Tailwind que mantener.

Fluido sin media queries

Tipografía y spacing escalan con clamp() entre un viewport mínimo (410 px) y uno máximo (1280 px). Un mismo valor (--text-base, --spacing-section) se adapta automáticamente de móvil a desktop sin breakpoints duros.

--text-base: clamp(1rem, fluid-formula, 1.125rem);

El resultado: menos media queries, menos saltos visuales bruscos, mejor adaptabilidad a cualquier ancho.

Semántico vs primitivo

FDS distingue dos niveles:

• Primitivos: escalas sin intención (--color-primary-500, --text-2xl, --spacing-fluid-md). Viven en theme/flowtitude.css.
• Semánticos: nombrados por uso (--ft-color-text, --spacing-section, --radius-card). Son los que usan los componentes.

Los componentes nunca referencian primitivos directamente. Así, cambiar un token semántico afecta a todo el sistema sin tocar utilities ni HTML.

Compatible con cualquier stack

FDS es un único main.css con sus imports. Funciona en:

• Vite (webapp frontend moderna).
• Next.js / Astro (SSG / SSR).
• WordPress tema via Tailwind compilado.
• Bricks Builder via WindPress.
• Cualquier proyecto que compile Tailwind 4.

Cero lock-in

Quitar FDS es copiar los valores que uses a tu proyecto y eliminar los imports. El CSS final es estándar: no hay runtime, ni dependencias ocultas, ni magic preprocessing.