Design Brief

Marca

Wordmark «nvíame»: «nvía» en degradado de #0010B8 a #4DDBE6, peso 800 y tracking −0,02em; «me» en peso 500 color tinta. Tagline: «La academia de mensajería para developers».

Tokens

/* claro */
--background: #FFFFFF;
--ink: oklch(19% 0.03 265);
--border: oklch(90% 0.01 262);
shadow: 0 1px 2px rgba(16,24,64,.06);

/* tenue */
--background: oklch(9.5% 0.02 262);
--surface: oklch(14% 0.025 263);
--ink: oklch(94% 0.008 260);

--primary: #0010B8;  --cyan: #4DDBE6;  --gold: #C9A227;
radius: 10px;

Tipografía

• Prosa: Source Serif 4, 19–20 px, interlineado 1,7.
• Interfaz: Inter.
• Código: JetBrains Mono 13,5 px.

Layout

• Contenedores de máximo 6xl con márgenes generosos.
• Capítulo en tres columnas: checklist, prosa de ~68ch y tabla de contenidos, ambas laterales fijas al hacer scroll.
• Tarjetas blancas con borde de 1 px y sombra suave; portadas en degradado azul-cian con retícula sutil.

Tono editorial

Español técnico neutro latinoamericano, tuteo, frases cortas. Explicamos el porqué antes del cómo, preferimos ejemplos concretos de la región y nunca prometemos más de lo que el código demuestra. Comentarios e identificadores de código en inglés.

Principios visuales

La referencia es una revista técnica bien editada: mucho aire, tipografía serif para leer, sans para la interfaz y monoespaciada para el código. La paleta parte de un azul profundo como color principal, un cian luminoso para acentos y estados de éxito, y un dorado reservado exclusivamente para logros.

El dorado aparece solo cuando el aprendiz completa algo: el anillo al 100%, el círculo de la celebración y la marca del checklist. Esa escasez le da significado. El modo tenue reduce el contraste general sin llegar al negro puro, pensado para leer de noche.

Movimiento

Las animaciones comunican cambio de estado, nunca decoran. El diff anima líneas que se colapsan y se expanden para que el ojo siga la modificación; la celebración dura menos de dos segundos y respeta la preferencia de movimiento reducido del sistema.