npm - @design-intelligence/ghost - Versions diffs - 0.20.0 → 0.21.0 - Mend

@design-intelligence/ghost 0.20.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (95) hide show

package/dist/init-payloads/vessel-light/materials/ref/composition.form.html ADDED Viewed

@@ -0,0 +1,89 @@
+<!-- ghost ref annotations
+  normative-for: grammar.hierarchy — the complete control emphasis ladder (primary, secondary, outline, ghost, link) working one coherent view with one primary; destructive as a meaning, not a rung; field/label/error anatomy; the product text variants headline, title, body, label, mono; the warning and destructive tones. grammar.rhythm — column stacks with named gap steps, rows only for controls and paired label/value moments. grammar.surfaces — card tier with structural border. signature.shape — --radius-control on every control, --radius-surface on the card.
+  incidental: all copy, field values, and key strings; the 560px column width; which specific action occupies each ladder rung; the settings domain itself.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vessel Light — Settings Form</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <link rel="stylesheet" href="../primitives.css" />
+    <style>
+      body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
+      main { width: min(100%, 560px); }
+    </style>
+  </head>
+  <body>
+    <main class="stack stack--gap-lg">
+      <header class="stack stack--row stack--justify-between stack--align-end stack--gap-md stack--wrap">
+        <div class="stack stack--gap-xs">
+          <h1 class="text text--headline">Workspace settings</h1>
+          <p class="text text--muted">Tune the defaults your team sees when Vessel drafts interface work.</p>
+        </div>
+        <button class="button button--secondary button--size-sm" type="button">Invite member</button>
+      </header>
+      <section class="surface surface--card surface--pad-lg surface--radius-surface surface--border surface--elevation-card">
+        <form class="stack stack--gap-lg">
+          <header class="stack stack--gap-sm">
+            <h2 class="text text--title">Profile</h2>
+            <p class="text text--muted">These values appear on receipts, invites, and review packets.</p>
+          </header>
+          <section class="stack stack--gap-md">
+            <div class="field">
+              <label class="label" for="workspace-name">Workspace name</label>
+              <input class="input" id="workspace-name" value="Ghost Studio" />
+            </div>
+            <div class="field">
+              <label class="label" for="reply-email">Reply email</label>
+              <input class="input" id="reply-email" value="design@ghost.example" aria-invalid="true" />
+              <p class="field-error">Use a verified sender before inviting collaborators.</p>
+            </div>
+            <div class="field">
+              <span class="label">Default density</span>
+              <div class="input input--select" role="button" tabindex="0" aria-label="Default density">
+                <span>Comfortable</span>
+                <span aria-hidden="true">⌄</span>
+              </div>
+            </div>
+            <label class="stack stack--row stack--gap-sm stack--align-center">
+              <input class="input input--checkbox" type="checkbox" checked />
+              <span class="text">Send weekly review summaries</span>
+            </label>
+          </section>
+          <section class="stack stack--gap-sm">
+            <span class="text text--label text--muted">API access</span>
+            <div class="surface surface--muted surface--pad-sm surface--radius-surface stack stack--row stack--justify-between stack--align-center stack--gap-sm stack--wrap">
+              <code class="text text--mono text--muted">vsl_live_4f8a…03c2</code>
+              <button class="button button--outline button--size-sm" type="button">Regenerate key</button>
+            </div>
+            <p class="text text--warning">Regenerating invalidates the key currently in use by integrations.</p>
+          </section>
+          <section class="stack stack--row stack--justify-between stack--align-center stack--gap-md stack--wrap">
+            <div class="stack stack--gap-none">
+              <span class="text">Delete this workspace</span>
+              <span class="text text--destructive">Removes every fingerprint and review record immediately.</span>
+            </div>
+            <button class="button button--destructive button--size-sm" type="button">Delete workspace</button>
+          </section>
+          <footer class="stack stack--row stack--justify-between stack--align-center stack--gap-sm stack--wrap">
+            <a class="button button--link button--size-sm" href="#audit-log">View audit log</a>
+            <div class="stack stack--row stack--justify-end stack--gap-sm">
+              <button class="button button--ghost" type="button">Cancel</button>
+              <button class="button button--primary" type="submit">Save settings</button>
+            </div>
+          </footer>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>

