One inline-SVG cut-S mark + "Steve·AI" with the AI in the primary — rendered identically on every surface (this rail, every page). Never a # or placeholder.
Steve·AI
cut-S · --indigo gradient
on dark
same mark, any surface
PP.steveMark() — same path + gradient everywhere. The rail mark MUST match this mark exactly.
02 · Color
Tokens & status
Primary violet is for links/accents only — never a status. Status colors carry the state language below.
Primary · Ultraviolet
--indigo #6D28D9
Ink
--ink #0B1020
Passed
--green #16A34A
Running
--amber #D97706
Failed
--red #DC2626
Not started
--grey #9AA3B2
Muted
--muted #5B6478
Page
--bg #F6F7FB
03 · State
The state language
Every status maps to one meaning. A gate that didn't run is "not started" (grey), never failed (red); indigo is never a status.
Passed / doneran and passed
Faileda gate rejected
Running / attentionamber
Not startedhasn't run — not red
Checks pendinginstalled, not run yet
Skipped / not requireddashed ghost, no color
04 · Type & space
Fonts, scale & rhythm
Display Space Grotesk (titles), body Inter, mono JetBrains Mono (numbers / scores / paths only). Spacing 4·8·12·16·24·32; radius sm/md/pill.
Dev Team 9.8 / 9.75
Display · body · mono — one rhythm everywhere.
05 · Controls
Buttons, inputs & chips
The atomic building blocks — all token-driven, no one-off styles. The active card, drawers and filters compose from these.
Score pill — ONLY on Plan (by Critic) & Build (by QA)
Plan 9.8 / 9.75 ✓Build 8.2 / 9.0 ✗
Cost & timing — subscription = $0 billed + API-equivalent estimate (never blended); missing time = "not recorded", never 0s
billed $0.00API-equiv $0.42time 2m 14stime not recorded
Project / area tag
Window UIFrontend
Section tabs — scrollable; soft-violet ‹ › arrows appear when there's more, and the active tab auto-scrolls into view (this strip is narrowed so you can see it here)
Menu new-dot — the "WHERE": a violet dot on the rail item whose area has new content. Shows when there are unseen items, clears once seen, stays visible when the rail is collapsed. (Live right now on "Plan & Progress" in the rail.)
Plan & Progress
Builder Home
New badge (corner) — the "WHAT" at item level: a reusable corner tag that marks a newly-added card/item; clears when seen
New
New review card
A reusable corner badge marks a newly-added item; W7 decides when it appears and clears.
Section new-banner — the "WHAT" at section level: a slim bar with a NEW badge + left violet accent, pinned over the new section/element. Dismissible (×); bound to a real new item, never a global announcement.
NewAtomic components just landed in this section.
06 · Components
The living gallery
Foundation above is built. Each component renders here as we build it — shell → active card → drawers — so the whole system lives on one page. Specs: FOUNDATION-CONTRACT.md · DATA-CONTRACT.md · COMPONENT-DATA-MAP.md (what real field feeds each component).
Brand · tokens · state · type built
Left menu (rail) this page
Top bar + shrink this page
Section tabs (scrollable) this page
Breadcrumbs this page
Account control this page
Menu new-dot (where) this page
New badge / tag (corner) this page
Section new-banner (what) this page
Page shell this page
Button (primary / ghost) this page
Select / dropdown this page
Status chip this page
Score pill this page
Cost metric this page
Timing metric this page
Project / area tag this page
Active Card shell next
Stage row / card next
Drawer shell to build
Story step (relay) to build
Inspector pane to build
07 · Shell
Behavior & responsive
The shell (rail + top bar + breadcrumbs) is ONE shared component every page uses — grounded in Apple HIG, Material 3, NN/g. Try it: collapse the rail, scroll, open it on a phone or tablet.
Rail — tablet/phone (≤1024)off-canvas; one hamburger, no 2nd toggle
Top barcompact; shrinks on scroll, no jitter
Breadcrumbsstay visible incl. mobile
Accountpinned via 100dvh + safe-area
Anchorsoffset = live header height
The rule: the Style Guide is the FIRST page in the menu and the single source. Pages pull brand/tokens/components from here, foundation up — no page hardcodes its own or draws its own nav/title. New locked patterns get registered here. The active card + drawers live on "Plan & Progress", built on this foundation.