@hirobius/design-system 0.22.0 → 0.23.0

package/public/hds-manifest.json

@@ -2,7 +2,7 @@
   "name": "Hirobius Design System",
   "description": "Three-tier design token system for Adrian Milsap's portfolio site. Tokens flow primitive → semantic → component. All visual decisions trace back to hirobius.tokens.json.",
   "version": "1",
-  "generated": "2026-10-07T17:58:53.026Z",
+  "generated": "2026-10-09T05:30:51.055Z",
   "source": "hirobius.tokens.json",
   "format": "W3C DTCG 2025.10",
   "docs": "https://hirobius-design-system.vercel.app/",
@@ -28,7 +28,7 @@
     "consumeTypography": "hds.typeStyles.h1 (inline style object) — never Tailwind font classes"
   },
   "brand": {
-    "primaryColor": "#111111",
+    "primaryColor": "#66b239",
     "primaryColorToken": "semantic.accent.rest",
     "font": "Satoshi variable 100–900, self-hosted",
     "spacingBase": "4px",
@@ -399,6 +399,7 @@
       },
       "consumers": [
         "src/app/components/badge.tsx",
+        "src/app/components/callout.tsx",
         "src/app/components/dialog.tsx",
         "src/app/components/empty-state.tsx",
         "src/app/components/toast.tsx",
@@ -622,7 +623,10 @@
         "primitives-code-block--default",
         "primitives-code-block--inline",
         "primitives-code-block--json-highlighting"
-      ]
+      ],
+      "usage": {
+        "when": "Show a code sample with a copy button, optionally collapsed."
+      }
     },
     "Container": {
       "category": "Layout",
@@ -951,7 +955,7 @@
         "primitives-divider--with-spacing"
       ],
       "usage": {
-        "when": "Separate two regions of content with a thin semantic rule.",
+        "when": "Separate two blocks of content with a thin line.",
         "whenNot": "Spacing alone would do, or the separation needs a container.",
         "useInstead": [
           {
@@ -1059,7 +1063,10 @@
         "feedback-error-pattern--not-found",
         "feedback-error-pattern--server-error",
         "feedback-error-pattern--unauthorized"
-      ]
+      ],
+      "usage": {
+        "when": "Show an error with a short message and a Back button, in place or as a full page."
+      }
     },
     "Grid": {
       "category": "Layout",
@@ -1234,7 +1241,7 @@
         "primitives-grid--two-column"
       ],
       "usage": {
-        "when": "Lay out content in responsive columns with token-governed gaps, or align nested content with subgrid.",
+        "when": "Lay out content in columns that adapt to the screen width, or line up nested content with subgrid.",
         "whenNot": "A single row or column, or styling a surface.",
         "useInstead": [
           {
@@ -1406,7 +1413,7 @@
         "primitives-icon--size-gallery"
       ],
       "usage": {
-        "when": "Draw a Lucide glyph at a size and colour from the design tokens.",
+        "when": "Show a Lucide icon at a set size and color.",
         "whenNot": "A control someone can activate, or a picture that carries content.",
         "useInstead": [
           {
@@ -1513,6 +1520,7 @@
       },
       "consumers": [
         "src/app/components/button.tsx",
+        "src/app/components/inline-link.test.tsx",
         "src/app/components/text.tsx",
         "src/stories/inline-link.stories.tsx",
         "src/stories/lib/usage-description.test.ts"
@@ -2208,7 +2216,7 @@
         "primitives-stack--tight-gap"
       ],
       "usage": {
-        "when": "Space a row or column of content with token gaps and simple flex alignment.",
+        "when": "Space items in a row or column with even gaps.",
         "whenNot": "Multi-column layout, or giving content a background or padding.",
         "useInstead": [
           {
@@ -2621,7 +2629,7 @@
         "primitives-surface--with-shadow"
       ],
       "usage": {
-        "when": "Wrap content in a padded, background-bearing inset surface with no header or footer anatomy.",
+        "when": "Give a block of content a background and padding, with no header or footer.",
         "whenNot": "Page layout, section spacing, width constraints, or content that needs slots.",
         "useInstead": [
           {
@@ -2654,6 +2662,7 @@
         "src/app/components/destructive-section.tsx",
         "src/app/components/empty-state.tsx",
         "src/app/components/field.tsx",
+        "src/app/components/focus-visible.test.tsx",
         "src/app/components/grid.tsx",
         "src/app/components/metadata-list.tsx",
         "src/app/components/metric-tiles.tsx",
@@ -3518,7 +3527,7 @@
         "primitives-button--tone-matrix"
       ],
       "usage": {
-        "when": "Trigger an action (submit, save, open a dialog) with a text label and optional icons; for an icon-only control pass iconOnly with iconLeft and label; for an on/off toggle pass pressed.",
+        "when": "Run an action, such as submit, save or open a dialog. For an icon-only control pass iconOnly, iconLeft and label; for an on/off toggle pass pressed.",
         "whenNot": "Navigating to another page, where a link is the correct element.",
         "useInstead": [
           {
@@ -3536,7 +3545,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/callout.tsx",
-      "description": "Tone-driven side-rule callout for status, quotes, hypotheses.",
+      "description": "Tone-driven tinted callout for notes, quotes, hypotheses — the same feedback fill language as Alert, without Alert's icon or status role.",
       "figmaUrl": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85",
       "figmaId": null,
       "figmaLink": "https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85",
@@ -3876,7 +3885,10 @@
         "patterns-layout--detail-page",
         "patterns-layout--empty-state-screen",
         "patterns-layout--form-screen"
-      ]
+      ],
+      "usage": {
+        "when": "Wrap a screen in the standard width and padding."
+      }
     },
     "Stat": {
       "category": "Display",
@@ -4472,7 +4484,10 @@
         "primitives-asset-img--lightbox-context",
         "primitives-asset-img--placeholder-fallback",
         "primitives-asset-img--with-title"
-      ]
+      ],
+      "usage": {
+        "when": "Show an image that scales to its frame, with a placeholder if it fails to load."
+      }
     },
     "Tabs": {
       "category": "Navigation",
@@ -4494,6 +4509,7 @@
         "src/app/components/breadcrumb.tsx",
         "src/app/components/disclosure.tsx",
         "src/app/components/segmented-control.tsx",
+        "src/app/components/tabs.test.tsx",
         "src/stories/combobox.stories.tsx",
         "src/stories/patterns-client-detail.stories.tsx",
         "src/stories/tabs.stories.tsx"
@@ -4577,7 +4593,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/tabs.tsx",
-      "description": "Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries `border-b border-border/40` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has `border-b-2 border-transparent -mb-px` at rest. The `-mb-px` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft `bg-accent/5` tint that extends down into TabsContent — the active tab visually \"claims\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).",
+      "description": "Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries `border-b border-border/40` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has `border-b-2 border-transparent -mb-px` at rest. The `-mb-px` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft `bg-accent/5` tint that extends down into TabsContent — the active tab visually \"claims\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE). The trigger's focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -4587,6 +4603,7 @@
         "sizing": "panel"
       },
       "consumers": [
+        "src/app/components/tabs.test.tsx",
         "src/stories/patterns-client-detail.stories.tsx",
         "src/stories/tabs.stories.tsx"
       ],
@@ -4629,7 +4646,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/tabs.tsx",
-      "description": "Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries `border-b border-border/40` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has `border-b-2 border-transparent -mb-px` at rest. The `-mb-px` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft `bg-accent/5` tint that extends down into TabsContent — the active tab visually \"claims\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).",
+      "description": "Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries `border-b border-border/40` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has `border-b-2 border-transparent -mb-px` at rest. The `-mb-px` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft `bg-accent/5` tint that extends down into TabsContent — the active tab visually \"claims\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE). The trigger's focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -4639,6 +4656,7 @@
         "sizing": "panel"
       },
       "consumers": [
+        "src/app/components/tabs.test.tsx",
         "src/stories/patterns-client-detail.stories.tsx",
         "src/stories/tabs.stories.tsx"
       ],
@@ -4678,7 +4696,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/tabs.tsx",
-      "description": "Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries `border-b border-border/40` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has `border-b-2 border-transparent -mb-px` at rest. The `-mb-px` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft `bg-accent/5` tint that extends down into TabsContent — the active tab visually \"claims\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE).",
+      "description": "Tabs — Radix-backed underline tabs (Root, List, Trigger, Content). Underline pattern math: - TabsList carries `border-b border-border/40` (the divider, half-strength so it anchors the strip without competing with content). - TabsTrigger has `border-b-2 border-transparent -mb-px` at rest. The `-mb-px` offsets the trigger DOWN by 1px so the trigger sits on top of the list divider; the active 2px bottom border visually REPLACES that 1px segment instead of stacking on it. - Active state pairs the underline with a soft `bg-accent/5` tint that extends down into TabsContent — the active tab visually \"claims\" its content panel (folder-tab affordance, modern-soft). Overflow: TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`) for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar chrome is hidden cross-browser (-webkit / firefox / IE). The trigger's focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn outside the list box (an outer ring was cut on the first/last tab).",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -4688,6 +4706,7 @@
         "sizing": "panel"
       },
       "consumers": [
+        "src/app/components/tabs.test.tsx",
         "src/stories/patterns-client-detail.stories.tsx",
         "src/stories/tabs.stories.tsx"
       ],
@@ -4734,6 +4753,7 @@
       },
       "consumers": [
         "src/app/components/checkbox.tsx",
+        "src/app/components/focus-visible.test.tsx",
         "src/app/components/radio.test.tsx",
         "src/app/components/segmented-control.tsx",
         "src/app/components/toggle.tsx",
@@ -5037,6 +5057,7 @@
       },
       "consumers": [
         "src/app/components/checkbox.tsx",
+        "src/app/components/focus-visible.test.tsx",
         "src/app/components/radio.tsx",
         "src/app/components/toggle.test.tsx",
         "src/app/hooks/useInteractionState.test.ts",
@@ -5780,7 +5801,7 @@
         },
         {
           "keys": "ArrowDown/ArrowUp",
-          "effect": "Moves the active option and wraps at the ends."
+          "effect": "Moves the active option, skipping disabled ones, and wraps at the ends."
         },
         {
           "keys": "Character",
@@ -5845,7 +5866,10 @@
         "patterns-form--default",
         "patterns-form--with-description",
         "patterns-form--with-error"
-      ]
+      ],
+      "usage": {
+        "when": "Wrap form fields so they stack with even spacing."
+      }
     },
     "FormField": {
       "category": "Inputs",
@@ -6877,6 +6901,9 @@
         "primitives-reveal--animations",
         "primitives-reveal--scale-reveal-scene"
       ],
+      "usage": {
+        "when": "Fade content in as it scrolls into view."
+      },
       "aiRules": "Content is fully visible by DEFAULT; the effect applies only where `animation-timeline` is supported AND the user has not requested reduced motion (both fall back to visible, never stuck hidden). Pick `animation` from the fixed set — do not hand-roll keyframes. For momentum/inertia scrolling wrap the app in `SmoothScroll`; for a scroll-progress value in JS use `useScrollProgress` — both from `@hirobius/design-system/scroll`. See ADR-021."
     },
     "Textarea": {
@@ -6899,6 +6926,7 @@
         "src/app/components/form-control.ts",
         "src/app/components/input.tsx",
         "src/app/components/select.tsx",
+        "src/app/components/textarea.test.tsx",
         "src/stories/patterns-client-detail.stories.tsx",
         "src/stories/textarea.stories.tsx"
       ],
