diff --git a/.agents/skills/openclaw-carapace/SKILL.md b/.agents/skills/openclaw-carapace/SKILL.md
new file mode 100644
index 00000000..1ce217d0
--- /dev/null
+++ b/.agents/skills/openclaw-carapace/SKILL.md
@@ -0,0 +1,44 @@
+---
+name: openclaw-carapace
+description: Build or modify OpenClaw application UI using canonical semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives. Use for product interfaces, component styling, theme work, or design-token integration.
+---
+
+# Carapace
+
+Use the shared package for foundations and framework-neutral visual primitives.
+Keep consumer-specific behavior, data, routes, and layout composition local.
+
+## Workflow
+
+1. Read [tokens.md](references/tokens.md) before choosing colors, spacing, type, radii, or shadows.
+2. Read [consumer-adapters.md](references/consumer-adapters.md) for the current framework.
+3. Read [application-surfaces.md](references/application-surfaces.md) when working on shells, panes, settings, or operational screens.
+4. Inspect the consumer's existing shared primitives before creating a component.
+5. Use semantic tokens for UI intent; use palette primitives only for documented exceptions.
+6. Keep application behavior, routes, and information architecture unchanged unless the task says otherwise.
+7. Validate the affected routes with existing tests and real browser screenshots.
+
+## Interface Rules
+
+- Import the complete CSS contract or its focused exported entry points.
+- Compose shared classes from `components.css` before adding a one-off visual implementation.
+- Use local shared primitives before raw controls or one-off component implementations.
+- Keep one primary action per decision area.
+- Use familiar icons for icon-only commands and provide accessible names.
+- Use status colors for status, warning, success, error, and informational meaning.
+- Keep cards, controls, and repeated fixed-format elements dimensionally stable.
+- Avoid nested decorative cards and page sections styled as floating cards.
+- Keep surfaces, controls, and insets square through their semantic radius tokens.
+- Reserve round geometry for avatars, status dots, and other truly circular indicators.
+- Keep focus, hover, active, disabled, loading, and invalid states coherent.
+- Keep text within its container at supported viewport sizes.
+- Prefer dense, scan-friendly composition for operational product surfaces.
+- Share application anatomy across consumers without forcing web and native
+  implementations into pixel-identical layouts.
+
+## Ownership
+
+Move visual implementation into this repository when its interface is
+framework-neutral and useful across consumers. Keep runtime behavior and
+framework adapters local until at least two consumers need the same interface
+and behavior.
diff --git a/.agents/skills/openclaw-carapace/references/application-surfaces.md b/.agents/skills/openclaw-carapace/references/application-surfaces.md
new file mode 100644
index 00000000..ded18ce4
--- /dev/null
+++ b/.agents/skills/openclaw-carapace/references/application-surfaces.md
@@ -0,0 +1,152 @@
+# Application Surfaces
+
+Carapace provides framework-neutral anatomy for compact application shells,
+panes, settings, model controls, and focused utility windows. Consumers keep
+routing, data, persistence, window management, and interaction behavior.
+
+## Shared Contract
+
+Import the candidate application layer after the stable component and candidate
+control entry points:
+
+```css
+@import "@openclaw/carapace/components.css";
+@import "@openclaw/carapace/themes/product.css";
+@import "@openclaw/carapace/candidate/controls.css";
+@import "@openclaw/carapace/candidate/feedback.css";
+@import "@openclaw/carapace/candidate/application.css";
+```
+
+Compose the contract from these roles:
+
+- `.oc-app-frame` separates primary navigation from collection and operations
+  screens that genuinely need global navigation.
+- `.oc-app-content` contains the route-owned surface below global chrome.
+- `.oc-page-header` names the current route and holds route-level actions when
+  the route needs an introduction.
+- `.oc-pane` provides bounded header, body, and footer regions.
+- `.oc-master-detail`, `.oc-master-pane`, `.oc-detail-pane`,
+  `.oc-app-resource-list`, and `.oc-activity-list` support repeated operational
+  inspection without turning every datum into a card.
+- `.oc-settings-shell`, `.oc-settings-navigation`, `.oc-settings-detail`, and
+  `.oc-detail-header` create a settings takeover with local navigation and a
+  focused detail canvas.
+- `.oc-settings-section`, `.oc-settings-group`, and `.oc-settings-row` create
+  dense, scan-friendly preference screens.
+- `.oc-chat-shell`, `.oc-workspace-grid`, `.oc-workspace-sessions`,
+  `.oc-workspace-conversation`, and `.oc-workspace-inspector` create a
+  session-oriented working surface without duplicating the global app shell.
+- `.oc-model-controls`, `.oc-model-picker`, `.oc-model-menu`, and
+  `.oc-model-speed-toggle` keep model, provider, reasoning, and speed controls
+  beside the composer.
+- `.oc-session-toolbar`, `.oc-session-table`, and `.oc-session-cell` support
+  dense session management.
+- `.oc-quick-chat` composes captured context, response state, and the shared
+  model controls into a focused utility surface.
+- `.oc-status` presents compact operational state with text and a semantic
+  indicator.
+- `.oc-summary-strip` and `.oc-summary-metric` lead a collection with stable
+  key metrics; `.oc-session-badges`, `.oc-owner-chip`, `.oc-unread-dot`, and
+  `.oc-run-spinner` carry row-scale signals.
+- `.oc-split`, `.oc-split-pane`, `.oc-panel-tab-strip`, and
+  `.oc-split-divider` compose docked two-pane work surfaces; resize behavior
+  stays consumer-owned.
+- `.oc-log-stream` renders dense diagnostic rows with level, time,
+  subsystem, and message columns.
+- `.oc-menu-panel` structures the tray or menu-bar dropdown: identity,
+  usage meters, session shortcuts, and footer actions.
+- `.oc-option-card` renders setup choices as real radio labels;
+  `.oc-connect` is the shared pairing and sign-in surface.
+- `.oc-command-palette` provides the shared command dialog anatomy.
+- `.oc-hovercard` and `.oc-lightbox` cover anchored reference context and
+  single-attachment inspection.
+- `.oc-table-toolbar`, `.oc-table-bulk-bar`, `.oc-table-sort`, and
+  `.oc-table-footer` (candidate data layer) extend collection tables with
+  search, selection, sorting, and pagination chrome.
+
+The agent entry point (`candidate/agent.css`) owns approval prompts
+(`.oc-approval-card`, `.oc-approval-queue`) and transcript anatomy:
+`.oc-tool-kv`, `.oc-json-collapse`, `.oc-work-group`, `.oc-turn-recap`,
+`.oc-compaction`, and `.oc-activity-indicator`. Approval policy, transport,
+and expansion behavior stay consumer-owned.
+
+Use existing controls such as `.oc-switch`, `.oc-input`, `.oc-select`,
+`.oc-segmented`, `.oc-action`, and `.oc-badge` inside these compositions. Do not
+create application-specific replacements for controls already in Carapace.
+
+## Composition Rules
+
+- Use global navigation only for route collections. Settings and chat are
+  takeover surfaces and should not carry a second redundant shell.
+- Local rails answer what is selected inside a route. Do not merge global and
+  local navigation into one undifferentiated sidebar.
+- Put route-specific filters and actions beside the route title or collection
+  they affect. Do not add a persistent toolbar without a repeated global job.
+- Prefer immediate list and detail anatomy over summary KPI slabs. Put health,
+  history, and explanations in the selected detail surface.
+- Give master lists identity, status, and one useful comparison value. Keep
+  editing controls in the selected detail pane.
+- Let the primary task own most of a workspace. Session history and inspectors
+  should stay narrower, hide on constrained widths, and never squeeze the
+  primary content below a usable measure.
+- Set `data-inspector="true|false"` on `.oc-chat-shell` for workspace layouts.
+  Add `data-dock="right|bottom|hidden"` when inspector placement changes;
+  bottom layout is reserved only while an inspector is present.
+- Keep model selection, reasoning, speed, attachment, and send controls in one
+  compact composer toolbar. Provider grouping and recent models belong inside
+  the picker rather than in a separate settings flow.
+- Use bounded groups for related settings, not a card around every row or
+  section. Keep settings navigation visually quieter than the selected detail.
+- Keep common navigation and collection rows near 32px and settings rows near
+  48px. Increase height only when content or platform accessibility requires
+  it.
+- Limit motion to disclosure, utility-window entry, progress, and streaming
+  state. Keep transitions between 140ms and 220ms and disable them under
+  `prefers-reduced-motion`.
+- Use coral for primary action and selection, sea for connected identity and
+  secondary context, and status roles for outcomes. Do not recolor neutral
+  structure for decoration.
+
+## Consumer Boundary
+
+The macOS app should map this anatomy onto native SwiftUI and AppKit structures.
+It keeps native materials, title bars, window sizing, sheets, toolbar behavior,
+keyboard commands, and platform accessibility semantics.
+
+The Control UI should compose the CSS classes inside its existing Lit views. It
+keeps route state, WebSocket lifecycle, data loading, local persistence,
+responsive navigation behavior, and docked-panel interaction.
+
+Both consumers may adapt density and placement to their platform. They should
+preserve the same hierarchy, control roles, semantic status, and responsive
+intent rather than reproduce identical pixels.
+
+## Promotion Evidence
+
+The candidate contract is based on repeated structures in two consumers:
+
+- macOS settings, Quick Chat, model selection, and dashboard panes
+- Control UI settings, sessions, sidebar navigation, chat model controls, route
+  headers, and docked panels
+
+Keep the entry point opt-in until both consumers have adopted and validated the
+same anatomy. Promote only after browser and native-app evidence shows that the
+selectors remain useful without consumer-specific exceptions.
+
+## Validation
+
+- Verify desktop, tablet, and narrow layouts.
+- Verify light and dark themes.
+- Verify expanded and compact global navigation on routes that use it.
+- Verify settings navigation, master-detail, inspector-right,
+  inspector-bottom, and inspector-hidden layouts.
+- Verify model picker open and closed states, every supported model, reasoning
+  levels, fast mode, and locked state.
+- Verify Sessions ready, loading, empty, running, idle, and failed states.
+- Verify Quick Chat idle and active states with captured context.
+- Check keyboard focus and accessible names for every interactive control.
+- Check reduced-motion behavior for picker, progress, streaming, and utility
+  window entry.
+- Keep status understandable without color alone.
+- Confirm that long labels and descriptions wrap without resizing fixed UI.
+- Confirm that native platform behavior remains native after visual alignment.
diff --git a/.agents/skills/openclaw-carapace/references/consumer-adapters.md b/.agents/skills/openclaw-carapace/references/consumer-adapters.md
new file mode 100644
index 00000000..c90850b1
--- /dev/null
+++ b/.agents/skills/openclaw-carapace/references/consumer-adapters.md
@@ -0,0 +1,75 @@
+# Consumer Adapters
+
+## Plain CSS And Astro
+
+Use the complete contract when the global reset is desired:
+
+```css
+@import "@openclaw/carapace";
+```
+
+For a controlled migration, import `tokens.css`, `themes.css`, and
+`typography.css`, then `components.css`. Retain consumer-specific layout CSS.
+Theme switching remains application-owned. The canonical public-site selector is
+`html[data-theme="light"|"dark"]`.
+
+Product applications may additionally import the opt-in candidate layers:
+
+```css
+@import "@openclaw/carapace/themes/product.css";
+@import "@openclaw/carapace/candidate/controls.css";
+@import "@openclaw/carapace/candidate/feedback.css";
+@import "@openclaw/carapace/candidate/application.css";
+```
+
+Use the application layer for shell, pane, and settings anatomy. Keep routes,
+data, persistence, and framework behavior local.
+
+## Tailwind 4
+
+Import in this order:
+
+```css
+@import "@openclaw/carapace/tokens.css";
+@import "@openclaw/carapace/themes.css";
+@import "@openclaw/carapace/typography.css";
+@import "@openclaw/carapace/components.css";
+@import "@openclaw/carapace/themes/product.css";
+@import "@openclaw/carapace/compat/clawhub.css";
+@import "@openclaw/carapace/tailwind.css";
+```
+
+The Tailwind adapter exposes theme utilities. `components.css` provides
+framework-neutral classes; keep Radix, React, route, and product behavior in the
+consumer.
+
+## Native macOS
+
+Map the shared application anatomy to SwiftUI and AppKit instead of importing
+the CSS. Preserve native title bars, materials, window sizing, sheets, keyboard
+commands, focus behavior, and accessibility semantics. Align hierarchy,
+spacing roles, control intent, and status meaning rather than web-specific
+markup.
+
+The ClawHub compatibility adapter understands:
+
+- `data-theme-family="claw"`
+- `data-theme-resolved="light"|"dark"`
+- `data-theme-mode="system"`
+- the existing unprefixed token aliases
+
+Remove aliases only after source search and browser validation prove that no
+consumer uses them.
+
+## Static Documentation Builders
+
+Copy or resolve the focused CSS exports as build inputs. Import tokens, themes,
+and typography before the docs shell CSS. Do not import `base.css` until the
+generated navigation, prose, search, code, and Mermaid views have been compared
+in a real browser.
+
+## Versioning
+
+Install an immutable Git tag. Runtime CSS and skill guidance use the same tag.
+Dependabot or a scheduled update workflow may propose a newer tag, but migration
+and visual validation remain consumer responsibilities.
diff --git a/.agents/skills/openclaw-carapace/references/tokens.md b/.agents/skills/openclaw-carapace/references/tokens.md
new file mode 100644
index 00000000..64cf8463
--- /dev/null
+++ b/.agents/skills/openclaw-carapace/references/tokens.md
@@ -0,0 +1,54 @@
+# Token Contract
+
+Import `@openclaw/carapace` for the complete foundation or use focused
+exports when the consumer must control reset and adapter order.
+
+## Layers
+
+| Layer | Prefix | Purpose |
+| --- | --- | --- |
+| Palette | `--oc-palette-*` | Fixed source colors; rare direct use |
+| Semantic | `--oc-bg-*`, `--oc-text-*`, `--oc-accent-*` | Theme-aware UI intent |
+| Scale | `--oc-space-*`, `--oc-font-size-*`, `--oc-radius-*` | Shared dimensions |
+| Motion | `--oc-duration-*`, `--oc-ease-*` | Shared interaction timing |
+| Product | `--oc-status-*`, `--oc-input-*`, `--oc-diff-*` | Opt-in operational UI |
+| Consumer alias | Unprefixed legacy names | Migration compatibility only |
+
+## Semantic Choices
+
+- Page background: `--oc-bg-page`
+- Ordinary surface: `--oc-bg-surface`
+- Elevated surface: `--oc-bg-elevated`
+- Inset and inverted surfaces: `--oc-bg-recessed`, `--oc-bg-contrast`
+- Primary, secondary, muted, inactive, inverse, and link text:
+  `--oc-text-primary`, `--oc-text-secondary`, `--oc-text-muted`,
+  `--oc-text-inactive`, `--oc-text-inverse`, `--oc-text-link`
+- Primary action: `--oc-accent-primary`; hover:
+  `--oc-accent-primary-hover`
+- Secondary accent: `--oc-accent-secondary`
+- Neutral control backgrounds: `--oc-control-bg`, `--oc-control-bg-hover`
+- Subtle, strong, and accent borders: `--oc-border-subtle`,
+  `--oc-border-strong`, `--oc-border-accent`
+- Focus: `--oc-focus-ring`
+
+Use `color-mix()` from semantic variables for a local translucent state. Add a
+new shared semantic token only when the same intent recurs across consumers.
+
+## Radius
+
+Use semantic geometry roles in product UI:
+
+- `--oc-radius-surface`: cards, panels, and framed sections
+- `--oc-radius-control`: buttons, fields, chips, and segmented controls
+- `--oc-radius-inset`: nested interactive or decorative surfaces
+- `--oc-radius-round`: avatars, status dots, and genuinely circular indicators
+
+The first three roles are square in the canonical OpenClaw system. Raw
+`--oc-radius-*` scale values remain available for documented exceptions, but
+must not replace the semantic defaults.
+
+## Ownership
+
+Consumer repositories own page composition and application states. This package
+owns stable visual foundations, framework-neutral component primitives, and
+thin migration aliases.
diff --git a/.agents/skills/openclaw-design-audit/SKILL.md b/.agents/skills/openclaw-design-audit/SKILL.md
index 064aecbf..02d0d808 100644
--- a/.agents/skills/openclaw-design-audit/SKILL.md
+++ b/.agents/skills/openclaw-design-audit/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: openclaw-design-audit
-description: Audit OpenClaw frontend code and rendered interfaces for design-system drift, token misuse, primitive reimplementation, accessibility problems, responsive defects, and off-brand copy. Use for design reviews, compliance checks, or scheduled audit-and-fix workflows.
+description: Audit OpenClaw frontend code and rendered interfaces for Carapace drift, token misuse, primitive reimplementation, accessibility problems, responsive defects, and off-brand copy. Use for design reviews, compliance checks, or scheduled audit-and-fix workflows.
 ---
 
 # OpenClaw Design Audit
