## Color

01 / palette

### Surfaces

Deep #050507 page background
Background #09090b · zinc-950 stage / scene
Canvas #0a0a0c diagram backdrop
Surface #18181b · zinc-900 cards / nodes

### Borders & text

Border #27272a · zinc-800 card edge
Border high #3f3f46 · zinc-700 window dots, hairlines
Text dim #71717a · zinc-500 secondary copy
Text #fafafa · zinc-50 primary copy

### Signal — status & brand

Emerald #10b981 → #34d399 brand · 200 OK · live
Amber #f59e0b → #fbbf24 pending / in-flight
Danger #ef4444 4xx / 5xx
Emerald glow rgba(16,185,129,0.35) window & node halos

## Type

02 / typography
Sans · Product voice
Inter
400 · 500 · 600 · 700
Mono · Mechanical
JetBrains
400 · 500 · 600
Display Inter · 64 / 600 · -0.04em
Architecture that runs.
Title Inter · 32 / 500 · -0.02em
Click a node. Fire a real request.
Heading Inter · 22 / 600 · -0.02em
Payment Service
Body Inter · 16 / 400 · -0.01em
Generated from the codebase. Each node is wired to a running service — click it to send a real request and watch the response light up downstream nodes.
Mono · code JetBrains · 14 / 400
POST /payment/charge · 142ms · 200 OK
Mono · label JetBrains · 11 / 500 · 0.18em · UPPER
02 / generate

## Spacing & radii

03 / geometry
r-sm 4px
r-md 8px
r-lg 12px
r-xl 16px · windows

### Shadow & glow

shadow-card y4 b12
glow-ok emerald 45%
glow-pending amber 45%

## Components

04 / building blocks
Node card · 4 states
Auth Service
JWT · OAuth2
Payment
Stripe API
Processing…
Inventory DB
PostgreSQL
200 OK
Payment
Stripe API · selected
200 OK
idle · border #27272a pending · amber + glow + spinner ok · emerald + glow + pill selected · emerald ring 3px
Status pills
200 OK Processing… Live 402 Payment Required 142 ms
Window frame · scene container
checkout-flow.json Live
[ scene content — terminal, canvas, end-card ]
Terminal output
~/checkout-flow $ seeflow AI Agent
❯ /seeflow show me the checkout feature
·Analyzing codebase…
·Found 3 services: API Gateway, Payment, Inventory DB.
·Generating seeflow.json…
✓ Done — canvas ready at localhost:4321
Node detail sidebar

Slides in from the right edge of the canvas. tx: 420px → 0, easeOutCubic, 500ms.

Content reveals in a stagger: +0, +150, +300, +450ms per block. Activity rows pile in at +80ms each.

The originating node gets a 3px emerald ring while the sidebar is open so the user keeps the visual link between the row of activity and the system it describes.

## shadcn/ui

05 / web primitives

Drop these tokens into `globals.css` and shadcn/ui primitives inherit SeeFlow's palette automatically — no per-component overrides needed.

Token map · SeeFlow → shadcn

    /* globals.css — dark theme */
    .dark {
      --background: 240 6% 7%;          /* zinc-950   #09090b */
      --foreground: 0 0% 98%;            /* zinc-50    #fafafa */
      --card:       240 5% 11%;          /* zinc-900   #18181b */
      --popover:    240 7% 6%;
      --primary:    160 84% 39%;         /* emerald-500 #10b981 */
      --primary-foreground: 158 80% 10%;
      --secondary:  240 4% 13%;
      --muted:      240 5% 11%;
      --muted-foreground: 240 5% 65%;   /* zinc-400 */
      --accent:     240 4% 13%;
      --destructive: 0 84% 60%;          /* red-500   #ef4444 */
      --border:     240 4% 16%;           /* zinc-800 */
      --input:      240 5% 12%;
      --ring:       160 84% 39%;          /* emerald — focus */
      --radius:     0.5rem;               /* 8px */
    }

Theme is dark-only — SeeFlow has no light mode. Keep `--primary` emerald (not blue) so CTAs read as "live signal," not generic web button. Keep `--radius` at `0.5rem` — anything bigger softens the control-panel feel.

### Button

Open in editor
Variants · primary, secondary, outline, ghost, destructive, link
Sizes · sm 30px · default 36px · lg 44px · icon variants
States · with icon · loading · disabled · focus-visible ring
Link
Disabled state · all variants · opacity-50 only, no text-color override

#### Do

- One primary button per surface — emerald is signal; reserve it.
- Verb-first labels: Run flow, Inspect node, Open canvas.
- Use `destructive` only for actions that delete or stop a real service.
- Icons go on the left for actions, right for navigation/external.

#### Don't

- No filled secondary buttons in another accent color — use outline/ghost.
- Don't replace text with an icon unless it's a universally understood tool (gear, x, kebab).
- No gradient fills, drop shadows on hover, or transform scales.
- No "Submit" — always describe the action: Save changes, Send request.

### Form fields

Service name Lowercase, hyphens. Becomes the node id on the canvas.
Endpoint URL
https://
Request body { "items": ["sku_42"], "currency": "USD" }
Default focus Emerald 3px ring · rgba(16,185,129,0.18)
Error state
Must be a valid URL.
Method
POST
Search
⌘K

