supervisor-banners

name	supervisor-banners
description	Dark-slate SVG banner family — 1200×320 hero + 1200×60 section dividers — for governance, curation, and audit-style documentation
lastReviewed	2026-05-01T00:00:00.000Z

Supervisor Banners

Two-piece dark-slate SVG banner family for documentation that needs a sense of governance, audit trail, or curation discipline. One 1200×320 hero banner per repo, plus 1200×60 section dividers that label and visually segment a multi-document folder (decisions/, audits/, ledgers/, ADRs/).

When to Use

Use this pattern	Use a different pattern
Documentation has clear sections (ADRs, ledgers, assessments, proposals) that benefit from visual labeling	Single-document deliverable that needs only a hero banner (document-banner-pastel)
Tone is governance, curation, audit, oversight, fleet management	Tone is creative, marketing, branding, generative (document-banner-pastel)
You want a cohesive dark-slate identity across a folder of docs	You want algorithmic generation with fixed brand watermarks (alex-banner-generation)
Reference set lives in a single assets/ folder for copy-paste reuse	Banner is generated dynamically from data

The pattern is purpose-built for repos that act as source-of-truth ledgers — a Supervisor, a registry, an audit catalog, an ADR collection.

The Family

A supervisor-banner set is one hero + N section dividers, all sharing the same background and corner-accent treatment.

Asset	Size	Role
banner-readme.svg	1200 × 320	Hero banner for the main README; carries the repo identity, mission tagline, stat badges, and value-prop cards
banner-<section>.svg	1200 × 60	Section divider; carries an icon, an uppercase label, a one-line subtitle, and a 3-dot accent

The hero anchors the brand. The dividers carry the same DNA into each subsection so a reader scrolling through a decisions/ folder feels the same hand throughout.

Hero Banner — 1200 × 320

Visual skeleton

Region	Spec
Canvas	1200 × 320 viewBox, rounded corners rx="16"
Background	Diagonal <linearGradient id="bg"> from #0f172a (slate 900) → #1e293b (slate 800) → #0f172a
Subtle grid	Horizontal lines every 40px, vertical every 100px, opacity="0.04", stroke = accent color
Corner accents	4 corner brackets using accent gradient at opacity="0.6" (top) and 0.3 (bottom)
Icon group	<g transform="translate(120, 160)"> — 90×90 icon centered at this anchor with optional filter="url(#glow)"
Title	x=230 y=105, font-size=48 weight=700 fill=#f8fafc (slate 50)
Tagline	x=230 y=143, font-size=20 weight=400 fill=#94a3b8 (slate 400)
Accent stripe	140×3 rect at x=230 y=158, fill=accent gradient, opacity="0.8"
Stat badges	3 pill rects at y=180, each 36px tall, rx="18", dark fill #1e293b with #334155 stroke
Bottom tagline	x=230 y=258, font-size=13 fill=#64748b (slate 500)
Value-prop cards	5 staggered cards at translate(790, 35), each 38px tall with gradient-tinted backgrounds
Version pill	bottom-right, 100×24 rounded pill with monospace version stamp

Required <defs>

<defs>
  <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
    <stop offset="0%"   style="stop-color:#0f172a"/>
    <stop offset="50%"  style="stop-color:#1e293b"/>
    <stop offset="100%" style="stop-color:#0f172a"/>
  </linearGradient>
  <linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   style="stop-color:#10b981"/>
    <stop offset="50%"  style="stop-color:#14b8a6"/>
    <stop offset="100%" style=/>
  
  
    
    
      
      
    
  

The accent gradient is the single knob that gives a repo its identity. Pick a 3-stop palette from the table below and the rest of the family inherits it.

Section Divider — 1200 × 60

Visual skeleton

Region	Spec
Canvas	1200 × 60 viewBox, rounded corners rx="8"
Background	Horizontal <linearGradient> from #0f172a → #1e293b
Bottom stripe	1200×4 rect at y=56, fill=accent gradient, opacity="0.6"
Icon	16×20 SVG icon at transform="translate(30, 30)", fill=accent palette
Label	x=58 y=28, font-size=13 weight=700 fill=primary accent, letter-spacing="2", uppercase
Subtitle	x=58 y=44, font-size=11 fill=#64748b (slate 500)
Accent dots	Right side at x=1170/1155/1143 y=30, radii 4/3/2, opacity 0.4/0.3/0.2

Required <defs>

<defs>
  <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   style="stop-color:#0f172a"/>
    <stop offset="100%" style="stop-color:#1e293b"/>
  </linearGradient>
  <linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%"   style="stop-color:#TRACK1"/>
    <stop offset="50%"  style="stop-color:#TRACK2"/>
    <stop offset="100%" style="stop-color:#TRACK3"/>
  </linearGradient>
</defs>

Each section gets its own accent gradient so a reader can tell at a glance which kind of document they're looking at.

Accent Tracks (pick one per section)

All tracks share the same dark-slate background. The accent gradient is the only thing that changes.

