# Fury Gaming — Brand Guidelines

**System name:** FORGE · **Version:** 1.0 · **Forged:** 2026 · **Home:** furygaming.tv

> Every surface has a temperature. Cold is idle. Hot is alive.

Fury Gaming is a community tempered in competition: a platform for players and teams who run hot. This system gives the brand the thing it never had. One mark, one temperature, built for the screen and the scene.

---

## 1. The idea

The name does the work. *Fury* means heat, force, and ignition, so the whole identity is built on the physics of heat. The accent color is not a swatch, it is a temperature. Where a thing sits on the scale tells you its state: cold ash for idle, white-hot for live and winning.

This keeps the brand **stark** (graphite, sharp structure) and **warm** (an incandescent ramp from ember to white-hot) at the same time, and it stays a step away from the usual neon gamer cliché.

**Heritage kept, gloss retired.** The 2014 mark was a glossy, beveled flame crest built for print, with no color or type system. We kept what was true (fire, the crest, the cut) and rebuilt the rest as a system.

---

## 2. Logo

### The Fury flame
The original flame-crest, **kept line for line** and rebuilt as clean vector. The cool half is recolored to bone so it reads on dark, the fire is the incandescence ramp, and the muddy navy is retired. Same flame, screen-first palette. It holds as one color, scales to a 16px favicon, and serves as the crest for every team and chapter.

| Asset | File | Use |
|---|---|---|
| Flame, bone + fire | `fury-mark.svg` | Primary, on dark |
| Flame, for light bg | `fury-mark-light.svg` | Navy + fire, on light surfaces |
| Flame, one-color | `fury-mark-fury.svg` | Single Fury-orange; favicon, print |
| Flame, one-color (inherit) | `fury-mark-mono.svg` | Inherits `currentColor` |
| Flame, incandescent | `fury-mark-incandescent.svg` | All-warm alt colorway |
| Avatar | `fury-avatar.svg` | Profile pictures, app icon |
| Lockup, horizontal | `fury-lockup.svg` | Default brand lockup (flame + wordmark) |
| Wordmark | `fury-wordmark.svg` | Type-only contexts |

**Treatments and extra colorways** (same geometry, different finish):

| Asset | File | Use |
|---|---|---|
| Gradient molten | `fury-mark-gradient.svg` | Featured / hero / live moments. The single-fill glowing flame. |
| Molten (deep) | `fury-mark-molten.svg` | Richer, deeper gradient alternate |
| Line-art | `fury-mark-outline.svg` | Watermarks, overlays, embossing, single-line contexts |
| Amber | `fury-mark-amber.svg` | Softer, warmer colorway |
| Crimson | `fury-mark-crimson.svg` | Aggressive, red-forward colorway |
| Mono white-hot | `fury-mark-white.svg` | Clean one-color on dark |
| Hex crest | `fury-badge-hex.svg` | Esports / team crest container |
| App icon | `fury-badge-app.svg` | Squircle app / store icon |
| Favicon glyph | `fury-favicon.svg` | **Simplified** flame for ≤24px (favicon, pinned tab). The full flame loses detail this small; use this instead. |

**One-color heat solids** — the whole flame as a single ink, run along the temperature scale. Each is one seam-free path (sub-paths merged + matched stroke) so it stays perfectly uniform at any size, on any background.

| Asset | File | Temperature |
|---|---|---|
| Ash · idle | `fury-mark-ash.svg` | cold / idle |
| Deep | `fury-mark-deep.svg` | ember |
| Ember | `fury-mark-ember.svg` | forge |
| Fury | `fury-mark-fury.svg` | live (primary one-color) |
| Amber | `fury-mark-amber-solid.svg` | active |
| Gold | `fury-mark-gold.svg` | winning |
| Bone | `fury-mark-bone.svg` | calm / on dark |
| White-hot | `fury-mark-white.svg` | hottest, on dark |
| Black | `fury-mark-black.svg` | one-color on light |
| currentColor | `fury-mark-mono.svg` | inherits text color anywhere |

**Glow** (the incandescent halo, for live / hero moments):

