Manual de identidad · v1.0

Una palabra, un punto, tu negocio en línea.

Lutaoh es la suite digital de Grupo BSM para negocios de servicio: el dueño arma su carta en minutos y nosotros la mantenemos viva en la red. La marca hereda el gesto de la familia fastco — el nombre en minúsculas y un punto de color — y lo hace suyo: el punto azul es el negocio del cliente, publicado y en línea. Este manual fija cómo se escribe, se colorea y se aplica; el sistema visual es el ya establecido en lutaoh.com.

Aprobado: Opción 1 · «El punto»Julio 2026Dominio: lutaoh.com (Cloudflare)
02

Variantes de color

Cuatro versiones cubren todo. La principal vive sobre blanco o superficies claras; sobre oscuro el punto sube a #0EA5E9 para conservar su brillo; las monocromas existen para grabados, sellos y contextos de una sola tinta.

Principal · fondos claros
Sobre oscuro · punto #0EA5E9
Mono tinta · 1 color
Mono blanco · sobre azul

Favicon y avatar — «l.»

Transparente
Tile · apps y redes
03

Usos incorrectos

Si no está en la sección anterior, no existe. Estos son los errores que más se van a intentar:

No estirar ni condensar
No rotar
No aplicar sombras
No recolorear el punto fuera de la paleta
lutaoh.No cambiar la tipografía
No usar contornos
No colocar sobre fondos sin contraste
No aplicar degradados a las letras
04

Color

La paleta es la del sitio, sin adiciones. Proporción de trabajo: ~70 % blancos y superficies, ~20 % tinta en texto, ~10 % azul — el azul se gasta en lo que actúa: botones, ligas, el punto.

PRIMARIO#0284C7--pri · CTAs, punto, ligas
PRIMARIO CLARO#0EA5E9--pri-2 · acentos, punto en dark
SUAVE#E7F4FC--pri-soft · fondos de chip
LÍNEA AZUL#BFE3F7--pri-line · bordes activos
TINTA#0B1220--ink · texto, logo
OSCURO#06121E--dark · secciones dark
SECUNDARIO#5B6472--muted · texto de apoyo
SUPERFICIE#F7F9FB--surf · tarjetas, fondos
FUNCIONAL#16A34Aéxito · «en línea» (no es marca)

Contraste verificado (WCAG)

ParRatioNivelUso permitido
Tinta / blanco18.72:1AAATodo texto
Blanco / azul #0284C74.1:1AA grande·UIBotones y titulares ≥19 px — no párrafos
Muted / blanco5.98:1AATexto secundario
Blanco / oscuro18.87:1AAATexto en secciones dark
Azul claro / oscuro6.81:1AAAcentos y ligas en dark
05

Tipografía

Tres familias con papeles fijos. Space Grotesk titula y firma; Manrope hace todo el trabajo de lectura; Instrument Serif solo aparece en itálicas, como acento editorial de una línea — jamás en párrafos ni en interfaz.

Tu menú en línea, sin complicarte.
— como debe ser.
Publica hoy, cobra esta semana

Body en Manrope 400–600, 16–17 px, interlínea 1.6, máximo 66 caracteres por línea. Los pesos 700–800 se reservan para etiquetas y botones.

$1,240.00 MXN · numerales tabulares para precios y totales

Reglas

Titulares: Space Grotesk 700, espaciado −0.02 a −0.03 em, interlínea 1.05–1.2 · Escala: 1.333 (16 → 21 → 28 → 38 → 50) · Instrument Serif: solo itálica, solo una línea, de preferencia en azul · Nunca más de dos pesos por pieza.

06

La marca en el producto

Piezas canónicas de interfaz — ya construidas así en la app y el sitio:

PLAN SMART
La Espiga de Oro
la-espiga-de-oro.lutaoh.com
EN LÍNEA

La firma en los menús publicados

hecho con lutaoh.

Sobre temas claros: tinta + punto azul. Space Grotesk 700, 13–14 px.

hecho con lutaoh.

Sobre temas oscuros: blanco + punto #0EA5E9. Si el tema del cliente choca con el azul, se usa la versión monocroma.

El verde «en línea» (#16A34A) es color funcional de estado, no de marca: nunca se usa en el logotipo ni en piezas de comunicación.

07

Aplicaciones

QR de mesa (90 × 90 mm)

Escanea el menú
la-espiga-de-oro.lutaoh.com

Logo arriba (l = 8 mm), QR al centro con marco de tinta, liga abajo en Space Grotesk. Fondo siempre blanco para lectura del escáner.

Open Graph (1200 × 630)

Tu menú digital, listo en minutos.

Fondo blanco, logo 130 px arriba-izquierda, titular Space Grotesk, franja azul inferior. Misma plantilla para redes.

Avatares y firma de correo

Avatar en apps y redes: favicon-tile.svg (azul, «l.» blanco). Firma de correo: logo 96 px + nombre + puesto en Manrope 600 13 px + lutaoh.com en azul.

08

Voz

✕ «Optimiza la experiencia digital de tus comensales»
✓ «Tu carta en el celular de tus clientes, hoy»
✕ «Ha ocurrido un error inesperado (código 500)»
✓ «No se guardó el cambio. Vuelve a intentarlo — tu carta sigue en línea.»
✕ «Únete al ecosistema Lutaoh»
✓ «Empieza gratis. Sin tarjeta.»
09

Archivos y despliegue

Todo el paquete vive en marca/assets/ dentro del deploy. Los SVG son contornos vectoriales — escalan a cualquier tamaño e imprimen sin la fuente instalada.

ArchivoQué esÚsalo en
logo-lutaoh.svgPrincipal · tinta + punto azulFondos claros, impresos
logo-lutaoh-dark.svgBlanco + punto #0EA5E9Secciones oscuras, video
logo-lutaoh-mono-negro.svgUna tintaSellos, grabados, fax de aduana
logo-lutaoh-mono-blanco.svgUn blancoSobre azul primario, fotografías oscuras
favicon.svg«l.» transparentePestañas del navegador
favicon-tile.svg«l.» blanco sobre tile azulApp icon, avatares, WhatsApp Business

Favicon en el sitio (una línea, cuando decidas tocar el head)

<link rel="icon" type="image/svg+xml" href="/marca/assets/favicon.svg">