The locked visual language for Quorum — a floating-panels grammar over a digital backdrop, with a six-agent presence model, a 19-step methodology rail, and a composer anatomy that every screen inherits. Specified by Kinsley, cross-checked against the live codebase on every rebuild.
_bmad-output/planning-artifacts/design-briefs/_token-preamble.md — locked spec (Kinsley)app/src/app/globals.css — live token implementationapp/src/app/layout.tsx — live font wiringapp/src/components/ui/ — live component inventoryThis page renders the locked spec as the narrative skeleton, with sections tagged live for what the codebase shows right now. Where the live read diverges from the locked spec, the page surfaces both — no aspirational handwaving.
The page is structured from the 14-section token preamble Kinsley writes against. Each section is the canonical answer to one question — what does Quorum look like, what colors, what surfaces, what agents, what composer. Where possible, the section renders a real specimen (not a screenshot, not a sketch — the actual CSS).
globals.css to the preamble.Saturated glass panels floating over a digital backdrop. Calm, not loud. Apple HIG macOS sensibility — hairline borders, frosted blurs on overlays, no heavy shadows on chat. Light mode exists as a "morning studio" register but dark is the primary brief.
Three radial-gradient washes over a 160° linear gradient between two near-black blues, with an 80×80 grid mask and a 2px scanline overlay at <0.018 white alpha. Layered on top: the Quorum signature — a wireframe blob (the same one bleeding off the top-right corner of every page in this export). Reduced-motion clients see a single static frame; otherwise the live canvas runs 480 Fibonacci-distributed nodes + 200-point plexus with subtle drift.
frozen prop forces static even when the OS preference is off — used on long scrolling pages where canvas paint cost matters.The system is a floating-panels grammar, not a flat card stack. Every panel is semi-transparent over the backdrop, with a hairline border, backdrop-filter blur, and an inset highlight + soft drop shadow. Panels float — they don't share edges. Gaps between panels are 12–24px.
Cyan = human / active. Warm sand = agent. Amber = override / audit (never decorative). No pure black, no pure white. Use the listed tokens, not hex codes.
globals.css uses a V1 token set (--background, --accent, etc.) — not the --q-* system above. Story 2.x is the token pass that reconciles them.UI body + headings: Inter (or system-ui). 14px base, 1.5 line height. Mono: JetBrains Mono — for IDs, timestamps, step labels, eyebrow chips, the "telemetry" feel. Don't: custom display fonts, decorative serifs, or any Google Display font other than these two.
8px grid. 12–16px vertical rhythm between message rows. Radii ramp from small UI through large hero, with 100px for pills.
The 19-step pipeline rendered with the exact markup from app/src/app/w/[workspaceId]/page.tsx — .q-step items with .marker + .name children, the 10 · Delivery sub-section header, and the four build-tag grid (10a Build / 10b QA / 10c Security / 10d UAT). Two presentations: the default expanded view shown in the team room, and the collapsed rail (marker only) used when the left nav is toggled in.
.is-current · .is-done · .is-later — applied to the <a> element directly..num + .name. 4-up grid under the 10 · Delivery section header.body[data-nav="collapsed"] hides .name; markers become standalone tiles.Live read of TEAM_AGENTS in _gen_bmad_exports.py — same source the team page uses. Agents are organized by which Three-Pillar lens they own (Desirability / Feasibility / Viability), with secondary pillars listed where applicable. BMad-installed agents and custom Dev Team agents (Kinsley, Luca, Cipher, Damien, Jaymes, Quentin) all surface here automatically.
Owns the desirability lens. Mary runs the user research, frames the personas, pressure-tests claims, and signs off on whether the evidence is strong enough to clear the gate.
Tarantino-level intentionality applied to product copy. Quentin reads copy the way an editor reads a manuscript and a product the way a systems thinker reads a graph. He follows pr…
Strategic UX and design-thinking partner. Freya runs trigger-mapping workshops that connect business goals to user psychology, then turns the triggers into structured scenario outl…
Facilitates structured human-centered exercises. Maya runs the empathize → define → ideate → prototype → test cycle as a guided session with artifacts at each step, not a vibes mee…
Forty-plus ideation techniques on tap. Carson opens the solution space when desirability research surfaces a need with no obvious answer, then helps the team converge.
Strategic business analyst and product discovery partner for the WDS workflow. Saga focuses on the project's earliest moments — establishing context, classifying complexity, routin…
Systematic problem-solving methodologies on tap. Dr. Quinn doesn't just brainstorm — he picks the right structured technique for the problem class, then walks the team through it w…
Turns persona research into the narrative spine of the pitch and case study. Sophia runs Hero's Journey, SCQA, Pixar, and before-and-after frames to surface narrative gaps.
Owns the feasibility lens. Winston produces the architecture decision records, identifies the build path, names the blockers, and signs off on whether the team can actually ship wh…
Databases, APIs, auth, deployment, modern backend platforms. Damien teaches as much as he builds, leaving the user with mental models that survive past the current task.
Pixel-perfect implementation that holds up under interaction stress. Jaymes interprets designs, builds the UI, and explains the trade-offs as he goes.
Product designer covering UX, visual design, design systems, and end-to-end design ownership. Kinsley audits whether a proposed pattern fits the existing token / component inventor…
Motion as a temporal design layer, not as decoration. Luca specs transitions, micro-interactions, and animation curves with timing, easing, and reduced-motion fallbacks named.
Test strategy that scales from ATDD to NFR assessment. Murat writes the failing tests first, then watches whether the team can make them pass.
Penetration tester and security auditor with the assumption that bypass is the goal, not the exception. Cipher's audit is a hard gate. Critical / high issues block ship until resol…
Test automation and coverage at the integration / e2e layer. Quinn turns Murat's strategy into running tests that ship.
Elite full-stack developer for rapid spec and implementation. Barry is the solo-dev mode — when you don't need the full team handoff and just want an experienced engineer who can t…
Knowledge curator who keeps the artifact tree honest. Paige indexes, shards, and distills the documentation set so that future readers — humans or agents — find what they need with…
Story-level implementation. Amelia executes against context-filled story specs and surfaces feasibility flags when a spec needs decomposition.
Owns the viability lens. John produces the PRD, defines the success criteria, weighs strategic fit, and signs off on whether the business case clears the bar.
Strategic positioning, business-model innovation, competitive disruption analysis. Victor maps the disruptor lens against the proposed product to surface where the bet is and isn't…
Visual communication and pitch-deck construction. Caravaggio translates the business case into 10-15 high-density slides that hold up under cold-room scrutiny.
Sprint-level viability check. Bob translates viability claims into a release rhythm and surfaces capacity / horizon mismatches before they become slipped commitments.
Regulatory, compliance, UPL exposure, and ethics review across the whole stack. Atticus surfaces legal blockers before they become product blockers — accessibility as legal floor (…
When agents work, the user sees motion or status — never a silent spinner. Each signal below is rendered as a live specimen with the exact tokens it ships with.
winston is reviewing desirability evidence
The interview pool shows three convergent signals on this concept
dot7×7 circle · --q-a fill · 8px glow · 1.6s ease-in-out pulsecaptionJetBrains Mono · 10.5px · UPPERCASE · 0.06em letterspacing · --q-fg-mutedcursor2×18 bar · --q-a · 1.05s steps(2) blinkqueued--q-fg-muted on --q-surface-2 at 0.5 alpha · --q-borderrunning--q-h-strong on --q-h-soft · --q-h-linefailedoklch(72% 0.16 28) red-orange · same on its tinted bg + lineshape100px radius (pill) · 0.62rem mono · 0.18×0.55rem padding · UPPERCASEInsightcyan tint · evidence-backed observationRiskred-orange tint · something to mitigate before lockingAssumptionamber tint · needs verification before progressingDirectiongreen tint · suggested next moveIncluded ✓green · the human accepted this finding into the curated setFlagged ◆amber · marked for further investigation, not removedOpenneutral · still being reviewedprimary--q-h fill · cyan-bg-deep text · 8px radius · contains ⌘↵ kbdoutline-pilltransparent · cyan border · 100px radius · 11.5px weight 600includegreen-soft bg · green border + textflagamber-soft bg · amber border + textremovered-orange-soft bg · red-orange border + textoverrideamber outline · only on composer · "take control" semanticsThe shipped composer. Three rows stacked: a context strip (target chip on the left · Override link + outline-pill Lock CTA on the right), an input row with attach / @ mention / send icons, and a hint row with mono kbd glyphs. Markup mirrors .q-composer.q-composer--stacked in quorum-app.css.
.q-composer-target — pill, mono 10px, 0.06em letterspacing, cyan-tinted. Names who the message is addressed to ("All · Desirability", "@kinsley", etc.)..q-composer-override-link — text-button, mono 10px, subtle until hover (then amber). Opens the override flow for the current step..q-btn--outline-pill — cyan outline pill, 11.5px weight 600. Label changes per step (Lock idea · 2a, Confirm vision · 3, Continue to PRD · 4)..q-composer-row — darker inset panel, hairline border, focus-within ring at --q-h-line. Holds attach/mention/input/send..q-composer-icon-btn — 28×28, subtle until hover (then cyan + cyan-soft bg). Attach (paperclip) + Mention (at-sign)..q-composer-send — 30×30 square, cyan-soft fill, cyan border. Hover fills fully + adds cyan glow..q-composer-hint — mono 10px, faint. Always-visible keyboard contract.:focus-within; the input row alone gets a 2px ring on its own focus.Every cell below uses real HTML controls — type into the inputs, click the checkboxes and radios, fire the toasts, open the modal preview. State matrices show default / hover / focused / filled / error / disabled. The screen-design library (composer, stage card, agent message, probe grid) lives in design briefs until promoted into ui/.
src/components/ui/Modal.tsxGeneric modal shell. Escape closes, backdrop click closes, body scroll locks while open, first focusable inside receives focus on mount. Click the trigger — opens the modal preview.
Click — opens the live modal preview to the right.
Removing Jay Frank will revoke their access to this workspace immediately. They'll keep any data they exported. Continue?
src/components/ui/Select.tsxNative select for the at-rest states, listbox toggle for the open-state demo. Click the dropdown — it actually opens.
src/components/ui/TextField.tsxSingle-line text input with label, optional helper text, and an error slot. Type into any cell below — they're real inputs.
src/components/ui/Toast.tsxTransient status banner that fires from any client action. Click 'Fire toast' under each variant to see it animate in from the corner.
Custom-styled checkbox over a native <input>. Click to toggle — they're real and remember state.
Three options, one selected. Native radio under the hood with custom dot styling. Click another option to switch.
The full button family — primary CTA, outline pill, the three curation buttons (Include / Flag / Remove), and the Override. Hover and click to see states.
The shipped composer (a.k.a. q-composer-v2). Three-row stacked layout: context strip · input row · hint row. Lives at the bottom of every team-room and step screen.
ICON_SVGSThe 15-glyph icon library used across the planning chrome (page nav CTAs, change-log entries, the Sign out footer). Stroke-based, 24px viewBox, 1.75 weight. Hover any cell to see the name.
The agent-conversation pattern that lives in the right rail of every team-room screen. Each row is one message: agent avatar + name + timestamp + body. Streaming messages get a pulsing dot beside the name and a typing cursor at the end of the body.
Before we evaluate desirability, I want to pressure-test the framing. The pitch says "AI product team" — what specifically gets replaced and what doesn't?
Quoting J7's interview: "I want the synthesis without being a project manager." That's the keep — the methodology. The drop is the rote artifact-generation.
The interview pool shows three convergent signals on this concept
Non-negotiables for every screen. Contrast is verified at the LIVE panel color (not the pristine surface token) because the glass shows the backdrop through.
Body text vs. the actual rendered glass panel — checked with axe and visual inspection. The blur changes effective contrast, so the synthetic token math isn't enough.
Every interactive control reachable. Disabled states use aria-disabled="true" + visual styling, not the native disabled attribute — so tooltips stay reachable by Tab.
Native title for V1; richer custom tooltip post Story 2.x. Screen-reader labels match the visual label.
Visible at --q-h-line (cyan) on every interactive surface. Inputs get a 3px ring on :focus-within; the composer wraps that with a softer wrapping ring.
Every animation respects prefers-reduced-motion: reduce — the pulsing dot, the typing cursor, the digital-world canvas, the disclosure animations all switch to static or near-instant equivalents when the user has reduced motion turned on.
Where does the user choose? Today, at the OS level — we read the system preference rather than ship an in-app toggle. v1 surfaces:
An in-app toggle (planned alongside the Story 2.x token pass) will let a user override OS preference per-Quorum-workspace without affecting the rest of their system. Today the OS reading is the source of truth — same approach Linear, Notion, and Figma take.
Per-screen anatomy briefs, auto-read from design-briefs/ on every export rebuild. Shipped reference briefs document what's live (layout decisions, copy strings, the iteration history since the original Claude Design bundle). Brief-ready specs are the next screens queued for Claude Design — paste the _token-preamble.md + the screen reference + the new brief together at the top of every session.
**For Claude Design.** This brief documents what's **already live** in code at `/w/<id>`. Paste this alongside `_token-preamble.md` at the start of any new Claude Design session so future screens stay consistent with what's shipped. **Do not regenerate this screen** — it exist…
design-briefs/step-1-describe-shipped-reference.md**For Claude Design.** Paste `_token-preamble.md` first, then this brief.
design-briefs/step-2a-concept-alignment.md**For Claude Design.** Paste `_token-preamble.md` first, then this brief.
design-briefs/step-2b-generated-concepts.md**For Claude Design.** Paste `_token-preamble.md` first, then this brief.
design-briefs/step-2c-organize-the-vision.md**For Claude Design.** Paste `_token-preamble.md` first, then this brief.
design-briefs/step-3-three-pillar-analysis-desirability.mdThese moves get a design rejected. The point isn't to be precious — it's that Quorum has a specific identity, and these patterns erase it.