@@ -6974,7 +7002,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/card.tsx",
-      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
+      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). Elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -7021,7 +7049,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/card.tsx",
-      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
+      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). Elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -7068,7 +7096,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/card.tsx",
-      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
+      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). Elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -7115,7 +7143,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/card.tsx",
-      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
+      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). Elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -7246,7 +7274,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/card.tsx",
-      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
+      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). Elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -7316,7 +7344,7 @@
       "hidden": false,
       "docExempt": false,
       "filePath": "src/app/components/card.tsx",
-      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. Depth comes from semantic.color.border.default (role.border) at rest; elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
+      "description": "Card — surface container with slot anatomy (12d-card-anatomy). Slot anatomy (DESIGN.md §\"Card Anatomy\"). Status, progress, and metadata are layout-bearing — they live in slots, never inline next to prose. <Card variant=\"accent\"> <Card.Header metadata={<Badge tone=\"warning\">in-progress</Badge>}> <Card.Title>Discovery phase</Card.Title> <Card.Description>Stakeholder interviews and audit prep.</Card.Description> </Card.Header> <Card.Progress value={42} max={100} label=\"5 / 12 tasks\" /> <Card.Metric label=\"Retainer\" value=\"$3,500\" sub=\"Active\" /> <Card.Body>…</Card.Body> <Card.Footer>…</Card.Footer> </Card> Slot reservations: - Header: title (h3) + optional description (caption) + optional metadata zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans). - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its spacing — never crowds adjacent prose. - Metric: single label + big value (title) + optional sub-line. Reserved vertical block. Use multiple side-by-side via flex/grid container. - Body: prose, lists, structured content. NO inline status, progress, or thin colored bars. Group sections via separate <Card.Body> blocks. - Footer: actions, secondary metadata, timestamps. `variant`: 'default' (borderless) | 'accent' (2px accent border) — the structural axis, for highlighted entries like \"recommended package\". `tone`: neutral | danger | success | warning | info — the fixed feedback axis (#60 variant contract), for status-driven cards where the border IS the signal. `variant`/`tone` together replace hand-rolled `pkgHighlight`-style overrides. Legacy props (padding / gap / noPadding / as / style) are retained. Existing callers that pass raw children continue to work; new callers should prefer compound parts + `padding=\"none\"`. The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes from whitespace/dividers, not an edge. A resting 1px border is opt-in via `bordered` (border.default), a feedback `tone`, or `accent` (border.accent). Elevation tokens are not bound by default — pass `className=\"shadow-...\"` for a hover/floating treatment on interactive cards.",
       "figmaUrl": null,
       "figmaId": null,
       "figmaLink": null,
