Brand

Brand Overview

Legendary Arena is a competitive deck-building game where mastery — not luck — determines victory.

Players assemble a team of heroes, build synergy, and overcome escalating scenarios driven by a mastermind villain. Every decision compounds. Every card matters. The system rewards knowledge, sequencing, and execution.

This page defines the visual and interaction system that carries that identity across every surface.

Mission

To build the definitive, faithful, digital home for the greatest cooperative deck-building experience ever created — engineered to last, funded in a way that protects the vision forever, and designed to send real value back to the creators who make it possible.

Vision

Legendary Arena becomes not only a place to play, but a training ground for mastery — where excellence is measurable, replayable, and earned.

Slogan

Mastery — not luck — determines victory.

The brand in 30 seconds

Legendary Arena is the digital adaptation of the Legendary deck-building game. You recruit heroes, build synergy, and face escalating scenarios driven by a mastermind villain. There is no luck gate, no grind treadmill, no pay-to-win shortcut. The game measures how well you played — not how long or what you unlocked. A PAR-based scoring system makes skill visible, improvement measurable, and every scenario worth revisiting with intention. Every game is replayable, every score is verified, and competition is earned through demonstrated mastery.

Brand themes

Four themes define the emotional territory of Legendary Arena:

• Mastery — skill is the only currency; victory is earned
• Heroism — saving lives outweighs playing it safe; the scoring system rewards courage over caution
• Escalation — difficulty compounds; every decision echoes forward through the scenario
• Integrity — fairness is structural, not moderated; replays are deterministic, scores are transparent, and the system never lies

Emotional framework

The brand should make people feel:

• Accomplishment — “I earned this”
• Agency — “My decisions mattered”
• Respect — “This system treats me as a capable player”
• Aspiration — “I can get better at this”

The brand must never make people feel manipulated, lucky, or patronized.

Start Here

Legendary Arena’s visual identity is a token-driven design system shared across three surfaces. All styling resolves through /brand-tokens.css — no raw hex, no ad-hoc typography. This page is the single reference for using the system.

