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>
24 lines
1.8 KiB
HTML
24 lines
1.8 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)}
|
|
.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>
|