From e78e808195381a3d0491572c07d8e216a037a976 Mon Sep 17 00:00:00 2001
From: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Date: Mon, 25 May 2026 15:48:20 +0200
Subject: [PATCH 1/4] feat(admin/marketplace): restyle catalogue to "Living
 systems" brand
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply paper-and-forest brand tokens to the catalogue browse page:
the headline lands as "Marketplace catalogue." with the italic-serif
accent on "catalogue", an emerald eyebrow, and a Geist lead. Filter
chips toggle to emerald-soft when active; sort chips swap to a solid
ink fill so the two chip rows read distinctly. MarketplaceCard sits on
paper-2 with a paper-3 thumb glyph well, Archivo display title, Geist
tagline, monospace slug, and a lavender-soft capability chip. Rating
stars are emerald-deep on cream — the alive green that runs across
the marketplace surface.

Tokens used: --paper, --paper-2, --paper-3, --border, --emerald-deep,
--emerald-soft, --lavender-soft, --lavender-deep, --fg-muted,
--fg-subtle, --r-md, --r-lg, --r-pill, --sh-xs, --sh-md, --sh-focus,
--font-display, --font-sans, --font-mono, --t-lg, --t-sm, --t-xs.

Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
---
 .../marketplace/MarketplaceClient.tsx         |  88 ++++++---
 .../components/MarketplaceCard.tsx            | 174 ++++++++++++------
 .../marketplace/components/RatingStars.tsx    |  32 +++-
 .../app/(authenticated)/marketplace/page.tsx  |  58 ++++--
 4 files changed, 248 insertions(+), 104 deletions(-)

diff --git a/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx b/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx
index 1503e31d..b9c0915d 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx
@@ -11,6 +11,14 @@
  * We intentionally don't fan out to the API client-side: keeping the
  * fetch on the server keeps cookie forwarding straightforward and
  * lets server data take precedence over stale client state.
+ *
+ * Brand
+ * =====
+ * Search lives inside a cream `--paper-2` shell with an emerald focus
+ * halo (`--sh-focus`). Category chips toggle to emerald when active —
+ * the "alive" affordance for an applied filter. Sort chips swap to a
+ * solid ink fill (the "primary" accent) so the two chip rows don't
+ * fight each other for emphasis.
  */
 
 import { useRouter, useSearchParams } from 'next/navigation';
@@ -30,45 +38,73 @@ const styles: Record<string, CSSProperties> = {
     gap: 12,
     alignItems: 'center',
     flexWrap: 'wrap',
-    marginBottom: 16,
+    marginBottom: 24,
   },
   search: {
     flex: '1 1 240px',
-    padding: '8px 10px',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    fontSize: 14,
+    padding: '10px 12px',
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-md)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
+    outline: 'none',
+    transition:
+      'background var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease)',
+  },
+  chipsLabel: {
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    color: 'var(--fg-subtle)',
+    fontWeight: 500,
+    letterSpacing: '0.04em',
+    textTransform: 'uppercase',
+    marginRight: 4,
   },
   chips: {
     display: 'inline-flex',
     gap: 6,
     flexWrap: 'wrap',
+    alignItems: 'center',
   },
   chip: {
-    padding: '4px 10px',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 999,
-    background: '#ffffff',
-    fontSize: 12,
+    padding: '5px 12px',
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-pill)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    fontWeight: 500,
+    color: 'var(--fg-muted)',
     cursor: 'pointer',
-    color: 'var(--color-text, #1c2024)',
+    transition:
+      'background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)',
+  },
+  chipActiveEmerald: {
+    background: 'var(--emerald-soft)',
+    color: 'var(--emerald-deep)',
+    borderColor: 'var(--emerald-soft)',
   },
-  chipActive: {
-    background: '#3730a3',
-    color: '#ffffff',
-    borderColor: '#3730a3',
+  chipActiveInk: {
+    background: 'var(--ink)',
+    color: 'var(--paper)',
+    borderColor: 'var(--ink)',
   },
   grid: {
     display: 'grid',
-    gridTemplateColumns: 'repeat(auto-fill, minmax(260px, 1fr))',
-    gap: 16,
+    gridTemplateColumns: 'repeat(auto-fill, minmax(280px, 1fr))',
+    gap: 18,
   },
   empty: {
-    padding: 32,
-    border: '1px dashed var(--color-border, #e4e6ea)',
-    borderRadius: 8,
+    padding: 48,
+    background: 'var(--paper-2)',
+    border: '1px dashed var(--border)',
+    borderRadius: 'var(--r-lg)',
     textAlign: 'center',
-    color: 'var(--color-text-muted, #6b7280)',
+    color: 'var(--fg-muted)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
   },
 };
 