package/dist/init-payloads/vessel-light/materials/ref/composition.overlay.html ADDED Viewed

@@ -0,0 +1,60 @@
+<!-- ghost ref annotations
+  normative-for: grammar.surfaces — the interrupting end of the elevation set: the modal tier (scrim, --shadow-modal, --radius-surface, compact header, clear footer) and the popover tier (an anchored menu floating above the flow with --shadow-popover). The card tier's home is composition.form.html and composition.table.html; together the three refs cover the closed elevation set. grammar.hierarchy — one primary confirm, ghost escape, menu items as ghost-weight actions; the info tone carrying a state-meaning note. signature.shape — surface radius on both overlay surfaces.
+  incidental: showing the popover and the modal in the same frame (a demonstration convenience — in a live UI the menu closes when the dialog interrupts); all copy and counts; the 512px dialog width; the specific menu items.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vessel Light — Overlay</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <link rel="stylesheet" href="../primitives.css" />
+    <style>
+      body { margin: 0; min-height: 100vh; padding: 24px; }
+      .page { width: min(100%, 720px); margin-inline: auto; position: relative; }
+      .menu { position: absolute; top: 48px; right: 0; width: 220px; }
+      .menu-item { justify-content: flex-start; width: 100%; height: 32px; padding: 6px 12px; }
+      .scrim { position: fixed; inset: 0; display: grid; place-items: center; padding: 16px; }
+      section[role="dialog"] { width: min(100%, 512px); }
+    </style>
+  </head>
+  <body>
+    <main class="page stack stack--gap-lg">
+      <header class="stack stack--row stack--justify-between stack--align-center stack--gap-md">
+        <h1 class="text text--headline">Fingerprint</h1>
+        <button class="button button--outline button--size-sm" type="button" aria-haspopup="menu" aria-expanded="true">Actions</button>
+      </header>
+      <p class="text text--muted">Three nodes changed since the last publish. Review the diff, then publish from the actions menu.</p>
+      <!-- popover tier: anchored menu, floats above the flow -->
+      <nav class="menu surface surface--popover surface--pad-xs surface--radius-surface surface--border surface--elevation-popover stack stack--gap-none" role="menu" aria-label="Fingerprint actions">
+        <button class="button button--ghost menu-item" type="button" role="menuitem">Review diff</button>
+        <button class="button button--ghost menu-item" type="button" role="menuitem">Publish changes…</button>
+        <button class="button button--ghost menu-item" type="button" role="menuitem">Export package</button>
+      </nav>
+    </main>
+    <!-- modal tier: scrim, interrupting dialog -->
+    <div class="scrim" role="presentation">
+      <section class="surface surface--popover surface--pad-lg surface--radius-surface surface--border surface--elevation-modal stack stack--gap-lg" role="dialog" aria-modal="true" aria-labelledby="dialog-title" aria-describedby="dialog-description">
+        <header class="stack stack--gap-sm">
+          <h2 class="text text--title" id="dialog-title">Publish fingerprint changes?</h2>
+          <p class="text text--muted" id="dialog-description">This will make the selected brand truths available to agents working in this repo. Review the diff before confirming.</p>
+        </header>
+        <div class="surface surface--muted surface--pad-md surface--radius-surface stack stack--gap-xs">
+          <p class="text text--label">Included</p>
+          <p class="text">3 nodes, 2 material references, 1 review assertion</p>
+        </div>
+        <p class="text text--info">Publishing replaces the previous packet for every agent in this repo.</p>
+        <footer class="stack stack--row stack--justify-end stack--gap-sm stack--wrap">
+          <button class="button button--ghost" type="button">Cancel</button>
+          <button class="button button--primary" type="button">Confirm publish</button>
+        </footer>
+      </section>
+    </div>
+  </body>
+</html>

package/dist/init-payloads/vessel-light/materials/ref/composition.table.html ADDED Viewed

