# Apollogames Design System

> High-contrast cosmic architecture defined by heavy DIN-2014 typography and deep navy voids punctuated by electric blue accents.

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

## TL;DR
Apollogames utilizes a "monochrome" foundation that leans heavily into a dark, cinematic palette of deep navy (#0c132b) and royal blue (#3740d9). The system is anchored by the **din-2014** typeface, specifically at an ultra-bold weight of 800 for display headings to create a sense of industrial authority. Interaction is defined by pill-shaped "Rounded Buttons" with 50px radii and generous 75px horizontal padding, often rendered as white outlines against dark backgrounds. The layout uses a custom spacing scale (base units of 25px and 35px) to maintain a spacious, premium feel across game showcases and corporate sections.

## Signature DNA
1. **Heavyweight DIN-2014** (The use of weight 800 for all major headings creates a rigid, technical aesthetic that contrasts with the fluid cosmic backgrounds. Seen on all analyzed pages.)
2. **The 50px Pill** (A consistent 50px border radius is applied to all primary CTAs and interactive panels, softening the otherwise sharp, grid-based layout. Seen on homepage and pricing.)
3. **Deep Navy Canvas** (The primary surface is not black but a specific deep navy #0c132b, providing a softer backdrop for the electric blue #1e87f0 accents. Seen on homepage and footer.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | #ffffff | Primary text, button outlines, borders | 468 | 0.8 | computed_style |
| `{color.navy.deep}` | #0c132b | Primary section background | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.blue.electric}` | #1e87f0 | Primary accent, link text, active states | 50 | 0.8 | computed_style |
| `{color.blue.royal}` | #3740d9 | Secondary surface backgrounds | 41 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| din-2014 | 400, 600, 800 | All headings and body | Roboto Condensed | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 48px | 58px | normal | 800 | Page Hero H2 | `h2` |
| `{type.h3}` | 36px | 42px | normal | 800 | Card Titles | `h3.uk-card-title` |
| `{type.h4}` | 25px | 33px | normal | 800 | Section Subheads | `h3.uk-card-title` |
| `{type.h4.alt}` | 24px | 32px | normal | 800 | Feature Titles | `h3.uk-card-title` |
| `{type.body.lg}` | 21px | 32px | normal | 400 | Intro Paragraphs | `p` |
| `{type.body.md}` | 18px | 28px | normal | 400 | Standard Body | `p` |
| `{type.button}` | 18px | 55px | normal | 800 | CTA Labels | `a.uk-button` |
| `{type.caption}` | 16px | 24px | normal | 400 | Metadata/Small text | `section#develop` |

### Principles
- **Weight as Hierarchy:** Use weight 800 for all structural headings; weight 400 is reserved strictly for long-form prose.
- **Vertical Breathing:** Line heights for display text are generous (e.g., 58px for 48px text) to prevent heavy DIN-2014 from feeling cramped.
- **Achromatic Text:** Primary body text is almost exclusively #ffffff on dark backgrounds for maximum legibility.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 15px | 11 |
| `{space.sm}` | 25px | 50 |
| `{space.md}` | 35px | 92 |
| `{space.lg}` | 75px | 50 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, cards | 422 occurrences |
| `{radius.pill}` | 50px | Buttons, interactive panels | 48 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All cards and sections | No shadows captured in evidence |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary site-wide CTA
**Pages observed:** All
**Spec:** Background: transparent / Text: #ffffff / Border: 1px solid #ffffff / Radius: 50px / Padding: 0px 75px / Typography: 18px 800
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns
#### Surface Card
**Role:** Feature and game display
**Pages observed:** https://apollogames.com
**Spec:** Background: #3740d9 / Text: #ffffff / Border: 0px / Radius: 0px / Padding: 0px 25px / Typography: 18px 400
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Footer Container
**Role:** Global site footer
**Pages observed:** All
**Spec:** Background: #0c132b / Text: #ffffff / Border: 0px / Radius: 0px / Padding: 30px 70px 65px / Typography: 16px 400
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | Not captured in source |
| Section Padding | 35px - 75px |
| Card Gap | 25px |

## Responsive
Table: | Breakpoint | Width | Key changes |
|---|---|---|---|
| Mobile | 390px | Stacked card layouts, reduced horizontal padding |

## Imagery & decoration
The brand relies on "Cosmic Atmospheric" backgrounds featuring deep blue radial gradients and star-field textures. It avoids flat colors for large backgrounds, preferring the depth of #0c132b to #3740d9 transitions.

## Do's
- Use **din-2014 weight 800** for all titles.
- Set primary CTAs with a **50px border radius**.
- Maintain **75px horizontal padding** on primary buttons.
- Use **#ffffff** for text on all dark surface backgrounds.
- Apply **#1e87f0** for text links to ensure visibility against navy.

## Don'ts
- **Wrong:** Using #000000 for backgrounds. **Right:** Use #0c132b. **Reason:** The brand uses a navy-based monochrome system, not pure black.
- **Wrong:** Applying shadows to cards. **Right:** Use 1px borders or flat color changes. **Reason:** Evidence shows 0px shadow occurrences.
- **Wrong:** Using weight 600 for display headings. **Right:** Use weight 800. **Reason:** The signature look requires the ultra-bold DIN weight.

## Similar brands
- Razer (High-contrast, dark-mode primary)
- Alienware (Technical typography, cosmic/tech motifs)
- Ubisoft (Industrial sans-serif, dark UI)

## Quick start

```css
/* CSS Variables */
:root {
  --color-foundation-white: #ffffff;
  --color-foundation-navy: #0c132b;
  --color-accent-blue: #1e87f0;
  --color-surface-royal: #3740d9;
  
  --font-main: "din-2014", sans-serif;
  
  --radius-pill: 50px;
  
  --space-sm: 25px;
  --space-md: 35px;
  --space-lg: 75px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Apollogames style: 18px DIN-2014 weight 800, white 1px border, transparent background, and 50px border radius with 75px side padding."
- "Design a feature section with a background of #0c132b and a heading in DIN-2014 weight 800 size 48px."
- "Generate a card component with a #3740d9 background, 0px border radius, and 25px internal padding."

## Known gaps
- Hover and Active states for buttons were not captured in the computed style evidence.
- Exact max-width for the global container was not explicitly defined in the sampled pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://apollogames.com | 1440px | 2026-06-06 |
| Pricing | https://apollogames.com/pricing | 1440px | 2026-06-06 |
| About | https://apollogames.com/about | 1440px | 2026-06-06 |