GAME UI KIT · v1.0

Slide 01 of 08

SYSTEM OVERVIEW

Version 1.0

Game
UI Kit

Art Direction / Visual Language

A minimalist, schematic language built from geometric primitives, grids, and data-like structures. Inspired by diagrams, systems, and technical drawing.

Visual Grammar

Structure

Systems of nodes and connections form the basis of information.

Alignment

Everything aligns to the grid. Precision creates clarity.

Hierarchy

Scale, weight, and contrast guide focus and establish importance.

Abstraction

Information is abstracted into clean, geometric representations.

Reduction

Remove the unnecessary. Clarity through simplicity.

Foundation

Grid

8px Base Grid

Line Weight

1px

1.5px

2px

3px

4px

Caps & Joints

Dot System

Tone & Texture

Halftone / Ink

Shapes & Elements

UI Elements

78

Panel Title

DATA VALUE82.6%

STATUSACTIVE

COUNT024

OBJECT_07

CLASS: UNKNOWN

UI Glyph Studies

Framing & Layout

TITLE01

01 238 744 09

GAME UI KIT/VISUAL LANGUAGE

001

Slide 02 of 08

TYPOGRAPHY / COLOR

Version 1.0

Typography
/ Color

Type System & Color Palette

A clear typographic hierarchy and restrained color system establish clarity, focus, and a calm, technical experience for the player.

Type Roles

AA

Primary Display

Large impact headings
& key statements.

Oswald
Bold

Aa

Secondary Heading

Section titles
& UI headings.

Oswald
Medium

Aa

Body Text

Long form content,
descriptions, help.

Archivo
Regular

Aa

Mono / Technical

Data, code, values,
technical labels.

IBM Plex Mono
Regular

123

Numeric Style

Metrics, counters,
scores, measurements.

Oswald
Tabular

LABEL

Uppercase Label

Buttons, tabs,
small UI labels.

Oswald
Medium

Type Specimens

PRIMARY DISPLAY – OSWALD BOLD

ABCDEFGHIJKLMN
OPQRSTUVWXYZ
0123456789

SECONDARY HEADING – OSWALD MEDIUM

ABCDEFGHIJKLMN
OPQRSTUVWXYZ
0123456789

BODY – ARCHIVO REGULAR

AaBbCcDdEeFfGgHhIiJjKkLlMm
NnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789 !@#$%&*()_+
[]{};:,./\|-

MONO / TECHNICAL – IBM PLEX MONO REGULAR

AaBbCcDdEeFfGgHhIiJjKkLlMm
NnOoPpQqRrSsTtUuVvWwXxYyZz
0123456789 !@#$%&*()_+
[]{};:,./\|-

NUMERIC – OSWALD TABULAR

0123456789 00,124.75
−001.50 +250%

LABEL – OSWALD MEDIUM (UPPERCASE)

MISSION SYSTEM DATA MAP
ACTIVE INACTIVE ENABLED DISABLED
PRIMARY SECONDARY TERTIARY

Text In Use

Page Heading

Navigation

Section Title

Mission Objectives

Subheading

Objective details

Locate the signal ~~mast~~ establish a secure uplink.

Mono Data

SIGNAL ID: 87-A1-2F
STRENGTH: 82.6%

Label / Button

Status Tag

Active

Type Scale & Hierarchy

Role	Example	Size / Line Height	Weight / Tracking	Use
H1 / Display	Mission Overview	64px / 72px	Bold / −1%	Hero titles, section introductions.
H2 / Heading	System Status	28px / 36px	Medium / +2%	Page headings, major sections.
H3 / Subheading	Objective Details	18px / 26px	Medium / +4%	Subsections, card titles.
Body Text	Systems are nominal. All parameters within expected ranges.	14px / 22px	Regular / 0%	Paragraphs, help text, descriptions.
Caption / Mono	ID: 87-A1-2F VALUE: 82.6%	12px / 18px	Mono / 0%	Data, code, labels, technical notes.
Numeric	0037.50	24px / 28px	Tabular / 0%	Counters, metrics, readouts.
Label	Active	12px / 16px	Medium / +6%	Buttons, tabs, inline labels.

Color Palette

Core Neutrals

Paper

#F2EEE4

Ink

#0E0E0E

Charcoal

#2A2A2A

Steel Gray

#7A7F87

Light Gray

#D9DBDE

Sand

#E9E5DA

Accent Colors (use sparingly)

Steel Blue

#6FBDA1

