Skip to content

Commit caecf05

Browse files
xiaojiou176xiaojiou176
authored
docs: add command tower design system artifacts (#67)
1 parent 099bbc5 commit caecf05

15 files changed

Lines changed: 505 additions & 0 deletions

‎.stitch/DESIGN.md‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
# CortexPilot Stitch Design Source
2+
3+
## Product Position
4+
5+
CortexPilot is the **command tower for AI engineering**.
6+
7+
Generate surfaces that feel like a governed architecture studio and an
8+
operations cockpit at the same time. The design should communicate that humans
9+
do not babysit every model step; instead, they operate one control layer that
10+
plans, delegates, tracks, resumes, and proves work.
11+
12+
## Visual Atmosphere
13+
14+
- Dark, premium, command-center baseline
15+
- Asymmetric but disciplined layout
16+
- Calm authority, not sci-fi neon
17+
- Dense where operational value requires it, airy where the front door needs clarity
18+
19+
## Color Calibration
20+
21+
- Canvas: `#0B1220`
22+
- Surface: `#111A2E`
23+
- Raised surface: `#17233B`
24+
- Primary ink: `#E8EEF8`
25+
- Muted text: `#9FB0C8`
26+
- Accent: `#1FB981`
27+
- Warning: `#E59A2F`
28+
- Danger: `#D95C5C`
29+
30+
Never use purple neon, outer glow, or fake AI gradients.
31+
32+
## Typography
33+
34+
- Display: Space Grotesk
35+
- Body: Manrope
36+
- Mono: JetBrains Mono
37+
38+
Avoid Inter, generic serif fonts, and oversized startup-style hero typography.
39+
40+
## Layout Rules
41+
42+
- Dashboard home is a briefing page, not a docs index.
43+
- Command Tower is a cockpit with clear priority lanes.
44+
- Workflow detail is the durable case record.
45+
- Run detail is the truth room for evidence, compare, and replay.
46+
- Desktop mirrors web language, but with tighter, denser operator rhythm.
47+
48+
## Copy Rules
49+
50+
- Strong, truthful hooks are allowed.
51+
- Use exact operator language.
52+
- Never fabricate metrics, uptime, or synthetic workload numbers.
53+
- Never use emoji as icons or filler instructions like “scroll to explore”.
54+
55+
## Anti-Patterns
56+
57+
- generic admin dashboard
58+
- three equal feature cards as the default layout
59+
- cheap glassmorphism
60+
- fake KPI/stat cards
61+
- testimonial-heavy SaaS landing tropes
62+
- playful consumer-app motion
63+
64+
## Page Notes
65+
66+
### dashboard-home
67+
- Lead with the command-tower sentence and the pain hook.
68+
- Show the operator loop before adoption/router content.
69+
- Include a philosophy band for Prompt / Context / Harness Engineering.
70+
71+
### command-tower
72+
- Make risk and next action obvious above the fold.
73+
- Use dense but calm structure.
74+
75+
### workflow-detail
76+
- Emphasize case identity, verdict, queue posture, and next step.
77+
78+
### run-detail
79+
- Emphasize evidence, replay, incident context, and contract truth.
80+
81+
### desktop-overview
82+
- Mirror the web loop with denser operator affordances.

‎.stitch/designs/README.md‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
# Stitch Design Assets
2+
3+
Stitch MCP is available in this environment but currently blocked by
4+
authentication (`Auth required`). Because of that, this directory contains the
5+
next-best repo-owned fallback:
6+
7+
- canonical `.stitch/DESIGN.md`
8+
- enhanced prompts for the key command-tower surfaces
9+
10+
Once Stitch auth is available, these prompts should be the direct inputs for
11+
screen generation and any resulting HTML/screenshots should be saved back into
12+
this directory.

‎.stitch/designs/command-tower.prompt.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Design a command-center page for CortexPilot's **Command Tower**.
2+
3+
This page is the L0 cockpit for live AI engineering work.
4+
5+
Show:
6+
7+
- risk summary
8+
- priority lanes
9+
- next operator action
10+
- live session posture
11+
- context drawer / filters as a serious instrument panel
12+
13+
The aesthetic must be premium and dark, with clear hierarchy and restrained
14+
motion. Avoid generic monitoring dashboard tropes and avoid colorful noise.

‎.stitch/designs/dashboard-home.prompt.md‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
Build a premium web dashboard home page for **CortexPilot**, the command tower
2+
for AI engineering.
3+
4+
The page must feel like a briefing deck for an L0 control plane, not a generic
5+
admin dashboard and not a marketing-only landing page.
6+
7+
Requirements:
8+
9+
- dark command-center palette with one green action accent
10+
- headline: `The command tower for AI engineering`
11+
- pain hook: `Stop babysitting AI coding work`
12+
- immediately show the operator loop: plan / delegate / track / resume / prove
13+
- include a second section that explains Prompt Engineering, Context
14+
Engineering, and Harness Engineering
15+
- make Workflow Cases, Command Tower, and Proof & Replay the three dominant
16+
product surfaces
17+
- no emoji icons
18+
- no fake KPI cards
19+
- no purple neon
20+
- no testimonial carousel
21+
22+
Use:
23+
24+
- Display font feel: Space Grotesk
25+
- Body font feel: Manrope
26+
- Dense but readable layout
27+
- Premium, asymmetric composition

‎.stitch/designs/desktop-overview.prompt.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
Design a **desktop overview** surface for CortexPilot's macOS shell.
2+
3+
It should mirror the web command-tower story, but feel denser and more
4+
operator-focused.
5+
6+
Show:
7+
8+
- quick start loop
9+
- live posture
10+
- workflow/run jump points
11+
- command-tower identity
12+
13+
It should feel like a serious command deck, not a mobile consumer app or a
14+
generic Electron utility.

‎.stitch/designs/run-detail.prompt.md‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
Design a **Run Detail / Proof & Replay** page for CortexPilot.
2+
3+
This page is the truth room.
4+
5+
Priorities:
6+
7+
- evidence before trust
8+
- compare and replay clearly visible
9+
- incident context near the top
10+
- contract and binding truth visible but secondary to evidence
11+
- operator next step always legible
12+
13+
Style:
14+
15+
- command-center dark palette
16+
- premium, exact, anti-generic
17+
- no event/conference metaphors
18+
- no fake statistics

‎.stitch/designs/workflow-detail.prompt.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
Design a **Workflow Case detail** page for CortexPilot.
2+
3+
This is the durable operating record for one case. It should make it obvious:
4+
5+
- what the case is
6+
- what verdict it currently holds
7+
- whether queue/resume is possible
8+
- what the next operator step is
9+
10+
Use a strong summary rail, queue posture panel, read-model panel, related runs,
11+
and a compact proof/compare entry area.
12+
13+
Avoid product-detail/review-page tropes, fake badges, and decorative trust UI.

‎configs/root_allowlist.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
".nvmrc",
1414
".pre-commit-config.yaml",
1515
".runtime-cache",
16+
".stitch",
1617
"AGENTS.md",
1718
"CHANGELOG.md",
1819
"CLAUDE.md",
@@ -29,6 +30,7 @@
2930
"configs",
3031
"contracts",
3132
"docs",
33+
"design-system",
3234
"examples",
3335
"infra",
3436
"package.json",

‎design-system/MASTER.md‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
# CortexPilot Design System
2+
3+
## Purpose
4+
5+
This file is the canonical design system for CortexPilot's public front door,
6+
dashboard, and desktop control-plane surfaces.
7+
8+
Read this as the design constitution for one specific product:
9+
10+
- **Product identity**: an L0 AI engineering command tower
11+
- **Primary emotion**: calm authority under pressure
12+
- **Secondary emotion**: precise forward motion
13+
- **Never become**: a generic admin panel, a neon AI demo, or a marketing-only landing page
14+
15+
If a page-specific override exists under `design-system/pages/`, that override
16+
may tighten or specialize the rules below, but it may not contradict the core
17+
product identity.
18+
19+
## Atmosphere
20+
21+
CortexPilot should feel like an architecture studio crossed with a mission
22+
control room.
23+
24+
- **Density**: medium-high on control surfaces, medium on the public front door
25+
- **Variance**: asymmetric but disciplined
26+
- **Motion**: restrained, purposeful, low-noise
27+
- **Mood words**: deliberate, governed, exact, premium, anti-generic
28+
29+
Interpretation:
30+
31+
- The public front door should feel like a command deck briefing, not a SaaS
32+
hero with filler marketing sections.
33+
- The dashboard and desktop should feel like a cockpit: clear hierarchy, fast
34+
scanning, immediate understanding of what is happening now.
35+
36+
## Typography
37+
38+
- **Display / section headers**: `Space Grotesk`
39+
- **Body / operational text**: `Manrope`
40+
- **Code / IDs / timestamps / status tokens**: `JetBrains Mono`
41+
42+
Rules:
43+
44+
- Never use `Inter` for CortexPilot hero or cockpit surfaces.
45+
- Headings should signal confidence through weight and spacing, not giant scale.
46+
- Monospace belongs to machine facts only: run IDs, queue IDs, lane names,
47+
file refs, timestamps, contract artifacts.
48+
- Long prose blocks should stay narrow and readable; control-plane pages should
49+
bias toward short labels and dense lists.
50+
51+
## Color System
52+
53+
Use a dark-neutral command palette with one restrained action accent.
54+
55+
| Role | Token | Value | Usage |
56+
| --- | --- | --- | --- |
57+
| Canvas | `--cp-bg` | `#0B1220` | app shell, dashboard canvas, desktop shell |
58+
| Surface | `--cp-surface` | `#111A2E` | cards, drawers, panels |
59+
| Surface Raised | `--cp-surface-raised` | `#17233B` | hover state, active cards, layered panels |
60+
| Ink | `--cp-ink` | `#E8EEF8` | primary text |
61+
| Muted | `--cp-muted` | `#9FB0C8` | descriptions, supporting labels |
62+
| Border | `--cp-border` | `rgba(159,176,200,0.16)` | separators, card outlines |
63+
| Accent | `--cp-accent` | `#1FB981` | primary CTA, healthy motion, selected action |
64+
| Warning | `--cp-warn` | `#E59A2F` | caution, queued attention |
65+
| Danger | `--cp-danger` | `#D95C5C` | failure, broken flow, hard alerts |
66+
67+
Rules:
68+
69+
- Keep one accent color only.
70+
- No purple glow, no neon blue gradients, no generic AI chroma.
71+
- Avoid pure black and pure white. CortexPilot should feel calibrated, not harsh.
72+
- Healthy status can use green, but do not let the whole UI become “green dashboard”.
73+
74+
## Layout Principles
75+
76+
- No generic three-equal-feature-card rows as the default answer.
77+
- Prefer a **briefing layout**:
78+
- headline and pain hook
79+
- one concise operator loop
80+
- one proof-oriented explanation
81+
- one adoption router
82+
- On control surfaces, favor:
83+
- top summary rail
84+
- primary action strip
85+
- left-to-right operational scan
86+
- explicit “what is blocked / what is next / where truth lives”
87+
- Group pages by operator intent, not by raw data type.
88+
- Use spacing via `gap-*`, not `space-*`.
89+
- Use semantic color tokens, not raw Tailwind color literals.
90+
91+
## Component Rules
92+
93+
### Buttons
94+
95+
- Primary buttons should feel decisive, not loud.
96+
- Hover can slightly lift or brighten; avoid scale-jump hover behavior.
97+
- No emoji icons. Use purposeful SVG icons only.
98+
99+
### Cards
100+
101+
- Cards exist to communicate hierarchy, not because every dashboard needs cards.
102+
- High-density surfaces may use stacked bands, bordered sections, or inset
103+
panels instead of card farms.
104+
105+
### Tables and Lists
106+
107+
- Lists should optimize scan speed.
108+
- Important state should be visible in the first two rows/columns or the top summary band.
109+
- Dense surfaces must still preserve whitespace around critical actions.
110+
111+
### Empty / degraded states
112+
113+
- Never use cute filler copy.
114+
- Always answer:
115+
- what is missing
116+
- why it matters
117+
- what the next operator action is
118+
119+
## Motion
120+
121+
- Motion exists to reinforce operational state, not to entertain.
122+
- Default transitions: 150-250ms.
123+
- Use opacity / transform only.
124+
- Good motion examples:
125+
- live refresh resumed/paused feedback
126+
- lane state shift
127+
- drawer reveal
128+
- compare/proof section emphasis
129+
- Bad motion examples:
130+
- bouncing arrows
131+
- endless decorative shimmer
132+
- giant pulse effects around CTAs
133+
134+
## Page Hierarchy Rules
135+
136+
The product must visually teach this loop:
137+
138+
1. **Plan**
139+
2. **Delegate**
140+
3. **Track**
141+
4. **Resume**
142+
5. **Prove**
143+
144+
That means:
145+
146+
- PM entry should feel like the start of the loop.
147+
- Command Tower should feel like the active cockpit.
148+
- Workflow Cases should feel like the durable operating record.
149+
- Run Detail / Compare should feel like the truth and replay room.
150+
- Policies / Agents / Contracts should feel like inspection and governance surfaces.
151+
152+
## Copy Style
153+
154+
- Prefer exact, operator-grade language over brand fluff.
155+
- Strong hooks are allowed, but must stay truthful.
156+
- Good:
157+
- `Stop babysitting AI coding work.`
158+
- `The command tower for AI engineering.`
159+
- `Proof before trust.`
160+
- Bad:
161+
- `Scroll to explore`
162+
- `Experience the future`
163+
- fake KPIs / fake SLAs / fake uptime banners
164+
165+
## Anti-Patterns
166+
167+
Never ship these into CortexPilot:
168+
169+
- emoji icons
170+
- neon purple/blue AI gradients
171+
- generic glassmorphism for everything
172+
- fake metrics, fake percentages, fake activity charts
173+
- placeholder enterprise testimonial sections
174+
- “3 equal cards and a CTA” as the default dashboard/home layout
175+
- filler marketing verbs without operational meaning
176+
- dashboard chrome that hides Workflow Cases / Agents / Contracts as an afterthought
177+
178+
## Implementation Notes
179+
180+
- If `shadcn` patterns are used, prefer composition from existing primitives.
181+
- Use semantic colors and `gap-*`.
182+
- Keep overlay and z-index behavior minimal and inherited.
183+
- The dashboard and desktop should share a stable visual language, even if
184+
density differs.

0 commit comments

Comments
 (0)