mirror of
https://github.com/bmad-code-org/BMAD-METHOD.git
synced 2026-09-19 08:11:52 +08:00
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>
This commit is contained in:
do-operator
@@ -66,6 +66,16 @@ const STYLE = `
|
||||
.bmad-diagram .band { fill: ${RAMP.surface}; stroke: ${RAMP.line}; stroke-opacity: 0.28; stroke-width: 1; }
|
||||
.bmad-diagram .panel { fill: none; stroke: ${RAMP.line}; stroke-width: 1; stroke-dasharray: 4 4; }
|
||||
.bmad-diagram .panel-title { fill: ${RAMP.accent}; }
|
||||
.bmad-diagram .slogan {
|
||||
font-family: ${MONO};
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.085em;
|
||||
text-transform: uppercase;
|
||||
fill: ${RAMP.accent};
|
||||
}
|
||||
.bmad-diagram .slogan.alt { fill: ${RAMP.muted}; }
|
||||
.bmad-diagram .grid { fill: none; stroke: ${RAMP.line}; stroke-opacity: 0.22; stroke-width: 1; }
|
||||
.bmad-diagram .rule { fill: none; stroke: ${RAMP.line}; stroke-width: 1; }
|
||||
.bmad-diagram .edge { fill: none; stroke: ${RAMP.edge}; 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; }
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<svg class="bmad-diagram" xmlns="http://www.w3.org/2000/svg" width="1120" height="460" viewBox="0 0 1120 460" role="img" aria-labelledby="title description">
|
||||
<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">
|
||||
<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>
|
||||
@@ -10,17 +10,36 @@
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- The two band labels sit outside the drawing's group and are the only
|
||||
things the shift below does not move. Each is held 40 units clear of the
|
||||
nearest mark: before this the title's baseline fell three units BELOW the
|
||||
big bulb's top ray while the lower band had 35 units of air, so the pair
|
||||
read as carelessly placed rather than as a frame. -->
|
||||
<!-- 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. -->
|
||||
<g text-anchor="middle">
|
||||
<text x="560" y="28" fill="var(--dg-ink)" font-size="17.5" font-weight="700" letter-spacing="1.5" data-i18n="start-anywhere">START ANYWHERE</text>
|
||||
<text x="560" y="444" fill="var(--dg-muted)" font-size="18" font-weight="600" letter-spacing="1.4" data-i18n="right-sized-for-the-work-in-front-">RIGHT-SIZED FOR THE WORK IN FRONT OF YOU</text>
|
||||
<text class="slogan" x="560" y="27" data-i18n="start-anywhere">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-">RIGHT-SIZED FOR THE WORK IN FRONT OF YOU</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(0 43)">
|
||||
<!-- 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)">
|
||||
|
||||
<!-- 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
|
||||
@@ -44,22 +63,29 @@
|
||||
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
|
||||
screw base carry it instead, so it stays a bulb on either ground. -->
|
||||
<circle cx="425" cy="66" r="26" fill="var(--dg-surface)" stroke="var(--dg-ink)" stroke-width="2.5"/>
|
||||
<path d="M417 84V76C417 66 433 66 433 76V84" fill="none" stroke="var(--dg-ink)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M414.5 89L417 95M435.5 89L433 95" stroke="var(--dg-ink)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<rect class="node" x="417" y="95" width="16" height="10" rx="1.5" stroke="var(--dg-ink)" stroke-width="2.5"/>
|
||||
<path d="M417 98.5H433M417 101.5H433" stroke="var(--dg-ink)" stroke-width="1.2"/>
|
||||
<path d="M401 42L394 35M449 42L456 35M425 34V25" stroke="var(--dg-ink)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
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="var(--dg-surface)" stroke="var(--dg-accent)" stroke-width="2.5"/>
|
||||
<path d="M417 84V76C417 66 433 66 433 76V84" fill="none" stroke="var(--dg-accent)" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M414.5 89L417 95M435.5 89L433 95" stroke="var(--dg-accent)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<rect class="node" x="417" y="95" width="16" height="10" rx="1.5" stroke="var(--dg-accent)" stroke-width="2.5"/>
|
||||
<path d="M417 98.5H433M417 101.5H433" stroke="var(--dg-accent)" stroke-width="1.2"/>
|
||||
<path d="M401 42L394 35M449 42L456 35M425 34V25" stroke="var(--dg-accent)" stroke-width="2.5" stroke-linecap="round"/>
|
||||
|
||||
<!-- Small change: small bulb. The same construction, one size down; the
|
||||
base takes a single rib rather than two, which is all that reads. -->
|
||||
<circle cx="695" cy="80" r="14" fill="var(--dg-surface)" stroke="var(--dg-ink)" stroke-width="2"/>
|
||||
<path d="M691 88V84C691 78 699 78 699 84V88" fill="none" stroke="var(--dg-ink)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M689.5 92L690.5 96M700.5 92L699.5 96" stroke="var(--dg-ink)" stroke-width="2" stroke-linecap="round"/>
|
||||
<rect class="node" x="690" y="96" width="10" height="7" rx="1.2" stroke="var(--dg-ink)" stroke-width="2"/>
|
||||
<path d="M690 99.5H700" stroke="var(--dg-ink)" stroke-width="1"/>
|
||||
<path d="M681.5 66.5L676.5 61.5M708.5 66.5L713.5 61.5M695 62V55" stroke="var(--dg-ink)" stroke-width="2" stroke-linecap="round"/>
|
||||
<circle cx="695" cy="80" r="14" fill="var(--dg-surface)" stroke="var(--dg-accent)" stroke-width="2"/>
|
||||
<path d="M691 88V84C691 78 699 78 699 84V88" fill="none" stroke="var(--dg-accent)" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M689.5 92L690.5 96M700.5 92L699.5 96" stroke="var(--dg-accent)" stroke-width="2" stroke-linecap="round"/>
|
||||
<rect class="node" x="690" y="96" width="10" height="7" rx="1.2" stroke="var(--dg-accent)" stroke-width="2"/>
|
||||
<path d="M690 99.5H700" stroke="var(--dg-accent)" stroke-width="1"/>
|
||||
<path d="M681.5 66.5L676.5 61.5M708.5 66.5L713.5 61.5M695 62V55" stroke="var(--dg-accent)" stroke-width="2" stroke-linecap="round"/>
|
||||
|
||||
<g text-anchor="middle">
|
||||
<text x="155" y="94" fill="var(--dg-muted)" font-size="32" font-weight="700" data-i18n="label">?</text>
|
||||
|
||||
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 7.8 KiB |
@@ -533,6 +533,49 @@ starlight-toc h2,
|
||||
fill: var(--dg-accent);
|
||||
}
|
||||
|
||||
/* The two lines that frame a drawing rather than label part of it, closing on
|
||||
a hairline the way every section of the marketing site closes.
|
||||
|
||||
This is the site's label register, not a heading: mono, uppercase, weight
|
||||
400, wide tracking. Colour follows the site's own rule for these - the accent
|
||||
for a label that carries weight, muted for one that only orients - so a
|
||||
drawing's opening and its closing summary are told apart without a second
|
||||
hue. The site has no second hue to borrow: its copper is a status colour
|
||||
(`tag-warn`, the gate's CONCERNS heading) and reads as a problem anywhere
|
||||
else. */
|
||||
.bmad-diagram .slogan {
|
||||
font-family: var(--bmad-mono);
|
||||
font-size: 16px;
|
||||
letter-spacing: 0.085em;
|
||||
text-transform: uppercase;
|
||||
fill: var(--dg-accent);
|
||||
}
|
||||
|
||||
.bmad-diagram .slogan.alt {
|
||||
fill: var(--dg-muted);
|
||||
}
|
||||
|
||||
/* A ruled field behind a drawing. Faint enough to be texture, never structure:
|
||||
at this opacity it survives both ramps without competing with the edges. */
|
||||
.bmad-diagram .grid {
|
||||
fill: none;
|
||||
stroke: var(--dg-line);
|
||||
stroke-opacity: 0.35;
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
/* The dark line sits further from its ground than the light one does, so the
|
||||
same opacity reads as structure there rather than texture. */
|
||||
:root[data-theme='dark'] .bmad-diagram .grid {
|
||||
stroke-opacity: 0.22;
|
||||
}
|
||||
|
||||
.bmad-diagram .rule {
|
||||
fill: none;
|
||||
stroke: var(--dg-line);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------
|
||||
Asides
|
||||
A tinted plate, an icon and a heading in the hue — the shape the
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<svg class="bmad-diagram" xmlns="http://www.w3.org/2000/svg" width="1120" height="460" viewBox="0 0 1120 460" role="img" aria-labelledby="title description">
|
||||
<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">
|
||||
<style>
|
||||
.bmad-diagram { font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
|
||||
.bmad-diagram text { fill: #e6eaf0; }
|
||||
@@ -11,6 +11,16 @@
|
||||
.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; }
|
||||
.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; }
|
||||
.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; }
|
||||
@@ -32,7 +42,7 @@
|
||||
fill: #8c96a3;
|
||||
}
|
||||
</style>
|
||||
<rect width="1120" height="460" rx="20" fill="#111418"/>
|
||||
<rect width="1120" height="465" rx="20" fill="#111418"/>
|
||||
<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>
|
||||
@@ -44,17 +54,36 @@
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- The two band labels sit outside the drawing's group and are the only
|
||||
things the shift below does not move. Each is held 40 units clear of the
|
||||
nearest mark: before this the title's baseline fell three units BELOW the
|
||||
big bulb's top ray while the lower band had 35 units of air, so the pair
|
||||
read as carelessly placed rather than as a frame. -->
|
||||
<!-- 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. -->
|
||||
<g text-anchor="middle">
|
||||
<text x="560" y="28" fill="#e6eaf0" font-size="17.5" font-weight="700" letter-spacing="1.5" data-i18n="start-anywhere">어디서든 시작</text>
|
||||
<text x="560" y="444" fill="#8c96a3" font-size="18" font-weight="600" letter-spacing="1.4" data-i18n="right-sized-for-the-work-in-front-">눈앞의 작업에 꼭 맞는 절차</text>
|
||||
<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>
|
||||
</g>
|
||||
|
||||
<g transform="translate(0 43)">
|
||||
<!-- 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)">
|
||||
|
||||
<!-- 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
|
||||
@@ -78,22 +107,29 @@
|
||||
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
|
||||
screw base carry it instead, so it stays a bulb on either ground. -->
|
||||
<circle cx="425" cy="66" r="26" fill="#1a1e24" stroke="#e6eaf0" stroke-width="2.5"/>
|
||||
<path d="M417 84V76C417 66 433 66 433 76V84" fill="none" stroke="#e6eaf0" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M414.5 89L417 95M435.5 89L433 95" stroke="#e6eaf0" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<rect class="node" x="417" y="95" width="16" height="10" rx="1.5" stroke="#e6eaf0" stroke-width="2.5"/>
|
||||
<path d="M417 98.5H433M417 101.5H433" stroke="#e6eaf0" stroke-width="1.2"/>
|
||||
<path d="M401 42L394 35M449 42L456 35M425 34V25" stroke="#e6eaf0" stroke-width="2.5" stroke-linecap="round"/>
|
||||
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"/>
|
||||
|
||||
<!-- Small change: small bulb. The same construction, one size down; the
|
||||
base takes a single rib rather than two, which is all that reads. -->
|
||||
<circle cx="695" cy="80" r="14" fill="#1a1e24" stroke="#e6eaf0" stroke-width="2"/>
|
||||
<path d="M691 88V84C691 78 699 78 699 84V88" fill="none" stroke="#e6eaf0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M689.5 92L690.5 96M700.5 92L699.5 96" stroke="#e6eaf0" stroke-width="2" stroke-linecap="round"/>
|
||||
<rect class="node" x="690" y="96" width="10" height="7" rx="1.2" stroke="#e6eaf0" stroke-width="2"/>
|
||||
<path d="M690 99.5H700" stroke="#e6eaf0" stroke-width="1"/>
|
||||
<path d="M681.5 66.5L676.5 61.5M708.5 66.5L713.5 61.5M695 62V55" stroke="#e6eaf0" stroke-width="2" stroke-linecap="round"/>
|
||||
<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"/>
|
||||
|
||||
<g text-anchor="middle">
|
||||
<text x="155" y="94" fill="#8c96a3" font-size="32" font-weight="700" data-i18n="label">?</text>
|
||||
|
||||
|
Before Width: | Height: | Size: 8.0 KiB After Width: | Height: | Size: 9.9 KiB |
@@ -1,4 +1,4 @@
|
||||
<svg class="bmad-diagram" xmlns="http://www.w3.org/2000/svg" width="1120" height="460" viewBox="0 0 1120 460" role="img" aria-labelledby="title description">
|
||||
<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">
|
||||
<style>
|
||||
.bmad-diagram { font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; }
|
||||
.bmad-diagram text { fill: #e6eaf0; }
|
||||
@@ -11,6 +11,16 @@
|
||||
.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; }
|
||||
.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; }
|
||||
.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; }
|
||||
@@ -32,7 +42,7 @@
|
||||
fill: #8c96a3;
|
||||
}
|
||||
</style>
|
||||
<rect width="1120" height="460" rx="20" fill="#111418"/>
|
||||
<rect width="1120" height="465" rx="20" fill="#111418"/>
|
||||
<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>
|
||||
@@ -44,17 +54,36 @@
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- The two band labels sit outside the drawing's group and are the only
|
||||
things the shift below does not move. Each is held 40 units clear of the
|
||||
nearest mark: before this the title's baseline fell three units BELOW the
|
||||
big bulb's top ray while the lower band had 35 units of air, so the pair
|
||||
read as carelessly placed rather than as a frame. -->
|
||||
<!-- 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. -->
|
||||
<g text-anchor="middle">
|
||||
<text x="560" y="28" fill="#e6eaf0" font-size="17.5" font-weight="700" letter-spacing="1.5" data-i18n="start-anywhere">START ANYWHERE</text>
|
||||
<text x="560" y="444" fill="#8c96a3" font-size="18" font-weight="600" letter-spacing="1.4" data-i18n="right-sized-for-the-work-in-front-">RIGHT-SIZED FOR THE WORK IN FRONT OF YOU</text>
|
||||
<text class="slogan" x="560" y="27" data-i18n="start-anywhere">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-">RIGHT-SIZED FOR THE WORK IN FRONT OF YOU</text>
|
||||
</g>
|
||||
|
||||
<g transform="translate(0 43)">
|
||||
<!-- 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)">
|
||||
|
||||
<!-- 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
|
||||
@@ -78,22 +107,29 @@
|
||||
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
|
||||
screw base carry it instead, so it stays a bulb on either ground. -->
|
||||
<circle cx="425" cy="66" r="26" fill="#1a1e24" stroke="#e6eaf0" stroke-width="2.5"/>
|
||||
<path d="M417 84V76C417 66 433 66 433 76V84" fill="none" stroke="#e6eaf0" stroke-width="2" stroke-linecap="round"/>
|
||||
<path d="M414.5 89L417 95M435.5 89L433 95" stroke="#e6eaf0" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<rect class="node" x="417" y="95" width="16" height="10" rx="1.5" stroke="#e6eaf0" stroke-width="2.5"/>
|
||||
<path d="M417 98.5H433M417 101.5H433" stroke="#e6eaf0" stroke-width="1.2"/>
|
||||
<path d="M401 42L394 35M449 42L456 35M425 34V25" stroke="#e6eaf0" stroke-width="2.5" stroke-linecap="round"/>
|
||||
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"/>
|
||||
|
||||
<!-- Small change: small bulb. The same construction, one size down; the
|
||||
base takes a single rib rather than two, which is all that reads. -->
|
||||
<circle cx="695" cy="80" r="14" fill="#1a1e24" stroke="#e6eaf0" stroke-width="2"/>
|
||||
<path d="M691 88V84C691 78 699 78 699 84V88" fill="none" stroke="#e6eaf0" stroke-width="1.5" stroke-linecap="round"/>
|
||||
<path d="M689.5 92L690.5 96M700.5 92L699.5 96" stroke="#e6eaf0" stroke-width="2" stroke-linecap="round"/>
|
||||
<rect class="node" x="690" y="96" width="10" height="7" rx="1.2" stroke="#e6eaf0" stroke-width="2"/>
|
||||
<path d="M690 99.5H700" stroke="#e6eaf0" stroke-width="1"/>
|
||||
<path d="M681.5 66.5L676.5 61.5M708.5 66.5L713.5 61.5M695 62V55" stroke="#e6eaf0" stroke-width="2" stroke-linecap="round"/>
|
||||
<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"/>
|
||||
|
||||
<g text-anchor="middle">
|
||||
<text x="155" y="94" fill="#8c96a3" font-size="32" font-weight="700" data-i18n="label">?</text>
|
||||
|
||||
|
Before Width: | Height: | Size: 7.9 KiB After Width: | Height: | Size: 9.8 KiB |
Reference in New Issue
Block a user