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>
33 lines
2.6 KiB
HTML
33 lines
2.6 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}
|
|
.row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:14px;align-items:center}
|
|
.field{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:8px;min-width:240px;font-size:13px;color:var(--text-tertiary)}
|
|
.field.focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(232,168,124,.15)}
|
|
.field input{background:transparent;border:none;color:var(--text);font:inherit;outline:none;flex:1}
|
|
.toggle{width:38px;height:22px;background:var(--bg-elevated);border:1px solid var(--border-subtle);border-radius:999px;position:relative}
|
|
.toggle.on{background:var(--accent);border-color:transparent}
|
|
.knob{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:999px;background:var(--text)}
|
|
.toggle.on .knob{left:18px;background:#0f0e0c}
|
|
.seg{display:inline-flex;background:var(--bg-input);border:1px solid var(--border-subtle);border-radius:8px;padding:2px}
|
|
.seg span{padding:5px 12px;font-size:12px;border-radius:6px;color:var(--text-secondary)}
|
|
.seg span.sel{background:var(--bg-card);color:var(--text)}
|
|
svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
|
</style></head><body>
|
|
<div class="eb">Form inputs</div>
|
|
<div class="row">
|
|
<div class="field"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg><input placeholder="Search all transcripts..." value="onboarding"></div>
|
|
<div class="field focus"><input value="device-1-usb-yeti" style="color:var(--text)"></div>
|
|
</div>
|
|
<div class="row">
|
|
<div style="display:flex;align-items:center;gap:10px"><div class="toggle on"><div class="knob"></div></div><span style="font-size:13px">Save recordings</span></div>
|
|
<div style="display:flex;align-items:center;gap:10px"><div class="toggle"><div class="knob"></div></div><span style="font-size:13px;color:var(--text-secondary)">British English</span></div>
|
|
<div style="display:flex;align-items:center;gap:10px"><div class="toggle on"><div class="knob"></div></div><span style="font-size:13px">Reduce motion</span></div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="seg"><span>Auto</span><span class="sel">Clean</span><span>Raw</span></div>
|
|
<div class="seg"><span class="sel">Dark</span><span>Light</span><span>System</span></div>
|
|
</div>
|
|
</body></html>
|