# High5games Design System

> High-contrast digital casino aesthetic defined by sunflower gold accents and deep obsidian surfaces, anchored by heavy-weight Roboto typography.

**Source:** https://high5games.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
High5games utilizes a high-voltage "Midnight and Gold" palette to evoke the atmosphere of a premium casino floor. The system relies on a deep black foundation (`#000000`) and dark navy surfaces (`#20202c`) to make its primary Sunflower gold (`#fec014`) and Amber (`#efa31c`) accents pop. Typography is strictly functional, using **Roboto** across all UI layers, frequently at maximum weights (700-900) for headings and interactive elements. Component geometry favors a mix of sharp 0px corners for layout containers and soft 10px to 50px radii for interactive pills and buttons.

## Signature DNA
1. **Sunflower on Obsidian** (The primary visual driver is the high-contrast pairing of `#fec014` buttons and text against `#000000` backgrounds, seen on the Homepage and About pages).
2. **Heavy-Weight Roboto** (The system avoids light weights, favoring `900` weight for primary buttons and `700` for section titles to maintain a bold, high-impact presence).
3. **Inset Gold Glows** (Interactive elements frequently use inset shadows like `rgb(237, 180, 52) 0px 0px 0px 2px inset` to simulate a metallic or illuminated edge).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.black}` | `#000000` | Primary background, footer, navigation | 20 | 1 | CSS Variable: `--black` |
| `{color.white}` | `#ffffff` | Primary text, secondary button text | 222 | 1 | Computed Style |
| `{color.dark}` | `#20202c` | Card backgrounds, section surfaces | 10 | 1 | CSS Variable: `--dark` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.sunflower}` | `#fec014` | Primary CTA background, active text | 18 | 1 | CSS Variable: `--sunflower` |
| `{color.amber}` | `#efa31c` | Section headings, links, emphasis | 36 | 0.8 | Computed Style |
| `{color.gold-border}` | `#9a7100` | Button borders, decorative lines | 6 | 0.6 | Computed Style |
| `{color.gold-soft}` | `#efb433` | Secondary surfaces, hover states | 5 | 0.6 | Computed Style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| **Roboto** | 400, 500, 700, 900 | All UI, Body, Headings | N/A (Google Font) | Apache 2.0 |
| **icons** | 400 | Brand logo, social glyphs | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 65px | 64.8px | normal | 400 | Brand Logo | `span.icon.icon-Logo` |
| `{type.h1}` | 30px | 33.9px | normal | 700 | Hero/Slider Titles | `div.slider-block__title` |
| `{type.h2}` | 28px | 31.92px | normal | 900 | Section Titles | `span.title` |
| `{type.h3}` | 23px | 41.4px | normal | 700 | License/Social Titles | `div.license__title` |
| `{type.nav}` | 20px | 26px | normal | 400 | Header Navigation | `header` |
| `{type.button}` | 20px | 25px | -0.48px | 900 | Primary CTA | `a.button-with-hover.full-filled` |
| `{type.body-lg}` | 18px | 19.8px | normal | 900 | Card Titles | `div.title` |
| `{type.body}` | 16px | 16px | normal | 700 | Standard Links | `a` |
| `{type.caption}` | 12px | 33.96px | normal | 700 | Copyright/Legal | `div.copyrights` |

### Principles
1. **Bold by Default**: Interactive elements and headings use weights of 700 or 900 to ensure legibility against dark backgrounds.
2. **Tight Tracking on CTAs**: Primary buttons use negative letter spacing (-0.48px) to increase visual density.
3. **Iconic Hierarchy**: Brand icons (social/logo) are treated as display elements, often sized larger than text headings (48px-65px).

## Spacing
**Base unit:** Custom
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 5px | 18 |
| `{space.sm}` | 10px | 9 |
| `{space.md}` | 15px | 23 |
| `{space.lg}` | 20px | 12 |
| `{space.xl}` | 30px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Main layout sections, navigation | 212 occurrences |
| `{radius.sm}` | 5px | Primary buttons | `Rounded Button` |
| `{radius.md}` | 10px | Content cards, filter buttons | `Card`, `filter__button` |
| `{radius.pill}` | 50px | Large decorative panels | 18 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgba(0, 0, 0, 0.16) 0px 3px 6px 0px` | Game cards, floating surfaces | 18 occurrences |
| `{shadow.glow}` | `rgb(237, 180, 52) 0px 0px 0px 2px inset` | Button active/hover states | `Rounded Button` |
| `{shadow.nav}` | `rgba(240, 180, 51, 0.2) 0px -1px 20px 0px` | Global navigation bar | `Navigation` |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** Homepage, About
**Spec:** Background `#000000` | Text `#ffffff` | Radius `0px` | Padding `20px 0px 19px` | Shadow `{shadow.nav}`
**States observed:** Default | Hover: captured

