---
description: Genesis Colonies industrial sci-fi UI — angular panels, no pill/mobile-app look
alwaysApply: true
---

# Genesis Colonies — UI Design Language

Genesis Colonies uses a **sharp, industrial sci-fi** visual language (military / technical / colony-industrial).

## Forbidden

- Large `border-radius` on panels, cards, modals, popovers, tooltips
- Modern **pill** buttons or chip styling (`border-radius: 999px`, fully rounded badges)
- Strongly rounded cards or bubble / mobile-app aesthetics
- Soft, consumer-SaaS rounding as default for new components

## Required

- Rectangular panels with clear edges
- Thin, technical borders
- Subtle chamfered or square corners only
- Sci-fi / military / industrial tone

## Radius guidelines

| Element | Radius |
|---------|--------|
| Panels / cards | 0–4px (prefer **0–2px**) |
| Buttons | max **2–4px** |
| Chips / badges | angular — use `--gc-radius-sm` (2px), not pills |
| Modals / popovers / tooltips | same as panels |

Use existing tokens in `static/style.css`:

- `--gc-radius-xs` (0px) through `--gc-radius-lg` (4px)
- `--gc-radius-pill` is **2px** in this project — not a true pill; do not use `999px` for new UI

**Exception:** `border-radius: 50%` only for intentional circles (avatars, status dots, orbital markers).

## When building or reviewing UI

1. Prefer `var(--gc-radius-sm)` or `0` over literal `6px+` or `999px`.
2. On PE / expansion / command-map work, audit new classes for accidental rounding.
3. Match surrounding `gc-btn`, `gc-panel`, and HUD patterns — do not introduce a softer sub-style.

## Known PE outliers (align when touching those files)

- `.pe-tech-reward-chip` — currently `999px`; should become `--gc-radius-sm` in a focused UI pass.

## Global shared components — no accidental layout regressions

Existing **global UI components must not unintentionally change layout** during feature work.

Especially protected:

- Queue cards (`.gc-card-queue-*`, `.gc-mini-queue-*`)
- Header / planet switcher
- Resource bar
- Fleet header
- Sidebar navigation
- Card system (`.gc-building-card`, `.gc-research-card`, `.gc-panel`, …)

When editing shared CSS (`.gc-*`, `.card-*`, `.queue-*`, `.header-*`):

1. **Grep** which templates/pages still use the class.
2. Check whether the change affects **all** consumers (Buildings, Research, Shipyard, Defense, Planet Evolution, …).
3. Prefer **scoped** selectors (page prefix, component modifier) over changing a global rule.
4. Add or extend a **CSS contract test** in `tests/test_queue_card_global_ux.py` or similar when layout behavior is canonical.

### Completion report (required when global CSS changed)

If a ticket touches **global** classes (`.gc-*`, `.queue-*`, `.header-*`, `.card-*`), the implementation summary must list which pages were **visually or contract-checked**:

- [ ] Buildings
- [ ] Research
- [ ] Shipyard
- [ ] Defense
- [ ] Planet Evolution
- [ ] Overview

Unchecked pages must be called out explicitly. Takes minutes; prevents regressions like the horizontal queue card layout break.