Tokens, capas, componentes

Tres tamaños, una escala áurea, cinco colores de marca. Lo que sobra se elimina; lo que queda funciona a cualquier escala.

Ver Showcase

Sistema de diseño

Tokens, tipografía, layout, componentes. Una fuente de verdad para todos los proyectos web.

Escala tipográfica

4 tamaños base (large, medium, base, small) + display especial para heros. Clamp fluido entre móvil y desktop, sin media queries.

Regla: si necesitas un 6º tamaño, el problema es de jerarquía.

tokens.css como núcleo

Todas las variables en un solo archivo. Cada proyecto lo copia y sobreescribe solo lo que difiere.

Regla: si un valor no viene de un token, sobra.

Paleta CMY + grises

Tres primarios puros (cyan, magenta, yellow) más negro y blanco. Escala de grises 50–900. Cinco acentos funcionales con variantes AA-safe.

Regla: si el color no está en tokens, no existe.

Espaciado áureo

Doce tokens de --space-1 a --space-24 con progresión basada en φ (1.618). Cuatro tokens semánticos adicionales para dimensiones de componentes.

Regla: nunca hardcodear padding ni margin.

Cascade Layers

@layer tokens, base, layout, components, utilities. La especificidad la gobierna la capa, no el selector.

Regla: utilities siempre gana, tokens siempre pierde.

BEM estricto

Bloque, elemento, modificador. Prefijos .c- componentes, .o- objetos layout, .u- utilidades. Código nuevo siempre con prefijo.

Regla: una clase por elemento, sin encadenamiento.

Mobile-first

Base = móvil. Media queries con width >= por breakpoint. Breakpoints dictados por el contenido, no por el dispositivo.

Regla: grid para layout de página, flexbox para alineación interna.

0 Potencial — vacío fértil, campo abierto
1 Esencia — centro, voluntad, foco
2 Diferenciación — análisis, criba, memoria
3 Conexión — síntesis, comunicación, red
4 Materialización — acción, forma, resultado

Sin valores hardcodeados

Ni hex sueltos, ni px fijos, ni font-weights crudos. Si existe un token, se usa. Si no existe, se crea o se cuestiona la necesidad.

Regla: los números mágicos son deuda técnica.

Último elemento del grid

El último hijo se expande a toda la fila disponible. El contenedor controla este comportamiento con :last-child.

Principio: CSS Grid genera comportamientos inteligentes sin clases adicionales.

Elementos HTML

Selectores de elemento con tipografía del sistema. El HTML semántico hereda los tokens sin clases.

Lista no ordenada

  • Tokens centralizados en un archivo
  • Tres tamaños tipográficos con clamp
  • Escala de espaciado áurea

Lista ordenada

  1. Definir tokens en :root
  2. Asignar capas con @layer
  3. Componer componentes BEM

Texto inline

Párrafo con enlace a tipografía — subrayado visible en hover.

Negrita, cursiva, marcado, código inline.

Texto small para disclaimers y DS como abreviatura.

Atajo de teclado: Ctrl + S para guardar.

Cita

La tipografía es la arquitectura del contenido. Un buen sistema tipográfico permite que la información fluya respetando las proporciones que hacen la lectura cómoda.

— Sergio Forés

Tipografía

Display text-display

Large para titulares principales text-large

Medium para títulos de sección text-medium

Base para párrafos y texto de lectura text-base

Small para UI, labels y texto auxiliar text-small

Sistema de diseño h1

Tipografía y color h2

Tokens centralizados h3

Escala áurea de espaciado h4

Cascade layers h5
Fuente única de verdad h6
Light 200
Regular 400
Medium 500
Semibold 600
Bold 800
tight (1.2)

Bloques densos de texto. Cada línea cerca de la siguiente. Títulos, headers, UI compacta.

normal (1.5)

Estándar del sistema. Equilibrio entre densidad y legibilidad para textos corridos.

relaxed (1.8)

Máxima respiración vertical. Bloques largos de lectura, notas, descripción extendida.

Paleta de colores

4 colores de marca para decoración. Neutros para UI. Acentos funcionales con variantes AA-safe para texto.