| Asset | File | Use |
|---|---|---|
| Glow · live | `fury-mark-glow.svg` | Fury-orange halo. Default "live" treatment. |
| Molten glow | `fury-mark-glow-molten.svg` | Gradient flame + halo. Hero / featured. |
| Crimson glow | `fury-mark-glow-crimson.svg` | Deep-red halo, aggressive moments. |
| White glow | `fury-mark-glow-white.svg` | White-hot halo on dark. |

> **One-color marks are seam-free.** The crest is built from overlapping sub-paths; filled as a single ink they used to show faint anti-alias hairlines (most visible on the all-white version). The one-color files above merge those sub-paths into one path with a matched stroke, so there is zero miscoloration. Recolor only by swapping the single fill — never re-introduce separate sub-path fills for a one-color mark.

### Colorways
Run **bone + fire** on dark, **navy + fire** on light, and **one-color** anywhere a single ink is needed. Never recolor outside the temperature scale.

### Clear space and minimum size
Keep clear space on all sides equal to the width of the flame's banded body. Minimum sizes: flame 16px, lockup 120px wide.

### Do
- Give it room. Keep clear space around the whole flame.
- Run bone + fire on dark, navy on light, one-color anywhere.
- Let the flame be the hero and keep the wordmark calm.

### Don't
- Re-add bevels, gloss, or drop shadows.
- Recolor it outside the temperature scale.
- Stretch, squash, rotate, or crowd it.

---

## 3. Color

Color is a **single temperature scale**, not a palette of accents.

### Grounds (warm ash, never pure black)
| Token | Hex |
|---|---|
| `--ash-900` | `#0A0A0C` |
| `--graphite-700` | `#15161A` |
| `--graphite-600` | `#1E2026` |
| `--iron-500` | `#2A2D34` |
| `--bone-100` (text) | `#ECE7DF` |
| `--white-hot` | `#FFF8F0` |

### Incandescence ramp
`#3A0E07` · `#7A1E0A` · `#B83210` · `#E0480F` · **`#FF6A1A` (Fury Orange, primary)** · `#FF8A2B` · `#FFA638` (amber) · `#FFC766` · `#FFE0A6` · `#FFF3DC` (white-hot)

### State equals temperature
| State | Color |
|---|---|
| Live | `#FF6A1A` |
| Active | `#FF8A2B` |
| Idle | `#3A3E47` |
| Danger | `#7A1E0A` |
| Success | `#FFA638` |
| Info / cooled | `#2BA8C7` (the one cool tone, used sparingly) |

Run a WCAG AA contrast check on text pairs. Bone on ash and white-hot on graphite both pass for body text.

---

## 4. Typography

Three voices, each with one job.

- **Display: Archivo (Black, Expanded).** Wide and heavy for impact and the wordmark. A deliberate move away from the condensed esports default.
- **Utility: Martian Mono.** A mechanical mono for labels, data, readouts, and the spaced "GAMING" line. This is the instrument-of-the-forge voice.
- **Body: Hanken Grotesk.** A warm, clean grotesque for everything you actually read.

Set display huge and tight. Keep body calm so the heat lands where it matters.

---

## 5. Motion

One easing does most of the work: `--ease-ignite` `cubic-bezier(0.16, 0.84, 0.24, 1)`, a fast catch and a slow settle, like a flame taking.

- **Ignite (load):** the mark heats from ash to incandescent, then the wordmark letters light in.
- **Hover:** heat rises at the edges, and cools on leave.
- **Scroll:** sections ignite on entry, and the heat ramp doubles as scroll progress (cold at the top, hot at the call to action).

Reduced motion is honored everywhere. Embers stop, the load is instant, and every state still reads.

---

## 6. Voice

Plain, sharp, and warm. We talk like a team that has each other's backs, not a brand shouting in all caps.

| Moment | Say |
|---|---|
| Call to action | "Run with us." |
| Empty state | "No matches yet. Your next one starts here." |
| Error | "That didn't connect. Check your link and try again." |
| Win | "Tempered. That round was yours." |

Tone in three words: **warm, direct, relentless.**

---

## 7. Files and hosting

Everything ships as static assets, ready for **Cloudflare Pages** (no server needed).

- Logos: `assets/logo/*.svg`
- Tokens: `tokens/tokens.css` (custom properties) and `tokens/tokens.json`
- The interactive guidelines: `index.html` (the living version of this document)

The CSS custom properties in `tokens.css` are the same variables that power the brand site, so the design system and the product never drift apart.