Resultado visible
Crearás una página de referencia con colores, tipografía, espacios, radios, sombras y componentes en sus estados. El sistema será pequeño y justificable.
Reglas base
Define roles, no colores sueltos: fondo, superficie, texto, texto secundario, borde, acción, éxito, aviso y error. Usa una escala de espacios y tamaños limitada. Reserva la tipografía expresiva para títulos y prioriza lectura en párrafos.
Prompt para Sol
Analiza el briefing y tres adjetivos de marca: [ADJETIVOS].
Propón dos direcciones visuales distintas. Para cada una incluye:
paleta por roles con contraste, pareja tipográfica, escala de espacios,
tratamiento de botones/tarjetas y riesgos de parecer genérica.
No edites todavía. Tras mi elección, implementa tokens CSS y una página
de muestra con estados normal, hover, focus, disabled, error y éxito.
Prueba
Comprueba contraste con una herramienta, pero también legibilidad real. Busca valores hexadecimales y medidas repetidas fuera de los tokens. Si cada sección inventa un estilo, todavía no hay sistema.
Error frecuente
Pedir «diseño premium con degradados y glassmorphism» produce clichés y puede reducir contraste. Recupera describiendo la sensación y las restricciones: sobrio, cálido, editorial, técnico; fotografía disponible; público y contexto.
Evidencia
Guarda capturas de la página de muestra en móvil y escritorio y una nota explicando por qué cada decisión ayuda al objetivo.
Fuentes oficiales
Si has guardado la evidencia de esta lección, continúa con «Diseña para móvil, teclado y lectores de pantalla». Si no, repite la comprobación antes de avanzar.