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>
29 lines
2.0 KiB
HTML
29 lines
2.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}
|
|
.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:20px;padding:18px 20px;box-shadow:0 1px 3px rgba(0,0,0,.2);max-width:520px;margin-bottom:14px}
|
|
.title{font:600 15px var(--font-body);margin-bottom:6px}
|
|
.body{font-size:13px;color:var(--text-secondary);line-height:1.55}
|
|
.meta{margin-top:10px;display:flex;gap:10px;font-size:11px;color:var(--text-tertiary)}
|
|
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:rgba(232,168,124,.1);color:var(--accent);font-size:11px;font-weight:500}
|
|
.pill.dot::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
|
|
.pill.muted{background:var(--bg-elevated);color:var(--text-tertiary)}
|
|
.pill.danger{background:rgba(232,113,113,.12);color:var(--danger)}
|
|
</style></head><body>
|
|
<div class="eb">Cards · bg-card · 1px subtle border · radius 20 · shadow-sm</div>
|
|
<div class="card">
|
|
<div class="title">Reviewed the onboarding copy</div>
|
|
<div class="body">Okay so the real issue is the first-run screen assumes you know what dictation means. We should lead with "press and hold, then speak" — that's the whole thing.</div>
|
|
<div class="meta"><span>01:42</span><span>·</span><span>14 Apr · live</span><span>·</span><span>142 words</span></div>
|
|
</div>
|
|
<div class="eb" style="margin-top:8px">Badges & pills</div>
|
|
<div style="display:flex;gap:10px;flex-wrap:wrap">
|
|
<span class="pill dot">Recording</span>
|
|
<span class="pill">Ready</span>
|
|
<span class="pill muted">Auto</span>
|
|
<span class="pill muted">12 words</span>
|
|
<span class="pill danger dot">Error</span>
|
|
</div>
|
|
</body></html>
|