Brief de diseño

El diseño de verificaOTP busca sentirse como una publicación técnica seria —cercana a una buena documentación de producto— antes que como un curso con insignias y gamificación agresiva. Este brief resume los tokens visuales, la tipografía, el layout de cada pantalla y el tono editorial.

Tokens

/* light (default) */
--background: #FFFFFF;
--ink: oklch(19% 0.03 265);
--border: oklch(90% 0.01 262);
--shadow-soft: 0 1px 2px rgba(16,24,64,.06);
/* dim */
--background: oklch(9.5% 0.02 262);
--surface: oklch(14% 0.025 263);
--ink: oklch(94% 0.008 260);
/* brand */
--primary: #0010B8;  --cyan: #4DDBE6;  --gold: #C9A227;

El wordmark combina «verifica» en peso 500 color tinta con «OTP» en peso 800, recortado sobre un degradado horizontal de primario a cian. El dorado se reserva para logros: series completas, casillas marcadas y la celebración.

Tipografía

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

Usar una serif para la prosa y una sans para la interfaz marca visualmente la diferencia entre «contenido para leer con calma» y «controles para operar», lo que ayuda al lector a saber en qué modo está sin pensarlo.

Layout

Ancho máximo de 72 rem (max-w-6xl), radios de 10 px, densidad editorial. El inicio usa un hero a dos columnas; la biblioteca, una cuadrícula de tarjetas; la serie, lista y mapa lado a lado; el capítulo, tres columnas con barras laterales pegajosas que desaparecen en pantallas pequeñas.

Tono

Español técnico neutro latinoamericano, directo y sin relleno. Se explica el porqué antes del cómo, se nombran los riesgos con precisión y se evitan anglicismos cuando existe un término claro en español. Identificadores y comentarios de código, en inglés.