@@ -0,0 +1,104 @@
+<!-- ghost ref annotations
+  normative-for: register.data-density — the two smallest gap steps (--gap-xs, --gap-sm) as cell padding, mono tabular numerals right-aligned, muted-first hierarchy, hairline row borders with no zebra striping, small radius on the data surface, status as a text label in one functional color family, hover confirmation at --duration-fast. grammar.hierarchy — label + title header pairing, secondary export action stepping down the ladder.
+  incidental: all customer names, emails, invoice ids, and amounts; the four-row count; the billing domain; the max content width.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vessel Light — Data Table</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <link rel="stylesheet" href="../primitives.css" />
+    <style>
+      body { margin: 0; min-height: 100vh; padding: var(--page-container-side-gutter); }
+      main { width: min(100%, calc(var(--page-container-side-gutter) * 56)); margin-inline: auto; }
+      .table-surface { overflow: hidden; border-radius: var(--radius-sm); }
+      table { width: 100%; border-collapse: collapse; }
+      th, td { padding: var(--gap-xs) var(--gap-sm); border-bottom: 1px solid var(--border); text-align: left; font-size: var(--text-body-size); line-height: 1.5; }
+      th { color: var(--muted-foreground); font-weight: 500; }
+      tbody tr { transition: background var(--duration-fast) var(--ease-spring); }
+      tbody tr:hover { background: var(--muted); }
+      tbody tr:last-child td { border-bottom: 0; }
+      .cell-secondary { color: var(--muted-foreground); }
+      .cell-number { font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; }
+      .status { color: var(--success); font-size: 12px; font-weight: 600; line-height: 1.4; }
+      .align-right { text-align: right; }
+    </style>
+  </head>
+  <body>
+    <main class="stack stack--gap-lg">
+      <header class="stack stack--row stack--justify-between stack--align-end stack--gap-md stack--wrap">
+        <div class="stack stack--gap-xs">
+          <p class="text text--label text--muted">Billing console</p>
+          <h1 class="text text--title">Recent payments</h1>
+        </div>
+        <button class="button button--secondary button--size-sm" type="button">Export CSV</button>
+      </header>
+      <section class="surface surface--card surface--border table-surface" aria-label="Recent payments table">
+        <table>
+          <thead>
+            <tr>
+              <th scope="col">Customer</th>
+              <th scope="col">Plan</th>
+              <th scope="col">Invoice</th>
+              <th scope="col" class="align-right">Amount</th>
+              <th scope="col">Status</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>
+                <div class="stack stack--gap-none">
+                  <span>Northstar Studio</span>
+                  <span class="cell-secondary">design@northstar.example</span>
+                </div>
+              </td>
+              <td class="cell-secondary">Team</td>
+              <td class="cell-secondary">VS-1048</td>
+              <td class="cell-number">$96.00</td>
+              <td><span class="status">Paid</span></td>
+            </tr>
+            <tr>
+              <td>
+                <div class="stack stack--gap-none">
+                  <span>Common Room</span>
+                  <span class="cell-secondary">ops@common.example</span>
+                </div>
+              </td>
+              <td class="cell-secondary">Business</td>
+              <td class="cell-secondary">VS-1047</td>
+              <td class="cell-number">$240.00</td>
+              <td><span class="status">Paid</span></td>
+            </tr>
+            <tr>
+              <td>
+                <div class="stack stack--gap-none">
+                  <span>Field Notes Lab</span>
+                  <span class="cell-secondary">admin@fieldnotes.example</span>
+                </div>
+              </td>
+              <td class="cell-secondary">Team</td>
+              <td class="cell-secondary">VS-1046</td>
+              <td class="cell-number">$96.00</td>
+              <td><span class="status">Paid</span></td>
+            </tr>
+            <tr>
+              <td>
+                <div class="stack stack--gap-none">
+                  <span>Atlas Review</span>
+                  <span class="cell-secondary">finance@atlas.example</span>
+                </div>
+              </td>
+              <td class="cell-secondary">Starter</td>
+              <td class="cell-secondary">VS-1045</td>
+              <td class="cell-number">$24.00</td>
+              <td><span class="status">Paid</span></td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+    </main>
+  </body>
+</html>

