Agent-Up design system

One design schema

Every app, every docs appearance, every post and everything else uses the same design schema.

Implementation contract

Server online Starting Failed MCP connected

Harbor Shop main

02.10.26 14:33

02.10.26 11:04

01.10.26 19:41

01.10.26 08:12

30.09.26 16:20

22.09.26 09:18

22.09.26 07:30

●

Checkout reaches the cart

A shopper opens Harbor Shop and sees the featured goods, then the cart.

Starts at /

✓ Starting page

✓ Title is "Harbor Shop"

✓ Text contains "Harbor Mug"

● Open checkout

● URL is /checkout

○ Text contains "Cart"

✗

Guest can place an order

A guest reaches checkout and the order total is visible.

Starts at /checkout

✗ Starting page

✗ Title is "Checkout"

○ Text contains "Total"

feat(storefront): add the weekly promo banner Demo

HEAD 369-mobile origin/main v3.47.0

Add a promo banner to the storefront.

Codex

I added apps/storefront/PromoBanner2.tsx so the storefront can show the weekly harbor special. It is uncommitted in the working tree.

Changes

apps

storefront

ProductGrid.tsx M

PromoBanner.tsx +

PromoBanner2.tsx +

api

orders.ts M

[install] npm install
Storefront listening on WEB_PORT

Time · Kind · Message

12:01 · process · listening on 11200

12:02 · browser · net::ERR_CONNECTION_REFUSED

p95128 ms

Assembled screens

One central definition.

Each screen is defined centrally and itself assembled from central component definitions.

Applications

Each tab is a running application surface. Desktop opens the allocated HTTP port; Mobile lists Apps in the workspace bottom bar.

SERVER ONLINE Agent-Up − □ ×

Storefront

Harbor Shop

Featured goods from the harbor catalog.

Harbor Mug

Stoneware, fog glaze

$18

Canvas Tote

Waxed canvas, brass snap

$32

Chart Lamp

Brass shade, linen cord

$54

Cart

Harbor Mug × 1$18

Canvas Tote × 1$32

Total$50

Recent orders

Harbor Mug × 1$18

Desktop

Harbor Shop

Harbor Shop Healthy

Applications

Storefront Running

Orders API Running

Mobile

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.