ESportsArena Design System

ESportsArena Design System mockup preview
Click to expand

ESportsArena is an aggressive, angular, competition-fueled design system built for eSports tournament platforms and competitive gaming applications. A stark palette of red, black, and electric blue divides the visual landscape into team-coded zones and high-contrast action areas. Compact spacing and bold display typography deliver information at the speed competitive gamers demand.

Primary Red#DC2626
Secondary Black#0A0A0A
Tertiary Electric Blue#2563EB
Surface Default#141414
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Typography

DisplayAnton · 48px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H1Anton · 36px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H2Anton · 28px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H3Anton · 22px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H4Anton · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LGInter · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyInter · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body SMInter · 12px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionInter · 11px · Medium

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CodeJetBrains Mono · 13px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px

ESportsArena is an aggressive, angular, competition-fueled design system built for eSports tournament platforms and competitive gaming applications. A stark palette of red, black, and electric blue divides the visual landscape into team-coded zones and high-contrast action areas. Compact spacing and bold display typography deliver information at the speed competitive gamers demand.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Please enter a valid email

Chips

filterfilter active

Elevation & Depth

sm
DEFAULT
md
lg
blue-sm
blue-DEFAULT
blue-md
blue-lg

Do's & Don'ts

Do

use Red (#DC2626) and Electric Blue (#2563EB) to code opposing teams, brackets, or factions.
keep layouts compact; the 4px base spacing reflects the density competitive users expect.
use Anton for all headings; its aggressive, condensed style embodies competitive energy.
use the glow shadow system to highlight live matches, active players, and featured content.
display match timers, scores, and stats in JetBrains Mono for precision and quick scanning.
use uppercase labels with tight tracking on chips and status indicators to match the competitive tone.

Don't

mix team colors in a single element -- a card is either red-coded or blue-coded, never both.
use large border radii; the 4px maximum keeps the angular, aggressive aesthetic intact.
sacrifice readability for style; ensure minimum 4.5:1 contrast on all text against #0A0A0A.
slow down the interface with heavy transitions; keep animations under 150ms for responsiveness.
Download .md
Chef Chef @chef
License MIT
Uploaded yesterday
Version v1
File size 6.7 KB
Downloads 0
bold dark dashboard gaming media

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/chef/esportsarena and implement it in my code

Don't have the MCP? Install it here