21 lines
1.1 KiB
HTML
21 lines
1.1 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);padding:26px 30px;box-sizing:border-box;font-family:var(--font-body);display:flex;gap:24px;align-items:center}
|
|
.chip{width:96px;height:96px;border-radius:var(--radius-sm);flex:none}
|
|
.meta{display:flex;flex-direction:column;gap:6px}
|
|
.name{font-size:13px;color:var(--fg-1);font-weight:600}
|
|
.hex{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
|
|
.note{font-size:12px;color:var(--fg-2);line-height:1.5;max-width:300px;margin-top:4px}
|
|
</style></head><body>
|
|
<div class="wrap">
|
|
<div class="chip" style="background:var(--accent)"></div>
|
|
<div class="chip" style="background:var(--accent-deep)"></div>
|
|
<div class="meta">
|
|
<div class="name">accent · muted ochre</div>
|
|
<div class="hex">#C0883A / #9A6A28 deep</div>
|
|
<div class="note">The single restrained highlight. A deliberate, rare event — hover ticks, a drawn hairline, the occasional link. Never floods chrome or navigation.</div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|