MLBBZone Design System v1.0

The Zone Styleguide

A dark, focused tactical arena feel. Data reads like a live battlefield readout. All components adhere to strict WCAG AA contrast standards and 60fps interaction performance.

1. Color Palette & Tokens

Engineered for deep-space readability with tactical teal & amber accents.

Base Background #0A0E17 Deep ink-navy foundation

Surface Card #101624 Primary content surfaces

Surface Alt #161E30 Elevated panels & hovers

Border #263248 Subtle separators & outlines

Electric Teal #00E0CC Primary action & data highlight

Molten Amber #FFAA2A Buffs, warnings & secondary callouts

Text Primary #E1E6F0 High contrast headers & body

Text Dim #8C9BB4 Secondary metadata & hints

2. Semantic Tier Colors & Badges

Consistent cross-site color semantics for tier lists and meta ratings.

Dominant / God Tier #FF3860 6.4:1 (Pass AA)

Strong Meta #FF8C32 6.8:1 (Pass AA)

Balanced / Viable #00C8AA 8.2:1 (Pass AA)

Situational / Niche #648CC8 5.2:1 (Pass AA)

Underperforming #646478 4.8:1 (Pass AA)

Badge Sizes:

S+ S S A+ B C D

3. Typography Hierarchy

Chakra Petch for military-grade headings, Manrope for clean body, JetBrains Mono for data.

Display 4XL · Chakra Petch Bold (700)

TIER LIST S34 META READOUT

Display 2XL · Chakra Petch SemiBold (600)

Fanny · Blade Dancer · High Skill Ceiling

Body Regular · Manrope (400 / 500)

Mobile Legends: Bang Bang patch 1.9.44 brought critical adjustments to jungle clear speeds, re-centering assassin priority in Mythical Glory lobbies. Counter-picking mobility threats is paramount.

Data & Code · JetBrains Mono (500)

WR: 54.82% · PR: 18.40% · BR: 62.15% · DELTA: +2.14% · MATCHES: 412,890

4. Interactive Buttons

Tactile feel with subtle glow and crisp active states.

Variants:

Sizes:

5. Stat Blocks & Analytics

High-density statistical metrics with positive / negative trend indicators.

Win Rate

56.4 %

+2.4% vs last patch

Ban Rate

68.2 %

-1.8% vs last patch

Pick Rate

18.9 %

+0.5% vs last patch

Sample Size

240.5 k

Mythic+ Matches

6. Direction & Patch Indicators

Standardized indicators for patch notes and hero balance tracking.

BUFF NERF ADJUST REWORK NEW HERO

Small size: BUFF NERF ADJUST REWORK NEW HERO

7. Hero Placeholders

Role-specific glyphs, colors, and initials fallback when portraits are loading or offline.

Tigreal (Tank)

Chou (Fighter)

Fanny (Assassin)

Kagura (Mage)

Beatrix (Marksman)

Angela (Support)

Sizes:

8. Card Surfaces

Layered spatial hierarchy from ground base to glowing interactive elements.

Default Card

Standard surface for listings, articles, and content blocks.

Elevated Card

Elevated surface for modal dialogs, featured items, and popovers.

Interactive Card

Hover me →

Subtle hover lift, glowing teal border highlight, and clickable container.