julian
8223a566e4
A design handoff bundle generated by Claude Design (claude.ai/design) on 2026-05-02. Defines the Bloomberg/F1-pit-wall aesthetic for TRM: - ink-on-paper base + race-flag red accent (#E8412B) - square-edged everything, sharp printed offset shadows - mono numerics (JetBrains Mono) for any changing value - Goldplay (real licensed font, three weights in bundle fonts/) - four surfaces designed: dashboard / leaderboard / mobile / marketing (SPA scope is the first two) The bundle is committed in-tree at TRM_Design_System-handoff/ so 3.8 has the full source material when it picks the work up. Includes: - Top-level + project READMEs (the design spec) - chats/chat1.md (intent + iteration history) - colors_and_type.css (token set, drop-in for Tailwind 4 @theme) - fonts/ (Goldplay regular/semibold/bold) - ui_kits/ (HTML prototypes per surface) - preview/ (per-token visual reference cards) Updated phase-3-dogfood-readiness/README.md task 3.8 row to point at the bundle and document the recommended approach (retheme shadcn via CSS variable overrides + Tailwind 4 @theme, not replace). Why deferred: foundational tokens are non-blocking for Phase 1 (login + placeholder home) and Phase 2 (live map without chrome). Applying them now would either delay dogfood-blocking work or land partial styling that gets reworked when 3.8 lands the full pass.
CODING AGENTS: READ THIS FIRST
This is a handoff bundle from Claude Design (claude.ai/design).
A user mocked up designs in HTML/CSS/JS using an AI design tool, then exported this bundle so a coding agent can implement the designs for real.
What you should do — IMPORTANT
Read the chat transcripts first. There are 1 chat transcript(s) in trm-design-system/chats/. The transcripts show the full back-and-forth between the user and the design assistant — they tell you what the user actually wants and where they landed after iterating. Don't skip them. The final HTML files are the output, but the chat is where the intent lives.
Find the primary design file under trm-design-system/project/ and read it top to bottom. The chat transcripts will tell you which file the user was last iterating on. Then follow its imports: open every file it pulls in (shared components, CSS, scripts) so you understand how the pieces fit together before you start implementing.
If anything is ambiguous, ask the user to confirm before you start implementing. It's much cheaper to clarify scope up front than to build the wrong thing.
About the design files
The design medium is HTML/CSS/JS — these are prototypes, not production code. Your job is to recreate them pixel-perfectly in whatever technology makes sense for the target codebase (React, Vue, native, whatever fits). Match the visual output; don't copy the prototype's internal structure unless it happens to fit.
Don't render these files in a browser or take screenshots unless the user asks you to. Everything you need — dimensions, colors, layout rules — is spelled out in the source. Read the HTML and CSS directly; a screenshot won't tell you anything they don't.
Bundle contents
trm-design-system/README.md— this filetrm-design-system/chats/— conversation transcripts (read these!)trm-design-system/project/— theTRM Design Systemproject files (HTML prototypes, assets, components)