1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8" />
5 <link rel="stylesheet" href="_card.css" />
6 <style>
7 .grid {
8 display: grid;
9 grid-template-columns: repeat(11, 1fr);
10 gap: 4px;
11 }
12 .sw {
13 aspect-ratio: 1/1.35;
14 border-radius: 6px;
15 display: flex;
16 align-items: flex-end;
17 justify-content: center;
18 padding-bottom: 6px;
19 font-family: var(--alc-font-mono);
20 font-size: 10px;
21 border: 1px solid var(--alc-hairline);
22 }
23 .sw.dark {
24 color: var(--alc-fg-invert);
25 }
26 .sw.light {
27 color: var(--alc-fg-1);
28 }
29 .k {
30 opacity: 0.85;
31 }
32 </style>
33 </head>
34 <body>
35 <div class="card">
36 <div class="grid">
37 <div class="sw light" style="background: #faf6ec">
38 <span class="k">50</span>
39 </div>
40 <div class="sw light" style="background: #f1ead8">
41 <span class="k">100</span>
42 </div>
43 <div class="sw light" style="background: #e2d7bc">
44 <span class="k">200</span>
45 </div>
46 <div class="sw light" style="background: #c7b795">
47 <span class="k">300</span>
48 </div>
49 <div class="sw light" style="background: #a89572">
50 <span class="k">400</span>
51 </div>
52 <div class="sw dark" style="background: #85714f">
53 <span class="k">500</span>
54 </div>
55 <div class="sw dark" style="background: #68573c">
56 <span class="k">600</span>
57 </div>
58 <div class="sw dark" style="background: #4e402c">
59 <span class="k">700</span>
60 </div>
61 <div class="sw dark" style="background: #363022">
62 <span class="k">800</span>
63 </div>
64 <div class="sw dark" style="background: #2a2620">
65 <span class="k">900</span>
66 </div>
67 <div class="sw dark" style="background: #1a1813">
68 <span class="k">950</span>
69 </div>
70 </div>
71 <div
72 style="
73 margin-top: 10px;
74 font-family: var(--alc-font-mono);
75 font-size: 11px;
76 color: var(--alc-fg-3);
77 "
78 >
79 Walnut scale · --alc-walnut-{50–950}
80 </div>
81 </div>
82 </body>
83</html>