@@ -11,10 +11,10 @@ unless a documented rule makes them violations.
 ## Workflow
 
 1. Read [rubric.md](references/rubric.md) and run every applicable category.
-2. Read the consumer's installed design-system version and current commit SHA.
-3. Read the version-matched
-   [token contract](../openclaw-design-system/references/tokens.md) and
-   [consumer adapters](../openclaw-design-system/references/consumer-adapters.md).
+2. Read the consumer's installed Carapace version and current commit SHA.
+3. Read the version-matched token contract and consumer adapters from the
+   installed product guidance skill: `openclaw-carapace` for new installs or
+   the `openclaw-design-system` compatibility alias for an upgraded lock.
 4. Read the brand or marketing references when those categories apply.
 5. Run deterministic source checks before judgment-based review.
 6. Inspect representative rendered routes at desktop and mobile sizes.
@@ -31,7 +31,7 @@ Each finding must include:
 - category and severity
 - stable rule ID
 - concise remediation
-- design-system reference
+- Carapace reference
 - whether the finding is mechanical or judgment-based
 
 ## Curation
diff --git a/.agents/skills/openclaw-design-audit/references/fix-policy.md b/.agents/skills/openclaw-design-audit/references/fix-policy.md
index 6e1a4fcc..3c9c775a 100644
--- a/.agents/skills/openclaw-design-audit/references/fix-policy.md
+++ b/.agents/skills/openclaw-design-audit/references/fix-policy.md
@@ -10,7 +10,7 @@ deterministic, and covered by an existing rule.
 - use an established local primitive instead of a duplicate raw control
 - add a missing accessible label when intent is unambiguous
 - repair clipping or overflow without changing information architecture
