* docs: refresh the README banner, restore its diagram, and fix the favicon Three things the READMEs and the site were carrying wrong. The banner is the current one from bmadcode.com: the BMad tile and wordmark over the line art, at 2x for retina. It replaces a 1408x224 crop, and is smaller on disk than what it replaces. The delivery-loop diagram in the README has been broken since the diagrams moved to `docs-site/src/diagrams`. It cannot simply be pointed at the new path: an authored diagram carries geometry and classes only, so it needs the site's stylesheet to have any colour at all, and a README loads an SVG as an `<img>` where no stylesheet can reach it. So `docs/images/` now holds exports of the source, generated by `npm run export-readme-diagrams` with the dark ramp substituted in as literal colours. Literals rather than custom properties because an export has to survive renderers thinner than a browser - resvg drops `var()` and paints the fallback black. The Korean README's copy is exported from the same geometry through the existing labels file, so the two can no longer drift apart. The favicon was a teal `B` that matched neither the header tile nor blog.bmadcode.com. It is now the BMad mark, drawn from the same path data the header already carries, on the same navy the blog uses. The .ico is generated from the SVG and stays listed for browsers that ignore `image/svg+xml`. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(diagrams): draw the bulbs as bulbs, not as coloured circles The earlier version leaned on gold to say "idea". Once the diagrams lost their own colours, a circle over a rounded tab in the body ink read as neither a bulb nor anything else. So the glyph now carries its meaning in the drawing: a filament arch inside the globe, a tapered neck, and a ribbed screw base, plus a third ray overhead. The small bulb takes the same construction one size down, with a single rib rather than two, which is all that reads at that scale. Both hold up on the light and dark ramps. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs: give the delivery loop an English page, at the house type scale The diagram the README leads with appeared on exactly one page of the site: the Korean `how-to/choose-a-development-path`, a leftover from before the English tree was restructured into start/plan/build. An English reader never saw it. It now opens "Find Your Starting Point" on the docs index, where it says in a picture what the list underneath says in prose. Putting it in a docs column for the first time showed its type was tuned for a README: drawn at a 1120 viewBox, its labels came out at 11.0px and 8.3px against the 12.8px and 10.9px the other diagrams hold at the same 736px content width. The sizes are scaled to match; the geometry is untouched. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs-site: guard locale coverage, and give the footer band an edge Two unrelated things a reader can see, and one they cannot. The invisible one first. When a locale has no page at a route, Starlight serves the English one and says nothing, so a missing translation and a working one look identical from the outside — which is how all five locales ended up stranded on the pre-restructure tree unnoticed (#2855). Starlight does mark the substitution: a fallback page carries `lang="en"` on `<main>` inside a document that declares the locale. The build now checks the built site for that mismatch, which measures the symptom rather than inferring it from the sidebar. The existing backlog is far too large to fix here, so it is recorded in `locale-coverage-baseline.json` and tolerated. The build fails only when the picture changes: a route starts falling back, or a baseline entry stops. Both are one `--update` away. The second failing is deliberate — it is what keeps the baseline from outliving the problem it records. The visible one: the footer band sets its own dark ground, which on the dark ramp is the page's ground, so there was no band — only 297px of unexplained space where one should have started. It now lifts a step and takes a hairline in dark mode, and sits flush against the article instead of adding a margin on top of its own padding. The last-updated line gives up some of its air too; between them the gap is 234px, and every part of it is now doing something. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs-site: stack the footer columns on mobile, and add the touch icon The footer's three link groups were laid out in two columns below 32rem, so one group always dropped onto a row of its own with the space beside it left empty, and "Plan inside an organization" wrapped inside a 155px column. Three groups do not fit two columns; on a phone they get one each. The favicon already matches bmadcode.com exactly - same viewBox, same navy tile, same three paths, since the mark is the one the header carries. What was missing is the apple-touch-icon the site also ships, so an icon saved to an iOS home screen fell back to a screenshot. It is generated from the same SVG, flattened onto the tile navy because iOS applies its own mask and does not want the transparency our rounded corners would leave. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(diagrams): raise the delivery loop's type, and give it back a colour Alex is right about what he saw, and wrong about it being new. His screenshot is the version before the type was scaled for a docs column, where the title rendered at 9.2px against GitHub's 16px body. That is already fixed. But the original diagram this replaced ran 14/16/21 and the fix brought it to 14.5/16.5/19.5 - a hair under where it always was, and his objection would have applied to the original too. So rather than argue the point, take it past the original: 17.5/18/21, which puts the node labels at body size and the title at 14.5px in a README. The colour is the other half of his complaint's cause. The original said "here is where each kind of work joins" in gold; when the diagrams lost their own colours that meaning went with it and nothing replaced it. The three entry drops now carry the accent, which is the vocabulary's existing job for an edge the drawing has to single out, so it works on both ramps. The marker was still called `arrow-gold`; it is `arrow-entry` now. The README export also gets a ground rather than a flat fill: a near-black lifting across the diagonal with one soft accent wash behind the row the work enters from, which is the register bmadcode.com uses - almost all ground and one blue. The wash sits high on purpose, because centred it pooled behind the boxes and their flat fill then read as darker than the ground around them. The docs site keeps a ground that follows the reader's theme, so this belongs to the export alone. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(diagrams): drop the gradient ground from the README export It read as an effect rather than a surface. The drawing's colour is the accent on the three entry drops, and it says more with a flat ground behind it and nothing competing. The larger type and the accent stay. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> * docs(diagrams): space the delivery loop's two band labels evenly They were not spaced at all, only placed. The title's baseline fell three units BELOW the big bulb's top ray - the two only looked separate because they are far apart horizontally - while the lower band had 35 units of air. That mismatch is what read as wrong. Both now sit 40 units clear of the nearest mark. The drawing keeps its size and shifts down inside a taller canvas, 420 to 460, with the labels lifted out of its group so the shift leaves them where they are; the remaining padding above and below the pair is 15 and 16. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
13 KiB
title, description
| title | description |
|---|---|
| Documentation Style Guide | Project-specific documentation conventions based on Google style and Diataxis structure |
This project adheres to the Google Developer Documentation Style Guide and uses Diataxis to structure content. Only project-specific conventions follow.
Write in Plain English
Make the main point easy to find and act on. These rules apply to every page:
- At the start, make clear what the page is for and what the reader needs from it.
- Prefer concrete, familiar words and short sentences.
- Use specialized terms only when readers need them to use BMAD. Define an unfamiliar term at first use.
- Use literal language. Avoid decorative metaphors, and do not use a metaphor instead of explaining how something works.
- Give the gist before qualifications and detailed mechanics.
- Include implementation details only when they help readers understand or act for that page's purpose. Put exact mechanics and contracts in reference pages or linked deeper material.
- Remove repetition, opening text that delays the point, inflated claims, and caveats that do not change the reader's decision.
Project-Specific Rules
| Rule | Specification |
|---|---|
No horizontal rules (---) |
Fragments reading flow |
No #### headers |
Use bold text or admonitions instead |
| No "Related" or "Next:" sections | Sidebar handles navigation |
| No deeply nested lists | Break into sections instead |
| No code blocks for non-code | Use admonitions for dialogue examples |
| No bold paragraphs for callouts | Use admonitions instead |
| 1-2 admonitions per section max | Tutorials allow 3-4 per major section |
| Table cells / list items | 1-2 sentences max |
| Header budget | 8-12 ## per doc; 2-3 ### per section |
Admonitions (Starlight Syntax)
:::tip[Title]
Shortcuts, best practices
:::
:::note[Title]
Context, definitions, examples, prerequisites
:::
:::caution[Title]
Caveats, potential issues
:::
:::danger[Title]
Critical warnings only — data loss, security issues
:::
Standard Uses
| Admonition | Use For |
|---|---|
:::note[Prerequisites] |
Dependencies before starting |
:::tip[Quick Path] |
TL;DR summary at document top |
:::caution[Important] |
Critical caveats |
:::note[Example] |
Command/response examples |
Standard Table Formats
Phases:
| Phase | Name | What Happens |
| ----- | -------- | -------------------------------------------- |
| 1 | Analysis | Brainstorm, research *(optional)* |
| 2 | Planning | Requirements — PRD or spec *(required)* |
Skills:
| Skill | Agent | Purpose |
| ------------ | ------- | ------------------------------------ |
| `bmad-brainstorming` | Analyst | Brainstorm a new project |
| `bmad-prd` | PM | Create Product Requirements Document |
Folder Structure Blocks
Show in "What You've Accomplished" sections:
```
your-project/
├── _bmad/ # BMad configuration
├── _bmad-output/
│ ├── planning-artifacts/
│ │ └── PRD.md # Your requirements document
│ └── implementation-artifacts/
├── AGENTS.md # agent instructions (optional, via bmad-project-context)
└── ...
```
Tutorial Structure
1. Title + Hook (1-2 sentences describing outcome)
2. Version/Module Notice (info or warning admonition) (optional)
3. What You'll Learn (bullet list of outcomes)
4. Prerequisites (info admonition)
5. Quick Path (tip admonition - TL;DR summary)
6. Understanding [Topic] (context before steps - tables for phases/agents)
7. Installation (optional)
8. Step 1: [First Major Task]
9. Step 2: [Second Major Task]
10. Step 3: [Third Major Task]
11. What You've Accomplished (summary + folder structure)
12. Quick Reference (skills table)
13. Common Questions (FAQ format)
14. Getting Help (community links)
15. Key Takeaways (tip admonition)
Tutorial Checklist
- Hook describes outcome in 1-2 sentences
- "What You'll Learn" section present
- Prerequisites in admonition
- Quick Path TL;DR admonition at top
- Tables for phases, skills, agents
- "What You've Accomplished" section present
- Quick Reference table present
- Common Questions section present
- Getting Help section present
- Key Takeaways admonition at end
How-To Structure
1. Title + Hook (one sentence: "Use the `X` workflow to...")
2. When to Use This (bullet list of scenarios)
3. When to Skip This (optional)
4. Prerequisites (note admonition)
5. Steps (numbered ### subsections)
6. What You Get (output/artifacts produced)
7. Example (optional)
8. Tips (optional)
9. Next Steps (optional)
How-To Checklist
- Hook starts with "Use the
Xworkflow to..." - "When to Use This" has 3-5 bullet points
- Prerequisites listed
- Steps are numbered
###subsections with action verbs - "What You Get" describes output artifacts
Explanation Structure
Types
| Type | Example |
|---|---|
| Index/Landing | core-concepts/index.md |
| Concept | what-are-agents.md |
| Feature | build.md |
| Philosophy | design-ux-and-architecture.md |
General Template
1. Title + Hook (1-2 sentences)
2. Overview/Definition (what it is, why it matters)
3. Key Concepts (### subsections)
4. Comparison Table (optional)
5. When to Use / When Not to Use (optional)
6. Diagram (optional - see Diagrams below, 1 per doc max)
7. Next Steps (optional)
Index/Landing Pages
1. Title + Hook (one sentence)
2. Content Table (links with descriptions)
3. Getting Started (numbered list)
4. Choose Your Path (optional - decision tree)
Concept Explainers
1. Title + Hook (what it is)
2. Types/Categories (### subsections) (optional)
3. Key Differences Table
4. Components/Parts
5. Which Should You Use?
6. Creating/Customizing (pointer to how-to guides)
Feature Explainers
1. Title + Hook (what it does)
2. Quick Facts (optional - "Perfect for:", "Time to:")
3. When to Use / When Not to Use
4. How It Works (diagram optional)
5. Key Benefits
6. Comparison Table (optional)
7. When to Graduate/Upgrade (optional)
Philosophy/Rationale Documents
1. Title + Hook (the principle)
2. The Problem
3. The Solution
4. Key Principles (### subsections)
5. Benefits
6. When This Applies
Explanation Checklist
- Hook states what document explains
- Content in scannable
##sections - Comparison tables for 3+ options
- Diagrams have clear labels
- Links to how-to guides for procedural questions
- 2-3 admonitions max per document
Diagrams
Diagrams are hand-authored SVGs, kept in docs-site/src/diagrams/, and embedded
like an image:

They are inlined into the page rather than served as <img>, so one stylesheet
themes every diagram in both light and dark. That means a diagram file carries
geometry and classes only, never colours — use the existing vocabulary
(node, edge, gate, panel, glyph, and the n / sub / k text
classes) and a new diagram will match the others without any styling work.
Labels are translated, not redrawn. Give each <text> a data-i18n key and add
the strings to the diagram's <name>.labels.json; every language then shares one
drawing, and a translation cannot drift out of shape with the original. Anything
missing falls back to the English in the SVG.
A README is not a docs page — it loads an SVG as an <img>, where no stylesheet
can reach it — so the ones the READMEs use are exports, in docs/images/. After
changing a source diagram that a README shows, regenerate them:
cd docs-site && npm run export-readme-diagrams
Reference Structure
Types
| Type | Example |
|---|---|
| Index/Landing | workflows/index.md |
| Catalog | agents/index.md |
| Deep-Dive | document-project.md |
| Configuration | core-tasks.md |
| Glossary | glossary/index.md |
| Comprehensive | bmgd-workflows.md |
Reference Index Pages
1. Title + Hook (one sentence)
2. Content Sections (## for each category)
- Bullet list with links and descriptions
Catalog Reference
1. Title + Hook
2. Items (## for each item)
- Brief description (one sentence)
- **Skills:** or **Key Info:** as flat list
3. Universal/Shared (## section) (optional)
Item Deep-Dive Reference
1. Title + Hook (one sentence purpose)
2. Quick Facts (optional note admonition)
- Module, Skill, Input, Output as list
3. Purpose/Overview (## section)
4. How to Invoke (code block)
5. Key Sections (## for each aspect)
- Use ### for sub-options
6. Notes/Caveats (tip or caution admonition)
Configuration Reference
1. Title + Hook
2. Table of Contents (jump links if 4+ items)
3. Items (## for each config/task)
- **Bold summary** — one sentence
- **Use it when:** bullet list
- **How it works:** numbered steps (3-5 max)
- **Output:** expected result (optional)
Comprehensive Reference Guide
1. Title + Hook
2. Overview (## section)
- Diagram or table showing organization
3. Major Sections (## for each phase/category)
- Items (### for each item)
- Standardized fields: Skill, Agent, Input, Output, Description
4. Next Steps (optional)
Reference Checklist
- Hook states what document references
- Structure matches reference type
- Items use consistent structure throughout
- Tables for structured/comparative data
- Links to explanation docs for conceptual depth
- 1-2 admonitions max
Glossary Structure
Starlight generates right-side "On this page" navigation from headers:
- Categories as
##headers — appear in right nav - Terms in tables — compact rows, not individual headers
- No inline TOC — right sidebar handles navigation
Table Format
## Category Name
| Term | Definition |
| ------------ | ---------------------------------------------------------------------------------------- |
| **Agent** | Specialized AI persona with specific expertise that guides users through workflows. |
| **Workflow** | Multi-step guided process that orchestrates AI agent activities to produce deliverables. |
Definition Rules
| Do | Don't |
|---|---|
| Start with what it IS or DOES | Start with "This is..." or "A [term] is..." |
| Keep to 1-2 sentences | Write multi-paragraph explanations |
| Bold term name in cell | Use plain text for terms |
Context Markers
Add italic context at definition start for limited-scope terms:
*Direct-entry implementation only.**BMad Method/Enterprise.**Phase N.**BMGD.**Established projects.*
Glossary Checklist
- Terms in tables, not individual headers
- Terms alphabetized within categories
- Definitions 1-2 sentences
- Context markers italicized
- Term names bolded in cells
- No "A [term] is..." definitions
FAQ Sections
## Questions
- [Do I always need architecture?](#do-i-always-need-architecture)
- [Can I change my plan later?](#can-i-change-my-plan-later)
### Do I always need architecture?
Only for work that benefits from architecture. Clear work can enter implementation directly.
### Can I change my plan later?
Yes. The `bmad-correct-course` workflow handles scope changes mid-implementation.
**Have a question not answered here?** [Open an issue](...) or ask in [Discord](...).
Validation Commands
Before submitting documentation changes:
cd docs-site
npm run fix-links # Preview link format fixes
npm run fix-links -- --write # Apply fixes
npm run validate-links # Check links exist
npm run build # Verify no build errors