Sand Gold

#C8B68A

Design is primarily monochrome. Accents are reserved for emphasis, state, and data visualization.

Color Usage Examples

UI States

DEFAULT

#0E0E0E

HOVER

#2A2A2A

ACTIVE

#0E0E0E

DISABLED

#D9DBDE

WARNING

#C8B68A

SUCCESS

#6FBDA1

Data Visualization

PRIMARY DATA

#0E0E0E

SECONDARY DATA

#7A7F87

ACCENT DATA

#6FBDA1

WARNING

#C8B68A

SUCCESS

#6FBDA1

NEUTRAL GRID

#D9DBDE

GAME UI KIT/TYPOGRAPHY / COLOR

002

Slide 03 of 08

CORE UI ELEMENTS

Version 1.0

Core UI
Elements

Reusable Components for Game Interfaces

A set of general purpose UI elements designed for clarity, responsiveness, and consistency across game systems and screens.

Buttons

	Default	Hover	Pressed	Focused	Disabled	Alert
Primary
Secondary
Tertiary
Icon + Text
Text Only

Icon Buttons

DEFAULT

HOVER

PRESSED

DISABLED

Tabs

Inventory

Map

Quests

Data

Inventory

Map

Quests

Data

Inventory

Map

Quests

Data

Inventory

Map

Quests

Data

Segmented Control

All

Weapons

Armor

Items

All

Weapons

Armor

Items

All

Weapons

Armor

Items

All

Weapons

Armor

Items

Checkboxes

Unchecked Checked Focused Disabled Alert

Radio Buttons

Unselected Selected Focused Disabled ! Alert

Toggles

Off

On

Focused

Disabled Off

Disabled On

! Alert On

Sliders

DEFAULT

50

FOCUSED

70

DISABLED

30

Dropdowns

Select Option

Option One

Option Two

Option Three

Select Option

Text Input

DEFAULT

FOCUSED

Player Name

DISABLED

ERROR

!

Tooltip

ATTRIBUTEA core value that affects performance in game. Upgrade to improve outcomes.

Progress Bars

DEFAULT

62%

FOCUSED

82%

DISABLED

40%

INDET.

Status Bars

HEALTH72 / 100

ENERGY46 / 100

SHIELD30 / 100

Loading Indicators

Spinner

Ring

Dots

Bars

Hex Pulse

Badges

NEW 3 VIP

Notifications

iINFOItem acquired.×

!WARNINGLow energy.×

×ERRORConnection lost.×

Panel Frames

TITLE▾

Card Containers

ITEM NAME

Category

75

Dividers

+

Cursors

Default

Pointer

Text

Resize

Move

Not Allowed

Busy

Icon Set (examples)

GAME UI KIT/VISUAL LANGUAGE

003

Slide 04 of 08

ACTION / HUD SYSTEMS

Version 1.0

Game
UI Kit

Action / HUD Systems

A collection of HUD components for action, RPG, shooter, roguelike, and survival games. Designed for clarity, responsiveness, and minimal visual noise.

Player Status Bars

HEALTH82 / 100

SHIELD56 / 100

STAMINA76 / 100

MANA / ENERGY64 / 100

AMMO30 / 120

Cooldowns

3.2

12

45%

8.7

Crosshair Variants

Interaction Prompt

E

Interact

HOLD ··········

F

Pick Up

HOLD ██████····

Buffs / Debuffs

10:45

00:30

06:12

04:08

03:20

00:08

00:06

00:05

00:04

00:03

Minimap Frame

N

MAP DATAx: 224 y: 712

Compass / Heading

NW 330 345 N 15 30 NE 75 E

▲

Combo / Chain Meter

×12

CHAIN

Boss Health Bar

THE WARDEN

24,680 / 40,000

Objective Tracker

◆

Primary ObjectiveReach the outpost

▢

Secondary ObjectiveFind the supply cache

◇

Optional ObjectiveCollect 3 data drives (1/3)

●

Activate the BeaconSignal received

Quick Slots / Hotbar

1

2

3

4

Q

2

5

30

6

12

7

6

8

6

R

1

Diegetic Scanner Overlay

SCAN MODEACTIVE

SIGNAL STRENGTH████████··

DISTANCE128.4m

OBJECTRESOURCE NODE

REC ●

HUD Examples in Context

189/210

◆Reach the Citadel

◇Find the Keystone

Action RPG

90|NW|330|345N|15|NE

30 / 120

◆ Eliminate Hostiles

