30 lines
1.2 KiB
HTML
30 lines
1.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Tonal Layering</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 24px; box-sizing: border-box; }
|
|
.stack { background: #efeadc; border-radius: 12px; padding: 22px; }
|
|
.inner { background: #faf6ee; border-radius: 10px; padding: 16px; margin-top: 10px; }
|
|
.innerest { background: #fffcf7; border-radius: 8px; padding: 12px; margin-top: 8px; box-shadow: 0 8px 20px -10px rgba(56,56,49,0.10); }
|
|
.lab { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-surface-variant); }
|
|
.v { font-family: var(--font-sans); font-size: 11px; color: var(--on-surface-variant); float:right; font-weight: 500; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="stack">
|
|
<div class="lab">surface-container <span class="v">#efeadc</span></div>
|
|
<div class="inner">
|
|
<div class="lab">surface · canvas <span class="v">#faf6ee</span></div>
|
|
<div class="innerest">
|
|
<div class="lab">surface-container-lowest <span class="v">#fffcf7</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|