@design-intelligence/ghost 0.0.0-next-20260715121453

package/dist/init-payloads/vessel-light/grammar.surfaces.md

@@ -0,0 +1,35 @@
+---
+description: "Surface roles and the closed elevation set — gather for any card, popover, modal, dialog, scrim, or bordered container; flat is the default, borders are structural, exactly three elevation tiers."
+materials:
+  - materials/primitives.css
+  - materials/ref/composition.overlay.html
+  - "**/*.html"
+  - "**/*.css"
+---
+
+Surface is the only way an element gets a background, border, radius, or
+shadow. If a container needs visual treatment, it first needs a surface role.
+
+The vocabulary is closed: role, padding, radius, border, and elevation. These
+axes create enough range for page flow, cards, popovers, muted blocks,
+accents, and dark moments without inventing one-off boxes.
+
+The default surface is flat: no border, no shadow. We do not outline
+everything to prove layout exists.
+
+The elevation tiers are exactly three: card, popover, modal. Elevation
+implies hierarchy — a card sits in the document flow, a popover floats above
+the flow, a modal interrupts the task. Pick the tier that matches the
+interaction; never write a custom shadow because the composition feels flat,
+and never pair a low tier with an interrupting role or give a routine card
+modal gravity. Component shadows belong to the primitives that own them;
+never borrow them for layout.
+
+Borders are structural, especially for inputs and overlays. They are not
+decorative frames around ordinary text — reject borders as decoration,
+especially around assistant text, and use space, tone, and type hierarchy
+instead.
+
+The overlay reference shows the interrupting end of the system: background
+scrim, modal radius, modal shadow, compact header, clear footer. Copy its
+hierarchy when a user must stop and decide.

package/dist/init-payloads/vessel-light/index.md

@@ -0,0 +1,33 @@
+---
+description: "Always read first: Vessel's design language as a raw HTML/CSS steering packet for agents."
+materials:
+  - materials/tokens.css
+---
+
+vessel-light is Vessel without the React package: the design language as a
+steering packet for agents writing raw HTML and CSS.
+
+The contract is narrow. Style only with the tokens. Compose only with the
+closed sets the grammar enumerates. Imitate the refs when the task matches —
+worked examples to copy from, not a framework to import.
+
+Grammar and the median floor are safe verbatim, unchanged by any adaptation.
+Signature nodes state Vessel's current answer and stand until you replace
+them. Registers — editorial, email, and data-density — name the situations
+where parts of the default contract invert; pull only the nodes whose
+conditions match the task, because truths from the wrong register are
+poison, not context.
+
+Monochrome comes first. Status color is functional language — danger,
+success, warning, information — never atmosphere. Atmosphere is catered: a
+five-hue expression palette whose volume rises with the register, from
+charts-only in product to two hues in editorial, and never on controls.
+
+It protects the taste that disappears when an agent freehands: quiet
+surfaces, deliberate spacing, one obvious action, restrained motion.
+
+Name the reader's job before composing anything — the job picks the ref and
+the register, never the topic. When a requested UI is not covered by a ref,
+compose from the grammar; do not invent a new styling system. Before
+anything ships, run the deletion pass: every element names what breaks if
+it goes, and the view arrives settled.

package/dist/init-payloads/vessel-light/manifest.yml

@@ -0,0 +1,3 @@
+schema: ghost.fingerprint-package/v1
+id: vessel-light
+cover: index

package/dist/init-payloads/vessel-light/materials/primitives.css

