Colores (OKLCH)
FDS usa el espacio de color OKLCH para todas sus paletas. OKLCH ofrece uniformidad perceptual: dos colores con el mismo valor de lightness se perciben igual de luminosos, algo que no ocurre con hex o RGB. Esto permite generar escalas de color consistentes cambiando solo el hue.
Cada paleta tiene 11 pasos (50-950) que cubren desde fondos claros hasta textos oscuros. Los colores comparten la misma estructura de lightness y chroma, variando unicamente el angulo de hue.
Primary (hue 27.19)
Secondary (hue 18.01)
Definición en CSS
@theme {
/* Primary — hue 27.19 */
--color-primary-50: oklch(0.9700 0.0255 27.19);
--color-primary-100: oklch(0.9400 0.0428 27.19);
--color-primary-200: oklch(0.8700 0.0765 27.19);
--color-primary-300: oklch(0.8000 0.1056 27.19);
--color-primary-400: oklch(0.7000 0.1432 27.19);
--color-primary-500: oklch(0.5365 0.1984 27.19);
--color-primary-600: oklch(0.4963 0.1938 27.19);
--color-primary-700: oklch(0.4517 0.1884 27.19);
--color-primary-800: oklch(0.3916 0.1805 27.19);
--color-primary-900: oklch(0.3192 0.1698 27.19);
--color-primary-950: oklch(0.2505 0.1579 27.19);
/* Secondary — hue 18.01 */
--color-secondary-50: oklch(0.969 0.002 18.01);
--color-secondary-100: oklch(0.927 0.007 17.53);
--color-secondary-200: oklch(0.862 0.01 17.51);
--color-secondary-300: oklch(0.786 0.017 17.61);
--color-secondary-400: oklch(0.719 0.022 17.74);
--color-secondary-500: oklch(0.64 0.031 18.02);
--color-secondary-600: oklch(0.569 0.036 18.28);
--color-secondary-700: oklch(0.493 0.029 18.21);
--color-secondary-800: oklch(0.42 0.025 18.21);
--color-secondary-900: oklch(0.292 0.015 18.07);
--color-secondary-950: oklch(0.23 0.011 18.02);
}
Personalizar colores
Para cambiar la paleta primaria, modifica el valor de hue (tercer parámetro de oklch). Los valores de lightness y chroma están calibrados para que cualquier hue produzca una escala visualmente equilibrada. Por ejemplo, cambiar 27.19 a 210 convierte la paleta primaria de naranja a azul.
💡
OKLCH usa tres ejes: L (lightness 0-1), C (chroma / saturación) y H (hue 0-360). Puedes usar herramientas como oklch.com para explorar el espacio de color.
Espaciado Semántico
FDS define 7 niveles de spacing semántico. Cada nivel tiene un propósito claro y un multiplicador fijo sobre la escala fluida base. Esto garantiza proporciones consistentes en cualquier viewport.
Escala visual — tamaños reales
Las barras muestran la altura real del valor en desktop (viewport 1280px). Pasa el cursor para ver el tamaño exacto.
--spacing-inner
≈ 0.4rem · 0.5×
--spacing-content
≈ 0.6rem · 0.75×
--spacing-stack
≈ 0.9rem · 1×
--spacing-block
≈ 1.35rem · 1×
--spacing-columns
≈ 2rem · 1.5×
--spacing-section
≈ 4.5rem · 3×
--spacing-hero
≈ 7rem · 4.5×
Cálculo fluido
Todos los valores de spacing se calculan con clamp(), interpolando fluidamente entre el viewport mínimo (410px) y el máximo (1280px). No se usan media queries.
La formula base es:
/* Factor de interpolacion (0 en 410px, 1 en 1280px) */
--ft-fluid-t: calc(
(100vw - var(--viewport-min)) /
(var(--viewport-max) - var(--viewport-min))
);
/* Valor base fluido */
--ft-space-value: clamp(
var(--ft-space-min), /* 0.5rem en mobile */
calc(var(--ft-space-min) + (var(--ft-space-max) - var(--ft-space-min)) * var(--ft-fluid-t)),
var(--ft-space-max) /* 1.5rem en desktop */
);
/* Spacing semantico = base escalado * multiplicador */
--spacing-section: calc(var(--spacing-fluid-xl) * var(--ft-space-factor-section)); /* 3x */
--spacing-hero: calc(var(--spacing-fluid-2xl) * var(--ft-space-factor-hero)); /* 4.5x */
Referencia de tokens
| Token |
Multiplicador |
Uso recomendado |
| --spacing-inner |
0.5x |
Padding interno muy ajustado (dentro de badges, tags) |
| --spacing-content |
0.75x |
Gaps entre elementos de contenido (texto, iconos) |
| --spacing-stack |
1x |
Apilar elementos verticalmente (párrafos, listas) |
| --spacing-block |
1x |
Separación entre bloques de contenido |
| --spacing-columns |
1.5x |
Gaps en grids y columnas |
| --spacing-section |
3x |
Padding vertical de secciones |
| --spacing-hero |
4.5x |
Padding de heroes y secciones destacadas |
Definición CSS
@theme {
/* Escala fluida base (computed) */
--spacing-fluid-md: calc(var(--ft-space-value) * var(--ft-space-factor));
--spacing-fluid-sm: calc(var(--spacing-fluid-md) / var(--ft-space-step));
--spacing-fluid-xs: calc(var(--spacing-fluid-sm) / var(--ft-space-step));
--spacing-fluid-lg: calc(var(--spacing-fluid-md) * var(--ft-space-step));
--spacing-fluid-xl: calc(var(--spacing-fluid-lg) * var(--ft-space-step));
--spacing-fluid-2xl: calc(var(--spacing-fluid-xl) * var(--ft-space-step));
/* Semantic spacing (computed) */
--spacing-inner: calc(var(--spacing-fluid-xs) * var(--ft-space-factor-inner)); /* 0.5x */
--spacing-content: calc(var(--spacing-fluid-sm) * var(--ft-space-factor-content)); /* 0.75x */
--spacing-stack: calc(var(--spacing-fluid-sm) * var(--ft-space-factor-stack)); /* 1x */
--spacing-block: calc(var(--spacing-fluid-md) * var(--ft-space-factor-block)); /* 1x */
--spacing-columns: calc(var(--spacing-fluid-md) * var(--ft-space-factor-columns)); /* 1.5x */
--spacing-section: calc(var(--spacing-fluid-xl) * var(--ft-space-factor-section)); /* 3x */
--spacing-hero: calc(var(--spacing-fluid-2xl) * var(--ft-space-factor-hero)); /* 4.5x */
}
Escala Tipográfica
La escala tipográfica de FDS es completamente fluida. Usa un step ratio que interpola entre 1.125 (Major Second, en mobile) y 1.2 (Minor Third, en desktop). Esto significa que la escala se comprime en pantallas pequeñas y se expande en pantallas grandes, manteniendo siempre las proporciones correctas.
Cómo funciona
El sistema parte de un tamaño base (--text-base) y multiplica o divide por el step ratio para generar cada nivel de la escala:
- Hacia arriba:
--text-lg = base * step, --text-xl = lg * step, y así sucesivamente hasta --text-9xl.
- Hacia abajo:
--text-sm = base / step, --text-xs = sm / step.
/* Step ratio: interpola entre 1.125 (mobile) y 1.2 (desktop) */
--ft-type-step: clamp(
var(--ft-type-step-min), /* 1.125 */
calc(var(--ft-type-step-min) + (var(--ft-type-step-max) - var(--ft-type-step-min)) * var(--ft-fluid-t)),
var(--ft-type-step-max) /* 1.2 */
);
/* Base text size: fluid entre 1rem (mobile) y 1.125rem (desktop) */
--ft-text-value: clamp(
var(--ft-text-min),
calc(var(--ft-text-min) + (var(--ft-text-max) - var(--ft-text-min)) * var(--ft-fluid-t)),
var(--ft-text-max)
);
@theme {
/* Scale generada por multiplicacion / division del step */
--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));
}
Escala visual — tamaños reales en desktop
El texto de muestra se renderiza al tamaño real de cada paso. La escala fluye entre mobile y desktop vía clamp().
--text-xs
≈ 0.78rem → 0.87rem
Texto extra pequeño — captions, labels
--text-sm
≈ 0.88rem → 1.04rem
Texto pequeño — notas, meta, UI compacta
--text-base
≈ 1rem → 1.125rem
Texto base — cuerpo de texto principal
--text-lg
≈ 1.125rem → 1.35rem
Texto grande — lead, intro, destacados
--text-xl
≈ 1.27rem → 1.62rem
Títulos pequeños — card headers
--text-2xl
≈ 1.42rem → 1.95rem
Subheading · h3 de sección
--text-3xl
≈ 1.6rem → 2.34rem
Heading · h2 de página
--text-4xl
≈ 1.8rem → 2.81rem
Heading grande · h1
--text-5xl
≈ 2rem → 3.37rem
Display · hero title
--text-6xl
≈ 2.25rem → 4rem
Display grande
--text-7xl
≈ 2.53rem → 4.8rem
Mega display
Efecto del step ratio
Cambiar el step ratio afecta la diferencia entre niveles de la escala:
- Step más bajo (ej. 1.1): la escala se comprime y los tamaños son más uniformes. Ideal para interfaces densas.
- Step más alto (ej. 1.25 o 1.333): la escala se expande y hay más contraste entre niveles. Ideal para landing pages y contenido editorial.
El default de FDS (1.125 a 1.2) ofrece un equilibrio entre legibilidad y jerarquía visual, con una progresión suave que se adapta al viewport.
⚠️
Cambiar --ft-type-step-min o --ft-type-step-max recalcula toda la escala tipográfica. Verifica los tamaños resultantes en ambos extremos del viewport antes de hacer deploy.
Referencia de Knobs
Estos son los ~35 valores editables (knobs) que controlan todo el sistema. Modificar cualquiera de ellos recalcula automáticamente los valores derivados que dependen de él.
:root {
/* ── Viewport range ─────────────────────────── */
--viewport-min: 410px;
--viewport-max: 1280px;
/* ── Typography ─────────────────────────────── */
--ft-text-min: 1rem; /* Base text size en mobile */
--ft-text-max: 1.125rem; /* Base text size en desktop */
--ft-type-step-min: 1.125; /* Ratio en mobile (Major Second) */
--ft-type-step-max: 1.2; /* Ratio en desktop (Minor Third) */
--ft-text-factor: 1; /* Multiplicador global de texto */
/* ── Spacing ────────────────────────────────── */
--ft-space-min: 0.5rem; /* Base space en mobile */
--ft-space-max: 1.5rem; /* Base space en desktop */
--ft-space-step-min: 1.3; /* Ratio de escala en mobile */
--ft-space-step-max: 1.5; /* Ratio de escala en desktop */
--ft-space-factor: 1; /* Multiplicador global de spacing */
/* ── Semantic multipliers ───────────────────── */
--ft-space-factor-inner: 0.5;
--ft-space-factor-content: 0.75;
--ft-space-factor-stack: 1;
--ft-space-factor-block: 1;
--ft-space-factor-columns: 1.5;
--ft-space-factor-section: 3;
--ft-space-factor-hero: 4.5;
/* ── Layout ─────────────────────────────────── */
--ft-container: min(var(--container-7xl), 90%);
--ft-padding-content-x: 1rem;
--ft-padding-content-y: var(--spacing-section);
--ft-gap-content: var(--spacing-block);
/* ── Colors ─────────────────────────────────── */
--ft-color-text: #000;
--ft-color-background: #f9ecec;
/* ── Card widths ────────────────────────────── */
--ft-card-xs: 12rem;
--ft-card-sm: 14rem;
--ft-card-md: 18rem;
--ft-card-lg: 24rem;
--ft-card-xl: 36rem;
}
Grupos de knobs
| Grupo |
Knobs |
Qué controla |
| Viewport |
--viewport-min, --viewport-max |
Rango donde clamp() interpola (410px a 1280px) |
| Typography |
--ft-text-min, --ft-text-max, --ft-type-step-min, --ft-type-step-max, --ft-text-factor |
Tamaño base, ratio de escala y multiplicador global de texto |
| Spacing |
--ft-space-min, --ft-space-max, --ft-space-step-min, --ft-space-step-max, --ft-space-factor |
Valor base, ratio de escala y multiplicador global de spacing |
| Multipliers |
--ft-space-factor-inner ... --ft-space-factor-hero |
Proporción de cada nivel semántico respecto a la escala base |
| Layout |
--ft-container, --ft-padding-content-x, --ft-padding-content-y, --ft-gap-content |
Ancho máximo del contenedor, padding y gap por defecto de secciones |
| Colors |
--ft-color-text, --ft-color-background |
Color de texto y fondo por defecto (body) |
| Card widths |
--ft-card-xs (12rem), --ft-card-sm (14rem), --ft-card-md (18rem), --ft-card-lg (24rem), --ft-card-xl (36rem) |
Anchos predefinidos para cards en grids auto-fill/fit |
Otros Tokens
Tokens adicionales que complementan la escala tipográfica, de spacing y colores. Definidos en @theme para estar disponibles como utilidades de Tailwind.
Leading (line-height)
Seis niveles de interlineado semántico, de compacto a espacioso. Usables como leading-tight, leading-normal, etc. en Tailwind.
@theme {
--leading-none: 1em; /* Sin interlineado extra */
--leading-tight: 1.2em; /* Titulares grandes */
--leading-snug: 1.375em; /* Subtitulos */
--leading-normal: 1.5em; /* Texto de cuerpo */
--leading-relaxed: 1.625em; /* Lectura confortable */
--leading-loose: 2em; /* Texto espacioso */
}
| Token |
Valor |
Uso recomendado |
| --leading-none | 1em | Display text, números grandes |
| --leading-tight | 1.2em | Titulares h1-h3 |
| --leading-snug | 1.375em | Subtitulos, h4-h6 |
| --leading-normal | 1.5em | Texto de cuerpo (default) |
| --leading-relaxed | 1.625em | Prosa larga, artículos |
| --leading-loose | 2em | Texto con mucho espacio, tooltips largos |
Border Radius
Tres tokens de radio de borde semánticos que referencian los valores base de Tailwind (--radius-sm, --radius-md). Proporcionan consistencia al asignar radios a componentes concretos.
@theme {
--radius-button: var(--radius-sm); /* Esquinas de botones */
--radius-card: var(--radius-md); /* Esquinas de cards */
--radius-section: var(--radius-md); /* Esquinas de secciones con fondo */
}
| Token |
Valor base |
Uso |
| --radius-button | var(--radius-sm) | Todos los botones (.btn) |
| --radius-card | var(--radius-md) | Cards, modals, popovers |
| --radius-section | var(--radius-md) | Secciones con fondo/borde |
Aspect Ratios
Ratios de aspecto predefinidos para imágenes, videos y contenedores. Usables con la utilidad aspect-[token] de Tailwind o directamente como valor de aspect-ratio.
@theme {
--aspect-rrss: 1.91 / 1; /* Redes sociales (Facebook, Twitter) */
--aspect-wide: 18 / 8; /* Panoramico suave */
--aspect-ultrawide: 18 / 5; /* Ultra panoramico (heroes) */
--aspect-golden: 1.618 / 1; /* Proporcion aurea */
--aspect-portrait: 3 / 4; /* Retrato */
--aspect-landscape: 4 / 3; /* Paisaje clasico */
}
| Token |
Ratio |
Uso recomendado |
| --aspect-rrss | 1.91 / 1 | Open Graph, Twitter cards, previews de RRSS |
| --aspect-wide | 18 / 8 | Banners horizontales, imágenes de sección |
| --aspect-ultrawide | 18 / 5 | Heroes full-width, sliders panorámicos |
| --aspect-golden | 1.618 / 1 | Composiciones equilibradas, thumbnails |
| --aspect-portrait | 3 / 4 | Fotos de personas, cards verticales |
| --aspect-landscape | 4 / 3 | Fotos generales, previews de video |
