feat: add design system handoff to feat/design-system branch
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>
This commit is contained in:
26
src/design-system/preview/brand-icons.html
Normal file
26
src/design-system/preview/brand-icons.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!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:10px;flex-wrap:wrap;align-items:center;color:var(--text-tertiary)}
|
||||
.row svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
|
||||
.nm{font:400 10px var(--font-mono);color:var(--text-tertiary);margin-top:4px}
|
||||
.u{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:62px}
|
||||
.accent{color:var(--accent)}
|
||||
</style></head><body>
|
||||
<div class="eb">Iconography · Lucide · 2px stroke · rounded</div>
|
||||
<div class="row">
|
||||
<div class="u accent"><svg viewBox="0 0 24 24"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg><div class="nm">Mic</div></div>
|
||||
<div class="u"><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><div class="nm">FileText</div></div>
|
||||
<div class="u"><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><div class="nm">SquareCheck</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><div class="nm">Clock</div></div>
|
||||
<div class="u"><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 0 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 0 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 9"/></svg><div class="nm">Settings</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7"/><path d="m21 21-4.3-4.3"/></svg><div class="nm">Search</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg><div class="nm">Upload</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><polygon points="5 3 19 12 5 21 5 3"/></svg><div class="nm">Play</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/></svg><div class="nm">Pause</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg><div class="nm">Copy</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg><div class="nm">X</div></div>
|
||||
<div class="u"><svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg><div class="nm">Check</div></div>
|
||||
</div>
|
||||
</body></html>
|
||||
25
src/design-system/preview/brand-wordmark.html
Normal file
25
src/design-system/preview/brand-wordmark.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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:28px;font-family:var(--font-body)}
|
||||
.wrap{display:flex;gap:48px;align-items:flex-start}
|
||||
.k{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:84px;color:var(--accent);line-height:1;letter-spacing:-.015em;margin:0}
|
||||
.tag{margin-top:14px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-tertiary)}
|
||||
.notes{margin-top:4px;max-width:320px}
|
||||
.meta{font:400 10px/1.7 var(--font-mono);color:var(--text-tertiary)}
|
||||
.meta b{color:var(--text-secondary);font-weight:500}
|
||||
.swatch{display:inline-block;width:9px;height:9px;border-radius:999px;background:var(--accent);margin-right:6px;vertical-align:middle}
|
||||
.desc{margin-top:10px;font:400 11px/1.55 var(--font-body);color:var(--text-secondary)}
|
||||
</style></head><body>
|
||||
<div class="wrap">
|
||||
<div>
|
||||
<div class="k">Kon</div>
|
||||
<div class="tag">Think out loud</div>
|
||||
</div>
|
||||
<div class="notes">
|
||||
<div class="meta"><b>Wordmark</b> Instrument Serif Italic 400</div>
|
||||
<div class="meta"><b>Colour</b> <span class="swatch"></span>#e8a87c accent, always</div>
|
||||
<div class="meta"><b>Minimum size</b> 18px</div>
|
||||
<p class="desc">Always italic, always amber. The wordmark stands alone — no accompanying glyph or icon in the lockup.</p>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
21
src/design-system/preview/colors-accent.html
Normal file
21
src/design-system/preview/colors-accent.html
Normal file
@@ -0,0 +1,21 @@
|
||||
<!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)}
|
||||
.row{display:flex;gap:12px;flex-wrap:wrap}
|
||||
.sw{display:flex;flex-direction:column;gap:6px;min-width:130px}
|
||||
.chip{height:64px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);position:relative;overflow:hidden}
|
||||
.chip.glow{box-shadow:0 4px 20px rgba(232,168,124,.3)}
|
||||
.n{font:500 11px/1.3 var(--font-body);color:var(--text)}
|
||||
.h{font:400 10px/1.3 var(--font-mono);color:var(--text-tertiary)}
|
||||
.eb{font:500 10px/1.3 var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
|
||||
.note{color:var(--text-secondary);font-size:11px;margin-top:10px;max-width:540px;line-height:1.5}
|
||||
</style></head><body>
|
||||
<div class="eb">Accent · amber always means something</div>
|
||||
<div class="row">
|
||||
<div class="sw"><div class="chip glow" style="background:#e8a87c"></div><div class="n">accent</div><div class="h">#e8a87c</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#d4976a"></div><div class="n">accent-hover</div><div class="h">#d4976a</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#171614;position:relative"><div style="position:absolute;inset:0;background:#e8a87c10"></div></div><div class="n">accent-subtle</div><div class="h">#e8a87c · 6%</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#171614;position:relative"><div style="position:absolute;inset:0;background:#e8a87c25"></div></div><div class="n">accent-glow</div><div class="h">#e8a87c · 15%</div></div>
|
||||
</div>
|
||||
<div class="note">Amber is reserved for interactivity, recording state, or brand identity. Never decorative.</div>
|
||||
</body></html>
|
||||
17
src/design-system/preview/colors-semantic.html
Normal file
17
src/design-system/preview/colors-semantic.html
Normal file
@@ -0,0 +1,17 @@
|
||||
<!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)}
|
||||
.row{display:flex;gap:12px;flex-wrap:wrap}
|
||||
.sw{display:flex;flex-direction:column;gap:6px;min-width:150px}
|
||||
.chip{height:64px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);display:flex;align-items:center;justify-content:center;font:500 13px var(--font-body);color:#0f0e0c}
|
||||
.n{font:500 11px/1.3 var(--font-body);color:var(--text)}
|
||||
.h{font:400 10px/1.3 var(--font-mono);color:var(--text-tertiary)}
|
||||
.eb{font:500 10px/1.3 var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
|
||||
</style></head><body>
|
||||
<div class="eb">Semantic · three states only</div>
|
||||
<div class="row">
|
||||
<div class="sw"><div class="chip" style="background:#7ec89a">Success</div><div class="n">success · moss</div><div class="h">#7ec89a</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#e87171;color:#1a0e0e">Danger</div><div class="n">danger · muted red</div><div class="h">#e87171</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#e8c86e">Warning</div><div class="n">warning · honey</div><div class="h">#e8c86e</div></div>
|
||||
</div>
|
||||
</body></html>
|
||||
24
src/design-system/preview/colors-surfaces.html
Normal file
24
src/design-system/preview/colors-surfaces.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!doctype html><html><head><meta charset="utf-8"><link rel="stylesheet" href="../colors_and_type.css">
|
||||
<style>
|
||||
html,body{margin:0;background:#0a0907;padding:24px;font-family:var(--font-body)}
|
||||
.row{display:flex;gap:10px;flex-wrap:wrap}
|
||||
.sw{display:flex;flex-direction:column;gap:6px;min-width:110px}
|
||||
.chip{height:56px;border-radius:var(--radius-md);border:1px solid #2c2923}
|
||||
.n{font:500 11px/1.3 var(--font-body);color:#f0ece4}
|
||||
.h{font:400 10px/1.3 var(--font-mono);color:#8a8578;letter-spacing:.02em}
|
||||
.eb{font:500 10px/1.3 var(--font-body);color:#8a8578;letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px}
|
||||
.note{margin-top:14px;font:400 11px/1.55 var(--font-body);color:#9a9486;max-width:560px}
|
||||
</style></head><body>
|
||||
<div class="eb">Surfaces · warm, with clearer elevation steps</div>
|
||||
<div class="row">
|
||||
<div class="sw"><div class="chip" style="background:#0a0907"></div><div class="n">bg</div><div class="h">#0a0907</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#141310"></div><div class="n">bg-elevated</div><div class="h">#141310</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#1d1b17"></div><div class="n">bg-card</div><div class="h">#1d1b17</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#26231e"></div><div class="n">bg-raised</div><div class="h">#26231e</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#0f0e0b"></div><div class="n">bg-input</div><div class="h">#0f0e0b</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#0d0c09"></div><div class="n">sidebar</div><div class="h">#0d0c09</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#252219"></div><div class="n">nav-active</div><div class="h">#252219</div></div>
|
||||
<div class="sw"><div class="chip" style="background:#221f1a"></div><div class="n">hover</div><div class="h">#221f1a</div></div>
|
||||
</div>
|
||||
<div class="note">Steps widened from ~3% to ~6% lightness between layers. Base dropped half a stop; cards + raised panels lifted a stop. Still warm amber-biased neutrals — no pure black, no halation.</div>
|
||||
</body></html>
|
||||
19
src/design-system/preview/colors-text.html
Normal file
19
src/design-system/preview/colors-text.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!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)}
|
||||
.row{display:flex;gap:12px;flex-wrap:wrap}
|
||||
.sw{display:flex;flex-direction:column;gap:6px;min-width:130px}
|
||||
.chip{height:60px;border-radius:var(--radius-md);border:1px solid var(--border-subtle);display:flex;align-items:center;padding:0 14px;font-size:13px}
|
||||
.n{font:500 11px/1.3 var(--font-body);color:var(--text)}
|
||||
.h{font:400 10px/1.3 var(--font-mono);color:var(--text-tertiary)}
|
||||
.eb{font:500 10px/1.3 var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
|
||||
.contrast{margin-top:16px;font-size:11px;color:var(--text-secondary);line-height:1.55;max-width:560px}
|
||||
</style></head><body>
|
||||
<div class="eb">Text hierarchy · warm greys with amber undertone</div>
|
||||
<div class="row">
|
||||
<div class="sw"><div class="chip" style="color:#f0ece4">The quick brown</div><div class="n">text</div><div class="h">#f0ece4 · AAA</div></div>
|
||||
<div class="sw"><div class="chip" style="color:#9a9486">fox jumps over</div><div class="n">text-secondary</div><div class="h">#9a9486 · AA</div></div>
|
||||
<div class="sw"><div class="chip" style="color:#716b60">the lazy dog</div><div class="n">text-tertiary</div><div class="h">#716b60 · large only</div></div>
|
||||
</div>
|
||||
<div class="contrast">Never #000 on #fff — causes halation for neurodivergent users. Tertiary only at 18px bold / 24px regular minimum.</div>
|
||||
</body></html>
|
||||
27
src/design-system/preview/colors-zones.html
Normal file
27
src/design-system/preview/colors-zones.html
Normal file
@@ -0,0 +1,27 @@
|
||||
<!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)}
|
||||
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
|
||||
.zone{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden}
|
||||
.hero{height:72px;position:relative;display:flex;align-items:flex-end;padding:10px 14px}
|
||||
.dot{position:absolute;top:12px;right:12px;width:10px;height:10px;border-radius:50%;background:#e8a87c}
|
||||
.nm{font:500 13px var(--font-body);color:#f0ece4}
|
||||
.meta{padding:10px 14px;background:rgba(255,255,255,.02);display:flex;justify-content:space-between;font:400 10px var(--font-mono);color:#716b60}
|
||||
.eb{font:500 10px/1.3 var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
|
||||
</style></head><body>
|
||||
<div class="eb">Sensory zones · tint surfaces only — accent stays amber</div>
|
||||
<div class="grid">
|
||||
<div class="zone">
|
||||
<div class="hero" style="background:#141a1e"><span class="dot"></span><span class="nm">Cave</span></div>
|
||||
<div class="meta"><span>focus · cool teal</span><span>#0f1214</span></div>
|
||||
</div>
|
||||
<div class="zone">
|
||||
<div class="hero" style="background:#1c1815"><span class="dot"></span><span class="nm">Energy</span></div>
|
||||
<div class="meta"><span>active · warm neutral</span><span>#100e0b</span></div>
|
||||
</div>
|
||||
<div class="zone">
|
||||
<div class="hero" style="background:#161a16"><span class="dot"></span><span class="nm">Reset</span></div>
|
||||
<div class="meta"><span>calm · muted sage</span><span>#0e100e</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
29
src/design-system/preview/components-buttons.html
Normal file
29
src/design-system/preview/components-buttons.html
Normal file
@@ -0,0 +1,29 @@
|
||||
<!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)}
|
||||
.eb{font:500 10px var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
|
||||
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
|
||||
.b{font:500 13px var(--font-body);padding:8px 14px;border-radius:8px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px}
|
||||
.primary{background:var(--accent);color:#0f0e0c;box-shadow:0 4px 20px rgba(232,168,124,.3)}
|
||||
.primary:hover{background:var(--accent-hover)}
|
||||
.secondary{background:transparent;color:var(--text-secondary);border-color:var(--border-subtle)}
|
||||
.secondary:hover{background:var(--hover);color:var(--text)}
|
||||
.ghost{background:transparent;color:var(--text-secondary)}
|
||||
.ghost:hover{background:var(--hover);color:var(--text)}
|
||||
.danger{background:transparent;color:var(--danger)}
|
||||
.danger:hover{background:rgba(232,113,113,.1)}
|
||||
.sm{font-size:11px;padding:4px 10px}
|
||||
.lg{font-size:13px;padding:10px 18px}
|
||||
.rec{width:40px;height:40px;border-radius:999px;background:var(--accent);box-shadow:0 4px 20px rgba(232,168,124,.3);display:flex;align-items:center;justify-content:center;border:none;cursor:pointer}
|
||||
.rec>span{width:14px;height:14px;border-radius:999px;background:#fff}
|
||||
.stop{background:var(--danger)}
|
||||
.stop>span{border-radius:3px;background:#fff}
|
||||
.l{font:400 10px var(--font-mono);color:var(--text-tertiary);min-width:80px}
|
||||
</style></head><body>
|
||||
<div class="eb">Buttons</div>
|
||||
<div class="row"><div class="l">primary</div><button class="b primary">Record</button><button class="b primary lg">Start recording</button><button class="b primary sm">Save</button></div>
|
||||
<div class="row"><div class="l">secondary</div><button class="b secondary">Export</button><button class="b secondary">Rename</button><button class="b secondary sm">Clear</button></div>
|
||||
<div class="row"><div class="l">ghost</div><button class="b ghost">Copy</button><button class="b ghost">Template</button><button class="b ghost">Cancel</button></div>
|
||||
<div class="row"><div class="l">danger</div><button class="b danger">Delete</button><button class="b danger sm">Clear all</button></div>
|
||||
<div class="row"><div class="l">record</div><button class="rec"><span></span></button><button class="rec stop"><span></span></button><span style="font-size:11px;color:var(--text-tertiary)">40×40 · circular · warm-pulse when recording</span></div>
|
||||
</body></html>
|
||||
28
src/design-system/preview/components-cards.html
Normal file
28
src/design-system/preview/components-cards.html
Normal file
@@ -0,0 +1,28 @@
|
||||
<!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>
|
||||
16
src/design-system/preview/components-empty-states.html
Normal file
16
src/design-system/preview/components-empty-states.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!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}
|
||||
.state{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:22px;border:1px solid var(--border-subtle);border-radius:16px;background:var(--bg-card)}
|
||||
.g{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
|
||||
svg{width:40px;height:40px;fill:none;stroke:currentColor;stroke-width:1;stroke-linecap:round;stroke-linejoin:round;opacity:.4;color:var(--text-secondary)}
|
||||
.msg{font-size:13px;color:var(--text-secondary);text-align:center;max-width:22ch;line-height:1.55}
|
||||
</style></head><body>
|
||||
<div class="eb">Empty states · ambient presence, no demanding CTA</div>
|
||||
<div class="g">
|
||||
<div class="state"><svg viewBox="0 0 24 24"><rect x="9" y="2" width="6" height="11" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2"/><line x1="12" y1="19" x2="12" y2="22"/></svg><div class="msg">Press record or Ctrl+Shift+R</div></div>
|
||||
<div class="state"><svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg><div class="msg">Your transcriptions will be saved here</div></div>
|
||||
<div class="state"><svg viewBox="0 0 24 24"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg><div class="msg">Something went wrong with that transcription. Your audio is saved — try again when you're ready.</div></div>
|
||||
</div>
|
||||
</body></html>
|
||||
32
src/design-system/preview/components-inputs.html
Normal file
32
src/design-system/preview/components-inputs.html
Normal file
@@ -0,0 +1,32 @@
|
||||
<!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>
|
||||
25
src/design-system/preview/components-nav.html
Normal file
25
src/design-system/preview/components-nav.html
Normal file
@@ -0,0 +1,25 @@
|
||||
<!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>
|
||||
19
src/design-system/preview/components-toasts.html
Normal file
19
src/design-system/preview/components-toasts.html
Normal file
@@ -0,0 +1,19 @@
|
||||
<!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}
|
||||
.toast{display:flex;gap:12px;padding:14px 16px;border-radius:12px;background:var(--bg-elevated);border:1px solid var(--border-subtle);box-shadow:0 12px 28px rgba(0,0,0,.35);max-width:380px;margin-bottom:10px;align-items:flex-start}
|
||||
.toast.err{border-color:rgba(232,113,113,.35);background:rgba(232,113,113,.08)}
|
||||
.toast.ok{border-color:rgba(126,200,154,.3)}
|
||||
.dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:6px}
|
||||
.dot.err{background:var(--danger)}
|
||||
.dot.ok{background:var(--success)}
|
||||
.dot.warn{background:var(--warning)}
|
||||
.title{font:500 13px var(--font-body);margin-bottom:3px}
|
||||
.body{font:400 12px var(--font-body);color:var(--text-secondary);line-height:1.5}
|
||||
</style></head><body>
|
||||
<div class="eb">Toasts · bottom-right · sticky on error</div>
|
||||
<div class="toast err"><div class="dot err"></div><div><div class="title">Could not start recording</div><div class="body">Audio device disconnected. Plug it back in and try again.</div></div></div>
|
||||
<div class="toast"><div class="dot warn"></div><div><div class="title">Dropped 2s of older audio</div><div class="body">Kon is keeping up in real time.</div></div></div>
|
||||
<div class="toast ok"><div class="dot ok"></div><div><div class="title">Saved · 3 tasks extracted</div><div class="body">Your audio is saved. Open Tasks to review.</div></div></div>
|
||||
</body></html>
|
||||
26
src/design-system/preview/spacing-motion.html
Normal file
26
src/design-system/preview/spacing-motion.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!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:16px;flex-wrap:wrap}
|
||||
.spec{display:flex;align-items:center;gap:12px;padding:10px 14px;border:1px dashed var(--border-subtle);border-radius:8px;font-size:12px;color:var(--text-secondary)}
|
||||
.curve{height:60px;background:var(--bg-elevated);border-radius:8px;padding:10px 14px;display:flex;align-items:center;gap:14px}
|
||||
svg{width:120px;height:30px}
|
||||
code{font:400 11px var(--font-mono);color:var(--accent)}
|
||||
</style></head><body>
|
||||
<div class="eb">Motion · elderflower, not espresso</div>
|
||||
<div class="row">
|
||||
<div class="spec"><span>UI</span><code>150–200ms</code></div>
|
||||
<div class="spec"><span>Decorative</span><code>300–500ms</code></div>
|
||||
<div class="spec"><span>Zone cross-fade</span><code>300–500ms</code></div>
|
||||
<div class="spec"><span>Waveform pulse</span><code>2s</code></div>
|
||||
</div>
|
||||
<div class="eb" style="margin-top:20px">Easing</div>
|
||||
<div class="row">
|
||||
<div class="curve">
|
||||
<svg viewBox="0 0 120 30" preserveAspectRatio="none"><path d="M2 28 C 26 28, 50 4, 118 2" stroke="#e8a87c" stroke-width="1.5" fill="none"/></svg>
|
||||
<div><div style="font:500 12px var(--font-body)">ease-out</div><code>cubic-bezier(.2, .8, .2, 1)</code></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="margin-top:16px;font-size:11px;color:var(--text-tertiary);max-width:540px;line-height:1.55">Never: bounce, shake, slide-from-offscreen, auto-play. Reduce motion is the default — opt IN.</div>
|
||||
</body></html>
|
||||
48
src/design-system/preview/spacing-radii.html
Normal file
48
src/design-system/preview/spacing-radii.html
Normal file
@@ -0,0 +1,48 @@
|
||||
<!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)}
|
||||
.eb{font:500 10px var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
|
||||
.row{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end}
|
||||
.u{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
|
||||
.tile{
|
||||
position:relative;
|
||||
width:88px;height:72px;
|
||||
background:var(--bg-elevated);
|
||||
border:1px solid var(--border);
|
||||
box-shadow:var(--shadow-sm);
|
||||
overflow:hidden;
|
||||
}
|
||||
.tile::before{
|
||||
content:'';
|
||||
position:absolute;top:-1px;left:-1px;
|
||||
width:48px;height:48px;
|
||||
border-top:2px solid var(--accent);
|
||||
border-left:2px solid var(--accent);
|
||||
border-top-left-radius:inherit;
|
||||
opacity:.9;
|
||||
}
|
||||
.px{position:absolute;bottom:6px;right:8px;font:500 10px var(--font-mono);color:var(--text-tertiary);letter-spacing:.02em}
|
||||
.n{font:600 13px var(--font-body);color:var(--text)}
|
||||
.h{font:400 10px/1.4 var(--font-body);color:var(--text-tertiary)}
|
||||
.pill{
|
||||
position:relative;width:88px;height:72px;
|
||||
border-radius:999px;
|
||||
background:var(--bg-elevated);
|
||||
border:1px solid var(--border);
|
||||
box-shadow:var(--shadow-sm);
|
||||
}
|
||||
.pill::before{
|
||||
content:'';position:absolute;inset:0;border-radius:999px;
|
||||
border:2px dashed rgba(232,168,124,.6);
|
||||
}
|
||||
</style></head><body>
|
||||
<div class="eb">Radii · amber arc = curve magnitude</div>
|
||||
<div class="row">
|
||||
<div class="u"><div class="tile" style="border-radius:6px"><span class="px">6</span></div><div><div class="n">sm</div><div class="h">keyboard, pills</div></div></div>
|
||||
<div class="u"><div class="tile" style="border-radius:8px"><span class="px">8</span></div><div><div class="n">md</div><div class="h">buttons, fields</div></div></div>
|
||||
<div class="u"><div class="tile" style="border-radius:12px"><span class="px">12</span></div><div><div class="n">lg</div><div class="h">inner cards, nav</div></div></div>
|
||||
<div class="u"><div class="tile" style="border-radius:16px"><span class="px">16</span></div><div><div class="n">xl</div><div class="h">containers</div></div></div>
|
||||
<div class="u"><div class="tile" style="border-radius:20px"><span class="px">20</span></div><div><div class="n">2xl</div><div class="h">transcript card</div></div></div>
|
||||
<div class="u"><div class="pill"><span class="px">∞</span></div><div><div class="n">full</div><div class="h">record button, dots</div></div></div>
|
||||
</div>
|
||||
</body></html>
|
||||
23
src/design-system/preview/spacing-scale.html
Normal file
23
src/design-system/preview/spacing-scale.html
Normal file
@@ -0,0 +1,23 @@
|
||||
<!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)}
|
||||
.eb{font:500 10px var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
|
||||
.row{display:flex;gap:14px;align-items:flex-end}
|
||||
.u{display:flex;flex-direction:column;gap:6px;align-items:center}
|
||||
.sq{background:var(--accent);border-radius:var(--radius-md);opacity:.9}
|
||||
.n{font:500 10px var(--font-mono);color:var(--text-tertiary)}
|
||||
.v{font:500 11px var(--font-body);color:var(--text)}
|
||||
</style></head><body>
|
||||
<div class="eb">Spacing · 4px base</div>
|
||||
<div class="row">
|
||||
<div class="u"><div class="sq" style="width:4px;height:4px"></div><div class="v">1</div><div class="n">4px</div></div>
|
||||
<div class="u"><div class="sq" style="width:8px;height:8px"></div><div class="v">2</div><div class="n">8px</div></div>
|
||||
<div class="u"><div class="sq" style="width:12px;height:12px"></div><div class="v">3</div><div class="n">12px</div></div>
|
||||
<div class="u"><div class="sq" style="width:16px;height:16px"></div><div class="v">4</div><div class="n">16px</div></div>
|
||||
<div class="u"><div class="sq" style="width:20px;height:20px"></div><div class="v">5</div><div class="n">20px</div></div>
|
||||
<div class="u"><div class="sq" style="width:24px;height:24px"></div><div class="v">6</div><div class="n">24px</div></div>
|
||||
<div class="u"><div class="sq" style="width:32px;height:32px"></div><div class="v">8</div><div class="n">32px</div></div>
|
||||
<div class="u"><div class="sq" style="width:40px;height:40px"></div><div class="v">10</div><div class="n">40px</div></div>
|
||||
<div class="u"><div class="sq" style="width:48px;height:48px"></div><div class="v">12</div><div class="n">48px</div></div>
|
||||
</div>
|
||||
</body></html>
|
||||
18
src/design-system/preview/spacing-shadows.html
Normal file
18
src/design-system/preview/spacing-shadows.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<!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:28px;font-family:var(--font-body)}
|
||||
.eb{font:500 10px var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
|
||||
.row{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-start}
|
||||
.u{display:flex;flex-direction:column;gap:10px;align-items:center}
|
||||
.c{width:110px;height:60px;background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:12px}
|
||||
.n{font:500 11px var(--font-body);color:var(--text)}
|
||||
.h{font:400 10px var(--font-mono);color:var(--text-tertiary);text-align:center;max-width:120px}
|
||||
</style></head><body>
|
||||
<div class="eb">Shadow system · low, warm</div>
|
||||
<div class="row">
|
||||
<div class="u"><div class="c" style="box-shadow:0 1px 3px rgba(0,0,0,.2)"></div><div class="n">sm</div><div class="h">0 1px 3px / .2 · cards</div></div>
|
||||
<div class="u"><div class="c" style="box-shadow:0 4px 12px rgba(0,0,0,.25)"></div><div class="n">md</div><div class="h">0 4px 12px / .25 · popovers</div></div>
|
||||
<div class="u"><div class="c" style="box-shadow:0 12px 28px rgba(0,0,0,.35)"></div><div class="n">lg</div><div class="h">0 12px 28px / .35 · modals</div></div>
|
||||
<div class="u"><div class="c" style="background:#e8a87c;box-shadow:0 4px 20px rgba(232,168,124,.3);border-color:transparent"></div><div class="n">accent glow</div><div class="h">record button only</div></div>
|
||||
</div>
|
||||
</body></html>
|
||||
12
src/design-system/preview/type-body.html
Normal file
12
src/design-system/preview/type-body.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!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:28px;font-family:var(--font-body);color:var(--text)}
|
||||
.row{display:flex;align-items:flex-start;gap:18px;margin-bottom:14px}
|
||||
.l{font:400 11px var(--font-mono);color:var(--text-tertiary);min-width:110px;padding-top:4px}
|
||||
</style></head><body>
|
||||
<div class="row"><div class="l">Body · 16/1.5</div><div style="max-width:56ch">Kon listens more than it speaks. Press the hotkey, speak your thought, and your words appear — saved, searchable, left exactly where you put them.</div></div>
|
||||
<div class="row"><div class="l">Body large · 18/1.6</div><div style="font-size:18px;line-height:1.6;max-width:52ch;color:var(--text-secondary)">A calm friend who has already done the anxious part for you.</div></div>
|
||||
<div class="row"><div class="l">Small · 13</div><div style="font-size:13px;color:var(--text-secondary)">Press record or Ctrl+Shift+R</div></div>
|
||||
<div class="row"><div class="l">Caption · 12</div><div style="font-size:12px;color:var(--text-tertiary)">12 words · 00:47 · live</div></div>
|
||||
<div class="row"><div class="l">Eyebrow · 10</div><div style="font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-tertiary)">Think out loud</div></div>
|
||||
</body></html>
|
||||
12
src/design-system/preview/type-headings.html
Normal file
12
src/design-system/preview/type-headings.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<!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:28px;font-family:var(--font-body);color:var(--text)}
|
||||
.row{display:flex;align-items:flex-end;gap:18px;margin-bottom:18px}
|
||||
.l{font:400 11px var(--font-mono);color:var(--text-tertiary);min-width:110px}
|
||||
</style></head><body>
|
||||
<div class="row"><div class="l">H1 · 32/1.15/700 Lexend</div><div style="font:700 32px/1.15 var(--font-body);letter-spacing:-.01em">Clarity without friction</div></div>
|
||||
<div class="row"><div class="l">H2 · 26/1.2/600 Lexend</div><div style="font:600 26px/1.2 var(--font-body)">Think out loud</div></div>
|
||||
<div class="row"><div class="l">Display · 26 Instrument Serif</div><div style="font:400 italic 26px/1.1 var(--font-display);color:var(--text)">History</div></div>
|
||||
<div class="row"><div class="l">H3 · 21/1.3</div><div style="font:600 21px/1.3 var(--font-body)">Sensory zones</div></div>
|
||||
<div class="row"><div class="l">H4 · 18/1.3</div><div style="font:600 18px/1.3 var(--font-body)">Press record or ⌃⇧R</div></div>
|
||||
</body></html>
|
||||
13
src/design-system/preview/type-transcript-mono.html
Normal file
13
src/design-system/preview/type-transcript-mono.html
Normal file
@@ -0,0 +1,13 @@
|
||||
<!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:28px;font-family:var(--font-body);color:var(--text)}
|
||||
.eb{font:500 10px/1 var(--font-body);color:var(--text-tertiary);letter-spacing:.12em;text-transform:uppercase;margin-bottom:14px}
|
||||
.tr{font-family:var(--font-body);font-size:17px;line-height:1.85;letter-spacing:.01em;max-width:58ch;color:var(--text)}
|
||||
.mono{margin-top:18px;font:500 13px var(--font-mono);color:var(--text-secondary)}
|
||||
kbd{font:400 11px var(--font-mono);padding:3px 7px;border-radius:6px;background:#171614;border:1px solid #221f1b;color:var(--text-tertiary);margin-right:6px}
|
||||
</style></head><body>
|
||||
<div class="eb">Transcript · 16–24px · 1.85 · +0.01em · liga + kern</div>
|
||||
<div class="tr">So the thing I wanted to capture is — if we move the onboarding to the second screen instead of the first, the friction around first launch basically disappears. That feels right.</div>
|
||||
<div class="mono">~/Library/Application Support/Kon/transcripts.db</div>
|
||||
<div style="margin-top:14px"><kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>R</kbd><span style="font-size:12px;color:var(--text-tertiary)">Global record toggle</span></div>
|
||||
</body></html>
|
||||
Reference in New Issue
Block a user