This document specifies Tao Baryon's complete visual identity — color system, typography, the lime #c8f542 accent logic, iconography principles, sprite style guidance, and the overarching aesthetic philosophy. It is the design specification that all visual work — UI, sprites, VFX, marketing — should reference.
The visual language of Tao Baryon is composed matter — deliberate, precise, grounded. Not flashy. Not baroque. The Coalition's aesthetic is the aesthetic of people who believe matter is sufficient as it is: it does not need ornament to be worth preserving.
This is the direct visual counter to the Telos: the Telos are ornate, liturgical, beautiful in the way of cathedrals — every element is in service of transcendence. The Coalition aesthetic is in service of presence. The ship is here. It is real. That is enough.
| Register | Where | Character |
|---|---|---|
| Combat | Active gameplay, enemies, bullets | Dark, high-contrast, readable at 60fps |
| Operational | HUD, menus, hangar, shop | Clean, minimal, functional |
| Narrative | Codex, transmissions, stage briefings | Warm, textured, human |
The game moves between these registers fluidly — the player transitions from operational (hub) to combat (gameplay) to narrative (codex) without jarring visual breaks. Each register has its own palette and density, but they share a common typographic and geometric language.
| Token | Hex | Usage |
|---|---|---|
spaceBlack |
#0a0c10 |
Playfield background, deepest backgrounds |
stationDark |
#12151c |
Hub/menu background base |
surface |
#1c2030 |
Cards, panels, secondary surfaces |
surfaceHi |
#252a3d |
Elevated surface — modal backgrounds, focused cards |
border |
#2d3348 |
Default borders, dividers |
textPrimary |
#e8eaf0 |
Primary text — off-white, not pure white |
textSecondary |
#8b8fa8 |
Muted text, labels, subtitles |
textTertiary |
#555972 |
Hints, placeholders, disabled |
lime |
#c8f542 |
Primary accent — active states, CTAs, 10× combo, completion |
limeShadow |
#9bc329 |
Lime pressed/shadow state — buttons, light-surface logo |
limeGlow |
rgba(200,245,66,0.32) |
Lime ambient glow — drop shadows, button halos |
The main menu uses a dusk-blue radial gradient, not flat Space Black. This softens the wordmark's visual weight and gives the logo room to breathe:
background: radial-gradient(
ellipse at 50% 35%,
#1d2334 0%,
#161b28 40%,
#0d1018 100%
);#161b28 (dusk-blue) is the hero background color for all brand artboards and marketing materials. Pure #0a0c10 is reserved for the playfield and the deepest UI surfaces.
| Name | Hex | Usage |
|---|---|---|
| HP Green | #4CAF50 |
HP bar above 60% |
| HP Amber | #FF9800 |
HP bar 30–60% |
| HP Red | #F44336 |
HP bar below 30% and heat critical |
| Heat Blue | #42A5F5 |
Heat bar 0–50% |
| Heat Orange | #FF7043 |
Heat bar 75–90% |
| Shield Blue | #90CAF9 |
Shield indicator |
| Credit Amber | #FFB300 |
Currency displays |
| Shard Teal | #26C6DA |
Blueprint shard displays |
Used only for Telos-origin elements — enemies, Telos boss UI, Veiled Token economy:
| Name | Hex | Usage |
|---|---|---|
| Telos Magenta | #d4548a |
Telos enemy outlines, liturgical trim |
| Telos Gold | #e8b84b |
Telos hull prayer-script, boss HP bar gradient |
| Telos Warm | #c47040 |
Warm orange-red, Telos secondary |
Used for Veiled-origin elements — V-Series ships, Veiled Token displays, Sira-Vel UI:
| Name | Hex | Usage |
|---|---|---|
| Veiled Teal | #2dd4bf |
V-Series ship accents, Veiled Token icon |
| Veiled Soft | #a8d8cc |
Veiled secondary — soft, reflective |
#c8f542)Lime #c8f542 is the most important single color in the game. It is the color of the Coalition's identity, the CDL Production signature, and the visual shorthand for "this matters."
Use lime for:
Never use lime for:
Lime on dark backgrounds: Always readable. #c8f542 on #0a0c10 has a contrast ratio of ~11:1 (WCAG AAA).
Lime on light backgrounds: Use sparingly, only for text (not fills). Against #e8eaf0, the contrast ratio drops to ~4:1 — adequate for bold text only.
Three typefaces. Two are universal — they appear everywhere in the game. One is logo-only.
Used for all UI copy, body text, labels, buttons.
No other weights. 600 and 700 are too heavy for the game's composed aesthetic.
Scale: | Use | Size | Weight | |---|---|---| | Screen title | 22px | 500 | | Section heading | 18px | 500 | | Card title | 15px | 500 | | Body / description | 14px | 400 | | Label / badge | 11px | 500 | | Hint / tertiary | 10px | 400 |
Minimum text size: 10px. Nothing smaller renders on mobile.
Used for all numbers, statistics, timers, build costs, scores, depths, HP values.
The pairing of DM Sans (humanist, approachable) with DM Mono (precise, technical) creates the game's typographic voice: human warmth + technical precision. Both are Google Fonts, free, and render consistently across platforms.
In-game rule: every number is always DM Mono. Score, HP, heat percentage, credits, timer countdowns, combo multiplier numeral — all DM Mono. Numbers are facts.
Logo artwork only. Never used in UI, HUD, menus, or gameplay.
Used in Logo Variant B (LogoB) where the game title renders in lowercase display weight: tao baryon at 38px, letter-spacing 0.04em. This variant is an alternate brand treatment — more editorial, less operational.
In the game's UI, TAO BARYON always renders in DM Mono (uppercase, letter-spacing 0.18em). Major Mono Display is a brand-layer asset, not a UI component.
Scale: | Use | Size | Weight | |---|---|---| | Score display | 20px | 400 | | Combo multiplier | 26px | 500 | | Stats / costs | 14px | 400 | | Timer countdown | 16px | 400 | | Build queue time | 13px | 400 |
The two-typeface system (DM Sans + DM Mono) is strict. No display fonts, no handwriting, no Telos liturgical font (post-launch addition if the prayer-script system is fully implemented). The discipline of the two-font system is part of the visual identity.
All icons use Tabler Icons outline set. No filled icons. No custom icon illustrations in v1.0.
Icon usage guidelines:
Icons always inherit text color from parent — they adapt to light/dark mode automatically.
Style: Pixel art, 64×64 base canvas, scaled up 2× for display (128×128 logical pixels). Clean silhouettes, high-contrast outlines, minimal internal detail. Ships read as distinct shapes at a glance.
Color rules for player ships:
Outline: 1px hard black outline on all sprites (the "game-feel" standard for clear readability on dynamic backgrounds)
Style: Same pixel art approach, but warmer palette (Telos identity colors).
Player bullets: Cool colors (blue → lime at high marks) Enemy bullets — by type:
Readable at all heat levels. Every bullet type must be immediately distinguishable from every other type even at high density. Color, shape, and motion pattern are all used.
Not scrolling in v1.0. Backgrounds are static layered compositions that change between sectors.
| Sector | Background Description |
|---|---|
| S1 Frontier | Dark void, distant stars (small, sparse), cold blue edge light |
| S2 Long Reach | Darker void, traces of battle — faint debris silhouettes far in distance, warm brown dust |
| S3 Veil | Nebular gases — soft purples and teals at extreme edges. Telos shipyard silhouettes far in distance |
| S4 Ergosphere | Tartarus-9 visible at background — black sphere with accretion disc edge, warm orange-gold |
| S5 Apparatus | Tartarus-9 dominant, closer. Apparatus structure visible — vast geometric forms. Light bends visibly at edges. Background shifts toward abstraction at higher stages |
Background parallax (v1.0): Single-plane parallax only — distant elements move at 0.2× ship speed. Creates depth without complexity.
Achernar Station: a painted static illustration. Industrial but lived-in. Engineers visible as silhouettes at workbenches. Distant docking arms. A large viewport showing deep space. Warm light sources (station lighting — the only truly warm environment in the game).
The playfield desaturates to near-grayscale over 0.8 seconds, then the clear screen overlays. The stage completion card appears on this desaturated background.
#1c2030 (Surface)#2d3348--border-radius-lg)#c8f542, 1px#c8f542#0a0c10 (Space Black) — dark text on bright background#2d3348#e8eaf0#8b8fa8#F44336#F44336#2d3348, height 8px, radius 4px#8D6E63, Silver = #78909C, Gold = #FFB300, Platinum = lime #c8f542Three variants were developed and evaluated. Variant C is the final direction.
"tb" in DM Mono 500 — ~42% of icon size, #e8eaf0
Lime underline bar — 36% of icon width, 2px, #c8f542
with drop-shadow glow: 0 0 8px #c8f542
"BARYON" wordmark below — 6% size, letter-spacing 0.32em, #555972
Background: #0a0c10 (Space Black)
Shape: Standard rounded-rect (iOS/Android)Why Variant C won: At small sizes (60px home screen), the two-letter "tb" monogram reads instantly. The lime underline carries the brand color without competing with the letterforms. The vanguard silhouette (Variant A) becomes illegible at 60px; the Ω glyph (Variant B) is too abstract as a standalone icon.
The H-1 Vanguard centered on Space Black with the lime engine trail as the dominant element. Reads well at 180px+. Available as an alternate icon for players who prefer it.
The Ω with horizon line bisecting it ("We do not cross" made literal). Used in Logo C artwork. Available as an alternate icon option.
Alternate icon (Rank 50 players): The C-1 Apex M3 with Architect's Recognition cosmetics — prayer-script overlay, lime trail. Where the platform supports alternate icons, Rank 50 players unlock this.
Four logo variants developed, two selected for use:
Logo A (Primary): Ω glyph + DM Mono TAO BARYON wordmark + A CDL PRODUCTION + tagline. Background: dusk-blue #161b28 or Space Black. This is the hero mark for in-product use (main menu, splash screen).
Logo A Compact: Horizontal lockup — glyph left, wordmark right. Used in headers, marketing footers, smaller contexts.
Logo C (Glyph mark): Ω with horizon line in a bordered square container, wordmark to the right. The "hull plate" version for specific applications.
Logo D (Hull plate): Wordmark inside a bordered panel with corner cuts — corner accents in lime. Most ornamental variant; use for physical goods (e.g., print, merchandise).
The Ω glyph is drawn as an SVG path (not text), ensuring consistent proportions across all sizes and the horizon line bisects it at a fixed geometric position.
#c8f542 — used sparingly for active/complete/important states only; never decorative#1d2334 → #161b28 → #0d1018), not flat Space BlacksurfaceHi #252a3d, limeShadow #9bc329, limeGlow rgba(200,245,66,0.32) — in token set#d4548a + Gold #e8b84b — only on Telos content#2dd4bf — only on Veiled content#1c2030, 12px radius, 0.5px border, lime border on active"tb" DM Mono + lime underline. Variant A (ship) available as alternate.Document version: 1.0 (locked) Part of: Tao Baryon GDD — Tier 5 Audio & Visual