Palette & Color Library v1.0

Status: Accepted for Sprint 1.2

Scope: characters, enemies, bosses, backgrounds, UI, VFX, lighting, and materials.

This library is the single source of truth for color use in Streetline Heroes. No asset may introduce private colors without expanding this library and its machine-readable palette tokens.

1. Palette Philosophy

Streetline Heroes uses limited palettes because restraint creates identity. Color is not decoration; color is gameplay information.

| Principle | Studio rule |

| --- | --- |

| Limited palettes | Every asset must use approved palette tokens and stay within its color budget. |

| Color consistency | Heroes, enemies, bosses, UI, FX, and environments share hue families intentionally. |

| Gameplay readability | Player, threat, danger, healing, interactable, and impact colors must remain distinct at combat scale. |

| Emotional color choices | Warm colors suggest heroism, impact, sunset, heat, and reward; cool colors suggest shadow, night, steel, energy, and danger tension. |

| No random colors | A color must have an ID, allowed usage, and QA purpose. |

| Color = information | If a hue communicates state, team, damage, resource, or rarity, it must stay stable across the game. |

2. Master Palette

| Group | Name | Description | HEX | RGB | HSV | Gebruik |

| --- | --- | --- | --- | --- | --- | --- |

| Neutral | Ink Slate | Deep non-black neutral for text and strongest outlines. | #171923 | 23,25,35 | 230,34,14 | UI text, deepest non-black outline. |

| Steel | Steel Blue | Cool metal midtone. | #5F7A8A | 95,122,138 | 202,31,54 | Steel, weapons, armor. |

| Warm | Sunset Amber | Warm key-light highlight. | #F2A65A | 242,166,90 | 30,63,95 | Golden-hour highlights. |

| Cold | Night Cyan | Cool blue light accent. | #4CC9F0 | 76,201,240 | 194,68,94 | Rim light, cold UI, night accents. |

| Leather | Oiled Brown | Warm leather midtone. | #7A4A2E | 122,74,46 | 22,62,48 | Leather, straps, gloves. |

| Skin | Hero Skin Warm | Warm skin base. | #C9825A | 201,130,90 | 22,55,79 | Skin midtone. |

| Stone | Concrete Gray | Urban matte gray. | #7E8589 | 126,133,137 | 202,8,54 | Stone, concrete, city props. |

| Energy | Nova Cyan | Heroic energy core. | #2DE2E6 | 45,226,230 | 181,80,90 | Nova energy, clean tech glow. |

| Electricity | Lightning Gold | Electric yellow core. | #F8E16C | 248,225,108 | 50,56,97 | Lightning and electric impacts. |

| Nature | Moss Green | Muted organic accent. | #4F7F52 | 79,127,82 | 124,38,50 | Forest, decay, environmental accents. |

| UI | Panel Navy | Default UI panel base. | #1D2B53 | 29,43,83 | 224,65,33 | Panels, HUD base. |

| Warning | Warning Orange | Caution and pending actions. | #FFB000 | 255,176,0 | 41,100,100 | Warnings, charge states. |

| Danger | Impact Red | Damage, failure, critical threat. | #E63946 | 230,57,70 | 356,75,90 | Danger UI, enemy hit states. |

| Healing | Health Green | Healing and recovery state. | #52D273 | 82,210,115 | 135,61,82 | Health, pickups, success recovery. |

| Magic | Mystic Violet | Rare or supernatural energy. | #8E5CF7 | 142,92,247 | 259,63,97 | Mystic VFX, rare highlights. |

| Shadow | Shadow Purple | Shared cool shadow family. | #2B1B3F | 43,27,63 | 267,57,25 | Sprite shadows, deep folds. |

| Ambient | Ambient Blue | Low fill light. | #355070 | 53,80,112 | 213,53,44 | Ambient fill, nighttime forms. |

| Highlight | Pixel Ivory | Reserved brightest highlight. | #F8F1E5 | 248,241,229 | 38,8,97 | Tiny highlights, UI text, energy cores. |

3. Hero Palettes

