Agent-Up design system

The HTML and CSS are the product contract.

Every surface below is a live catalog example. Desktop, Mobile, docs, and marketing apply these classes and compiled bindings. They do not invent a second theme from the palette.

Open the catalog Implementation contract

☰ ↻Agent-Up− □ ×

3000:11200

Each tab is a surface

The catalog is grouped the way Agent-Up is used: chrome, workspaces, applications, browser, console, Git, diagnostics, metrics, validation, auth, Mobile, and marketing.

Surfaces

01 · Foundations

Foundations

Near-black is the environment. Off-white carries hierarchy. Alpha hairlines create structure. Interaction (hover, pressed) is a neutral white layer; green is reserved for action, selection, progress, and health.

Canvas

--au-color-canvas

#0a0b0c

Window, page, and PWA ground.

Surface

--au-color-surface

#121416

Panels without fake elevation.

Subtle border

--au-color-border-subtle

#ffffff14

Default structure. Never green by default.

Primary text

--au-color-text-primary

#f5fbf7

Titles and important labels.

Action

--au-color-accent

#00b850

Primary action, not decoration.

Healthy

--au-color-status-healthy

#22c55e

Healthy state with a label.

Danger

--au-color-status-danger

#d84f4f

Failure and destructive action.

Focus

--au-color-focus

#00a8e8

Keyboard focus, distinct from success.

Canvas

.au-theme · Window

Quiet operational canvas.

Root window, page, and PWA chrome use the canvas token.

Color roles

.au-swatch · Border

Never introduce a raw product color when a semantic role exists.

Typography

.au-heading · TextBlock

AI-assisted development workspaces

Workspaces

See the runtime. Trust the review.

Product screens use page title, not the marketing display size. Monospace is reserved for commands, paths, ports, logs, and diffs.

agent-up start · localhost:11200 · feat/checkout

Applications use platform sans-serif at these roles. Authored web uses Inter.