2 / 12

Shooter

Day 12

08:45

◆ Find Shelter

N S W E

Survival / Roguelike

GAME UI KIT/ACTION / HUD SYSTEMS

004

Slide 05 of 08

RPG / CHARACTER SYSTEMS

Version 1.0

RPG /
Systems

Character, Progression & Narrative

Deep UI patterns for RPGs: character sheets, inventories, dialogue, journals, and skill systems designed to hold density without clutter.

Attribute Panel

ARDEN · RANGERLVL 24

STR

12

DEX

18

INT

09

VIT

14

WIS

11

LCK

07

XP14,220 / 18,000

Journal Entry

Entry 047Day 19 · Dawn

Crossing the Deadwood

The bridgekeeper let us pass for three copper and an old song. Selka knows the one. She sang, and something in the trees stopped listening.

PAGES047 / 200

Inventory Grid

SLOTS · 18/48WGT · 34.2kg

×1

×12

E

×3

×8

×24

×2

×5

Cinder ShardRARE

+24 fire · +8 burn/s · reagent

Equipment

—

World Map

DISTANCE4.2 km · 00:42

Skill Tree

POINTS · 3 AVAIL6 / 18 UNLOCKED

Dialogue

Selka

KEEPER · BRIDGE

04:22

"The road ahead is longer than it looks, traveler. I can show you the short way — for a price."

1."Tell me the price."

2."I'll find my own way."

3.[PERSUADE] "We can trade favors."

Quest Log

▲

Cross the Deadwoodmire · 1.8 km

2/3

●

Speak with Selkadone

◆

Return the Ledgerstoneford · 0.4 km

◇

Collect 3 Salt Bundlesoptional · (1/3)

◌

The Keepers' Oathlocked

GAME UI KIT/RPG / CHARACTER SYSTEMS

005

Slide 06 of 08

STRATEGY / SYSTEMS UI

Version 1.0

Strategy /
Systems UI

Strategy, Simulation, Management & Tactics

UI patterns for high-level strategy, resource management, unit control, research systems, and card-based mechanics.

Turn Indicator

TURN24

PHASE

PLANNING

ECONOMY

ORDERS

RESOLUTION

EVENTS

Unit List

Unit	Type	HP	Str	Mov	Status
Vanguard	Infantry	100	12	3	●●●●●
Ranger	Scout	60	6	5	●●●●○
Warden	Heavy	160	18	2	●●●●●
Bastilisk	Artillery	120	22	1	●●●○○
Hawk	Air	80	14	8	●●○○○
Supply Convoy	Support	100	—	4	●●○○○

Build Queue

Train Rangers

3 TURNS

Build Outpost

5 TURNS

Research Ballistics

4 TURNS

EMPTY SLOT—

Resource Bars

2.4K / 5.0K

1.2K / 2.5K

600 / 1.2K

340 / 800

120 / 500

Economy Readout

INCOME / TURN+420

EXPENSES / TURN−280

NET / TURN+140

TREASURY2,750

UPKEEP600

RESERVES1,100

Turn Order Tracker

1.FACTION ALPHA

2.HOUSE VELA

3.NORTHWATCH

4.SYNDICATE

5.THE COALITION

6.EXILES

Tech Tree / Node Graph

Research Tree

INFANTRY

WARFARE

INDUSTRY

LOGISTICS

ENGINEERING

CIVICS

Map Legend

CAPITAL

CITY

OUTPOST

RESOURCE

×RUINS

ALLY

NEUTRAL

ENEMY

INFLUENCE

Data Table

Region	Control	Income	Population	Stability	Production
Vellum Prime	●	+120	12.4K	82%	180
Graymarch	◒	+85	7.8K	61%	130
Northwatch	○	+60	5.2K	44%	90
Sable Coast	◇	+40	3.1K	37%	60
The Outlands	△	−15	1.0K	22%	20

Timeline

-3-2-1NOW+1+2+3

ATTACK BUILD TREATY TURN 24 ELECT HARVEST WAR

Chart Widgets

68

Card Frames

01

Deck Statistics

TOTAL CARDS120

UNITS

60 (50%)

UPGRADES

25 (21%)

EVENTS

20 (17%)

STRUCTURES

15 (12%)

UTILITY

5 (4%)

Composed Template Screens

◯ 2.4K◒ 1.2K◇ 1.2K△ 600◆ 340◈ 120

← 120

ORDERS

●VANGUARD

○RANGER

○WARDEN

