theme-rime/palette.html at main · dripnex/theme-rime · GitHub

1
<!doctype html><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Rime palette</title><style>:root{--base:#0c141c;--surface:#121e29;--elevated:#1a2a38;--inset:#071018;--text:#daeff8;--accent:#72b9d6;--hover:#8ccce4}*{box-sizing:border-box}body{margin:0;background:var(--base);color:var(--text);font-family:system-ui;padding:40px}main{max-width:900px;margin:auto}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.chip{background:var(--surface);border:1px solid #ffffff1f;border-radius:14px;overflow:hidden}.sw{height:100px}.meta{padding:14px}code{color:#daeff899}p{color:#daeff888}</style><main><h1>Rime</h1><p>Polar night. Blue rime, frozen air.</p><div class="grid"><div class="chip"><div class="sw" style="background:#0c141c"></div><div class="meta">Base<br><code>#0c141c</code></div></div><div class="chip"><div class="sw" style="background:#121e29"></div><div class="meta">Surface<br><code>#121e29</code></div></div><div class="chip"><div class="sw" style="background:#1a2a38"></div><div class="meta">Elevated<br><code>#1a2a38</code></div></div><div class="chip"><div class="sw" style="background:#071018"></div><div class="meta">Inset<br><code>#071018</code></div></div><div class="chip"><div class="sw" style="background:#daeff8"></div><div class="meta">Text<br><code>#daeff8</code></div></div><div class="chip"><div class="sw" style="background:#72b9d6"></div><div class="meta">Accent<br><code>#72b9d6</code></div></div><div class="chip"><div class="sw" style="background:#8ccce4"></div><div class="meta">Accent hover<br><code>#8ccce4</code></div></div></div></main>