ZondaScore — guía de marca
SEGUÍ A TU CLUB
Guía de identidad visual de ZondaScore. Todo lo que ves en esta página usa los mismos tokens que la app: cambiá el tema y los dos mundos se mueven juntos.
Logo
Una Z de dos cintas —el viento Zonda— sobre el cuadrado naranja. El nombre va en Archivo 900 inclinada: “Zonda” en blanco y “Score” en naranja.
Dejá alrededor del logo al menos ¼ del ancho del símbolo. Nada de texto, bordes ni imágenes dentro de esa zona.
- Símbolo: 16 px de ancho (favicon 32 px).
- Logo horizontal: 96 px de ancho.
- Impreso: símbolo 8 mm · horizontal 25 mm.
- Estirar, rotar o inclinar el símbolo.
- Cambiar el naranja del cuadrado o separar las dos cintas de la Z.
- Poner el logo sin su cuadrado sobre fotos o fondos naranjas.
- Agregar sombras, brillos o contornos.
Color
Un solo color de marca —Naranja Zonda— sobre una base azul noche (Zonda Dark). El naranja se usa con intención: lo vivo, lo seleccionado, lo que podés tocar.
500 es el color de marca (relleno de botones, puntos, badges). 600 estados presionados · 400 hover · texto oscuro sobre relleno naranja.
| Token | Oscuro | Contraste | Claro | Contraste | Uso |
|---|---|---|---|---|---|
| Texto --text | #FFFFFF | 18.9:1 AAA | #0B0C10 | 19.5:1 AAA | Títulos, marcadores, datos clave |
| Texto 2 --text-2 | #C5CAD6 | 11.5:1 AAA | #2A2E3A | 13.5:1 AAA | Cuerpo y listas |
| Texto 3 --text-3 | #8A90A2 | 5.9:1 AA | #555B6B | 6.8:1 AA | Etiquetas, ayudas, metadatos |
| Texto 4 --text-4 | #646A7C | 3.5:1 AA grande | #7B8191 | 3.9:1 AA grande | Sólo decorativo: nunca para información |
| Marca (texto) --brand-text | #FF6B00 | 6.6:1 AA | #B33C0B | 5.9:1 AA | Enlaces, iconos y números de marca |
| Peligro --danger-text | #FF4438 | 5.5:1 AA | #C42B20 | 5.7:1 AA | Errores, rojas, en contra |
| Atención --warn-text | #FFC53D | 12.0:1 AAA | #8A5A00 | 5.9:1 AA | Amarillas, autogoles, avisos |
Medido contra --surface (#0F1117 / #FFFFFF). El naranja #FF6B00 sobre blanco rinde apenas 2.9:1: por eso en tema claro el texto de marca baja a #B33C0B y el naranja queda como relleno, con texto #140800 encima (6.9:1).
Tipografía
Dos familias de Google Fonts, ambas con licencia abierta. Archivo para lo que se mira de lejos (marcadores, títulos); Barlow para todo lo que se lee.
Pesos 800 y 900. Marcadores, títulos de pantalla, logotipo. Siempre tabular-nums en cifras.
Pesos 400 a 700. Cuerpo 14–16 px, etiquetas 11–12 px.
Mínimo absoluto de texto: 11 px. Nada de información importante por debajo de eso.
Componentes
Radio base 12 px. Superficies planas con borde fino; las sombras sólo para lo que flota (menús, avisos).
Alto mínimo 46 px (táctil ≥ 44). Un solo botón principal por pantalla.
Geométricos, sin emoji: se ven igual en todas las plataformas.
La letra cambia con el idioma (G/E/P · W/D/L · V/E/D) y siempre lleva etiqueta accesible.
Voz y tono
Hablamos como un hincha que sabe: directo, cálido, sin solemnidad. En español usamos voseo rioplatense.
Seguí a tu club · Tocá + para agregar tu equipo · Probá de nuevo
Follow your club · Tap + to add your team · Try again
Siga seu clube · Toque em + para adicionar seu time · Tente novamente
- Verbos de acción en los botones: Predecir, Unirme, Activar. Nunca “Aceptar” a secas.
- Los errores dicen qué pasó y qué hacer: “No pudimos guardar tu predicción. Probá de nuevo.”
- Sin mayúsculas sostenidas en frases; las MAYÚSCULAS son sólo para etiquetas cortas.
Accesibilidad
Es parte de la marca, no un extra: la app se tiene que poder usar con el sol de frente, con una mano y sin ver la pantalla.
Todo texto informativo pasa AA (4.5:1) en ambos temas. El color nunca es la única señal: las tarjetas llevan forma y etiqueta.
Todo es operable con teclado, con anillo de foco visible (2 px, color de marca) y enlace “Saltar al contenido”.
Objetivos de al menos 44 × 44 px en navegación y acciones principales.
Pestañas, interruptores y menús con roles ARIA; los goles nuevos se anuncian en una región en vivo.
Se respeta “reducir movimiento”: animaciones y parpadeos se apagan.
Español, inglés y portugués; el atributo lang del documento sigue a la elección.
Archivos
Todo se regenera con npm run brand:build a partir de public/logo.svg: una sola fuente de verdad.