package/dist/init-payloads/vessel-light/materials/ref/email.html ADDED Viewed

@@ -0,0 +1,80 @@
+<!doctype html>
+<!-- ghost ref annotations
+  normative-for: register.email — the inverted material contract: table layout, 600px wrapper, inline styles, system font stack, hardcoded hex hand-transcribed from tokens.css (each annotated below with its source token), bulletproof pill button, surface radius on the card, exactly one expressive moment in one hue (the amber header band). signature.shape — the radius values (20px surface, 999px control) surviving without token names. signature.palette — monochrome spine, one hue, quiet factual copy, no celebration.
+  incidental: all copy, amounts, dates, and receipt numbers; the choice of amber for the one expressive moment (any single expression hue qualifies); the receipt subject matter.
+  hex transcription map (single source: materials/tokens.css — re-transcribe if a token changes):
+    #ffffff = --color-white (background)
+    #1a1a1a = --color-gray-900 (foreground / primary)
+    #999999 = --color-gray-500 (muted-foreground)
+    #e8e8e8 = --color-gray-200 (border)
+    #f6b44a = --expression-1 (amber)
+    border-radius 20px = --radius-surface; 999px = --radius-control
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Payment receipt</title>
+  </head>
+  <!-- #ffffff = --color-white; #1a1a1a = --color-gray-900 -->
+  <body style="margin:0; padding:0; background:#ffffff; color:#1a1a1a; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;">
+    <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="width:100%; background:#ffffff;"><!-- #ffffff = --color-white -->
+      <tr>
+        <td align="center" style="padding:32px 16px;">
+          <table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0" style="width:100%; max-width:600px;">
+            <tr>
+              <td style="padding:0 0 16px 0; font-size:11px; line-height:1.2; letter-spacing:0.12em; font-weight:600; text-transform:uppercase; color:#999999;">Vessel</td><!-- #999999 = --color-gray-500 -->
+            </tr>
+            <tr>
+              <!-- the one expressive moment: amber band (#f6b44a = --expression-1), one hue, nothing else colored; #e8e8e8 = --color-gray-200; 20px = --radius-surface -->
+              <td style="border:1px solid #e8e8e8; border-top:4px solid #f6b44a; border-radius:20px; padding:24px; background:#ffffff;">
+                <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
+                  <tr>
+                    <td style="padding:0 0 8px 0; font-size:24px; line-height:1.25; letter-spacing:-0.025em; font-weight:400; color:#1a1a1a;">Payment receipt</td><!-- #1a1a1a = --color-gray-900 -->
+                  </tr>
+                  <tr>
+                    <td style="padding:0 0 24px 0; font-size:14px; line-height:1.625; color:#999999;">Your payment for the Team plan has been received. A copy of this receipt is available in billing settings.</td>
+                  </tr>
+                  <tr>
+                    <td style="padding:0 0 24px 0;">
+                      <table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="border-top:1px solid #e8e8e8; border-bottom:1px solid #e8e8e8;"><!-- #e8e8e8 = --color-gray-200 -->
+                        <tr>
+                          <td style="padding:12px 0; font-size:14px; line-height:1.5; color:#999999;">Receipt number</td>
+                          <td align="right" style="padding:12px 0; font-size:14px; line-height:1.5; color:#1a1a1a;">VS-1048</td>
+                        </tr>
+                        <tr>
+                          <td style="padding:12px 0; border-top:1px solid #e8e8e8; font-size:14px; line-height:1.5; color:#999999;">Billing date</td>
+                          <td align="right" style="padding:12px 0; border-top:1px solid #e8e8e8; font-size:14px; line-height:1.5; color:#1a1a1a;">July 7, 2026</td>
+                        </tr>
+                        <tr>
+                          <td style="padding:12px 0; border-top:1px solid #e8e8e8; font-size:14px; line-height:1.5; color:#999999;">Amount paid</td>
+                          <td align="right" style="padding:12px 0; border-top:1px solid #e8e8e8; font-size:14px; line-height:1.5; color:#1a1a1a;">$96.00</td>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td align="left" style="padding:0 0 24px 0;">
+                      <table role="presentation" cellspacing="0" cellpadding="0" border="0">
+                        <tr>
+                          <!-- #1a1a1a = --color-gray-900 (primary); 999px = --radius-control -->
+                          <td bgcolor="#1a1a1a" style="border-radius:999px; padding:10px 24px;">
+                            <a href="https://example.com/billing" style="display:inline-block; font-size:14px; line-height:1; color:#ffffff; text-decoration:none;">View receipt</a>
+                          </td>
+                        </tr>
+                      </table>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td style="font-size:12px; line-height:1.4; color:#999999;">If you have billing questions, reply to this email and include the receipt number.</td>
+                  </tr>
+                </table>
+              </td>
+            </tr>
+          </table>
+        </td>
+      </tr>
+    </table>
+  </body>
+</html>

package/dist/init-payloads/vessel-light/materials/tokens.css ADDED Viewed

@@ -0,0 +1,242 @@
+/* Vessel Light materials contract: style only with these custom properties; never hardcode colors, shadows, or timing. */
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("fonts/HKGrotesk-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("fonts/HKGrotesk-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("fonts/HKGrotesk-Medium.woff2") format("woff2");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("fonts/HKGrotesk-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("fonts/HKGrotesk-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("fonts/HKGrotesk-ExtraBold.woff2") format("woff2");
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "HK Grotesk";
+  src: url("fonts/HKGrotesk-Black.woff2") format("woff2");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+:root {
+  --font-sans: "HK Grotesk", system-ui, sans-serif;
+  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --color-white: #ffffff;
+  --color-black: #000000;
+  --color-gray-50: #f5f5f5;
+  --color-gray-100: #f0f0f0;
+  --color-gray-200: #e8e8e8;
+  --color-gray-300: #e5e5e5;
+  --color-gray-400: #cccccc;
+  --color-gray-500: #999999;
+  --color-gray-600: #666666;
+  --color-gray-700: #333333;
+  --color-gray-800: #232323;
+  --color-gray-900: #1a1a1a;
+  --color-red-100: #ff6b6b;
+  --color-red-200: #f94b4b;
+  --color-blue-100: #7cacff;
+  --color-blue-200: #5c98f9;
+  --color-green-100: #a3d795;
+  --color-green-200: #91cb80;
+  --color-yellow-100: #ffd966;
+  --color-yellow-200: #fbcd44;
+  --radius: 20px;
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-surface: 20px;
+  --radius-control: 999px;
+  --radius-input: 999px;
+  --gap-xs: 4px;
+  --gap-sm: 8px;
+  --gap-md: 16px;
+  --gap-lg: 24px;
+  --gap-xl: 32px;
+  --text-body-size: 14px;
+  --text-title-size: 18px;
+  --text-headline-size: 24px;
+  --control-height: 36px;
+  --background: var(--color-white);
+  --foreground: var(--color-gray-900);
+  --card: var(--background);
+  --card-foreground: var(--foreground);
+  --popover: var(--background);
+  --popover-foreground: var(--foreground);
+  --primary: var(--color-gray-900);
+  --primary-foreground: var(--color-white);
+  --secondary: var(--color-gray-100);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--color-gray-100);
+  --muted-foreground: var(--color-gray-500);
+  --accent: var(--color-gray-100);
+  --accent-foreground: var(--foreground);
+  --destructive: var(--color-red-200);
+  --destructive-foreground: var(--color-white);
+  --success: var(--color-green-200);
+  --success-foreground: var(--color-gray-900);
+  --warning: var(--color-yellow-200);
+  --warning-foreground: var(--color-gray-900);
+  --info: var(--color-blue-200);
+  --info-foreground: var(--color-gray-900);
+  --border: var(--color-gray-200);
+  --input: var(--color-gray-300);
+  --ring: var(--color-gray-400);
+  --dark-10: rgba(26, 26, 26, 0.1);
+  --dark-40: rgba(26, 26, 26, 0.4);
+  --dark-04: rgba(26, 26, 26, 0.04);
+  --shadow-mini: 0 2px 8px rgba(76, 76, 76, 0.15);
+  --shadow-mini-inset: 0 1px 4px rgba(76, 76, 76, 0.1) inset;
+  --shadow-btn: 0 2px 8px rgba(76, 76, 76, 0.15);
+  --shadow-card: 0 2px 8px rgba(76, 76, 76, 0.15);
+  --shadow-elevated: 0 3px 12px rgba(76, 76, 76, 0.22);
+  --shadow-popover: 0 8px 30px rgba(0, 0, 0, 0.12);
+  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.2);
+  --shadow-kbd: 0 2px 8px rgba(76, 76, 76, 0.15);
+  --surface-dark: #0a0a0a;
+  --surface-dark-text: #f5f5f5;
+  --surface-dark-muted: rgba(255, 255, 255, 0.5);
+  --surface-dark-border: rgba(255, 255, 255, 0.08);
+  --heading-display-font-size: clamp(64px, 8vw, 96px);
+  --heading-display-line-height: 0.88;
+  --heading-display-letter-spacing: -0.05em;
+  --heading-display-font-weight: 900;
+  --heading-section-font-size: clamp(44px, 5vw, 64px);
+  --heading-section-line-height: 0.95;
+  --heading-section-letter-spacing: -0.035em;
+  --heading-section-font-weight: 700;
+  --heading-sub-font-size: clamp(28px, 3vw, 40px);
+  --heading-sub-line-height: 1;
+  --heading-sub-letter-spacing: -0.02em;
+  --heading-sub-font-weight: 700;
+  --heading-card-font-size: clamp(20px, 2vw, 28px);
+  --heading-card-line-height: 1.1;
+  --heading-card-letter-spacing: -0.01em;
+  --heading-card-font-weight: 600;
+  --display-size: clamp(3rem, 12vw, 12rem);
+  --display-line-height: 0.85;
+  --display-letter-spacing: -0.05em;
+  --body-reading-size: clamp(1rem, 1.3vw, 1.25rem);
+  --body-reading-line-height: 1.65;
+  --body-reading-letter-spacing: -0.01em;
+  --label-font-size: 11px;
+  --label-letter-spacing: 0.12em;
+  --label-font-weight: 600;
+  --label-line-height: 1.2;
+  --pullquote-size: clamp(1.5rem, 3vw, 2.5rem);
+  --pullquote-line-height: 1.3;
+  --pullquote-weight: 300;
+  --pullquote-letter-spacing: -0.02em;
+  --page-container-max-width: 1440px;
+  --page-container-side-gutter: 20px;
+  --section-padding-vertical: 100px;
+  --section-heading-margin-bottom: 75px;
+  --ease-spring: cubic-bezier(0.33, 1, 0.68, 1);
+  --duration-fast: 0.15s;
+  --duration-normal: 0.2s;
+  --duration-slow: 0.4s;
+  /* Expression palette — the brand's five hues, volume-gated by register.
+     Product: charts only. Data-density: one hue family for status.
+     Email: exactly one expressive moment. Editorial: atmosphere, max two
+     hues per page. Never on interactive controls in any register. */
+  --expression-1: #f6b44a; /* amber */
+  --expression-2: #7585ff; /* periwinkle */
+  --expression-3: #d76a6a; /* clay */
+  --expression-4: #d185e0; /* orchid */
+  --expression-5: #91cb80; /* sage */
+}
+.dark {
+  --background: var(--color-black);
+  --foreground: var(--color-white);
+  --card: var(--color-gray-800);
+  --card-foreground: var(--foreground);
+  --popover: var(--color-gray-800);
+  --popover-foreground: var(--foreground);
+  --primary: var(--color-white);
+  --primary-foreground: var(--color-black);
+  --secondary: var(--color-gray-700);
+  --secondary-foreground: var(--foreground);
+  --muted: var(--color-gray-800);
+  --muted-foreground: var(--color-gray-500);
+  --accent: var(--color-gray-800);
+  --accent-foreground: var(--foreground);
+  --destructive: var(--color-red-100);
+  --destructive-foreground: var(--color-black);
+  --success: var(--color-green-100);
+  --success-foreground: var(--color-black);
+  --warning: var(--color-yellow-100);
+  --warning-foreground: var(--color-black);
+  --info: var(--color-blue-100);
+  --info-foreground: var(--color-black);
+  --border: var(--color-gray-700);
+  --input: var(--color-gray-700);
+  --ring: var(--color-gray-400);
+  --dark-10: rgba(242, 242, 242, 0.1);
+  --dark-40: rgba(242, 242, 242, 0.4);
+  --dark-04: rgba(242, 242, 242, 0.04);
+  --shadow-mini: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --shadow-mini-inset: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
+  --shadow-btn: 0 2px 8px rgba(0, 0, 0, 0.3);
+  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.4);
+  --shadow-elevated: 0 3px 12px rgba(0, 0, 0, 0.5);
+  --shadow-popover: 0 8px 30px rgba(0, 0, 0, 0.4);
+  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
+  --shadow-kbd: 0 2px 8px rgba(0, 0, 0, 0.4);
+}