@@ -8140,6 +8168,7 @@
       },
       "consumers": [
         "src/app/components/checkbox.test.tsx",
+        "src/app/components/focus-visible.test.tsx",
         "src/app/components/radio.tsx",
         "src/app/components/toggle.tsx",
         "src/stories/checkbox.stories.tsx"
@@ -8250,7 +8279,10 @@
         "patterns-formactions--sticky",
         "patterns-formactions--with-destructive",
         "patterns-formactions--with-secondary"
-      ]
+      ],
+      "usage": {
+        "when": "Lay out a form's buttons in a fixed order: danger on the left, then secondary, then primary on the right."
+      }
     },
     "MetricTile": {
       "category": "Display",
@@ -8318,7 +8350,10 @@
         "patterns-metrictiles--sub-line-optional",
         "patterns-metrictiles--three-tiles",
         "patterns-metrictiles--tones"
-      ]
+      ],
+      "usage": {
+        "when": "Show one key number with its label, inside a MetricTiles row."
+      }
     },
     "MetricTiles": {
       "category": "Display",
@@ -8370,7 +8405,10 @@
         "patterns-metrictiles--sub-line-optional",
         "patterns-metrictiles--three-tiles",
         "patterns-metrictiles--tones"
-      ]
+      ],
+      "usage": {
+        "when": "Show a row of key numbers, one tile each."
+      }
     },
     "PageHeader": {
       "category": "Layout",
@@ -8437,7 +8475,10 @@
         "patterns-pageheader--nested-level",
         "patterns-pageheader--title-only",
         "patterns-pageheader--with-actions"
-      ]
+      ],
+      "usage": {
+        "when": "Open a screen with its title, plus optional breadcrumb, status and actions."
+      }
     },
     "DataTableSection": {
       "category": "Display",
@@ -8509,7 +8550,10 @@
         "patterns-datatablesection--empty",
         "patterns-datatablesection--phone-390",
         "patterns-datatablesection--without-row-actions"
-      ]
+      ],
+      "usage": {
+        "when": "Put a heading and toolbar above a Table."
+      }
     },
     "DestructiveSection": {
       "category": "Actions",
@@ -8578,7 +8622,10 @@
         "patterns-destructivesection--default",
         "patterns-destructivesection--phone",
         "patterns-destructivesection--separate-button-label"
-      ]
+      ],
+      "usage": {
+        "when": "Put a dangerous action, such as delete, in its own section with a warning and a confirm step."
+      }
     },
     "HdsRouterProvider": {
       "category": "Theming",
@@ -9334,6 +9381,83 @@
         "description": "Specific value within the green range at a defined lightness step.",
         "value": "#022c22"
       },