-- update the pinned design-system tag in a dedicated dependency change
+- update the pinned Carapace tag in a dedicated dependency change
 
 ## Requires Human Review
 
diff --git a/.agents/skills/openclaw-design-audit/references/github-pr-delivery.md b/.agents/skills/openclaw-design-audit/references/github-pr-delivery.md
index 0bb1091f..3ffc044c 100644
--- a/.agents/skills/openclaw-design-audit/references/github-pr-delivery.md
+++ b/.agents/skills/openclaw-design-audit/references/github-pr-delivery.md
@@ -4,7 +4,7 @@ The scheduled ClawHub audit opens a pull request directly against
 `openclaw/clawhub`. It does not create or update a tracker issue.
 
 The schedule and credentials live in the consumer repository's GitHub Actions
-workflow. This design-system skill defines the audit and delivery contract; it
+workflow. This Carapace skill defines the audit and delivery contract; it
 does not schedule itself.
 
 ## Branch And Scope
@@ -18,7 +18,7 @@ does not schedule itself.
 
 1. Checkout `openclaw/clawhub` with full history and fetch remote `main`.
 2. Reset only the dedicated automation branch to `origin/main`.
-3. Install the design system at the workflow's pinned Git tag.
+3. Install Carapace at the workflow's pinned Git tag.
 4. Run source checks, browser checks, and report generation.
 5. Apply only fixes allowed by `fix-policy.md`.
 6. Write reports under the consumer's established audit-artifact path.
