Visual identity Gamble Hub

1) Brand essence and principles

Image: Technological, honest, reliable, data-driven and responsible.
Tone: reserved and competent; without "gambling" hyperbole.
Principles: readability> decorations, default availability, consistency between products.

2) Logo: structure and use

2. 1 Options

Main (horizontal): sign + word Gamble Hub.
Compact (sign): for favicon/avatars.
Vertical: for narrow areas.

2. 2 Structure and security area

8px grid. Guard area = height of the capital G around the perimeter.
Minimum size: 18 mm wide; screen - 120 px.
You cannot change proportions, skew, add effects/gradients from outside the palette.

2. 3 Background

On a light background - a color logo.
On complex/photo - monochrome (white/black) on a plate 8-12 px rounds.
On the dark - inverted.

3) Color system (tokens)

3. 1 Basic Palette

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 Gradients (optional)

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

3. 3 Contrast and states

Primary button: background '# 2F6BFF', white text, hover '# 1E54F0', disabled 40% alpha.
Text contrast ≥ 4. 5:1 (AA). For inversion - ≥ 3:1 for large.

4) Typography

Titles: Inter/SF Pro/system, fat content 600-700.
Text: Inter 14-16 px, line-height 1. 5.
Code/mono: JetBrains Mono or system mono.
Hierarchy: H1 32/40, H2 24/32, H3 20/28, Body 16/24, Caption 12/16.
Do not use decorative fonts for the interface.

5) Grid, indents and radii

Grid: 8px; containers with max-width 1120-1280 px.
Cards: internal indents 16-24 px, inter-cards - 16 px.
Radii: 8/12/16 px; default 12 px, for 8 px buttons.
Тени: `0 1px 2px rgba(0,0,0,.08)` (sm), `0 4px 12px rgba(0,0,0,.10)` (md).

6) Iconography and illustrations

Grid of icons 24 × 24, line 1. 75-2px, rounds matched.
Semantics is primary, color is secondary (color changes over states).
Illustrations: flat, without "casual" symbols (chips/cards - only in neutral info materials and in moderate, non-incentive contexts).

7) Images and photos

Topics: technology, data, security, team.
Avoid jackpot/confetti clichés.
Above the photo is a gradient/dark plate for text contrast (at least 60% opacity in the dark part).

8) Dark and light themes

Dark: background '# 0E1116', text '# E6E8EB', borders' # 2A2F37 '.
Accents retain contrast (primary brightens by 8-12%).
Graphics: the background is 2 steps lighter than the background, the grid is muffled, the captions are contrasting.

9) Availability (A11y)

AA/AAA contrast; focus styles cannot be removed.
Text alternatives at the logo and significant images.
The minimum click size is 40-48 px.
Respect'prefers-reduced-motion '- reduce/disable animations.

10) Tone and micro-copywriting

Short, exactly, without jargon.
Errors explain what to do to the user.
Units and formats: dates in the user locale, in the interface - ISO when entering, currencies with a code (EUR, USD).
Do not use "gambling" metaphors in grocery messages.

11) Token examples (JSON and 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) Components and states (UI examples)

Primary button: primary-600 background, text # FFF, hover primary-700, disabled 40% alpha.
Badges: success/warning/critical with readable text and an icon.
Card: BG Base background, sm shadow, md radius, 16 px header, 16-24 px body.

13) Animation and motion

Transitions 120-200 ms, 'ease-in-out' curve.
Animations - only 'transform '/' opacity'.
For critical states - without animations (do not distract).

14) Social media, presentations, e-mail

Avatars/icons: sign on the primary-600 die, indents 12-16 px.
Slides: light/dark background, 8px grid, H1 40-48, content 18-24.
E-mail: HTML template 600-720 px width, system fonts/Inter, buttons ≥ 44 px height, dark theme is taken into account.

15) Printing, merch and exterior

CMYK color profile, Pantone equivalents agree with the printing house.
Keep the minimum size of the logo and radii.
Paper - matte, avoid "screaming" varnishes; embossing is acceptable for the mark.

16) Legal Markups and Responsible Play

Logo with the ®/™ sign if necessary (urd. country).
Disclaimers and age restrictions - in the lower zone of the layouts; readability AA.
Do not use identity in content that encourages excessive behavior.

17) Localization and RTL

Logo symbol/word is not translated.
Text blocks - in resources; RTL support (arrow/icon mirroring).
Consider line lengths in German/Turkish/Arabic for layouts.

18) Do / Don’t

• Maintain contrast, guard zones, font hierarchy, 8px grid.
• Check visibility in photos/videos; use a die.
• Follow the tokens - no "random" colours.

• Stretch/mow the logo, apply shadows/strokes "for beauty."
• Use "gambling" images as a background in products.
• Mix non-standard fonts, break contrast or remove focus.

19) Assets, naming and versions

Naming: '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/`.
Formats: SVG for logos/icons; PNG/WebP for screens; PDF for printing.
Versioning: SemVer for token/icon pack; changelog with 'added/changed/deprecated/removed'.
Source of truth: → build token repository for web/iOS/Android.

20) Quality control and process

Brand Review in PR: Checking tokens and contrast.
A/B for controversial background images (readability/conversion).
Linter: prohibiting colors outside tokens, checking alt-text for images.
Quarterly audit: palette/typography/icon pack consistency.

21) Templates

Keynote/Slides: title, section, content, "data/chart," final.
Social media: 1:1 avatar, 16:9 banner, stories 9:16.
E-mail: greeting, CTA, notification, digest.

Landing: hero block, 3 perks, showcase, CTA, basement

22) Application checklist

• Logo: correct option, security zone, contrast, size.
• Colors: tokens only; AA contrast.
• Fonts: hierarchy, line by line, target sizes.
• Icons: grid 24 × 24, uniform line thickness.
• Images: valid themes, text readability on top.
• Dark/Light Theme: Verified, no artifacts.
• Localization/RTL: Lines do not "break" the layout.
• Legal/Responsible Gaming markups are present.

23) Implementation plan (3 iterations)

• Logos, palette, typography, basic tokens, a set of icons 24 × 24 (main 40-60 pcs.), Presentation templates and e-mail.

• Dark theme, UI components on tokens (buttons, cards, tables), guide for graphs, social media pack, landing page.

• Expanded icon pack, illustrations, printed layouts, linter/CI for tokens, regular brand audits.

24) Mini-FAQ

Is it possible to repaint the logo for a special action?
Only in approved seasonal themes and without violation of contrast/security zone.

What is primary - tokens or layout?
Tokens. The layout must use system color/indentation/typography variables.

How to act in controversial cases?
Open the RFC in the identity repository, attach examples, conduct a Brand Review.

Total

Gamble Hub identity is not a "picture set," but a system: logo, palette, typography, icon pack, tokens and quality control processes. Follow the rules of contrast, availability and consistency, use tokens and templates - and the brand will be recognizable, modern and unified in all products and channels.