Aprender, diseñar y compartir.

Fundamentos

IvanLabs es el laboratorio personal y profesional de Iván Molina: un lugar abierto donde diseña, experimenta y comparte experiencias de aprendizaje y recursos e-learning. La marca debe sentirse técnica sin ser fría, experimental sin ser caótica y cercana sin infantilizar.

Arquitectura visual

Cuatro elementos, cada uno con una función. No son cuatro versiones de lo mismo: usar uno en el papel de otro es el error más común.

Firma principal

Fondos claros, interfaz, web y documentos.

Firma inversa

Solo sobre fondos oscuros o fotográficos con contraste suficiente.

Bombilla

Idea, descubrimiento y aprendizaje: llamadas de atención y piezas editoriales.

Avatar

Presencia de la marca personal: bienvenida, comunidad y contenido editorial.

Reglas de composición

Tipografía con intención

Poppins comunica; Figtree explica; JetBrains Mono documenta. No son intercambiables, y la separación de roles es lo que elimina el principal riesgo de Poppins: no se usa nunca para párrafos largos.

El fallback no es casual: Segoe UI es la tipografía de los manuales y del campus. Si una fuente web no llega a cargar, la página cae en la otra cara de la marca, no en Arial.

Los seis pesos, y para qué sirve cada uno

Escala tipográfica: ratios, no píxeles

Los tamaños no se fijan en píxeles: son proporciones. Así la misma escala vale para una página que se lee con scroll y para un panel que debe caber entero en cualquier pantalla. Cada formato declara su medida base y el resto se calcula solo.

Paleta corta, roles claros

Dos azules, un amarillo, tinta y superficies. Es suficiente para que IvanLabs sea reconocible sin convertir cada pantalla en una colección de colores. Cada color tiene un papel, y se usa para eso.

El mismo azul, dos fondos, dos veredictos

La regla que gobierna toda la paleta: un color se mide contra el fondo real del componente, no contra blanco. «Cumple sobre blanco» no es una propiedad de un color; es una propiedad de una pareja color+fondo.

Las páginas casi nunca pintan sobre blanco puro, sino sobre sus propios fondos claros azulados. Por eso el dato que manda es el de la derecha, y por eso la paleta tiene un azul propio para el texto.

Estados y foco visibles

Los estados no pertenecen a la paleta decorativa. Solo aparecen cuando deben explicar algo y siempre combinan color, icono y texto: el color nunca es el único portador del significado.

El nombre visible importa tanto como el color: «¡Conseguido!», «Revisa esto», «Atención» y «Pista» hablan a una persona adulta que está aprendiendo, no a un formulario que ha fallado la validación.

Foco de teclado

Anillo de 3px con 3px de separación, obligatorio. Sobre fondos claros va en azul de texto #2769AB; sobre fondos oscuros o controles azules, en amarillo #F7CE80. Prueba con el tabulador en los dos paneles:

Espacio, radios y elevación

El aire establece la jerarquía; la sombra solo aparece cuando un elemento necesita elevarse. Como la escala tipográfica, el espaciado se expresa en ratios de una unidad base, no en píxeles fijos.

Escala de espaciado

Regla de aplicación: 8–16px dentro de controles, 24–32px dentro de tarjetas y 48–64px entre secciones.

Radios

Sombras

Usan tinta semitransparente, nunca negro puro. Solo expresan elevación: un borde y espacio bastan cuando un elemento no necesita flotar.

Contrastes medidos

Cada pareja color+fondo del sistema, con su ratio real. Umbrales WCAG 2.1 AA: 4,5:1 texto normal y 3:1 texto grande, iconos, bordes y foco.

Estos números no se escriben a mano: se calculan desde la propia definición de los colores. Si un color cambia, la tabla cambia con él, así que lo que se lee aquí es siempre lo que se está pintando.