30 lines
1.9 KiB
HTML
30 lines
1.9 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Colors — Surfaces</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 24px; box-sizing: border-box; }
|
|
.row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; border-radius: var(--radius-md); overflow: hidden; height: 96px; box-shadow: inset 0 0 0 1px rgba(186,186,176,0.25); }
|
|
.sw { padding: 12px 12px; display: flex; flex-direction: column; justify-content: flex-end; font-family: var(--font-sans); }
|
|
.sw .hex { font-size: 10px; color: var(--on-surface-variant); letter-spacing: 0.04em; font-weight: 500; }
|
|
.sw .name { font-size: 10px; color: var(--on-surface); font-weight: 600; margin-bottom: 2px; }
|
|
.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:#fffcf7"><div class="name">lowest</div><div class="hex">#fffcf7</div></div>
|
|
<div class="sw" style="background:#faf6ee"><div class="name">surface</div><div class="hex">#faf6ee</div></div>
|
|
<div class="sw" style="background:#f6f2e8"><div class="name">low</div><div class="hex">#f6f2e8</div></div>
|
|
<div class="sw" style="background:#efeadc"><div class="name">container</div><div class="hex">#efeadc</div></div>
|
|
<div class="sw" style="background:#e7e1d0"><div class="name">high</div><div class="hex">#e7e1d0</div></div>
|
|
<div class="sw" style="background:#ddd6c3"><div class="name">highest</div><div class="hex">#ddd6c3</div></div>
|
|
</div>
|
|
<div class="legend">Six tonal tiers of unbleached paper to warm clay. Never pure white — <code style="font-family:var(--font-mono);font-size:12px;">#fffcf7</code> is the lightest.</div>
|
|
</div>
|
|
</body>
|
|
</html>
|