Detailed hero palette rules live in [HeroPalette.md](palettes/HeroPalette.md).

| Hero | Primary | Secondary | Accent | Glow | Shadow | Highlight | Outline |

| --- | --- | --- | --- | --- | --- | --- | --- |

| Nova Striker | Nova Cyan | Deep Indigo | Sunset Amber | Clean cyan | Shadow Purple | Pixel Ivory | Dark cyan-purple |

| Vanguard | Steel Blue | Hero Red | Shield Gold | Cool blue | Shadow Purple | Sunset Amber | Navy steel |

| Liberty Guard | Civic Blue | Signal Red | Polished Silver | Warm white | Shadow Purple | Pixel Ivory | Dark blue-red |

| Thunder Chief | Storm Blue | Weathered Brown | Lightning Gold | Lightning Gold | Shadow Purple | Pixel Ivory | Dark storm navy |

| Colossus Prime | Heavy Graphite | Armor Warm Gray | Reactor Teal | Reactor teal | Shadow Purple | Pixel Ivory | Graphite purple |

Material colors must come from the material group tokens. Forbidden colors include pure black #000000, unregistered white, unregistered neon colors, and background-only colors inside hero silhouettes.

4. Enemy Palettes

Enemy palette rules live in [EnemyPalette.md](palettes/EnemyPalette.md).

Enemy classes use lower saturation than heroes. Their accents communicate threat type, not personality.

| Enemy class | Base | Accent | Threat read |

| --- | --- | --- | --- |

| Syndicate Enforcer | Gunmetal, Oiled Brown | Impact Red | Durable melee threat. |

| Syndicate Brawler | Denim, Rubber Dark | Warning Orange | Fast pressure threat. |

| Ranged enemy | Desaturated Steel | Danger Red | Projectile threat. |

| Elite enemy | Gunmetal | Mystic Violet | Special behavior. |

5. Boss Palettes

Boss palette rules live in [BossPalette.md](palettes/BossPalette.md).

Boss palettes may use stronger contrast than standard enemies but must not steal hero identity colors unless narratively justified.

| Boss class | Palette direction | Rule |

| --- | --- | --- |

| Crime Boss | Gold, Gunmetal, Danger Red | High contrast, luxury threat. |

| Heavy Boss | Gunmetal, Shadow Purple, Warning Orange | Large mass readability. |

| Mystic Boss | Mystic Violet, Shadow Purple, Pixel Ivory | Supernatural signal. |

6. Environment Palettes

Environment palette rules live in [EnvironmentPalette.md](palettes/EnvironmentPalette.md).

| Environment | Palette direction |

| --- | --- |

| Waterfront | blues, wet concrete, sunset reflection |

| Rooftop | sunset amber, shadow purple, night cyan |

| Industrial | gunmetal, warning orange, concrete gray |

| Harbor | steel blue, water cyan, moss green |

| Warehouse | brick, dusty concrete, leather browns |

| Subway | panel navy, concrete, emergency accents |

| Sewer | moss green, concrete, shadow purple |

| Forest | moss green, wood, ambient blue |

| Mountain | stone, ice, cold blue |

| Temple | bronze, stone, mystic violet |

| Night | ambient blue, shadow purple, pixel ivory |

| Sunset | sunset amber, warm skin, purple shadow |

| Rain | water cyan, steel blue, low saturation |

| Snow | ice cyan, pixel ivory, ambient blue |

7. UI Palette

UI palette rules live in [UIPalette.md](palettes/UIPalette.md).

| UI use | Color group |

| --- | --- |

| Health | Healing and danger blends |

| Mana | Mystic Violet |

| Energy | Nova Cyan / Lightning Gold |

| XP | Warning Orange / Gold |

| Buttons | Panel Navy, Pixel Ivory |

| Panels | UI Panel Navy |

| Text | Pixel Ivory, Ink Slate |

| Selection | Nova Cyan or Warning Orange |

| Warnings | Warning Orange |

| Success | Health Green |

| Failure | Impact Red |

8. FX Palette