One rule: every visual value resolves through var(--la-*). The canonical source lives at docs/brand/*.md in the repo.

The Game

Legendary Arena is a digital adaptation of the Legendary deck-building game. Players assemble a team of heroes, face escalating scenarios driven by a mastermind villain, and earn standing through demonstrated mastery — not luck, not grind.

The core loop: recruit heroes, build synergy, defeat the mastermind. Every card in a player’s deck is a deliberate choice. The game rewards knowledge of card interactions and sequencing over randomness.

Four properties carry the brand across the product:

• www.legendary-arena.com — marketing, brand page, blog
• play.legendary-arena.com — live game client
• cards.barefootbetters.com — card registry and browsing
• ewiki.legendary-arena.com — engineering wiki (architecture, decisions, inventory)

The first three consume the same token system (/brand-tokens.css) so the visual language is consistent across every surface a player touches. The engineering wiki is governed by the engine monorepo and is not a brand-tokens consumer in v1.

Logo + Identity

Primary — gold on dark

Inversion — white-only

Use only when a light surface forces inversion.

Icon / favicon

Non-negotiable rules

• Do not recolor the logo
• Do not apply gradients or effects
• Do not apply class colors (--la-color-class-*) — class colors communicate gameplay role, not brand identity (see palette.md §4.4)
• Do not alter proportions

Violation weakens brand recognition immediately.

Core Identity (Narrative)

Brand voice: cinematic, mature, heroic. Direct sentences, active verbs, no irony — see strategy.md §2 for the full voice + tone rules.

Words to avoid

These terms contradict the brand’s identity and must not appear in any brand-facing copy, UI text, or marketing surface:

Positioning

Legendary Arena is a skill-driven strategy system disguised as a card game.

• Not luck-driven
• Not grind-based
• Not collection-gated

Victory is earned through system mastery. The scoring system measures how well a game was played — never how long, how often, or what was unlocked.

Identity colors

Three colors define brand recognition — constraint is intentional:

• Gold — achievement, recognition, victory
• Maroon (deep, not cherry) — action, CTAs, decisive moments
• Navy (deep, not royal) — system, structure, navigation

Additional color reduces signal strength.

Class colors are gameplay-only. The five class tokens (--la-color-class-{strength,covert,instinct,ranged,tech}) identify a hero’s gameplay class on chips, filters, deck-builder, and class borders — never brand surface, never CTA, never logo. They appear inside the §Color System collapsible with the gameplay-only annotation.

Card Graphics

The game’s visual vocabulary includes three icon families used on cards, filters, and the deck-builder UI. All icons are SVG, designed to read clearly at 24px and scale to 64px+.

Card typography

Two fonts appear on cards and card-adjacent UI. These are game-specific — separate from the web token system’s three locked families (Bebas Neue / Inter / JetBrains Mono).

Bangers — all 40 card-set SVGs reference this font for the expansion abbreviation text. Bold, comic-style letterforms that stay legible at small icon sizes.

Eurostile Condensed — the closest match to the physical card’s title and body text. Clean, technical condensed weight that carries the card UI’s precise feel.

Neither font is part of brand-tokens.css — they live in the game asset pipeline, not the cross-site token contract.

Hero classes (5)

Each hero belongs to one of five gameplay classes. Class icons appear on hero cards, filter chips, and class-border treatments. Class colors are gameplay-only — see §Core Identity.

Hero teams (25)

Team icons identify hero affiliations — Avengers, X-Men, Guardians of the Galaxy, etc. They appear on hero cards and team-filter UI.

Card sets (40)

Set icons identify which expansion a card belongs to. They appear on card faces and in set-filter dropdowns.

All 40 card-set icons

Why This System Exists

The brand system enforces four properties:

• Consistency — one visual language across all surfaces
• Scalability — new features inherit design automatically
• Velocity — design decisions are pre-encoded in tokens
• Integrity — brand cannot drift over time

The token layer is not styling — it is governance encoded as code.

Color System

Visual summary first; the full per-mode spec (with class colors) lives in the collapsible below.

How to think about color

Palette reference (light + dark)

Visual summary

Identity (brand-recognition surfaces)

Action (CTA / interactive)

System (surface / text)

System colors must never compete with identity colors.

--la-color-cta is mode-stable at #7a1d1f (~10.4:1 contrast on white text in both modes — AAA). --la-color-blue-bright carries interactive affordance; the deeper --la-color-blue base reads decorative on its own (see palette.md §4.3).

Typography System

Three locked families carry the type system. The display face is used sparingly for hero / H1 / H2 only; body is the default for everything readable; mono is reserved for code, registry, and card-stat surfaces.

Bebas Neue — display

Condensed, high-impact, uppercase-friendly. Used for hero, H1, and H2 only — never body text. Fallbacks: Anton, Oswald, system-ui.

Effect: impact, cinematic scale, authority.

Inter — body

Highly readable at all sizes, neutral tone. The default for everything readable — paragraphs, navigation, UI. Fallbacks: system-ui, -apple-system, Segoe UI.

Effect: clarity, neutrality, readability.

JetBrains Mono — mono

Code blocks, card stats, token references, technical content. Fallbacks: IBM Plex Mono, Consolas.

Effect: precision, technical clarity.

Full font stacks in typography.md §3.

Type scale — live samples

Each sample below renders at its actual size, weight, and font. Hero / H1 / H2 use the display face (Bebas Neue) in uppercase; H3-H6 and body use the body face (Inter) in sentence case.

Reality check

Typography is not decoration. It encodes hierarchy, information priority, and tone. Misuse breaks comprehension before it breaks aesthetics.

Spacing & Layout

The spacing scale uses an 8-point base with 9 named steps. All layout spacing resolves through --la-space-* tokens — spacing defines rhythm, not just distance. Full spec in spacing.md.

Border radius — --la-radius-sm (4px), --la-radius-md (8px), --la-radius-lg (16px), --la-radius-xl (24px), --la-radius-pill (9999px).

Z-index layers — base (0), dropdown (5), sticky (10), overlay (50), modal (100), toast (200).

Rule: tight spacing = density / system. Wide spacing = emphasis / separation. Never introduce arbitrary pixel values.

Interaction Patterns

Interactive elements follow a consistent set of transition and state rules defined in brand-tokens.css.

Transitions — three speeds, all ease-in-out:

• --la-transition-fast — 120ms (hover, focus ring, toggle)
• --la-transition-base — 180ms (expand/collapse, tab switch)
• --la-transition-slow — 280ms (page-level reveal, modal)

Hover states — surface elements lift to --la-color-surface-hover; interactive text shifts to --la-color-blue-bright.

Focus — visible focus rings use --la-color-blue-bright at 2px outline offset. Never suppress the default outline without replacing it.

Reduced motion — all transitions respect prefers-reduced-motion: reduce. When active, duration collapses to 0ms. See spacing.md §10.

Rule: interaction must feel responsive, predictable, and controlled. Never decorative. Always meaningful.

Accessibility

Accessibility is built into the token system, not bolted on.

Contrast requirements:

• Body text on all background tokens must meet WCAG AA (4.5:1).
• Large text (display / H1 / H2) must meet WCAG AA large (3:1).
• --la-color-cta on white text exceeds AAA (~10.4:1) in both modes — mode-stable by design.
• --la-color-text-secondary on --la-color-bg-primary clears AA in both modes (light: 7.1:1, dark: 6.8:1).

Color independence: information must not be conveyed by color alone. Semantic states (success, warning, error) pair color with icon or text label.

Minimum text size: body text must not drop below 14px (--la-font-size-small) anywhere it is expected to be readable.

Motion: all animation respects prefers-reduced-motion. No auto-playing animation without user trigger.

Focus management: interactive elements must have a visible focus indicator. The system default is a 2px --la-color-blue-bright outline.

Token Contract

All visual styling MUST consume the canonical tokens defined in /brand-tokens.css. No raw hex values. No ad-hoc typography. All consumers (www.*, play.*, cards.*) consume tokens via cross-origin link.

Governance lineage: WP-002 locked the v1 token surface (breaking changes require v1 → v2 + coordinated consumer updates); WP-006 deployed /brand-tokens.css with cross-origin headers; WP-007a / WP-007b wired the play client and registry to consume tokens cross-origin with a bundled fallback per consumer.

/brand-tokens.css is a public API — treat any proposed token change as an API change.

Copy-paste patterns

Primary CTA button:

.btn-primary {
  background-color: var(--la-color-cta);
  color: #fff;
  font-family: var(--la-font-body);
  font-weight: var(--la-font-weight-semibold);
  padding: var(--la-space-3) var(--la-space-5);
  border: none;
  border-radius: var(--la-radius-md);
  transition: background-color var(--la-transition-fast);
}
.btn-primary:hover {
  background-color: var(--la-color-cta-bright);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--la-color-blue-bright);
  outline-offset: 2px;
}

Section card:

.card {
  background-color: var(--la-color-surface);
  border: 1px solid var(--la-color-border-subtle);
  border-radius: var(--la-radius-md);
  padding: var(--la-space-5);
  transition: background-color var(--la-transition-fast);
}
.card:hover {
  background-color: var(--la-color-surface-hover);
}

Display heading:

.hero-heading {
  font-family: var(--la-font-display);
  font-size: var(--la-font-size-hero);
  font-weight: var(--la-font-weight-h1);
  line-height: var(--la-line-height-hero);
  letter-spacing: var(--la-letter-spacing-display);
  text-transform: uppercase;
  color: var(--la-color-gold);
}

Consuming tokens cross-origin (play / registry):

<link rel="stylesheet"
      href="https://www.legendary-arena.com/brand-tokens.css"
      crossorigin="anonymous" />

Each consumer bundles a local fallback copy of brand-tokens.css that loads if the cross-origin fetch fails — see WP-007a / WP-007b.

Usage Guidelines

Bright lines from strategy.md §10

• palette.md §10.

• DO use --la-color-blue-bright on interactive elements — links, focus rings, hover, active. The deeper navy base reads decorative.
• DO use --la-color-cta for primary CTA backgrounds — mode-stable, AAA on white text.
• DO render the logo as gold-on-dark (primary) or white-only (inversion). Two treatments only.
• DO pair semantic states with icons or text labels — never color alone.
• DO provide a visible focus indicator on every interactive element — 2px --la-color-blue-bright outline.
• DON'T use class colors (--la-color-class-*) for branding, marketing, CTAs, or the logo. Gameplay tags, not identity.
• DON'T reuse brand red (--la-color-red / -cta, maroon family) as an error state. Error uses --la-color-error (pure-red family).
• DON'T introduce raw hex / font / spacing values. Every visual resolves through var(--la-*).
• DON'T suppress the default focus outline without providing an equivalent visible alternative.
• DON'T auto-play animations or transitions that ignore prefers-reduced-motion.

Assets & Downloads

Token stylesheet — /brand-tokens.css (the canonical source; link or download).

Logo files (SVG, production-ready):

• Primary wordmark (gold on dark)
• Inversion wordmark (white-only)
• Icon / favicon

Documentation (source of truth, in repo):

• strategy.md — positioning, voice, tone
• palette.md — full color spec + WCAG contracts
• typography.md — font families, size scale
• spacing.md — spacing, radii, z-index, motion
• CHANGELOG.md — token version history

Engineering references (engine monorepo):

• Architecture inventory — auto-generated weekly from scripts/architecture-inventory.mjs (WP-145)
• Engineering wiki — decisions, post-mortems, schema docs

Real-World Application

The system must produce consistent results across all surfaces.

• Same CTA color on marketing and game UI
• Same type hierarchy across pages
• Same spacing rhythm across layouts

If two surfaces feel different, the system is being violated.

Art Direction (Mood Board)

This is the art-direction brief used when commissioning the one-page Legendary Arena mood board poster. Artists, partners, and integrators use it to interpret the brand consistently. The canonical source is docs/brand/mood-board-spec.md; the body is inlined below at render time so a single edit propagates.

Facebook Graphics

Visual reference for every Facebook image format Legendary Arena needs — from page setup through content and campaigns.

Page identity (required at launch)

These two assets define how the page appears everywhere on Facebook.

Profile picture — the logo, everywhere.

Use the existing icon from /brand/logo/legendary-arena-icon.svg, exported as PNG at 800 x 800. The gold-on-dark variant reads best against Facebook’s white and dark-mode chrome.

Cover photo — the brand billboard.

For Legendary Arena: logo wordmark + tagline in the safe zone, hero card art filling the background, optional CTA text (“Play Online” or “Join the Arena”). Keep the edges expendable — mobile crops ~100 px from each side.

Open Graph image (critical for sharing)

This is what appears when anyone shares a legendary-arena.com link on Facebook (or any platform that reads Open Graph tags). Set it site-wide via <meta property="og:image">.

The OG image should be a standalone brand card — recognizable without context. Logo, tagline, and one piece of hero art. No small text — it renders as a thumbnail in most feeds.

Feed content templates

Three standard formats cover every feed post type. Design templates for each so posts stay on-brand without per-post design work.

File guidance: JPG or PNG, keep under 1 MB. Facebook recompresses everything — oversized files gain nothing and load slower on upload. PNG is better for UI screenshots and text-heavy graphics; JPG for card art and photos.

Portrait gets the most feed real estate. At 4:5 it fills more of the mobile viewport than square or landscape — use it for announcements and content where visibility matters most.

Stories and Reels

Leave ~250 px margin at top and bottom for Facebook’s UI overlays (profile icon, reply bar, progress indicator). The content-safe area is roughly 1080 x 1420 centered vertically.

For Legendary Arena: card-of-the-day reveals, 15-second gameplay clips, set announcement teasers. Vertical format rewards bold visuals and minimal text.

Event and group covers

Both share the 1.91:1 family — a single wide template scales to either. Use for game launches, online tournaments, feature releases, and community group headers.

Advertising formats

If running paid campaigns later, these are the three ad canvas sizes:

These overlap with the content templates above — square and story ads reuse the same canvases. The feed ad is 2 px shorter than the standard 1200 x 630 link preview; in practice the same template works for both.

Launch checklist

The minimum asset set to launch a complete Facebook page:

1. Profile image — icon at 800 x 800 PNG
2. Cover photo — brand billboard at 851 x 315
3. Open Graph image — 1200 x 630 (set in site <head>)
4. 3-5 starter posts — one square (card spotlight), one portrait (announcement), one landscape (site link)

Everything else (stories, event covers, ads) can follow once the page is live and the content cadence is established.

File type decision guide

Facebook recompresses all uploads. Exporting at high quality (JPG 90-95%, PNG-24) gives the recompressor the best source material without inflating file size past the ~1 MB practical ceiling.

YouTube Graphics

Visual reference for every YouTube image format Legendary Arena needs — from channel setup through video content and community engagement.

Channel identity (required at launch)

These two assets define how the channel appears across YouTube.

Profile picture — the logo, everywhere.

Use the existing icon from /brand/logo/legendary-arena-icon.svg, exported as PNG at 800 x 800. Identical asset as Facebook — one export covers both platforms.

Channel banner — the most crop-hostile asset on YouTube.

Device-specific crop behavior (this matters a lot):

Everything outside the safe zone gets cropped on every device except TV. For Legendary Arena: logo wordmark + tagline inside the safe zone, hero card art filling the background. The edges are expendable — design them to look good but carry no critical information.

Video thumbnail (highest-ROI asset)

The thumbnail is the single most important image on YouTube. It determines whether someone clicks — more than the title, more than the description. Every video needs a custom thumbnail.

Overlay constraint: the bottom-right corner is covered by the video timestamp badge (~10-15% of the frame). Keep logos, text, and CTAs out of that zone.

Design rules for Legendary Arena thumbnails:

• Bold, high-contrast visuals — thumbnails render at ~320 x 180 in most feeds
• One focal point per thumbnail (a hero card, a mastermind, a score)
• Minimal text — if text is needed, large enough to read at thumbnail scale
• Keep key content in the center ~80% of the frame
• Consistent template so viewers recognize the channel at a glance

Branding watermark (subscribe overlay)

The watermark appears as a clickable subscribe button in the bottom-right corner of every video. Set it once in YouTube Studio under Customization > Branding.

Display timing options:

• Entire video (recommended for new channels)
• Custom start time
• End of video only

Use the LA icon on a transparent background. Keep it simple — it renders at roughly 40 x 40 px in the player, so fine detail is invisible.

Shorts (vertical video)

Leave ~200 px margin at top and bottom for YouTube’s UI overlays (channel name, like/comment buttons, description). The content-safe area is roughly 1080 x 1520 centered vertically.

For Legendary Arena: card-of-the-day reveals, 15-second gameplay clips, set announcement teasers, quick strategy tips. Vertical format rewards bold visuals and minimal text — same as Facebook/ Instagram Stories.

Community posts

YouTube also supports landscape images in community posts, but square gives the most consistent display across devices. Use for polls, announcements, card spotlights, and engagement content.

End screen canvas

Critical constraint: end screen elements (subscribe button, video suggestions, playlist links) are interactive overlays placed by YouTube. The video’s final frames need to leave space for these clickable zones — typically two rectangular regions in the lower two-thirds of the frame.

Design the last segment of each video with a clean background or branded end card that accommodates the overlay elements without visual collision.

Launch checklist

The minimum asset set to launch a complete YouTube channel:

1. Profile picture — icon at 800 x 800 PNG
2. Channel banner — brand billboard at 2560 x 1440 (safe zone tested on mobile)
3. Branding watermark — icon at 150 x 150 transparent PNG
4. Thumbnail template — reusable 1280 x 720 template with consistent brand treatment
5. End screen template — branded end card with space for YouTube’s clickable elements

Everything else (Shorts covers, community post templates) can follow once the channel is live and the content cadence is established.

File type decision guide

YouTube recompresses all uploads. Export thumbnails at high quality (JPG 90-95%, PNG-24) to give the recompressor the best source material. The banner’s 6 MB ceiling is generous — a well-compressed 2560 x 1440 JPG typically lands around 1-2 MB.

Key risks (worth enforcing in tooling)

Governance

Token changes are API changes. Breaking changes to /brand-tokens.css require a major version bump (v1 → v2) and coordinated consumer updates across all three surfaces before the new version publishes.

Proposing a change: open an issue or PR against the docs/brand/ directory. Include the token name, proposed value, rationale, and which surfaces are affected. Non-breaking additions (new tokens) can land in a minor bump; renames or value changes to existing tokens are breaking.

Version history: see CHANGELOG.md.

Final Principle

Legendary Arena is not styled — it is resolved.

Every visual decision comes from the system. Every surface reflects the same identity. Every interaction reinforces mastery.

The brand is the system.