Sistema de logos

Cinco lockups oficiales, cada uno en dos tonos. Esta página es la referencia para futuros desarrolladores y para el cliente. Toda invocación pasa por el componente <Logo variant tone />.

Tokens de marca

Variantes

Servidos como SVG vectorial real (con WebP/PNG como fallback). Nítidos a cualquier tamaño, en pantalla y en impresión.

primary-vertical SVG

Pieza editorial destacada (hero, about hero, portada de impresión).

variant="primary-vertical"

tone="dark" · sobre claro

tone="light" · sobre oscuro

compact-vertical SVG

Header móvil y formatos angostos donde el horizontal no respira.

variant="compact-vertical"

tone="dark" · sobre claro

tone="light" · sobre oscuro

monogram SVG

Watermarks, badges decorativos, avatares de blog, loaders, favicon.

variant="monogram"

tone="dark" · sobre claro

tone="light" · sobre oscuro

horizontal SVG

Header desktop y bloque ancho del footer.

variant="horizontal"

tone="dark" · sobre claro

tone="light" · sobre oscuro

wordmark SVG

Footer minimal, firma de cierre, créditos.

variant="wordmark"

tone="dark" · sobre claro

tone="light" · sobre oscuro

Reglas de uso

• Header desktop: horizontal claro sobre el hero, oscuro al hacer scroll (fondo bone).
• Header mobile: compact-vertical con la misma lógica de tono.
• Hero / piezas editoriales: primary-vertical a tamaño protagónico, o monogram como watermark al 6% de opacidad.
• Footer ancho: horizontal claro como bloque principal. Cierre del footer: wordmark claro como firma sutil.
• Watermarks, badges, avatares de blog, loaders, favicon: monogram.
• Contraste obligatorio: tono oscuro solo sobre fondos claros (paper, blanco). Tono claro solo sobre fondos oscuros (ink, navy o foto con veil).
• Accesibilidad: alt = "Gómez Fierro Abogados" en usos significativos. decorative + aria-hidden en watermarks.
• Color institucional: el azul profundo (--navy) actúa como superficie editorial oscura; el teal (--teal) como acento discreto (subrayados, hairlines, hovers, íconos), nunca como fondo masivo.