@@ -32,7 +32,7 @@ does not schedule itself.
 
 The title must identify the audit and date. The body includes:
 
-- design-system version
+- Carapace version
 - audited ClawHub SHA
 - count by severity
 - commands and routes checked
diff --git a/.agents/skills/openclaw-design-audit/references/report-format.md b/.agents/skills/openclaw-design-audit/references/report-format.md
index 225a1793..ce255ea5 100644
--- a/.agents/skills/openclaw-design-audit/references/report-format.md
+++ b/.agents/skills/openclaw-design-audit/references/report-format.md
@@ -6,7 +6,9 @@ Produce both `design-audit.json` and `design-audit.md`.
 
 ```json
 {
-  "designSystemVersion": "v0.0.1",
+  "schemaVersion": 2,
+  "carapaceVersion": "v0.1.0",
+  "designSystemVersion": "v0.1.0",
   "consumerSha": "<sha>",
   "summary": {
     "errors": 0,
@@ -22,12 +24,16 @@ Produce both `design-audit.json` and `design-audit.md`.
       "line": 12,
       "message": "Use the semantic accent token.",
       "remediation": "Replace the raw coral value with var(--oc-accent-primary).",
-      "reference": "openclaw-design-system/references/tokens.md"
+      "reference": "openclaw-carapace/references/tokens.md"
     }
   ]
 }
 ```
 
