DESIGN.md

version	alpha
name	ClawWork Operator Console
description	A dense local-first desktop workspace for OpenClaw tasks, sessions, messages, artifacts, and teams.
colors	primary secondary tertiary neutral elevated hover light-page light-elevated light-hover light-accent legacy-green text-primary text-secondary text-primary-light text-secondary-light text-muted-light danger warning info #13131C #1A1A25 #8088FB #FBFAF7 #1F1F2C #292936 #F4F3EF #FFFFFF #E9E8E2 #5860EA #19E31D #F1F1F8 #B0B0BF #17171C #3A3A42 #6E6E7A #F07079 #E6B35A #6AA9ED
typography	page-title dialog-title section-title label body support meta badge code fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 24px 600 32px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 20px 600 28px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 16px 600 24px -0.02em fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 14px 500 20px -0.011em fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 14px 420 20px -0.011em fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 13px 420 18px -0.011em fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 11px 500 16px 0.08em fontFamily fontSize fontWeight lineHeight letterSpacing Inter Variable 11px 600 16px 0.08em fontFamily fontSize fontWeight lineHeight letterSpacing JetBrains Mono Variable 13px 400 18px -0.011em
rounded	xs sm md lg xl input full 3px 4px 6px 8px 12px 24px 999px
spacing	hairline xs sm md lg xl panel toolbar-height control-sm control control-lg avatar 1px 4px 8px 12px 16px 20px 16px 44px 32px 36px 40px 32px
components	app-shell left-nav main-area surface-card surface-elevated nav-hover button-primary button-soft input-command status-badge live-signal danger-status warning-status info-status light-shell light-panel light-elevated light-hover light-muted-label light-button-primary backgroundColor textColor typography {colors.primary} {colors.text-primary} {typography.body} backgroundColor textColor typography width {colors.secondary} {colors.text-secondary} {typography.label} 260px backgroundColor textColor typography {colors.primary} {colors.text-primary} {typography.body} backgroundColor textColor rounded padding {colors.secondary} {colors.text-primary} {rounded.xl} {spacing.lg} backgroundColor textColor rounded padding {colors.elevated} {colors.text-primary} {rounded.xl} {spacing.lg} backgroundColor textColor typography rounded height {colors.hover} {colors.text-secondary} {typography.label} {rounded.md} {spacing.control} backgroundColor textColor typography rounded height padding {colors.tertiary} {colors.primary} {typography.label} {rounded.lg} {spacing.control} {spacing.md} backgroundColor textColor typography rounded height padding {colors.elevated} {colors.tertiary} {typography.label} {rounded.lg} {spacing.control-sm} {spacing.md} backgroundColor textColor typography rounded padding {colors.elevated} {colors.text-primary} {typography.body} {rounded.input} {spacing.xl} backgroundColor textColor typography rounded padding {colors.hover} {colors.text-secondary} {typography.badge} {rounded.sm} {spacing.xs} backgroundColor textColor typography rounded padding {colors.primary} {colors.legacy-green} {typography.badge} {rounded.full} {spacing.xs} backgroundColor textColor typography rounded padding {colors.danger} {colors.primary} {typography.badge} {rounded.sm} {spacing.xs} backgroundColor textColor typography rounded padding {colors.warning} {colors.primary} {typography.badge} {rounded.sm} {spacing.xs} backgroundColor textColor typography rounded padding {colors.info} {colors.primary} {typography.badge} {rounded.sm} {spacing.xs} backgroundColor textColor typography {colors.light-page} {colors.text-primary-light} {typography.body} backgroundColor textColor typography rounded padding {colors.neutral} {colors.text-secondary-light} {typography.body} {rounded.xl} {spacing.lg} backgroundColor textColor rounded padding {colors.light-elevated} {colors.text-primary-light} {rounded.xl} {spacing.lg} backgroundColor textColor typography rounded {colors.light-hover} {colors.text-secondary-light} {typography.label} {rounded.md} backgroundColor textColor typography rounded {colors.light-page} {colors.text-muted-light} {typography.support} {rounded.md} backgroundColor textColor typography rounded height padding {colors.light-accent} {colors.neutral} {typography.label} {rounded.lg} {spacing.control} {spacing.md}

Overview

ClawWork is an operator console, not a marketing surface. It should feel like a quiet desktop control room for parallel OpenClaw work: persistent Tasks in the left rail, the active Message stream in the center, and Task-scoped operational context around it.

The visual reference is a local-first agent workspace with terminal-adjacent density and macOS desktop restraint. The product can show Teams, usage, tool calls, artifacts, scheduled Tasks, and search without turning into a dashboard collage. Hierarchy comes from panels, muted text, exact spacing, and sparse accent, not from decorative illustration.

Dark mode is the primary expression. Light mode keeps the same geometry and contrast relationships but swaps to warm paper surfaces. Both modes should preserve the same calm, work-focused rhythm.

Colors

The palette is built from near-black violet surfaces, warm light surfaces, and a single violet-blue accent. Older screenshots and keynote assets also show a bright green operational accent for Team selection, running indicators, and selected command rows; treat it as a narrow live-state signal, not as a second brand color.