FX palette rules live in [FXPalette.md](palettes/FXPalette.md).

| FX | Palette |

| --- | --- |

| Fire | Pixel Ivory, Sunset Amber, Impact Red |

| Explosion | Warning Orange, Impact Red, Dust Brown |

| Lightning | Pixel Ivory, Lightning Gold, Night Cyan |

| Dust | Warm gray, Oiled Brown, Shadow Purple |

| Smoke | Concrete Gray, Ambient Blue, Shadow Purple |

| Energy | Nova Cyan, Mystic Violet, Pixel Ivory |

| Impact | Pixel Ivory, Warning Orange, Impact Red |

| Blood, if used | Impact Red plus dark red-brown only, with restraint |

9. Lighting Palette

Lighting palette rules live in [LightingPalette.md](palettes/LightingPalette.md).

| Lighting setup | Key colors |

| --- | --- |

| Golden Hour | Sunset Amber, Pixel Ivory, Shadow Purple |

| Sunset | Sunset Amber, Impact Red accents, Ambient Blue |

| Night | Ambient Blue, Night Cyan, Shadow Purple |

| Moonlight | Night Cyan, Pixel Ivory, Ambient Blue |

| Indoor | Warm Amber, Panel Navy shadows |

| Industrial | Steel Blue, Warning Orange, Concrete Gray |

| Emergency | Impact Red, Warning Orange, Shadow Purple |

| Laboratory | Night Cyan, Pixel Ivory, Steel Blue |

| Mystic | Mystic Violet, Shadow Purple, Pixel Ivory |

10. Hue Shifting Rules

Hue shifting keeps ramps alive.

| Color family | Highlight shift | Midtone | Shadow shift |

| --- | --- | --- | --- |

| Red | toward orange | local red | toward purple/brown |

| Orange | toward yellow | local orange | toward red/brown |

| Yellow | toward ivory | local yellow | toward orange/brown |

| Green | toward yellow-green | local green | toward blue-green |

| Blue | toward cyan | local blue | toward violet/navy |

| Purple | toward magenta/ivory | local purple | toward deep blue |

| Brown | toward amber | local brown | toward purple-brown |

| Gray | toward warm ivory | neutral gray | toward blue-purple |

Example:

flat red ramp:     red -> dark red -> darker red

approved red ramp: orange highlight -> red mid -> purple-brown shadow

11. Contrast Rules

| Layer | Minimum relative contrast target | Rule |

| --- | --- | --- |

| Heroes | 4.5:1 between silhouette and active background | Must read at 50% scale. |

| Enemies | 3.5:1 against background | Threat class must remain readable. |

| Backgrounds | Lower than foreground by design | Never compete with active characters. |

| Foreground props | 3:1 against background | Interactive props may exceed this. |

| UI text | 4.5:1 minimum | Critical UI should target 7:1. |

| VFX | High local contrast for impact frame | Must not obscure gameplay state. |

12. Accessibility

Accessibility palette rules live in [AccessibilityPalette.md](palettes/AccessibilityPalette.md).

| Mode | Adjustment |

| --- | --- |

| Deuteranopia | Shift red/green state contrast toward blue/yellow and icon support. |

| Protanopia | Avoid red-only danger signals; use value, shape, and warning orange. |

| Tritanopia | Avoid blue/yellow-only resource separation; use magenta/cyan/value shape. |

| Low Vision | Increase value contrast, simplify background saturation, thicken UI states. |

13. Palette Tokens

Machine-readable palette tokens live in assets/definitions/palettes/:

• hero.palette.yaml
• enemy.palette.yaml
• ui.palette.yaml
• environment.palette.yaml
• fx.palette.yaml
• lighting.palette.yaml

Each token includes id, name, hex, rgb, hsv, category, material, and allowed_usage.

14. QA Checklist

□ palette compleet

□ geen dubbele ids

□ correcte HEX

□ correcte HSV

□ correcte RGB

□ schema valid

□ contrast voldoet

□ accessibility aanwezig

Run pnpm validate:palette or pnpm qa before committing palette changes.