package/dist/init-payloads/vessel-light/register.data-density.md ADDED Viewed

@@ -0,0 +1,39 @@
+---
+description: "Data-dense consoles — gather for tables, dashboards, logs, and monitoring; compresses product rhythm to the two smallest gap steps, mono numerals, muted-first."
+materials:
+  - materials/ref/composition.table.html
+  - materials/primitives.css
+---
+Condition: this node applies to data-dense surfaces — tables, dashboards,
+transaction logs, and admin consoles.
+Data density inverts the settings-page rhythm. Operators need scan speed
+before they need breathing room.
+Use the two smallest gap steps (`--gap-xs`, `--gap-sm`) where forms use the
+medium step. Tight adjacency is meaning when rows compare against rows.
+Numerals are mono so columns align. A ragged amount column is a broken
+instrument.
+Hierarchy is muted-first. Data is the default plane, labels are muted, and
+emphasis is rare enough to stay useful.
+Data surfaces take the small radius. A surface-radius table cell is costume —
+the signature radius (see signature.shape) belongs on cards, not cells.
+Status is a text label with at most one functional color family per view.
+Charts inside a console follow the product carve-out from the palette
+signature: expression hues live inside the plot area only. Outside the plot,
+the one-status-hue cap holds — chart color never leaks into rows, badges, or
+headers. More status color turns monitoring into confetti.
+No zebra striping. Hairline borders carry rows with less noise and more
+trust.
+Hover confirmation uses the fast duration. It should acknowledge targeting,
+not animate the table.
+Generous whitespace is drift here. Wasted density makes operators scroll.

