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>
20 lines
1.5 KiB
HTML
20 lines
1.5 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)}
|
|
.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>
|