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.
160 lines
6.6 KiB
HTML
160 lines
6.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body {
|
|
background:#0A0A0A; color:#fff;
|
|
font-family:'Space Grotesk', system-ui, sans-serif;
|
|
padding:36px 40px 44px;
|
|
-webkit-font-smoothing:antialiased;
|
|
}
|
|
.display { font-family:'Bebas Neue', sans-serif; letter-spacing:.05em; text-transform:uppercase; }
|
|
h1 { font-family:'Bebas Neue',sans-serif; letter-spacing:.06em; font-size:34px; }
|
|
.sub { color:#a1a1aa; font-size:13px; margin-top:4px; margin-bottom:26px; }
|
|
.row {
|
|
display:grid; grid-template-columns:200px 1fr; gap:28px;
|
|
align-items:center;
|
|
padding:22px 0; border-top:1px solid #27272a;
|
|
}
|
|
/* left: raw swatch + name */
|
|
.swatch { height:120px; border-radius:8px; }
|
|
.name { font-family:'Bebas Neue',sans-serif; letter-spacing:.06em; font-size:26px; margin-top:12px; }
|
|
.hex { color:#71717a; font-size:13px; font-variant-numeric:tabular-nums; }
|
|
|
|
/* right: vignette strip */
|
|
.vignette { display:flex; gap:20px; align-items:stretch; flex-wrap:nowrap; }
|
|
.card {
|
|
background:#18181b; border:1px solid #27272a; border-left:4px solid var(--a);
|
|
border-radius:8px; padding:14px 16px; width:230px;
|
|
}
|
|
.card .label { font-family:'Bebas Neue',sans-serif; letter-spacing:.12em; font-size:13px; color:var(--a); }
|
|
.card .h { font-family:'Bebas Neue',sans-serif; letter-spacing:.05em; font-size:22px; margin-top:6px; }
|
|
.card .stat { display:flex; align-items:baseline; gap:8px; margin-top:8px; }
|
|
.card .stat .n { font-size:30px; font-weight:700; font-variant-numeric:tabular-nums; }
|
|
.card .stat .d { color:var(--a); font-size:14px; font-weight:600; }
|
|
|
|
.col { display:flex; flex-direction:column; gap:12px; justify-content:center; }
|
|
|
|
/* nav active state */
|
|
.nav { display:flex; gap:18px; align-items:center; }
|
|
.nav a { font-family:'Bebas Neue',sans-serif; letter-spacing:.1em; font-size:14px; color:#71717a; padding-bottom:6px; }
|
|
.nav a.active { color:var(--a); border-bottom:2px solid var(--a); }
|
|
|
|
/* badge (accent wash) */
|
|
.badge {
|
|
display:inline-block; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em;
|
|
color:var(--a); background:color-mix(in srgb, var(--a) 15%, transparent);
|
|
border:1px solid color-mix(in srgb, var(--a) 45%, transparent);
|
|
padding:4px 10px; border-radius:4px;
|
|
}
|
|
|
|
/* buttons */
|
|
.btns { display:flex; gap:10px; }
|
|
.btn-primary {
|
|
background:#fff; color:#000; font-weight:700; text-transform:uppercase; letter-spacing:.08em;
|
|
font-size:12px; padding:9px 16px; border-radius:4px; border:none;
|
|
}
|
|
.btn-accent {
|
|
background:transparent; color:var(--a); border:1px solid var(--a);
|
|
font-weight:700; text-transform:uppercase; letter-spacing:.08em;
|
|
font-size:12px; padding:9px 16px; border-radius:4px;
|
|
}
|
|
.reflabel { font-size:10px; color:#52525b; text-transform:uppercase; letter-spacing:.1em; margin-top:6px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Proof of Work — red accent candidates</h1>
|
|
<div class="sub">All on the app background #0A0A0A. White stays the primary button (reference, same in every row); red is used only as an accent: labels, active nav, card edge, stat delta, ghost button, badge.</div>
|
|
|
|
<!-- A -->
|
|
<div class="row" style="--a:#EF4444">
|
|
<div>
|
|
<div class="swatch" style="background:#EF4444"></div>
|
|
<div class="name">A · Signal Red</div>
|
|
<div class="hex">#EF4444 · Tailwind red-500 (in-family)</div>
|
|
</div>
|
|
<div class="vignette">
|
|
<div class="card">
|
|
<div class="label">Personal Record</div>
|
|
<div class="h">Back Squat</div>
|
|
<div class="stat"><span class="n">142.5</span><span class="d">▲ +5kg</span></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="nav"><a class="active">Today</a><a>History</a><a>Programs</a></div>
|
|
<span class="badge">PR · Week 6</span>
|
|
<div class="btns"><button class="btn-primary">Save workout</button><button class="btn-accent">Refine</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- B -->
|
|
<div class="row" style="--a:#DC2626">
|
|
<div>
|
|
<div class="swatch" style="background:#DC2626"></div>
|
|
<div class="name">B · Blood Red</div>
|
|
<div class="hex">#DC2626 · Tailwind red-600 (deeper)</div>
|
|
</div>
|
|
<div class="vignette">
|
|
<div class="card">
|
|
<div class="label">Personal Record</div>
|
|
<div class="h">Back Squat</div>
|
|
<div class="stat"><span class="n">142.5</span><span class="d">▲ +5kg</span></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="nav"><a class="active">Today</a><a>History</a><a>Programs</a></div>
|
|
<span class="badge">PR · Week 6</span>
|
|
<div class="btns"><button class="btn-primary">Save workout</button><button class="btn-accent">Refine</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- C -->
|
|
<div class="row" style="--a:#FF3B30">
|
|
<div>
|
|
<div class="swatch" style="background:#FF3B30"></div>
|
|
<div class="name">C · Vermilion</div>
|
|
<div class="hex">#FF3B30 · hot orange-red</div>
|
|
</div>
|
|
<div class="vignette">
|
|
<div class="card">
|
|
<div class="label">Personal Record</div>
|
|
<div class="h">Back Squat</div>
|
|
<div class="stat"><span class="n">142.5</span><span class="d">▲ +5kg</span></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="nav"><a class="active">Today</a><a>History</a><a>Programs</a></div>
|
|
<span class="badge">PR · Week 6</span>
|
|
<div class="btns"><button class="btn-primary">Save workout</button><button class="btn-accent">Refine</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- D -->
|
|
<div class="row" style="--a:#E11D48">
|
|
<div>
|
|
<div class="swatch" style="background:#E11D48"></div>
|
|
<div class="name">D · Crimson</div>
|
|
<div class="hex">#E11D48 · cooler, pink-edge (rose-600)</div>
|
|
</div>
|
|
<div class="vignette">
|
|
<div class="card">
|
|
<div class="label">Personal Record</div>
|
|
<div class="h">Back Squat</div>
|
|
<div class="stat"><span class="n">142.5</span><span class="d">▲ +5kg</span></div>
|
|
</div>
|
|
<div class="col">
|
|
<div class="nav"><a class="active">Today</a><a>History</a><a>Programs</a></div>
|
|
<span class="badge">PR · Week 6</span>
|
|
<div class="btns"><button class="btn-primary">Save workout</button><button class="btn-accent">Refine</button></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|