+During the `v0.1.x` migration, emit both version fields with the same value.
+`designSystemVersion` is retained for existing parsers; new consumers should
+read `carapaceVersion`.
+
 Sort findings by severity, rule ID, file, then line. Keep stable IDs so recurring
 automation can compare runs.
 
@@ -35,7 +41,7 @@ automation can compare runs.
 
 Include:
 
-1. audited design-system version and consumer SHA
+1. audited Carapace version and consumer SHA
 2. validation commands and rendered routes
 3. count by severity
 4. every error
diff --git a/.agents/skills/openclaw-design-system/SKILL.md b/.agents/skills/openclaw-design-system/SKILL.md
index 2b6677e6..3afda69d 100644
--- a/.agents/skills/openclaw-design-system/SKILL.md
+++ b/.agents/skills/openclaw-design-system/SKILL.md
@@ -1,12 +1,19 @@
 ---
 name: openclaw-design-system
-description: Build or modify OpenClaw application UI using canonical semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives. Use for product interfaces, component styling, theme work, or design-token integration.
+description: Compatibility alias for existing OpenClaw installations that now applies Carapace semantic tokens, themes, shared CSS foundations, consumer adapters, and established local primitives.
 ---
 
-# OpenClaw Design System
+# Carapace Compatibility Alias
+
+This skill identifier remains available for existing `skills-lock.json`
+entries during the `v0.1.x` migration. New installations should use
+`openclaw-carapace`.
 
 Use the shared package for foundations and framework-neutral visual primitives.
 Keep consumer-specific behavior, data, routes, and layout composition local.
+Before changing imports, inspect the consumer manifest: use
+`@openclaw/carapace` when it is installed, otherwise preserve the legacy
+`@openclaw/design-system` specifier until the dependency is migrated.
 
 ## Workflow
 
diff --git a/.agents/skills/openclaw-design-system/references/consumer-adapters.md b/.agents/skills/openclaw-design-system/references/consumer-adapters.md
index bfa8ac0b..5cd76d65 100644
--- a/.agents/skills/openclaw-design-system/references/consumer-adapters.md
+++ b/.agents/skills/openclaw-design-system/references/consumer-adapters.md
@@ -1,5 +1,10 @@
 # Consumer Adapters
 
+This compatibility reference uses the legacy `@openclaw/design-system`
+specifier so consumers pinned to `v0.0.1` keep building. If the consumer
+manifest already installs `@openclaw/carapace`, use that package name for the
+same exported paths.
+
 ## Plain CSS And Astro
 
 Use the complete contract when the global reset is desired:
diff --git a/.agents/skills/openclaw-design-system/references/tokens.md b/.agents/skills/openclaw-design-system/references/tokens.md
index 32303f22..20263ce9 100644
--- a/.agents/skills/openclaw-design-system/references/tokens.md
+++ b/.agents/skills/openclaw-design-system/references/tokens.md
@@ -1,7 +1,9 @@
 # Token Contract
 
 Import `@openclaw/design-system` for the complete foundation or use focused
-exports when the consumer must control reset and adapter order.
+exports when the consumer must control reset and adapter order. This legacy
+specifier is intentional for consumers that have not migrated their dependency
+to `@openclaw/carapace`.
 
 ## Layers
 
@@ -19,13 +21,16 @@ exports when the consumer must control reset and adapter order.
 - Page background: `--oc-bg-page`
 - Ordinary surface: `--oc-bg-surface`
 - Elevated surface: `--oc-bg-elevated`
-- Primary, secondary, muted text: `--oc-text-primary`,
-  `--oc-text-secondary`, `--oc-text-muted`
+- Inset and inverted surfaces: `--oc-bg-recessed`, `--oc-bg-contrast`
+- Primary, secondary, muted, inactive, inverse, and link text:
+  `--oc-text-primary`, `--oc-text-secondary`, `--oc-text-muted`,
+  `--oc-text-inactive`, `--oc-text-inverse`, `--oc-text-link`
 - Primary action: `--oc-accent-primary`; hover:
   `--oc-accent-primary-hover`
 - Secondary accent: `--oc-accent-secondary`
