22 lines
1.2 KiB
HTML
22 lines
1.2 KiB
HTML
<!doctype html><html><head><meta charset="utf-8">
|
|
<link rel="stylesheet" href="../colors_and_type.css">
|
|
<style>
|
|
body{margin:0}
|
|
.wrap{background:var(--ground-dark);padding:30px 32px;box-sizing:border-box;font-family:var(--font-body)}
|
|
.head{font-family:var(--font-display);font-size:30px;color:var(--fg-on-dark-1);letter-spacing:-.01em;margin:0 0 6px}
|
|
.sub{font-size:13px;color:var(--fg-on-dark-2);margin:0 0 18px}
|
|
.meta{font-size:12px;color:var(--fg-on-dark-3);font-family:var(--font-mono)}
|
|
.chips{display:flex;gap:10px;margin-top:18px}
|
|
.chip{height:34px;flex:1;border-radius:var(--radius-xs);display:flex;align-items:center;padding-left:10px;font-family:var(--font-mono);font-size:10px}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<p class="head">Ink ground — the default theme.</p>
|
|
<p class="sub">Deep, warm, moody. Chiaroscuro through value, never cool grey.</p>
|
|
<p class="meta">ground-dark #17130E · text on dark stays bone</p>
|
|
<div class="chips">
|
|
<div class="chip" style="background:#EDE4D5;color:#17130E">fg-on-dark-1</div>
|
|
<div class="chip" style="background:#AE9B7F;color:#17130E">fg-on-dark-2</div>
|
|
<div class="chip" style="background:#6F5E48;color:#17130E">fg-on-dark-3</div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|