F20.2 — Dowsing Machine inspired visual identity (light + dark)

[jbourdin]

Summary

Restyle the visual identity of the application to draw inspiration from the Pokémon TCG Dowsing Machine ACE SPEC trainer card. The treatment applies to both the light and dark themes of the default Expanded Decks theme.

The Dowsing Machine card aesthetic — a dark navy/black metallic device, gold/yellow accents, a red focal element, fine engraved/circuit-style detailing on a muted neutral background — gives the app a distinct, on-brand TCG feel without leaning into a generic "gamer" look.

Restraint, not pastiche. The goal is evocation, not imitation. The card's visual language informs hue, weight, and accent placement — it does not turn the app into a graphic of the card. No literal card scans, no faux-metal textures everywhere, no busy circuit patterns behind body text.

Why

• The current default palette (navy / blue / gold / red on near-white) is functional but generic. A more deliberate visual identity strengthens the product's recognizability.
• The Dowsing Machine card is thematically apt: the app is a tool for finding the right deck — it dowses through the library.
• A unified treatment across light and dark means we set the brand once, not twice.

Scope

• In scope: the default Expanded Decks theme (assets/styles/app.scss + any assets/react/ styling that feeds it). Light variant and dark variant.
• Out of scope: the expandedtalks channel theme (it has its own visual identity). Email templates. PDF labels. Card images.

Visual direction (reference, not literal)

Pull from the card, but adapt for screen / accessibility:

Card element	App translation
Dark navy/charcoal device	Dark mode primary surface; light mode deep accent (navbar, footer, headings)
Gold/yellow rim & lettering	Primary accent on CTAs, focused inputs, active nav, badges
Red focal button	Destructive actions only (delete, decline, cancel) — sparingly
Muted parchment/cream backdrop	Light mode body background (warmer than current #f5f5f7)
Engraved fine detail	Subtle border treatments, divider lines — never busy textures
ACE SPEC frame typography	Inspires a slightly more confident heading weight; do not change body type

Picking concrete hex values is part of the implementation — propose them in the PR with side-by-side mockups against the current palette before adopting.

Acceptance criteria

• Light theme and dark theme each have a deliberate, documented palette inspired by the card (palette listed in docs/frontend.md or a new docs/standards/visual_identity.md).
• Primary accent (gold) is used consistently for CTAs, active states, and focus rings on both themes.
• Red is reserved for destructive actions (matches the card's single red button).
• AA contrast holds on both themes for body text, links, badges, form controls, and disabled states.
• No raster textures or "metal" gradients are introduced behind text. Detail comes from spacing, weight, and 1–2 px borders / dividers.
• Navbar, footer, buttons, badges, cards, tables, forms, alerts/toasts, and modals all reflect the new palette consistently.
• Mantine theme object (MantineProvider theme={...}) is updated with the new primary color so React islands match.
• Side-by-side before/after screenshots posted on the PR for: homepage, deck list, deck detail, deck form, event detail, login.
• One core maintainer signs off on the visual direction before merge (this is taste-driven, not just spec-driven).

How to approach

1. Mood board first. Drop the card image and 3–5 reference screens (current app, plus 2–3 apps you find tasteful) into the PR description as the very first commit. Get directional approval before touching code.
2. Pick the palette. Define ~8 tokens per theme (background, surface, surface-elevated, border, text-primary, text-muted, accent-gold, accent-red). Document them.
3. Wire the tokens. Replace literal hex usage in assets/styles/app.scss with CSS custom properties keyed off :root (light) and :root[data-bs-theme="dark"] (dark).
4. Update Mantine theme. Centralised <MantineProvider theme={...}> so every island picks up the new primary color, focus ring, and radius.
5. Sweep components. Walk through the page list in the acceptance criteria and adjust component-level styles where the new palette exposes ugliness (often: hover states, disabled states, table stripes).
6. Restraint check. Before opening for review, remove anything that says "this is the Dowsing Machine card" too loudly. The user should feel it, not point at it.

Out of scope

• The expandedtalks channel theme — that channel has its own brand and stays as it is.
• Email and PDF/label visual identity (those are deliberately conservative).
• Replacing typography wholesale (only minor weight tweaks in headings if the palette demands).
• Animations / motion design.
• Logo / favicon redesign.

References

• Pokémon TCG card: Dowsing Machine (ACE SPEC trainer, Boundaries Crossed and reprints) — reference image to be attached to the PR by the implementer.