+      {
+        "path": "primitive.color.apple.50",
+        "cssVar": "--primitive-color-apple-50",
+        "type": "color",
+        "description": "Apple-green accent tint — faintest step.",
+        "value": "#f2faeb"
+      },
+      {
+        "path": "primitive.color.apple.100",
+        "cssVar": "--primitive-color-apple-100",
+        "type": "color",
+        "description": "Apple-green accent — very light tint.",
+        "value": "#e2f3cf"
+      },
+      {
+        "path": "primitive.color.apple.200",
+        "cssVar": "--primitive-color-apple-200",
+        "type": "color",
+        "description": "Apple-green accent — light tint.",
+        "value": "#c7e7a4"
+      },
+      {
+        "path": "primitive.color.apple.300",
+        "cssVar": "--primitive-color-apple-300",
+        "type": "color",
+        "description": "Apple-green accent — soft mid-light step.",
+        "value": "#a6d873"
+      },
+      {
+        "path": "primitive.color.apple.400",
+        "cssVar": "--primitive-color-apple-400",
+        "type": "color",
+        "description": "Apple-green accent — bright step; dark-mode rest accent.",
+        "value": "#85c84c"
+      },
+      {
+        "path": "primitive.color.apple.500",
+        "cssVar": "--primitive-color-apple-500",
+        "type": "color",
+        "description": "Apple-green accent rest — bright, rich apple green; AA for dark (neutral.900) text as a fill.",
+        "value": "#66b239"
+      },
+      {
+        "path": "primitive.color.apple.600",
+        "cssVar": "--primitive-color-apple-600",
+        "type": "color",
+        "description": "Apple-green accent — hover / border step.",
+        "value": "#54922d"
+      },
+      {
+        "path": "primitive.color.apple.700",
+        "cssVar": "--primitive-color-apple-700",
+        "type": "color",
+        "description": "Apple-green accent — pressed and accent-intent text (AA for text on page and card surfaces).",
+        "value": "#416f20"
+      },
+      {
+        "path": "primitive.color.apple.800",
+        "cssVar": "--primitive-color-apple-800",
+        "type": "color",
+        "description": "Apple-green accent — deep step.",
+        "value": "#34571b"
+      },
+      {
+        "path": "primitive.color.apple.900",
+        "cssVar": "--primitive-color-apple-900",
+        "type": "color",
+        "description": "Apple-green accent — darkest usable step.",
+        "value": "#2b4518"
+      },
+      {
+        "path": "primitive.color.apple.950",
+        "cssVar": "--primitive-color-apple-950",
+        "type": "color",
+        "description": "Apple-green accent — near-black green substrate.",
+        "value": "#16250c"
+      },
       {
         "path": "primitive.color.violet.50",
         "cssVar": "--primitive-color-violet-50",
@@ -9726,8 +9850,8 @@
         "path": "primitive.typography.family.mono",
         "cssVar": "--primitive-typography-family-mono",
         "type": "fontFamily",
-        "description": "Monospace face: Geist Mono. Falls back to Courier New, monospace.",
-        "value": "\"Geist Mono\", \"Courier New\", monospace"
+        "description": "Monospace face: IBM Plex Mono. Falls back to Courier New, monospace.",
+        "value": "\"IBM Plex Mono\", \"Courier New\", monospace"
       },
       {
         "path": "primitive.typography.size.xs",
@@ -10303,12 +10427,12 @@
         "path": "semantic.color.surface.accent",
         "cssVar": "--semantic-color-surface-accent",
         "type": "color",
-        "description": "Accent-colored background (neutral/monochrome; inverts to a light neutral on dark surfaces).",
-        "alias": "{primitive.color.neutral.900}",
-        "resolvedValue": "#111111",
+        "description": "Accent-colored background — bright apple green (stays green on dark surfaces; pair with content.onAccent dark text).",
+        "alias": "{primitive.color.apple.500}",
+        "resolvedValue": "#66b239",
         "dark": {
-          "alias": "{primitive.color.neutral.100}",
-          "resolvedValue": "#f5f5f5"
+          "alias": "{primitive.color.apple.400}",
+          "resolvedValue": "#85c84c"
         }
       },
       {
@@ -10316,11 +10440,11 @@
         "cssVar": "--semantic-color-surface-accentSubtle",
         "type": "color",
         "description": "Faint accent tint for hover states or highlights",
-        "alias": "{primitive.color.neutral.100}",
-        "resolvedValue": "#f5f5f5",
+        "alias": "{primitive.color.apple.50}",
+        "resolvedValue": "#f2faeb",
         "dark": {
-          "alias": "{primitive.color.neutral.900}",
-          "resolvedValue": "#111111"
+          "alias": "{primitive.color.apple.900}",
+          "resolvedValue": "#2b4518"
         }
       },
       {
@@ -10431,21 +10555,21 @@
         "path": "semantic.color.content.accent",
         "cssVar": "--semantic-color-content-accent",
         "type": "color",
-        "description": "Accent-intent text/icon color (monochrome). Pair with underline/weight for link affordance.",
-        "alias": "{primitive.color.neutral.900}",
-        "resolvedValue": "#111111",
+        "description": "Accent-intent text/icon color — a dark apple green legible on page and card surfaces. Pair with underline/weight for link affordance.",
+        "alias": "{primitive.color.apple.700}",
+        "resolvedValue": "#416f20",
         "dark": {
-          "alias": "{primitive.color.neutral.100}",
-          "resolvedValue": "#f5f5f5"
+          "alias": "{primitive.color.apple.400}",
+          "resolvedValue": "#85c84c"
         }
       },
       {
         "path": "semantic.color.content.onAccent",
         "cssVar": "--semantic-color-content-onAccent",
         "type": "color",
-        "description": "Text/icon color on accent fills. Flips to a dark neutral in dark mode, where accent fills are light.",
-        "alias": "{primitive.color.neutral.white}",
-        "resolvedValue": "#ffffff",
+        "description": "Text/icon color on accent fills — a dark neutral, since the brand accent fill is a bright apple green in both light and dark mode.",
+        "alias": "{primitive.color.neutral.900}",
+        "resolvedValue": "#111111",
         "dark": {
           "alias": "{primitive.color.neutral.900}",
           "resolvedValue": "#111111"
@@ -10548,12 +10672,12 @@
         "path": "semantic.color.border.accent",
         "cssVar": "--semantic-color-border-accent",
         "type": "color",
-        "description": "Accent border (neutral/monochrome; inverts on dark surfaces).",
-        "alias": "{primitive.color.neutral.900}",
-        "resolvedValue": "#111111",
+        "description": "Accent border — apple green, dark enough to read as a boundary on page and card surfaces.",
+        "alias": "{primitive.color.apple.600}",
+        "resolvedValue": "#54922d",
         "dark": {
-          "alias": "{primitive.color.neutral.100}",
-          "resolvedValue": "#f5f5f5"
+          "alias": "{primitive.color.apple.400}",
+          "resolvedValue": "#85c84c"
         }
       },
       {
@@ -11055,7 +11179,7 @@
         "type": "typography",
         "description": "Code and ids. 13px / 1.5 / 400. The mono companion, role 6 of 6.",
         "composite": {
-          "fontFamily": "\"Geist Mono\", \"Courier New\", monospace",
+          "fontFamily": "\"IBM Plex Mono\", \"Courier New\", monospace",
           "fontSize": "13px",
           "fontWeight": "400",
           "letterSpacing": "0em",
@@ -11151,12 +11275,12 @@
         "path": "semantic.accent.rest",
         "cssVar": "--semantic-accent-rest",
         "type": "color",
-        "description": "Default accent fill for interactive elements at rest. Neutral (monochrome) accent — inverts to a light neutral on dark surfaces.",
-        "alias": "{primitive.color.neutral.900}",
-        "resolvedValue": "#111111",
+        "description": "Default accent fill for interactive elements at rest — bright apple green. Pair with content.onAccent (a dark neutral).",
+        "alias": "{primitive.color.apple.500}",
+        "resolvedValue": "#66b239",
         "dark": {
-          "alias": "{primitive.color.neutral.100}",
-          "resolvedValue": "#f5f5f5"
+          "alias": "{primitive.color.apple.400}",
+          "resolvedValue": "#85c84c"
         }
       },
       {
@@ -11164,11 +11288,11 @@
         "cssVar": "--semantic-accent-hover",
         "type": "color",
         "description": "Accent fill on pointer hover.",
-        "alias": "{primitive.color.neutral.800}",
-        "resolvedValue": "#262626",
+        "alias": "{primitive.color.apple.600}",
+        "resolvedValue": "#54922d",
         "dark": {
-          "alias": "{primitive.color.neutral.200}",
-          "resolvedValue": "#e5e5e5"
+          "alias": "{primitive.color.apple.500}",
+          "resolvedValue": "#66b239"
         }
       },
       {
@@ -11176,11 +11300,11 @@
         "cssVar": "--semantic-accent-pressed",
         "type": "color",
         "description": "Accent fill during active press.",
-        "alias": "{primitive.color.neutral.950}",
-        "resolvedValue": "#0a0a0a",
+        "alias": "{primitive.color.apple.700}",
+        "resolvedValue": "#416f20",
         "dark": {
-          "alias": "{primitive.color.neutral.300}",
-          "resolvedValue": "#d4d4d4"
+          "alias": "{primitive.color.apple.600}",
+          "resolvedValue": "#54922d"
         }
       },
       {
@@ -11211,12 +11335,12 @@
         "path": "semantic.accent.content",
         "cssVar": "--semantic-accent-content",
         "type": "color",
-        "description": "Text and icon color on neutral surfaces with accent intent. Monochrome — pair with underline/weight for link affordance.",
-        "alias": "{primitive.color.neutral.900}",
-        "resolvedValue": "#111111",
+        "description": "Accent-intent text/icon color on neutral surfaces (a dark apple green) — pair with underline/weight for link affordance.",
+        "alias": "{primitive.color.apple.700}",
+        "resolvedValue": "#416f20",
         "dark": {
-          "alias": "{primitive.color.neutral.100}",
-          "resolvedValue": "#f5f5f5"
+          "alias": "{primitive.color.apple.400}",
+          "resolvedValue": "#85c84c"
         }
       },
       {
@@ -11224,11 +11348,11 @@
         "cssVar": "--semantic-accent-contentHover",
         "type": "color",
         "description": "Accent content color on pointer hover.",
-        "alias": "{primitive.color.neutral.700}",
-        "resolvedValue": "#404040",
+        "alias": "{primitive.color.apple.800}",
+        "resolvedValue": "#34571b",
         "dark": {
-          "alias": "{primitive.color.neutral.300}",
-          "resolvedValue": "#d4d4d4"
+          "alias": "{primitive.color.apple.300}",
+          "resolvedValue": "#a6d873"
         }
       },
       {
@@ -11236,11 +11360,11 @@
         "cssVar": "--semantic-accent-subtle",
         "type": "color",
         "description": "Low-emphasis accent tint for hover backgrounds and selection highlights.",
-        "alias": "{primitive.color.neutral.100}",
-        "resolvedValue": "#f5f5f5",
+        "alias": "{primitive.color.apple.50}",
+        "resolvedValue": "#f2faeb",
         "dark": {
-          "alias": "{primitive.color.neutral.800}",
-          "resolvedValue": "#262626"
+          "alias": "{primitive.color.apple.900}",
+          "resolvedValue": "#2b4518"
         }
       },
       {
@@ -11476,7 +11600,7 @@
         "type": "color",
         "description": "Nav item background fill when active or selected.",
         "alias": "{semantic.accent.subtle}",
-        "resolvedValue": "#f5f5f5"
+        "resolvedValue": "#f2faeb"
       },
       {
         "path": "component.nav.borderActive",
@@ -11484,7 +11608,7 @@
         "type": "color",
         "description": "Nav item border color when active or selected.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#66b239"
       },
       {
         "path": "component.nav.text",
@@ -11532,7 +11656,7 @@
         "type": "color",
         "description": "Base tag surface color.",
         "alias": "{semantic.accent.subtle}",
-        "resolvedValue": "#f5f5f5"
+        "resolvedValue": "#f2faeb"
       },
       {
         "path": "component.tag.text",
@@ -11620,7 +11744,7 @@
         "type": "color",
         "description": "Text color when the tag is active.",
         "alias": "{semantic.color.content.onAccent}",
-        "resolvedValue": "#ffffff"
+        "resolvedValue": "#111111"
       },
       {
         "path": "component.tag.activeBackground",
@@ -11628,7 +11752,7 @@
         "type": "color",
         "description": "Active tag fill color.",
         "alias": "{semantic.accent.rest}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#66b239"
       },
       {
         "path": "component.tag.activeBorder",
@@ -11636,7 +11760,7 @@
         "type": "color",
         "description": "Active tag border color.",
         "alias": "{semantic.accent.rest}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#66b239"
       },
       {
         "path": "component.tag.activeHover",
@@ -11644,7 +11768,7 @@
         "type": "color",
         "description": "Active tag hover fill color.",
         "alias": "{semantic.accent.hover}",
-        "resolvedValue": "#262626"
+        "resolvedValue": "#54922d"
       },
       {
         "path": "component.badge.fontSize",
@@ -11728,7 +11852,7 @@
         "type": "color",
         "description": "Primary button fill.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#66b239"
       },
       {
         "path": "component.button.bgHover",
@@ -11736,7 +11860,7 @@
         "type": "color",
         "description": "Primary button hover fill.",
         "alias": "{semantic.accent.hover}",
-        "resolvedValue": "#262626"
+        "resolvedValue": "#54922d"
       },
       {
         "path": "component.button.text",
@@ -11744,7 +11868,7 @@
         "type": "color",
         "description": "Primary button text color.",
         "alias": "{semantic.color.content.onAccent}",
-        "resolvedValue": "#ffffff"
+        "resolvedValue": "#111111"
       },
       {
         "path": "component.button.radius",
@@ -11920,7 +12044,7 @@
         "type": "color",
         "description": "Disabled primary button text color.",
         "alias": "{semantic.color.content.onAccent}",
-        "resolvedValue": "#ffffff",
+        "resolvedValue": "#111111",
         "dark": {
           "alias": "{semantic.color.content.disabled}",
           "resolvedValue": "#d4d4d4"
@@ -11932,7 +12056,7 @@
         "type": "color",
         "description": "Disabled primary button fill.",
         "alias": "{semantic.color.surface.accentSubtle}",
-        "resolvedValue": "#f5f5f5"
+        "resolvedValue": "#f2faeb"
       },
       {
         "path": "component.button.secondary.bg.rest",
@@ -12162,7 +12286,7 @@
         "type": "color",
         "description": "Primary action surface. shadcn role: primary.",
         "alias": "{semantic.color.surface.accent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#66b239"
       },
       {
         "path": "role.primary-foreground",
@@ -12170,7 +12294,7 @@
         "type": "color",
         "description": "Text/icons on primary surface. shadcn role: primary-foreground.",
         "alias": "{semantic.color.content.onAccent}",
-        "resolvedValue": "#ffffff"
+        "resolvedValue": "#111111"
       },
       {
         "path": "role.secondary",
@@ -12210,7 +12334,7 @@
         "type": "color",
         "description": "Hover/active tinted bg. shadcn role: accent.",
         "alias": "{semantic.color.surface.accentSubtle}",
-        "resolvedValue": "#f5f5f5"
+        "resolvedValue": "#f2faeb"
       },
       {
         "path": "role.accent-foreground",
@@ -12218,7 +12342,7 @@
         "type": "color",
         "description": "Text on accent surface. shadcn role: accent-foreground.",
         "alias": "{semantic.color.content.accent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#416f20"
       },
       {
         "path": "role.destructive",
@@ -12258,7 +12382,7 @@
         "type": "color",
         "description": "Focus ring color. shadcn role: ring.",
         "alias": "{semantic.color.border.accent}",
-        "resolvedValue": "#111111"
+        "resolvedValue": "#54922d"
       },
       {
         "path": "role.radius",
@@ -12269,5 +12393,39 @@
         "resolvedValue": "8px"
       }
     ]
-  }
+  },
+  "publicClasses": [
+    "hds-alert",
+    "hds-alert--danger",
+    "hds-alert--info",
+    "hds-alert--success",
+    "hds-alert--warning",
+    "hds-alert--with-title",
+    "hds-alert__body",
+    "hds-alert__icon",
+    "hds-alert__title",
+    "hds-badge",
+    "hds-badge--danger",
+    "hds-badge--in-progress",
+    "hds-badge--info",
+    "hds-badge--neutral",
+    "hds-badge--success",
+    "hds-badge--warning",
+    "hds-card",
+    "hds-card--accent",
+    "hds-card--bordered",
+    "hds-card--danger",
+    "hds-card--info",
+    "hds-card--no-padding",
+    "hds-card--success",
+    "hds-card--warning",
+    "hds-divider",
+    "hds-divider--horizontal",
+    "hds-divider--strong",
+    "hds-divider--vertical",
+    "hds-focus",
+    "hds-tag",
+    "hds-tag--active",
+    "hds-tag__pill"
+  ]
 }