IMBENJI.NET/Garage-SDKs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
b5e5ed5b75c952609e6e89159b57c9fb2e60bef4
Garage-SDKs/design_system/foundations/spacing.html
T
ImBenjiandClaude Opus 5.5 b5e5ed5b75 Add a design system for Claude Design, generated from garage_ui 
Tokens come out of garage_ui/tool/export_design_tokens_test.dart, the
components are CSS on top of them, and the cards cover foundations,
components and whole hub and Arcs & Angles screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013F4NWNvYcdeSgqbWMT1VQ7
2026-09-23 23:19:02 +01:00

81 lines
5.8 KiB
HTML
Raw Blame History

<!-- @dsCard group="Foundations" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Spacing</title>
<link rel="stylesheet" href="../components.css">
<style>
body { padding: var(--container-padding); }
.block { margin-top: var(--gap-xl); }
.block > .caption { margin-bottom: var(--gap-sm); padding: 0 var(--gap-xxs); }
.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.tier { border: var(--control-border-width) solid var(--panel-border); border-radius: var(--radius-lg); padding: var(--gap-md) var(--gap-lg); }
.tier > .caption { margin-bottom: var(--gap-sm); }
.bar-row { display: flex; align-items: center; gap: var(--gap-md); min-height: var(--line-box); padding: var(--gap-xxs) 0; }
.bar-row .tok { flex: 0 0 48%; white-space: nowrap; }
.bar-row .bar { height: var(--gap-sm); background: var(--primary); border-radius: var(--radius-xs); flex: none; }
.bar-row .px { font-size: var(--text-xxs); }
</style>
</head>
<body>
<div class="page-heading">
<div class="title">Spacing</div>
<div class="subtitle">Gaps come from the density tier. Never a literal.</div>
</div>
<div class="block">
<div class="caption">Gap ladder</div>
<div class="tiers">
<div class="gu tier" data-density="product">
<div class="caption">Product (and normal)</div>
<div class="bar-row"><span class="tok mono muted">gap-xxs</span><div class="bar" style="width: var(--gap-xxs)"></div><span class="px mono muted">3</span></div>
<div class="bar-row"><span class="tok mono muted">gap-xs</span><div class="bar" style="width: var(--gap-xs)"></div><span class="px mono muted">5</span></div>
<div class="bar-row"><span class="tok mono muted">gap-sm</span><div class="bar" style="width: var(--gap-sm)"></div><span class="px mono muted">8</span></div>
<div class="bar-row"><span class="tok mono muted">gap-md</span><div class="bar" style="width: var(--gap-md)"></div><span class="px mono muted">10</span></div>
<div class="bar-row"><span class="tok mono muted">gap-lg</span><div class="bar" style="width: var(--gap-lg)"></div><span class="px mono muted">15</span></div>
<div class="bar-row"><span class="tok mono muted">gap-xl</span><div class="bar" style="width: var(--gap-xl)"></div><span class="px mono muted">20</span></div>
<div class="bar-row"><span class="tok mono muted">gap-xxl</span><div class="bar" style="width: var(--gap-xxl)"></div><span class="px mono muted">30</span></div>
</div>
<div class="gu tier" data-density="compact">
<div class="caption">Compact</div>
<div class="bar-row"><span class="tok mono muted">gap-xxs</span><div class="bar" style="width: var(--gap-xxs)"></div><span class="px mono muted">2</span></div>
<div class="bar-row"><span class="tok mono muted">gap-xs</span><div class="bar" style="width: var(--gap-xs)"></div><span class="px mono muted">4</span></div>
<div class="bar-row"><span class="tok mono muted">gap-sm</span><div class="bar" style="width: var(--gap-sm)"></div><span class="px mono muted">6</span></div>
<div class="bar-row"><span class="tok mono muted">gap-md</span><div class="bar" style="width: var(--gap-md)"></div><span class="px mono muted">8</span></div>
<div class="bar-row"><span class="tok mono muted">gap-lg</span><div class="bar" style="width: var(--gap-lg)"></div><span class="px mono muted">12</span></div>
<div class="bar-row"><span class="tok mono muted">gap-xl</span><div class="bar" style="width: var(--gap-xl)"></div><span class="px mono muted">16</span></div>
<div class="bar-row"><span class="tok mono muted">gap-xxl</span><div class="bar" style="width: var(--gap-xxl)"></div><span class="px mono muted">24</span></div>
</div>
</div>
</div>
<div class="block">
<div class="caption">Heights and containers</div>
<div class="tiers">
<div class="gu tier" data-density="product">
<div class="caption">Product</div>
<div class="bar-row"><span class="tok mono muted">control-height</span><div class="bar" style="width: var(--control-height)"></div><span class="px mono muted">33</span></div>
<div class="bar-row"><span class="tok mono muted">property-row-height</span><div class="bar" style="width: var(--property-row-height)"></div><span class="px mono muted">36</span></div>
<div class="bar-row"><span class="tok mono muted">chrome-bar-height</span><div class="bar" style="width: var(--chrome-bar-height)"></div><span class="px mono muted">43</span></div>
<div class="bar-row"><span class="tok mono muted">container-gap</span><div class="bar" style="width: var(--container-gap)"></div><span class="px mono muted">10</span></div>
<div class="bar-row"><span class="tok mono muted">container-padding</span><div class="bar" style="width: var(--container-padding)"></div><span class="px mono muted">20</span></div>
</div>
<div class="gu tier" data-density="compact">
<div class="caption">Compact</div>
<div class="bar-row"><span class="tok mono muted">control-height</span><div class="bar" style="width: var(--control-height)"></div><span class="px mono muted">23</span></div>
<div class="bar-row"><span class="tok mono muted">property-row-height</span><div class="bar" style="width: var(--property-row-height)"></div><span class="px mono muted">28</span></div>
<div class="bar-row"><span class="tok mono muted">chrome-bar-height</span><div class="bar" style="width: var(--chrome-bar-height)"></div><span class="px mono muted">31</span></div>
<div class="bar-row"><span class="tok mono muted">container-gap</span><div class="bar" style="width: var(--container-gap)"></div><span class="px mono muted">8</span></div>
<div class="bar-row"><span class="tok mono muted">container-padding</span><div class="bar" style="width: var(--container-padding)"></div><span class="px mono muted">16</span></div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink