SeeFlow
Design System · v0.1

A control-panel aesthetic for architecture that runs.

Tokens, type, motion and component patterns extracted from the SeeFlow hero animation. Dark zinc foundation, emerald as the signal color, Inter for product voice, JetBrains Mono for anything mechanical.

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-sm4px
r-md8px
r-lg12px
r-xl16px · windows

Shadow & glow

shadow-cardy4 b12
glow-okemerald 45%
glow-pendingamber 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
Node detail

Payment

Stripe API · service
200 OK 142 ms
Endpoint
POST /payment/charge
Recent activity
200 142ms just now
200 98ms 12s ago
402 87ms 2m ago

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

Lowercase, hyphens. Becomes the node id on the canvas.
https://
Emerald 3px ring · rgba(16,185,129,0.18)
Must be a valid URL.
POST
⌘K

Choice controls

Checkbox
Radio
Switch

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
Node actions
Run ⌘R
Inspect I
Open source
Remove from canvas
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

easeOutCubicentries
easeInOutCubiccursor travel
easeOutBacknodes 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."