Logo · NUEVAUNO UI

Qué archivo va dónde

Elige el archivo por contexto. Sólo estos; si falta uno, se agrega a la librería.

Contexto	Archivo	Vista
web-header-claro	`/logos/nuevauno-logo-light.anim.svg`
web-header-oscuro	`/logos/nuevauno-logo-dark.anim.svg`
login-y-pantallas-app	`/logos/nuevauno-logo-light.anim.svg`
firma-de-correo	`/logos/nuevauno-logo-light-360.anim.gif`
correo-html-transaccional	`/logos/nuevauno-logo-light-360.anim.gif`
pdf-e-impresion	`/logos/nuevauno-logo-light.svg`
og-social-preview	`/logos/nuevauno-logo-light-2048.png`
presentaciones-y-docs	`/logos/nuevauno-logo-light-2048.png`
fondo-oscuro-estatico	`/logos/nuevauno-logo-dark.svg`
prendas-packaging-cuadrado	`/logos/nuevauno-logo-vertical-light.svg`
solo-icono	`/logos/nuevauno-mark.svg`
solo-icono-fondo-oscuro	`/logos/nuevauno-mark-white.svg`
solo-icono-animado	`/logos/nuevauno-mark.anim.svg`
favicon	`/favicons/favicon.svg`
pwa-apple-touch	`/logos/nuevauno-pwa.png`
avatar-redes	`/avatars/nuevauno-avatar-light.png`
badge-powered-by	`/footer/nuevauno.js`
texto-vivo-excepcion	`/brand/lockup.css`

Todas las variantes

light = navy sobre fondo claro; dark = blanco sobre fondo oscuro. Los SVG animados parpadean solos dentro de un img. Los GIF son para correo y llevan fondo sólido.

Horizontal, claro

Horizontal, oscuro

Vertical, claro

Vertical, oscuro

Ícono suelto

Ícono suelto, sobre fondo oscuro

SVG

Lockup

PNG

Ícono de app (PWA)

PNG

Pie de correo

Pie de correo, blanco

Logo cuadrado

Cómo se usa

El alto del img es el alto del ícono; el ancho es automático. Nunca fijes ancho y alto a la vez.

Pantalla (H = alto del ícono en px)

<img src="https://ui.nuevauno.com/logos/nuevauno-logo-light.anim.svg" alt="NUEVAUNO" height="H" style="height:Hpx;width:auto;display:block">

Correo

<img src="https://ui.nuevauno.com/logos/nuevauno-logo-light-360.anim.gif" alt="NUEVAUNO" width="182" height="40" style="display:block;border:0;width:182px;height:40px">

Texto vivo: la hoja

<link rel="stylesheet" href="https://ui.nuevauno.com/brand/lockup.css">

Texto vivo: el HTML, tal cual

<span class="nu-lockup" style="font-size:Hpx"><img class="nu-lockup__mark" src="https://ui.nuevauno.com/logos/nuevauno-mark.svg" alt=""><span class="nu-lockup__word">nuevauno</span><i class="nu-lockup__cursor"></i></span>

Texto vivo sobre fondo oscuro

<span class="nu-lockup nu-lockup--dark" style="font-size:Hpx"><img class="nu-lockup__mark" src="https://ui.nuevauno.com/logos/nuevauno-mark-white.svg" alt=""><span class="nu-lockup__word">nuevauno</span><i class="nu-lockup__cursor"></i></span>

Avatares de redes

nuevauno-avatar-dark

nuevauno-avatar-light

Favicon e ícono de app

Para cuadrados de 64 px o menos se usa la versión óptica del ícono, con trazos más gruesos. No es el logo.

Sello Powered by NUEVAUNO

Para el pie de un sitio: un script del kit que dibuja el sello con la fuente de la marca.

HTML

<script src="https://ui.nuevauno.com/v/1.0.1/footer/nuevauno.js" integrity="sha384-bS7JkV0k9zYLnvOi40bLA27qqrAGR5qOXJ1ZayvKuyxIEFxTG3xU5B7DEFv+iP+M" crossorigin="anonymous" defer></script>