Arena Brand Identity

A complete profile of Arena's visual system — colors, typography, components, and personality — extracted from https://www.usearena.com/. Built for designers, agents, and AI tools.

• Page: https://characterquilt.com/branding/arena
• Machine-readable JSON: https://characterquilt.com/branding/arena.json

Quick Facts

Color Palette

• primary: #C2B68E
• secondary: #A89968
• accent: #EDDBBC
• background: #FAF7F5
• textPrimary: #0A0A0F
• link: #EDDBBC

Typography

• primary: Outfit — https://fonts.google.com/specimen/Outfit
• heading: DM Serif Display — https://fonts.google.com/specimen/DM+Serif+Display

Visual Assets

• Logo: https://www.usearena.com/assets/arena_logo_v1-B2Zy1gcj.png
• Favicon: https://www.usearena.com/favicon.svg
• Social card (og:image): https://usearena.com/og-image.png

UI Components

• input: background=#111118, textColor=#F5F0E8, borderColor=#EDDBBC, borderRadius=12px, shadow=none
• buttonPrimary: background=#0A0A0F, textColor=#0A0A0F, borderRadius=8px, shadow=none
• buttonSecondary: background=#0E0E16, textColor=#0A0A0F, borderRadius=8px, shadow=none

Brand Personality

Tone: professional · Energy: medium · Audience: business professionals

Arena Brand in the Wild

Real-world brand assets — ads, campaigns, marketing materials.

• Arena | Evaluate vendors on your terms
  • Image: https://usearena.com/og-image.png
• ARENA Launches New Swimwear Technology: Powerskin Carbon- Ultra - Swimming World
  • Image: https://i.ytimg.com/vi/rZQVLRABSfY/maxresdefault.jpg
• Arena Reports and Utilization Control
  • Image: https://i.ytimg.com/vi/X1vZ_O9nUt0/maxresdefault.jpg
• I saw a few landing pages lately and wanted to show mine. Explanation and translation of german words are in the comments : r/FoundryVTT
  • Image: https://preview.redd.it/i-saw-a-few-landing-pages-lately-and-wanted-to-show-mine-v0-zerif6kgbyla1.jpg?width=640&crop=smart&auto=webp&s=affa93797cb3555f86ea91cb89b2f34775a09c04
• Arena: Shark • Ads of the World™ | Part of The Clio Network
  • Image: https://www.adsoftheworld.com/rails/active_storage/blobs/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBBMzIzQWc9PSIsImV4cCI6bnVsbCwicHVyIjoiYmxvYl9pZCJ9fQ==--368ed520566dd09f6fbebf86a55d6a8e5810ae6b/thumbnail_4094
• IEE 475: Getting Data out of Arena Simulation Models - Record, ReadWrite, and Reports
  • Image: https://i.ytimg.com/vi/2SJMk4gGFPg/maxresdefault.jpg

Working with these fonts

Not found on Google Fonts? Instructions that you can follow if you have permission to use the fonts:

CharacterQuilt.com suggests this flow that can help:

1. Open the company's homepage in a browser with DevTools open.
2. In the Network tab, filter by "Font" (or by extension: woff2, woff, ttf, otf).
3. Hard-reload the page and click around (pricing, blog, careers) — some weights only load on specific routes.
4. For each captured font URL: right-click → Save As to download the file locally.
5. View the page's CSS (DevTools → Sources, or curl the stylesheet URLs) and copy out the matching @font-face declarations. Rewrite each src: url(...) to point to your local file path.

Programmatic alternative: load the URL with Playwright or Puppeteer, listen for response events whose Content-Type starts with font/, and write the body to disk. The CSS extraction step is the same.

Only do this if you have permission to use the brand assets — most proprietary fonts are licensed and may not be redistributable.