This is the complete design brief for Tao Baryon, a mobile vertical-scrolling arcade shooter developed by CDL Production. It contains everything Claude Design needs to produce production-ready visual assets: the aesthetic philosophy, color system, typography rules, sprite style, per-screen layouts, and the narrative context that informs every visual decision.
Read this fully before producing any asset. Every visual choice in this game is intentional and traceable to the design principles below.
Game: Tao Baryon ("the way of matter") Tagline: "We do not cross." Genre: Vertical-scrolling hard sci-fi arcade shooter Platform: Mobile portrait (Android / iOS primary), 390×844px reference viewport Engine: Flutter + Flame Studio: CDL Production Developer: Cristian (CDL), Chișinău, Moldova
Tao Baryon is a game about matter, as it is, being worth preserving. The player fights a religious civilization (the Telos) that wants to trigger a false vacuum decay event — destroying the universe to "perfect" it. The Coalition's counter-doctrine is called the Tao of the Baryon: matter does not need to be perfected to be sacred. It is enough.
This philosophical argument is the visual language.
#0a0c10#c8f542 as the singular accent — the color of stable baryonic matter under the current vacuum (in-lore) and the CDL Production signature (out-of-lore)#d4548a, gold #e8b84b, warm orange #c47040The player's ship is simple, dark, composed. The enemies are ornate, warm, stunning. The game's visual drama comes from this contrast: discipline vs. doctrine, presence vs. transcendence.
| Token | Hex | Usage |
|---|---|---|
| Space Black | #0a0c10 |
Playfield background, deepest backgrounds |
| Station Dark | #12151c |
Hub / menu backgrounds |
| Surface | #1c2030 |
Cards, panels, secondary surfaces |
| Border | #2d3348 |
Dividers, card outlines |
| Text Primary | #e8eaf0 |
Primary text — off-white, not pure white |
| Text Secondary | #8b8fa8 |
Labels, subtitles, muted content |
| Text Tertiary | #555972 |
Hints, placeholders, disabled states |
#c8f542 — Lime — is the most important color in the game.
Rules:
| Token | Hex | Usage |
|---|---|---|
| HP Green | #4CAF50 |
HP bar >60% |
| HP Amber | #FF9800 |
HP bar 30–60% |
| HP Red | #F44336 |
HP bar <30%, 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 shards |
Coalition (player):
#8b8fa8#e8eaf0#555972#42A5F5 (blue)#FFD600 (yellow)#FF5722 (red) + #c8f542 (lime halo)Telos (enemy):
#d4548a (magenta)#e8b84b#c47040 (warm orange)#ff9eb5#a03060Veiled (allies):
#2dd4bf#1a8a7aTwo typefaces only. No exceptions.
The pairing logic: DM Sans provides human warmth and legibility. DM Mono signals technical precision and truth. When you see a number in this game, it is always DM Mono — because numbers are facts.
The game moves between three distinct visual contexts. Each has its own density and atmosphere.
| Register | Screens | Character |
|---|---|---|
| Combat | Active gameplay, HUD | Dark, high-contrast, 60fps-readable, minimal UI footprint |
| Operational | Hub, menus, hangar, shop | Clean, functional, organized — Achernar Station as home |
| Narrative | Codex, intel briefings, transmission screens | Warm, textured, human — the game's emotional register |
These three registers share typography and color tokens but differ in density and mood.
Pixel art, 64×64 base canvas, 2× nearest-neighbor upscale for display.
#000000 outline on all sprite edges#c8f542 appears only at M3 (highest upgrade tier)9 bullet types, each with a distinct visual signature:
#ff9eb5 / #d4548a for enemyAll enemy bullets use warm colors. All player bullets use cool colors (blue, teal, lime). The player can always distinguish their fire from incoming fire.
Portrait mobile. 390px wide reference.
┌─────────────────────────────────────────┐
│ Score (DM Mono 18px) Combo Sector │ ← Top bar ~10%
│ (lime at 10×) │
│ │
│ │
│ PLAYFIELD │ ← 65% of height
│ (enemies + bullets + player ship) │
│ NEVER OCCLUDED │
│ │
│ │
│ HP bar ████░░ [joystick] HEAT bar │ ← Control zone ~25%
│ [⚡][🔥] │
└─────────────────────────────────────────┘Score: Top-left, DM Mono 18px, Text Primary. Turns lime at 10× combo.
Combo multiplier: Top-center, DM Mono 22px bold, lime #c8f542. Shows decay arc (thin circle) depleting over 3s idle window. Resets to white on combo loss.
Sector/Stage: Top-right, DM Sans 10px, Text Secondary. Static.
HP bar: Bottom-left, above joystick. 130px wide, 8px tall. Color: green → amber → red by HP level. Shield: bright rim outside bar.
Heat bar: Bottom-right, above FIRE button. 130px wide, 8px tall. Color: blue → orange → red by heat level. Shows padlock overlay when locked.
Special charge: Arc around SPECIAL button (270° sweep), lime fill clockwise. Button label lime when charged.
Virtual joystick: Bottom-left. Dynamic (repositions on touch). 76px base circle, 30px nub. Semi-transparent.
FIRE button: Bottom-right, 62px circle. Icon: flame. Semi-transparent background.
SPECIAL button: Above FIRE, 50px circle. Icon: bolt. Lime when charged.
Boss HP bar: Full-width, top of screen, appears only during boss fights. 8px tall, gradient magenta→gold. Phase markers at 70% and 40%.
Background: Space Black + star field (random dots, 0.1–0.5 opacity)
Center top: TAO BARYON (DM Mono 28px, lime, letter-spacing 0.12em)
A CDL PRODUCTION (DM Sans 10px, Text Tertiary)
"We do not cross." (DM Sans 12px, italic, Text Secondary)
Center: CONTINUE (primary button — lime bg, dark text)
CAMPAIGN (secondary — transparent, border)
HANGAR (secondary)
ENDLESS MODE · locked (muted — Text Tertiary)
Bottom-left: Pilot rank badge card (rank number in lime, title, XP bar)
Bottom-right: Version number (10px, Text Tertiary)Header: "ACHERNAR STATION" (9px, uppercase, Text Tertiary)
Sira-Vel greeting line (13px, Text Secondary, contextual)
— changes based on last action (authored pool of ~40 lines)
Lime highlight on key phrase in the greeting
Body (scroll):
Primary cards (2 col): Campaign card (lime left border) | Endless card
Section label "STATION": Hangar | Shop (notif pip) | Codex (notif pip)
Section label "ENERGY": 8 pip row (lime filled, Border empty) + timer
Section label "ACTIVE BUILD": build name + skip ad link (lime text)Vertical scroll of sector blocks.
Each sector: Header card (name + completion + medal) + collapsible stage rows.
Stage row: Number (DM Mono, Text Tertiary) | Name | Star | No-damage pip | Rank badge
Current stage (frontier): Lime left accent strip (2px)
Boss stages: Stage name in Telos Gold (#e8b84b)
Locked stages: 40% opacityTop: Horizontal scroll of ship cards (70×100px each)
Selected: lime border
Series badges: H=blue-tint | V=teal-tint | C=gold-tint
Detail panel:
Ship name (17px medium) + mastery level
Passive box: lime-tinted bg, lime border, Text Secondary description
Stats 2×2 grid: Surface cards
M-tier row: M0 M1 M2 [M3] — active mark is lime filled
Module slots: slot type (9px muted) | module name | affinity badge4 tabs: Ships | Weapons | Modules | Cosmetics (lime underline on active)
Active build banner: dark surface at top, lime "Skip Ad" link
Item rows:
Icon (40px, series-tinted bg) | name + description | cost (DM Mono, credit amber) + button
Owned: "Owned M3" in lime
Building: "Building..." in Text Tertiary
Locked: 50% opacity, no buttonDark overlay (96% opacity) on desaturated playfield
Center:
Stage name (11px, letter-spacing, Text Secondary)
"STAGE CLEARED" (DM Mono 24px, lime, letter-spacing 0.06em)
Reward rows (Surface cards):
Score ........ [number in lime]
Credits ...... [number in credit amber]
Pilot XP ..... [number in blue]
Shards ....... [number in teal]
Bonus row (lime-tinted bg, lime border):
[NO DAMAGE badge] +150 bonus XP
Actions:
RETURN TO STATION (primary — lime)
REPLAY STAGE (secondary — border)Header: "Codex" title + discovery count (lime, DM Mono) + search icon
Category tabs: horizontal scroll — lime underline active tab
Entry list:
Discovered: Surface card, left accent strip (category color), title, trigger hint
Unread: small lime dot top-right
Undiscovered: 30% opacity, "???" title, category hint
Category accent colors:
Telos: #d4548a (magenta)
Veiled: #2dd4bf (teal)
Coalition: #42A5F5 (blue)
Key Figures: #e8b84b (gold)
Physics: #c8f542 (lime)
War: #F44336 (red)
Ships/Weapons: #8b8fa8 (gray)
Bestiary: #c47040 (warm orange)
Fragments: #a07858 (parchment)Each of the 5 campaign sectors has a distinct visual atmosphere that bleeds into UI chrome (subtle tinting) and backgrounds.
| Sector | Atmosphere | Bg description | Accent bleed |
|---|---|---|---|
| 1 Frontier | Cold, military, lonely | Dark void, sparse cold stars, blue edge light | None — pure operational |
| 2 Long Reach | Weary, dusty, long war | Warm gray-black, faint debris silhouettes | Slight warm edge |
| 3 Veil | Strange beauty | Soft nebula at edges, teal-purple, Telos shipyard silhouettes | Teal edge glow |
| 4 Ergosphere | Gravitational pull | Accretion disc warm glow at bottom, Tartarus-9 implied | Warm orange edge |
| 5 Apparatus | Physics breaking | Black hole dominant, abstract geometry, light bending | Near-white contrast |
Each boss must visually communicate its narrative role.
Reverent Maelin (S6): Enhanced ace pilot ship — Telos Magenta dominant, prayer text bands on hull, psalm lines visible. Feels human — an ace pilot, not a god.
Final Chorus (S12): 4-ship formation in liturgical cross pattern. Each ship identical. Their beauty comes from the formation, not the individual.
Inquisitor Cohort (S18): Cold blue-white (#90CAF9) — clinical, surgical. Anti-apostate aesthetic. No warmth.
Mathematician-Saint Voren (S24): Pentagon/hexagonal geometry — mathematical perfection. Gold dominant. Symmetrical in Phase 1; Phase 3 shows cracks in the symmetry (3px missing from each corner).
Architect-Saint Halen (S30): Most important boss design. Three phases:
Concept: H-1 Vanguard silhouette (the player's first ship) centered on near-black background. Lime engine trail below. The trail is the most visually prominent element — this is a game about movement.
Specifications:
#0a0c10 (Space Black)#8b8fa8 (Hull Mid) — just bright enough to read#c8f542 (lime) — the dominant visual elementWhen designing anything for Tao Baryon, ask:
The game's visual argument is that matter — as it is, right now, in this imperfect vacuum state — is worth fighting for. The design should feel like something worth preserving: not flashy, not baroque, not desperate to impress. Just present, precise, and alive.
All files are in the Tao Baryon GDD folder on Google Drive:
25_visual_identity.md — Complete color system, typography, sprite style19_hud.md — All 15 HUD elements, animations, states20_menus.md — All 6 meta screens, navigation architecture26_vfx_sfx.md — All particle systems, VFX specifications27_spritesheets.md — All 42 spritesheet files with exact dimensions08_bosses.md — Full boss design, dialogue trees, phase transitions24_audio.md — Music direction, Halen piano motif, 8-second silencetao_baryon_mockups.html — Interactive theme explorer with 8 screens × 6 palettesDocument version: 1.0 Prepared by: CDL Production For use with: Claude Design, Krita-MCP, and all visual asset production