321Pass
Entrar
Estilo 02 / Azul y DoradoVersión 1.0 · 17 de septiembre de 2026

Manual de marca

Cómo se ve y cómo habla 321Pass. Esta página se pinta con los mismos colores, tipografías y componentes que usa la aplicación: si algo cambia en el producto, cambia aquí.

321Pass

01 · La marca

Trabajas aquí. Disfrutas en toda la red.

321Pass es el pase de quienes trabajan en el comercio local: muestran su pase, disfrutan de las ventajas de los demás comercios de la red y suman puntos por sus compras.

Cercana

Habla de tú, con frases cortas y palabras de barrio. Nada de jerga de fidelización.

Cálida y cuidada

Navy sereno, dorado con mesura, fondos crema y fotos de sitios donde apetece quedarse.

Honesta

Lo que es una propuesta, un ejemplo o una fase futura se dice. Siempre.

Lema

Trabajas aquí. Disfrutas en toda la red.

Entradilla y nota manuscrita

Mismo trabajo. Más vida aquí.

Gente que hace ciudad

02 · Logotipo

Un punto dorado y un nombre.

El logotipo es el punto dorado seguido de «321Pass» en Red Hat Display extrabold. El punto es el elemento propio de la marca: aparece solo como estado «Activo», como viñeta y, ampliado, como icono de la app.

321Pass
321Pass
321Pass

Isotipo e icono de la app

Un círculo dorado solo no se reconoce a 48 px. El isotipo es el punto ampliado sobre navy con «321» dentro.

Zona de respeto y tamaño mínimo

321Pass
  • Alrededor, el diámetro del punto libre por cada lado.
  • En pantalla, 96 px de ancho como mínimo.
  • En impresión, 24 mm de ancho como mínimo.
  • Navy sobre crema o blanco; blanco sobre navy o sobre foto con velo navy.
  • El punto siempre dorado, también en la versión en blanco.
  • Usar los SVG: llevan las letras trazadas y no dependen de la fuente.
  • Escribir el nombre en dorado, o el logo sobre fondos de poco contraste.
  • Estirar, inclinar, sombrear o cambiar la separación entre punto y nombre.
  • Recomponer el nombre con otra tipografía o separar «321» de «Pass».

Descargas

03 · Color

Azul sereno, dorado con mesura.

Los valores están medidos sobre las láminas del Estilo 02. La regla que más importa: hay dos dorados, y el del logo no se usa para texto.

  • Navy

    #062D4F

    Botón principal, cabecera del pase, filtro activo

    --navy

    Blanco encima 14,0:1

  • Tinta

    #0B1F3A

    Titulares y texto principal

    --ink

    Sobre blanco 16:1

  • Pizarra

    #525E77

    Texto secundario

    --slate

    Sobre blanco 6,5:1

  • Dorado

    #AD8346

    Punto del logo, iconos, bordes de selección

    --gold

    Nunca como texto: 3,2:1

  • Dorado tinta

    #856228

    Enlaces, «+12 puntos», pestaña activa

    --gold-ink

    Sobre blanco 5,6:1

  • Dorado insignia

    #C9AC74

    Insignia del beneficio sobre la foto

    --gold-badge

    Texto navy encima 6,4:1

  • Arena suave

    #F6EFE6

    Chips de ventaja, plan elegido

    --gold-soft

  • Arena

    #F8F3EA

    Tarjeta del saldo, bloques cálidos

    --sand

  • Crema

    #FAF8F5

    Fondo de página

    --cream

  • Superficie

    #FFFFFF

    Tarjetas

    --surface

  • Línea

    #E9E1D5

    Bordes y separadores

    --line

Colores de estado

  • Correcto

    #1F6B45 · #E3F1E8

  • Aviso

    #8A5A00 · #FBF0D9

  • Error

    #A3321F · #FBE7E2

  • Información

    #1D4E7A · #E3EDF6

Los tres sitios donde el dorado no se leía

El mínimo de contraste para texto es 4,5:1. A la izquierda, como venía en las láminas; a la derecha, como se usa.

Insignia sobre la foto

10% en tu cuenta
2,76:1Blanco sobre dorado
10% en tu cuenta
6,4:1Navy sobre dorado insignia

Pestaña activa

Explorar
4,28:1Dorado medio
Explorar
5,6:1Dorado tinta

Enlaces y cifras

Cómo llegar
3,24:1Dorado del logo
Cómo llegar
5,3:1Dorado tinta

04 · Tipografía

Red Hat, en tres voces.

Una sola familia para todo, con tres cortes. Gratuita, con los caracteres de los cinco idiomas del producto.

Red Hat Display · titulares

Pesos 700 y 800 · tracking −0,02 em · interlínea 1,0–1,1

Tu pase te abre Valencia

Tus puntos, tus próximos planes.

Algunos de nuestros comercios en Valencia

Red Hat Text · lectura

