28 lines
1.8 KiB
HTML
28 lines
1.8 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Spacing Scale</title>
|
|
<link rel="stylesheet" href="../colors_and_type.css" />
|
|
<style>
|
|
html, body { margin: 0; background: var(--background); }
|
|
.card { padding: 22px 28px; box-sizing: border-box; font-family: var(--font-sans); }
|
|
.row { display: grid; grid-template-columns: 80px 70px 1fr; align-items: center; column-gap: 14px; padding: 5px 0; }
|
|
.name { font-size: 12px; color: var(--on-surface); font-weight: 600; }
|
|
.val { font-size: 11px; color: var(--on-surface-variant); letter-spacing: 0.04em; }
|
|
.bar { height: 10px; background: var(--secondary); border-radius: 2px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="card">
|
|
<div class="row"><div class="name">space-2</div><div class="val">0.5 · 8</div><div><div class="bar" style="width:8px"></div></div></div>
|
|
<div class="row"><div class="name">space-3</div><div class="val">0.75 · 12</div><div><div class="bar" style="width:12px"></div></div></div>
|
|
<div class="row"><div class="name">space-4</div><div class="val">1 · 16</div><div><div class="bar" style="width:16px"></div></div></div>
|
|
<div class="row"><div class="name">space-5</div><div class="val">1.5 · 24</div><div><div class="bar" style="width:24px"></div></div></div>
|
|
<div class="row"><div class="name">space-6</div><div class="val">2 · 32</div><div><div class="bar" style="width:32px"></div></div></div>
|
|
<div class="row"><div class="name">space-8</div><div class="val">2.75 · 44</div><div><div class="bar" style="width:44px"></div></div></div>
|
|
<div class="row"><div class="name">space-12</div><div class="val">5 · 80</div><div><div class="bar" style="width:80px"></div></div></div>
|
|
<div class="row"><div class="name">space-20</div><div class="val">7 · 112</div><div><div class="bar" style="width:112px"></div></div></div>
|
|
</div>
|
|
</body>
|
|
</html>
|