Carapace

Canonical web contract

  • OpenClaw design system

    Carapace

    Shared tokens, components, agent patterns, and application anatomy for OpenClaw web surfaces. Consumers keep their own routes, data, and behavior.

    Carapace is the durable visual contract between products: compact controls, legible states, predictable motion, and pane layouts that hold up from a desktop workspace to a narrow utility window.

  • Button
  • Composer
  • Select
  • Tool Group
    Task completed3 tools6s
    Ran commandbun run check
    Found resultssemantic tokens
    Read filecomponents.css
  • Input
    Enter a complete email address.
  • Combobox
  • Tabs
    Rendered component preview.
  • Switch
  • Dropdown
  • Segmented Control
  • Skeleton Line
  • Toast
  • Loader
    Syncing components…
  • Sensitive Input
  • Suggestions
  • Input Group
  • Todo Tool
    • Completed: Inspect contract
    • Completed: Implement component
    • In progress: Run visual check
    • Not started: Publish reference
  • Avatar
  • Date Picker
  • Pagination
  • Checkbox
  • Tooltip
    Copy component markup
  • Badge
    OfficialReadyPending
  • Breadcrumbs
  • Edit Tool
    Edited components.css+3 −1
    108.oc-agent-tool {
    109 min-height: 3rem;
    109 min-height: 2.25rem;
    110 font-size: var(--oc-font-size-sm);
    111 border-radius: var(--oc-radius-control);
    112}
  • Autocomplete
  • Input Area
  • Collapsible
    Package requirements

    Import tokens before components and set the theme on the application root.

  • Empty

    No saved views

    Save the current filters so you can return to this component set.

  • Grid
    A
    B
    C
  • Card
    Workspace

    A grouped surface with a single responsibility.

  • Radio
    Visibility
  • Banner
    Update available

    Review changes before applying.

  • Meter
    64%

    6.4 GB of 10 GB

  • Interactive Tool
    Ran command: bun
    bun run check
    29 pass · 0 fail
Finished in 312ms
  • Dialog

    Apply changes?

    The updated settings will be applied to this workspace.

  • Thinking Tool
    Thought

    Reviewed component coverage and preview density before choosing the smallest sustainable change.

  • Clipboard Text
    @openclaw/carapace
  • Model Picker
    GPT-5.6 SolOpenAI
  • Provider Logo
  • Question Tool
    Choose a proof lane
  • Agent Chat

    Make the application surface denser.

    Resetting the pane contract now.

  • Multi-agent Activity
    Agents thinking4 specialists · 2 tasks ready
  • Application Surface