@@ -0,0 +1,351 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+}
+
+/* surface — defaults: background/foreground, radius-md, no padding, no border, no elevation. */
+.surface {
+  background: var(--background);
+  color: var(--foreground);
+  border: 0;
+  border-radius: var(--radius-md);
+  box-shadow: none;
+}
+.surface--card {
+  background: var(--card);
+  color: var(--card-foreground);
+}
+.surface--popover {
+  background: var(--popover);
+  color: var(--popover-foreground);
+}
+.surface--muted {
+  background: var(--muted);
+  color: var(--foreground);
+}
+.surface--pad-xs {
+  padding: var(--gap-sm);
+}
+.surface--pad-sm {
+  padding: 12px; /* off-scale surface geometry: between --gap-sm and --gap-md */
+}
+.surface--pad-md {
+  padding: var(--gap-md);
+}
+.surface--pad-lg {
+  padding: var(--gap-lg);
+}
+.surface--radius-sm {
+  border-radius: var(--radius-sm);
+}
+.surface--radius-surface {
+  border-radius: var(--radius-surface);
+}
+.surface--border {
+  border: 1px solid var(--border);
+}
+.surface--border-input {
+  border: 1px solid var(--input);
+}
+.surface--elevation-card {
+  box-shadow: var(--shadow-card);
+}
+.surface--elevation-popover {
+  box-shadow: var(--shadow-popover);
+}
+.surface--elevation-modal {
+  box-shadow: var(--shadow-modal);
+}
+
+/* stack — defaults: column, gap-md(16px), stretch. Write class="stack" and you get vessel rhythm. */
+.stack {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-md);
+  align-items: stretch;
+  justify-content: flex-start;
+  flex-wrap: nowrap;
+}
+.stack--row {
+  flex-direction: row;
+}
+.stack--gap-none {
+  gap: 0;
+}
+.stack--gap-xs {
+  gap: var(--gap-xs);
+}
+.stack--gap-sm {
+  gap: var(--gap-sm);
+}
+.stack--gap-md {
+  gap: var(--gap-md);
+}
+.stack--gap-lg {
+  gap: var(--gap-lg);
+}
+.stack--gap-xl {
+  gap: var(--gap-xl);
+}
+.stack--align-start {
+  align-items: flex-start;
+}
+.stack--align-center {
+  align-items: center;
+}
+.stack--align-end {
+  align-items: flex-end;
+}
+.stack--justify-center {
+  justify-content: center;
+}
+.stack--justify-end {
+  justify-content: flex-end;
+}
+.stack--justify-between {
+  justify-content: space-between;
+}
+.stack--wrap {
+  flex-wrap: wrap;
+}
+
+/* text — defaults: body, 14px, relaxed, foreground. */
+.text {
+  margin: 0;
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  font-size: var(--text-body-size);
+  line-height: var(--text-body-line-height);
+}
+.text--display {
+  font-size: var(--heading-display-font-size);
+  font-weight: var(--heading-display-font-weight);
+  line-height: var(--heading-display-line-height);
+  letter-spacing: var(--heading-display-letter-spacing);
+}
+.text--headline {
+  font-size: var(--text-headline-size);
+  font-weight: 400;
+  line-height: 1.25;
+  letter-spacing: var(--text-heading-letter-spacing);
+}
+.text--title {
+  font-size: var(--text-title-size);
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: var(--text-heading-letter-spacing);
+}
+.text--label {
+  font-size: var(--label-font-size);
+  font-weight: var(--label-font-weight);
+  line-height: var(--label-line-height);
+  letter-spacing: var(--label-letter-spacing);
+}
+.text--mono {
+  font-family: var(--font-mono);
+  font-size: var(--text-body-size);
+  line-height: 1.5;
+}
+.text--muted {
+  color: var(--muted-foreground);
+}
+.text--inverse {
+  color: var(--primary-foreground);
+}
+.text--success {
+  color: var(--success);
+}
+.text--warning {
+  color: var(--warning);
+}
+.text--info {
+  color: var(--info);
+}
+.text--destructive {
+  color: var(--destructive);
+}
+
+/* button — defaults: primary pill, 36px high, centered, fast focusable action. */
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gap-sm);
+  min-width: 0;
+  height: var(--control-height);
+  padding: var(--gap-sm) var(--gap-lg);
+  border: 1px solid transparent;
+  border-radius: var(--radius-control);
+  background: var(--primary);
+  color: var(--primary-foreground);
+  box-shadow: none;
+  font: inherit;
+  font-size: var(--text-body-size);
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background var(--duration-fast) var(--ease-spring),
+    border-color var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-fast) var(--ease-spring),
+    opacity var(--duration-fast) var(--ease-spring);
+}
+.button:hover {
+  box-shadow: var(--shadow-btn);
+}
+.button:focus-visible {
+  outline: none;
+  border-color: var(--ring);
+  box-shadow: 0 0 0 1px var(--ring);
+}
+.button:disabled,
+.button[aria-disabled="true"] {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.button--primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+}
+.button--secondary {
+  background: var(--secondary);
+  color: var(--secondary-foreground);
+}
+.button--ghost {
+  background: transparent;
+  color: var(--foreground);
+}
+.button--ghost:hover,
+.button--secondary:hover,
+.button--outline:hover {
+  background: var(--muted);
+}
+.button--destructive {
+  background: var(--destructive);
+  color: var(--destructive-foreground);
+}
+.button--outline {
+  background: var(--background);
+  color: var(--foreground);
+  border-color: var(--input);
+}
+.button--link {
+  padding-inline: 4px;
+  background: transparent;
+  color: var(--foreground);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  transition: color var(--duration-fast) var(--ease-spring);
+}
+.button--link:hover {
+  background: transparent;
+  color: var(--muted-foreground);
+  box-shadow: none;
+}
+.button--size-sm {
+  height: 32px;
+  padding: 6px var(--gap-md);
+  gap: 6px;
+}
+.button--size-lg {
+  height: 40px;
+  padding: var(--gap-sm) var(--gap-xl);
+}
+.button--icon,
+.button--icon-sm {
+  padding: 0;
+}
+.button--icon {
+  width: var(--control-height);
+  height: var(--control-height);
+}
+.button--icon-sm {
+  width: 32px;
+  height: 32px;
+}
+
+/* field — defaults: label plus pill input with input border, muted placeholder, ring focus, compact error. */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gap-sm);
+}
+.label {
+  display: flex;
+  gap: var(--gap-sm);
+  color: var(--foreground);
+  font-size: var(--text-body-size);
+  line-height: 1;
+  user-select: none;
+}
+.input {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  height: var(--control-height);
+  padding: 4px 12px;
+  border: 1px solid var(--input);
+  border-radius: var(--radius-input);
+  background: transparent;
+  color: var(--foreground);
+  font: inherit;
+  font-size: 16px;
+  outline: none;
+  transition:
+    border-color var(--duration-fast) var(--ease-spring),
+    box-shadow var(--duration-fast) var(--ease-spring);
+}
+.input::placeholder {
+  color: var(--muted-foreground);
+}
+.input:hover {
+  border-color: var(--border);
+}
+.input:focus,
+.input:focus-visible {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 1px var(--ring);
+}
+.input[aria-invalid="true"] {
+  border-color: var(--destructive);
+  box-shadow: 0 0 0 1px var(--destructive);
+}
+.input--textarea {
+  min-height: 64px;
+  height: auto;
+  padding: 12px;
+  resize: vertical;
+  border-radius: var(--radius-md);
+  line-height: 1.5;
+}
+.input--select {
+  align-items: center;
+  justify-content: space-between;
+  cursor: default;
+}
+.input--checkbox {
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  flex: 0 0 16px;
+  border-radius: var(--radius-sm);
+  accent-color: var(--primary);
+}
+.field-error {
+  color: var(--destructive);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
+/* scrim — default overlay wash uses the tokenized alpha surface. */
+.scrim {
+  background: var(--dark-40);
+}

package/dist/init-payloads/vessel-light/materials/ref/composition.conversation.html

@@ -0,0 +1,63 @@
+<!-- ghost ref annotations
+  normative-for: grammar.conversation — the whole grammar: assistant turns as plain text on the page surface (no bubble, border, or fill), user turns as compact muted surfaces aligned right, tool calls collapsed to a one-line labeled summary with status (mono detail only after expansion), one bordered prompt surface with an empty writing region and a single control row below, exactly one primary send. grammar.surfaces — no borders as decoration around assistant text. signature.shape — surface radius on the prompt surface and user turns.
+  incidental: all copy; the 720px thread width and turn max-widths; the specific attach/mention controls; the billing subject matter.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vessel Light — Conversation</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%, 720px); height: min(760px, calc(100vh - 48px)); }
+      section[aria-label="Conversation thread"] { overflow: auto; flex: 1; }
+      article[data-turn="user"] { max-width: 80%; margin-left: auto; }
+      article[data-turn="assistant"] { max-width: 92%; }
+      textarea[aria-label="Prompt"] { min-height: 96px; }
+    </style>
+  </head>
+  <body>
+    <main class="stack stack--gap-md">
+      <section class="stack stack--gap-lg" aria-label="Conversation thread">
+        <article class="surface surface--muted surface--pad-md surface--radius-surface" data-turn="user">
+          <p class="text">Can you make the billing page feel calmer without losing the upgrade prompt?</p>
+        </article>
+
+        <article class="stack stack--gap-sm" data-turn="assistant">
+          <p class="text">Yes. I would reduce the number of competing panels, keep the plan state explicit, and move the upgrade prompt into a single bordered decision area.</p>
+          <p class="text">The page should feel like account infrastructure first, promotion second.</p>
+        </article>
+
+        <details class="surface surface--muted surface--pad-sm surface--radius-surface surface--border stack stack--gap-sm" aria-label="Collapsed tool call">
+          <summary class="stack stack--row stack--justify-between stack--align-center stack--gap-sm">
+            <span class="text text--label">Inspecting tokens</span>
+            <span class="text text--label text--success">Completed</span>
+          </summary>
+          <pre class="text text--mono text--muted">read packages/vessel/src/components/billing-card.tsx</pre>
+        </details>
+
+        <article class="stack stack--gap-sm" data-turn="assistant">
+          <p class="text">Use one card surface for the current plan, muted rows for secondary facts, and a primary action only where the user can commit. Keep helper copy short and concrete.</p>
+        </article>
+
+        <article class="surface surface--muted surface--pad-md surface--radius-surface" data-turn="user">
+          <p class="text">Show me the smallest set of changes.</p>
+        </article>
+      </section>
+
+      <form class="surface surface--border-input surface--pad-sm surface--radius-surface stack stack--gap-sm" aria-label="Prompt input">
+        <textarea class="input input--textarea" aria-label="Prompt" placeholder="Ask Vessel to revise the interface"></textarea>
+        <div class="stack stack--row stack--justify-between stack--align-center stack--gap-sm">
+          <div class="stack stack--row stack--gap-xs stack--align-center">
+            <button class="button button--ghost button--icon-sm" type="button" aria-label="Attach">＋</button>
+            <button class="button button--ghost button--icon-sm" type="button" aria-label="Mention">@</button>
+          </div>
+          <button class="button button--primary button--icon-sm" type="submit" aria-label="Send">↵</button>
+        </div>
+      </form>
+    </main>
+  </body>
+</html>