Track	Tone	Stop 1	Stop 2	Stop 3	Suggested use
Emerald-teal	Governance, oversight, audit	#10b981	#14b8a6	#06b6d4	Hero banner; ADR sections
Indigo-purple	Audit trails, append-only ledgers	#818cf8	#a78bfa	#c084fc	Changelogs, curation logs
Amber-orange	Snapshots, point-in-time assessments	#f59e0b	#f97316	#ef4444	Inventories, compliance assessments, wish lists
Sky-blue	Proposals awaiting decision	#38bdf8	#0ea5e9	#0284c7	Proposals, RFCs, drafts
Forest-cyan	Architecture, design rationale	#10b981	#14b8a6	#06b6d4	Founding plans, design docs (overlaps emerald-teal by design)
Warm-red	Edition / heir template identity	#f59e0b	#f97316	#ef4444	When the family is for the Edition repo, not Supervisor
Cool-violet	Marketplace / catalog identity	#38bdf8	#818cf8	#c084fc	When the family is for the Mall repo

Three accent tracks (warm-red, cool-violet, emerald-teal) form the cross-repo identity convention: a heir running Supervisor + Edition + Mall sees three distinct hero colors that map directly to the three repos. Tracks 1-5 in the same column are then used inside Supervisor's decisions/ folder to label sub-sections.

Icon Glyphs (for section dividers)

Each divider gets a 16×20 monogram. The glyphs below are illustrative; substitute any 16×20 SVG path that matches your section name.

Section	Glyph hint	SVG primitive
ADR / Decisions	Gavel	<rect x="-8" y="-12" width="16" height="10" rx="3"/> + <rect x="-2" y="-2" width="4" height="16" rx="1"/>
Ledger / Changelog	Lined list	<rect x="-10" y="-12" width="20" height="24" rx="2" fill="none" stroke="..."/> + 3 <line> rows
Assessment	Clipboard with check	<rect x="-9" y="-10" width="18" height="22" rx="2"/> + <rect x="-4" y="-14" width="8" height="6" rx="1"/> + checkmark <path>
Proposal	Folded document	<path d="M-8,-12 L4,-12 L10,-6 L10,12 L-8,12 Z"/>
Architecture	Blueprint cross	<rect x="-10" y="-10" width="20" height="20" rx="2" fill="none"/> + 2 crosshair lines + 2 corner dots + dashed diagonal

Keep glyphs monochromatic in the accent palette — no fills bleeding in from outside the track.

Hero Banner Template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" width="1200" height="320"
     role="img" aria-label="REPO_NAME — TAGLINE">
  <title>REPO_NAME</title>
  <desc>TAGLINE</desc>
  <defs>
    <!-- bg, accent, glow filters here (see Required defs) -->
  </defs>

  <rect width="1200" height="320" rx="16" fill="url(#bg)"/>

  <!-- subtle grid (omitted for brevity) -->
  <!-- corner accents -->
  <!-- icon group at translate(120, 160) -->

  <text x="230" y="105" font-family="Segoe UI, Helvetica, Arial, sans-serif"
        font-size="48" font-weight="700" fill="#f8fafc" letter-spacing="-1">REPO_NAME</text>

  REPO_TAGLINE

  

  
    
  

  SECONDARY_TAGLINE

  
    
  

  
  vX.Y.Z

Section Divider Template

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 60" width="1200" height="60"
     role="img" aria-label="SECTION_NAME">
  <defs>
    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   style="stop-color:#0f172a"/>
      <stop offset="100%" style="stop-color:#1e293b"/>
    </linearGradient>
    <linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   style="stop-color:#TRACK1"/>
      <stop =  =/>
      
    
  

  
  

  
    
  

  LABEL
  One-line subtitle

  
  
  

Reference Implementation

The pattern is exercised in Alex_ACT_Supervisor/assets/:

File	Track	Used in
banner-readme.svg	emerald-teal hero	README.md
banner-architecture.svg	emerald-teal divider	decisions/PLAN.md
banner-adr.svg	emerald-teal divider	decisions/ADR-*.md
banner-ledgers.svg	indigo-purple divider	decisions/curation-log.md, edition-changelog.md, brain-qa-changelog.md
banner-assessments.svg	amber-orange divider	decisions/ACT-ASSESSMENT-*.md, supervisor-brain-inventory.md, wish-list.md
banner-proposals.svg	sky-blue divider	decisions/proposals/*.md

Copy the six files into your project's assets/ folder and edit four things per banner: (1) the accent gradient stops, (2) the title text, (3) the stat badges or label, (4) the icon glyph.

Anti-Patterns

Anti-pattern	Why it fails
Mixing pastel and dark-slate banners in the same folder	Visual whiplash — readers lose the brand thread
Using a different background color per section	The point of the family is one background and varying accents
Skipping the section dividers and using only the hero	Sections lose their visual labels; folder feels flat
Inlining the gradient stops instead of using <defs>	Breaks the single-knob principle; refactor cost grows linearly
Filling icon glyphs with non-accent colors	The accent gradient is the section's identity; outside colors leak
Adding 6+ section types	Readers stop distinguishing tracks; pick a 4-5 maximum

Falsifiability

This pattern is decorative if any of these turn out true within 60 days of adoption in a project:

• A reader can't identify which section a document belongs to from its banner alone (defeats the divider purpose)
• Banners need to be regenerated on every release (defeats the copy-and-edit reuse model — promote to algorithmic muscle instead)
• Two of the accent tracks become interchangeable in practice (collapse them or pick a sharper distinction)
• The hero banner is never opened standalone (drop the dimensions to 1200×120 and reclaim README real estate)

Cross-References

• document-banner-pastel — pastel hero banners for creative / brand contexts
• alex-banner-generation — algorithmic banner muscle with fixed brand watermarks (Edition family)
• svg-graphics — general-purpose SVG authoring guidance
• svg-dashboard-composition — for composing multi-fragment SVG dashboards (different problem)