Jake
8ba5641451
Adds colors_and_type.css token system, fonts (Lexend, Instrument Serif Italic, JetBrains Mono, Atkinson Hyperlegible Next, OpenDyslexic), SVG assets (wordmark, waveform mark, grain), HTML preview spec cards, UI kit, and SKILL.md reference under src/design-system/. Foundation for applying the new Kon visual identity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
26 lines
3.0 KiB
HTML
26 lines
3.0 KiB
HTML
<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
html,body{margin:0;background:var(--bg);padding:24px;font-family:var(--font-body);color:var(--text)}
|
|
.eb{font:500 10px var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
|
|
.nav{background:var(--sidebar);border:1px solid var(--border-subtle);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px;width:220px}
|
|
.item{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:8px;font-size:13px;color:var(--text-secondary);cursor:pointer}
|
|
.item:hover{background:var(--hover);color:var(--text)}
|
|
.item.active{background:var(--nav-active);color:var(--text);font-weight:500}
|
|
.item.active svg{color:var(--accent);stroke-width:2}
|
|
svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;color:var(--text-tertiary);flex-shrink:0}
|
|
.badge{margin-left:auto;font:500 10px var(--font-body);padding:1px 7px;border-radius:999px;background:rgba(232,168,124,.15);color:var(--accent)}
|
|
.wrap{display:flex;gap:24px;align-items:flex-start}
|
|
</style></head><body>
|
|
<div class="eb">Navigation · sidebar items</div>
|
|
<div class="wrap">
|
|
<div class="nav">
|
|
<div class="item active"><svg viewBox="0 0 24 24"><path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3z"/><path d="M19 10v2a7 7 0 0 1-14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg>Dictation</div>
|
|
<div class="item"><svg viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>Files</div>
|
|
<div class="item"><svg viewBox="0 0 24 24"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/></svg>Tasks<span class="badge">4</span></div>
|
|
<div class="item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>History</div>
|
|
<div class="item"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>Settings</div>
|
|
</div>
|
|
<div style="font-size:12px;color:var(--text-secondary);max-width:240px;line-height:1.55">Active item gets <code style="font:var(--font-mono);color:var(--accent)">--nav-active</code> background, amber icon, stroke 2. Hover lifts text to primary and fills background with <code style="font:var(--font-mono);color:var(--accent)">--hover</code>.</div>
|
|
</div>
|
|
</body></html>
|