-- Subtle and accent borders: `--oc-border-subtle`,
-  `--oc-border-accent`
+- Neutral control backgrounds: `--oc-control-bg`, `--oc-control-bg-hover`
+- Subtle, strong, and accent borders: `--oc-border-subtle`,
+  `--oc-border-strong`, `--oc-border-accent`
 - Focus: `--oc-focus-ring`
 
 Use `color-mix()` from semantic variables for a local translucent state. Add a
diff --git a/.agents/skills/openclaw-design/SKILL.md b/.agents/skills/openclaw-design/SKILL.md
index 297853a0..fff961d5 100644
--- a/.agents/skills/openclaw-design/SKILL.md
+++ b/.agents/skills/openclaw-design/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: openclaw-design
-description: Route OpenClaw design work to the canonical brand, product design-system, marketing-page, or design-audit guidance. Use when a task touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages, or design-system compliance.
+description: Route OpenClaw design work to canonical brand, Carapace product-interface, marketing-page, or design-audit guidance. Use when a task touches OpenClaw visual identity, shared CSS tokens, product UI, public web pages, or Carapace compliance.
 ---
 
 # OpenClaw Design
@@ -11,13 +11,16 @@ only when the task genuinely crosses them.
 | Skill | Use for |
 | --- | --- |
 | `openclaw-brand` | Identity decisions, typography, logos, imagery, voice, and non-product brand artifacts |
-| `openclaw-design-system` | Application UI, semantic tokens, themes, component reuse, and framework adapters |
+| `openclaw-carapace` | Application UI, semantic tokens, themes, component reuse, and framework adapters |
+| `openclaw-design-system` | Compatibility alias for projects upgrading an existing skill lock |
 | `openclaw-marketing-pages` | Public-page composition, landing/content pages, navigation, SEO, and responsive layout |
 | `openclaw-design-audit` | Design drift, token misuse, component substitution, accessibility, and recurring audits |
 
 For a public website change, start with `openclaw-marketing-pages` and add
 `openclaw-brand` only when the task changes identity, logo, imagery, typography,
-or voice. For a product application, start with `openclaw-design-system`.
+or voice. For a product application, start with `openclaw-carapace` when it is
+installed. Projects upgrading an existing lock may use
+`openclaw-design-system` as the `v0.1.x` compatibility alias.
 
 ## Shared Contract
 
diff --git a/.github/workflows/design-system-audit.yml b/.github/workflows/design-system-audit.yml
index 967ca227..dd5bac21 100644
--- a/.github/workflows/design-system-audit.yml
+++ b/.github/workflows/design-system-audit.yml
@@ -50,15 +50,15 @@ jobs:
           GH_TOKEN: ${{ github.token }}
         run: |
           set -euo pipefail
-          release="v$(node -p "require('./node_modules/@openclaw/design-system/package.json').version")"
+          release="v$(node -p "require('./node_modules/@openclaw/carapace/package.json').version")"
           [[ "$release" =~ ^v[0-9]+\.[0-9]+\.[0-9]+$ ]]
-          gh api "repos/openclaw/design-system/releases/tags/${release}" >/dev/null
+          gh api "repos/openclaw/carapace/releases/tags/${release}" >/dev/null
           echo "tag=$release" >> "$GITHUB_OUTPUT"
           mkdir -p "$ARTIFACT_DIRECTORY"
           git clone \
             --branch "$release" \
             --depth 1 \
-            https://github.com/openclaw/design-system.git \
+            https://github.com/openclaw/carapace.git \
             "$ARTIFACT_DIRECTORY/design-system"
 
       - name: Record audit commits
diff --git a/bun.lock b/bun.lock
index 82e05c65..e95bfc18 100644
--- a/bun.lock
+++ b/bun.lock
@@ -14,7 +14,7 @@
         "@fontsource/manrope": "5.3.0",
         "@fontsource/noto-sans-sc": "5.3.0",
         "@monaco-editor/react": "4.7.0",
-        "@openclaw/design-system": "git+https://github.com/openclaw/design-system.git#7b097d79eef6e9a0a4632f72727ac7450f07a1f2",
+        "@openclaw/carapace": "git+https://github.com/openclaw/carapace.git#v0.2.0",
         "@openclaw/plugin-inspector": "0.3.17",
         "@radix-ui/react-avatar": "1.2.3",
         "@radix-ui/react-dialog": "1.1.20",
@@ -442,9 +442,9 @@
 
     "@oozcitak/util": ["@oozcitak/util@10.0.0", "", {}, "sha512-hAX0pT/73190NLqBPPWSdBVGtbY6VOhWYK3qqHqtXQ1gK7kS2yz4+ivsN07hpJ6I3aeMtKP6J6npsEKOAzuTLA=="],
 
-    "@openclaw/clawhub-admin": ["@openclaw/clawhub-admin@workspace:packages/clawhub-admin"],
+    "@openclaw/carapace": ["@openclaw/carapace@github:openclaw/carapace#a0b3c80", {}, "openclaw-carapace-a0b3c80", "sha512-d8EpkOKFJYfM+Ypw8RWV0tr1fUA44iYVkVx4v/D7C/q96CqE26k2FytvoiWYOmZEGwsrSP3Bz3adqeLzeae2eQ=="],
 
