+ Three words, three meanings: a badge marks an entity's identity, a chip is an interactive + token (tags, filters, add-affordances), a pill is a small static label. Status dots use + the four status tokens only. +
+ + + + diff --git a/scratch/design-kit/buttons.html b/scratch/design-kit/buttons.html new file mode 100644 index 0000000..f12f3ab --- /dev/null +++ b/scratch/design-kit/buttons.html @@ -0,0 +1,61 @@ + + + + + ++ The only general button system. One primary action per view; ghost for quiet actions + inside panels; danger only for destructive actions. Icon-only buttons use icon-btn with an + aria-label. Do not invent a new button skin. +
+ + + + diff --git a/scratch/design-kit/cards.html b/scratch/design-kit/cards.html new file mode 100644 index 0000000..2d12a27 --- /dev/null +++ b/scratch/design-kit/cards.html @@ -0,0 +1,68 @@ + + + + + +The first winter after the burning of the archive.
+ + ++ Three card families by home: story-card on the library, r-card in the right reference + pane, admin-card for settings and admin sections. New content in those homes composes the + matching family. +
+ + + + diff --git a/scratch/design-kit/colors.html b/scratch/design-kit/colors.html new file mode 100644 index 0000000..021cb00 --- /dev/null +++ b/scratch/design-kit/colors.html @@ -0,0 +1,98 @@ + + + + + ++ Every colour in the app is one of these tokens. Text on accent fills uses + accent-contrast, never white. Status colours mark scene and story state only; category + tints mark whatever the user colour-codes. New tints derive with color-mix over a token. +
+ + + + diff --git a/scratch/design-kit/empty-states.html b/scratch/design-kit/empty-states.html new file mode 100644 index 0000000..512ad17 --- /dev/null +++ b/scratch/design-kit/empty-states.html @@ -0,0 +1,35 @@ + + + + + ++ One empty-state primitive: centred, faint, thirteen pixels. The text is one short + sentence telling the user what to do next, never why the area exists. The dashed frame + here is scaffolding, not part of the primitive. +
+ + + + diff --git a/scratch/design-kit/forms.html b/scratch/design-kit/forms.html new file mode 100644 index 0000000..f3cdd80 --- /dev/null +++ b/scratch/design-kit/forms.html @@ -0,0 +1,57 @@ + + + + + ++ Every text control is one of these; the focus ring (accent border plus soft glow) comes + from the shared rule and is never redefined. Inline save results use the FormStatus + component in the app. +
+ + + + diff --git a/scratch/design-kit/kit.css b/scratch/design-kit/kit.css new file mode 100644 index 0000000..c84342f --- /dev/null +++ b/scratch/design-kit/kit.css @@ -0,0 +1,46 @@ +/* Card scaffold shared by every preview. The system CSS comes from + styles/; this file only lays out the three theme panes. */ +body { + margin: 0; +} +.themes { + display: grid; + grid-template-columns: repeat(3, 1fr); + min-height: 100vh; +} +.pane { + background: var(--bg); + color: var(--text); + padding: 24px; + font-family: var(--font-ui); +} +.pane-label { + font-size: 11px; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--text-faint); + margin-bottom: 18px; +} +.row { + display: flex; + gap: 10px; + align-items: center; + flex-wrap: wrap; + margin-bottom: 14px; +} +.note { + font-size: 12px; + color: var(--text-muted); + margin-top: 16px; + max-width: 34em; +} +.kit-h { + font-size: 11px; + letter-spacing: 0.06em; + text-transform: uppercase; + color: var(--text-faint); + margin: 18px 0 8px; +} +.kit-h:first-child { + margin-top: 0; +} diff --git a/scratch/design-kit/kit.js b/scratch/design-kit/kit.js new file mode 100644 index 0000000..28d62e5 --- /dev/null +++ b/scratch/design-kit/kit.js @@ -0,0 +1,13 @@ +// Clones the card's sample template into one pane per theme. +const tpl = document.getElementById('sample'); +const themes = document.getElementById('themes'); +for (const theme of ['dark', 'light', 'warm']) { + const pane = document.createElement('div'); + pane.className = 'pane'; + pane.dataset.theme = theme; + const label = document.createElement('div'); + label.className = 'pane-label'; + label.textContent = theme; + pane.append(label, tpl.content.cloneNode(true)); + themes.append(pane); +} diff --git a/scratch/design-kit/menus.html b/scratch/design-kit/menus.html new file mode 100644 index 0000000..91f9631 --- /dev/null +++ b/scratch/design-kit/menus.html @@ -0,0 +1,36 @@ + + + + + ++ The one shared dropdown skin: a popover panel of menu-item rows. Every new menu uses it; + the avatar dropdown is the single sanctioned exception. Escape closes, arrows move. +
+ + + + diff --git a/scratch/design-kit/seg.html b/scratch/design-kit/seg.html new file mode 100644 index 0000000..2c58f8d --- /dev/null +++ b/scratch/design-kit/seg.html @@ -0,0 +1,39 @@ + + + + + ++ The exclusive-choice strip: modes, tab pairs, filters. Items are links when they navigate + and buttons when they select in place; an unavailable item is disabled, not hidden + mid-session. The review workspace's rtabs duplicate is marked for consolidation onto this. +
+ + + + diff --git a/scratch/design-kit/spacing.html b/scratch/design-kit/spacing.html new file mode 100644 index 0000000..fd56e7c --- /dev/null +++ b/scratch/design-kit/spacing.html @@ -0,0 +1,63 @@ + + + + + ++ row-h is 36px (30px compact via data-density); pane-pad 22px (16px compact); + content-max 720px for the prose column. Sidebars are fixed: 240px left, 280px right. +
+ + + + diff --git a/scratch/design-kit/styles b/scratch/design-kit/styles new file mode 120000 index 0000000..5a65bf7 --- /dev/null +++ b/scratch/design-kit/styles @@ -0,0 +1 @@ +../../src/lib/styles \ No newline at end of file diff --git a/scratch/design-kit/type.html b/scratch/design-kit/type.html new file mode 100644 index 0000000..6017fcb --- /dev/null +++ b/scratch/design-kit/type.html @@ -0,0 +1,57 @@ + + + + + ++ The kit falls back to system faces; the app loads the real families via fontsource. + Sizes are ad hoc today; a small named ramp is proposed in the primitive consolidation + brief. +
+ + + +