@@ -147,16 +183,17 @@ export function MarketplaceClient({
           type="search"
           value={q}
           onChange={onSearch}
-          placeholder="Search plugins…"
+          placeholder="Search 1,240+ themes & extensions"
           aria-label="Search the marketplace"
           style={styles.search}
         />
         <div style={styles.chips} role="group" aria-label="Filter by category">
+          <span style={styles.chipsLabel}>Category</span>
           <button
             type="button"
             style={
               category === ''
-                ? { ...styles.chip, ...styles.chipActive }
+                ? { ...styles.chip, ...styles.chipActiveEmerald }
                 : styles.chip
             }
             aria-pressed={category === ''}
@@ -173,7 +210,7 @@ export function MarketplaceClient({
               key={c}
               style={
                 category === c
-                  ? { ...styles.chip, ...styles.chipActive }
+                  ? { ...styles.chip, ...styles.chipActiveEmerald }
                   : styles.chip
               }
               aria-pressed={category === c}
@@ -187,13 +224,14 @@ export function MarketplaceClient({
           ))}
         </div>
         <div style={styles.chips} role="group" aria-label="Sort listings">
+          <span style={styles.chipsLabel}>Sort</span>
           {SORT_OPTIONS.map((opt) => (
             <button
               type="button"
               key={opt.value}
               style={
                 sort === opt.value
-                  ? { ...styles.chip, ...styles.chipActive }
+                  ? { ...styles.chip, ...styles.chipActiveInk }
                   : styles.chip
               }
               aria-pressed={sort === opt.value}
diff --git a/apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.tsx b/apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.tsx
index 26693bf3..ed7d096f 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.tsx
@@ -7,6 +7,20 @@
  * on the detail page rather than the card to keep the consent flow
  * out of the browsing surface.
  *
+ * Visual identity ("Living systems")
+ * ===================================
+ * Cards sit on paper-2 with a paper-3 thumb glyph well, hairline
+ * border, and the resting `--sh-xs` shadow. Hovering lifts to `--sh-md`
+ * and tugs the card up 2px via `transform` — the same hover gesture
+ * the marketplace HTML moodboard uses. Inside the body:
+ *   - Title is Archivo 600 (sans display) for a tight, alive look
+ *   - Tagline is Geist (sans body) at `--t-sm`
+ *   - Stars are emerald — not the legacy amber. They sit alongside
+ *     a tiny "(n)" rating count in `--fg-subtle`.
+ *   - The capability count chip is `--lavender-soft / --lavender-deep`
+ *     — the secondary brand accent, matching the data-viz pairing in
+ *     the design tokens.
+ *
  * Server-component compatible: no hooks, no state, no event handlers.
  * The host can render hundreds of cards in one server response without
  * paying for client-side hydration per tile.
@@ -21,80 +35,120 @@ const styles: Record<string, CSSProperties> = {
   card: {
     display: 'flex',
     flexDirection: 'column',
-    gap: 8,
-    padding: 16,
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 8,
-    background: 'var(--color-surface, #ffffff)',
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
     textDecoration: 'none',
-    color: 'inherit',
-    transition: 'box-shadow 120ms ease',
-    minHeight: 140,
+    color: 'var(--ink)',
+    boxShadow: 'var(--sh-xs)',
+    transition:
+      'transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease)',
+    overflow: 'hidden',
+    minHeight: 220,
   },
-  header: {
+  thumb: {
+    aspectRatio: '16 / 9',
+    background: 'var(--paper-3)',
+    borderBottom: '1px solid var(--border)',
     display: 'flex',
     alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+    overflow: 'hidden',
+  },
+  thumbGlyph: {
+    fontFamily: 'var(--font-display)',
+    fontWeight: 800,
+    fontSize: 56,
+    letterSpacing: '-0.04em',
+    lineHeight: 1,
+    color: 'var(--emerald-deep)',
+  },
+  body: {
+    padding: '16px 18px 18px',
+    display: 'flex',
+    flexDirection: 'column',
     gap: 10,
+    flex: 1,
+  },
+  headRow: {
+    display: 'flex',
+    alignItems: 'flex-start',
+    gap: 12,
   },
   icon: {
     width: 36,
     height: 36,
-    borderRadius: 8,
-    background: 'linear-gradient(135deg, #f0f4ff, #e0e7ff)',
+    borderRadius: 'var(--r-sm)',
+    border: '1px solid var(--border)',
+    background: 'var(--paper)',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
+    fontFamily: 'var(--font-display)',
+    fontWeight: 800,
     fontSize: 16,
-    fontWeight: 600,
-    color: '#3730a3',
+    color: 'var(--emerald-deep)',
     flex: '0 0 auto',
   },
+  titleBlock: { minWidth: 0, flex: 1 },
   name: {
     margin: 0,
-    fontSize: 15,
+    fontFamily: 'var(--font-display)',
     fontWeight: 600,
-    color: 'var(--color-text, #1c2024)',
+    fontSize: 'var(--t-lg)',
+    letterSpacing: '-0.005em',
+    lineHeight: 1.2,
+    color: 'var(--ink)',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
   },
   slug: {
-    margin: 0,
-    fontSize: 12,
-    color: 'var(--color-text-muted, #6b7280)',
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    margin: '2px 0 0',
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-xs)',
+    color: 'var(--fg-subtle)',
   },
   summary: {
     margin: 0,
-    fontSize: 13,
-    lineHeight: 1.45,
-    color: 'var(--color-text, #1c2024)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    lineHeight: 1.5,
+    color: 'var(--fg-muted)',
     display: '-webkit-box',
     WebkitLineClamp: 2,
     WebkitBoxOrient: 'vertical',
     overflow: 'hidden',
   },
-  footer: {
+  summaryEmpty: {
+    fontStyle: 'italic',
+    color: 'var(--fg-faint)',
+  },
+  foot: {
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'space-between',
-    marginTop: 'auto',
-    paddingTop: 8,
     gap: 8,
+    marginTop: 'auto',
+    paddingTop: 12,
+    borderTop: '1px solid var(--border)',
   },
   chip: {
-    display: 'inline-block',
-    padding: '1px 8px',
-    borderRadius: 999,
-    background: '#eef2ff',
-    color: '#3730a3',
-    fontSize: 11,
+    display: 'inline-flex',
+    alignItems: 'center',
+    padding: '2px 8px',
+    borderRadius: 'var(--r-sm)',
+    background: 'var(--lavender-soft)',
+    color: 'var(--lavender-deep)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
     fontWeight: 500,
-    textTransform: 'lowercase',
   },
   installs: {
-    fontSize: 12,
-    color: 'var(--color-text-muted, #6b7280)',
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-xs)',
+    color: 'var(--fg-subtle)',
   },
 };
 
@@ -109,34 +163,40 @@ export function MarketplaceCard({
   return (
     <Link
       href={`/marketplace/${encodeURIComponent(listing.slug)}`}
+      className="marketplace-card"
       style={styles.card}
       data-testid="marketplace-card"
       data-listing-slug={listing.slug}
     >
-      <div style={styles.header}>
-        <span style={styles.icon} aria-hidden="true">
-          {initial}
-        </span>
-        <div style={{ minWidth: 0, flex: 1 }}>
-          <h3 style={styles.name}>{listing.name}</h3>
-          <p style={styles.slug}>{listing.slug}</p>
-        </div>
+      <div style={styles.thumb} aria-hidden="true">
+        <span style={styles.thumbGlyph}>{initial}</span>
       </div>
-      {listing.summary ? (
-        <p style={styles.summary}>{listing.summary}</p>
-      ) : (
-        <p style={{ ...styles.summary, fontStyle: 'italic' }}>
-          No summary yet.
-        </p>
-      )}
-      <div style={styles.footer}>
-        <RatingStars value={listing.stars} count={listing.rating_count} />
-        {listing.primary_category ? (
-          <span style={styles.chip}>{listing.primary_category}</span>
-        ) : null}
-        <span style={styles.installs}>
-          {listing.install_count.toLocaleString()} installs
-        </span>
+      <div style={styles.body}>
+        <div style={styles.headRow}>
+          <span style={styles.icon} aria-hidden="true">
+            {initial}
+          </span>
+          <div style={styles.titleBlock}>
+            <h3 style={styles.name}>{listing.name}</h3>
+            <p style={styles.slug}>{listing.slug}</p>
+          </div>
+        </div>
+        {listing.summary ? (
+          <p style={styles.summary}>{listing.summary}</p>
+        ) : (
+          <p style={{ ...styles.summary, ...styles.summaryEmpty }}>
+            No tagline yet.
+          </p>
+        )}
+        <div style={styles.foot}>
+          <RatingStars value={listing.stars} count={listing.rating_count} />
+          {listing.primary_category ? (
+            <span style={styles.chip}>{listing.primary_category}</span>
+          ) : null}
+          <span style={styles.installs}>
+            {listing.install_count.toLocaleString()} installs
+          </span>
+        </div>
       </div>
     </Link>
   );
diff --git a/apps/admin/src/app/(authenticated)/marketplace/components/RatingStars.tsx b/apps/admin/src/app/(authenticated)/marketplace/components/RatingStars.tsx
index 3ea0a0bb..5511b12e 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/components/RatingStars.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/components/RatingStars.tsx
@@ -11,6 +11,14 @@
  *   - true: keyboard- and mouse-accessible radiogroup; each slot fires
  *     `onChange` with the chosen integer.
  *
+ * Brand
+ * =====
+ * Stars are `--emerald-deep` on cream — the "alive" green that runs
+ * across the marketplace surface. Empty slots stay at `--fg-faint` so
+ * the relative fill is legible at a glance. The trailing rating count
+ * is rendered in monospace so the per-card foot row aligns vertically
+ * across the grid.
+ *
  * Why a single component for both modes: the visual treatment is
  * identical and downstream code wants to use the same "stars look"
  * for the listing grid card AND the rating-submission form. Splitting
@@ -29,8 +37,8 @@ const styles: Record<string, CSSProperties> = {
     display: 'inline-flex',
     alignItems: 'center',
     gap: 2,
-    color: '#f59e0b',
-    fontSize: 16,
+    color: 'var(--emerald-deep)',
+    fontSize: 14,
     lineHeight: 1,
   },
   star: {
@@ -38,6 +46,9 @@ const styles: Record<string, CSSProperties> = {
     width: '1.1em',
     textAlign: 'center',
   },
+  starEmpty: {
+    color: 'var(--fg-faint)',
+  },
   button: {
     background: 'transparent',
     border: 0,
@@ -50,8 +61,9 @@ const styles: Record<string, CSSProperties> = {
   },
   count: {
     marginLeft: 6,
-    color: 'var(--color-text-muted, #6b7280)',
-    fontSize: 13,
+    fontFamily: 'var(--font-mono)',
+    color: 'var(--fg-subtle)',
+    fontSize: 'var(--t-xs)',
   },
 };
 
@@ -88,7 +100,11 @@ export function RatingStars({
         data-testid="rating-stars-display"
       >
         {[1, 2, 3, 4, 5].map((n) => (
-          <span key={n} aria-hidden="true" style={styles.star}>
+          <span
+            key={n}
+            aria-hidden="true"
+            style={n <= rounded ? styles.star : { ...styles.star, ...styles.starEmpty }}
+          >
             {n <= rounded ? '★' : '☆'}
           </span>
         ))}
@@ -115,7 +131,11 @@ export function RatingStars({
           role="radio"
           aria-checked={n === rounded}
           aria-label={`${n} star${n === 1 ? '' : 's'}`}
-          style={styles.button}
+          style={
+            n <= rounded
+              ? styles.button
+              : { ...styles.button, color: 'var(--fg-faint)' }
+          }
           onClick={() => onChange?.(n)}
         >
           {n <= rounded ? '★' : '☆'}
diff --git a/apps/admin/src/app/(authenticated)/marketplace/page.tsx b/apps/admin/src/app/(authenticated)/marketplace/page.tsx
index e52baf89..935fb909 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/page.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/page.tsx
@@ -14,6 +14,13 @@
  * Auth: the API gates every read endpoint on a logged-in principal.
  * If the fetch fails we surface a friendly inline notice and the
  * empty state so the surrounding admin shell remains navigable.
+ *
+ * Brand
+ * =====
+ * The page head uses the "living systems" Headline pattern: a heavy
+ * Archivo display word, an italic-serif accent for the emphasized
+ * noun, and an emerald eyebrow. The lead paragraph is `--fg-muted`
+ * Geist so it sits a half-step behind the headline.
  */
 import type { ReactElement } from 'react';
 import Link from 'next/link';
@@ -49,22 +56,40 @@ export default async function MarketplacePage({
 
   return (
     <section>
-      <header style={{ marginBottom: 16 }}>
-        <h1 style={{ margin: 0, fontSize: 22, fontWeight: 600 }}>
-          Marketplace
+      <header style={{ marginBottom: 32 }}>
+        <span className="eyebrow">Marketplace — themes &amp; extensions</span>
+        <h1
+          className="h1"
+          style={{
+            margin: '8px 0 0',
+            fontSize: 'clamp(40px, 5vw, 56px)',
+            lineHeight: 0.95,
+          }}
+        >
+          Marketplace <em>catalogue</em>.
         </h1>
         <p
+          className="lead"
           style={{
-            margin: '4px 0 0',
-            color: 'var(--color-text-muted, #6b7280)',
-            fontSize: 14,
-            maxWidth: 720,
+            margin: '12px 0 0',
+            maxWidth: 640,
           }}
         >
           Browse plugins published to your host. Pick a listing to review
           its capability request and install it — the install screen
-          mirrors the consent flow you’ll see for{' '}
-          <Link href="/plugins/install">manual installs</Link>.
+          mirrors the consent flow you&apos;ll see for{' '}
+          <Link
+            href="/plugins/install"
+            style={{
+              color: 'var(--emerald-deep)',
+              textDecoration: 'underline',
+              textDecorationColor: 'var(--emerald-soft)',
+              textUnderlineOffset: 3,
+            }}
+          >
+            manual installs
+          </Link>
+          .
         </p>
       </header>
 
@@ -72,16 +97,17 @@ export default async function MarketplacePage({
         <div
           role="alert"
           style={{
-            padding: 12,
+            padding: '12px 14px',
             marginBottom: 16,
-            background: '#fef9c3',
-            color: '#854d0e',
-            border: '1px solid #fde68a',
-            borderRadius: 6,
-            fontSize: 13,
+            background: 'var(--warning-soft)',
+            color: 'var(--warning)',
+            border: '1px solid var(--warning-soft)',
+            borderRadius: 'var(--r-md)',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--t-sm)',
           }}
         >
-          Couldn’t load the catalogue ({error}). The marketplace API may
+          Couldn&apos;t load the catalogue ({error}). The marketplace API may
           not be available yet.
         </div>
       ) : null}

From e471454d65382da17d4d8aa872443cc5eac795b5 Mon Sep 17 00:00:00 2001
From: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Date: Mon, 25 May 2026 15:50:20 +0200
Subject: [PATCH 2/4] feat(admin/marketplace): restyle listing detail in brand
 tokens

Apply the "Living systems" brand to /marketplace/[slug]:
the header lands as a heavy Archivo display title with an italic-serif
accent for the author name, an emerald-soft icon well, and a meta row
that pairs monospace install counts with the emerald rating stars. The
install CTA is the brand's emerald button (alive/positive action).
Version history sits in a paper-2 card with mono row IDs and the SHA
digest in Geist Mono. The compatibility matrix moves to a paper-3
sunken surface to mark it as reference data. Ratings land as a
horizontal review carousel of cream cards with the same emerald stars
plus a date in `--font-mono`. Section eyebrows replace the legacy
uppercase headings.

Tokens used: --paper-2, --paper-3, --emerald, --emerald-deep,
--emerald-ink, --emerald-soft, --warning-soft, --danger-soft,
--success-soft, --border, --border-subtle, --fg-muted, --fg-subtle,
--font-display, --font-serif, --font-sans, --font-mono, --t-2xs, --t-xs,
--t-sm, --t-md, --t-2xl, --r-md, --r-lg, --sh-xs.

Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
---
 .../marketplace/[slug]/ListingDetailView.tsx  | 492 +++++++++++++-----
 .../marketplace/[slug]/page.tsx               |  52 +-
 2 files changed, 395 insertions(+), 149 deletions(-)

diff --git a/apps/admin/src/app/(authenticated)/marketplace/[slug]/ListingDetailView.tsx b/apps/admin/src/app/(authenticated)/marketplace/[slug]/ListingDetailView.tsx
index f001c3e0..8a153f81 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/[slug]/ListingDetailView.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/[slug]/ListingDetailView.tsx
@@ -10,6 +10,16 @@
  * Server-fetched data is passed down as props; the client owns the
  * rating submission form state and the submission router refresh
  * after a successful POST.
+ *
+ * Brand
+ * =====
+ * Headline title uses the Archivo display face with an italic-serif
+ * accent on the listing author — the "by" line reads as part of the
+ * h1. Version IDs and SHA digests stay in Geist Mono so the operator
+ * can scan them at a glance. The compatibility matrix sits on a
+ * `--paper-3` "sunken" surface to mark it as reference data rather
+ * than an interactive panel. Section panels are `--paper-2` cards
+ * with eyebrow titles.
  */
 
 import Link from 'next/link';
@@ -33,137 +43,285 @@ const styles: Record<string, CSSProperties> = {
   header: {
     display: 'flex',
     alignItems: 'flex-start',
-    gap: 16,
-    marginBottom: 20,
+    gap: 20,
+    marginBottom: 28,
+    paddingBottom: 24,
+    borderBottom: '1px solid var(--border)',
   },
   icon: {
-    width: 60,
-    height: 60,
-    borderRadius: 12,
-    background: 'linear-gradient(135deg, #f0f4ff, #e0e7ff)',
+    width: 72,
+    height: 72,
+    borderRadius: 'var(--r-lg)',
+    background: 'var(--emerald-soft)',
+    border: '1px solid var(--border)',
     display: 'inline-flex',
     alignItems: 'center',
     justifyContent: 'center',
-    fontSize: 24,
-    fontWeight: 600,
-    color: '#3730a3',
+    fontFamily: 'var(--font-display)',
+    fontSize: 32,
+    fontWeight: 800,
+    color: 'var(--emerald-deep)',
     flex: '0 0 auto',
   },
   titleBlock: { flex: 1, minWidth: 0 },
-  title: { margin: 0, fontSize: 24, fontWeight: 600 },
+  eyebrow: {
+    display: 'inline-block',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    letterSpacing: '0.12em',
+    textTransform: 'uppercase',
+    color: 'var(--emerald-deep)',
+    fontWeight: 500,
+    marginBottom: 4,
+  },
+  title: {
+    margin: 0,
+    fontFamily: 'var(--font-display)',
+    fontWeight: 800,
+    fontSize: 'clamp(36px, 4.5vw, 52px)',
+    lineHeight: 0.95,
+    letterSpacing: '-0.03em',
+    color: 'var(--ink)',
+  },
+  authorLine: {
+    margin: '8px 0 0',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-md)',
+    color: 'var(--fg-muted)',
+  },
+  authorAccent: {
+    fontFamily: 'var(--font-serif)',
+    fontStyle: 'italic',
+    fontWeight: 400,
+    color: 'var(--emerald-deep)',
+    fontSize: '1.08em',
+    marginLeft: 4,
+  },
   slug: {
-    margin: '2px 0 8px',
-    fontSize: 13,
-    color: 'var(--color-text-muted, #6b7280)',
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
+    margin: '4px 0 0',
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--fg-subtle)',
   },
   installCta: {
-    display: 'inline-block',
-    padding: '10px 18px',
-    background: 'var(--color-accent, #2563eb)',
-    color: '#ffffff',
-    borderRadius: 6,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+    padding: '12px 22px',
+    background: 'var(--emerald)',
+    color: 'var(--emerald-ink)',
+    border: '1px solid var(--emerald)',
+    borderRadius: 'var(--r-md)',
+    fontFamily: 'var(--font-sans)',
+    fontWeight: 500,
+    fontSize: 'var(--t-base)',
     textDecoration: 'none',
-    fontWeight: 600,
-    fontSize: 14,
+    boxShadow: 'var(--sh-xs)',
+    transition:
+      'background var(--dur) var(--ease), border-color var(--dur) var(--ease)',
   },
   metaRow: {
     display: 'flex',
     gap: 16,
     flexWrap: 'wrap',
-    fontSize: 13,
-    color: 'var(--color-text-muted, #6b7280)',
+    alignItems: 'center',
+    marginTop: 14,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--fg-muted)',
+  },
+  metaItem: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 4,
   },
   card: {
-    background: 'var(--color-surface, #ffffff)',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    padding: 16,
-    marginBottom: 16,
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
+    padding: 24,
+    marginBottom: 18,
+    boxShadow: 'var(--sh-xs)',
   },
-  cardTitle: {
-    margin: 0,
-    fontSize: 14,
-    fontWeight: 600,
+  cardPaper3: {
+    background: 'var(--paper-3)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
+    padding: 24,
+    marginBottom: 18,
+  },
+  cardEyebrow: {
+    display: 'inline-block',
+    fontFamily: 'var(--font-sans)',
+    fontWeight: 500,
+    fontSize: 'var(--t-xs)',
+    letterSpacing: '0.12em',
     textTransform: 'uppercase',
-    letterSpacing: '0.04em',
-    color: 'var(--color-text-muted, #6b7280)',
-    marginBottom: 12,
-  },
-  screenshotPlaceholder: {
-    height: 160,
-    background: '#f5f5f5',
-    border: '1px dashed var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    color: 'var(--color-text-muted, #6b7280)',
-    fontSize: 13,
+    color: 'var(--fg-subtle)',
+    marginBottom: 14,
+  },
+  about: {
+    margin: 0,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-md)',
+    lineHeight: 1.55,
+    color: 'var(--ink-soft)',
   },
   table: {
     width: '100%',
     borderCollapse: 'collapse',
-    fontSize: 13,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
   },
   th: {
     textAlign: 'left',
-    padding: '6px 8px',
-    borderBottom: '1px solid var(--color-border, #e4e6ea)',
+    padding: '8px 12px',
+    borderBottom: '1px solid var(--border)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
     fontWeight: 600,
+    letterSpacing: '0.04em',
+    textTransform: 'uppercase',
+    color: 'var(--fg-subtle)',
+  },
+  td: {
+    padding: '10px 12px',
+    verticalAlign: 'top',
+    borderBottom: '1px solid var(--border-subtle)',
+  },
+  tdMono: {
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-xs)',
+    color: 'var(--ink-soft)',
   },
-  td: { padding: '6px 8px', verticalAlign: 'top' },
   deprecated: {
     display: 'inline-block',
-    padding: '0 6px',
-    background: '#fef3c7',
-    color: '#92400e',
-    borderRadius: 4,
-    fontSize: 11,
     marginLeft: 6,
+    padding: '1px 8px',
+    background: 'var(--warning-soft)',
+    color: 'var(--warning)',
+    borderRadius: 'var(--r-sm)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-2xs)',
+    fontWeight: 500,
   },
-  ratingForm: {
+  ratingsHeader: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 12,
+    flexWrap: 'wrap',
+  },
+  ratingsAverage: {
+    fontFamily: 'var(--font-display)',
+    fontWeight: 800,
+    fontSize: 'var(--t-2xl)',
+    color: 'var(--ink)',
+    letterSpacing: '-0.02em',
+  },
+  ratingsCount: {
+    color: 'var(--fg-subtle)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+  },
+  reviewsCarousel: {
+    listStyle: 'none',
+    margin: '16px 0 0',
+    padding: 0,
+    display: 'flex',
+    gap: 14,
+    overflowX: 'auto',
+    scrollSnapType: 'x mandatory',
+    paddingBottom: 8,
+  },
+  reviewCard: {
+    background: 'var(--paper)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-md)',
+    padding: 16,
+    minWidth: 260,
+    maxWidth: 320,
+    flex: '0 0 280px',
+    scrollSnapAlign: 'start',
     display: 'flex',
     flexDirection: 'column',
     gap: 8,
-    marginTop: 12,
+  },
+  reviewText: {
+    margin: 0,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    lineHeight: 1.5,
+    color: 'var(--ink-soft)',
+  },
+  reviewMeta: {
+    marginTop: 4,
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-2xs)',
+    color: 'var(--fg-subtle)',
+  },
+  ratingForm: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 10,
+    marginTop: 20,
+    paddingTop: 18,
+    borderTop: '1px solid var(--border)',
+  },
+  ratingFormLabel: {
+    fontFamily: 'var(--font-sans)',
+    fontWeight: 500,
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
   },
   textarea: {
     width: '100%',
-    minHeight: 80,
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    padding: 8,
-    fontFamily: 'inherit',
-    fontSize: 13,
+    minHeight: 88,
+    background: 'var(--paper)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-md)',
+    padding: 12,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
     resize: 'vertical',
+    outline: 'none',
   },
   submit: {
     alignSelf: 'flex-start',
-    padding: '6px 14px',
-    background: 'var(--color-accent, #2563eb)',
-    color: '#ffffff',
-    border: 0,
-    borderRadius: 6,
-    fontSize: 13,
+    background: 'var(--emerald)',
+    color: 'var(--emerald-ink)',
+    border: '1px solid var(--emerald)',
+    borderRadius: 'var(--r-md)',
+    padding: '8px 16px',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
     fontWeight: 500,
     cursor: 'pointer',
+    boxShadow: 'var(--sh-xs)',
   },
   errorBox: {
-    padding: 10,
-    background: '#fef2f2',
-    color: '#991b1b',
-    border: '1px solid #fecaca',
-    borderRadius: 6,
-    fontSize: 13,
+    padding: '10px 12px',
+    background: 'var(--danger-soft)',
+    color: 'var(--danger)',
+    border: '1px solid var(--danger-soft)',
+    borderRadius: 'var(--r-md)',
+    fontSize: 'var(--t-sm)',
+    fontFamily: 'var(--font-sans)',
   },
   successBox: {
-    padding: 10,
-    background: '#dcfce7',
-    color: '#166534',
-    border: '1px solid #86efac',
-    borderRadius: 6,
-    fontSize: 13,
+    padding: '10px 12px',
+    background: 'var(--success-soft)',
+    color: 'var(--success)',
+    border: '1px solid var(--success-soft)',
+    borderRadius: 'var(--r-md)',
+    fontSize: 'var(--t-sm)',
+    fontFamily: 'var(--font-sans)',
+  },
+  homepageLink: {
+    color: 'var(--emerald-deep)',
+    textDecoration: 'underline',
+    textDecorationColor: 'var(--emerald-soft)',
+    textUnderlineOffset: 3,
   },
 };
 
@@ -221,19 +379,54 @@ export function ListingDetailView({
           {initial}
         </span>
         <div style={styles.titleBlock}>
+          <span style={styles.eyebrow}>
+            {listing.primary_category ?? 'Marketplace listing'}
+          </span>
           <h1 style={styles.title}>{listing.name}</h1>
+          {listing.author_id ? (
+            <p style={styles.authorLine}>
+              by<span style={styles.authorAccent}>{listing.author_id}</span>
+            </p>
+          ) : null}
           <p style={styles.slug}>{listing.slug}</p>
           <div style={styles.metaRow}>
-            <RatingStars value={listing.stars} count={listing.rating_count} />
-            <span>{listing.install_count.toLocaleString()} installs</span>
-            {listing.primary_category ? (
-              <span>Category: {listing.primary_category}</span>
-            ) : null}
+            <span style={styles.metaItem}>
+              <RatingStars
+                value={listing.stars}
+                count={listing.rating_count}
+              />
+            </span>
+            <span style={styles.metaItem}>
+              <span
+                style={{
+                  fontFamily: 'var(--font-mono)',
+                  color: 'var(--ink)',
+                }}
+              >
+                {listing.install_count.toLocaleString()}
+              </span>
+              <span style={{ color: 'var(--fg-subtle)' }}>installs</span>
+            </span>
             {listing.license_spdx ? (
-              <span>Licence: {listing.license_spdx}</span>
+              <span style={styles.metaItem}>
+                <span style={{ color: 'var(--fg-subtle)' }}>Licence:</span>
+                <code
+                  style={{
+                    fontFamily: 'var(--font-mono)',
+                    color: 'var(--ink)',
+                  }}
+                >
+                  {listing.license_spdx}
+                </code>
+              </span>
             ) : null}
             {listing.homepage_url ? (
-              <a href={listing.homepage_url} target="_blank" rel="noreferrer">
+              <a
+                href={listing.homepage_url}
+                target="_blank"
+                rel="noreferrer"
+                style={styles.homepageLink}
+              >
                 Homepage
               </a>
             ) : null}
@@ -249,33 +442,30 @@ export function ListingDetailView({
       </div>
 
       <div style={styles.card} data-section="description">
-        <h2 style={styles.cardTitle}>About</h2>
-        <p style={{ margin: 0, lineHeight: 1.5, fontSize: 14 }}>
+        <span style={styles.cardEyebrow}>About</span>
+        <p style={styles.about}>
           {listing.summary || 'No description provided yet.'}
         </p>
       </div>
 
-      <div style={styles.card} data-section="screenshots">
-        <h2 style={styles.cardTitle}>Screenshots</h2>
-        <div
-          style={styles.screenshotPlaceholder}
-          role="img"
-          aria-label="Screenshots will appear here once the publisher uploads them."
-        >
-          Screenshots coming soon
-        </div>
-      </div>
-
       <div style={styles.card} data-section="versions">
-        <h2 style={styles.cardTitle}>Version history</h2>
+        <span style={styles.cardEyebrow}>Version history</span>
         {versions.length === 0 ? (
-          <p style={{ margin: 0, fontSize: 13, color: '#6b7280' }}>
+          <p
+            style={{
+              margin: 0,
+              fontFamily: 'var(--font-sans)',
+              fontSize: 'var(--t-sm)',
+              color: 'var(--fg-muted)',
+            }}
+          >
             No published versions yet.
           </p>
         ) : (
           <table style={styles.table}>
             <thead>
               <tr>
+                <th style={styles.th}>ID</th>
                 <th style={styles.th}>Version</th>
                 <th style={styles.th}>Published</th>
                 <th style={styles.th}>SHA-256</th>
@@ -284,8 +474,18 @@ export function ListingDetailView({
             <tbody>
               {versions.map((v) => (
                 <tr key={v.id}>
+                  <td style={{ ...styles.td, ...styles.tdMono }}>
+                    {v.id.slice(0, 8)}
+                  </td>
                   <td style={styles.td}>
-                    <code>{v.version}</code>
+                    <code
+                      style={{
+                        fontFamily: 'var(--font-mono)',
+                        color: 'var(--ink)',
+                      }}
+                    >
+                      {v.version}
+                    </code>
                     {v.deprecated ? (
                       <span style={styles.deprecated}>deprecated</span>
                     ) : null}
@@ -296,9 +496,7 @@ export function ListingDetailView({
                   <td
                     style={{
                       ...styles.td,
-                      fontFamily:
-                        'ui-monospace, SFMono-Regular, Menlo, monospace',
-                      fontSize: 11,
+                      ...styles.tdMono,
                       wordBreak: 'break-all',
                     }}
                   >
@@ -311,8 +509,8 @@ export function ListingDetailView({
         )}
       </div>
 
-      <div style={styles.card} data-section="compat">
-        <h2 style={styles.cardTitle}>Compatibility matrix</h2>
+      <div style={styles.cardPaper3} data-section="compat">
+        <span style={styles.cardEyebrow}>Compatibility matrix</span>
         {versions[0]?.compat && versions[0].compat.length > 0 ? (
           <table style={styles.table}>
             <thead>
@@ -325,68 +523,92 @@ export function ListingDetailView({
             <tbody>
               {versions[0].compat.map((c) => (
                 <tr key={`${c.host_min}-${c.host_max}`}>
-                  <td style={styles.td}>
-                    <code>{c.host_min}</code>
+                  <td style={{ ...styles.td, ...styles.tdMono }}>
+                    {c.host_min}
+                  </td>
+                  <td style={{ ...styles.td, ...styles.tdMono }}>
+                    {c.host_max}
                   </td>
                   <td style={styles.td}>
-                    <code>{c.host_max}</code>
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        alignItems: 'center',
+                        gap: 6,
+                        color: c.tested
+                          ? 'var(--emerald-deep)'
+                          : 'var(--fg-muted)',
+                      }}
+                    >
+                      {c.tested ? '✓' : '·'} {c.tested ? 'Yes' : 'No'}
+                    </span>
                   </td>
-                  <td style={styles.td}>{c.tested ? 'Yes' : 'No'}</td>
                 </tr>
               ))}
             </tbody>
           </table>
         ) : (
-          <p style={{ margin: 0, fontSize: 13, color: '#6b7280' }}>
+          <p
+            style={{
+              margin: 0,
+              fontFamily: 'var(--font-sans)',
+              fontSize: 'var(--t-sm)',
+              color: 'var(--fg-muted)',
+            }}
+          >
             No compatibility ranges declared for the latest version.
           </p>
         )}
       </div>
 
       <div style={styles.card} data-section="ratings">
-        <h2 style={styles.cardTitle}>Ratings &amp; reviews</h2>
-        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
+        <span style={styles.cardEyebrow}>Ratings &amp; reviews</span>
+        <div style={styles.ratingsHeader}>
           <RatingStars value={ratings.aggregate.average} />
-          <span style={{ fontWeight: 600, fontSize: 15 }}>
+          <span style={styles.ratingsAverage}>
             {ratings.aggregate.average.toFixed(1)}
           </span>
-          <span style={{ color: '#6b7280', fontSize: 13 }}>
+          <span style={styles.ratingsCount}>
             ({ratings.aggregate.count} ratings)
           </span>
         </div>
         {ratings.ratings.length > 0 ? (
           <ul
-            style={{
-              listStyle: 'none',
-              margin: '12px 0 0',
-              padding: 0,
-              display: 'flex',
-              flexDirection: 'column',
-              gap: 10,
-            }}
+            style={styles.reviewsCarousel}
+            data-testid="reviews-carousel"
+            aria-label="Recent reviews"
           >
             {ratings.ratings.map((r) => (
               <li
                 key={`${r.user_id}-${r.created_at}`}
-                style={{
-                  borderTop: '1px solid #f3f4f6',
-                  paddingTop: 8,
-                  fontSize: 13,
-                }}
+                style={styles.reviewCard}
               >
                 <RatingStars value={r.stars} />
                 {r.review_text ? (
-                  <p style={{ margin: '4px 0 0' }}>{r.review_text}</p>
-                ) : null}
+                  <p style={styles.reviewText}>{r.review_text}</p>
+                ) : (
+                  <p
+                    style={{
+                      ...styles.reviewText,
+                      color: 'var(--fg-faint)',
+                      fontStyle: 'italic',
+                    }}
+                  >
+                    No written review.
+                  </p>
+                )}
+                <span style={styles.reviewMeta}>
+                  {new Date(r.created_at).toLocaleDateString()}
+                </span>
               </li>
             ))}
           </ul>
         ) : null}
 
         <form onSubmit={handleSubmitRating} style={styles.ratingForm}>
-          <strong style={{ fontSize: 13 }}>Leave a rating</strong>
+          <strong style={styles.ratingFormLabel}>Leave a rating</strong>
           <RatingStars value={stars} interactive onChange={setStars} />
-          <label htmlFor="review-text" style={{ fontSize: 13 }}>
+          <label htmlFor="review-text" style={styles.ratingFormLabel}>
             Optional written review
           </label>
           <textarea
diff --git a/apps/admin/src/app/(authenticated)/marketplace/[slug]/page.tsx b/apps/admin/src/app/(authenticated)/marketplace/[slug]/page.tsx
index ece83b0b..d5b8f2dc 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/[slug]/page.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/[slug]/page.tsx
@@ -10,6 +10,12 @@
  * review screen + the consent checkbox. We deliberately do not show
  * a "one-click install" affordance: every install path in GoNext
  * must traverse the capability review, no exceptions.
+ *
+ * Brand
+ * =====
+ * The "Back" crumb uses the emerald-deep underline pattern that runs
+ * across the marketplace; on error we surface a `--warning-soft`
+ * notice with the canonical card chrome.
  */
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
@@ -23,6 +29,19 @@ import { ListingDetailView } from './ListingDetailView';
 
 export const dynamic = 'force-dynamic';
 
+const backLinkStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  marginBottom: 18,
+  fontFamily: 'var(--font-sans)',
+  fontSize: 'var(--t-sm)',
+  color: 'var(--emerald-deep)',
+  textDecoration: 'underline',
+  textDecorationColor: 'var(--emerald-soft)',
+  textUnderlineOffset: 3,
+} as const;
+
 export default async function MarketplaceListingPage({
   params,
 }: {
@@ -39,24 +58,29 @@ export default async function MarketplaceListingPage({
     // Other errors: render an inline notice rather than 404.
     return (
       <section>
-        <p style={{ marginBottom: 12 }}>
-          <Link href="/marketplace">← Back to marketplace</Link>
-        </p>
-        <h1 style={{ marginTop: 0, fontSize: 22, fontWeight: 600 }}>
+        <Link href="/marketplace" style={backLinkStyle}>
+          ← Back to marketplace
+        </Link>
+        <h1
+          className="h1"
+          style={{ marginTop: 0, fontSize: 'clamp(36px, 4.5vw, 52px)' }}
+        >
           {slug}
         </h1>
         <div
           role="alert"
           style={{
-            padding: 12,
-            background: '#fef9c3',
-            color: '#854d0e',
-            border: '1px solid #fde68a',
-            borderRadius: 6,
-            fontSize: 13,
+            marginTop: 16,
+            padding: '12px 14px',
+            background: 'var(--warning-soft)',
+            color: 'var(--warning)',
+            border: '1px solid var(--warning-soft)',
+            borderRadius: 'var(--r-md)',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--t-sm)',
           }}
         >
-          Couldn’t load this listing ({error ?? 'unknown error'}).
+          Couldn&apos;t load this listing ({error ?? 'unknown error'}).
         </div>
       </section>
     );
@@ -64,9 +88,9 @@ export default async function MarketplaceListingPage({
 
   return (
     <section>
-      <p style={{ marginBottom: 12 }}>
-        <Link href="/marketplace">← Back to marketplace</Link>
-      </p>
+      <Link href="/marketplace" style={backLinkStyle}>
+        ← Back to marketplace
+      </Link>
       <ListingDetailView
         listing={listing}
         versions={versions}

From 37de3a635764bbe3cd0def702813c4d962f6dc02 Mon Sep 17 00:00:00 2001
From: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Date: Mon, 25 May 2026 15:53:07 +0200
Subject: [PATCH 3/4] feat(admin/marketplace,plugins): brand install confirm +
 shared CapabilityReview
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the "Living systems" brand to the install confirmation surface
and the shared CapabilityReview that both /marketplace/[slug]/install
and /plugins/install render.

CapabilityReview: panel sits on a paper-2 surface with paper header,
each capability is its own paper-2 card with a 22px circular marker.
Sensitive caps swap to a lavender-soft background and a solid lavender
marker; unknown caps stay on warning-soft. Once the consent checkbox
is ticked every non-unknown marker flips to an emerald checkmark —
the row visibly confirms it has been reviewed alongside the panel.
Capability ids land in mono code chips.

InstallConfirm: meta strip uses the brand's card chrome with mono
version label and uppercase eyebrow labels. The Install CTA is the
emerald brand button. The success panel borrows the italic-accent
pattern ("Akismet installed.") with an emerald left border.

Marketplace install page: headline reads "Install <name>." with the
listing name in italic-serif accent, plus an emerald-deep capability
eyebrow and the canonical lead.

Also: replace `border` shorthand on chip styles with non-shorthand
border-{width,style,color} to silence a React style warning.

Tokens used: --paper, --paper-2, --emerald, --emerald-ink,
--emerald-soft, --emerald-deep, --lavender, --lavender-soft,
--lavender-deep, --warning, --warning-soft, --danger, --danger-soft,
--border, --fg-muted, --fg-subtle, --font-display, --font-serif,
--font-sans, --font-mono, --t-2xs, --t-xs, --t-sm, --t-base, --t-md,
--t-lg, --t-xl, --r-xs, --r-md, --r-lg, --sh-xs.

Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
---
 .../marketplace/MarketplaceClient.tsx         |   4 +-
 .../[slug]/install/InstallConfirm.tsx         | 144 ++++++++++---
 .../marketplace/[slug]/install/page.tsx       | 101 ++++++---
 .../plugins/components/CapabilityReview.tsx   | 204 +++++++++++++-----
 4 files changed, 339 insertions(+), 114 deletions(-)

diff --git a/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx b/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx
index b9c0915d..f65f3597 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/MarketplaceClient.tsx
@@ -71,7 +71,9 @@ const styles: Record<string, CSSProperties> = {
   chip: {
     padding: '5px 12px',
     background: 'var(--paper-2)',
-    border: '1px solid var(--border)',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'var(--border)',
     borderRadius: 'var(--r-pill)',
     fontFamily: 'var(--font-sans)',
     fontSize: 'var(--t-xs)',
diff --git a/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/InstallConfirm.tsx b/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/InstallConfirm.tsx
index 9ccd300b..386b49a8 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/InstallConfirm.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/InstallConfirm.tsx
@@ -16,6 +16,13 @@
  * POST /listings/{slug}/install. The API resolves the latest
  * compatible version, pulls the bundle, and walks the plugin
  * lifecycle.
+ *
+ * Brand
+ * =====
+ * The meta strip uses the brand's paper-2 card chrome with mono
+ * version IDs. The Install button is the emerald CTA (alive/positive
+ * action). The success state is a paper-2 panel with an emerald
+ * checkmark; the error state borrows the danger-soft palette.
  */
 
 import Link from 'next/link';
@@ -32,48 +39,110 @@ import { installMarketplacePlugin } from '../../actions';
 
 const styles: Record<string, CSSProperties> = {
   meta: {
-    background: 'var(--color-surface, #ffffff)',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    padding: 16,
-    marginBottom: 16,
-    fontSize: 14,
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
+    padding: '16px 20px',
+    marginBottom: 18,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink-soft)',
+    boxShadow: 'var(--sh-xs)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 6,
+  },
+  metaRow: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 8,
+  },
+  metaLabel: {
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    fontWeight: 500,
+    color: 'var(--fg-subtle)',
+    letterSpacing: '0.04em',
+    textTransform: 'uppercase',
+    minWidth: 76,
+  },
+  metaValue: {
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
+  },
+  metaMono: {
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
   },
-  metaRow: { padding: '4px 0' },
   submitRow: {
     display: 'flex',
     gap: 12,
     alignItems: 'center',
     flexWrap: 'wrap',
-    marginTop: 16,
+    marginTop: 20,
   },
   submit: {
-    background: 'var(--color-accent, #2563eb)',
-    color: '#ffffff',
-    border: 0,
-    borderRadius: 6,
-    padding: '8px 18px',
-    fontSize: 14,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+    background: 'var(--emerald)',
+    color: 'var(--emerald-ink)',
+    border: '1px solid var(--emerald)',
+    borderRadius: 'var(--r-md)',
+    padding: '10px 22px',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-base)',
     fontWeight: 500,
     cursor: 'pointer',
+    boxShadow: 'var(--sh-xs)',
+    transition:
+      'background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease)',
   },
   submitDisabled: {
     opacity: 0.5,
     cursor: 'not-allowed',
+    boxShadow: 'none',
+  },
+  consentHint: {
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--fg-muted)',
   },
   resultOk: {
-    padding: 14,
-    background: '#dcfce7',
-    color: '#166534',
-    border: '1px solid #86efac',
-    borderRadius: 6,
+    padding: 20,
+    background: 'var(--paper-2)',
+    color: 'var(--ink)',
+    border: '1px solid var(--emerald-soft)',
+    borderLeft: '3px solid var(--emerald)',
+    borderRadius: 'var(--r-lg)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-md)',
+    boxShadow: 'var(--sh-xs)',
+  },
+  resultOkTitle: {
+    fontFamily: 'var(--font-display)',
+    fontWeight: 700,
+    fontSize: 'var(--t-xl)',
+    color: 'var(--ink)',
+    margin: 0,
+    letterSpacing: '-0.01em',
   },
   resultErr: {
-    padding: 14,
-    background: '#fef2f2',
-    color: '#991b1b',
-    border: '1px solid #fecaca',
-    borderRadius: 6,
+    padding: '12px 14px',
+    background: 'var(--danger-soft)',
+    color: 'var(--danger)',
+    border: '1px solid var(--danger-soft)',
+    borderRadius: 'var(--r-md)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+  },
+  pluginsLink: {
+    color: 'var(--emerald-deep)',
+    textDecoration: 'underline',
+    textDecorationColor: 'var(--emerald-soft)',
+    textUnderlineOffset: 3,
   },
 };
 
@@ -113,11 +182,17 @@ export function InstallConfirm({
   if (installed) {
     return (
       <div role="status" style={styles.resultOk}>
-        <strong>“{listingName}” installed.</strong>
-        <p style={{ margin: '8px 0 0' }}>
-          The plugin is in the <code>installed</code> state under the
-          slug <code>{installed}</code>. Visit the{' '}
-          <Link href="/plugins">plugins list</Link> to activate it.
+        <p style={styles.resultOkTitle}>
+          “{listingName}” <em className="italic-accent">installed</em>.
+        </p>
+        <p style={{ margin: '12px 0 0' }}>
+          The plugin is in the <code style={styles.metaMono}>installed</code>{' '}
+          state under the slug{' '}
+          <code style={styles.metaMono}>{installed}</code>. Visit the{' '}
+          <Link href="/plugins" style={styles.pluginsLink}>
+            plugins list
+          </Link>{' '}
+          to activate it.
         </p>
       </div>
     );
@@ -129,11 +204,14 @@ export function InstallConfirm({
     <div data-testid="install-confirm">
       <div style={styles.meta}>
         <div style={styles.metaRow}>
-          <strong>Listing:</strong> {listingName} ({slug})
+          <span style={styles.metaLabel}>Listing</span>
+          <span style={styles.metaValue}>{listingName}</span>
+          <code style={styles.metaMono}>({slug})</code>
         </div>
         {versionLabel ? (
           <div style={styles.metaRow}>
-            <strong>Version:</strong> <code>{versionLabel}</code>
+            <span style={styles.metaLabel}>Version</span>
+            <code style={styles.metaMono}>{versionLabel}</code>
           </div>
         ) : null}
       </div>
@@ -165,9 +243,7 @@ export function InstallConfirm({
           {submitting ? 'Installing…' : 'Install plugin'}
         </button>
         {!acknowledged ? (
-          <span
-            style={{ fontSize: 13, color: 'var(--color-text-muted, #6b7280)' }}
-          >
+          <span style={styles.consentHint}>
             Tick the consent box above to enable Install.
           </span>
         ) : null}
diff --git a/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/page.tsx b/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/page.tsx
index c011b079..66c791fa 100644
--- a/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/page.tsx
+++ b/apps/admin/src/app/(authenticated)/marketplace/[slug]/install/page.tsx
@@ -8,6 +8,13 @@
  * CapabilityReview.tsx) — we deliberately don't duplicate the
  * consent surface so a manifest's capability description reads the
  * same regardless of how the operator reached this screen.
+ *
+ * Brand
+ * =====
+ * Headline uses the brand's italic-accent pattern: "Install <name>." —
+ * the listing name swaps to Instrument Serif italic. Crumb + lead
+ * share the emerald-deep underline and Geist muted lead used across
+ * the marketplace surface.
  */
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
@@ -21,6 +28,26 @@ import type { PluginManifest } from '../../../plugins/types';
 
 export const dynamic = 'force-dynamic';
 
+const backLinkStyle = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  gap: 4,
+  marginBottom: 18,
+  fontFamily: 'var(--font-sans)',
+  fontSize: 'var(--t-sm)',
+  color: 'var(--emerald-deep)',
+  textDecoration: 'underline',
+  textDecorationColor: 'var(--emerald-soft)',
+  textUnderlineOffset: 3,
+} as const;
+
+const leadLinkStyle = {
+  color: 'var(--emerald-deep)',
+  textDecoration: 'underline',
+  textDecorationColor: 'var(--emerald-soft)',
+  textUnderlineOffset: 3,
+} as const;
+
 /**
  * Light-touch parse of the version's manifest JSON into the shape the
  * shared CapabilityReview understands. Mirrors the parsing in the
@@ -79,10 +106,23 @@ export default async function MarketplaceInstallPage({
     if (error === 'not_found') notFound();
     return (
       <section>
-        <p style={{ marginBottom: 12 }}>
-          <Link href="/marketplace">← Back to marketplace</Link>
-        </p>
-        <div role="alert">Couldn’t load listing ({error ?? 'unknown'}).</div>
+        <Link href="/marketplace" style={backLinkStyle}>
+          ← Back to marketplace
+        </Link>
+        <div
+          role="alert"
+          style={{
+            padding: '12px 14px',
+            background: 'var(--warning-soft)',
+            color: 'var(--warning)',
+            border: '1px solid var(--warning-soft)',
+            borderRadius: 'var(--r-md)',
+            fontFamily: 'var(--font-sans)',
+            fontSize: 'var(--t-sm)',
+          }}
+        >
+          Couldn&apos;t load listing ({error ?? 'unknown'}).
+        </div>
       </section>
     );
   }
@@ -91,27 +131,40 @@ export default async function MarketplaceInstallPage({
 
   return (
     <section>
-      <p style={{ marginBottom: 12 }}>
-        <Link href={`/marketplace/${encodeURIComponent(slug)}`}>
-          ← Back to {listing.name}
-        </Link>
-      </p>
-      <h1 style={{ marginTop: 0, fontSize: 22, fontWeight: 600 }}>
-        Install {listing.name}
-      </h1>
-      <p
-        style={{
-          margin: '4px 0 20px',
-          color: 'var(--color-text-muted, #6b7280)',
-          fontSize: 14,
-          maxWidth: 720,
-        }}
+      <Link
+        href={`/marketplace/${encodeURIComponent(slug)}`}
+        style={backLinkStyle}
       >
-        Review the capabilities this plugin requests. The host applies
-        these grants once the install completes; you can revoke them at
-        any time from the{' '}
-        <Link href="/plugins">plugins list</Link> by uninstalling.
-      </p>
+        ← Back to {listing.name}
+      </Link>
+      <header style={{ marginBottom: 28 }}>
+        <span className="eyebrow">Capability review</span>
+        <h1
+          className="h1"
+          style={{
+            margin: '8px 0 0',
+            fontSize: 'clamp(36px, 4.5vw, 52px)',
+            lineHeight: 0.95,
+          }}
+        >
+          Install <em className="italic-accent">{listing.name}</em>.
+        </h1>
+        <p
+          className="lead"
+          style={{
+            margin: '12px 0 0',
+            maxWidth: 640,
+          }}
+        >
+          Review the capabilities this plugin requests. The host applies
+          these grants once the install completes; you can revoke them at
+          any time from the{' '}
+          <Link href="/plugins" style={leadLinkStyle}>
+            plugins list
+          </Link>{' '}
+          by uninstalling.
+        </p>
+      </header>
       <InstallConfirm
         slug={listing.slug}
         listingName={listing.name}
diff --git a/apps/admin/src/app/(authenticated)/plugins/components/CapabilityReview.tsx b/apps/admin/src/app/(authenticated)/plugins/components/CapabilityReview.tsx
index eb4cb419..a8e811fb 100644
--- a/apps/admin/src/app/(authenticated)/plugins/components/CapabilityReview.tsx
+++ b/apps/admin/src/app/(authenticated)/plugins/components/CapabilityReview.tsx
@@ -28,6 +28,15 @@
  *    auto-tick it — defaulting consent to true would defeat the
  *    purpose of the screen.
  *
+ *  - Brand: each capability row is its own `--paper-2` card with the
+ *    canonical hairline border. Sensitive rows swap to a `--lavender`
+ *    accent — the secondary brand colour, signalling "look here". An
+ *    emerald checkmark appears once the consent box is ticked,
+ *    confirming the row has been reviewed alongside the panel. Both
+ *    treatments stay accessible: the row carries a data attribute,
+ *    `aria-label`s spell out the risk, and the marker is text not
+ *    colour.
+ *
  * Pure-ish: takes a manifest's `capabilities` array, renders the
  * review UI, and emits the acknowledgement state via the controlled
  * `onAcknowledgeChange` callback. No side effects; no fetch.
@@ -48,53 +57,94 @@ import {
 
 const styles: Record<string, CSSProperties> = {
   panel: {
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    background: 'var(--color-surface, #ffffff)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
+    background: 'var(--paper-2)',
     overflow: 'hidden',
+    boxShadow: 'var(--sh-xs)',
   },
   panelHeader: {
-    padding: '12px 16px',
-    background: '#f9fafb',
-    borderBottom: '1px solid var(--color-border, #e4e6ea)',
+    padding: '16px 20px',
+    background: 'var(--paper)',
+    borderBottom: '1px solid var(--border)',
   },
   panelTitle: {
     margin: 0,
-    fontSize: 16,
+    fontFamily: 'var(--font-sans)',
     fontWeight: 600,
+    fontSize: 'var(--t-lg)',
+    color: 'var(--ink)',
+    letterSpacing: '-0.005em',
   },
   panelSubtitle: {
     margin: '4px 0 0',
-    fontSize: 13,
-    color: 'var(--color-text-muted, #6b7280)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--fg-muted)',
   },
   empty: {
-    padding: '20px 16px',
-    color: 'var(--color-text-muted, #6b7280)',
-    fontSize: 14,
+    padding: '24px 20px',
+    color: 'var(--fg-muted)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
   },
   list: {
     listStyle: 'none',
     margin: 0,
-    padding: 0,
+    padding: '12px',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: 8,
   },
   row: {
     display: 'flex',
     alignItems: 'flex-start',
     gap: 12,
-    padding: '12px 16px',
-    borderTop: '1px solid var(--color-border, #e4e6ea)',
+    padding: '14px 16px',
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-md)',
+    transition: 'border-color var(--dur) var(--ease)',
   },
   rowSensitive: {
-    background: '#fff7ed',
+    background: 'var(--lavender-soft)',
+    borderColor: 'var(--lavender-soft)',
   },
   rowUnknown: {
-    background: '#fef9c3',
+    background: 'var(--warning-soft)',
+    borderColor: 'var(--warning-soft)',
   },
   marker: {
-    fontSize: 18,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: 22,
+    height: 22,
+    borderRadius: 999,
+    fontFamily: 'var(--font-sans)',
+    fontWeight: 700,
+    fontSize: 12,
     lineHeight: 1,
-    marginTop: 2,
+    flex: '0 0 auto',
+    marginTop: 1,
+  },
+  markerLow: {
+    background: 'var(--paper)',
+    color: 'var(--fg-muted)',
+    border: '1px solid var(--border)',
+  },
+  markerSensitive: {
+    background: 'var(--lavender)',
+    color: '#ffffff',
+  },
+  markerUnknown: {
+    background: 'var(--warning)',
+    color: '#ffffff',
+  },
+  markerConsented: {
+    background: 'var(--emerald)',
+    color: 'var(--emerald-ink)',
+    border: '1px solid var(--emerald)',
   },
   body: {
     flex: 1,
@@ -102,57 +152,105 @@ const styles: Record<string, CSSProperties> = {
   },
   human: {
     margin: 0,
-    fontSize: 14,
+    fontFamily: 'var(--font-sans)',
     fontWeight: 500,
-    color: 'var(--color-text, #1c2024)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
   },
   meta: {
-    marginTop: 4,
-    fontSize: 12,
-    color: 'var(--color-text-muted, #6b7280)',
+    marginTop: 6,
     display: 'flex',
     flexWrap: 'wrap',
-    gap: 8,
+    gap: 6,
+    alignItems: 'center',
   },
-  tag: {
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 4,
+  capId: {
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-xs)',
+    color: 'var(--fg-muted)',
+    background: 'var(--paper)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-xs)',
     padding: '1px 6px',
-    background: '#ffffff',
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
   },
-  warnTag: {
-    border: '1px solid #fdba74',
-    background: '#ffedd5',
-    color: '#9a3412',
-    borderRadius: 4,
+  tagSensitive: {
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-2xs)',
+    color: 'var(--lavender-deep)',
+    background: 'var(--paper)',
+    border: '1px solid var(--lavender)',
+    borderRadius: 'var(--r-xs)',
+    padding: '1px 6px',
+    fontWeight: 600,
+    letterSpacing: '0.04em',
+    textTransform: 'uppercase',
+  },
+  tagUnknown: {
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-2xs)',
+    color: 'var(--warning)',
+    background: 'var(--paper)',
+    border: '1px solid var(--warning)',
+    borderRadius: 'var(--r-xs)',
     padding: '1px 6px',
     fontWeight: 600,
+    letterSpacing: '0.04em',
+    textTransform: 'uppercase',
   },
   footer: {
-    padding: '12px 16px',
-    borderTop: '1px solid var(--color-border, #e4e6ea)',
-    background: '#fafafa',
+    padding: '14px 20px',
+    borderTop: '1px solid var(--border)',
+    background: 'var(--paper)',
     display: 'flex',
     alignItems: 'flex-start',
     gap: 12,
   },
   checkbox: {
-    marginTop: 2,
+    marginTop: 3,
+    width: 16,
+    height: 16,
+    accentColor: 'var(--emerald)',
+    cursor: 'pointer',
   },
   consentText: {
     flex: 1,
-    fontSize: 13,
-    color: 'var(--color-text, #1c2024)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
     margin: 0,
+    cursor: 'pointer',
+  },
+  consentHelp: {
+    display: 'block',
+    marginTop: 4,
+    color: 'var(--fg-muted)',
+    fontSize: 'var(--t-xs)',
   },
 };
 
-function markerFor(risk: CapabilityRisk, unknown: boolean): string {
+function markerSymbol(risk: CapabilityRisk, unknown: boolean, acknowledged: boolean): string {
+  if (acknowledged && !unknown) return '✓';
   if (unknown) return '!';
   return risk === 'sensitive' ? '!' : '·';
 }
 
+function markerStyle(
+  risk: CapabilityRisk,
+  unknown: boolean,
+  acknowledged: boolean,
+): CSSProperties {
+  if (acknowledged && !unknown) {
+    return { ...styles.marker, ...styles.markerConsented };
+  }
+  if (unknown) {
+    return { ...styles.marker, ...styles.markerUnknown };
+  }
+  if (risk === 'sensitive') {
+    return { ...styles.marker, ...styles.markerSensitive };
+  }
+  return { ...styles.marker, ...styles.markerLow };
+}
+
 export interface CapabilityReviewProps {
   /** Capability ids declared by the candidate manifest, in order. */
   capabilities: readonly string[];
@@ -222,18 +320,21 @@ export function CapabilityReview({
                 data-capability-id={cap.id}
                 data-capability-risk={cap.risk}
               >
-                <span aria-hidden="true" style={styles.marker}>
-                  {markerFor(cap.risk, isUnknown)}
+                <span
+                  aria-hidden="true"
+                  style={markerStyle(cap.risk, isUnknown, acknowledged)}
+                >
+                  {markerSymbol(cap.risk, isUnknown, acknowledged)}
                 </span>
                 <div style={styles.body}>
                   <p style={styles.human}>{cap.human}</p>
                   <div style={styles.meta}>
-                    <span style={styles.tag}>{cap.id}</span>
+                    <span style={styles.capId}>{cap.id}</span>
                     {cap.risk === 'sensitive' ? (
-                      <span style={styles.warnTag}>Sensitive</span>
+                      <span style={styles.tagSensitive}>Sensitive</span>
                     ) : null}
                     {isUnknown ? (
-                      <span style={styles.warnTag}>Unrecognised</span>
+                      <span style={styles.tagUnknown}>Unrecognised</span>
                     ) : null}
                   </div>
                 </div>
@@ -257,14 +358,7 @@ export function CapabilityReview({
         <label htmlFor="capabilities_acknowledged" style={styles.consentText}>
           <strong>I’ve reviewed the capabilities above</strong> and accept that
           this plugin will be granted them once installed.
-          <span
-            id="capabilities_acknowledged_help"
-            style={{
-              display: 'block',
-              marginTop: 2,
-              color: 'var(--color-text-muted, #6b7280)',
-            }}
-          >
+          <span id="capabilities_acknowledged_help" style={styles.consentHelp}>
             You can uninstall the plugin from the plugins list at any time to
             revoke these permissions.
           </span>

From ae0880bd10c76ed9d0adeb527eb31ab4bffaba5d Mon Sep 17 00:00:00 2001
From: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
Date: Mon, 25 May 2026 15:58:27 +0200
Subject: [PATCH 4/4] feat(admin/plugins): restyle installed-plugins list +
 status badge
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Apply the "Living systems" brand to /plugins:
the page head reads "Installed plugins." with the italic-serif accent
on "plugins" and an emerald-deep eyebrow. The Install CTA is the ink-
fill primary button so it reads as the dominant action. Status filter
chips swap to emerald-soft when active; the toolbar lives in a paper-2
card with the canonical hairline border. The plugins table sits in a
paper-2 card with paper-3 column headers and `--border-subtle` row
hairlines. Action buttons get cream chips with `--sh-xs`; the Uninstall
button keeps its danger-soft border. Feedback toasts swap legacy blue
to emerald-soft success; modals lift to `--sh-lg` on a paper background.

PluginStatusBadge now maps state→tokens directly off tokens.css:
emerald-soft/emerald-deep for active (alive), paper-3/fg-muted for
inactive (quietly present), lavender-soft/lavender-deep for installed,
warning-soft/warning for pending_uninstall, danger-soft/danger for
errored. Adds a leading pulse dot in `currentColor` so the row is
legible without colour.

Tests: update the badge palette assertion to inspect the unparsed
`background` shorthand (jsdom can't resolve CSS vars to colours).
Adds snapshot tests for MarketplaceCard and all five PluginStatusBadge
states so the brand contract is locked in.

Tokens used: --paper, --paper-2, --paper-3, --emerald-soft,
--emerald-deep, --lavender-soft, --lavender-deep, --warning,
--warning-soft, --danger, --danger-soft, --ink, --border,
--border-subtle, --fg-muted, --fg-subtle, --font-display,
--font-serif, --font-sans, --font-mono, --t-xs, --t-sm, --t-xl,
--r-sm, --r-md, --r-lg, --r-pill, --sh-xs, --sh-lg.

Signed-off-by: Mohamed Tayeb Mokni <tayeb.mokni@gmail.com>
---
 .../components/MarketplaceCard.test.tsx       |  62 ++++
 .../MarketplaceCard.test.tsx.snap             | 114 +++++++
 .../plugins/PluginListClient.tsx              | 288 +++++++++++-------
 .../PluginStatusBadge.snap.test.tsx           |  29 ++
 .../components/PluginStatusBadge.test.tsx     |  20 +-
 .../plugins/components/PluginStatusBadge.tsx  |  69 ++++-
 .../PluginStatusBadge.snap.test.tsx.snap      |  81 +++++
 7 files changed, 539 insertions(+), 124 deletions(-)
 create mode 100644 apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.test.tsx
 create mode 100644 apps/admin/src/app/(authenticated)/marketplace/components/__snapshots__/MarketplaceCard.test.tsx.snap
 create mode 100644 apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.snap.test.tsx
 create mode 100644 apps/admin/src/app/(authenticated)/plugins/components/__snapshots__/PluginStatusBadge.snap.test.tsx.snap

diff --git a/apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.test.tsx b/apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.test.tsx
new file mode 100644
index 00000000..d2e3af6c
--- /dev/null
+++ b/apps/admin/src/app/(authenticated)/marketplace/components/MarketplaceCard.test.tsx
@@ -0,0 +1,62 @@
+/**
+ * MarketplaceCard tests.
+ *
+ * Pins the brand-styled card structure: thumb glyph well, icon +
+ * display title + monospace slug, summary, foot with emerald stars
+ * and a lavender-soft capability chip. Includes a snapshot of the
+ * full rendered tree so the brand contract is locked in — a future
+ * style drift will fail the snapshot and demand a deliberate update.
+ */
+import { describe, expect, it } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { MarketplaceCard } from './MarketplaceCard';
+import type { ListingCard } from '../types';
+
+const SAMPLE: ListingCard = {
+  id: 'ccc',
+  slug: 'akismet-clone',
+  name: 'Akismet Clone',
+  summary: 'Comment spam filtering for sites that hum.',
+  primary_category: 'antispam',
+  stars: 4.5,
+  rating_count: 22,
+  install_count: 1500,
+  created_at: '2026-05-01T00:00:00Z',
+};
+
+describe('MarketplaceCard', () => {
+  it('links to the listing detail page and exposes the listing slug', () => {
+    render(<MarketplaceCard listing={SAMPLE} />);
+    const link = screen.getByTestId('marketplace-card');
+    expect(link).toHaveAttribute('href', '/marketplace/akismet-clone');
+    expect(link).toHaveAttribute('data-listing-slug', 'akismet-clone');
+  });
+
+  it('renders the display title, monospace slug, summary, and meta row', () => {
+    render(<MarketplaceCard listing={SAMPLE} />);
+    expect(screen.getByText('Akismet Clone')).toBeInTheDocument();
+    expect(screen.getByText('akismet-clone')).toBeInTheDocument();
+    expect(
+      screen.getByText(/comment spam filtering for sites that hum/i),
+    ).toBeInTheDocument();
+    expect(screen.getByText('antispam')).toBeInTheDocument();
+    expect(screen.getByText('1,500 installs')).toBeInTheDocument();
+    // Rating stars: read-only display widget with the right aria-label.
+    expect(screen.getByTestId('rating-stars-display')).toHaveAttribute(
+      'aria-label',
+      '4.5 out of 5 stars',
+    );
+  });
+
+  it('falls back to a soft empty-summary line when no summary is provided', () => {
+    render(
+      <MarketplaceCard listing={{ ...SAMPLE, summary: '' }} />,
+    );
+    expect(screen.getByText(/no tagline yet/i)).toBeInTheDocument();
+  });
+
+  it('uses the brand tokens for the card surface (snapshot)', () => {
+    const { asFragment } = render(<MarketplaceCard listing={SAMPLE} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
diff --git a/apps/admin/src/app/(authenticated)/marketplace/components/__snapshots__/MarketplaceCard.test.tsx.snap b/apps/admin/src/app/(authenticated)/marketplace/components/__snapshots__/MarketplaceCard.test.tsx.snap
new file mode 100644
index 00000000..06e5e724
--- /dev/null
+++ b/apps/admin/src/app/(authenticated)/marketplace/components/__snapshots__/MarketplaceCard.test.tsx.snap
@@ -0,0 +1,114 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`MarketplaceCard > uses the brand tokens for the card surface (snapshot) 1`] = `
+<DocumentFragment>
+  <a
+    class="marketplace-card"
+    data-listing-slug="akismet-clone"
+    data-testid="marketplace-card"
+    href="/marketplace/akismet-clone"
+    style="display: flex; flex-direction: column; background: var(--paper-2); border: 1px solid var(--border); border-radius: var(--r-lg); text-decoration: none; color: var(--ink); box-shadow: var(--sh-xs); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); overflow: hidden; min-height: 220px;"
+  >
+    <div
+      aria-hidden="true"
+      style="aspect-ratio: 16 / 9; background: var(--paper-3); border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;"
+    >
+      <span
+        style="font-family: var(--font-display); font-weight: 800; font-size: 56px; letter-spacing: -0.04em; line-height: 1; color: var(--emerald-deep);"
+      >
+        A
+      </span>
+    </div>
+    <div
+      style="padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; flex: 1 1 0%;"
+    >
+      <div
+        style="display: flex; align-items: flex-start; gap: 12px;"
+      >
+        <span
+          aria-hidden="true"
+          style="width: 36px; height: 36px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--paper); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--emerald-deep); flex: 0 0 auto;"
+        >
+          A
+        </span>
+        <div
+          style="min-width: 0; flex: 1 1 0%;"
+        >
+          <h3
+            style="margin: 0px; font-family: var(--font-display); font-weight: 600; font-size: var(--t-lg); letter-spacing: -0.005em; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;"
+          >
+            Akismet Clone
+          </h3>
+          <p
+            style="margin: 2px 0px 0px; font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-subtle);"
+          >
+            akismet-clone
+          </p>
+        </div>
+      </div>
+      <p
+        style="margin: 0px; font-family: var(--font-sans); font-size: var(--t-sm); line-height: 1.5; color: var(--fg-muted); display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;"
+      >
+        Comment spam filtering for sites that hum.
+      </p>
+      <div
+        style="display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border);"
+      >
+        <span
+          aria-label="4.5 out of 5 stars"
+          data-testid="rating-stars-display"
+          role="img"
+          style="display: inline-flex; align-items: center; gap: 2px; color: var(--emerald-deep); font-size: 14px; line-height: 1;"
+        >
+          <span
+            aria-hidden="true"
+            style="display: inline-block; width: 1.1em; text-align: center;"
+          >
+            ★
+          </span>
+          <span
+            aria-hidden="true"
+            style="display: inline-block; width: 1.1em; text-align: center;"
+          >
+            ★
+          </span>
+          <span
+            aria-hidden="true"
+            style="display: inline-block; width: 1.1em; text-align: center;"
+          >
+            ★
+          </span>
+          <span
+            aria-hidden="true"
+            style="display: inline-block; width: 1.1em; text-align: center;"
+          >
+            ★
+          </span>
+          <span
+            aria-hidden="true"
+            style="display: inline-block; width: 1.1em; text-align: center;"
+          >
+            ★
+          </span>
+          <span
+            aria-hidden="true"
+            style="margin-left: 6px; font-family: var(--font-mono); color: var(--fg-subtle); font-size: var(--t-xs);"
+          >
+            (22)
+          </span>
+        </span>
+        <span
+          style="display: inline-flex; align-items: center; padding: 2px 8px; border-radius: var(--r-sm); background: var(--lavender-soft); color: var(--lavender-deep); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500;"
+        >
+          antispam
+        </span>
+        <span
+          style="font-family: var(--font-mono); font-size: var(--t-xs); color: var(--fg-subtle);"
+        >
+          1,500 installs
+        </span>
+      </div>
+    </div>
+  </a>
+</DocumentFragment>
+`;
diff --git a/apps/admin/src/app/(authenticated)/plugins/PluginListClient.tsx b/apps/admin/src/app/(authenticated)/plugins/PluginListClient.tsx
index 55234bc4..cfadb7ff 100644
--- a/apps/admin/src/app/(authenticated)/plugins/PluginListClient.tsx
+++ b/apps/admin/src/app/(authenticated)/plugins/PluginListClient.tsx
@@ -19,19 +19,22 @@
  *    disabled state on the activate button with a hover hint, instead
  *    of letting the operator click into a guaranteed failure
  *
- * Lives next to the server `page.tsx` like other admin lists. The
- * primitive styling matches UsersList — Tailwind + the design system
- * land in the broader admin-design issue (#34); for now inline styles
- * keep the screen self-contained and trivially reviewable.
+ * Lives next to the server `page.tsx` like other admin lists.
+ *
+ * Brand
+ * =====
+ * Page head uses the "Installed plugins." headline pattern — Archivo
+ * display weight with an italic-serif accent on "plugins". The
+ * primary CTA (Install plugin) is the ink-fill brand button to read
+ * as the dominant action on the screen. Status chips and badges share
+ * the emerald/lavender/danger semantics defined in tokens.css.
+ * Tables sit on paper-2 with sunken paper-3 header rows; row hover
+ * lifts to paper-3 to mark the hovered row.
  *
  * Why not `<ResourceList>` from #332: that shell is shaped around
- * generic CRUD rows (search, filters, sort, bulk actions, selection).
- * The plugin list needs the same toolbar shape but the per-row buttons
- * (Activate / Deactivate / Uninstall) are domain-specific and the
- * uninstall confirmation modal is too. Wiring everything through
- * `ResourceList` columns + `bulkActions` would add more glue than it
- * removes; revisit once a second domain (plugins + themes) shares
- * enough of the row UX to justify the consolidation.
+ * generic CRUD rows. The plugin list needs the same toolbar shape but
+ * the per-row buttons (Activate / Deactivate / Uninstall) are
+ * domain-specific and the uninstall confirmation modal is too.
  *
  * Tests live in PluginListClient.test.tsx; they exercise rendering,
  * filtering, the confirmation flow, and the activate-blocked path.
@@ -71,180 +74,252 @@ const STATUS_OPTIONS: ReadonlyArray<{ value: StatusFilter; label: string }> = [
 const styles: Record<string, CSSProperties> = {
   header: {
     display: 'flex',
-    alignItems: 'center',
+    alignItems: 'flex-end',
     justifyContent: 'space-between',
     gap: 16,
-    marginBottom: 16,
+    marginBottom: 24,
+  },
+  headerMain: {
+    flex: 1,
+    minWidth: 0,
+  },
+  eyebrow: {
+    display: 'inline-block',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    fontWeight: 500,
+    letterSpacing: '0.12em',
+    textTransform: 'uppercase',
+    color: 'var(--emerald-deep)',
+    marginBottom: 4,
+  },
+  title: {
+    margin: 0,
+    fontFamily: 'var(--font-display)',
+    fontWeight: 800,
+    fontSize: 'clamp(40px, 5vw, 56px)',
+    lineHeight: 0.95,
+    letterSpacing: '-0.03em',
+    color: 'var(--ink)',
   },
-  title: { margin: 0, fontSize: 20, fontWeight: 600 },
   installBtn: {
     display: 'inline-flex',
     alignItems: 'center',
     gap: 6,
-    background: 'var(--color-accent, #2563eb)',
-    color: '#ffffff',
-    border: 0,
-    borderRadius: 6,
-    padding: '8px 14px',
+    background: 'var(--ink)',
+    color: 'var(--paper)',
+    border: '1px solid var(--ink)',
+    borderRadius: 'var(--r-md)',
+    padding: '10px 18px',
+    fontFamily: 'var(--font-sans)',
     fontWeight: 500,
-    fontSize: 14,
+    fontSize: 'var(--t-sm)',
     textDecoration: 'none',
+    boxShadow: 'var(--sh-xs)',
+    transition:
+      'background var(--dur) var(--ease), border-color var(--dur) var(--ease)',
   },
   toolbar: {
     display: 'flex',
     flexWrap: 'wrap',
     gap: 12,
-    marginBottom: 12,
-    padding: 12,
-    background: 'var(--color-surface, #ffffff)',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
+    marginBottom: 16,
+    padding: 14,
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
+    boxShadow: 'var(--sh-xs)',
   },
   searchInput: {
     flex: '1 1 240px',
     minWidth: 200,
-    padding: '6px 10px',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    fontSize: 14,
+    padding: '8px 12px',
+    background: 'var(--paper)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-md)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
+    outline: 'none',
+  },
+  chipGroup: {
+    display: 'inline-flex',
+    flexWrap: 'wrap',
+    gap: 6,
+    alignItems: 'center',
   },
-  chipGroup: { display: 'inline-flex', flexWrap: 'wrap', gap: 8 },
   chip: {
-    background: 'transparent',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 999,
-    padding: '4px 12px',
-    fontSize: 13,
-    color: 'var(--color-text, #1c2024)',
+    background: 'var(--paper)',
+    borderWidth: 1,
+    borderStyle: 'solid',
+    borderColor: 'var(--border)',
+    borderRadius: 'var(--r-pill)',
+    padding: '5px 12px',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    fontWeight: 500,
+    color: 'var(--fg-muted)',
     cursor: 'pointer',
+    transition:
+      'background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease)',
   },
   chipActive: {
-    background: 'var(--color-accent, #2563eb)',
-    color: '#ffffff',
-    border: '1px solid var(--color-accent, #2563eb)',
-    borderRadius: 999,
-    padding: '4px 12px',
-    fontSize: 13,
-    cursor: 'pointer',
+    background: 'var(--emerald-soft)',
+    color: 'var(--emerald-deep)',
+    borderColor: 'var(--emerald-soft)',
   },
   tableWrap: {
-    background: 'var(--color-surface, #ffffff)',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
     overflow: 'hidden',
+    boxShadow: 'var(--sh-xs)',
   },
   table: {
     width: '100%',
     borderCollapse: 'collapse',
-    fontSize: 14,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
   },
   th: {
     textAlign: 'left',
-    padding: '10px 12px',
+    padding: '12px 14px',
     fontWeight: 600,
-    color: 'var(--color-text-muted, #6b7280)',
-    background: '#fafafa',
-    borderBottom: '1px solid var(--color-border, #e4e6ea)',
-    fontSize: 12,
+    color: 'var(--fg-subtle)',
+    background: 'var(--paper-3)',
+    borderBottom: '1px solid var(--border)',
+    fontSize: 'var(--t-xs)',
     textTransform: 'uppercase',
     letterSpacing: '0.04em',
   },
   td: {
-    padding: '12px',
-    borderBottom: '1px solid var(--color-border, #e4e6ea)',
+    padding: '14px',
+    borderBottom: '1px solid var(--border-subtle)',
     verticalAlign: 'middle',
+    color: 'var(--ink)',
   },
   nameLink: {
+    fontFamily: 'var(--font-sans)',
     fontWeight: 500,
-    color: 'var(--color-text, #1c2024)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
     textDecoration: 'none',
   },
   versionMono: {
-    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, monospace',
-    fontSize: 13,
-    color: 'var(--color-text-muted, #6b7280)',
+    fontFamily: 'var(--font-mono)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--fg-muted)',
   },
   actions: { display: 'inline-flex', gap: 8 },
   actionBtn: {
-    background: '#ffffff',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    padding: '4px 10px',
-    fontSize: 13,
+    background: 'var(--paper)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-sm)',
+    padding: '5px 12px',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    fontWeight: 500,
+    color: 'var(--ink)',
     cursor: 'pointer',
+    boxShadow: 'var(--sh-xs)',
   },
   destructive: {
-    background: '#ffffff',
-    border: '1px solid #fecaca',
-    borderRadius: 6,
-    padding: '4px 10px',
-    fontSize: 13,
-    color: '#991b1b',
+    background: 'var(--paper)',
+    border: '1px solid var(--danger-soft)',
+    borderRadius: 'var(--r-sm)',
+    padding: '5px 12px',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    fontWeight: 500,
+    color: 'var(--danger)',
     cursor: 'pointer',
   },
   actionDisabled: { opacity: 0.45, cursor: 'not-allowed' },
   empty: {
-    padding: '40px 16px',
+    padding: '48px 16px',
     textAlign: 'center',
-    color: 'var(--color-text-muted, #6b7280)',
+    color: 'var(--fg-muted)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
   },
   errorBanner: {
-    padding: '10px 12px',
+    padding: '12px 14px',
     marginBottom: 12,
-    border: '1px solid #fecaca',
-    background: '#fef2f2',
-    color: '#991b1b',
-    borderRadius: 6,
-    fontSize: 13,
+    border: '1px solid var(--danger-soft)',
+    background: 'var(--danger-soft)',
+    color: 'var(--danger)',
+    borderRadius: 'var(--r-md)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
   },
   actionFeedback: {
-    padding: '10px 12px',
+    padding: '12px 14px',
     marginBottom: 12,
-    border: '1px solid #bfdbfe',
-    background: '#eff6ff',
-    color: '#1e3a8a',
-    borderRadius: 6,
-    fontSize: 13,
+    border: '1px solid var(--emerald-soft)',
+    background: 'var(--emerald-soft)',
+    color: 'var(--emerald-deep)',
+    borderRadius: 'var(--r-md)',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
   },
   modalBackdrop: {
     position: 'fixed',
     inset: 0,
-    background: 'rgba(15, 23, 42, 0.5)',
+    background: 'rgba(14, 26, 20, 0.55)',
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     zIndex: 50,
   },
   modal: {
-    background: '#ffffff',
-    borderRadius: 8,
+    background: 'var(--paper)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-lg)',
     width: 'min(440px, 90vw)',
-    padding: 20,
-    boxShadow: '0 24px 48px rgba(15, 23, 42, 0.25)',
+    padding: 24,
+    boxShadow: 'var(--sh-lg)',
+  },
+  modalTitle: {
+    margin: 0,
+    fontFamily: 'var(--font-display)',
+    fontWeight: 700,
+    fontSize: 'var(--t-xl)',
+    letterSpacing: '-0.01em',
+    color: 'var(--ink)',
+  },
+  modalBody: {
+    marginTop: 8,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    lineHeight: 1.5,
+    color: 'var(--ink-soft)',
   },
-  modalTitle: { margin: 0, fontSize: 18, fontWeight: 600 },
-  modalBody: { marginTop: 8, fontSize: 14, color: 'var(--color-text, #1c2024)' },
   modalActions: {
-    marginTop: 16,
+    marginTop: 18,
     display: 'flex',
     justifyContent: 'flex-end',
     gap: 8,
   },
   cancelBtn: {
-    background: '#ffffff',
-    border: '1px solid var(--color-border, #e4e6ea)',
-    borderRadius: 6,
-    padding: '6px 14px',
-    fontSize: 14,
+    background: 'var(--paper-2)',
+    border: '1px solid var(--border)',
+    borderRadius: 'var(--r-md)',
+    padding: '8px 16px',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    color: 'var(--ink)',
     cursor: 'pointer',
+    boxShadow: 'var(--sh-xs)',
   },
   confirmDestructive: {
-    background: '#dc2626',
-    color: '#ffffff',
-    border: 0,
-    borderRadius: 6,
-    padding: '6px 14px',
-    fontSize: 14,
+    background: 'var(--danger)',
+    color: 'var(--paper)',
+    border: '1px solid var(--danger)',
+    borderRadius: 'var(--r-md)',
+    padding: '8px 16px',
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-sm)',
+    fontWeight: 500,
     cursor: 'pointer',
   },
 };
@@ -347,7 +422,12 @@ export function PluginListClient({
   return (
     <section>
       <div style={styles.header}>
-        <h1 style={styles.title}>Plugins</h1>
+        <div style={styles.headerMain}>
+          <span style={styles.eyebrow}>Plugins — sandboxed extensions</span>
+          <h1 style={styles.title}>
+            Installed <em className="italic-accent">plugins</em>.
+          </h1>
+        </div>
         <Link href="/plugins/install" style={styles.installBtn}>
           Install plugin
         </Link>
@@ -389,7 +469,7 @@ export function PluginListClient({
                 type="button"
                 aria-pressed={active}
                 onClick={() => setStatusFilter(opt.value)}
-                style={active ? styles.chipActive : styles.chip}
+                style={active ? { ...styles.chip, ...styles.chipActive } : styles.chip}
               >
                 {opt.label}
               </button>
diff --git a/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.snap.test.tsx b/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.snap.test.tsx
new file mode 100644
index 00000000..7fd95ad3
--- /dev/null
+++ b/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.snap.test.tsx
@@ -0,0 +1,29 @@
+/**
+ * Snapshot pins for the brand-styled PluginStatusBadge.
+ *
+ * Each state renders with its canonical token palette (emerald-soft
+ * for active, paper-3 for inactive, danger-soft for errored, etc.).
+ * Locking the rendered tree means a future palette drift fails the
+ * snapshot and forces a deliberate update.
+ */
+import { describe, expect, it } from 'vitest';
+import { render } from '@testing-library/react';
+import { PluginStatusBadge } from './PluginStatusBadge';
+import type { PluginState } from '../types';
+
+const STATES: PluginState[] = [
+  'active',
+  'inactive',
+  'installed',
+  'pending_uninstall',
+  'errored',
+];
+
+describe('PluginStatusBadge snapshots', () => {
+  for (const state of STATES) {
+    it(`pins the brand-styled badge for state=${state}`, () => {
+      const { asFragment } = render(<PluginStatusBadge state={state} />);
+      expect(asFragment()).toMatchSnapshot();
+    });
+  }
+});
diff --git a/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.test.tsx b/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.test.tsx
index 76771822..6ab72619 100644
--- a/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.test.tsx
+++ b/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.test.tsx
@@ -34,12 +34,18 @@ describe('PluginStatusBadge', () => {
         <PluginStatusBadge state="errored" />
       </div>,
     );
-    const active = screen.getByText(/^active$/i);
-    const errored = screen.getByText(/^errored$/i);
-    expect((active as HTMLElement).style.backgroundColor).toBeTruthy();
-    expect((errored as HTMLElement).style.backgroundColor).toBeTruthy();
-    expect((active as HTMLElement).style.backgroundColor).not.toBe(
-      (errored as HTMLElement).style.backgroundColor,
-    );
+    // Brand tokens land as CSS variables, which jsdom's style parser
+    // can't resolve to a concrete colour. Assert the per-state styling
+    // diverges via the (unparsed) `background` shorthand string and
+    // the data-state attribute the badge carries.
+    const active = screen
+      .getByLabelText(/status: active/i) as HTMLElement;
+    const errored = screen
+      .getByLabelText(/status: errored/i) as HTMLElement;
+    expect(active.dataset.state).toBe('active');
+    expect(errored.dataset.state).toBe('errored');
+    expect(active.style.background).toBeTruthy();
+    expect(errored.style.background).toBeTruthy();
+    expect(active.style.background).not.toBe(errored.style.background);
   });
 });
diff --git a/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.tsx b/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.tsx
index d9b0d04e..b0468793 100644
--- a/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.tsx
+++ b/apps/admin/src/app/(authenticated)/plugins/components/PluginStatusBadge.tsx
@@ -1,9 +1,19 @@
 /**
  * Small colored pill that renders the current lifecycle state for a
  * plugin. The colour scheme matches the rest of the admin status
- * badges (UsersList, PostListClient) — green for healthy, amber for
- * transitional, red for errored — so an operator scanning the list
- * sees a consistent semantic.
+ * badges — emerald for active (alive), fg-muted for inactive (quiet
+ * but installed), warning for transitional, and danger for errored —
+ * so an operator scanning the list sees a consistent semantic.
+ *
+ * Brand
+ * =====
+ * Uses the canonical "Living systems" semantic palette directly off
+ * the design tokens, mirroring how `.tag--emerald`, `.tag--warning`,
+ * and `.tag--danger` are defined in tokens.css. Active plugins glow
+ * emerald-soft / emerald-deep — the alive/positive treatment shared
+ * with the marketplace surface. Inactive plugins land on paper-3 with
+ * `--fg-muted` to read as quietly present, not absent. Errored
+ * plugins use danger-soft / danger so they stand out without shouting.
  *
  * Pure: state in / span out. Lives in `components/` so the list and
  * detail screens can share it without round-tripping through a client
@@ -16,11 +26,31 @@ import type { CSSProperties, ReactElement } from 'react';
 import type { PluginState } from '../types';
 
 const PALETTE: Record<PluginState, { bg: string; fg: string; label: string }> = {
-  installed: { bg: '#e0e7ff', fg: '#3730a3', label: 'Installed' },
-  active: { bg: '#dcfce7', fg: '#166534', label: 'Active' },
-  inactive: { bg: '#f3f4f6', fg: '#4b5563', label: 'Inactive' },
-  pending_uninstall: { bg: '#fef3c7', fg: '#92400e', label: 'Uninstalling…' },
-  errored: { bg: '#fee2e2', fg: '#991b1b', label: 'Errored' },
+  installed: {
+    bg: 'var(--lavender-soft)',
+    fg: 'var(--lavender-deep)',
+    label: 'Installed',
+  },
+  active: {
+    bg: 'var(--emerald-soft)',
+    fg: 'var(--emerald-deep)',
+    label: 'Active',
+  },
+  inactive: {
+    bg: 'var(--paper-3)',
+    fg: 'var(--fg-muted)',
+    label: 'Inactive',
+  },
+  pending_uninstall: {
+    bg: 'var(--warning-soft)',
+    fg: 'var(--warning)',
+    label: 'Uninstalling…',
+  },
+  errored: {
+    bg: 'var(--danger-soft)',
+    fg: 'var(--danger)',
+    label: 'Errored',
+  },
 };
 
 export interface PluginStatusBadgeProps {
@@ -32,14 +62,26 @@ export function PluginStatusBadge({
 }: PluginStatusBadgeProps): ReactElement {
   const spec = PALETTE[state];
   const style: CSSProperties = {
-    display: 'inline-block',
-    padding: '2px 8px',
-    borderRadius: 999,
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: 6,
+    padding: '2px 10px',
+    borderRadius: 'var(--r-pill)',
     background: spec.bg,
     color: spec.fg,
-    fontSize: 12,
-    fontWeight: 600,
+    fontFamily: 'var(--font-sans)',
+    fontSize: 'var(--t-xs)',
+    fontWeight: 500,
     letterSpacing: '0.01em',
+    lineHeight: 1.4,
+  };
+  const dotStyle: CSSProperties = {
+    width: 6,
+    height: 6,
+    borderRadius: 999,
+    background: 'currentColor',
+    opacity: 0.9,
+    flex: '0 0 auto',
   };
   return (
     <span
@@ -47,6 +89,7 @@ export function PluginStatusBadge({
       style={style}
       aria-label={`Status: ${spec.label}`}
     >
+      <span aria-hidden="true" style={dotStyle} />
       {spec.label}
     </span>
   );
diff --git a/apps/admin/src/app/(authenticated)/plugins/components/__snapshots__/PluginStatusBadge.snap.test.tsx.snap b/apps/admin/src/app/(authenticated)/plugins/components/__snapshots__/PluginStatusBadge.snap.test.tsx.snap
new file mode 100644
index 00000000..a2ac59ea
--- /dev/null
+++ b/apps/admin/src/app/(authenticated)/plugins/components/__snapshots__/PluginStatusBadge.snap.test.tsx.snap
@@ -0,0 +1,81 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`PluginStatusBadge snapshots > pins the brand-styled badge for state=active 1`] = `
+<DocumentFragment>
+  <span
+    aria-label="Status: Active"
+    data-state="active"
+    style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--emerald-soft); color: var(--emerald-deep); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4;"
+  >
+    <span
+      aria-hidden="true"
+      style="width: 6px; height: 6px; border-radius: 999px; background: currentcolor; opacity: 0.9; flex: 0 0 auto;"
+    />
+    Active
+  </span>
+</DocumentFragment>
+`;
+
+exports[`PluginStatusBadge snapshots > pins the brand-styled badge for state=errored 1`] = `
+<DocumentFragment>
+  <span
+    aria-label="Status: Errored"
+    data-state="errored"
+    style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--danger-soft); color: var(--danger); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4;"
+  >
+    <span
+      aria-hidden="true"
+      style="width: 6px; height: 6px; border-radius: 999px; background: currentcolor; opacity: 0.9; flex: 0 0 auto;"
+    />
+    Errored
+  </span>
+</DocumentFragment>
+`;
+
+exports[`PluginStatusBadge snapshots > pins the brand-styled badge for state=inactive 1`] = `
+<DocumentFragment>
+  <span
+    aria-label="Status: Inactive"
+    data-state="inactive"
+    style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--paper-3); color: var(--fg-muted); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4;"
+  >
+    <span
+      aria-hidden="true"
+      style="width: 6px; height: 6px; border-radius: 999px; background: currentcolor; opacity: 0.9; flex: 0 0 auto;"
+    />
+    Inactive
+  </span>
+</DocumentFragment>
+`;
+
+exports[`PluginStatusBadge snapshots > pins the brand-styled badge for state=installed 1`] = `
+<DocumentFragment>
+  <span
+    aria-label="Status: Installed"
+    data-state="installed"
+    style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--lavender-soft); color: var(--lavender-deep); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4;"
+  >
+    <span
+      aria-hidden="true"
+      style="width: 6px; height: 6px; border-radius: 999px; background: currentcolor; opacity: 0.9; flex: 0 0 auto;"
+    />
+    Installed
+  </span>
+</DocumentFragment>
+`;
+
+exports[`PluginStatusBadge snapshots > pins the brand-styled badge for state=pending_uninstall 1`] = `
+<DocumentFragment>
+  <span
+    aria-label="Status: Uninstalling…"
+    data-state="pending_uninstall"
+    style="display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--warning-soft); color: var(--warning); font-family: var(--font-sans); font-size: var(--t-xs); font-weight: 500; letter-spacing: 0.01em; line-height: 1.4;"
+  >
+    <span
+      aria-hidden="true"
+      style="width: 6px; height: 6px; border-radius: 999px; background: currentcolor; opacity: 0.9; flex: 0 0 auto;"
+    />
+    Uninstalling…
+  </span>
+</DocumentFragment>
+`;