package/dist/init-payloads/vessel-light/materials/ref/composition.editorial.html

@@ -0,0 +1,74 @@
+<!-- ghost ref annotations
+  normative-for: register.editorial — display-scale hero with the single sanctioned kicker (one per page — repeating it on every section is the median tell), --section-padding-vertical rhythm, the sanctioned full-bleed dark band via --surface-dark-*, the pull quote as visual punctuation, one primary action per page at button--size-lg. signature.type — the editorial heading scale (text--display for the hero, --heading-section-* and --heading-sub-* composed locally) used where the words are the composition, product text variants (title, label, body) inside the features. grammar.rhythm — the hero takes the largest gap step (stack--gap-xl) because display scale earns it. grammar.motion — the sanctioned editorial entrance: one staged reveal at --duration-slow with the one ease, opacity and small transform only. grammar.hierarchy — the inverse tone on the dark surface. signature.palette — the editorial volume: exactly two expression hues per page (periwinkle tinting the dark band, amber accenting the pull quote), controls monochrome.
+  incidental: all copy; the specific hue assignments (any two of the five expression hues satisfy the budget); the three-feature grid count; content max-widths.
+-->
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Vessel Light — Editorial Landing</title>
+    <link rel="stylesheet" href="../tokens.css" />
+    <link rel="stylesheet" href="../primitives.css" />
+    <style>
+      body { margin: 0; }
+      .page { width: min(calc(100% - (var(--page-container-side-gutter) * 2)), var(--page-container-max-width)); margin-inline: auto; }
+      .section { padding-block: var(--section-padding-vertical); }
+      .hero { min-height: calc(var(--section-padding-vertical) * 5); }
+      /* editorial entrance: one staged reveal, opacity + small transform, --duration-slow with the one ease */
+      .hero > * { animation: hero-enter var(--duration-slow) var(--ease-spring) both; }
+      @keyframes hero-enter { from { opacity: 0; transform: translateY(8px); } }
+      .label-kicker { text-transform: uppercase; }
+      .display-heading { max-width: calc(var(--page-container-side-gutter) * 48); }
+      .reading-line { max-width: calc(var(--page-container-side-gutter) * 32); font-size: var(--body-reading-size); line-height: var(--body-reading-line-height); letter-spacing: var(--body-reading-letter-spacing); }
+      .section-heading { max-width: calc(var(--page-container-side-gutter) * 36); margin-bottom: var(--section-heading-margin-bottom); font-size: var(--heading-section-font-size); font-weight: var(--heading-section-font-weight); line-height: var(--heading-section-line-height); letter-spacing: var(--heading-section-letter-spacing); }
+      .note-heading { max-width: calc(var(--page-container-side-gutter) * 36); margin-bottom: var(--page-container-side-gutter); font-size: var(--heading-sub-font-size); font-weight: var(--heading-sub-font-weight); line-height: var(--heading-sub-line-height); letter-spacing: var(--heading-sub-letter-spacing); }
+      /* expression budget: two hues per page — periwinkle tints the dark band, amber accents the pull quote */
+      .dark-band { width: 100vw; margin-left: calc(50% - 50vw); background: color-mix(in srgb, var(--expression-2) 12%, var(--surface-dark)); color: var(--surface-dark-text); }
+      .dark-inner { width: min(calc(100% - (var(--page-container-side-gutter) * 2)), var(--page-container-max-width)); margin-inline: auto; padding-block: var(--section-padding-vertical); }
+      .dark-muted { color: var(--surface-dark-muted); }
+      .feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(var(--page-container-side-gutter) * 12), 1fr)); gap: var(--section-heading-margin-bottom); }
+      .feature { border-top: 1px solid var(--surface-dark-border); padding-top: var(--page-container-side-gutter); }
+      .pullquote { max-width: calc(var(--page-container-side-gutter) * 48); margin: 0; font-size: var(--pullquote-size); font-weight: var(--pullquote-weight); line-height: var(--pullquote-line-height); letter-spacing: var(--pullquote-letter-spacing); padding-left: var(--page-container-side-gutter); position: relative; }
+      .pullquote::before { content: "\201C"; position: absolute; left: 0; top: 0; color: var(--expression-1); font-size: var(--pullquote-size); line-height: 1; }
+    </style>
+  </head>
+  <body>
+    <main>
+      <section class="page section hero stack stack--gap-xl stack--align-start stack--justify-center" aria-labelledby="hero-title">
+        <p class="text text--label text--muted label-kicker">Independent review layer</p>
+        <h1 class="text text--display display-heading" id="hero-title">Make every generated screen answer to the same brand memory.</h1>
+        <p class="text reading-line text--muted">Vessel keeps interface materials plain, inspectable, and close to the repo so agents can preserve the feel behind the product, not just the surface.</p>
+        <a class="button button--primary button--size-lg" href="#material-system">Review materials</a>
+      </section>
+
+      <section class="dark-band" id="material-system" aria-labelledby="system-title">
+        <div class="dark-inner">
+          <h2 class="text text--inverse section-heading" id="system-title">A small set of primitives carries the whole system.</h2>
+          <div class="feature-grid">
+            <article class="feature stack stack--gap-sm">
+              <p class="text text--label dark-muted">Density</p>
+              <h3 class="text text--title">Compact by default</h3>
+              <p class="text dark-muted">Controls stay close to their labels. Surfaces reserve padding for decisions, not decoration.</p>
+            </article>
+            <article class="feature stack stack--gap-sm">
+              <p class="text text--label dark-muted">Restraint</p>
+              <h3 class="text text--title">Monochrome first</h3>
+              <p class="text dark-muted">Contrast, rhythm, and type scale do the work before color is asked to explain status.</p>
+            </article>
+            <article class="feature stack stack--gap-sm">
+              <p class="text text--label dark-muted">Trust</p>
+              <h3 class="text text--title">Every action is explicit</h3>
+              <p class="text dark-muted">Buttons name the commitment. Secondary copy clarifies consequence without trying to persuade.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+
+      <section class="page section" aria-labelledby="note-title">
+        <h2 class="text note-heading" id="note-title">Why authorship survives generation</h2>
+        <blockquote class="pullquote">The interface should feel authored even when an agent produced the first pass.</blockquote>
+      </section>
+    </main>
+  </body>
+</html>

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

@@ -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>