Add a brand-color reference page
This commit is contained in:
@@ -0,0 +1,134 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Workouts — Brand Colors</title>
|
||||||
|
<style>
|
||||||
|
:root { color-scheme: light dark; }
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
|
||||||
|
background: #f5f5f7;
|
||||||
|
color: #1d1d1f;
|
||||||
|
padding: 40px 24px;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body { background: #1a1a1c; color: #f5f5f7; }
|
||||||
|
.card { background: #262629; box-shadow: 0 1px 3px rgba(0,0,0,.5); }
|
||||||
|
.hex { background: rgba(255,255,255,.08); }
|
||||||
|
}
|
||||||
|
.wrap { max-width: 920px; margin: 0 auto; }
|
||||||
|
h1 { font-size: 28px; font-weight: 700; margin-bottom: 4px; }
|
||||||
|
.sub { opacity: .6; margin-bottom: 32px; }
|
||||||
|
h2 { font-size: 18px; font-weight: 600; margin: 36px 0 14px; }
|
||||||
|
|
||||||
|
.gradient-hero {
|
||||||
|
height: 180px; border-radius: 22px; margin-bottom: 8px;
|
||||||
|
background: linear-gradient(135deg, #A04DDB 0%, #7A29C6 50%, #55189E 100%);
|
||||||
|
display: flex; align-items: center; justify-content: center;
|
||||||
|
color: #fff; font-size: 15px; letter-spacing: .3px;
|
||||||
|
text-shadow: 0 1px 4px rgba(0,0,0,.3);
|
||||||
|
}
|
||||||
|
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
|
||||||
|
.card { background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.08); }
|
||||||
|
.swatch { height: 120px; display: flex; align-items: flex-end; padding: 10px; }
|
||||||
|
.swatch .meta { font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.25); color: #fff; backdrop-filter: blur(4px); }
|
||||||
|
.body { padding: 12px 14px; }
|
||||||
|
.name { font-weight: 600; margin-bottom: 8px; }
|
||||||
|
.row { display: flex; gap: 8px; flex-wrap: wrap; }
|
||||||
|
.hex { font: 12px/1 ui-monospace, "SF Mono", Menlo, monospace; background: #f0f0f2; padding: 6px 8px; border-radius: 6px; cursor: pointer; user-select: all; }
|
||||||
|
.hex:hover { outline: 1.5px solid currentColor; }
|
||||||
|
.pair { display: flex; gap: 16px; align-items: stretch; }
|
||||||
|
.pair .card { flex: 1; }
|
||||||
|
.vs { display: flex; align-items: center; font-weight: 700; opacity: .4; font-size: 20px; }
|
||||||
|
.note { opacity: .55; font-size: 13px; margin-top: 4px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="wrap">
|
||||||
|
<h1>Workouts — Brand Colors</h1>
|
||||||
|
<div class="sub">Sampled from the app icon. Click any hex to select it.</div>
|
||||||
|
|
||||||
|
<h2>App icon gradient</h2>
|
||||||
|
<div class="gradient-hero">linear-gradient(135deg, #A04DDB → #7A29C6 → #55189E)</div>
|
||||||
|
<div class="note">Hue ~271° — violet/purple (not magenta, which would be ~300°).</div>
|
||||||
|
|
||||||
|
<h2>Brand purple (gradient stops)</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#A04DDB"><span class="meta">light · hue 275°</span></div>
|
||||||
|
<div class="body"><div class="name">Light</div><div class="row"><span class="hex">#A04DDB</span><span class="hex">rgb(160,77,219)</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#7A29C6"><span class="meta">mid · hue 271°</span></div>
|
||||||
|
<div class="body"><div class="name">Mid (primary)</div><div class="row"><span class="hex">#7A29C6</span><span class="hex">rgb(122,41,198)</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#55189E"><span class="meta">dark</span></div>
|
||||||
|
<div class="body"><div class="name">Dark</div><div class="row"><span class="hex">#55189E</span><span class="hex">rgb(85,24,158)</span></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Complement (opposite on the color wheel, hue ~91°)</h2>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#88DB4D"><span class="meta">light · hue 95°</span></div>
|
||||||
|
<div class="body"><div class="name">Lime (light)</div><div class="row"><span class="hex">#88DB4D</span><span class="hex">rgb(136,219,77)</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#75C629"><span class="meta">mid · hue 91°</span></div>
|
||||||
|
<div class="body"><div class="name">Lime (primary)</div><div class="row"><span class="hex">#75C629</span><span class="hex">rgb(117,198,41)</span></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Teal alternative (hue ~174°)</h2>
|
||||||
|
<div class="note" style="margin-bottom:14px;">A softer, less aggressive accent than lime — sits ~90° from the purple rather than directly opposite, so it harmonizes more.</div>
|
||||||
|
<div class="grid">
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#2DD4BF"><span class="meta">light · hue 173°</span></div>
|
||||||
|
<div class="body"><div class="name">Teal (light)</div><div class="row"><span class="hex">#2DD4BF</span><span class="hex">rgb(45,212,191)</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#17A398"><span class="meta">mid · hue 175°</span></div>
|
||||||
|
<div class="body"><div class="name">Teal (primary)</div><div class="row"><span class="hex">#17A398</span><span class="hex">rgb(23,163,152)</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#0F766E"><span class="meta">dark</span></div>
|
||||||
|
<div class="body"><div class="name">Teal (dark)</div><div class="row"><span class="hex">#0F766E</span><span class="hex">rgb(15,118,110)</span></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Side by side — purple vs. each accent</h2>
|
||||||
|
<div class="pair">
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#7A29C6"><span class="meta">brand</span></div>
|
||||||
|
<div class="body"><div class="name">Purple</div><div class="row"><span class="hex">#7A29C6</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="vs">⟷</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#75C629"><span class="meta">complement</span></div>
|
||||||
|
<div class="body"><div class="name">Lime</div><div class="row"><span class="hex">#75C629</span></div></div>
|
||||||
|
</div>
|
||||||
|
<div class="vs">⟷</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="swatch" style="background:#17A398"><span class="meta">alternative</span></div>
|
||||||
|
<div class="body"><div class="name">Teal</div><div class="row"><span class="hex">#17A398</span></div></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<h2>Contrast check — accents on purple</h2>
|
||||||
|
<div class="pair" style="gap:16px;">
|
||||||
|
<div class="gradient-hero" style="flex:1; background:linear-gradient(135deg,#A04DDB,#55189E); gap:16px; margin:0;">
|
||||||
|
<span style="background:#75C629; color:#1d1d1f; padding:10px 22px; border-radius:12px; font-weight:700; text-shadow:none;">Start</span>
|
||||||
|
<span style="background:#88DB4D; color:#1d1d1f; padding:10px 22px; border-radius:12px; font-weight:700; text-shadow:none;">Done</span>
|
||||||
|
</div>
|
||||||
|
<div class="gradient-hero" style="flex:1; background:linear-gradient(135deg,#A04DDB,#55189E); gap:16px; margin:0;">
|
||||||
|
<span style="background:#2DD4BF; color:#1d1d1f; padding:10px 22px; border-radius:12px; font-weight:700; text-shadow:none;">Start</span>
|
||||||
|
<span style="background:#17A398; color:#fff; padding:10px 22px; border-radius:12px; font-weight:700; text-shadow:none;">Done</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="row" style="margin-top:8px;"><span class="note" style="flex:1; text-align:center;">Lime (complement)</span><span class="note" style="flex:1; text-align:center;">Teal (alternative)</span></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user