bmad-method 6.7.1-next.0 → 6.7.1-next.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/.claude-plugin/marketplace.json +1 -1
  2. package/package.json +1 -1
  3. package/removals.txt +5 -0
  4. package/src/bmm-skills/1-analysis/bmad-product-brief/SKILL.md +1 -1
  5. package/src/bmm-skills/2-plan-workflows/bmad-agent-ux-designer/customize.toml +1 -1
  6. package/src/bmm-skills/2-plan-workflows/bmad-prd/SKILL.md +5 -3
  7. package/src/bmm-skills/2-plan-workflows/bmad-prd/assets/prd-template.md +4 -7
  8. package/src/bmm-skills/2-plan-workflows/bmad-prd/assets/prd-validation-checklist.md +4 -4
  9. package/src/bmm-skills/2-plan-workflows/bmad-prd/references/headless.md +2 -2
  10. package/src/bmm-skills/2-plan-workflows/bmad-ux/SKILL.md +87 -0
  11. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/color-themes.md +9 -0
  12. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/design-directions.md +9 -0
  13. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/design-example-editorial.md +158 -0
  14. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/design-example-mobile.md +93 -0
  15. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/design-example-shadcn.md +109 -0
  16. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/excalidraw-wireframe.md +19 -0
  17. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/experience-example-mobile.md +112 -0
  18. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/experience-example-shadcn.md +133 -0
  19. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/headless-schemas.md +84 -0
  20. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/key-screens.md +29 -0
  21. package/src/bmm-skills/2-plan-workflows/bmad-ux/assets/validation-report-template.html +319 -0
  22. package/src/bmm-skills/2-plan-workflows/bmad-ux/customize.toml +100 -0
  23. package/src/bmm-skills/2-plan-workflows/bmad-ux/references/creative-tools.md +19 -0
  24. package/src/bmm-skills/2-plan-workflows/bmad-ux/references/design-md-spec.md +50 -0
  25. package/src/bmm-skills/2-plan-workflows/bmad-ux/references/headless.md +37 -0
  26. package/src/bmm-skills/2-plan-workflows/bmad-ux/references/validate.md +115 -0
  27. package/src/bmm-skills/module-help.csv +1 -1
  28. package/src/core-skills/bmad-spec/SKILL.md +126 -0
  29. package/src/core-skills/bmad-spec/assets/headless-schemas.md +33 -0
  30. package/src/core-skills/bmad-spec/assets/spec-template.md +49 -0
  31. package/src/core-skills/bmad-spec/customize.toml +53 -0
  32. package/src/core-skills/module-help.csv +1 -1
  33. package/tools/skill-validator.md +1 -19
  34. package/tools/validate-skills.js +1 -40
  35. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/SKILL.md +0 -75
  36. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/customize.toml +0 -41
  37. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-01-init.md +0 -135
  38. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-01b-continue.md +0 -127
  39. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-02-discovery.md +0 -190
  40. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-03-core-experience.md +0 -217
  41. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-04-emotional-response.md +0 -220
  42. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-05-inspiration.md +0 -235
  43. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-06-design-system.md +0 -253
  44. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-07-defining-experience.md +0 -255
  45. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-08-visual-foundation.md +0 -225
  46. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-09-design-directions.md +0 -225
  47. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-10-user-journeys.md +0 -242
  48. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-11-component-strategy.md +0 -249
  49. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-12-ux-patterns.md +0 -238
  50. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-13-responsive-accessibility.md +0 -265
  51. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/steps/step-14-complete.md +0 -177
  52. package/src/bmm-skills/2-plan-workflows/bmad-create-ux-design/ux-design-template.md +0 -13
  53. package/src/core-skills/bmad-distillator/SKILL.md +0 -177
  54. package/src/core-skills/bmad-distillator/agents/distillate-compressor.md +0 -116
  55. package/src/core-skills/bmad-distillator/agents/round-trip-reconstructor.md +0 -68
  56. package/src/core-skills/bmad-distillator/resources/compression-rules.md +0 -51
  57. package/src/core-skills/bmad-distillator/resources/distillate-format-reference.md +0 -227
  58. package/src/core-skills/bmad-distillator/resources/splitting-strategy.md +0 -78
  59. package/src/core-skills/bmad-distillator/scripts/analyze_sources.py +0 -300
  60. package/src/core-skills/bmad-distillator/scripts/tests/test_analyze_sources.py +0 -204
@@ -20,7 +20,7 @@
20
20
  "skills": [
21
21
  "./src/core-skills/bmad-help",
22
22
  "./src/core-skills/bmad-brainstorming",
23
- "./src/core-skills/bmad-distillator",
23
+ "./src/core-skills/bmad-spec",
24
24
  "./src/core-skills/bmad-party-mode",
25
25
  "./src/core-skills/bmad-shard-doc",
26
26
  "./src/core-skills/bmad-advanced-elicitation",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "$schema": "https://json.schemastore.org/package.json",
3
3
  "name": "bmad-method",
4
- "version": "6.7.1-next.0",
4
+ "version": "6.7.1-next.2",
5
5
  "description": "Breakthrough Method of Agile AI-driven Development",
6
6
  "keywords": [
7
7
  "agile",
package/removals.txt CHANGED
@@ -52,3 +52,8 @@ bmad-bmm-sprint-planning
52
52
  bmad-bmm-sprint-status
53
53
  bmad-bmm-technical-research
54
54
  bmad-bmm-validate-prd
55
+
56
+ # Removed skills (post-v6.7.x)
57
+ # bmad-distillator: superseded by bmad-spec (universal intent distiller with
58
+ # preservation-validated contract for downstream skills).
59
+ bmad-distillator
@@ -61,7 +61,7 @@ Omit keys for artifacts that were not produced.
61
61
 
62
62
  ## Discovery
63
63
 
64
- Conversationally surface what the user brings, why this brief exists, and the domain — echo back how each shapes your approach. Open with space for the full picture: invite a brain dump and ask up front for any source material they already have (memo, deck, transcript, prior brief, slack thread). Read what exists first; ask only what is missing. After the dump, a simple "anything else?" often surfaces what they almost forgot. Drill into specifics only after the broad shape is on the table; premature granular questions interrupt the dump and miss the room. Get a read on stakes early (passion project, internal pitch, investor input, public launch), and let that calibrate how hard you push. During the dump, spawn web-research subagents to ground the picture — landscape, comparables, current state — AI especially, where training data ages by the week. Subagent searches; parent gets a digest. Deep work (full market sizing, exhaustive teardowns) → suggest `bmad-market-research` or `bmad-domain-research`.
64
+ Conversationally surface what the user brings, why this brief exists, the domain, and the form-factor (mobile / web / desktop / multi-surface / hardware / API what *is* this thing) — echo back how each shapes your approach. Open with space for the full picture: invite a brain dump and ask up front for any source material they already have (memo, deck, transcript, prior brief, slack thread). Read what exists first; ask only what is missing. After the dump, a simple "anything else?" often surfaces what they almost forgot. Drill into specifics only after the broad shape is on the table; premature granular questions interrupt the dump and miss the room. Get a read on stakes early (passion project, internal pitch, investor input, public launch), and let that calibrate how hard you push. During the dump, spawn web-research subagents to ground the picture — landscape, comparables, current state — AI especially, where training data ages by the week. Subagent searches; parent gets a digest. Deep work (full market sizing, exhaustive teardowns) → suggest `bmad-market-research` or `bmad-domain-research`.
65
65
 
66
66
  Once stakes are read and the dump is captured, offer the working mode in the user's language:
67
67
 
@@ -57,4 +57,4 @@ principles = [
57
57
  [[agent.menu]]
58
58
  code = "CU"
59
59
  description = "Guidance through realizing the plan for your UX to inform architecture and implementation"
60
- skill = "bmad-create-ux-design"
60
+ skill = "bmad-ux"
@@ -45,13 +45,15 @@ Order: **Brain dump → Stakes calibration → Working mode → mode-scoped work
45
45
  **Working mode.** Offer the choice in the user's language:
46
46
 
47
47
  - **Fast path** — I batch remaining gaps into one or two consolidated questions, then draft the full PRD with `[ASSUMPTION]` tags where I inferred. You review and we iterate. The initial quality depends on how much you gave me upfront.
48
- - **Coaching path** — we walk PM-thinking sections together. Once chosen, I ask which entry point fits: **Vision + Features** (capability-first — for enterprise, dev products, internal tools, anyone who thinks in features), **Personas + Journeys** (user-first — for consumer, UX-heavy, multi-stakeholder products), or *let me suggest* based on what I heard. The chosen entry sets the section order.
48
+ - **Coaching path** — we walk PM-thinking sections together. Once chosen, I ask which entry point fits: **Vision + Features** (capability-first — for enterprise, dev products, internal tools, anyone who thinks in features), **Journey-led** (user-first — for consumer, UX-heavy, multi-stakeholder products; journeys with named protagonists carry persona context inline, no standalone persona section), or *let me suggest* based on what I heard. The chosen entry sets the section order.
49
49
 
50
50
  The workspace persists; stop and resume freely.
51
51
 
52
52
  **Concern scan.** As you read what the user gave you, name the concerns this product actually carries — compliance, integration density, operational SLAs, hardware constraints, public-API contracts, monetization, data governance, whatever applies. The list is open; recognize what's there, do not classify into a fixed shape. These concerns drive which template sections to pull in from the Adapt-In Menu and which to invent when no cluster names them.
53
53
 
54
- **User Journeys are captured, not authored.** When UJs are warranted (consumer / multi-stakeholder B2B / meaningful UX — drop or downscale for internal tooling with a single operator role, regulatory-only updates, hobby/solo, pure technical PRDs), prompt the user to narrate a real session — what the person does, in what order, where it lands — then structure the answer into UJ-N form and confirm.
54
+ **Form-factor.** If not stated in sources, probe mobile / web / desktop / multi-surface / hardware / API.
55
+
56
+ **User Journeys are captured, not authored.** When UJs are warranted (consumer / multi-stakeholder B2B / meaningful UX — drop or downscale for internal tooling with a single operator role, regulatory-only updates, hobby/solo, pure technical PRDs), prompt the user to narrate a real session with a named protagonist (Mary, mom of three — not "the user") — what the person does, in what order, where it lands — then structure the answer into UJ-N form and confirm. Persona context lives inline at the moments that matter; no standalone persona section.
55
57
 
56
58
  ## PRD Discipline
57
59
 
@@ -83,5 +85,5 @@ Tell the user the sequence in one sentence, then walk it. Polish goes last so it
83
85
  4. **Triage open items.** All Open Questions, `[ASSUMPTION]` tags, `[NOTE FOR PM]` callouts. Phase-blockers (would make the PRD unsafe for UX/architecture/epics) surfaced one at a time and resolved; non-blockers deferred with owner + revisit condition logged to `.decision-log.md`. If phase-blocker count is high, flag it.
84
86
  5. **Polish.** Apply `{workflow.doc_standards}` to `prd.md` and `addendum.md` in declared order (structural passes before prose — prose should not polish soon-to-be-cut text). Parallelize across documents, sequential within.
85
87
  6. **External handoffs.** Execute `{workflow.external_handoffs}`; surface returned URLs/IDs. Skip and flag unavailable tools.
86
- 7. **Close.** Set `prd.md` frontmatter `status: final` and `updated` to `{date}` so future invocations distinguish this PRD from in-progress drafts. Record finalization to `.decision-log.md`. Share artifact paths. Common next: `bmad-create-ux-design`, `bmad-create-architecture`, `bmad-create-epics-and-stories`; invoke `bmad-help` for authoritative routing.
88
+ 7. **Close.** Set `prd.md` frontmatter `status: final` and `updated` to `{date}` so future invocations distinguish this PRD from in-progress drafts. Record finalization to `.decision-log.md`. Share artifact paths. Common next: `bmad-ux`, `bmad-create-architecture`, `bmad-create-epics-and-stories`; invoke `bmad-help` for authoritative routing.
87
89
  8. Run `{workflow.on_complete}` if non-empty.
@@ -20,16 +20,13 @@ updated: {YYYY-MM-DD}
20
20
 
21
21
  ## 2. Target User
22
22
 
23
- ### 2.1 Primary Persona
24
- [Vivid but tight. Who they are, how this product fits their context.]
23
+ ### 2.1 Jobs To Be Done
24
+ [Bulleted. Emotional, social, functional, contextual — whichever apply. Even "this is for me as the builder" is a valid framing for a hobby project.]
25
25
 
26
- ### 2.2 Jobs To Be Done
27
- [Bulleted. Emotional, social, functional, contextual — whichever apply. Even "this is for me as the builder" is a valid persona for a hobby project.]
28
-
29
- ### 2.3 Non-Users (v1) *(add when the audience boundary is non-obvious)*
26
+ ### 2.2 Non-Users (v1) *(add when the audience boundary is non-obvious)*
30
27
  [Who this is explicitly not for in v1.]
31
28
 
32
- ### 2.4 Key User Journeys
29
+ ### 2.3 Key User Journeys
33
30
  *Named-persona narratives the product enables. Numbered globally as UJ-1 through UJ-N. FRs reference journeys by ID inline ("realizes UJ-3"); SMs may also cross-reference. If a UX doc already exists, mirror its UJ IDs here and point to the source.*
34
31
 
35
32
  **Default shape:** a named scene with entry state, path, climax, and resolution. Each beat forces specificity the team would otherwise leave implicit — auth assumptions, screen order, what tells the user value landed. Read together as a short narrative; the example below shows the form.
@@ -107,7 +107,7 @@ Look for:
107
107
  - Glossary present; every domain noun used identically across FRs, UJs, SM definitions.
108
108
  - FR / UJ / SM IDs contiguous, unique, and cross-references that resolve.
109
109
  - Each section makes sense pulled out alone — cross-references via Glossary terms, not "see above."
110
- - UJs each name a persona from §2 by exact label; no floating UJs.
110
+ - UJs each have a named protagonist; no floating UJs.
111
111
 
112
112
  For standalone PRDs (no downstream), this dimension matters less — say so.
113
113
 
@@ -115,14 +115,14 @@ For standalone PRDs (no downstream), this dimension matters less — say so.
115
115
 
116
116
  Has the PRD been forced into a shape that doesn't match the product?
117
117
 
118
- - Consumer product / multi-stakeholder B2B / meaningful UX → UJs and personas are load-bearing.
118
+ - Consumer product / multi-stakeholder B2B / meaningful UX → UJs with named protagonists are load-bearing.
119
119
  - Internal tool, single-operator role → capability spec shape; UJs may be overhead; SMs may be operational rather than user-facing.
120
120
  - Regulatory or compliance update → constraint traceability is non-negotiable; UJs may be irrelevant.
121
121
  - Hobby / solo → rigor light, substance bar still applies.
122
122
  - Brownfield → existing-code references must be accurate; new UJs and existing UJs must be distinguished.
123
123
  - Chain-top (feeds UX → architecture → stories) → downstream usability matters more; standalone PRDs can be lighter on traceability.
124
124
 
125
- Flag PRDs that are over-formalized (UJ density for a single-operator tool) or under-formalized (consumer product with no personas or UJs).
125
+ Flag PRDs that are over-formalized (UJ density for a single-operator tool) or under-formalized (consumer product with no UJs).
126
126
 
127
127
  ## Mechanical notes
128
128
 
@@ -131,5 +131,5 @@ Cover these as a tail section, not a primary dimension. They matter for downstre
131
131
  - Glossary drift (case, plural, synonyms across the PRD).
132
132
  - ID continuity (gaps, duplicates, unresolved cross-references).
133
133
  - Assumptions Index roundtrip (every inline `[ASSUMPTION]` indexed; index entries all appear inline).
134
- - UJ persona linkage (each UJ names a defined persona by exact label).
134
+ - UJ protagonist naming (each UJ has a named protagonist carrying context inline).
135
135
  - Required sections present for the agreed stakes and product type.
@@ -18,11 +18,11 @@ When ambiguous, default to interactive.
18
18
  The caller passes inputs in their first message (free-form structured payload; no fixed schema, but every field below should be present when applicable):
19
19
 
20
20
  - `intent` — `"create"`, `"update"`, or `"validate"`. If absent, infer from the artifact set.
21
- - For **Create**: a brief or product spec the LLM works from (plain text, file path, or URL), plus any persona/scope notes; `doc_workspace` if a specific run folder is required (otherwise the workflow binds the default).
21
+ - For **Create**: a brief or product spec the LLM works from (plain text, file path, or URL), plus any user/scope notes; `doc_workspace` if a specific run folder is required (otherwise the workflow binds the default).
22
22
  - For **Update**: the existing `prd.md` path (or a workspace path that contains one), and a change signal (the request: what to change and why).
23
23
  - For **Validate**: the existing `prd.md` path (or workspace path), and optionally a checklist override path. Workspace defaults to the PRD's containing directory.
24
24
 
25
- Anything the caller does not provide is either inferred from inputs/workspace or recorded as `assumptions[]` / `open_questions[]` in the JSON status. Do not invent persona detail, success metrics, or scope decisions to fill gaps — record them.
25
+ Anything the caller does not provide is either inferred from inputs/workspace or recorded as `assumptions[]` / `open_questions[]` in the JSON status. Do not invent user detail, success metrics, or scope decisions to fill gaps — record them.
26
26
 
27
27
  ## General
28
28
 
@@ -0,0 +1,87 @@
1
+ ---
2
+ name: bmad-ux
3
+ description: Plan UX patterns and design specifications. Use when the user says "lets create UX design" or "create UX specifications" or "help me plan the UX"
4
+ ---
5
+ # BMad UX
6
+
7
+ ## Overview
8
+
9
+ You are a master UX facilitator. **Elicit and capture** the user's vision, never impose yours. Probe like a senior practitioner; never volunteer colors, patterns, or directions. Render options via creative tools when seeing helps; the picks are the user's.
10
+
11
+ Produce two peer contracts: **`DESIGN.md`** (visual identity per the [Google Labs spec](https://github.com/google-labs-code/design.md) — owns *how it looks*) and **`EXPERIENCE.md`** (information architecture, behavior, states, interactions, accessibility, journeys — owns *how it works*). EXPERIENCE.md cross-references DESIGN.md tokens by name using `{path.to.token}` syntax. Both spines win on conflict with any mock, wireframe, or import.
12
+
13
+ ## The DESIGN.md spine
14
+
15
+ Per the [Google Labs spec](https://github.com/google-labs-code/design.md). YAML frontmatter tokens (**colors** · **typography** · **rounded** · **spacing** · **components**) + markdown body in canonical order: **Brand & Style** · **Colors** · **Typography** · **Layout & Spacing** · **Elevation & Depth** · **Shapes** · **Components** · **Do's and Don'ts**. Sections omittable; order locked when present. Spec rules: `references/design-md-spec.md`. Shape: read every entry in `{workflow.design_md_examples}`.
16
+
17
+ ## The EXPERIENCE.md spine
18
+
19
+ Always: **Foundation** (form-factor, UI system when present; DESIGN.md is the visual identity reference) · **Information Architecture** · **Voice and Tone** (microcopy — brand voice lives in DESIGN.md.Brand & Style) · **Component Patterns** (behavioral — visual specs live in DESIGN.md.Components) · **State Patterns** · **Interaction Primitives** · **Accessibility Floor** (behavioral — visual contrast lives in DESIGN.md) · **Key Flows** (named-protagonist journeys with a climax beat).
20
+
21
+ When triggered: **Inspiration & Anti-patterns** · **Responsive & Platform**.
22
+
23
+ Invent sections for product-specific concerns. Shape: read every entry in `{workflow.experience_md_examples}`.
24
+
25
+ When Foundation names a UI system (shadcn, MUI, native UIKit, Compose, internal design system), both spines inherit from it; DESIGN.md tokens reference or extend the system's defaults, EXPERIENCE.md specifies only the behavioral delta.
26
+
27
+ ## Sources
28
+
29
+ UX may lead, follow, or stand alone. Inherit `sources:` by reference; the spines hold design and experience decisions, not duplicates of upstream product content.
30
+
31
+ ## On Activation
32
+
33
+ 1. Resolve customization: `python3 {project-root}/_bmad/scripts/resolve_customization.py --skill {skill-root} --key workflow`. On failure, read `{skill-root}/customize.toml` directly and use defaults.
34
+ 2. Run `{workflow.activation_steps_prepend}`. Treat `{workflow.persistent_facts}` as foundational context (entries prefixed `file:` are loaded). `{workflow.external_sources}` is an org-configured registry of internal tools; consult them alongside generic web research on the same triggers, org tools preferred when their directive matches.
35
+ 3. Load `{project-root}/_bmad/bmm/config.yaml` (+ `config.user.yaml` if present). Resolve `{user_name}`, `{communication_language}`, `{document_output_language}`, `{planning_artifacts}`, `{project_name}`, `{date}`. Missing keys → neutral defaults; never block.
36
+ 4. If headless, follow `references/headless.md` for the whole run. Otherwise greet the user **by name** using `{user_name}` and **in their language** using `{communication_language}` — and stay in `{communication_language}` for every turn. In the greeting, let the user know `bmad-party-mode` and `bmad-advanced-elicitation` are always available. Then scan for misroute on the first message: PRD → `bmad-prd`; architecture → `bmad-create-architecture`; game UX → BMad GDS; agent/skill → `bmad-workflow-builder`; brief → `bmad-product-brief`.
37
+ 5. Detect intent: **Create**, **Update**, **Validate**. For Create, before binding a fresh workspace, scan `{workflow.ux_output_path}` for prior in-progress runs (folders matching `{workflow.run_folder_pattern}` whose `DESIGN.md` frontmatter `status` is not `final`) and offer to resume rather than starting over.
38
+ 6. Run `{workflow.activation_steps_append}`.
39
+
40
+ ## Modes
41
+
42
+ **Create.** Bind `{doc_workspace}` to `{workflow.ux_output_path}/{workflow.run_folder_pattern}/`. Create `.working/`, `imports/`, `.decision-log.md`, `DESIGN.md` (frontmatter only), and `EXPERIENCE.md` (frontmatter only). Run Discovery → Finalize.
43
+
44
+ **Update.** Read spines + log + sources. Create the log if missing — this update is entry one. Surface conflicts with prior decisions. Run Finalize.
45
+
46
+ **Validate.** See `references/validate.md`.
47
+
48
+ ## Discovery
49
+
50
+ **Capture; do not author.** The spines are distilled at Finalize. Decisions → `.decision-log.md` (canonical). Creative-tool artifacts → `.working/`. User-supplied visuals (Figma, sketches, brand decks, image folders) → `imports/`, one log line per item. Spines win on conflict.
51
+
52
+ **Source scan.** Glob `{planning_artifacts}/` for candidate input paths; surface paths only — never read content in the parent. User confirms which apply or adds others; subagent-extracts on confirm.
53
+
54
+ Brain dump first — even when the user opens with paragraphs (that's intake). Subagent-extract big docs. One "anything else?" probe. Stakes: hobby / internal / consumer / regulated.
55
+
56
+ Working mode:
57
+
58
+ - **Fast path** — batch gaps, draft both spines with `[ASSUMPTION]` tags, skip creative tools.
59
+ - **Coaching path** — walk decisions; creative tools woven in.
60
+ - **Design handoff** — assemble captured Discovery into a producer-shaped prompt; user runs the external tool and saves outputs to `{doc_workspace}` in whatever format the tool emits. Producer registry: `{workflow.design_handoffs}` (default: Google Stitch). EXPERIENCE.md can follow via Update mode when ready.
61
+
62
+ Creative tools — scan `{workflow.creative_tools}`, invoke when seeing helps. Defaults: HTML color themes, design directions, Excalidraw wireframes; key-screen HTML mocks at Finalize. See `references/creative-tools.md`. Research subagents on demand; consult `{workflow.external_sources}` when entries match.
63
+
64
+ Concern scan — name what the UX carries: accessibility, platforms, brand, regulated language, motion, i18n, dark mode, offline, content density, input modalities, notifications. Open list; drives invented sections.
65
+
66
+ Journeys: user narrates a real session with a named protagonist (Mary, mom of three, kids asleep — not "the user"); structure into numbered steps with a climax beat. Mirror source-spec names verbatim when defined.
67
+
68
+ Form-factor: mobile / web / desktop / multi-surface must resolve before IA closes. Named-protagonist journeys often derive it (Pary on iPad implies an iPad surface; Skeeter on Android adds a multi-surface need); when journeys don't disambiguate, probe.
69
+
70
+ Surface closure: stated needs become screens through journeys. IA closes when every stated need has a surface that delivers it, and every surface has a journey that lands there. When closure fails, probe — never invent the missing piece.
71
+
72
+ ## Reviewer Gate
73
+
74
+ Used by Validate and Finalize. **Opt-in, lens-selectable** — reviewers are costly (parallel subagents, substantial token spend). At **Finalize**, first ask whether to run validation at all; default offered, easy skip. At **Validate** intent the user already opted in — skip that question. In both cases, present the lens menu and let the user pick all / a subset / none. Menu: rubric walker (`references/validate.md`) + `{workflow.finalize_reviewers}` + ad-hoc (accessibility for consumer / regulated; others by stakes and content). Picked lenses dispatch as parallel subagents → each writes `review-{slug}.md`, returns a compact summary. If any lens ran, run the synthesis pipeline in `references/validate.md`.
75
+
76
+ ## Finalize
77
+
78
+ Outcomes, in order:
79
+
80
+ - **Spines distilled.** Subagent reads `.decision-log.md`, `.working/`, `imports/`, sources; produces `DESIGN.md` against `## The DESIGN.md spine` + `{workflow.design_md_examples}` and `EXPERIENCE.md` against `## The EXPERIENCE.md spine` + `{workflow.experience_md_examples}`. Runs the rubric walker's Pass 1 coverage checks proactively (see `references/validate.md`). Surface gaps; never invent.
81
+ - **Inputs reconciled.** Subagent per user-supplied input → `reconcile-{slug}.md`. Surface dropped qualitative ideas.
82
+ - **Reviewer Gate offered.** Ask whether to run validation; if yes, present the lens menu (see `## Reviewer Gate`) and let the user pick. If any lens ran, resolve findings before polish; otherwise proceed.
83
+ - **Open items triaged.** Open Questions, `[ASSUMPTION]`, `[NOTE FOR UX]`. Phase-blockers one at a time; non-blockers → log.
84
+ - **Key-screen mocks rendered.** Key-screens tool → `.working/` for surfaces where layout drives behavior or anchors visual language.
85
+ - **Mock coverage confirmed.** Walk every IA surface; classify *mocked* vs *spine-only*. Ask: *"These will be built from spine tables alone — any need a visual reference?"* Render more if named; log spine-only choices.
86
+ - **Layout extracted, artifacts promoted.** Distill subagent re-reads each `.working/` and `imports/` artifact; lifts visual decisions into DESIGN.md and behavioral decisions into EXPERIENCE.md. Promote `.working/` keepers to `mockups/` (HTML) or `wireframes/` (Excalidraw); imports stay. Inline relative links at relevant spine sections; state spines-win-on-conflict once.
87
+ - **Polished, handed off, closed.** Apply `{workflow.doc_standards}` in order. Execute `{workflow.external_handoffs}`; surface URLs. Set both files' `status: final`, `updated: {date}`. Log finalization. Share paths. Common next: `bmad-create-architecture`, `bmad-create-epics-and-stories`, `bmad-dev-story`. Run `{workflow.on_complete}`.
@@ -0,0 +1,9 @@
1
+ # Color Themes Renderer
2
+
3
+ Subagent prompt. Produce one self-contained HTML page at the supplied `.working/color-themes-{n}.html` path showing 4-6 distinct theme variations side by side so the user can pick.
4
+
5
+ Each variation: header (name + one-line emotional register), token chips for every semantic role decided so far, and one realistic UI snippet using the palette (content drawn from the conversation, not lorem). Include light and dark side-by-side when both modes are in scope. Avoid near-identical pastels — variations must differ in register, not just hue.
6
+
7
+ Inline CSS only, system font stack, no JS, no network. Document concrete hex values in `<style>` comments per variation so the user can lift them if they pick that theme. The spine itself stays semantic.
8
+
9
+ Return to the parent: file path, one-line per variation, mode coverage. Do not dump HTML into the parent context. If interactive, open the file with `python3 -c "import webbrowser, pathlib; webbrowser.open(pathlib.Path('PATH').resolve().as_uri())"`.
@@ -0,0 +1,9 @@
1
+ # Design Directions Renderer
2
+
3
+ Subagent prompt. Produce 3-6 distinct visual directions for the product's hero screen, each a separate self-contained HTML file at `.working/direction-{slug}.html` (or one combined `directions-{n}.html` if the parent's intent says side-by-side).
4
+
5
+ Each direction is a *complete visual personality* applied to the same key screen — not a palette swap. Differ on density, type weight, motion implication, brand register. Each file: 2-3 sentence rationale, near-1:1 hero screen mockup in a phone or browser frame, ideally a secondary screen, at least one state variant visible (aging row, empty state, etc).
6
+
7
+ Use real product content from the conversation. Voice/tone from `.decision-log.md` applied to every visible string — no lorem. Inline CSS, system fonts, no JS or network. Document hex values in `<style>` comments per direction.
8
+
9
+ Return to the parent: file paths, one-line personality summary per direction, what hero screen was depicted. Do not dump HTML into parent context. If interactive, open each file in the browser.
@@ -0,0 +1,158 @@
1
+ ---
2
+ name: Linen & Logic
3
+ colors:
4
+ surface: '#fbf9f4'
5
+ surface-dim: '#dbdad5'
6
+ surface-bright: '#fbf9f4'
7
+ surface-container-lowest: '#ffffff'
8
+ surface-container-low: '#f5f3ee'
9
+ surface-container: '#f0eee9'
10
+ surface-container-high: '#eae8e3'
11
+ surface-container-highest: '#e4e2dd'
12
+ on-surface: '#1b1c19'
13
+ on-surface-variant: '#4e453d'
14
+ inverse-surface: '#30312e'
15
+ inverse-on-surface: '#f2f1ec'
16
+ outline: '#80756b'
17
+ outline-variant: '#d1c4b9'
18
+ surface-tint: '#715a3f'
19
+ primary: '#59452b'
20
+ on-primary: '#ffffff'
21
+ primary-container: '#735c41'
22
+ on-primary-container: '#f5d6b4'
23
+ inverse-primary: '#e0c1a1'
24
+ secondary: '#a43b2c'
25
+ on-secondary: '#ffffff'
26
+ secondary-container: '#fd7d69'
27
+ on-secondary-container: '#71160b'
28
+ tertiary: '#374a5f'
29
+ on-tertiary: '#ffffff'
30
+ tertiary-container: '#4f6278'
31
+ on-tertiary-container: '#caddf8'
32
+ error: '#ba1a1a'
33
+ on-error: '#ffffff'
34
+ error-container: '#ffdad6'
35
+ on-error-container: '#93000a'
36
+ primary-fixed: '#fdddbb'
37
+ primary-fixed-dim: '#e0c1a1'
38
+ on-primary-fixed: '#281804'
39
+ on-primary-fixed-variant: '#58432a'
40
+ secondary-fixed: '#ffdad4'
41
+ secondary-fixed-dim: '#ffb4a7'
42
+ on-secondary-fixed: '#400200'
43
+ on-secondary-fixed-variant: '#842417'
44
+ tertiary-fixed: '#d0e4ff'
45
+ tertiary-fixed-dim: '#b4c8e2'
46
+ on-tertiary-fixed: '#071d30'
47
+ on-tertiary-fixed-variant: '#35485d'
48
+ background: '#fbf9f4'
49
+ on-background: '#1b1c19'
50
+ surface-variant: '#e4e2dd'
51
+ typography:
52
+ display-lg:
53
+ fontFamily: Libre Caslon Text
54
+ fontSize: 48px
55
+ fontWeight: '400'
56
+ lineHeight: '1.1'
57
+ letterSpacing: -0.02em
58
+ display-lg-mobile:
59
+ fontFamily: Libre Caslon Text
60
+ fontSize: 36px
61
+ fontWeight: '400'
62
+ lineHeight: '1.1'
63
+ headline-md:
64
+ fontFamily: Libre Caslon Text
65
+ fontSize: 32px
66
+ fontWeight: '400'
67
+ lineHeight: '1.2'
68
+ headline-sm:
69
+ fontFamily: Libre Caslon Text
70
+ fontSize: 24px
71
+ fontWeight: '400'
72
+ lineHeight: '1.3'
73
+ body-lg:
74
+ fontFamily: DM Sans
75
+ fontSize: 18px
76
+ fontWeight: '400'
77
+ lineHeight: '1.6'
78
+ letterSpacing: 0.01em
79
+ body-md:
80
+ fontFamily: DM Sans
81
+ fontSize: 16px
82
+ fontWeight: '400'
83
+ lineHeight: '1.6'
84
+ label-caps:
85
+ fontFamily: DM Sans
86
+ fontSize: 12px
87
+ fontWeight: '500'
88
+ lineHeight: '1.4'
89
+ letterSpacing: 0.1em
90
+ caption:
91
+ fontFamily: DM Sans
92
+ fontSize: 13px
93
+ fontWeight: '400'
94
+ lineHeight: '1.4'
95
+ rounded:
96
+ sm: 0.125rem
97
+ DEFAULT: 0.25rem
98
+ md: 0.375rem
99
+ lg: 0.5rem
100
+ xl: 0.75rem
101
+ full: 9999px
102
+ spacing:
103
+ unit: 8px
104
+ gutter: 24px
105
+ margin-mobile: 20px
106
+ margin-desktop: 64px
107
+ editorial-gap: 80px
108
+ ---
109
+
110
+ ## Brand & Style
111
+
112
+ The design system is rooted in the philosophy of "Slow Design"—an intentional departure from the frantic pace of fast fashion. It evokes a tactile, "linen-weight" sensation through high-end editorial layouts and a restrained aesthetic. The target audience values provenance over presence, seeking a reflective and sophisticated discovery experience that feels as much like a boutique magazine as a digital marketplace.
113
+
114
+ The style is **Editorial Minimalism** with **Tactile** accents. It prioritizes breathable white space, asymmetrical layouts that mimic printed lookbooks, and a soft, sun-faded palette. Every interaction is designed to be deliberate and "anti-hype," eschewing aggressive animations for subtle transitions and quiet confidence.
115
+
116
+ ## Colors
117
+
118
+ The palette is inspired by natural fibers and weathered landscapes.
119
+ - **Warm White (#F9F7F2)** serves as the primary canvas, providing a soft, non-clinical background that reduces eye strain.
120
+ - **Bone (#E3DED1)** and **Dust (#C2B9A7)** are used for structural depth, subtle dividers, and secondary surfaces.
121
+ - **Tobacco (#735C41)** is the primary ink color, used for high-contrast typography and essential UI elements.
122
+ - **Sun-faded Red (#B84A39)** and **Wool Blanket Blue (#4A5D73)** are used sparingly as "organic accents"—highlighting editorial picks or signifying subtle state changes without disrupting the tranquil atmosphere.
123
+
124
+ ## Typography
125
+
126
+ Typography is the primary vehicle for the brand’s sophisticated voice.
127
+ - **Libre Caslon Text** is the voice of the curator. Its classic proportions and elegant serifs provide the editorial weight required for discovery and storytelling.
128
+ - **DM Sans** provides a quiet, functional counterpoint. It is used for body copy and navigational elements, ensuring clarity without competing with the headlines.
129
+
130
+ Large display titles should often use "optical sizing" logic—tighter leading and slightly negative letter spacing to create a cohesive visual block. Labels are always tracked out (0.1em) to maintain a sense of airy premiumness.
131
+
132
+ ## Layout & Spacing
133
+
134
+ This design system employs a **Fluid Editorial Grid**. While it follows a 12-column structure on desktop, it encourages "asymmetrical breathing room"—intentionally leaving columns empty to direct focus toward high-quality imagery.
135
+
136
+ Spacing is generous. The `editorial-gap` (80px+) should be used between major content sections to allow the user to pause and reflect. Mobile layouts should maintain a minimum of 20px side margins to ensure the content feels framed like a page, rather than bleeding to the edges of the device. Elements should lean toward vertical stacks to mimic the scroll of a digital journal.
137
+
138
+ ## Elevation & Depth
139
+
140
+ Depth is communicated through **Tonal Layering** and **Ambient Shadows** rather than sharp borders.
141
+ - **Surfaces:** Use the "Bone" color to define containers against the "Warm White" base.
142
+ - **Shadows:** Shadows are highly diffused and tinted with the "Tobacco" hue (`rgba(115, 92, 65, 0.08)`). They should feel like a soft glow of light hitting fabric, with large blur radii (20px+) and very low opacity.
143
+ - **Borders:** When borders are necessary, they are 1px thick and rendered in "Dust," creating a "ghost" outline that barely separates elements from the background.
144
+
145
+ ## Shapes
146
+
147
+ The shape language is **Soft (0.25rem)**. While a sharp edge feels too aggressive and a pill-shape feels too digital/tech-heavy, a subtle rounding of corners mimics the natural softening of woven textiles over time.
148
+
149
+ Larger containers (Cards, Modals) may use `rounded-lg` (0.5rem) to emphasize their tactile, object-like quality. Imagery should always follow these corner radii to maintain a cohesive, "framed" appearance.
150
+
151
+ ## Components
152
+
153
+ - **Buttons:** Primary buttons use a solid "Tobacco" fill with "Warm White" text. Secondary buttons are "Bone" with "Tobacco" text or simply "Tobacco" text with a 1px "Dust" border. Padding is generous horizontally to create an elegant, elongated silhouette.
154
+ - **Cards:** Editorial cards feature large imagery, a "headline-sm" title, and a "caption" subline. Shadows are only applied on hover to simulate a gentle lift.
155
+ - **Inputs:** Minimalist underlines in "Dust" that transition to "Tobacco" on focus. Label text remains in "label-caps" above the field.
156
+ - **Chips/Tags:** Used for material types (e.g., "100% Linen"). These are rendered in "Bone" backgrounds with "Tobacco" text, using the "Soft" corner radius.
157
+ - **Icons:** Must be "Hand-drawn" or "Fine-line" style. Lines should have slight imperfections and vary in weight to reinforce the tactile, artisanal nature of the fashion being discovered.
158
+ - **Navigation:** A simple, centered bottom bar or a top-weighted "Ghost" header that disappears on scroll to maximize the editorial viewport.
@@ -0,0 +1,93 @@
1
+ ---
2
+ name: Quill
3
+ description: Daily writing companion. Calm, intentional, dark-mode-by-default. No streaks, no gamification.
4
+ colors:
5
+ surface-base: '#FAF9F7'
6
+ surface-raised: '#FFFFFF'
7
+ ink-primary: '#1A1B1F'
8
+ ink-secondary: '#6B655A'
9
+ ink-disabled: '#B5AFA5'
10
+ accent: '#A87434'
11
+ border-hairline: '#E8E4DD'
12
+ surface-base-dark: '#1A1B1F'
13
+ surface-raised-dark: '#23252B'
14
+ ink-primary-dark: '#F0EDE8'
15
+ ink-secondary-dark: '#A39E94'
16
+ ink-disabled-dark: '#5E5A53'
17
+ accent-dark: '#D4A574'
18
+ border-hairline-dark: '#2E3036'
19
+ typography:
20
+ title:
21
+ note: 'Platform native — iOS Title 1 · Android Headline Small'
22
+ body:
23
+ note: 'Platform native — iOS Body · Android Body Large'
24
+ meta:
25
+ note: 'Platform native — iOS Footnote · Android Body Small'
26
+ rounded:
27
+ sm: 6px
28
+ md: 12px
29
+ spacing:
30
+ '1': 4px
31
+ '2': 8px
32
+ '3': 12px
33
+ '4': 16px
34
+ '5': 24px
35
+ '6': 32px
36
+ ---
37
+
38
+ ## Brand & Style
39
+
40
+ Quill is designed against the grain of contemporary habit apps. Where most products weaponize the user's calendar with streak counters and re-engagement nudges, Quill insists on something quieter — a daily prompt, a place to write, and the unspoken assurance that today's entry is enough. Showing up is the point, not the streak.
41
+
42
+ The visual language follows. Calm surfaces in warm off-white (light) or deep ink (dark, the default). Generous breathing room. No chromatic color competing for attention except a single warm tobacco that signals save-and-send. Text-first. Hand-on-paper, not buzz-on-screen.
43
+
44
+ ## Colors
45
+
46
+ The palette is restrained on purpose — a writing surface should not compete with the writing.
47
+
48
+ - **Warm White (`#FAF9F7`)** is the primary canvas in light mode. Slightly warm to reduce eye strain and keep the surface from feeling clinical.
49
+ - **Deep Ink (`#1A1B1F`)** is the dark-mode canvas and the primary body text color in light mode. Quill defaults to dark because most writing happens at night.
50
+ - **Tobacco (`#A87434` light / `#D4A574` dark)** is the only chromatic color. Used exclusively for the save indicator and primary action — never for decoration, never for state badges.
51
+ - **Hairline (`#E8E4DD` light / `#2E3036` dark)** separates list items at the lowest possible contrast. Anything heavier feels like UI rather than paper.
52
+
53
+ Avoid: red error fills (Quill is a journal, not a form), gradients (the surface is paper), and saturated accent variants — one accent, used sparingly.
54
+
55
+ ## Typography
56
+
57
+ Platform conventions are the spec. iOS uses Title 1 / Body / Footnote; Android uses Headline Small / Body Large / Body Small. Dynamic type honored at every level — the largest accessibility setting must still render legibly without truncation.
58
+
59
+ Headlines are rare. The Today prompt is set in `title`; everything else is `body` or `meta`. No display sizes, no all-caps labels.
60
+
61
+ ## Layout & Spacing
62
+
63
+ Scale: 4 / 8 / 12 / 16 / 24 / 32 px. The largest gaps land between major surfaces; the smallest sit between tightly related elements. Vertical rhythm follows a hard rule: composer breathes, list items don't.
64
+
65
+ Mobile margins follow platform conventions (iOS 16pt, Android 16dp). Single-column always; modal stacks one level deep, never two.
66
+
67
+ ## Elevation & Depth
68
+
69
+ Quill avoids elevation as a visual device. Cards and composer surfaces sit on `surface-raised`, distinguished from `surface-base` only by tone. Shadows are reserved for the rare moment of literal physical metaphor — never for hierarchy. Hierarchy comes from layout and typography, not shadow.
70
+
71
+ ## Shapes
72
+
73
+ `rounded/sm` (6px) for inputs, list rows, and small surfaces. `rounded/md` (12px) for cards and the composer. Nothing fully rounded; no pills, no perfect circles for surfaces. The aesthetic is paper-with-soft-corners, not iOS-button-pill.
74
+
75
+ Imagery follows container corners exactly.
76
+
77
+ ## Components
78
+
79
+ - **Prompt card** — `surface-raised`. One per day. Today's prompt in `title`. Tap to open composer. No icon, no decoration; the prompt itself is the affordance.
80
+ - **Composer** — Full-screen text view. Clean text field, generous vertical padding, single-line save indicator in the header.
81
+ - **Save indicator** — Text only. Uses `ink-secondary`, never a checkmark icon, never a colored badge.
82
+ - **Entry row** (Library) — Date in `meta`, first line of body in `body` (truncated to one line). Hairline divider only, no fill.
83
+ - **Settings row** — Label left, value or chevron right. Tobacco accent only on destructive confirmations.
84
+
85
+ ## Do's and Don'ts
86
+
87
+ | Do | Don't |
88
+ |---|---|
89
+ | Single accent color, used sparingly on save & primary action | Color-code by sentiment, mood, or category |
90
+ | Text-only state indicators (`Saved.`) | Iconography for state (✓, ⚠, ●) |
91
+ | Hairline dividers at lowest legible contrast | Card shadows, gradient fills, accent fills behind text |
92
+ | Generous vertical rhythm in composer | Compress to fit more on screen |
93
+ | Honor platform conventions for navigation | Override platform nav with custom drawer or hamburger |
@@ -0,0 +1,109 @@
1
+ ---
2
+ name: Drift
3
+ description: Focused task tracker for solo founders and small async teams. shadcn/ui on Next.js + Tailwind; this DESIGN.md specifies the brand-layer delta only.
4
+ colors:
5
+ # Brand overrides on top of shadcn defaults. All unlisted tokens inherit
6
+ # from shadcn (background, foreground, muted, muted-foreground, popover,
7
+ # popover-foreground, card, card-foreground, border, input, ring, destructive).
8
+ primary: '#0F4C81'
9
+ primary-foreground: '#FFFFFF'
10
+ accent: '#F59E0B'
11
+ accent-foreground: '#1A1208'
12
+ primary-dark: '#5C8AC2'
13
+ primary-foreground-dark: '#0A1A2A'
14
+ accent-dark: '#FBC470'
15
+ accent-foreground-dark: '#1A1208'
16
+ typography:
17
+ # Body, label, and muted inherit from shadcn (Geist Sans). Only display is overridden.
18
+ display:
19
+ fontFamily: 'Instrument Serif'
20
+ fontSize: 36px
21
+ fontWeight: '400'
22
+ lineHeight: '1.15'
23
+ letterSpacing: -0.01em
24
+ display-sm:
25
+ fontFamily: 'Instrument Serif'
26
+ fontSize: 24px
27
+ fontWeight: '400'
28
+ lineHeight: '1.2'
29
+ rounded:
30
+ # Tighter than shadcn defaults — Drift reads sharper.
31
+ sm: 4px
32
+ md: 6px
33
+ lg: 8px
34
+ spacing:
35
+ # shadcn / Tailwind defaults inherited; no overrides.
36
+ components:
37
+ button-primary:
38
+ background: '{colors.primary}'
39
+ foreground: '{colors.primary-foreground}'
40
+ radius: '{rounded.md}'
41
+ focus-card:
42
+ background: '{colors.accent}'
43
+ foreground: '{colors.accent-foreground}'
44
+ radius: '{rounded.md}'
45
+ border: 'none'
46
+ command-palette-result-active:
47
+ background: '{colors.accent}'
48
+ foreground: '{colors.accent-foreground}'
49
+ ---
50
+
51
+ ## Brand & Style
52
+
53
+ Drift is a focused task tracker for solo founders and small async teams. The product premise is that *work is a moving thing* — momentum matters more than perfectly groomed backlogs, and the right tool surfaces what you're working on *now* without making you administer a system to find it. The brand expression follows: a serif display moment in an otherwise sober sans-serif surface, a single warm accent that means *this is what's live*, and visual restraint everywhere else.
54
+
55
+ Drift inherits shadcn/ui defaults wholesale. This DESIGN.md specifies only the brand-layer deltas — primary color, accent color, display typography, slightly tighter corners, and a handful of brand-specific components. The 80% of components that ship from shadcn (Button, Card, Dialog, Sheet, Command, Popover, Toast) inherit shadcn's visual specs as-is. Customizing those is *explicitly* against the brand discipline — shadcn's defaults are the contract.
56
+
57
+ ## Colors
58
+
59
+ The Drift palette is two colors of brand-layer plus shadcn defaults for everything else.
60
+
61
+ - **Primary Navy (`#0F4C81` light / `#5C8AC2` dark)** is the brand color. Used on primary buttons, active nav items, link underlines, and the "current week" indicator. Replaces shadcn's default `primary`.
62
+ - **Focus Amber (`#F59E0B` light / `#FBC470` dark)** is the accent. Used exclusively to indicate the task or project currently in focus — the one you're working on *right now*. Never used for chrome, never used decoratively, never used for state badges. Amber means "live."
63
+ - **All other tokens** (`background`, `foreground`, `muted`, `muted-foreground`, `border`, `input`, `ring`, `card`, `popover`, `destructive`) inherit from shadcn defaults. If the brand can't justify overriding a token, it doesn't override it.
64
+
65
+ Avoid: chromatic flourishes, gradient surfaces, custom destructive colors (use shadcn's), more than two brand colors. The discipline is two-colors-and-stop.
66
+
67
+ ## Typography
68
+
69
+ Body / label / caption inherit shadcn's Geist Sans ramp. Only the `display` role is brand-overridden, set in **Instrument Serif** at 36px (24px small variant). The serif moment appears in:
70
+
71
+ - Empty-state hero text on Today and project surfaces
72
+ - Project titles in the project detail header
73
+ - The "Welcome back, {name}" greeting at first session of the day
74
+
75
+ Everything else stays in Geist Sans. The serif is a punctuation mark, not a default voice.
76
+
77
+ ## Layout & Spacing
78
+
79
+ shadcn / Tailwind spacing scale inherited as-is (the 4-based scale: 4, 8, 12, 16, 20, 24, 32, 40, 48, 64). Maximum content width: `max-w-3xl` (768px) — Drift is not a wide-table product, and forcing one-column reading keeps the surface focused.
80
+
81
+ Single-column layout. Sidebar nav on `lg` (1024px+); on smaller viewports, the sidebar becomes a sheet triggered from the top bar.
82
+
83
+ ## Elevation & Depth
84
+
85
+ Inherited from shadcn — subtle shadow on hover/active states, no elevation as a visual hierarchy device. Drift adds nothing on top of this; brand discipline is "shadcn's shadows are correct."
86
+
87
+ ## Shapes
88
+
89
+ Tighter than shadcn defaults: `rounded/sm` (4px) for inputs, `rounded/md` (6px) for cards and buttons, `rounded/lg` (8px) for dialogs and the command palette. The crispness reads "tool" rather than "consumer app." Pill shapes (`rounded/full`) appear only on status badges.
90
+
91
+ ## Components
92
+
93
+ Drift uses the following shadcn components as-is, unchanged: `Button`, `Card`, `Dialog`, `Sheet`, `Popover`, `DropdownMenu`, `Toast`, `Tabs`, `Avatar`, `Separator`. The contract: don't customize these.
94
+
95
+ Brand-layer-overridden components:
96
+
97
+ - **Button (primary variant)** — `{colors.primary}` fill, `{colors.primary-foreground}` text, `{rounded.md}` corner. Other variants (secondary, outline, ghost, destructive) inherit shadcn defaults.
98
+ - **Focus card** — Custom Drift component. The "this is what you're working on now" card on Today and project detail. `{colors.accent}` fill, no border, slightly elevated. Appears at most once per surface.
99
+ - **Command palette result (active)** — Override on shadcn's `Command` component: the highlighted/keyboard-selected result row uses `{colors.accent}` instead of shadcn's default `accent` token. Reinforces "this is what will fire if you hit Enter."
100
+
101
+ ## Do's and Don'ts
102
+
103
+ | Do | Don't |
104
+ |---|---|
105
+ | Inherit shadcn defaults for everything not in the brand layer | Override shadcn's color tokens beyond `primary` and `accent` |
106
+ | Use `{colors.accent}` only for "live / now / in-focus" | Use accent for state, chrome, or hover affordances |
107
+ | `display` typography sparingly — empty states, hero greetings | Set body text in `display` to "make it pretty" |
108
+ | Tighter corners than shadcn (4 / 6 / 8) | Use shadcn's default 6/8/12 (Drift reads sharper) |
109
+ | Single-column layouts inside `max-w-3xl` | Wide multi-column tables (Drift is not a spreadsheet) |