-    "@openclaw/design-system": ["@openclaw/design-system@github:openclaw/design-system#7b097d7", {}, "openclaw-carapace-7b097d7"],
+    "@openclaw/clawhub-admin": ["@openclaw/clawhub-admin@workspace:packages/clawhub-admin"],
 
     "@openclaw/plugin-inspector": ["@openclaw/plugin-inspector@0.3.17", "", { "bin": { "plugin-inspector": "src/cli.js" } }, "sha512-JPPHPhiXMsIvrV8UR8RQjhflMjRZX/uIhy9meE81dup7MMSnRJcsTGOXYACohv6e4z2P95z2QuE7nZkWT6Ysuw=="],
 
diff --git a/package.json b/package.json
index 1ef06f1a..2639094f 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "skills-sh:prove-500": "bun scripts/skills-sh-catalog/prove-500.ts",
     "skills-sh:prove-canary": "CLAWHUB_TEST_CATALOG_MODE=controlled-canary bun scripts/skills-sh-catalog/run-test-gate.ts",
     "skills-sh:prove-mirror": "bun scripts/skills-sh-catalog/prove-mirror-test.ts",
-    "skills:install": "npx --yes skills@1.5.16 add openclaw/design-system --skill openclaw-design openclaw-brand openclaw-design-system openclaw-marketing-pages openclaw-design-audit --agent codex --copy --yes",
+    "skills:install": "npx --yes skills@1.5.16 add openclaw/carapace --skill openclaw-design openclaw-brand openclaw-carapace openclaw-design-system openclaw-marketing-pages openclaw-design-audit --agent codex --copy --yes",
     "test": "vitest run",
     "test:e2e": "vitest run -c vitest.e2e.config.ts",
     "test:e2e:local": "bash scripts/run-playwright-local.sh",
@@ -97,7 +97,7 @@
     "@fontsource/manrope": "5.3.0",
     "@fontsource/noto-sans-sc": "5.3.0",
     "@monaco-editor/react": "4.7.0",
-    "@openclaw/design-system": "git+https://github.com/openclaw/design-system.git#7b097d79eef6e9a0a4632f72727ac7450f07a1f2",
+    "@openclaw/carapace": "git+https://github.com/openclaw/carapace.git#v0.2.0",
     "@openclaw/plugin-inspector": "0.3.17",
     "@radix-ui/react-avatar": "1.2.3",
     "@radix-ui/react-dialog": "1.1.20",
