admin/kotobane
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
d4d65b1dff9ca4c04dddba0c3edaa9d046c9370f
kotobane/.superpowers/brainstorm/91896-1779976307/content/palette-usage.html
T

112 lines
8.3 KiB
HTML
Raw Blame History

<h2>Color Usage Map</h2>
<p class="subtitle">What each color is actually for — categories are neutral, colors go on UI elements</p>
<div style="max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:24px">
<!-- Palette with correct usage -->
<div style="display:grid;grid-template-columns:repeat(5,1fr);gap:10px">
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
<div style="width:100%;height:48px;border-radius:8px;background:#00B4D8;margin-bottom:12px"></div>
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Cyan</div>
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#00B4D8</div>
<div style="font-size:11px;color:#5C6470;line-height:1.5">Primary buttons, links, active nav, "Read →", focus rings</div>
</div>
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
<div style="width:100%;height:48px;border-radius:8px;background:#7C3AED;margin-bottom:12px"></div>
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Violet</div>
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#7C3AED</div>
<div style="font-size:11px;color:#5C6470;line-height:1.5">Featured / hero badges, secondary actions, search highlight</div>
</div>
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
<div style="width:100%;height:48px;border-radius:8px;background:#FF6B6B;margin-bottom:12px"></div>
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Coral</div>
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#FF6B6B</div>
<div style="font-size:11px;color:#5C6470;line-height:1.5">Trending badge, breaking news label, error states</div>
</div>
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
<div style="width:100%;height:48px;border-radius:8px;background:#FFB300;margin-bottom:12px"></div>
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Amber</div>
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#FFB300</div>
<div style="font-size:11px;color:#5C6470;line-height:1.5">Alerts, warnings, "new" indicator dots</div>
</div>
<div style="background:#1D212B;border-radius:12px;padding:14px;border:1px solid #2A3140">
<div style="width:100%;height:48px;border-radius:8px;background:#00D166;margin-bottom:12px"></div>
<div style="font-size:12px;font-weight:600;color:#F3F5F7;margin-bottom:2px">Green</div>
<div style="font-family:monospace;font-size:10px;color:#7D8795;margin-bottom:6px">#00D166</div>
<div style="font-size:11px;color:#5C6470;line-height:1.5">Published status, success states</div>
</div>
</div>
<!-- Navbar — categories neutral -->
<div>
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">NAVBAR — categories are uniform, active one gets the brand cyan</div>
<div style="background:#171A21;border:1px solid #2A3140;border-radius:12px;padding:14px 20px;display:flex;align-items:center;gap:20px;flex-wrap:wrap">
<div style="font-size:16px;font-weight:700;color:#00B4D8;letter-spacing:3px">言羽</div>
<div style="width:1px;height:16px;background:#2A3140"></div>
<div style="font-size:12px;color:#00B4D8;font-weight:600;border-bottom:2px solid #00B4D8;padding-bottom:2px">Anime</div>
<div style="font-size:12px;color:#B8C0CC;font-weight:500">VTubers</div>
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Manga</div>
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Games</div>
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Music</div>
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Japan</div>
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Culture</div>
<div style="font-size:12px;color:#B8C0CC;font-weight:500">Industry</div>
<div style="margin-left:auto;font-size:12px;color:#7D8795">⌘K</div>
</div>
</div>
<!-- Article card showing correct badge usage -->
<div>
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">ARTICLE CARDS — category label is muted, colors reserved for status badges</div>
<div style="display:grid;grid-template-columns:repeat(3,1fr);gap:10px">
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
<div style="display:flex;gap:6px;margin-bottom:10px;align-items:center">
<div style="color:#7D8795;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase">Anime</div>
<div style="background:#FF6B6B;color:#fff;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:0.5px">TRENDING</div>
</div>
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Frieren S2 Production Confirmed</div>
<div style="font-size:11px;color:#7D8795;margin-bottom:10px">28 May 2026</div>
<div style="font-size:11px;color:#00B4D8;font-weight:600">Read →</div>
</div>
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
<div style="display:flex;gap:6px;margin-bottom:10px;align-items:center">
<div style="color:#7D8795;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase">VTubers</div>
<div style="background:#7C3AED;color:#fff;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:0.5px">FEATURED</div>
</div>
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Hololive EN Gen 4 Debuts This Weekend</div>
<div style="font-size:11px;color:#7D8795;margin-bottom:10px">27 May 2026</div>
<div style="font-size:11px;color:#00B4D8;font-weight:600">Read →</div>
</div>
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
<div style="display:flex;gap:6px;margin-bottom:10px;align-items:center">
<div style="color:#7D8795;font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase">Games</div>
<div style="background:#FFB300;color:#000;font-size:9px;padding:1px 6px;border-radius:3px;font-weight:700;letter-spacing:0.5px">NEW</div>
</div>
<div style="font-size:13px;font-weight:600;color:#F3F5F7;line-height:1.4;margin-bottom:6px">Blue Protocol Global Launch Date Revealed</div>
<div style="font-size:11px;color:#7D8795;margin-bottom:10px">26 May 2026</div>
<div style="font-size:11px;color:#00B4D8;font-weight:600">Read →</div>
</div>
</div>
</div>
<!-- UI elements -->
<div>
<div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">UI ELEMENTS — buttons, tags, states</div>
<div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:20px;display:flex;flex-wrap:wrap;gap:12px;align-items:center">
<button style="background:#00B4D8;color:#000;border:none;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer">Primary button</button>
<button style="background:transparent;color:#00B4D8;border:1px solid #00B4D8;padding:8px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer">Secondary</button>
<div style="background:#7C3AED;color:#fff;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">FEATURED</div>
<div style="background:#FF6B6B;color:#fff;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">TRENDING</div>
<div style="background:#FFB300;color:#000;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">NEW</div>
<div style="background:#00D166;color:#000;font-size:11px;padding:3px 10px;border-radius:4px;font-weight:700">PUBLISHED</div>
<div style="background:#1D212B;border:1px solid #2A3140;color:#B8C0CC;font-size:11px;padding:3px 10px;border-radius:4px">hololive</div>
<div style="background:#1D212B;border:1px solid #2A3140;color:#B8C0CC;font-size:11px;padding:3px 10px;border-radius:4px">spring 2026</div>
</div>
</div>
</div>
Reference in New Issue View Git Blame Copy Permalink