○HAWK

TURN 24ORDERS PHASE

UNIT LIST

○VAN 1100

○RNG 360

○WRD 2160

○HWK 180

○BAS 1120

BUILD QUEUE

◯RANGERS1 TURN

◯OUTPOST3 TURNS

◯RESEARCH2 TURNS

ECONOMY

EVENT LOG

T.24

GAME UI KIT/STRATEGY / SYSTEMS UI

006

Slide 07 of 08

MENUS & DIALOGS

Version 1.0

Menus &
Dialogs

Titles, Pauses, Settings, Modals

Screens for beginning, leaving, configuring, and confirming — held together by a consistent typographic and spatial grammar.

Screen Anatomy

HEADERBREADCRUMBMETA

NAV

CONTENT

DETAIL

FOOT / SHORTCUTSACTIONS

Modal Confirmation

CONFIRM — IRREVERSIBLE ×

Abandon Run?

Current progress will be lost. Codex entries and unlocked sigils will be kept.

I understand

Main Menu

COLD LEDGER · v 0.1.4

The Cold
Ledger

iContinueday 14

iiNew Game

iiiLoad

ivOptions

vCodex47/200

viQuit

Pause Menu

PAUSED · DAY 14 · MIRE▎▎

·Resumehold ESC ·Inventory ·Map ·Codex ·Settings ·Abandon Run

RUN · Day 14

ROOMS CLEARED47

DMG DEALT12,840

DMG TAKEN2,114

PACTS3

COIN1,240ƒ

WOUNDS7

Settings

General

Audio

Graphics

Controls

Accessibility

ESC ▸ close

Language

English

Subtitles

ON

Subtitle Size

60

Screen Shake

25

Auto-Pause

ON

Tutorial Hints

OFF

Permadeath

BOUND

HUD Opacity

82

Colorblind

None

CHANGES SAVE ON CLOSE

Save Slots

SLOT 014h 12m

Arden · Ranger

lvl 14 · mire · day 19

SLOT 021h 48m

Veor · Warden

lvl 08 · stoneford · day 11

SLOT 03—

Empty Slot

awaiting new run

Contextual Menu

ITEM · A4

UseE

Equip↵

CombineC

InspectI

FavoriteF

DropX

GAME UI KIT/MENUS & DIALOGS

007

Slide 08 of 08

TEMPLATES / COMPOSED SCREENS

Version 1.0

Templates

Three Plates · Parts Become a Game

Three composed screens drawn from the preceding kit: a real-time action HUD, a strategy command screen, and a character / inventory panel.

Usage Notes

1 · Density

Density by genre — HUD sparse, strategy dense. Each plate uses the same atoms at different concentrations.

2 · Grid

8px base grid. All padding, gaps, and component sizes are multiples of 4.

3 · Accent

Only one element may claim Flux/Alert at a time. Restraint carries meaning.

Design Principles

Read in one breath, or not at all.
The grid holds the argument.
Every label earns its space.
Nothing hovers — everything anchors.
A bracket is a promise.

Plate Ⅰ · Action HUDin combat · day 14 · mire

DAY 14 MIRE COMBAT 02:14

NW 330 345 ▼ N 15 ▲ 48° 30 NE

N

MAP224·712

▲ RECOVER THE LEDGER0.8km · 02:14

POISON 0:42

CURSED ∞

HASTE 0:09

HP

142/200

MP

88/120

WND

−14/s

Q

W

E

R

F

1

2

14 you → revenant · 127

13 revenant bleeds · −08

11 parry · CRIT 340

10 revenant staggers

Plate Ⅱ · Strategy Commandturn 24 · orders

TURN 24 ORDERS PHASE · HOUSE VELA

◯ 2,750 ◇ 1,200 △ 600 ← −120

UNIT · VANGUARD 1

HP

82

ST

12

MV

3

BUILD QUEUE

●RANGERS1T

○OUTPOST3T

○RESEARCH2T

HAND · 6/7

Plate Ⅲ · Character Screenarden · ranger · lvl 14

ARDEN · RANGER LVL 14 · KEEPER'S APPRENTICE

STATS

STR

12

DEX

18

INT

09

VIT

14

WIS

11

LCK

07

XP14,220/18,000

INVENTORY · 18/48

SELECTED · CINDER SHARD

+24 fire · +8 burn/s

TABCYCLEEEQUIPESCCLOSE Ⅰ / Ⅲ

GAME UI KIT/TEMPLATES·END

008