Card Theme System
Shared visual theme for every card surface in the game — level-up reward cards, ship inventory grid, inventory hero card, and weapon popovers. Defined in engine/rendering/card-theme.ts. Provides per-rarity gradients, badge letters, accent colors, and effect tiers, plus a per-family override scheme for weapon cards keyed off damage tag.
Where it’s used
All card surfaces pull from the same theme module:
- In-game level-up cards (
hud.ts→drawRewardCardImpl) - Ship inventory grid (
CollectibleCard.tsx) - Ship inventory hero card (
SelectTab.tsx) - Weapon popover (reuses
drawRewardCard)
One theme module, one source of truth — any palette tweak propagates everywhere.
Two coloring schemes
Cards pick exactly one of two schemes for their identity color:
- By rarity — used for artifacts, modifiers, passives, ships. Five-tier jewel-tone palette.
- By weapon damage tag — used for weapon cards. Four-tag palette (bullet / energy / fire / bomb).
Per the medical-UI rollout (ADR 20260513-001, tick 78), the identity gradient is no longer a full card background — it’s painted as a header strip around the icon zone at the top of the card. The card panel itself is white (MedicalPalette.panelRaised = ffffff) with a hairline border (#cdd9e8) and a soft cool-blue drop shadow.
Rarity gradient
Each rarity is a distinct hue, saturated enough to read at small grid sizes. Rare is deep sapphire — chosen specifically so it doesn’t collide with the electric-blue energy-weapon pill.
| Rarity | Top | Bottom | Angle |
|---|---|---|---|
| common | 5a616e | 12151b | 170° |
| uncommon | 1eb74d (vivid jade) | 06200e | 170° |
| rare | 0f52ba (deep sapphire) | 050f2e | 170° |
| epic | 7b1ee0 (royal purple) | #140330 | 170° |
| legendary | f0931a (rich amber) | 2d1403 | 170° |
170° is mostly top-to-bottom with a slight lean right.
Weapon-tag gradient
Kept for any consumer that wants a full card bg colored by damage type. Level-up / reward cards have moved to the rarity gradient; damage-tag pills have their own palette in damage-tag-pill.ts.
| Tag | Top | Bottom |
|---|---|---|
| bullet | 8a8377 | 1c1b18 |
| energy | 00c8ff (hot electric blue) | 0a3a78 |
| fire | d26c1d | 3b1604 |
| bomb | 9b2014 | 2b0704 |
Corner badge
Every card has a letter grade in a circle dangling off the upper-left corner:
Badge layout (in CARD_BADGE): radius 14, dangleX 6, dangleY 6 — bigger values + less dangle means more of the badge overlaps the card surface.
Rarity accent
A neon accent color (stronger than the badge fill) used for glow and stroke effects:
Rarity effect tier
A 0–4 integer drives which animated effects layer on the card:
| Rarity | Tier | What renders |
|---|---|---|
| common | 0 | nothing |
| uncommon | 0 | nothing |
| rare | 1 | soft glow |
| epic | 2 | glow + stroke |
| legendary | 4 | glow + stroke + particles + lightning + flash |
Tier 3 (glow + stroke + particles, no lightning/flash) is reserved but currently unused — legendary jumps straight to tier 4. Spec intent: nothing for green, little for blue, medium for purple, high for legendary.
Card drop shadow
CARD_SHADOW: offsetY 4, offsetX 0, blur 8, color rgba(20, 30, 50, 0.18). Cool-blue tinted, soft, gentle — replaces the V32 hard black shadow (offset 10, blur 0, 55% alpha). Mirrors the .med-panel box-shadow in medical.css.
Exposed as a CSS string via CARD_SHADOW_CSS for DOM consumers.
Helpers
rarityGradientCss(rarity)→ CSS linear-gradient string.weaponTagGradientCss(tag)→ CSS linear-gradient string.paintCardGradient(ctx, x, y, w, h, stops)→ paints the gradient on a canvas rect. TreatsangleDegas a compass bearing (0° = top, clockwise), not the CSS convention (0° = bottom→top).
Key facts
- Rarity gradient is the identity color carrier — kept as a header strip, not the full card background, since the medical-UI rollout.
- Card panel is white with a hairline border and a cool-blue drop shadow; the rarity gradient lives at the top of the card.
- Rare is deep sapphire (#0f52ba) on purpose — separates it from energy-weapon electric blue (#00c8ff).
- Letter badges run D / C / B / A / S for common → legendary.
- Effect tier escalates discretely: 0 for common/uncommon, 1 rare, 2 epic, 4 legendary (tier 3 reserved, unused).
- All four damage tags (bullet / energy / fire / bomb) have a full-card-bg gradient available, but reward cards no longer use it — they use rarity instead.