Keysat
7fda9ceb7e
Case-B extract of the as-built dark UI into design/: 9-section DESIGN.md, W3C DTCG tokens.tokens.json, brand/palette.css + assets, and inspiration/ provenance (incl. the rendered red-shade decision). Two owner calls layered in: red elevated to the single brand accent (#DC2626), two-tier radius (4px controls / 8px containers). AGENTS.md gains the read-before-UI Design line + design/ in the layout tree; ROADMAP gains the design-checker cleanup backlog. No UI code changed.
41 lines
2.6 KiB
Markdown
41 lines
2.6 KiB
Markdown
# 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).
|