### Choice controls

Checkbox
Auto-refresh canvas Stream server logs Record session (Pro)
Radio
Local (localhost:4321) Staging Production
Switch
Live mode Show packet trails Replay last request

### Badge

200 OK 142 ms v0.4.1 Live Pending 502 Bad Gateway
Default · secondary · outline · success · warning · destructive. Status badges always lead with a 5px dot.

### Alert

Canvas reloads when you save
Changes to `seeflow.json` apply hot — you don't need to restart the dev server.
Connected to checkout-api
9 endpoints discovered · last heartbeat 1s ago.
Payment service unreachable
5 consecutive timeouts on `POST /payment/charge`. Check the running container.

### Card

#### Payment service

Stripe API · connected

Endpoint POST /payment/charge
p99 latency 43 ms
Last 100 requests 98% OK

#### Share this canvas

Anyone with the link can view (read-only).

### Tabs, tooltip, dropdown, dialog

Tabs
Tooltip
Refresh canvas · ⌘R
Dropdown menu
Dialog

#### Stop payment service?

In-flight requests will fail with a 503. This affects the running checkout flow.

### Table

Endpoint | Method | Status | Latency | Last hit
--- | --- | --- | --- | ---
/checkout | POST | 200 | 142 ms | just now
/payment/charge | POST | 200 | 98 ms | 12s ago
/inventory/reserve | GET | Pending | — | 48s ago
/notify | POST | 502 | 5,003 ms | 2m ago

### Skeleton, avatar, progress

Skeleton
Avatar
SF
TN
+5
SF
checkout-api
localhost:4321 · online
Progress
Analyzing codebase 72%
Generating diagram 34%

#### Do

- Set `--radius: 0.5rem` globally. Bigger radii read as marketing, not tooling.
- Use mono for any value that comes from the system: paths, IDs, latencies, status codes.
- Status colors are reserved — emerald = ok/live, amber = pending, red = error.
- Always pair input changes with optimistic UI (spinner in the button, not blocking the form).
- Focus ring is 3px emerald @ 18% — visible but doesn't shout.

#### Don't

- Don't override `--primary` per-component. If a button needs a different color it's a different role.
- Don't introduce a new neutral. Zinc-800/700/500/400 already cover every border & text need.
- Don't add hover shadows or transforms — hovers shift background only.
- Don't use the default shadcn blue ring — emerald is the SeeFlow signal color and the ring is part of that signal.
- Don't use modals for confirmations under 3 words long. Inline confirm with a destructive button is fine.

## Glyphs

06 / iconography
flow
client
gateway
service
database
success
file
play
cursor

All glyphs are stroked at `stroke-width: 2` (heavier 2.2 for the wordmark), round caps and joins, 24px viewBox. Color is inherited via `currentColor` so glyphs adopt node state.

## Motion

07 / timing

### Easing curves

easeOutCubic entries
easeInOutCubic cursor travel
easeOutBack nodes pop in

### Hero loop timeline · 30s

0.0 — 9.2s
01 · Prompt Cursor types `/seeflow show me the checkout feature`. Response lines stagger in (+0.55s each). Generated file pill appears.
typewriter · 2.2s
8.8 — 13.0s
02 · Wire Window swaps to canvas. 7 nodes materialize one at a time (easeOutBack). Edges draw in via dashoffset.
+0.4s / node
5.4 — 9.3s in-scene
03 · Run Cursor glides to Gateway · click pulse · packets fly along edges. Nodes flip pending → ok with status pills.
packet 0.55s · easeInOutCubic
10.7 — 17.2s in-scene
04 · Inspect Second click on Payment. Sidebar slides in from right, content reveals in 4 staggered blocks. Originating node gets a 3px emerald ring.
slide 0.5s · easeOutCubic
26.6 — 30.0s
05 · End card Wordmark + tagline + install command, fade-up stagger.
+0.4s per line

## Voice

08 / copy

#### Do

- Lead with the verb. "Click. Fire. Inspect."
- Use mono for anything mechanical — paths, commands, timings, status codes.
- Pair plain English with a concrete proof. "Real responses. Live nodes."
- Keep section labels short and serialized: `02 / generate`.

#### Don't

- No "revolutionize," no "seamlessly," no "next-generation."
- No exclamation marks. The product is confident; punctuation doesn't have to be.
- No emoji in product surfaces. Glyphs only.
- Don't pad with adjectives. Two short sentences beat one long one.

## Principles

09 / north stars
01

### A diagram is a control panel.

Every node is clickable. Every edge carries a real request. If it can't be touched, it shouldn't be on the canvas.

02

### Color is signal, not decoration.

Emerald means OK. Amber means pending. Red means broken. Surfaces stay grayscale so signal can't be drowned out.

03

### Motion follows causality.

A click animates the cursor. A request animates a packet along an edge. A response animates the receiving node. Nothing moves without a cause.

04

### Mono earns the spotlight.

Anything a developer would type — paths, statuses, durations — is set in JetBrains Mono. It signals "this came from your real system."