Identidad visual Gamble Hub

1) La esencia de la marca y los principios

Imagen: tecnológica, honesta, confiable, centrada en los datos y la responsabilidad.
Tono: discreto y competente; sin hipérbola de «juego».
Principios: legibilidad> decoraciones, disponibilidad predeterminada, consistencia entre productos.

2) Logotipo: estructura y uso

2. 1 Opciones

Principal (horizontal): signo + palabra Gamble Hub.
Compacto (signo): para favicones/avatares.
Vertical: para sitios estrechos.

2. 2 Construcción y área de protección

Cuadrícula 8px. Zona de protección = altura del perímetro G mayúscula.
Tamaño mínimo: impresión - 18 mm de ancho; pantalla - 120 px.
No se pueden cambiar las proporciones, inclinar, agregar efectos/degradados fuera de la paleta.

2. 3 En el fondo

En el fondo claro - logotipo de color.
En el complejo/foto - monocromático (blanco/negro) en el troquel 8-12 px redondeo.
En el oscuro - invertido.

3) Sistema de color (tokens)

3. 1 Paleta básica

Primary / Indigo 600: `#2F6BFF`

Primary Dark / Indigo 700: `#1E54F0`

Success / Green 600: `#2EAE60`

Warning / Orange 600: `#FF9F1A`

Critical / Red 600: `#E53935`

FG Primary: `#11131A`

FG Muted: `#656D76`

BG Base: `#FFFFFF`

BG Subtle: `#F7F8FA`

BG Inverse: `#0E1116`

3. 2 Gradientes (opcional)

Brand Gradient: 'linear-gradient (135deg, # 2F6BFF 0%, # 1E54F0 50%, # 2EAE60 100%)' - usar dosificado.

3. 3 Contraste y estados

Botón primario: fondo '# 2F6BFF', texto blanco, hover '# 1E54F0', disabled 40% alfa.
Contraste de texto ≥ 4. 5:1 (AA). Para la inversión - ≥ 3:1 para el grande.

4) Tipografía

Titulares: Inter/SF Pro/sistema, negrita 600-700.
Texto: Inter 14-16 px, line-height 1. 5.
Código/mono: JetBrains Mono o mono del sistema.
Jerarquía: H1 32/40, H2 24/32, H3 20/28, Body 16/24, caption 12/16.
No utilice fuentes decorativas para la interfaz.

5) Cuadrícula, sangría y radios

Cuadrícula: 8px; contenedores con max-width 1120-1280 px.
Tarjetas: sangría interna 16-24 px, intercárdica - 16 px.
Radios: 8/12/16 px; por defecto 12 px, para los botones 8 px.
Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Iconografía e ilustraciones

Malla de iconos 24 × 24, línea 1. 75-2px, redondeos acordados.
La semántica es primaria, el color es secundario (el color cambia según los estados).
Ilustraciones: planas, sin simbología «casual» (fichas/mapas - sólo en materiales de información neutra y en contextos moderados, no alentadores).

7) Imágenes y fotos

Temas: tecnología, datos, seguridad, equipo.
Evitar los clichés «jackpots/confeti».
En la parte superior de la foto hay un dados degradado/oscuro para contrastar el texto (un mínimo del 60% de opacidad en la parte oscura).

8) Temas oscuros y ligeros

Oscuro: fondo '# 0E1116', texto '# E6E8EB', límites '# 2A2F37'.
Los acentos mantienen el contraste (primary light en 8-12%).
Gráficos: el fondo es 2 pasos más claro que el fondo, la cuadrícula es silenciada, las firmas son contrastantes.

9) Accesibilidad (A11y)

Contraste AA/AAA; estilos de enfoque no limpiar.
Alternativas de texto en el logotipo y las imágenes significativas.
El tamaño mínimo del clic es 40-48 px.
Respetar 'prefers-reduced-motion' - animaciones para bajar/desactivar.

10) Tono y microcopiraiting

Corto, seguro, sin jerga.
Los errores explican qué hacer al usuario.
Unidades y formatos: fechas en el local del usuario, en la interfaz - ISO al ingresar, monedas con código (EUR, USD).
No utilice metáforas de «juego» en los mensajes de productos.

11) Ejemplos de tokens (JSON y CSS)

json
{
"color": {
"primary": { "600": "#2F6BFF", "700": "#1E54F0" },
"success": { "600": "#2EAE60" },
"warning": { "600": "#FF9F1A" },
"critical": { "600": "#E53935" },
"fg": { "primary": "#11131A", "muted": "#656D76" },
"bg": { "base": "#FFFFFF", "subtle": "#F7F8FA", "inverse": "#0E1116" }
},
"radius": { "sm": 8, "md": 12, "lg": 16 },
"shadow": { "sm": "0 1px 2px rgba(0,0,0,.08)", "md": "0 4px 12px rgba(0,0,0,.10)" },
"font": { "family": "Inter, system-ui", "size": { "body": 16, "h1": 32, "h2": 24, "h3": 20 } }
}

css
:root {
--gh-color-primary-600:#2F6BFF; --gh-color-primary-700:#1E54F0;
--gh-color-success-600:#2EAE60; --gh-color-warning-600:#FF9F1A; --gh-color-critical-600:#E53935;
--gh-fg-primary:#11131A; --gh-fg-muted:#656D76;
--gh-bg-base:#FFFFFF; --gh-bg-subtle:#F7F8FA; --gh-bg-inverse:#0E1116;
--gh-radius-sm:8px; --gh-radius-md:12px; --gh-radius-lg:16px;
--gh-shadow-sm:0 1px 2px rgba(0,0,0,.08); --gh-shadow-md:0 4px 12px rgba(0,0,0,.10);
--gh-font-body:16px/1. 5 "Inter", system-ui;
}

