docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
<svg class= "bmad-diagram" xmlns= "http://www.w3.org/2000/svg" width= "1120" height= "465" viewBox= "0 0 1120 465" role= "img" aria-labelledby= "title description" >
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
<style >
.bmad-diagram { font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
.bmad-diagram text { fill: #e6eaf0; }
.bmad-diagram .node { fill: #1a1e24; stroke: #404854; stroke-width: 1; }
.bmad-diagram .node.hot { stroke: #7fa0ff; }
.bmad-diagram .gate { fill: #111418; stroke: #7fa0ff; stroke-width: 1.5; }
.bmad-diagram .chip { fill: #1a1e24; stroke: #404854; stroke-width: 1; }
.bmad-diagram .chip.ok { fill: rgba(111, 207, 151, 0.1); stroke: #6fcf97; }
.bmad-diagram .chip.warn { fill: rgba(224, 178, 95, 0.1); stroke: #e0b25f; }
.bmad-diagram .band { fill: #1a1e24; stroke: #404854; stroke-opacity: 0.28; stroke-width: 1; }
.bmad-diagram .panel { fill: none; stroke: #404854; stroke-width: 1; stroke-dasharray: 4 4; }
.bmad-diagram .panel-title { fill: #7fa0ff; }
docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
.bmad-diagram .slogan {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 16px;
letter-spacing: 0.085em;
text-transform: uppercase;
fill: #7fa0ff;
}
.bmad-diagram .slogan.alt { fill: #8c96a3; }
.bmad-diagram .grid { fill: none; stroke: #404854; stroke-opacity: 0.22; stroke-width: 1; }
.bmad-diagram .rule { fill: none; stroke: #404854; stroke-width: 1; }
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
.bmad-diagram .edge { fill: none; stroke: #8c96a3; stroke-width: 1.5; }
.bmad-diagram .edge.soft { stroke-width: 1.25; stroke-dasharray: 4 4; opacity: 0.85; }
.bmad-diagram .edge.lens { opacity: 0.5; }
.bmad-diagram .edge.entry { stroke: #7fa0ff; }
.bmad-diagram .head { fill: #8c96a3; }
.bmad-diagram .head.accent { fill: #7fa0ff; }
.bmad-diagram .glyph { fill: #8c96a3; }
.bmad-diagram .glyph .fold { fill: #111418; opacity: 0.5; }
.bmad-diagram .n { font-size: 14px; font-weight: 500; letter-spacing: -0.012em; text-anchor: middle; }
.bmad-diagram .n.small { font-size: 12.5px; font-weight: 600; text-anchor: start; }
.bmad-diagram .sub { font-size: 11.5px; fill: #8c96a3; }
.bmad-diagram .sub.mid { text-anchor: middle; }
.bmad-diagram .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.bmad-diagram .k {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 10px;
letter-spacing: 0.09em;
text-transform: uppercase;
fill: #8c96a3;
}
</style>
docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
<rect width= "1120" height= "465" rx= "20" fill= "#111418" />
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
<title id= "title" > The BMad delivery loop</title>
<desc id= "description" > Three kinds of input enter the delivery loop at different points: a vague notion enters at Clarify, a big clear idea enters at Plan, and a small change goes straight to Build and verify. The loop continues through Learn and adjust, which feeds back into planning as the work evolves.</desc>
<defs >
<marker id= "arrow" viewBox= "0 0 10 10" refX= "8" refY= "5" markerWidth= "7" markerHeight= "7" orient= "auto-start-reverse" >
<path class= "head" d= "M 0 0 L 10 5 L 0 10 z" />
</marker>
<marker id= "arrow-entry" viewBox= "0 0 10 10" refX= "8" refY= "5" markerWidth= "7" markerHeight= "7" orient= "auto-start-reverse" >
<path class= "head accent" d= "M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
<!-- Two banners closing on a hairline, which is how every section of the
marketing site closes. The rules run the drawing's own measure, 60 to
1060, so the banners sit on the boxes' grid rather than floating over it.
The type is the site's label register, not a heading: IBM Plex Mono,
uppercase, weight 400, wide tracking. It is set larger than the site's
own 11px because this spans a metre of drawing rather than sitting over
a paragraph, but the register is the site's.
Colour follows the same rule the site uses for these labels - accent for
one that carries weight, muted for one that orients. So the opening takes
the accent, which is also what the three entry drops below it are drawn
in, and the closing summary sits quiet. An earlier pass gave the closing
line the site's copper; copper there is only ever a status - tag - warn,
the gate's CONCERNS heading, a flagged row - so it said "this is a
problem" about the diagram's own conclusion. -->
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
<g text-anchor= "middle" >
docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
<text class= "slogan" x= "560" y= "27" data-i18n= "start-anywhere" > 어디서든 시작</text>
<path class= "rule" d= "M60 41H1060" />
<path class= "rule" d= "M60 424H1060" />
<text class= "slogan alt" x= "560" y= "450" data-i18n= "right-sized-for-the-work-in-front-" > 눈앞의 작업에 꼭 맞는 절차</text>
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
</g>
docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
<!-- The field the original ruled behind the drawing, at its pitch: 70 apart
one way, 140 the other. It is held between the two hairlines so it reads
as what the banners enclose, and drawn in the line token at low opacity,
so it is a texture on either ramp rather than the fixed blue it was. -->
<path class= "grid" d= "M0 111H1120M0 181H1120M0 251H1120M0 321H1120M0 391H1120M140 41V424M280 41V424M420 41V424M560 41V424M700 41V424M840 41V424M980 41V424" />
<g transform= "translate(0 46)" >
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
<!-- Entry drops: each input lands where it enters the loop. These carry
the accent, because where a piece of work joins is the one thing this
drawing has to say twice. -->
<path class= "edge entry" d= "M155 140V194" stroke-linecap= "round" marker-end= "url(#arrow-entry)" />
<path class= "edge entry" d= "M425 140V194" stroke-linecap= "round" marker-end= "url(#arrow-entry)" />
<path class= "edge entry" d= "M695 140V194" stroke-linecap= "round" marker-end= "url(#arrow-entry)" />
<!-- Main path and feedback loop -->
<path class= "edge" d= "M250 244H330" stroke-linecap= "round" marker-end= "url(#arrow)" />
<path class= "edge" d= "M520 244H600" stroke-linecap= "round" marker-end= "url(#arrow)" />
<path class= "edge" d= "M790 244H870" stroke-linecap= "round" marker-end= "url(#arrow)" />
<path class= "edge" d= "M965 288C965 368 425 368 425 288" fill= "none" stroke-opacity= ".75" stroke-dasharray= "9 10" marker-end= "url(#arrow)" />
<!-- Vague notion: cloud with a question mark -->
<g transform= "translate(155 76) scale(3.8) translate(-12 -12)" >
<path d= "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96z" fill= "#1a1e24" stroke= "#8c96a3" stroke-width= ".7" stroke-dasharray= "2 2.4" />
</g>
<!-- Big clear idea: large bulb.
A bulb the theme cannot colour has to be drawn as one: the earlier
version leaned on gold to say "idea", and a circle over a tab in the
body ink read as neither. The filament, the tapered neck and the ribbed
docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
screw base carry it instead, so it stays a bulb on either ground.
Lit in the accent, the same hue as the entry drop below it. The original
drew its bulbs, its entry arrows and its opening line all in one gold,
and the loop itself in a cyan; accenting the drops alone had left the
bulbs outside a family they belong to. The cloud stays muted, as it was
there too - a vague notion is not yet an idea, and should not glow like
one. -->
<circle cx= "425" cy= "66" r= "26" fill= "#1a1e24" stroke= "#7fa0ff" stroke-width= "2.5" />
<path d= "M417 84V76C417 66 433 66 433 76V84" fill= "none" stroke= "#7fa0ff" stroke-width= "2" stroke-linecap= "round" />
<path d= "M414.5 89L417 95M435.5 89L433 95" stroke= "#7fa0ff" stroke-width= "2.5" stroke-linecap= "round" />
<rect class= "node" x= "417" y= "95" width= "16" height= "10" rx= "1.5" stroke= "#7fa0ff" stroke-width= "2.5" />
<path d= "M417 98.5H433M417 101.5H433" stroke= "#7fa0ff" stroke-width= "1.2" />
<path d= "M401 42L394 35M449 42L456 35M425 34V25" stroke= "#7fa0ff" stroke-width= "2.5" stroke-linecap= "round" />
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
<!-- Small change: small bulb. The same construction, one size down; the
base takes a single rib rather than two, which is all that reads. -->
docs(diagrams): let the delivery loop's two slogans carry the accent (#2859)
* docs(diagrams): let the delivery loop's two slogans carry the accent
Alexey, on the merged version: "I would make both slogans stick out more -
splash of color, bigger font". He is right, and the original backs him up: it
set START ANYWHERE in gold and RIGHT-SIZED in pale blue, both larger than
what replaced them.
Dropping every colour from the diagrams - so one drawing could serve light
and dark - took that with it, and the two lines went grey and small enough to
skip. They are the only sentences in the drawing, and a reader who skips them
gets four boxes and no argument.
Both now take the accent at 22, up from 17.5 and 18, as a matched pair rather
than the mismatched ink-700 / muted-600 they had drifted into. Two colours
are not available to a theme with one accent, so the pairing the original
drew - gold for the entry promise, blue for the summary - collapses into one
hue used twice. The canvas grows 460 to 466 to hold the larger type at the
same 40 units of clearance.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): make the slogans banners, and give the pair two hues
The theme already had an answer for what a banner is here. custom.css says
the masthead is "display type, a lead, then a hairline closing the band, the
way every section on the marketing site closes" - so each slogan now closes on
a rule, run across the drawing's own measure, 60 to 1060, so the banners sit
on the boxes' grid rather than floating over it.
Both ends in the same accent read as one statement made twice. They are not:
the top is the invitation, the bottom the summary, and the original said so by
setting them in different colours. `--dg-accent-2` is the site's copper, the
nearest thing this palette holds to that gold, so the pairing survives without
inventing a hue. It needs a dark value of its own - `--bmad-copper` is #8a5a00
and disappears on a dark ground - and #e0b25f is that copper lifted, the value
`--dg-warn` already uses on dark.
The two rules cost height: 466 to 477.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): set the banners in the site's label register, and drop copper
Copper is not a palette colour on bmadcode.com. Every use of #8a5a00 there is
a status: `.tag-warn`, the gate's CONCERNS heading, `.road .st`, a flagged row
in the module pane. Putting it on the closing line said "this is a problem"
about the diagram's own conclusion. `--dg-accent-2` is gone.
Reading the live site rather than counting hexes in its stylesheet also
settles what these should be. Its uppercase labels are one register - IBM Plex
Mono, 11px, weight 400, tracking ~0.08em - in exactly two colours: #7c8797
when a label orients, #0f35e0 when it carries weight. No section head on the
site is coloured at all.
So the banners are that register, not the Archivo 700 headings they had
become, and the pair is told apart the way the site tells labels apart: accent
for the opening, which is also what the entry drops below it are drawn in, and
muted for the closing summary. They are set at 16 units rather than the site's
11px because they span the width of a drawing rather than sitting over a
paragraph - 13.3px apparent in a README, against the 9.2px Alexey objected to.
Canvas back to 465 now that the type is smaller.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
* docs(diagrams): light the bulbs, and rule the field the original had
Two colour families ran through the original: gold for the inputs - both
bulbs, the three entry drops, the opening line - and cyan for the loop. When
the drops took the accent back, the bulbs were left outside a family they
belong to, so the drawing had a blue arrow leaving an ink bulb.
Both bulbs are lit in the accent now. The cloud stays muted, as it was there
too: it was drawn in the cool colour, not the gold, and a vague notion should
not glow like an idea.
The ruled field returns at the original's pitch, 70 one way and 140 the other,
but held between the two hairlines so it reads as what the banners enclose
rather than running out under them. Drawn in the line token, not the fixed
blue it was, so it survives both ramps - at two opacities, because the dark
line sits further from its ground than the light one and the same value that
is texture on paper becomes structure on black.
No gradient. The docs page gives this drawing no ground of its own, so a
gradient can only live in the README export, and the two would drift apart for
it.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
2026-09-11 20:59:38 -04:00
<circle cx= "695" cy= "80" r= "14" fill= "#1a1e24" stroke= "#7fa0ff" stroke-width= "2" />
<path d= "M691 88V84C691 78 699 78 699 84V88" fill= "none" stroke= "#7fa0ff" stroke-width= "1.5" stroke-linecap= "round" />
<path d= "M689.5 92L690.5 96M700.5 92L699.5 96" stroke= "#7fa0ff" stroke-width= "2" stroke-linecap= "round" />
<rect class= "node" x= "690" y= "96" width= "10" height= "7" rx= "1.2" stroke= "#7fa0ff" stroke-width= "2" />
<path d= "M690 99.5H700" stroke= "#7fa0ff" stroke-width= "1" />
<path d= "M681.5 66.5L676.5 61.5M708.5 66.5L713.5 61.5M695 62V55" stroke= "#7fa0ff" stroke-width= "2" stroke-linecap= "round" />
docs: refresh the README banner, restore its diagram, and fix the favicon (#2854)
* 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>
2026-09-11 13:52:35 -04:00
<g text-anchor= "middle" >
<text x= "155" y= "94" fill= "#8c96a3" font-size= "32" font-weight= "700" data-i18n= "label" > ?</text>
<text x= "155" y= "128" fill= "#e6eaf0" font-size= "18" font-weight= "600" data-i18n= "vague-notion" > 막연한 생각</text>
<text x= "425" y= "128" fill= "#e6eaf0" font-size= "18" font-weight= "600" data-i18n= "big-clear-idea" > 크고 명확한 아이디어</text>
<text x= "695" y= "128" fill= "#e6eaf0" font-size= "18" font-weight= "600" data-i18n= "small-change" > 작은 변경</text>
<g transform= "translate(60 200)" >
<rect class= "node" width= "190" height= "88" rx= "2" stroke-opacity= ".7" />
<text x= "95" y= "51" fill= "#e6eaf0" font-size= "21" font-weight= "600" data-i18n= "clarify" > 구체화</text>
</g>
<g transform= "translate(330 200)" >
<rect class= "node" width= "190" height= "88" rx= "2" stroke-opacity= ".7" />
<text x= "95" y= "51" fill= "#e6eaf0" font-size= "21" font-weight= "600" data-i18n= "plan" > 계획</text>
</g>
<g transform= "translate(600 200)" >
<rect class= "node" width= "190" height= "88" rx= "2" stroke-opacity= ".7" />
<text x= "95" y= "51" fill= "#e6eaf0" font-size= "21" font-weight= "600" data-i18n= "build-and-verify" > 구현 및 검증</text>
</g>
<g transform= "translate(870 200)" >
<rect class= "node" width= "190" height= "88" rx= "2" stroke-opacity= ".7" />
<text x= "95" y= "51" fill= "#e6eaf0" font-size= "21" font-weight= "600" data-i18n= "learn-and-adjust" > 학습 및 조정</text>
</g>
</g>
</g>
</svg>