Beneficios exclusivos para empleados de los comercios asociados.

Cocina mediterránea de temporada en un espacio con alma. Producto de mercado, mesas para compartir y una carta que cambia con la estación.

Restaurante · Ciutat Vella · Abierto hoy · 13:00 – 16:00 · 20:00 – 23:30

Red Hat Mono · códigos

Y00P-NWDG-4B7B

Caveat · sólo en la portada

Gente que hace ciudad

Sobre fotos de la web pública. Nunca dentro de la app.

UsoMóvilOrdenadorPeso
Titular de portada40 px50–58 px800
Titular de pantalla30–32 px40–52 px800
Título de sección19 px21 px700
Cifra destacada (saldo, KPI)28–76 px30–76 px800, tabular
Texto15–16 px16–17 px400
Apoyo y metadatos13–14 px14 px400–500
Entradilla en versalitas11 px · tracking 0,2 em11–12 px600

05 · Forma e iconos

Bordes finos, esquinas amables.

La separación la da el borde, no la sombra. Las sombras se reservan para lo que flota: el pase y los menús.

Tarjeta

16 px

Botón y campo

12 px

Pase

20 px

Chip y filtro

Píldora

Iconos: lucide, trazo 1,75

Un único juego para las cuatro pestañas. No se alternan con otros según la pantalla.

  • Explorar
  • Mi pase
  • Puntos
  • Cuenta

06 · Componentes

Las piezas, tal como están en la app.

No son capturas: son los componentes reales.

Botones

Tarifas propuestas
Sobre navy

Etiquetas y estados

10% en tu cuentaCafé incluidoActivoAceptadoEn revisiónRechazadoLeyendoDatos de demostración

El pase

Cabecera navy, borde dorado fino, QR sobre blanco puro. Es la única pieza con sombra.

321PassValencia, más cerca

Mi pase

Activo

Ana Martín

Trabaja en Nido Valencia

Código de muestra: lleva a 321pass.com

Cifras del comercio

Icono en círculo arena, cifra en navy, etiqueta en negrita y una línea que explica de dónde sale.

124

Usos del pase

Actividad registrada este mes

85

Personas

Distintas que han usado el pase

30 €

Ticket medio

Consumo medio por uso

50

Puntos

Cifras de ejemplo

07 · Fotografía

Sitios donde apetece quedarse.

La fotografía hace el trabajo emocional. Luz cálida, mesas y manos antes que poses, producto en primer plano y locales con gente de verdad.

  • Luz natural o cálida; madera, vajilla, plantas, producto local.
  • 16:9 en tarjetas, 2:1 en la galería de la ficha, texto alternativo siempre.
  • Sobre una foto, el texto va con velo navy del 55 al 85 %.
  • Bancos de imagen fríos, flash directo, filtros saturados.
  • Rótulos o marcas de terceros legibles que no sean del comercio.
  • Fotos generadas presentadas como si fueran de un comercio real.

Las fotos de esta demostración son de dominio público o CC0. Ver su procedencia

08 · Voz y honestidad

De tú, corto y sin adornos.

La marca habla como alguien del barrio que conoce bien los sitios. Y nunca presenta una hipótesis como si fuera un hecho.

Así sí

  • «Muestra tu pase antes de pagar.»
  • «Falta la foto del ticket para sumar 4 puntos.»
  • «Tu próxima ventaja está cerca.»
  • «Una ciudad sabe mejor cuando la compartes.»

Así no

  • «Proceda a la validación de su acreditación digital.»
  • «¡¡Consigue MEGA descuentos increíbles!!»
  • «Operación pendiente de conciliación documental.»
  • «Ahorra un 10 % garantizado en todos los comercios.»

Las tres etiquetas de honestidad

Tarifas propuestas

Precios y regla de puntos mientras sean hipótesis. Se leen de la configuración, nunca se escriben a mano.

Datos de demostración

Comercios, fotos, opiniones y cifras inventadas. Las opiniones sembradas dicen «Opinión de ejemplo».

Fase futura

Lo que aún no existe para el público: rutas, pase para visitantes, datos de turistas.

10 · Accesibilidad

Que lo pueda usar cualquiera, con prisa y en la calle.

  • Texto con contraste mínimo de 4,5:1; iconos y bordes informativos, 3:1.
  • Zonas táctiles de 44 px como mínimo; el teclado de importe del comercio, 56 px.
  • Foco visible con anillo dorado de 2 px en todo lo interactivo.
  • Nada depende sólo del color: los estados llevan texto e icono.
  • Se respeta «reducir movimiento»; no hay animación que bloquee la lectura.
  • Cinco idiomas: español, inglés, alemán, italiano y francés. Los titulares se prueban en alemán.

El detalle técnico (tokens, rutas y decisiones) está en docs/DESIGN.md del repositorio. Las láminas de partida, en docs/design/laminas/.