RTS HUD // Battle.net Design System

01

Color Palette

Dark metallic bases with iconic Blizzard orange accents and teal secondary tones.

Metal Tones

Gunmetal Dark

#1A1C1E

Gunmetal Mid

#2A2D31

Gunmetal Light

#3A3F45

Steel Bright

#5A636D

Accent Colors

Amber Glow

#FF8C00

Amber Bright

#FFA500

Teal Bright

#00D4D4

Teal Glow

#00B4B4

Functional Colors

Health Green

#00CC44

Mana Blue

#3366FF

Damage Red

#CC2222

Resource Gold

#FFD700

02

Typography

Condensed military/tech fonts optimized for HUD readability and stat displays.

Display Black Ops One / 40px

COMMAND

Heading 1 Teko / 32px / 700

Battle Stations

Heading 2 Teko / 24px / 600

Unit Production

Body Saira Condensed / 16px

The quick brown zergling rushes over the lazy marine. Optimized for rapid comprehension during intense battles.

Mono Share Tech Mono / 14px

[SYSTEM] Connection established: GATEWAY_NEXUS_07

Stats Teko / 28px / 700

12,500 / 15,000

03

Buttons

Chunky beveled buttons with satisfying depth. Raised default states, pressed insets, orange glow hovers.

Button Variants

Button Sizes

04

Resource Bar

Classic RTS resource display with gold, lumber, and supply counters.

●

12,450

Gold

▲

8,230

Lumber

■

87 / 100

Supply

05

HUD Frames

Beveled metallic frames for minimap and unit portrait displays.

Minimap Frame

Unit Portrait Panel

⚔

Marine

Infantry Unit

45 / 60

50 / 50

06

Command Card

3x4 button grid with hotkey indicators for unit abilities and commands.

07

Chat Panel

Terminal-style chat interface for Battle.net messaging.

Channel: Brood War ONLINE

[14:23] [SYSTEM] Welcome to Battle.net!

[14:24] Artosis : Anyone want to 1v1 on Fighting Spirit?

[14:24] Tasteless : GL HF!

[14:25] Flash : gg

[14:25] [SYSTEM] Jaedong has joined the channel.

08

Progress Bars

Segmented progress bars with glowing fills for build queues and loading states.

Build Progress

65%

Energy Charge

80%

Health

42%

09

Form Elements

Tech panel styled inputs and selects for game options and settings.

Player Name

Gateway

Game Type

Race

Map Description

10

Tab Navigation

Channel-style tab navigation for Battle.net interface sections.

Tab content area. Select different tabs to navigate between Battle.net sections like channel browser, game list, friends list, and ladder rankings.

11

News Panels

Information panels for news, updates, and announcements.

Patch Notes 2024.03.15

Balance Update 1.23.1

Minor adjustments to unit pathing and building construction times. Siege Tank splash damage radius reduced by 0.5.

Gameplay Balance

New Maps Added

Three new competitive maps have been added to the ladder map pool for the upcoming season.

Maps Ladder

Server Status ALL SYSTEMS ONLINE

US West Gateway

Active Players: 2,847 Online

US East Gateway

Active Players: 3,521 Online

Europe Gateway

Active Players: 4,103 Online

12

HUD Layout Demo

Complete RTS HUD layout combining all interface elements.

●