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.
23 lines
1002 B
React
23 lines
1002 B
React
// TopBar — sticky header for the dashboard.
|
|
function TopBar({ clock }) {
|
|
return (
|
|
<header className="kit-top">
|
|
<div className="kit-brand">
|
|
<img src="../../assets/logo-trm.png" alt="TRM" />
|
|
<span className="b-meta">Dashboard</span>
|
|
</div>
|
|
<div className="kit-search">
|
|
<i data-lucide="search" style={{ width: 14, height: 14, color: 'var(--ink-3)' }}></i>
|
|
<input placeholder="Search events, bibs, athletes…" />
|
|
</div>
|
|
<div className="kit-top-actions">
|
|
<span className="pill live"><span className="dot"></span>LIVE · 1 EVENT</span>
|
|
<span className="kit-clk">{clock}</span>
|
|
<i data-lucide="bell" style={{ width: 18, height: 18 }}></i>
|
|
<div style={{ width: 28, height: 28, border: '1px solid var(--ink)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600 }}>JR</div>
|
|
</div>
|
|
</header>
|
|
);
|
|
}
|
|
window.TopBar = TopBar;
|