12 lines
1.5 KiB
HTML
12 lines
1.5 KiB
HTML
|
<!doctype html><html><head><meta charset="utf-8"><title>Surface palette</title><link rel="stylesheet" href="_card.css"></head><body>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-row" style="gap:0;border:1px solid var(--border-1);border-radius:8px;overflow:hidden;height:100px">
|
||
|
|
<div style="flex:1;background:var(--bg-page);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-page</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#0F172A</div></div></div>
|
||
|
|
<div style="flex:1;background:var(--bg-surface);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-surface</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#1E293B</div></div></div>
|
||
|
|
<div style="flex:1;background:var(--bg-elevated);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-elevated</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#334155</div></div></div>
|
||
|
|
<div style="flex:1;background:var(--bg-hover);display:flex;align-items:flex-end;padding:8px"><div><div style="font:600 11px/1 var(--font-mono);color:var(--fg-1)">--bg-hover</div><div style="font:400 10px/1.4 var(--font-mono);color:var(--fg-muted);margin-top:3px">#475569</div></div></div>
|
||
|
|
</div>
|
||
|
|
<div class="t-meta">Page → surface → elevated → hover. Each step lifts ≈ one slate stop.</div>
|
||
|
|
</div>
|
||
|
|
</body></html>
|