CSS
Organiza decisiones visuales como color, tipografía, espacio y elevación mediante design tokens, custom properties, temas y niveles semánticos.
Un design token nombra una decisión reutilizable para que componentes no dependan de valores aislados.
:root {
--color-surface: oklch(98% 0.01 270);
--color-text: oklch(22% 0.02 270);
--space-component: 1rem;
--radius-control: 0.75rem;
}Representan valores base:
:root {
--purple-600: oklch(55% 0.2 295);
--space-4: 1rem;
--radius-3: 0.75rem;
}Son útiles para construir escalas, pero no explican dónde usar cada valor.
:root {
--color-action-primary: var(--purple-600);
--color-text-default: var(--gray-950);
--color-border-subtle: var(--gray-200);
}Nombran propósito y permiten cambiar tema sin modificar cada componente.
.button {
--button-bg: var(--color-action-primary);
--button-text: var(--color-on-action);
--button-radius: var(--radius-control);
}
.button {
background: var(--button-bg);
color: var(--button-text);
border-radius: var(--button-radius);
}Crean una API local configurable.
primitivo
↓
semántico
↓
componenteNo todos los sistemas necesitan las tres capas para cada valor. Evita aliases sin utilidad.
:root {
--color-surface: white;
--color-text-default: #171717;
}
[data-theme="dark"] {
--color-surface: #171717;
--color-text-default: white;
}Los componentes consumen tokens semánticos, no una condición dark repetida.
.button[data-variant="danger"] {
--button-bg: var(--color-danger);
}
.button:disabled {
--button-bg: var(--color-action-disabled);
}El token no sustituye el estado semántico del control.
:root {
--space-1: 0.25rem;
--space-2: 0.5rem;
--space-3: 0.75rem;
--space-4: 1rem;
}Una escala limita decisiones arbitrarias, pero no significa que cada componente deba usar múltiplos rígidos si el contenido necesita otra medida.
:root {
--font-body: system-ui, sans-serif;
--font-size-body: 1rem;
--line-height-body: 1.5;
}Agrupa decisiones relacionadas sin ocultar la propiedad CSS que las aplica.
:root {
--space-page: clamp(1rem, 3vw, 2.5rem);
--font-size-display: clamp(2.5rem, 6vw, 5rem);
}El token puede contener una relación, no solo un valor fijo.
Un sistema puede almacenar tokens en JSON y transformarlos para CSS, Android, iOS o diseño.
El source of truth necesita:
Menos útil:
--blue: #4455ff;Más útil para consumo:
--color-focus-ring: #4455ff;No todos los tokens deben ser semánticos; distingue paleta y API de consumo.
Cada combinación semántica debe validarse:
Cambiar una paleta no garantiza que todos los pares sigan siendo accesibles.
¿Por qué --color-action-primary escala mejor que --blue-button?
Porque describe la función; el color y el tipo de componente pueden cambiar sin renombrar todos los consumidores.
Arquitectura CSS y naming organiza responsabilidades, selectores y límites.