27 lines
1.4 KiB
HTML
27 lines
1.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Colors — Text & Neutrals</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 24px; box-sizing: border-box; }
|
|
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
|
|
.sw { border-radius: var(--radius-md); padding: 14px 14px; height: 110px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; }
|
|
.sw .n { font-family: var(--font-sans); font-weight: 600; font-size: 12px; }
|
|
.sw .h { font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="grid">
|
|
<div class="sw" style="background:#383831;color:#fffcf7"><div class="n">on-surface</div><div class="h">#383831</div></div>
|
|
<div class="sw" style="background:#5f5e5e;color:#fffcf7"><div class="n">on-surface-variant</div><div class="h">#5f5e5e</div></div>
|
|
<div class="sw" style="background:#8a887f;color:#fffcf7"><div class="n">muted</div><div class="h">#8a887f</div></div>
|
|
<div class="sw" style="background:#785f53;color:#fffcf7"><div class="n">secondary</div><div class="h">#785f53</div></div>
|
|
<div class="sw" style="background:#6b5348;color:#fffcf7"><div class="n">secondary-dim</div><div class="h">#6b5348</div></div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|