# warcrimes.gg style guide (machine copy)

The human version is https://warcrimes.gg/style/. The tokens themselves live in
`/assets/site.css`; if this file and the CSS disagree, the CSS wins.

## Two modes, one site

Every page ships both modes. A switch at the right end of the top bar (buttons
"Dark" and "Light", `aria-pressed` on the active one) swaps them.

- First visit follows the device setting (`prefers-color-scheme`).
- A press is saved in `localStorage["vw-theme"]` ("dark" | "light") and wins after that.
- An inline head script sets `<html data-theme>` before paint. No JS: dark, switch hidden.
- Words that change per mode: `<span class="d-only">dark words</span><span class="l-only">light words</span>`.
- Both modes carry the same facts. Light mode may swap words, never numbers.

### Dark mode: War Banner

Dark iron, Horde-red banners, gold leaf. The jokes live in the words.

| Token | Hex | Use |
|---|---|---|
| Char | #110B0A | page background |
| Iron | #1C1412 | cards, top bar |
| Line | #3B2622 | borders |
| Banner Red | #6E0C13 | hero, footer, card floor behind portraits |
| Horde Red | #B0141F | primary buttons, Major badge, pressed switch |
| Gold | #D4A537 | trim, labels, borders on red |
| Bright Gold | #F2CD6B | headings, links, gold coin letter |
| Bone | #F1E7D4 | body text |
| Ash | #B5A594 | notes, secondary text |

Fonts: display Grenze Gotisch 800, headings Grenze Gotisch 600, body Alegreya Sans
400 at 18px / 1.55, labels Alegreya Sans 800 capitals spaced 0.2em.

### Light mode: The Tribunal

The site as a court case file. Members are the accused; real Blizzard stats are the charges.

| Token | Hex | Use |
|---|---|---|
| Paper | #F4EAD6 | page background |
| Folder | #E3D3B0 | cards |
| Chart | #D6C49C | height chart behind portraits |
| Ink | #241A14 | text, borders, primary buttons |
| Faded Ink | #5E5045 | notes |
| Gold Ink | #735511 | labels, gold coin letter |
| Seal Gold | #B8862B | the VW seal |
| Stamp Red | #B3121F | stamps, Major badge, secondary buttons |
| Dried Red | #7D0D16 | links |

Fonts: display Old Standard TT 700, body Courier Prime 400 at 17px, stamps and
badges Stardos Stencil 700, labels Courier Prime 700 capitals spaced 0.2em.
Redaction: text on #1B1411 in the same color.

## Item links and money

Item names in [brackets], bold, in their quality color, linked to
`https://www.wowhead.com/forever/item=<id>`.

| Quality | Dark | Light |
|---|---|---|
| Poor | #9D9D9D | #5A5A5A |
| Common | #FFFFFF | #241A14 |
| Uncommon | #1EFF00 | #166800 |
| Rare | #2B8CFF (in-game is darker) | #0058B8 |
| Epic | #B65CFF (in-game is darker) | #7B2CBF |
| Legendary | #FF8000 | #904700 |

Money is written `20s 8c` (`1g 5s`), no coin icons. Letters colored: gold
#F2CD6B / #735511, silver #C7C7CF / #5A5A63, copper #D08A52 / #8A4513 (dark / light).
All text colors meet 4.5:1 on their page and card backgrounds.

## Voice

- Deadpan. The guild name is the joke; the copy never winks.
- Dark: short plain sentences. "Twenty-four Horde. One auction house. Several incidents."
- Light: courtroom words played straight: the accused, charges, counts, exhibits,
  the docket, restitution. "235 counts of honorable killing."
- Charges are always real numbers from Blizzard's API. Never invent one.
- Zug-Zug 3000 speaks peon English ("me" for I, a dropped word). In light mode Zug is the bailiff.
- Footer, light mode: "All charges alleged · Sylvanas did nothing wrong".

| Where | Dark | Light |
|---|---|---|
| Member list | The Warband / The roster | The docket / N accused |
| Card stats | Record | Charges, "N counts: ..." |
| Guides | Guides | Exhibits (Exhibit A, B, ...) |
| Upgrade chart | Upgrades Levin can make for Jikanta | Levin is ordered to craft the following for Jikanta (Exhibit A · Restitution) |
| Badges | Major / Minor | MAJOR UPGRADE / MINOR UPGRADE stamps |
| Card stamp | none | GUILTY (red) / AT LARGE (gold) |

## Components

- Buttons: 48px tall, capitals spaced 0.08em. Primary = Horde Red + gold border (dark) or Ink (light). Secondary = gold outline (dark) or Stamp Red 2px outline (light).
- Member card: portrait area 400px tall (320px on phones). Dark: Banner Red block with gold top border and a thin inner gold line, 78% of the height. Light: height chart (5 ft to 1 ft) inset 24px. Cutout stands on the bottom edge, head breaking out above. Then rank label, name (display font), class · level · race, spec and professions, and a 4-line Record/Charges list.
- Roster entry: name, "Level N Class · Race". Dark: 4px left edge in WoW class color. Light: "Case No. 001" instead.
- Upgrade chart: Slot, Item, Upgrade (badge + "over X" / "empty slot"), Mats (money), Recipe (source + cost). Caption states the AH price time and gear date. Scrolls sideways on phones.

## Portraits

- Fierce chibi for every member (no baby faces; mood matches the scene).
- Render alone on a plain background; other figures get cut out with the character.
- Cut out with ComfyUI's BiRefNet (on CPU while WoW runs), crop to figure + 12px,
  720px tall, WebP with alpha. Source PNGs go in `~/workspace/warcrimes-site/src/portraits/<slug>.png`.

## Build

`python3 ~/workspace/warcrimes-site/build.py` writes `/srv/warcrimes-public`.
Roster comes from `/srv/wowguild/armory/roster.json` (+ `chars/*.json` levels);
card copy and stats from `data/featured.json`.