Marca

Amarillo
Brand A
Brand B
Brand C

Neutros

Negro
Blanco
Gray 700
Gray 400
Gray 200

Acentos

Primary
Secondary
Warning
Error
Info

Grid

CSS Grid responsive con gap áureo. El padding siempre coincide con el gap.

Contenedor

El header ocupa dos columnas automáticamente

Item 1

auto-fit minmax — se adapta al espacio disponible

Item 2

Responsive sin media queries — el grid decide

Item 3

Gap φ = 1.618rem — proporción áurea

Item 4

Móvil → tablet → desktop — fluido

Componentes

Piezas reutilizables construidas con tokens del sistema. Cada componente hereda, ninguno duplica.

Botones

Ancho fijo

Especiales

Formulario

Plataforma
Módulos

Cards

Variantes con imagen, overlay, dos columnas, fondo de color y forma circular.

Tokens CSS

Variables centralizadas en tokens.css. Colores, espaciado y tipografía en un solo archivo.

Cascade Layers

Cinco capas @layer controlan la especificidad sin conflictos entre módulos.

BEM + Semántica

Clases con prefijo .c-, .o-, .u- y HTML semántico sin divs innecesarios.

Composición abstracta
Overlay

Imagen + overlay

Capa semitransparente con icono centrado al hover.

Figura robótica

Centrada

Imagen arriba, contenido centrado debajo. Sin overlay.

Background

Solo fondo

background-image con texto sobre capa oscura. Sin elemento img.

Color

Fondo sólido

Color puro como fondo. Alto contraste sin imagen.

Forma

Circular

border-radius: 50%. Contenido centrado.

Interacción

Clickable

Toda la superficie es interactiva. Cursor y escala al hover.

Proceso de diseño
Layout

Dos columnas

Imagen a la izquierda, contenido a la derecha. Se apila en móvil.

Layout

Dos columnas invertida

Contenido a la izquierda, imagen a la derecha. Ritmo alternado.

Diseño minimalista

Un sistema de diseño no es una librería de componentes. Es una decisión sobre qué merece existir y qué no. Todo lo que sobra es ruido; todo lo que falta es deuda.

— Principio fundacional del sistema

Código como Componente

Ventanas de código con syntax highlighting CSS puro — cero JavaScript.

tokens.css 
/* Fuente única de verdad */
:root {
  --text-display: clamp(2.5rem, 7.5vw, 6.5rem);
  --text-large: clamp(2.618rem, ...);
  --text-medium: clamp(1.618rem, ...);
  --text-small: clamp(0.875rem, ...);

  --color-yellow: #FFFF00;
  --color-brand-a: #ce704f;
  --color-brand-b: #6cc1c0;
  --color-brand-c: #7cee95;
}
componente.html 
<article class="card">
  <div class="card__header">
    <h3 class="card__title">Título</h3>
  </div>
  <div class="card__body">
    <p class="card__text">Contenido</p>
  </div>
</article>

Interactivos

Componentes con comportamiento — CSS puro cuando es posible, JS vanilla cuando es necesario.

Dropdown CSS

Menú desplegable activado por :focus-within — cero JavaScript.

Notificaciones

Bloques de aviso con variantes semánticas — info, warning, error, success.

Fuente única de verdad

Cada proyecto copia tokens.css e importa antes que cualquier otro CSS. Solo se sobreescriben las excepciones.

Contraste CMY

Los colores de marca (cyan, magenta, yellow) fallan WCAG AA sobre fondo claro. Usar solo como decoración o sobre fondo oscuro.

Sin !important

La especificidad se resuelve con @layer. Si necesitas !important, el problema está en la arquitectura.

Back to Top

Botón circular fijo. Cyan → negro al hover. .back-to-top--visible lo muestra.

Slider

Carrusel con translateX en píxeles absolutos. Flechas laterales para navegar.

Composición abstracta
Geometría
Proceso de diseño
Diseño minimalista

Profundidad

Sombras progresivas y radios de borde — jerarquía visual sin color.

XS
SM
Base
LG
XL

Todo emana del núcleo, nada se duplica