#### Rounded Button
**Role:** Primary action (Play Now, See All)
**Pages observed:** Homepage
**Spec:** Background `{color.sunflower}` (#fec014) | Text `#000000` | Border `1px solid #9a7100` | Radius `5px` | Typography `20px/900`
**States observed:** Default | Hover: captured (inset shadow)

### Tier 2: Patterns

#### Card
**Role:** Game library items and feature blocks
**Pages observed:** Homepage
**Spec:** Background `rgba(32, 32, 44, 0.9)` | Text `#ffffff` | Radius `10px` | Padding `21px 20px 29px`
**States observed:** Default | Hover: not captured

#### Filter Button
**Role:** Category selection in Game Library
**Pages observed:** Homepage
**Spec:** Background `#000000` | Text `#ffffff` | Border `1px solid #ffffff` | Radius `10px` | Typography `20px/700`
**States observed:** Active: captured (Background `#fec014`, Text `#000000`)

### Tier 3: Surface-specific

#### Footer
**Role:** Corporate information and licensing
**Pages observed:** Homepage, About
**Spec:** Background `#000000` | Text `#ffffff` | Padding `30px` | Typography `12px/700`
**States observed:** Default

#### License Plate
**Role:** Regulatory and partner logo display
**Pages observed:** Homepage, About
**Spec:** Background `transparent` | Border `0px` | Radius `0px` | Shadow `{shadow.card}`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max-width | Not captured in source |
| Section Gap | 100px |
| Grid | Flex-based game grid (5-up desktop) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation converts to hamburger menu; Game grid shifts to 2-up or carousel. |

## Imagery & decoration
High5games utilizes high-fidelity game art (e.g., "Blazing Stampede") as the primary visual content. Backgrounds often feature subtle patterns like the repeating diamond/heart motif in the "Our Solutions" section. The brand avoids flat illustrations, opting for photographic or 3D-rendered game assets.

## Do's
- Use `#fec014` for all primary "Call to Action" buttons.
- Set headings to Roboto weight `700` or `900`.
- Apply `{shadow.card}` to all game tiles to provide depth on dark backgrounds.
- Maintain a `0px` border radius for global navigation and footer bands.
- Use `#ffffff` for body text on dark backgrounds to ensure maximum legibility.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper theme) for primary brand actions. **Right:** Use `{color.sunflower}`. **Reason:** Swiper blue is a library default, not a brand token.
- **Wrong:** Applying light weights (300 or less) to Roboto in headings. **Reason:** The brand identity requires high-impact, heavy typography.
- **Wrong:** Using white backgrounds for main content sections. **Reason:** The "Midnight" aesthetic requires `#000000` or `#20202c` surfaces.

## Similar brands
- PokerStars
- DraftKings
- MGM Grand Digital
- 888 Casino

## Quick start

### CSS Custom Properties
```css
:root {
  --color-black: #000000;
  --color-dark: #20202c;
  --color-sunflower: #fec014;
  --color-amber: #efa31c;
  --shadow-card: rgba(0, 0, 0, 0.16) 0px 3px 6px 0px;
  --radius-sm: 5px;
  --radius-md: 10px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #fec014;
  --color-surface: #000000;
  --color-surface-alt: #20202c;
  --font-sans: "Roboto", sans-serif;
  --shadow-glow: inset 0 0 0 2px #edb434;
}
```

## Agent prompt examples
- "Create a primary CTA button using Roboto Black (900), Sunflower Gold background, and a 5px border radius."
- "Design a game card component with a dark navy background (#20202c), 10px corner radius, and a subtle drop shadow."
- "Generate a section header using Roboto Bold (700) in Amber (#efa31c) text."

## Known gaps
- Specific grid container max-widths were not explicitly captured in the computed styles.
- Success and Error semantic tokens were not present on the analyzed marketing pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://high5games.com | 1440px | 2026-06-06 |
| About | https://high5games.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://high5games.com | 390px | 2026-06-06 |