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
This commit is contained in:
ImBenji
2026-09-23 23:19:02 +01:00
co-authored by Claude Opus 5.5
parent 572c09039f
commit b5e5ed5b75
25 changed files with 3381 additions and 0 deletions
+140
View File
@@ -0,0 +1,140 @@
<!-- @dsCard group="Foundations" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Colour</title>
<link rel="stylesheet" href="../components.css">
<style>
body { padding: var(--container-padding); }
.group { margin-top: var(--gap-lg); }
.group > .caption { margin-bottom: var(--gap-sm); padding: 0 var(--gap-xxs); }
.swatches { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.sw { display: flex; gap: var(--gap-sm); align-items: flex-start; min-width: 0; }
.sw .chip { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); border: var(--control-border-width) solid var(--divider); }
.sw .meta { min-width: 0; display: flex; flex-direction: column; gap: var(--gap-xxs); }
.sw .for { font-size: var(--text-xxs); }
.schemes { margin-top: var(--gap-xl); display: flex; flex-direction: column; gap: var(--gap-sm); }
.strip { display: flex; align-items: center; gap: var(--gap-md); padding: var(--gap-sm) var(--gap-md); border-radius: var(--radius-md); border: var(--control-border-width) solid var(--panel-border); }
.strip .name { width: calc(var(--control-height) * 1.6); flex: none; }
.strip .chips { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }
.strip .set { display: flex; gap: var(--gap-xxs); }
.strip .mini { width: 12px; height: 12px; border-radius: var(--radius-xs); border: var(--control-border-width) solid var(--divider); }
</style>
</head>
<body>
<div class="page-heading">
<div class="title">Colour</div>
<div class="subtitle">37 slots per scheme. Carbon is the default. Pick the slot by what the thing is.</div>
</div>
<div class="group">
<div class="caption">Ground & surfaces</div>
<div class="swatches">
<div class="sw"><div class="chip" style="background: var(--background)"></div><div class="meta"><span class="mono">--background</span><span class="mono muted">#0d0d0d</span><span class="for muted">Page ground, and a panel's fill</span></div></div>
<div class="sw"><div class="chip" style="background: var(--chrome)"></div><div class="meta"><span class="mono">--chrome</span><span class="mono muted">#010101</span><span class="for muted">Header and footer bars, the gutter between panels</span></div></div>
<div class="sw"><div class="chip" style="background: var(--surface-sunken)"></div><div class="meta"><span class="mono">--surface-sunken</span><span class="mono muted">#0a0a0a</span><span class="for muted">One step below the ground: rails, panel bodies</span></div></div>
<div class="sw"><div class="chip" style="background: var(--card)"></div><div class="meta"><span class="mono">--card</span><span class="mono muted">#1b1b1b</span><span class="for muted">Raised surface: cards, properties sections, dialogs</span></div></div>
<div class="sw"><div class="chip" style="background: var(--muted)"></div><div class="meta"><span class="mono">--muted</span><span class="mono muted">#0f0f0f</span><span class="for muted">De-emphasised fill</span></div></div>
</div>
</div>
<div class="group">
<div class="caption">Text</div>
<div class="swatches">
<div class="sw"><div class="chip" style="background: var(--foreground)"></div><div class="meta"><span class="mono">--foreground</span><span class="mono muted">#f2f2f2</span><span class="for muted">Default text</span></div></div>
<div class="sw"><div class="chip" style="background: var(--muted-foreground)"></div><div class="meta"><span class="mono">--muted-foreground</span><span class="mono muted">#8f8f8f</span><span class="for muted">Secondary text, hints, units</span></div></div>
<div class="sw"><div class="chip" style="background: var(--row-text)"></div><div class="meta"><span class="mono">--row-text</span><span class="mono muted">#c2c2c2</span><span class="for muted">A row's resting label</span></div></div>
<div class="sw"><div class="chip" style="background: var(--row-hovered)"></div><div class="meta"><span class="mono">--row-hovered</span><span class="mono muted">#222222</span><span class="for muted">A hovered row in lists and menus</span></div></div>
</div>
</div>
<div class="group">
<div class="caption">Controls</div>
<div class="swatches">
<div class="sw"><div class="chip" style="background: var(--control-fill)"></div><div class="meta"><span class="mono">--control-fill</span><span class="mono muted">#080808</span><span class="for muted">Shared fill of every control</span></div></div>
<div class="sw"><div class="chip" style="background: var(--control-fill-hovered)"></div><div class="meta"><span class="mono">--control-fill-hovered</span><span class="mono muted">#070707</span><span class="for muted">Control fill, hovered</span></div></div>
<div class="sw"><div class="chip" style="background: var(--control-fill-focused)"></div><div class="meta"><span class="mono">--control-fill-focused</span><span class="mono muted">#000000</span><span class="for muted">Control fill, focused</span></div></div>
<div class="sw"><div class="chip" style="background: var(--control-border)"></div><div class="meta"><span class="mono">--control-border</span><span class="mono muted">#2a2a2a</span><span class="for muted">Shared stroke of every control</span></div></div>
<div class="sw"><div class="chip" style="background: var(--secondary)"></div><div class="meta"><span class="mono">--secondary</span><span class="mono muted">#303030</span><span class="for muted">A neutral filled control</span></div></div>
<div class="sw"><div class="chip" style="background: var(--secondary-hovered)"></div><div class="meta"><span class="mono">--secondary-hovered</span><span class="mono muted">#424242</span><span class="for muted">Secondary, hovered</span></div></div>
<div class="sw"><div class="chip" style="background: var(--secondary-foreground)"></div><div class="meta"><span class="mono">--secondary-foreground</span><span class="mono muted">#f2f2f2</span><span class="for muted">Text on secondary</span></div></div>
<div class="sw"><div class="chip" style="background: var(--switch-track-inactive)"></div><div class="meta"><span class="mono">--switch-track-inactive</span><span class="mono muted">#0f0f0f</span><span class="for muted">A switch while off</span></div></div>
</div>
</div>
<div class="group">
<div class="caption">Floating</div>
<div class="swatches">
<div class="sw"><div class="chip" style="background: var(--popover)"></div><div class="meta"><span class="mono">--popover</span><span class="mono muted">#000000</span><span class="for muted">Menus, select popups, anything floating</span></div></div>
<div class="sw"><div class="chip" style="background: var(--popover-border)"></div><div class="meta"><span class="mono">--popover-border</span><span class="mono muted">#1c1c1c</span><span class="for muted">A popover's edge</span></div></div>
<div class="sw"><div class="chip" style="background: var(--popover-item-hovered)"></div><div class="meta"><span class="mono">--popover-item-hovered</span><span class="mono muted">#1f1f1f</span><span class="for muted">Hover inside select and date popups</span></div></div>
<div class="sw"><div class="chip" style="background: var(--tooltip-background)"></div><div class="meta"><span class="mono">--tooltip-background</span><span class="mono muted">#080808</span><span class="for muted">Tooltips, above everything</span></div></div>
<div class="sw"><div class="chip" style="background: var(--tooltip-border)"></div><div class="meta"><span class="mono">--tooltip-border</span><span class="mono muted">#1f1f1f</span><span class="for muted">A tooltip's edge</span></div></div>
</div>
</div>
<div class="group">
<div class="caption">Accent & state</div>
<div class="swatches">
<div class="sw"><div class="chip" style="background: var(--primary)"></div><div class="meta"><span class="mono">--primary</span><span class="mono muted">#e8e8e8</span><span class="for muted">The accent. The one thing that's on or chosen</span></div></div>
<div class="sw"><div class="chip" style="background: var(--primary-hovered)"></div><div class="meta"><span class="mono">--primary-hovered</span><span class="mono muted">#fefefe</span><span class="for muted">Primary, hovered</span></div></div>
<div class="sw"><div class="chip" style="background: var(--primary-foreground)"></div><div class="meta"><span class="mono">--primary-foreground</span><span class="mono muted">#000000</span><span class="for muted">Text on primary</span></div></div>
<div class="sw"><div class="chip" style="background: var(--destructive)"></div><div class="meta"><span class="mono">--destructive</span><span class="mono muted">#c43333</span><span class="for muted">Delete, revoke, discard</span></div></div>
<div class="sw"><div class="chip" style="background: var(--ring)"></div><div class="meta"><span class="mono">--ring</span><span class="mono muted">#ffffff</span><span class="for muted">Keyboard focus</span></div></div>
</div>
</div>
<div class="group">
<div class="caption">Lines & panels</div>
<div class="swatches">
<div class="sw"><div class="chip" style="background: var(--border)"></div><div class="meta"><span class="mono">--border</span><span class="mono muted">#010101</span><span class="for muted">General outline</span></div></div>
<div class="sw"><div class="chip" style="background: var(--divider)"></div><div class="meta"><span class="mono">--divider</span><span class="mono muted">#202020</span><span class="for muted">A seam between things</span></div></div>
<div class="sw"><div class="chip" style="background: var(--panel-border)"></div><div class="meta"><span class="mono">--panel-border</span><span class="mono muted">#222222</span><span class="for muted">A panel's edge, resting</span></div></div>
<div class="sw"><div class="chip" style="background: var(--panel-border-highlighted)"></div><div class="meta"><span class="mono">--panel-border-highlighted</span><span class="mono muted">#3a3a3a</span><span class="for muted">The lit panel's edge</span></div></div>
<div class="sw"><div class="chip" style="background: var(--properties-section-border)"></div><div class="meta"><span class="mono">--properties-section-border</span><span class="mono muted">#272727</span><span class="for muted">A properties section's edge</span></div></div>
</div>
</div>
<div class="group">
<div class="caption">Charts</div>
<div class="swatches">
<div class="sw"><div class="chip" style="background: var(--chart-1)"></div><div class="meta"><span class="mono">--chart-1</span><span class="mono muted">#f45b69</span><span class="for muted">Data visualisation</span></div></div>
<div class="sw"><div class="chip" style="background: var(--chart-2)"></div><div class="meta"><span class="mono">--chart-2</span><span class="mono muted">#86d957</span><span class="for muted">Data visualisation</span></div></div>
<div class="sw"><div class="chip" style="background: var(--chart-3)"></div><div class="meta"><span class="mono">--chart-3</span><span class="mono muted">#62a7ff</span><span class="for muted">Data visualisation</span></div></div>
<div class="sw"><div class="chip" style="background: var(--chart-4)"></div><div class="meta"><span class="mono">--chart-4</span><span class="mono muted">#ffc857</span><span class="for muted">Data visualisation</span></div></div>
<div class="sw"><div class="chip" style="background: var(--chart-5)"></div><div class="meta"><span class="mono">--chart-5</span><span class="mono muted">#ff8c42</span><span class="for muted">Data visualisation</span></div></div>
</div>
</div>
<div class="schemes">
<div class="caption">Other schemes, same slots in the same order</div>
<div class="gu strip" data-scheme="light">
<span class="name medium">Light</span>
<div class="chips">
<div class="set"><div class="mini" style="background: var(--background)" title="--background"></div><div class="mini" style="background: var(--chrome)" title="--chrome"></div><div class="mini" style="background: var(--surface-sunken)" title="--surface-sunken"></div><div class="mini" style="background: var(--card)" title="--card"></div><div class="mini" style="background: var(--muted)" title="--muted"></div></div>
<div class="set"><div class="mini" style="background: var(--foreground)" title="--foreground"></div><div class="mini" style="background: var(--muted-foreground)" title="--muted-foreground"></div><div class="mini" style="background: var(--row-text)" title="--row-text"></div><div class="mini" style="background: var(--row-hovered)" title="--row-hovered"></div></div>
<div class="set"><div class="mini" style="background: var(--control-fill)" title="--control-fill"></div><div class="mini" style="background: var(--control-fill-hovered)" title="--control-fill-hovered"></div><div class="mini" style="background: var(--control-fill-focused)" title="--control-fill-focused"></div><div class="mini" style="background: var(--control-border)" title="--control-border"></div><div class="mini" style="background: var(--secondary)" title="--secondary"></div><div class="mini" style="background: var(--secondary-hovered)" title="--secondary-hovered"></div><div class="mini" style="background: var(--secondary-foreground)" title="--secondary-foreground"></div><div class="mini" style="background: var(--switch-track-inactive)" title="--switch-track-inactive"></div></div>
<div class="set"><div class="mini" style="background: var(--popover)" title="--popover"></div><div class="mini" style="background: var(--popover-border)" title="--popover-border"></div><div class="mini" style="background: var(--popover-item-hovered)" title="--popover-item-hovered"></div><div class="mini" style="background: var(--tooltip-background)" title="--tooltip-background"></div><div class="mini" style="background: var(--tooltip-border)" title="--tooltip-border"></div></div>
<div class="set"><div class="mini" style="background: var(--primary)" title="--primary"></div><div class="mini" style="background: var(--primary-hovered)" title="--primary-hovered"></div><div class="mini" style="background: var(--primary-foreground)" title="--primary-foreground"></div><div class="mini" style="background: var(--destructive)" title="--destructive"></div><div class="mini" style="background: var(--ring)" title="--ring"></div></div>
<div class="set"><div class="mini" style="background: var(--border)" title="--border"></div><div class="mini" style="background: var(--divider)" title="--divider"></div><div class="mini" style="background: var(--panel-border)" title="--panel-border"></div><div class="mini" style="background: var(--panel-border-highlighted)" title="--panel-border-highlighted"></div><div class="mini" style="background: var(--properties-section-border)" title="--properties-section-border"></div></div>
<div class="set"><div class="mini" style="background: var(--chart-1)" title="--chart-1"></div><div class="mini" style="background: var(--chart-2)" title="--chart-2"></div><div class="mini" style="background: var(--chart-3)" title="--chart-3"></div><div class="mini" style="background: var(--chart-4)" title="--chart-4"></div><div class="mini" style="background: var(--chart-5)" title="--chart-5"></div></div>
</div>
</div>
<div class="gu strip" data-scheme="dark">
<span class="name medium">Dark</span>
<div class="chips">
<div class="set"><div class="mini" style="background: var(--background)" title="--background"></div><div class="mini" style="background: var(--chrome)" title="--chrome"></div><div class="mini" style="background: var(--surface-sunken)" title="--surface-sunken"></div><div class="mini" style="background: var(--card)" title="--card"></div><div class="mini" style="background: var(--muted)" title="--muted"></div></div>
<div class="set"><div class="mini" style="background: var(--foreground)" title="--foreground"></div><div class="mini" style="background: var(--muted-foreground)" title="--muted-foreground"></div><div class="mini" style="background: var(--row-text)" title="--row-text"></div><div class="mini" style="background: var(--row-hovered)" title="--row-hovered"></div></div>
<div class="set"><div class="mini" style="background: var(--control-fill)" title="--control-fill"></div><div class="mini" style="background: var(--control-fill-hovered)" title="--control-fill-hovered"></div><div class="mini" style="background: var(--control-fill-focused)" title="--control-fill-focused"></div><div class="mini" style="background: var(--control-border)" title="--control-border"></div><div class="mini" style="background: var(--secondary)" title="--secondary"></div><div class="mini" style="background: var(--secondary-hovered)" title="--secondary-hovered"></div><div class="mini" style="background: var(--secondary-foreground)" title="--secondary-foreground"></div><div class="mini" style="background: var(--switch-track-inactive)" title="--switch-track-inactive"></div></div>
<div class="set"><div class="mini" style="background: var(--popover)" title="--popover"></div><div class="mini" style="background: var(--popover-border)" title="--popover-border"></div><div class="mini" style="background: var(--popover-item-hovered)" title="--popover-item-hovered"></div><div class="mini" style="background: var(--tooltip-background)" title="--tooltip-background"></div><div class="mini" style="background: var(--tooltip-border)" title="--tooltip-border"></div></div>
<div class="set"><div class="mini" style="background: var(--primary)" title="--primary"></div><div class="mini" style="background: var(--primary-hovered)" title="--primary-hovered"></div><div class="mini" style="background: var(--primary-foreground)" title="--primary-foreground"></div><div class="mini" style="background: var(--destructive)" title="--destructive"></div><div class="mini" style="background: var(--ring)" title="--ring"></div></div>
<div class="set"><div class="mini" style="background: var(--border)" title="--border"></div><div class="mini" style="background: var(--divider)" title="--divider"></div><div class="mini" style="background: var(--panel-border)" title="--panel-border"></div><div class="mini" style="background: var(--panel-border-highlighted)" title="--panel-border-highlighted"></div><div class="mini" style="background: var(--properties-section-border)" title="--properties-section-border"></div></div>
<div class="set"><div class="mini" style="background: var(--chart-1)" title="--chart-1"></div><div class="mini" style="background: var(--chart-2)" title="--chart-2"></div><div class="mini" style="background: var(--chart-3)" title="--chart-3"></div><div class="mini" style="background: var(--chart-4)" title="--chart-4"></div><div class="mini" style="background: var(--chart-5)" title="--chart-5"></div></div>
</div>
</div>
</div>
</body>
</html>
+89
View File
@@ -0,0 +1,89 @@
<!-- @dsCard group="Foundations" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Density</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: repeat(3, minmax(0, 1fr)); gap: var(--gap-md); align-items: start; }
.tier { border: var(--control-border-width) solid var(--panel-border); border-radius: var(--radius-lg); padding: var(--gap-md) 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-sm); }
.tier > .caption, .tier > .ctl { padding: 0 var(--gap-md); }
.tier > .ctl { display: flex; }
.tier > .ctl > .field, .tier > .ctl > .select { flex: 1; }
.tier .properties-section { margin-top: var(--gap-xxs); }
.rows { display: flex; flex-direction: column; }
.rows .r { display: grid; grid-template-columns: 1.1fr 0.9fr 0.9fr 0.9fr; gap: var(--gap-md); align-items: baseline; padding: var(--gap-sm) var(--gap-xs); }
.rows .r + .r { border-top: var(--control-border-width) solid var(--divider); }
</style>
</head>
<body>
<div class="page-heading">
<div class="title">Density</div>
<div class="subtitle">Three tiers. Pick one for the app, don't tune it.</div>
</div>
<div class="block">
<div class="caption">Same controls, three tiers</div>
<div class="tiers">
<div class="gu tier" data-density="compact">
<div class="caption">Compact</div>
<div class="ctl"><button class="btn primary">Save</button></div>
<div class="ctl"><label class="field"><input placeholder="Name"></label></div>
<div class="ctl"><div class="select"><span>Monthly</span><svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
<div class="properties-section">
<div class="rows">
<div class="property-row"><span class="label">Width</span><div class="value"><label class="field secondary center"><input value="120"><span class="unit">px</span></label></div></div>
</div>
</div>
</div>
<div class="gu tier" data-density="normal">
<div class="caption">Normal</div>
<div class="ctl"><button class="btn primary">Save</button></div>
<div class="ctl"><label class="field"><input placeholder="Name"></label></div>
<div class="ctl"><div class="select"><span>Monthly</span><svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
<div class="properties-section">
<div class="rows">
<div class="property-row"><span class="label">Width</span><div class="value"><label class="field secondary center"><input value="120"><span class="unit">px</span></label></div></div>
</div>
</div>
</div>
<div class="gu tier" data-density="product">
<div class="caption">Product</div>
<div class="ctl"><button class="btn primary">Save</button></div>
<div class="ctl"><label class="field"><input placeholder="Name"></label></div>
<div class="ctl"><div class="select"><span>Monthly</span><svg class="icon chevron" viewBox="0 0 24 24"><path d="m7 15 5 5 5-5" /><path d="m7 9 5-5 5 5" /></svg></div></div>
<div class="properties-section">
<div class="rows">
<div class="property-row"><span class="label">Width</span><div class="value"><label class="field secondary center"><input value="120"><span class="unit">px</span></label></div></div>
</div>
</div>
</div>
</div>
</div>
<div class="block">
<div class="caption">The numbers</div>
<div class="rows">
<div class="r"><span></span><span class="medium">Compact</span><span class="medium">Normal</span><span class="medium">Product</span></div>
<div class="r"><span class="mono muted">font-size</span><span class="mono">10</span><span class="mono">10</span><span class="mono">12</span></div>
<div class="r"><span class="mono muted">control-height</span><span class="mono">23</span><span class="mono">27</span><span class="mono">33</span></div>
<div class="r"><span class="mono muted">chrome-bar-height</span><span class="mono">31</span><span class="mono">37</span><span class="mono">43</span></div>
<div class="r"><span class="muted">For</span><span>Dense desktop tools</span><span>The same, roomier</span><span>Web and product apps</span></div>
<div class="r"><span class="muted">Used by</span><span>Arcs &amp; Angles</span><span>A&amp;A "Comfortable"</span><span>The hub</span></div>
</div>
</div>
</body>
</html>
+77
View File
@@ -0,0 +1,77 @@
<!-- @dsCard group="Foundations" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shape</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); }
.radii { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--gap-md); }
.radius { display: flex; flex-direction: column; gap: var(--gap-xs); }
.radius .box { height: calc(var(--control-height) * 1.6); background: var(--card); border: var(--control-border-width) solid var(--control-border); }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-md); }
.facts .card { display: flex; flex-direction: column; gap: var(--gap-xxs); padding: var(--gap-md) var(--gap-lg); }
.demo { border-radius: var(--radius-lg); overflow: hidden; border: var(--control-border-width) solid var(--panel-border); }
.demo .shell { height: calc(var(--control-height) * 5); }
.demo .rail { width: 30%; }
.demo .main { flex: 1; }
.demo .panel { display: flex; flex-direction: column; }
.demo .panel .body { flex: 1; padding: 0 var(--gap-md) var(--gap-md); }
.demo .foot { padding: var(--gap-sm) var(--gap-lg); }
</style>
</head>
<body>
<div class="page-heading">
<div class="title">Shape</div>
<div class="subtitle">Small radii, flat surfaces. Borders and surface steps do the separating.</div>
</div>
<div class="block">
<div class="caption">Radii</div>
<div class="radii">
<div class="radius"><div class="box" style="border-radius: var(--radius-xs)"></div><span class="mono">radius-xs</span><span class="mono muted">2</span></div>
<div class="radius"><div class="box" style="border-radius: var(--radius-sm)"></div><span class="mono">radius-sm</span><span class="mono muted">4</span></div>
<div class="radius"><div class="box" style="border-radius: var(--radius-md)"></div><span class="mono">radius-md</span><span class="mono muted">6 · controls</span></div>
<div class="radius"><div class="box" style="border-radius: var(--radius-lg)"></div><span class="mono">radius-lg</span><span class="mono muted">8</span></div>
<div class="radius"><div class="box" style="border-radius: var(--radius-xl)"></div><span class="mono">radius-xl</span><span class="mono muted">10 · cards</span></div>
<div class="radius"><div class="box" style="border-radius: var(--radius-xxl)"></div><span class="mono">radius-xxl</span><span class="mono muted">12 · dialogs</span></div>
</div>
</div>
<div class="block">
<div class="caption">Panels</div>
<div class="facts">
<div class="card"><span class="mono">panel-radius</span><span class="mono muted">10</span></div>
<div class="card"><span class="mono">panel-gap</span><span class="mono muted">5</span></div>
<div class="card"><span class="mono">panel-border-width</span><span class="mono muted">1.15</span></div>
</div>
</div>
<div class="block">
<div class="caption">Flat, no shadows</div>
<div class="demo">
<div class="chrome-bar"><span class="medium">Chrome</span></div>
<div class="shell">
<div class="panel sunken rail">
<div class="panel-header"><span class="title">Rail</span></div>
<div class="body muted">Sunken panel</div>
</div>
<div class="panel active main">
<div class="panel-header"><span class="title">Workspace</span></div>
<div class="body muted">The lit panel. Only one at a time.</div>
</div>
</div>
</div>
<div class="foot muted">Chrome ground, panels standing on it, panel-gap gutters between.</div>
</div>
</body>
</html>
+80
View File
@@ -0,0 +1,80 @@
<!-- @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>
+99
View File
@@ -0,0 +1,99 @@
<!-- @dsCard group="Foundations" -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Type</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); }
.faces { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-md); }
.faces .card { display: flex; flex-direction: column; gap: var(--gap-xs); }
.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); }
.step { display: flex; align-items: baseline; gap: var(--gap-md); padding: var(--gap-xs) 0; }
.step + .step { border-top: var(--control-border-width) solid var(--divider); }
.step .tok { flex: none; width: calc(var(--control-height) * 3.6); white-space: nowrap; font-size: var(--font-size); }
.weights { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-md); }
.weights .card { display: flex; flex-direction: column; gap: var(--gap-xs); }
.rows { display: flex; flex-direction: column; }
.rows .r { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: var(--gap-md); align-items: baseline; padding: var(--gap-sm) var(--gap-xs); }
.rows .r + .r { border-top: var(--control-border-width) solid var(--divider); }
</style>
</head>
<body>
<div class="page-heading">
<div class="title">Type</div>
<div class="subtitle">Geist for everything, Geist Mono for numbers and readouts.</div>
</div>
<div class="block">
<div class="caption">Families</div>
<div class="faces">
<div class="card">
<span class="text-lg">Geist</span>
<span class="muted">--font-sans. Body, controls, headings.</span>
</div>
<div class="card">
<span class="text-lg mono">Geist Mono 0123</span>
<span class="muted">--font-mono. Readouts, ids, stats.</span>
</div>
</div>
</div>
<div class="block">
<div class="caption">Size ladder</div>
<div class="tiers">
<div class="gu tier" data-density="product">
<div class="caption">Product</div>
<div class="step"><span class="tok mono muted">text-lg 22</span><span class="text-lg">Page title</span></div>
<div class="step"><span class="tok mono muted">text-sm 17</span><span class="text-sm">Section heading</span></div>
<div class="step"><span class="tok mono muted">text-xs 13</span><span class="text-xs">List text</span></div>
<div class="step"><span class="tok mono muted">font-size 12</span><span>Body and controls</span></div>
<div class="step"><span class="tok mono muted">text-xxs 11</span><span class="text-xxs">Captions</span></div>
</div>
<div class="gu tier" data-density="compact">
<div class="caption">Compact</div>
<div class="step"><span class="tok mono muted">text-lg 18</span><span class="text-lg">Page title</span></div>
<div class="step"><span class="tok mono muted">text-sm 14</span><span class="text-sm">Section heading</span></div>
<div class="step"><span class="tok mono muted">text-xs 11</span><span class="text-xs">List text</span></div>
<div class="step"><span class="tok mono muted">font-size 10</span><span>Body and controls</span></div>
<div class="step"><span class="tok mono muted">text-xxs 9</span><span class="text-xxs">Captions</span></div>
</div>
</div>
</div>
<div class="block">
<div class="caption">Weights</div>
<div class="weights">
<div class="card"><span class="text-sm">Aa</span><span class="muted">Body 300</span></div>
<div class="card"><span class="text-sm" style="font-weight: var(--weight-control)">Aa</span><span class="muted">Control 400</span></div>
<div class="card"><span class="text-sm medium">Aa</span><span class="muted">Medium 500</span></div>
<div class="card"><span class="text-sm semibold">Aa</span><span class="muted">Semibold 600</span></div>
</div>
</div>
<div class="block">
<div class="caption">Job to style</div>
<div class="rows">
<div class="r"><span class="muted">Page title</span><span class="text-lg">Products</span><span class="mono muted">text-lg</span></div>
<div class="r"><span class="muted">Subtitle</span><span class="muted">What this page is for</span><span class="mono muted">muted</span></div>
<div class="r"><span class="muted">Section heading</span><span class="text-sm semibold">Billing</span><span class="mono muted">text-sm, 600</span></div>
<div class="r"><span class="muted">Nav group caption</span><span class="caption">Account</span><span class="mono muted">text-xxs, 600, muted</span></div>
<div class="r"><span class="muted">Hint, unit, empty line</span><span class="muted">Nothing here yet</span><span class="mono muted">muted</span></div>
<div class="r"><span class="muted">Mono readout</span><span class="mono muted">60 fps · 12.4 ms</span><span class="mono muted">mono, muted</span></div>
</div>
</div>
</body>
</html>