# Inspiration & provenance Proof of Work's design was **extracted document-as-is** (Case B) from the existing code on 2026-06-19 — there were no prior brand guidelines and no external reference set. So for this repo the "inspiration" is the **as-built UI itself**, plus the brand mark. This folder records the *why/where* behind the contract. ## De-facto references (the source the look was harvested from) - **Brand mark** — [`../brand/logo-kettlebell.png`](../brand/logo-kettlebell.png): a pure-white kettlebell silhouette on near-black. It establishes the core identity directly: **monochrome, white-on-black, no color in the mark.** Everything else follows from this. - **As-built styling surfaces** (where every value was censused by Tailwind-class frequency): - `proof-of-work/app/globals.css` — base bg, heading treatment, scrollbar, layout vars. - `proof-of-work/app/layout.tsx` — fonts (Bebas Neue display, Space Grotesk body), theme color. - `proof-of-work/tailwind.config.ts` — font-family wiring, spacing/radius extensions. - `proof-of-work/components/**` + `proof-of-work/app/main/**` — the inline utility classes that were frequency-ranked to find the canonical neutral (zinc), surface ladder, type scale, radii, and the white-primary / red-error patterns. - `proof-of-work/public/manifest.json` — `theme_color`/`background_color` `#0A0A0A` (the external anchor that confirmed the canonical canvas color). ## Owner decisions captured in the reconcile (2026-06-19) The extract was literal except for two owner-driven calls: 1. **Red promoted to a brand accent.** As-built, red was error/destructive only. The owner chose to elevate it to *the* accent (still keeping white as the primary button). Canonical red = **`#DC2626`** (Tailwind red-600, "Blood Red"), which also re-tints the error states so the UI carries a single coherent red. - The candidates that were compared on the real `#0A0A0A` background: [`red-accent-candidates.png`](./red-accent-candidates.png) (rendered from [`red-accent-candidates.html`](./red-accent-candidates.html)). Options were Signal `#EF4444`, Blood `#DC2626` *(chosen)*, Vermilion `#FF3B30`, Crimson `#E11D48`. 2. **Two-tier radius rule.** The code mixed 4px (`rounded`) and 8px (`rounded-lg`) with no rule; the owner adopted **4px for controls, 8px for containers**. Everything else (zinc as the one neutral, white primary button, Bebas-uppercase-tracked headings, flat/border-based depth, dense small type scale) is the as-built look, documented faithfully in [`../DESIGN.md`](../DESIGN.md).