Aprender
Cada guía termina en la herramienta con el ejemplo ya cargado: lee la teoría y luego mueve tú los controles.
Escala tipográfica: la guía práctica
Qué es una escala tipográfica, cómo elegir una proporción y cómo una sola escala puede regir todo tu sistema de diseño. Guías, ejemplos resueltos y una herramienta en vivo.
16 guíasSistemas de espaciado y la rejilla de 8pt: la guía práctica
Cómo funcionan los sistemas de espaciado: la rejilla de 8pt, los medios pasos de 4pt, las rejillas de línea base y las escalas de espaciado que crecen a partir de una sola fórmula. Guías y una herramienta en vivo.
14 guíasOKLCH y el color CSS moderno: la guía práctica
OKLCH explicado para diseñadores y desarrolladores — luminosidad, croma, tono, gamas y por qué las herramientas de color modernas generan paletas con él. Guías y una herramienta en vivo.
15 guíasEscalas de color y paletas de UI: la guía práctica
Cómo funcionan las escalas de color: los pasos 50–900, las rampas a partir de un color de marca, los roles semánticos y las paletas que pasan el contraste por construcción. Guías y una herramienta en vivo.
17 guíasContraste y color accesible: la guía práctica
Ratios de contraste WCAG, APCA, daltonismo y paletas accesibles: qué exigen las reglas, por qué existen y cómo cumplirlas por construcción.
13 guíasDesign tokens: la guía práctica
Qué son los design tokens, el formato DTCG, las capas de nomenclatura, los temas y el camino de exportación de una fuente a CSS, Tailwind y Figma. Guías y una herramienta en vivo.
12 guíasRejillas de maquetación y breakpoints: la guía práctica
Cómo funcionan las rejillas de maquetación: columnas 4/8/12, medianiles, márgenes, breakpoints y anchos de contenedor, construidos con CSS moderno en lugar de clases de framework.
9 guíasTipografía y espaciado fluidos: la guía práctica
Tipografía fluida con clamp(): tamaños que escalan con suavidad según el viewport en lugar de saltar en los breakpoints. Las matemáticas, las reglas de accesibilidad, las guías.
11 guíasDiseño de Modo Oscuro: La Guía Práctica
Cómo funciona de verdad el modo oscuro — paletas derivadas en lugar de inversión, pérdida de croma, elevación, errores de contraste y tokens de tema. Guías y una herramienta en vivo.
11 guíasColores de marca: de un color a un sistema que funciona
Cómo los colores de marca se convierten en sistemas que funcionan: elegir un color, sobrevivir a la accesibilidad, traducir de impresión a pantalla, rediseños y auditorías. Guías y una herramienta en vivo.
12 guíasTipografía web: fuentes, combinación y legibilidad
El lado artesanal de la tipografía web: combinar fuentes, serif frente a sans, longitud de línea, legibilidad y qué transmite un tipo de letra. Guías y una herramienta en vivo.
13 guíasLa IA y los sistemas de diseño: la guía práctica
Las herramientas de IA construyen interfaces e imágenes rápido, pero no sostienen un sistema. Cómo los design tokens y una paleta con nombres mantienen el resultado de la IA fiel a la marca: guías y una herramienta en vivo.
9 guías