La clase de fundamentos visuales, jugable: tipografía, color, espaciado y design systems. Con música, sonido, combos y un jefe final.
🔊🎵 Sube el volumen — la música y el sonido ambientan la clase
Cómo se juega
Reglas del arcade
🎯 Aprendemos jugando: cada tema tiene su mini‑juego.
🔥 Aciertos seguidos = combos que multiplican puntos.
⭐ Subes de nivel y ganas insignias.
🎵 Botones arriba: 🎵 música y 🔊 sonido. Al final, tu rango.
Tema 1 · Tipografía
Tres familias, tres voces
Aa
Serif
Con remates. Tradición y autoridad. Textos largos formales.
→ contratos, dictámenes
Aa
Sans-serif
Sin remates. Limpia y moderna. La mejor en pantalla.
→ apps, formularios, web
Aa
Monoespaciada
Ancho fijo. Evoca código y datos técnicos.
→ IDs, cifras, metadatos
Juego 1 · Tipografía
Clasificador de fuentes
Responde rápido: ¿qué familia ves? Más velocidad = más puntos.
Ronda 1 / 8
Contrato
Tema 2 · Teoría del color
Piensa en HSL
H tono (0–360°) · S saturación · L luminosidad. Razonar el color en HSL te da control real: no adivinas HEX a ciegas.
🎨 Complementaria
Tonos opuestos. Máximo contraste y energía.
🌊 Análoga
Tonos vecinos. Calma y cohesión.
🔺 Triádica
Tres tonos equidistantes. Vibrante y equilibrada.
Juego 2 · Color
Iguala el color
Ajusta H, S y L hasta clavar el objetivo. Puntúa por precisión.
Ronda 1 / 4
objetivo
tú
H
S
L
Juego 3 · Color accesible
Defensor de la accesibilidad
El color también es legal: el texto necesita contraste WCAG AA ≥ 4.5. ¿Este par pasa? ¡Rápido!
Aciertos 0
Notificación de mora
Tema 3 · Leyes del espaciado
El espacio también comunica
Proximidad (Gestalt): lo cercano se percibe como grupo. Y los pros no espacian a ojo: usan una grilla (unidad base 8px y múltiplos). Todo respira igual y se ve intencional.
Juego 4 · Espaciado
Snap a la grilla de 8
Detén el marcador justo sobre una línea naranja. Sube de velocidad cada ronda.
Snap 1 / 8
Velocidad 1.0x
Clic / toca / ESPACIO para detener
Tema 4 · Design systems
De reglas sueltas a un sistema
Un design system guarda tus decisiones como tokens (color, radio, espacio, fuente) y componentes. Decides una vez, aplicas a todo. Es lo que hace reconocible a una marca.
Jefe final · Design System
Reconstruye el sistema
Deduce los tokens del objetivo en 5 escaneos. Pistas: 🟢 exacto · 🟡 cerca · 🔴 lejos.
🎯 Objetivo
VIGENTE
Contrato
Asesoría · honorarios fijos · 12 meses.
🛠️ El tuyo
VIGENTE
Contrato
Asesoría · honorarios fijos · 12 meses.
colorradioespaciofuente
🏆 Nivel final
Aplica TODO: diseña un contrato real
LEGAL DESIGN SCORE0
Documento privado
Contrato de Prestación de Servicios
Contratante
Comercializadora Andes S.A.S.
Contratista
Juan David Ríos
Entre los suscritos, mayores de edad y con capacidad legal para contratar, se celebra el presente contrato que se regirá por las siguientes cláusulas:
Primera — Objeto
El Contratista prestará servicios de asesoría jurídica de forma independiente durante la vigencia del contrato.
Segunda — Honorarios
El Contratante pagará honorarios mensuales fijos dentro de los cinco (5) días hábiles siguientes a la cuenta de cobro.
Comercializadora Andes S.A.S.
Contratante
Juan David Ríos
Contratista
Fin de la clase
0
—
0mejor combo
1nivel
0insignias
SIGUE → Marca + composición · aplicar este sistema a piezas reales