Design System

Gaming Esports

High-energy competitive interface design

S+
Pro Tier
I

Colors

Neon-bright accent colors on dark backgrounds. RGB gradients for ultimate energy.

RGB Spectrum
Animated Gradient
Neon Cyan
#00F0FF
Neon Magenta
#FF00AA
Neon Purple
#AA00FF
Neon Green
#00FF66
Neon Yellow
#FFEE00
Deep Black
#0A0A0F
Card Background
#141420
II

Typography

Bold, impactful display fonts with futuristic geometry. Readable body text for extended play.

Display Orbitron / 48px / 900
VICTORY
Heading 1 Orbitron / 40px / 700
Tournament Finals
Heading 2 Rajdhani / 28px / 700
Player Statistics
Heading 3 Rajdhani / 20px / 600
Match History
Body Exo 2 / 16px / 400
The quick brown fox jumps over the lazy dog. Optimized for readability during intense gaming sessions and streaming overlays.
Small Exo 2 / 14px / 400
Stats, labels, and secondary information displayed at compact sizes.
III

Spacing

A consistent 4px-based scale for precise HUD-like layouts.

--space-1
4px
--space-2
8px
--space-3
12px
--space-4
16px
--space-5
24px
--space-6
32px
--space-7
48px
--space-8
64px
--space-9
96px
IV

Buttons

Angular, aggressive button styles with glowing hover states and RGB animations.

V

Form Elements

Clean inputs with angular clip-paths and neon focus states.

VI

Cards

Angular containers with gradient borders and hover glow effects.

Tournament Info

01

Angular cards with clipped corners create an aggressive, tech-forward aesthetic perfect for esports interfaces.

Match Stats

02

Cards hover to reveal glowing borders, indicating interactivity and drawing attention to key content areas.

Rewards

03

The top gradient stripe provides visual hierarchy and color-coding capabilities for different card types.

Player Cards

NX
NeonX
Team Captain
2.4
K/D
89%
Win
S+
Rank
PX
PixelStorm
Support
1.8
K/D
72%
Win
A
Rank
ZR
ZeroLag
Entry Fragger
3.1
K/D
91%
Win
S+
Rank
VII

Progress Bars

Health, mana, XP, and ultimate bars styled for gaming interfaces.

Health
750 / 1000
Mana
225 / 500
Experience
Level 47 - 62%
Ultimate Ready
READY
VIII

Badges

Status indicators and rank badges with angular shapes and tier-based styling.

Status Badges

Online Live Streaming Victory Warning

Rank Badges

Bronze Silver Gold Platinum Diamond Master Grand Master
IX

HUD Elements

Overlay-style panels inspired by in-game heads-up displays.

Player Stats
Total Kills 12,847
Deaths 5,231
Assists 8,492
Win Rate 67.3%
Match Info
Mode Ranked
Map Nexus Arena
Duration 23:47
Server NA-West
Team Score
Alpha Team 14
Omega Team 11
Round 5 / 7
Time Left 01:23