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.
2.6 KiB
2.6 KiB
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: 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:
- 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
#0A0A0Abackground:red-accent-candidates.png(rendered fromred-accent-candidates.html). Options were Signal#EF4444, Blood#DC2626(chosen), Vermilion#FF3B30, Crimson#E11D48.
- The candidates that were compared on the real
- 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.