diff --git a/scripts/design-audit/design-audit-workflow.test.ts b/scripts/design-audit/design-audit-workflow.test.ts
index f496aeab..550f5412 100644
--- a/scripts/design-audit/design-audit-workflow.test.ts
+++ b/scripts/design-audit/design-audit-workflow.test.ts
@@ -87,11 +87,9 @@ describe("weekly design-system audit workflow", () => {
 
   it("pins the design release and audit inputs in every report", async () => {
     const source = await readFile(".github/workflows/design-system-audit.yml", "utf8");
-    expect(source).toContain(
-      "require('./node_modules/@openclaw/design-system/package.json').version",
-    );
-    expect(source).toContain("repos/openclaw/design-system/releases/tags/${release}");
-    expect(source).toContain("https://github.com/openclaw/design-system.git");
+    expect(source).toContain("require('./node_modules/@openclaw/carapace/package.json').version");
+    expect(source).toContain("repos/openclaw/carapace/releases/tags/${release}");
+    expect(source).toContain("https://github.com/openclaw/carapace.git");
     expect(source).toContain('clone \\\n            --branch "$release"');
     expect(source).toContain("--consumer-sha");
     expect(source).toContain("--base-sha");
diff --git a/scripts/design-audit/source-check.ts b/scripts/design-audit/source-check.ts
index aa9c612e..f12da813 100644
--- a/scripts/design-audit/source-check.ts
+++ b/scripts/design-audit/source-check.ts
@@ -172,9 +172,7 @@ async function main() {
   const output = outputIndex >= 0 ? process.argv[outputIndex + 1] : undefined;
   const base = baseIndex >= 0 ? process.argv[baseIndex + 1] : undefined;
   const designSystemStyles =
-    stylesIndex >= 0
-      ? process.argv[stylesIndex + 1]
-      : "node_modules/@openclaw/design-system/styles";
+    stylesIndex >= 0 ? process.argv[stylesIndex + 1] : "node_modules/@openclaw/carapace/styles";
   if (!output || (!base && !workingTree) || !designSystemStyles) {
     throw new Error(
       "usage: source-check.ts (--base <sha> | --working-tree) --output <path> [--design-system-styles <dir>] [--fail-on-findings]",
diff --git a/skills-lock.json b/skills-lock.json
index 787fda66..187996dd 100644
--- a/skills-lock.json
+++ b/skills-lock.json
@@ -26,31 +26,37 @@
       "computedHash": "73ed9a6417283ee4029a9e61d11ee3cc9ae64268d131150c4c0f4a71f87cd549"
     },
     "openclaw-brand": {
-      "source": "openclaw/design-system",
+      "source": "openclaw/carapace",
       "sourceType": "github",
       "skillPath": "openclaw-brand/SKILL.md",
       "computedHash": "d4bf50bb9d512dbfbcd4abde7a75d8399b0187ca9486dd7854844aab0cd02e6a"
     },
+    "openclaw-carapace": {
+      "source": "openclaw/carapace",
+      "sourceType": "github",
+      "skillPath": "openclaw-carapace/SKILL.md",
+      "computedHash": "d499fc33a555946855c7e817833b6c67b8b25b12f6dc1c5dfb27e862ed2c5ece"
+    },
     "openclaw-design": {
-      "source": "openclaw/design-system",
+      "source": "openclaw/carapace",
       "sourceType": "github",
       "skillPath": "openclaw-design/SKILL.md",
-      "computedHash": "096be7d1e5e65e62b7de5b96e3897b6ac3a1f45686ee5599dfcbaeaeb607b4ec"
+      "computedHash": "4a9004e762b08f6c9fc836de7b4db26fc27e7b9a90342884047bbffa51c21732"
     },
     "openclaw-design-audit": {
-      "source": "openclaw/design-system",
+      "source": "openclaw/carapace",
       "sourceType": "github",
       "skillPath": "openclaw-design-audit/SKILL.md",
-      "computedHash": "12fec90fd4aa1aa569de1beb5a3c85d06887a5e548704dbd094355edc0f52ad3"
+      "computedHash": "aff7655c532d67205301590f76d8655a42f36d14fbd1960d4e4b9b8149291aa3"
     },
     "openclaw-design-system": {
-      "source": "openclaw/design-system",
+      "source": "openclaw/carapace",
       "sourceType": "github",
       "skillPath": "openclaw-design-system/SKILL.md",
-      "computedHash": "475604f08f37186237fa62605fbfe16ea04367af81f4c3a8c59bcb395ae70cca"
+      "computedHash": "6d94e825c58fc5650a532e4ed8bc96208ede8a166089598d1924393cc46f3275"
     },
     "openclaw-marketing-pages": {
-      "source": "openclaw/design-system",
+      "source": "openclaw/carapace",
       "sourceType": "github",
       "skillPath": "openclaw-marketing-pages/SKILL.md",
       "computedHash": "7da44d258d5a1e87b26535effa13cf20931fd04a884fd95225a4ff603932ef84"
diff --git a/src/__tests__/ui-design-contract.test.ts b/src/__tests__/ui-design-contract.test.ts
index b2f345ec..780112d9 100644
--- a/src/__tests__/ui-design-contract.test.ts
+++ b/src/__tests__/ui-design-contract.test.ts
@@ -75,11 +75,11 @@ describe("restored UI design contract", () => {
     const rootSource = rootRoute();
     const sharedCss = designSystemStyles();
 
-    expect(sharedCss).toContain('@import "@openclaw/design-system/tokens.css";');
-    expect(sharedCss).toContain('@import "@openclaw/design-system/typography.css";');
-    expect(sharedCss).toContain('@import "@openclaw/design-system/themes/product.css";');
-    expect(sharedCss).toContain('@import "@openclaw/design-system/components.css";');
-    expect(sharedCss).toContain('@import "@openclaw/design-system/compat/clawhub.css";');
+    expect(sharedCss).toContain('@import "@openclaw/carapace/tokens.css";');
+    expect(sharedCss).toContain('@import "@openclaw/carapace/typography.css";');
+    expect(sharedCss).toContain('@import "@openclaw/carapace/themes/product.css";');
+    expect(sharedCss).toContain('@import "@openclaw/carapace/components.css";');
+    expect(sharedCss).toContain('@import "@openclaw/carapace/compat/clawhub.css";');
     expect(sharedCss).toContain(".home-v2-main.oc-app-surface");
     expect(sharedCss).toContain("--hv2-bg: var(--oc-bg-page)");
     expect(sharedCss).toContain("--hv2-text: var(--oc-text-primary)");
@@ -445,7 +445,7 @@ describe("restored UI design contract", () => {
 
   it("keeps runtime requirement text high contrast in both themes", () => {
     const css = styles();
-    const designTokens = read("node_modules/@openclaw/design-system/styles/tokens.css");
+    const designTokens = read("node_modules/@openclaw/carapace/styles/tokens.css");
     const installCardSource = read("src/components/SkillInstallCard.tsx");
 
     expect(installCardSource).toContain("requirements-env-row");
diff --git a/src/design-system.css b/src/design-system.css
index 770263ef..04ce35f0 100644
--- a/src/design-system.css
+++ b/src/design-system.css
@@ -1,9 +1,9 @@
-@import "@openclaw/design-system/tokens.css";
-@import "@openclaw/design-system/themes.css";
-@import "@openclaw/design-system/typography.css";
-@import "@openclaw/design-system/themes/product.css";
-@import "@openclaw/design-system/components.css";
-@import "@openclaw/design-system/compat/clawhub.css";
+@import "@openclaw/carapace/tokens.css";
+@import "@openclaw/carapace/themes.css";
+@import "@openclaw/carapace/typography.css";
+@import "@openclaw/carapace/themes/product.css";
+@import "@openclaw/carapace/components.css";
+@import "@openclaw/carapace/compat/clawhub.css";
 
 /*
  * Temporary aliases for legacy ClawHub styles that have not yet moved to the