th
ลงชื่อเข้าใช้

brand/rules

Marca — reglas y construcción exacta

El logo de NUEVAUNO = marca terminal + wordmark + cursor. Esta página dice qué archivo usar en cada lugar y las reglas que cumple cualquier persona o agente. Misma información, legible por máquina: /brand-spec.json · /BRAND.md.

Read as Markdown

Hard rules (spec v4.1.0)

  1. 1.

    El logo NO se compone: se usa un ARCHIVO del kit. Nunca se arma a mano icono + texto 'nuevauno' + cursor (en HTML, CSS, React, QWeb, Astro, PDF ni en ningún lado). Armarlo a mano es lo que hace que cada sitio salga distinto.

  2. 2.

    El archivo se elige por contexto en la tabla `assets.byUse` de esta spec (o en /BRAND.md). Solo esas URLs; nada fuera de la tabla.

  3. 3.

    Tamaño = altura del <img> = altura del mark (la caja del icono). Ancho automático (`width:auto`). Nunca fijar ancho y alto a la vez, nunca estirar.

  4. 4.

    Animado (cursor parpadeando) en pantalla: header, login, web, firma de correo, apps. Estático en PDF, impresión, OG/social, favicon y donde no haya animación.

  5. 5.

    Color: `light` (navy + naranja) sobre fondos claros; `dark` (blanco + naranja) sobre fondos oscuros. El lockup nunca va sobre naranja; sobre tile naranja solo el mark blanco.

  6. 6.

    Única excepción al archivo: cuando el logo DEBE ser texto vivo (currentColor, selección, SSR sin imágenes), se usa /brand/lockup.css con el HTML de `snippets.html` TAL CUAL, sin cambiar ningún valor ni clase. Nada más.

  7. 7.

    Los alias legacy (`assets.legacyAliases`) sirven el MISMO archivo que el canónico (byte a byte); están deprecados: no usarlos en código nuevo.

  8. 8.

    Espacio libre mínimo alrededor del logo = 0.5 × altura del mark. Altura mínima del mark: 20px en pantalla, 6mm impreso.

  9. 9.

    Si el kit no tiene el archivo que necesitas (otro tamaño, otro fondo, otro formato), se agrega al generador en nuevauno-branding y se publica. No se improvisa un render local.

  10. 10.

    Favicon / icono de app / PWA (cuadrados ≤ 64px) usan la versión ÓPTICA del mark (`mark.optical`), que engorda trazos para leerse chico. Esa versión NO es el logo y no se usa en tamaños grandes ni junto al wordmark.

  11. 11.

    El wordmark (las letras) tiene una exploración tipográfica (fuente UNO) que vive SOLO en /demo. Lo que se publica y se usa es el kit: Ubuntu Mono 400. No mezclar.

  12. 12.

    Interfaz (pantallas, apps, paneles, onboarding): el estilo vive en /UI.md y /ui-tokens.json (Urbanist 400, etiquetas de sistema en Ubuntu Mono, radio 0, un solo acento naranja, número grande + etiqueta chica, datos reales o nada, Kōdo a un clic). Un agente que diseña una pantalla los lee antes de maquetar.

Which file goes where

Context → URL. Only these. If your case is not here, it is added to the kit (rule 9), not improvised.

How to use it (copy as is)

Screen — the animated file. H = icon height in px.

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

Mail — GIF with a white background, 2x.

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

Only exception: live text (currentColor / SSR without images). Canonical CSS + exact HTML. 1em = icon height.

<link rel="stylesheet" href="/brand/lockup.css">
<span class="nu-lockup" style="font-size:Hpx"><img class="nu-lockup__mark" src="/logos/nuevauno-mark.svg" alt=""><span class="nu-lockup__word">nuevauno</span><i class="nu-lockup__cursor"></i></span>

The cursor · exact geometry (reference)

ShapeThin vertical bar · SQUARE corners (no rounding)
Color#FE4A23
Width0.18 × mark height
Height0.5 × mark height
Ratio width : height1 : 2.78
Blink1.05s steps(1, end) infinite

The terminal mark · fixed vector

/logos/nuevauno-mark.svg — use as is

viewBox 0 0 24 24 · 0.9 · 1.6 · 3.5 3.5 17 16

optical version (favicon / PWA / app icon ≤ 64px) — it is not the logo: /favicons/favicon.svg

Legacy aliases (deprecated · same file as the canonical one)

/logos/nuevauno-logo-lockup.png → /logos/nuevauno-logo-light-1024.png

/logos/nuevauno---footer.png → /logos/nuevauno-logo-light-1024.png

/logos/nuevauno---footer-blanco.png → /logos/nuevauno-logo-dark-1024.png

/signature/nuevauno-firma-logo.gif → /logos/nuevauno-logo-light-360.anim.gif

/signature/nuevauno-firma-logo.png → /logos/nuevauno-logo-light-360.png

They remain in other repos' code; they are regenerated byte for byte from the kit. Do not use them in new code.

Source of truth (people and agents)

Spec: /brand-spec.json

Markdown: /BRAND.md

Live text CSS: /brand/lockup.css

Loose cursor: /brand/cursor.svg

brand kit v4.1.0 · 74 apps · 242 icons