1<!doctype html>
2<html>
3 <head>
4 <meta charset="utf-8" />
5 <title>Spacing scale</title>
6 <link rel="stylesheet" href="_card.css" />
7 <style>
8 .row {
9 display: flex;
10 align-items: center;
11 gap: 12px;
12 margin-bottom: 6px;
13 }
14 .label {
15 font-family: var(--alc-font-mono);
16 font-size: 11px;
17 color: var(--alc-fg-3);
18 width: 84px;
19 flex-shrink: 0;
20 }
21 .bar {
22 background: var(--alc-accent);
23 height: 10px;
24 border-radius: 2px;
25 }
26 .px {
27 font-family: var(--alc-font-mono);
28 font-size: 10px;
29 color: var(--alc-fg-4);
30 }
31 </style>
32 </head>
33 <body>
34 <div class="card">
35 <div class="row">
36 <div class="label">space-1</div>
37 <div class="bar" style="width: 4px"></div>
38 <div class="px">4</div>
39 </div>
40 <div class="row">
41 <div class="label">space-2</div>
42 <div class="bar" style="width: 8px"></div>
43 <div class="px">8</div>
44 </div>
45 <div class="row">
46 <div class="label">space-3</div>
47 <div class="bar" style="width: 12px"></div>
48 <div class="px">12</div>
49 </div>
50 <div class="row">
51 <div class="label">space-4</div>
52 <div class="bar" style="width: 16px"></div>
53 <div class="px">16</div>
54 </div>
55 <div class="row">
56 <div class="label">space-5</div>
57 <div class="bar" style="width: 24px"></div>
58 <div class="px">24</div>
59 </div>
60 <div class="row">
61 <div class="label">space-6</div>
62 <div class="bar" style="width: 32px"></div>
63 <div class="px">32</div>
64 </div>
65 <div class="row">
66 <div class="label">space-7</div>
67 <div class="bar" style="width: 48px"></div>
68 <div class="px">48</div>
69 </div>
70 <div class="row">
71 <div class="label">space-8</div>
72 <div class="bar" style="width: 64px"></div>
73 <div class="px">64</div>
74 </div>
75 <div class="row">
76 <div class="label">space-9</div>
77 <div class="bar" style="width: 96px"></div>
78 <div class="px">96</div>
79 </div>
80 </div>
81 </body>
82</html>