12) Componentes y estados (ejemplos de UI)

Botón Primario: fondo primario-600, texto # FFF, hover primary-700, disabled 40% alfa.
Etiquetas: success/warning/critical con texto legible e icono.
Tarjeta: fondo BG Base, sombra sm, radio md, cabeza 16 px, cuerpo 16-24 px.

13) Animación y movimiento

Transiciones 120-200 ms, curva 'ease-in-out'.
Animaciones - sólo 'transformación '/' opacity'.
Para estados críticos - sin animaciones (no distraer).

14) Socimedia, presentaciones, e-mail

Avatares/iconos: signo en el dados primario-600, sangría 12-16 px.
Diapositivas: fondo claro/oscuro, cuadrícula 8px, H1 40-48, contenido 18-24.
E-mail: plantilla HTML 600-720 px de ancho, fuentes del sistema/Inter, botones ≥ 44 px de alto, tema oscuro se tiene en cuenta.

15) Impresión, medición y exterior

Perfil de color CMYK, equivalentes de Pantone para alinear con la tipografía.
Tamaños mínimos de logotipo y radios para guardar.
El papel es mate, evitar los barnices «gritando»; el relieve es válido para el signo.

16) Marcas legales y juego responsable

Logo con un signo de ®/™ si es necesario (Yurd. país).
Disclamers y límites de edad: en la zona de diseño inferior; legibilidad AA.
No utilizar la identidad en contenidos que fomenten comportamientos redundantes.

17) Localización y RTL

El signo/slovoobraz de la marca de fábrica no se traduce.
Bloques de texto - en recursos; compatibilidad con RTL (duplicación de flechas/iconos).
Tenga en cuenta las longitudes de las filas en alemán/turco/árabe en los diseños.

18) Do / Don’t

• Mantenga el contraste, las zonas de seguridad, la jerarquía de fuente, la cuadrícula 8px.
• Compruebe la visibilidad en la foto/vídeo; use un drastro.
• Siga los tokens - sin colores «aleatorios».

• Estirar/cortar el logotipo, aplicar sombras/trazos «para la belleza».
• Utilizar imágenes de «juego» como telón de fondo en los productos.
• Mezclar fuentes no estándar, romper el contraste o quitar el foco.

19) Assets, Neuming y versiones

Neyming: 'gh-logo-hz-color. svg`, `gh-logo-vt-mono-white. svg`, `gh-icon-24-alert. svg`.
Пакеты: `/brand/logos/`, `/brand/icons/24/`, `/brand/templates/`, `/brand/fonts/`.
Formatos: SVG para logotipos/iconos; PNG/WebP para rastros; PDF para imprimir.
Versioning: SemVer para el paquete de tokens/iconos; chainjlog con 'added/changed/deprecated/removed'.
Fuente de la verdad: repositorio de tokens → compilación para web/iOS/Android.

20) Control de calidad y proceso

Brand Review en PR: verificación de tokens y contraste.
A/B para imágenes de fondo controvertidas (legibilidad/conversión).
Linter: prohibición de colores fuera de tokens, verificación de texto alt para imágenes.
Auditoría trimestral: consistencia de paleta/tipografía/iconpac.

21) Plantillas

Keynote/Slides: título, sección, contenido, «datos/gráfico», final.
Socimedia: 1:1 avatar, pancarta 16:9, historias 9:16.
E-mail: saludo, CTA, notificación, resumen.
Landing: bloque de chero, 3 ventajas, escaparate, CTA, sótano.

22) Check-list de aplicación

• Logotipo: versión fiel, zona de seguridad, contraste, tamaño.
• Colores: sólo tokens; el contraste de AA.
• Fuentes: jerarquía, interlínea, dimensiones de targets.
• Iconos: malla 24 × 24, espesor de línea único.
• Imágenes: tema válido, legibilidad del texto en la parte superior.
• Tema oscuro/ligero: probado, sin artefactos.
• Localización/RTL: las cadenas no «rompen» el diseño.
• Las marcas legales/Responsables Gaming están presentes.

23) Plan de implementación (3 iteraciones)

• Logotipos, paleta, tipografía, fichas básicas, conjunto de iconos 24 × 24 (40-60 piezas principales), plantillas de presentación y correo electrónico.

• Tema oscuro, componentes de UI en tokens (botones, tarjetas, tablas), hyde para gráficos, paquete social, patrón de landing.

• Iconpac avanzado, ilustraciones, diseños impresos, linter/CI para tokens, auditorías de marca regulares.

24) Mini preguntas frecuentes

¿Es posible volver a pintar el logotipo como una promoción especial?
Sólo en temas estacionales aprobados y sin alterar el contraste/zona de protección.

¿Qué son los tokens primarios o el diseño?
Tokens. El diseño está obligado a utilizar variables de color/sangría/tipografía del sistema.

¿Cómo actuar en casos controvertidos?
Abrir RFC en el repositorio de identidad, adjuntar ejemplos, realizar una revisión de marca.

Resultado

Identica Gamble Hub no es un «conjunto de imágenes», sino un sistema: logotipo, paleta, tipografía, iconpack, tokens y procesos de control de calidad. Siga las reglas de contraste, disponibilidad y consistencia, use tokens y plantillas, y la marca será reconocible, moderna y unificada en todos los productos y canales.