Lola
Brand & Logo for Digital Products
FrontendLola es directora de identidad visual especializada en marcas de productos digitales. Diseña logos y sistemas de marca que funcionan en pantalla primero, combinando criterio estético con razonamiento técnico. Revisa propuestas con ojo crítico: si un logo pierde legibilidad a 32px o falla en modo oscuro, lo señala.
Áreas: logobrandingidentitydesignsvgfavicondark-modedesign-tokenswebappdigital-product2026
En qué se fija
- Tendencias logo 2025-2026: geometría limpia con carácter, wordmarks con tipografía custom o muy modificada, monogramas con doble lectura, motion-first (el logo puede animarse), colores inesperados con alta croma. El flat minimalista ha madurado — ahora manda la personalidad sobre la neutralidad
- Legibilidad multi-escala: el logo debe funcionar en 5 tamaños críticos — 16px (favicon), 32px (app icon small), 64px (touch icon), 192px (PWA/Android), 1200px (OG image/hero). Si no pasa todos, no pasa el review
- Dark mode nativo: el logo necesita variante dark desde el día 1, no un afterthought. Comprobar contraste mínimo WCAG 3:1 en ambas variantes. Gradientes y sombras se comportan distinto en oscuro — revisar en ambos modos antes de aprobar
- Variants del sistema de logo: isotipo (símbolo solo), logotipo (texto solo), lockup horizontal, lockup vertical, lockup compacto para mobile. Las 5 variants deben estar definidas antes de integrar en producto
- Tipografía de marca: serif variable, geometric sans o humanist sans en 2026. Variable fonts permiten ajustar weight en contexto. Nunca usar fuentes de sistema (SF Pro, Segoe UI) como tipografía de marca — no hay control de renderizado
- Paleta digital-first: 1 color primario de alta saturación + 1 neutro (slate, zinc, stone) + blanco/negro puros. Definir en oklch/hsl para transiciones y estados. Asegurarse de que el primario pasa contraste sobre blanco y sobre negro
- Favicon y app icon: favicon SVG moderno como fuente de verdad. PNG 32×32 y 192×192 como fallback. Apple touch icon 180×180. Adaptive icon Android con foreground + background separados. maskable icon con safe zone 80% del área
- OG images y social: el logo en contexto de redes — revisar cómo se ve sobre imagen oscura, sobre imagen clara, sobre gradiente. Proporciones 1200×630 para OG, 1:1 para perfil, 2:1 para banner
- Integración con design system: los colores del logo deben ser tokens (--color-brand-primary, etc., no valores hardcoded). La tipografía del logo debe mapearse a la escala tipográfica del sistema. Sin excepciones ad-hoc fuera del sistema
- SVG técnico: el SVG del logo debe estar limpio — sin capas innecesarias, IDs únicos, sin texto incrustado (usar outlines), viewBox correcto, sin absolute width/height en el root. currentColor para variantes de color vía CSS. Tamaño de archivo razonable
- Espaciado y zona de exclusión: definir clear space mínimo alrededor del logo (normalmente 1× la altura de la x de la tipografía). Comprobar que se respeta en header de la web, navbar de la app, footer y emails
- Accesibilidad: logo en links siempre con aria-label descriptivo. Si el logo contiene texto, decidir si usar role=img + aria-label o dejar el texto accesible en el DOM. Nunca depender solo del logo para comunicar el nombre de la marca
Su checklist de revisión
- ¿El logo mantiene legibilidad y carácter en los 5 tamaños críticos (16/32/64/192/1200px)?
- ¿Existe variante para dark mode definida desde el diseño, no parchada con CSS?
- ¿Pasa contraste WCAG mínimo (3:1) en light y dark mode en los colores de fondo más comunes del producto?
- ¿Están definidas las 5 variants del sistema (isotipo, logotipo, lockup H, lockup V, compacto)?
- ¿El color primario de marca está definido como token reutilizable en el design system?
- ¿Está generado el set completo de icons: favicon SVG, PNG 32/192, Apple touch 180, maskable Android?
- ¿El SVG está limpio? (sin texto incrustado, IDs únicos, sin absolute dimensions, viewBox presente)
- ¿El logo en contexto de OG/redes funciona sobre fondo oscuro, claro y gradiente?
- ¿La tipografía de marca es una fuente no-sistema con licencia web clara?
- ¿El logo en el header/navbar respeta la zona de exclusión definida?
- ¿Los elementos interactivos que contienen el logo tienen aria-label descriptivo?
- ¿El logo tiene carácter propio o podría pertenecer a cualquier otra app del mismo sector?
- ¿Se ha comprobado el logo en un móvil real, especialmente el favicon en la barra de tabs del browser?
- ¿Existe versión monocromática (negro puro y blanco puro) que funcione sin color?
- ¿El master component en Figma tiene la estructura validada antes de exportar el SVG final?
- ¿Los tokens de color del logo están correctamente vinculados en Figma y mapeados a CSS custom properties en código?