kotobane/.superpowers/brainstorm/91896-1779976307/content/palette-final.html

<h2>Final Locked Palette</h2>
<p class="subtitle">Complete color system for Kotobane — ready for implementation</p>

<div style="max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:24px">

  <!-- Brand -->
  <div>
    <div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">BRAND ACCENT</div>
    <div style="display:grid;grid-template-columns:repeat(2,1fr);gap:10px">
      <div style="background:#1D212B;border:2px solid #00B4D8;border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center">
        <div style="width:56px;height:56px;border-radius:10px;background:#00B4D8;flex-shrink:0"></div>
        <div>
          <div style="font-size:13px;font-weight:700;color:#F3F5F7;margin-bottom:2px">Sky Cyan — Primary</div>
          <div style="font-family:monospace;font-size:12px;color:#00B4D8">#00B4D8</div>
          <div style="font-size:11px;color:#5C6470;margin-top:4px">Buttons, links, active nav, "Read →", focus rings</div>
        </div>
      </div>
      <div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:16px;display:flex;gap:14px;align-items:center">
        <div style="width:56px;height:56px;border-radius:10px;background:#00D4FF;flex-shrink:0"></div>
        <div>
          <div style="font-size:13px;font-weight:700;color:#F3F5F7;margin-bottom:2px">Sky Cyan — Hover</div>
          <div style="font-family:monospace;font-size:12px;color:#00D4FF">#00D4FF</div>
          <div style="font-size:11px;color:#5C6470;margin-top:4px">Hover state for links and buttons</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Status colors -->
  <div>
    <div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">STATUS & BADGE COLORS</div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
      <div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
        <div style="width:100%;height:44px;border-radius:8px;background:#7C3AED;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
          <span style="color:#fff;font-size:10px;font-weight:700">FEATURED</span>
        </div>
        <div style="font-family:monospace;font-size:11px;color:#7C3AED;margin-bottom:4px">#7C3AED</div>
        <div style="font-size:11px;color:#5C6470">Violet · Featured / hero badges</div>
      </div>
      <div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
        <div style="width:100%;height:44px;border-radius:8px;background:#D64545;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
          <span style="color:#fff;font-size:10px;font-weight:700">TRENDING</span>
        </div>
        <div style="font-family:monospace;font-size:11px;color:#D64545;margin-bottom:4px">#D64545</div>
        <div style="font-size:11px;color:#5C6470">Coral · Trending / breaking</div>
      </div>
      <div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
        <div style="width:100%;height:44px;border-radius:8px;background:#FFB300;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
          <span style="color:#000;font-size:10px;font-weight:700">NEW</span>
        </div>
        <div style="font-family:monospace;font-size:11px;color:#FFB300;margin-bottom:4px">#FFB300</div>
        <div style="font-size:11px;color:#5C6470">Amber · New / alert</div>
      </div>
      <div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:14px">
        <div style="width:100%;height:44px;border-radius:8px;background:#00D166;margin-bottom:12px;display:flex;align-items:center;justify-content:center">
          <span style="color:#000;font-size:10px;font-weight:700">PUBLISHED</span>
        </div>
        <div style="font-family:monospace;font-size:11px;color:#00D166;margin-bottom:4px">#00D166</div>
        <div style="font-size:11px;color:#5C6470">Green · Published / success</div>
      </div>
    </div>
  </div>

  <!-- Backgrounds -->
  <div>
    <div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">BACKGROUNDS — layered dark</div>
    <div style="display:grid;grid-template-columns:repeat(4,1fr);gap:10px">
      <div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
        <div style="background:#0D0D14;height:48px"></div>
        <div style="padding:10px 12px;background:#171A21">
          <div style="font-family:monospace;font-size:11px;color:#7D8795">#0D0D14</div>
          <div style="font-size:11px;color:#5C6470">Main background</div>
        </div>
      </div>
      <div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
        <div style="background:#171A21;height:48px"></div>
        <div style="padding:10px 12px;background:#171A21">
          <div style="font-family:monospace;font-size:11px;color:#7D8795">#171A21</div>
          <div style="font-size:11px;color:#5C6470">Navbar / elevated</div>
        </div>
      </div>
      <div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
        <div style="background:#1D212B;height:48px"></div>
        <div style="padding:10px 12px;background:#171A21">
          <div style="font-family:monospace;font-size:11px;color:#7D8795">#1D212B</div>
          <div style="font-size:11px;color:#5C6470">Cards</div>
        </div>
      </div>
      <div style="border-radius:12px;overflow:hidden;border:1px solid #2A3140">
        <div style="background:#2A3140;height:48px"></div>
        <div style="padding:10px 12px;background:#171A21">
          <div style="font-family:monospace;font-size:11px;color:#7D8795">#2A3140</div>
          <div style="font-size:11px;color:#5C6470">Borders</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Text -->
  <div>
    <div style="font-size:11px;letter-spacing:2px;color:#7D8795;margin-bottom:10px">TEXT HIERARCHY</div>
    <div style="background:#1D212B;border:1px solid #2A3140;border-radius:12px;padding:20px;display:flex;flex-direction:column;gap:10px">
      <div style="display:flex;justify-content:space-between;align-items:baseline">
        <span style="color:#F3F5F7;font-size:18px;font-weight:600">Headlines & primary body</span>
        <span style="font-family:monospace;font-size:11px;color:#5C6470">#F3F5F7</span>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:baseline">
        <span style="color:#B8C0CC;font-size:15px">Excerpts, captions, secondary text</span>
        <span style="font-family:monospace;font-size:11px;color:#5C6470">#B8C0CC</span>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:baseline">
        <span style="color:#7D8795;font-size:13px">Timestamps, category labels, metadata</span>
        <span style="font-family:monospace;font-size:11px;color:#5C6470">#7D8795</span>
      </div>
      <div style="display:flex;justify-content:space-between;align-items:baseline">
        <span style="color:#5C6470;font-size:12px">Disabled / placeholder</span>
        <span style="font-family:monospace;font-size:11px;color:#5C6470">#5C6470</span>
      </div>
    </div>
  </div>

</div>