Cathryn Lavery
53bd8dde0f
Thirteen editorial diagram types (architecture, flowchart, sequence, state, ER, timeline, swimlane, quadrant, nested, tree, layers, venn, pyramid) as self-contained HTML files with inline SVG. Progressive disclosure: lean SKILL.md points to per-type references. Neutral stone+rust default skin, first-run gate that prompts users to customize the style guide from their own website, URL-based onboarding, annotation-callout primitive, sketchy filter variant, live gallery at assets/index.html.
1.7 KiB
1.7 KiB
Pyramid / Funnel
Best for: hierarchy of needs, prioritization ranks, value pyramids, conversion funnels, content importance stacks.
Two orientations — pick one
- Pyramid (point up) — narrow apex = most important / rarest / most valuable. Base is broadest / foundational.
- Funnel (point down) — narrow end = conversion (smallest group). Top is widest / audience.
Don't mix orientations on one diagram.
Layout conventions
- 4–6 layers. Each layer is a trapezoid built from an SVG
<polygon>with 4 points. - Consistent layer height (56–72px).
- Widths decrease linearly from base to apex (pyramid) or top to bottom (funnel). When showing real funnel data, widths must be honest (proportional to count/percentage).
- Each layer has:
- Name label centered inside the trapezoid — Geist 12–14px 600.
- Sublabel below or beside the name — Geist Mono 9–10px.
- Side annotation (right or left) — optional. For funnels: drop-off percentage here (
−40%).
- Fill: subtle graded tints OR all paper-2 with hairline dividers (cleaner). Pick one.
- Stroke: 1px hairline between layers; outer silhouette 1px muted or ink.
- Coral on ONE layer only: apex of pyramid, conversion layer of funnel, or critical bottleneck.
- Optional left-margin axis arrow + Geist Mono label (
rarer ↑,drop-off ↓).
Anti-patterns
- 7+ layers (illegible — compress or split).
- Pyramid for non-hierarchical data (use a tree or bar chart).
- Dishonest widths (fake equal spacing when drops are unequal).
- Coral on the base layer (dilutes the "apex = rare" signal).
Examples
assets/example-pyramid.html— minimal lightassets/example-pyramid-dark.html— minimal darkassets/example-pyramid-full.html— full editorial