package/dist/init-payloads/vessel-light/register.editorial.md ADDED Viewed

@@ -0,0 +1,41 @@
+---
+description: "Editorial and landing surfaces — gather for heroes, marketing pages, pull quotes, and full-bleed dark moments; inverts product type restraint."
+materials:
+  - materials/ref/composition.editorial.html
+  - materials/tokens.css
+---
+Condition: this node applies to marketing, landing, and editorial surfaces —
+never to product UI.
+Editorial surfaces invert the product type rules. Display scale is not an
+indulgence here; it is the job.
+Use the `--heading-display-*` tokens — size, line height, and weight — when
+the words are the composition. The display tier belongs to this register (see
+signature.type for the scale's character).
+Section rhythm uses `--section-padding-vertical`, not a product stack
+stretched until it looks important.
+The sanctioned dramatic moment is the full-bleed dark section. Use the
+`--surface-dark-*` family and let contrast carry the scene.
+Pull quotes are visual punctuation for longform. They interrupt reading with
+judgment, not decoration.
+The tracked uppercase label is the kicker grammar. It gives the page a hard
+editorial edge before the headline lands.
+Monochrome remains the spine, but editorial is the loud end of the expression
+ladder (see signature.palette): up to two expression hues per page as
+atmosphere — a tinted dark section, a colored pull-quote accent, a duotone
+image moment. Commit to few colors at scale; variety is where expression
+collapses into decoration.
+There is one primary action per page, and it keeps the control radius from
+signature.shape. Editorial confidence does not excuse competing calls to
+action.
+A hero built at product scale reads as timid. Timidity is drift here, exactly
+as spectacle is drift in product UI.