| name | document-banner-pastel |
| description | Hand-authored pastel SVG banners for documentation — 1200×240 with content-specific iconography, complementary to algorithmic banner muscles |
| lastReviewed | 2026-04-30T00:00:00.000Z |
Document Banner — Pastel Pattern
Hand-authored pastel banners that match each document's content. Complement to alex-banner-generation (which is algorithmic, dark-slate, 1200×300, fixed watermarks).
When to Use
| Use this pattern | Use the algorithmic muscle instead |
|---|
| Document needs unique content-specific iconography | Banner is purely structural (PLAN/CHANGELOG/RELEASE) |
| Pastel light theme matches the deliverable's audience (branding, education, healthcare, design) | Identity-stamping technical artifact in the Alex/ACT brand |
| Diagram on the right reinforces the document's mental model | One of the six fixed watermarks fits cleanly |
| You want the banner to age with the doc | Banner should never drift from the muscle's brand constants |
The two patterns coexist; pick by document role, not by aesthetic preference.
Visual Skeleton
| Region | Spec |
|---|
| Canvas | 1200 × 240 viewBox |
| Background | 2- or 3-stop diagonal <linearGradient> x1=0 y1=0 x2=1 y2=1 |
| Bottom stripe | <rect> at x=0 y=232 w=1200 h=8, gradient or solid |
| Kicker (line 1) | font-size=22 font-weight=500 letter-spacing=6 uppercased label, accent color |
| Headline (line 2) | font-size=56 font-weight=700, slate-800 #1f2937 |
| Subhead (line 3) | font-size=22 font-weight=400, gray-600 #4b5563 |
| Iconography | <g transform="translate(870..950, 55)" opacity="0.95"> — content-specific |
Text font: system-ui, -apple-system, Segoe UI, sans-serif. Add role="img" and aria-label="..." to the root <svg> for accessibility.
Pastel Palette (matches Mermaid palette convention)
Pick one of three accent tracks to match document tone. Each track ships a kicker color, a stripe color, and a 2- or 3-stop background gradient. All track text remains slate-800 #1f2937.
| Track | Tone | Kicker | Stripe | Background gradient |
|---|
| Purple | Strategic / identity / brand | #6d28d9 | #c4b5fd | #ede9fe → #fce7f3 (or 3-stop with #dbeafe at 100%) |
| Blue | Planning / synthesis / analytical | #1d4ed8 | #a78bfa or #93c5fd | #dbeafe → #ede9fe (or 3-stop with #d1fae5 at 100%) |
| Pink | Generative / questions / discovery | #be185d | #f9a8d4 | #fce7f3 → #f3f4f6 |
A single 3-stop "rainbow" variant (#fce7f3 → #ede9fe → #dbeafe) is reserved for top-level READMEs that need to telegraph all three tracks at once.
Template
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 240" role="img" aria-label="DOCUMENT_NAME banner">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#ede9fe"/>
<stop offset="100%" stop-color="#fce7f3"/>
</linearGradient>
</defs>
<rect width="1200" height="240" fill="url(#bg)"/>
<rect x="0" y="232" width="1200" height="8" fill="#c4b5fd"/>
<g font-family= =>
KICKER LABEL
Document Headline
One-line subtitle that captures intent
Iconography Variants
Each variant fits inside a ~280×180 box anchored by the right-side <g transform>. Pick the one whose mental model matches the document.
A — Tracks (timeline of options)
Use when the document presents N parallel paths or phases, optionally with a milestone.
<circle cx="60" cy="60" r="34" fill="#bfdbfe" stroke="#93c5fd" stroke-width="2"/>
<text x="60" y="66" font-size="14" font-weight="700" text-anchor="middle">T1</text>
<text x="60" y="115" font-size="11" text-anchor="middle" fill="#4b5563">Path A</text>
<circle cx="160" cy="60" r="34" fill="#ddd6fe" stroke="#a78bfa" stroke-width="2"/>
<text x="160" y="66" font-size= = =>T2
T3
Milestone · Date
B — Hub-and-spokes (one core, N audiences)
Use when the doc is about a central thing radiating to several stakeholders.
<circle cx="80" cy="80" r="40" fill="#ddd6fe" stroke="#a78bfa" stroke-width="2"/>
<text x="80" y="68" font-size="11" font-weight="700" text-anchor="middle" fill="#6d28d9">CORE</text>
<text x="80" y="86" font-size="13" font-weight="700" text-anchor="middle">LABEL</text>
<circle cx="180" cy="40" r="22" fill="#bfdbfe" stroke="#93c5fd" stroke-width="2"/>
<text x="180" y= = = =>A
B
C
C — Document mockup (form-like content)
Use when the doc is itself a structured artifact: branding plan, RFP, checklist, template.
<rect x="20" y="30" width="240" height="40" rx="6" fill="#ffffff" stroke="#a78bfa" stroke-width="2"/>
<line x1="35" y1="50" x2="245" y2="50" stroke="#c4b5fd" stroke-width="2"/>
<text x="35" y="46" font-size="11" font-weight="700" fill="#6d28d9">SECTION A</text>
<rect x="20" y="80" width="240" height="40" rx="6" fill="#ffffff" stroke="#a78bfa" stroke-width=/>
SECTION B
SECTION C
D — Concept badge (single dominant idea)
Use when the doc resolves to one positioning claim or thesis.
<circle cx="100" cy="100" r="60" fill="#ddd6fe" stroke="#a78bfa" stroke-width="3"/>
<text x="100" y="92" font-size="14" font-weight="700" text-anchor="middle">CLAIM</text>
<text x="100" y="110" font-size="14" font-weight="700" text-anchor="middle">LINE 2</text>
<text x="100" y="128" font-size="10" font-weight="500" text-anchor="middle" fill="#4b5563">tag · tag · tag</text>
E — Symbol focus (open-ended prompt)
Use when the doc is a question set, brainstorm, or research kickoff.
<text x="100" y="120" font-size="120" font-weight="700" text-anchor="middle" fill="#f9a8d4">?</text>
<circle cx="40" cy="50" r="6" fill="#fbcfe8" stroke="#f9a8d4" stroke-width="2"/>
<circle cx="180" cy="50" r="6" fill="#fbcfe8" stroke="#f9a8d4" stroke-width="2"/>
<circle cx="60" cy="170" r="6" fill="#fbcfe8" stroke="#f9a8d4" stroke-width="2"/>
<circle cx="170" cy= = = = =/>
Embedding in Markdown
# Document Title
Body content...
Use empty alt text ![] (not ![Banner]) so pandoc's markdown→docx reader doesn't emit the alt text as a figure caption when the doc gets exported. The aria-label on the SVG itself preserves accessibility.
Procedure
- Choose the variant — match the document's mental model to A/B/C/D/E above
- Choose the track — purple/blue/pink based on tone
- Copy the template + iconography variant into
banners/<doc-slug>.svg next to the doc
- Fill the kicker (uppercase, ≤ 20 chars), headline (≤ 32 chars to fit at 56px), subhead (≤ 80 chars)
- Customize the iconography — replace placeholder labels with content-specific text
- Embed with
 under the doc's H1
Anti-patterns
| Anti-pattern | Why it breaks |
|---|
Embedding with  alt text | pandoc exports the alt as a figure caption in the docx |
Mixing pastel banners with alex-banner-generation dark-slate banners in the same doc | Two visual systems compete; pick one per doc |
| Inventing new accent colors per banner | Loses the three-track recognition cue across the docset |
| Banner > 240px tall | Crowds the document's first paragraph; 240 is the cap |
Saturated brand colors (#0078d4, #d97706, #166534) | Breaks the pastel system; if you want a brand color, use alex-banner-generation instead |
Falsifiability
This pattern fails if, after 30 days of use, < 50% of new branded docs reuse one of variants A–E. That would mean each banner is reinvented from scratch and the variant table is decorative. Mitigation: track variant adoption in a heir's session memory; if reuse < 50%, the variant set is wrong (not specific enough, or doesn't match real document types).
Related
