Pago confirmado
El recibo llegó a tu correo.
Esto no es una página sobre diseño.
ENTRA AL SISTEMA
30.000 partículas. 8 capítulos. Un sistema de diseño que se construye alrededor de ti mientras bajas. Todo lo que veas —cada color, espacio, sombra y curva— es la lección.
scroll
Sin sistema, cada decisión de diseño es ruido.
Cientos de grises. Docenas de azules. Sombras inventadas a las 3 a.m.
Un design system convierte el ruido en lenguaje.
TOKENS
Mira las partículas: acaban de formar una retícula. Eso hace un token — toma una decisión suelta («este verde») y le da nombre, lugar y significado (color.icon.success). Decisiones de diseño traducidas a datos: la única fuente de verdad entre diseño y código.
anatomía de un nombre
color.background.danger.hovered
- foundation
- property
- modifier
- state
Regla de oro: elige por significado, nunca porque «el color se parece». El token equivocado rompe el dark mode que aún no has construido.
un componente · dos mundos
La tarjeta no sabe qué tema hay. Solo pide elevation.surface.raised, color.text, color.background.danger.bold. El tema decide los valores.
Cambia el tema y cientos de valores cambian a la vez. Dark mode, alto contraste, densidad compacta: todo es theming sobre el mismo conjunto de tokens. Por eso esta página vive en oscuridad sin esfuerzo.
COLOR
Las partículas ahora son una rueda de color. Sigue bajando: el scroll gira el hue del mundo entero — partículas, acentos, marca. Una variable, propagada por tokens. Así se siente cambiar de marca en un sistema bien hecho.
hue °
Simetría light↔dark: botón en paso 600 en claro → 400 en oscuro. Fondo sutil 100 → 1000. La rampa es un espejo partido a la mitad.
roles, no gustos
neutralbrandinformationsuccesswarningdangerdiscoveryaccent ×10
60% neutral · 30% secundario · 10% acento — y ese 10% es tu call-to-action. Si el color tiene significado (éxito, peligro), jamás lo uses de adorno.
laboratorio · contraste WCAG en vivo
—
Aa 24px
El 95% de tu interfaz es texto de cuerpo. Si no pasa 4.5:1, no pasa.
- AA cuerpo · 4.5
- AA grande · 3
- AAA · 7
- UI · 3
Negro puro sobre blanco puro = halation, fatiga. Y el color nunca comunica solo: acompáñalo de icono, texto o patrón — 8% de los hombres ve el color distinto a ti.
TIPO
La tipografía es el 90% de la interfaz. Baja despacio: este titular vivo respira con tu scroll — de Thin a Black, una sola fuente variable. Eso es un eje de variación; un sistema tipográfico es elegir en qué puntos del eje vives.
laboratorio · escala modular
Minor third — la escala de Atlassian: ×1.2, redondeada al múltiplo de 4.
Display
Heading
Subhead
Body — la base de la que todo deriva. rem, no px: el usuario ajusta su tamaño y tú lo respetas.
small / legal
Line-height: cuerpo ×1.5, títulos ×1.1–1.2 — inversamente proporcional al tamaño.
Medida: 60–80 caracteres por línea. Arrastra y siéntelo ↓
Cuando la línea crece demasiado, el ojo viaja de más y pierde el inicio de la siguiente. Cuando es corta, el texto se fragmenta. Hay un punto exacto donde leer se vuelve invisible — ese es el objetivo.
✓ zona de confort (60–80ch)
ESPACIO
El whitespace no es vacío: es la información. La distancia entre dos cosas ES su relación — ley de proximidad de Gestalt. Todo espacio de esta página sale de una escala: múltiplos de 8px.
Nombre
Tarjeta
CVC
Dirección
8px — un muro de campos · el scroll separa los grupos; mira cómo el formulario se explica solo, sin bordes ni títulos
la escala — 8px como unidad base
025050100base20030040060080010000–8px: dentro de componentes · 12–24px: entre elementos · 32–80px: entre secciones. El sufijo es % de la base: space.200 = 16px. Pulsa G: esta página corre sobre 12 columnas, gutter 16, margen 32 — el grid alinea contenedores, nunca botones.
ALTURA
Las partículas se apilaron en capas: sunken, default, raised, overlay. Superficie + sombra = altura percibida. En oscuridad las sombras casi no se ven — por eso las superficies altas también se aclaran, como iluminadas por una luz lejana de frente.
sunkenel pozo — columnas de un Kanban
surfacela base — el cuerpo de la página
raisedtarjetas que se mueven · + shadow.raised
laboratorio · sombra realista por capas
Luz natural
blur alto + opacidad baja + varias capas. Una capa dura y opaca = pegatina.
Nunca mezcles pares: superficie raised con sombra overlay es ruido. La luz viene de arriba — sombra siempre hacia abajo. Radius: 2 badges · 4 tags · 6 botones · 8 tarjetas · 12 modales · full avatares. Focus ring: radio del componente +2px, offset 2px.
MOTION
El movimiento explica causa y efecto. Las entradas orientan: ease-out, largas, llaman la atención. Las salidas confirman: ease-in, 50–100ms más cortas, se apartan. Anima transform y opacity; jamás width, height o top.
laboratorio · las curvas del sistema
Guía: hover 50ms · pressed 100ms · dropdown 150/100 · modal 250/200 · página 400ms. Una o dos propiedades por transición. Foco y anuncios a lectores de pantalla al inicio de la animación.
GESTALT
Las partículas forman una esfera que nunca dibujamos completa — tu cerebro la cierra solo. «El todo es distinto a la suma de las partes.» Percibes antes de pensar; diseñar es dirigir ese reflejo.
Proximidad
Lo cercano se percibe relacionado — más fuerte que color o forma.
Similitud
Lo parecido comparte función: por eso todos los links visten igual.
Cierre
Ves un círculo. Solo hay arcos. Tu mente pone el resto.
Figura–fondo
figura
Lo primero que decide el ojo: qué es contenido y qué es fondo. Los modales viven de esto.
Región común
Un contorno agrupa incluso a igual distancia — la razón de ser de las tarjetas.
Punto focal
Lo que contrasta captura primero. Tu CTA debe ser el punto focal — uno por vista.
ARCHIVO
← el scroll ahora es horizontal →
Botones
default → hovered → pressed → focused → disabled. Cada estado con su token. Área táctil ≥44px. Avanzar a la derecha, retroceder a la izquierda.
Formularios
El placeholder no es un label. Los errores dicen qué está mal y cómo arreglarlo. Formularios largos → pasos. Related fields → un grupo.
Iconos
16px por defecto, trazo 1.5, terminales cuadrados, nunca 3D. El icono sin etiqueta es una adivinanza.
Radius
246812full
badges · tags · botones/inputs · tarjetas · modales · avatares. Las esquinas redondeadas concentran el foco dentro, hacia el contenido.
Accesibilidad
No es una sección.
Es la condición
de todas las anteriores.
4.5:1 cuerpo · 3:1 grande y UI · foco visible · headings reales · zoom 200% · prefers-reduced-motion respetado — esta página lo hace.
El sistema está completo.
DISEÑACONSISTEMA
Rompe las reglas después de aprenderlas.
volver al inicio