29 lines
1.7 KiB
HTML
29 lines
1.7 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<title>Colors — Archival Pigments</title>
|
||
<link rel="stylesheet" href="../colors_and_type.css" />
|
||
<style>
|
||
html, body { margin: 0; background: var(--background); }
|
||
.card { padding: 22px 24px; box-sizing: border-box; }
|
||
.row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
|
||
.sw { border-radius: var(--radius-md); height: 96px; padding: 12px 14px; box-sizing: border-box; color: #fffcf7; display: flex; flex-direction: column; justify-content: space-between; font-family: var(--font-sans); }
|
||
.sw .n { font-weight: 600; font-size: 12px; letter-spacing: 0.02em; }
|
||
.sw .h { font-size: 11px; letter-spacing: 0.04em; opacity: 0.9; }
|
||
.legend { margin-top: 14px; font-family: var(--font-serif); font-style: italic; color: var(--on-surface-variant); font-size: 13px; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="card">
|
||
<div class="row">
|
||
<div class="sw" style="background:#b96b58"><div class="n">Faded Terracotta</div><div class="h">#b96b58 · critical</div></div>
|
||
<div class="sw" style="background:#6d8c7c"><div class="n">Oxidized Copper</div><div class="h">#6d8c7c · success</div></div>
|
||
<div class="sw" style="background:#c29d59"><div class="n">Raw Ochre</div><div class="h">#c29d59 · caution</div></div>
|
||
<div class="sw" style="background:#5a6d83"><div class="n">Faded Indigo</div><div class="h">#5a6d83 · info</div></div>
|
||
<div class="sw" style="background:#8d7a85"><div class="n">Dusty Heather</div><div class="h">#8d7a85 · categorical</div></div>
|
||
</div>
|
||
<div class="legend">Flat, matte inks — never gradient. 20–40% opacity for overlapping data fills.</div>
|
||
</div>
|
||
</body>
|
||
</html>
|