Variables CSS

FlowKit expone los tokens de FDS como variables CSS estándar, usables desde cualquier elemento de Bricks o desde CSS propio.

Colores

Paletas OKLCH de 11 pasos (50–950) para dos familias:

--color-primary-50
--color-primary-100
...
--color-primary-950

--color-secondary-50
...
--color-secondary-950

Cada paso mantiene luminosidad perceptual constante. Ver Activar FDS para sobrescribir las paletas del proyecto.

Tipografía fluida

Escala generada con clamp() entre viewport mínimo (410 px) y máximo (1280 px), sin media queries:

--text-xs
--text-sm
--text-base
--text-lg
--text-xl
--text-2xl
... hasta --text-9xl

Ajustar la escala completa:

:root {
  --ft-text-min: 1rem;        /* 16px a 410px */
  --ft-text-max: 1.125rem;    /* 18px a 1280px */
  --ft-type-step-min: 1.125;
  --ft-type-step-max: 1.2;
}

Spacing semántico

Siete niveles semánticos derivados del mismo knob fluido:

Radios

--radius-button:  var(--radius-sm);
--radius-card:    var(--radius-md);
--radius-section: var(--radius-md);

Aspect ratios

--aspect-rrss:      1.91 / 1;
--aspect-wide:      18 / 8;
--aspect-ultrawide: 18 / 5;
--aspect-golden:    1.618 / 1;
--aspect-portrait:  3 / 4;
--aspect-landscape: 4 / 3;

Uso desde Bricks

En cualquier campo CSS del editor de Bricks puedes referenciar directamente:

.mi-elemento {
  padding: var(--spacing-block);
  color: var(--color-primary-700);
  font-size: var(--text-xl);
}