Arquitectura

FDS se organiza en layers CSS con una separacion clara entre tokens editables (knobs) y valores derivados.

Layers CSS

FDS declara 6 layers en orden de cascada:

@layer theme, base, layouts, components, utilities, custom;

Estructura de archivos

flowtitude-design-system/
  main.css                    # Entry point
  wizard.css                  # Custom properties del wizard
  theme/
    flowtitude.css             # Knobs + derived values
  base/
    base.css                   # Reset, body, skip-link
    typography.css             # h1-h6, links, .prose
  layouts/
    section.css                # Secciones con spacing inteligente
    content-flex.css           # Posicionamiento 9 puntos
  components/
    buttons.css                # .btn + variantes
    typography.css             # .display, .heading, .subheading, .text-*
    cards.css                  # .card + variantes
    components.css             # .bg-image, .click-parent, .focus-from-child
    custom.css                 # .eyebrow
  utility/
    core/utilities.css         # flip-w, flip-h
    layout/grid-basic.css      # Grids proporcionales + auto-fill/fit
    animations/durations.css   # Duraciones semanticas

Knobs y derivados

El patron central de FDS: variables "knob" que el usuario puede editar, y variables "derived" que se computan automaticamente.

/* KNOB — el usuario edita esto */
--ft-text-min: 1rem;
--ft-text-max: 1.125rem;

/* DERIVED — se calcula solo */
--text-base: calc(var(--ft-text-value) * var(--ft-text-factor));
--text-lg: calc(var(--text-base) * var(--ft-type-step));

Esto permite que un cambio en un knob propague a toda la escala tipografica o de spacing en navegadores modernos. Antes de esos derivados, FDS declara fallbacks estaticos para que navegadores con soporte incompleto de CSS math mantengan tamanos y espacios validos.

Custom variants

FDS define 3 custom variants de Tailwind para acceder al elemento padre:

@custom-variant parent (*:has(> &));
@custom-variant parent-hover (*:hover > &);
@custom-variant parent-focus-within (*:focus-within > &);