Hand-authored pastel SVG banners for documentation — 1200×240 with content-specific iconography, complementary to algorithmic banner muscles
tier
extended
applyTo
**/*document*,**/*banner*,**/*pastel*
currency
2026-04-29T00:00:00.000Z
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).
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
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 1200 240"role="img"aria-label="DOCUMENT_NAME banner"><defs><linearGradientid="bg"x1="0"y1="0"x2="1"y2="1"><stopoffset="0%"stop-color="#ede9fe"/><stopoffset="100%"stop-color="#fce7f3"/></linearGradient></defs><rectwidth="1200"height="240"fill="url(#bg)"/><rectx="0"y="232"width="1200"height="8"fill="#c4b5fd"/><gfont-family="system-ui, -apple-system, Segoe UI, sans-serif"fill="#1f2937"><textx="60"y="80"font-size="22"font-weight="500"letter-spacing="6"fill="#6d28d9">KICKER LABEL</text><textx="60"y="148"font-size="56"font-weight="700">Document Headline</text><textx="60"y="195"font-size="22"font-weight="400"fill="#4b5563">One-line subtitle that captures intent</text></g><!-- Iconography group: translate to (870..950, 55), opacity 0.95 --><gtransform="translate(940,55)"opacity="0.95"><!-- Pick an iconography variant from the table below --></g></svg>
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.
# 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
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).