• Primary {colors.primary} is the dark application floor.
• Secondary {colors.secondary} is used for persistent rails and standard dark surfaces.
• Elevated {colors.elevated} is reserved for inputs, popovers, dialogs, and surfaces that sit above the page.
• Tertiary {colors.tertiary} is the primary action, focus, selected, and link color in the desktop renderer.
• Legacy green {colors.legacy-green} is a narrow operational signal for active Team mode, command focus, and running-state meters.
• Text primary is high-contrast but slightly softened; avoid pure white or pure black.
• Muted text carries timestamps, inactive navigation, placeholders, and secondary metadata.
• Danger, warning, and info are semantic status colors only.

In application code, all UI colors should come through CSS variables. Do not introduce raw feature-level hex values in renderer components.

Typography

ClawWork uses Inter Variable for interface text and JetBrains Mono Variable for inline code, command data, token counts, paths, IDs, and compact technical metadata.

Type is intentionally modest. Page titles are only 24px; section titles are 16px; most working UI text sits at 14px or 13px. The product should read like a desktop tool that expects repeated use, not a landing page trying to impress a first-time visitor.

• Page title {typography.page-title}: top-level screens and empty-state headings.
• Dialog title {typography.dialog-title}: modal and command-palette headings.
• Section title {typography.section-title}: panel headers and view headers.
• Label {typography.label}: controls, navigation, task rows, and buttons.
• Body {typography.body}: message UI, descriptions, table cells, and form content.
• Support {typography.support}: helper text and secondary labels.
• Meta {typography.meta}: uppercase chrome, shortcuts, counts, and table metadata.
• Code {typography.code}: code blocks, paths, model IDs, session keys, and numeric telemetry.

Use tight but readable tracking for Inter. Uppercase metadata may use wide tracking. Do not use display fonts, decorative serif faces, or oversized hero typography inside the application.

Layout

The default desktop shape is a three-panel workspace: left navigation, central work area, and optional right context panel. The left rail is persistent and task-first. The center owns the active Task, file browser, Teams, cron, dashboard, or setup view. The right panel appears only when it adds Task-scoped context.

Use fixed desktop affordances where stability matters: a 44px toolbar, 32-40px controls, 32px avatars, 260px left navigation, and dense list rows. The message composer can be visually larger, but it should still behave as a tool surface with predictable controls and no marketing copy.

Spacing follows a small 4px-derived scale. Prefer 8px, 12px, 16px, and 20px increments. Avoid ornamental white space in operational screens; empty states can breathe, but task lists, command palettes, settings, and artifact views should be optimized for scanning.

Elevation & Depth

Depth is real but restrained. Standard surfaces use subtle borders and low shadows. Popovers, dialogs, command palettes, and the message composer may use heavier elevation plus a focused glow.

The design allows glass-like surfaces, but they should remain legible and structural. A blurred or translucent surface must still read as a working panel. Do not use glass as decoration.

Focus states use an accent ring plus diffuse glow. Running tool states can pulse, but the animation should stay mechanical and low amplitude. Elevation should never make the UI feel like stacked marketing cards.

Motion is fast: 100ms for immediate feedback, 150ms for normal control transitions, 200ms for panel/list movement, and 300ms as the slow ceiling for ordinary UI. Respect reduced motion by collapsing transforms and nonessential movement.

Shapes

ClawWork uses slightly rounded desktop geometry. Small badges and status tags use 3-4px radius. Buttons and compact controls use 8px. Cards and framed sections use 12px. The command composer can use a large 24px radius because it is a primary input surface, not a generic card.

Do not increase rounding globally to make the UI feel friendlier. The product should remain precise, dense, and operator-grade.

Components

The component system is built around semantic surfaces and Radix/shadcn-style primitives.

• Left navigation is a durable task switcher. It should show search, primary navigation entries, grouped Tasks, status markers, and bottom system actions without changing modes unexpectedly.
• Main area is the work canvas. It should avoid nested cards and should let the active Task, file browser, Team flow, or dashboard own the available space.
• Command palette is a floating operational search surface. It uses strong focus glow, uppercase section labels, direct rows, and visible keyboard affordances.
• Message composer is the dominant action surface at the bottom of active work. It should expose attachment, model, thinking, voice, and send controls without crowding the text entry.
• Tool call cards are compact operational records. They should reveal status first, then details on expansion.
• Status tags are small uppercase badges. Use them for state, not decoration.
• Settings and panels should use dense rows, toggles, segmented controls, and restrained section cards.

Icons come from lucide-react. Use icons for tools and modes where a standard symbol exists. Text-only buttons are for clear commands, not for representing tools.

Do's and Don'ts

• Do keep the app task-first: Task, Session, Message, Artifact, Gateway, Agent, Team, Room, Skill, Tool, and Workspace are product terms with specific meanings.
• Do use dark mode as the reference implementation and verify light mode preserves structure.
• Do keep accent use scarce enough that selected and running states remain obvious.
• Do prefer borders, muted text, and panel geometry over decorative cards.
• Do make command surfaces fast, dense, keyboard-friendly, and visually focused.
• Do use motion presets and CSS variables already present in the renderer.
• Don't create landing-page hero sections inside the app.
• Don't add decorative gradients, bokeh, ornamental blobs, or stock imagery.
• Don't use pure black, pure white, or raw hardcoded component colors.
• Don't make every surface glassy, glowing, or card-like.
• Don't enlarge typography beyond the current desktop scale unless the view is truly empty-state or onboarding.
• Don't introduce a second broad accent palette; green is for live operational signals only.
• Don't let Teams or orchestration views become colorful role dashboards. They are still part of the same operator workspace.