Cathryn Lavery
ba3062c5ba
Why: the default skin was too warm/neutral and the pyramid + venn never quite read the way they should. Also prepping for public sharing, so the example diagrams needed to drop the littlemight-specific copy. Changes: - New five-color palette: jet-black ink, atomic-tangerine accent, white-smoke paper, blue-slate muted, silver hairlines. Replaces warm-stone + rust across every variant + dark-mode tokens. - Default background is clean paper; dot grid + framed container are now opt-in variants (uncomment in template to enable). - New consultant-special quadrant variant (example-quadrant-consultant.html) — 2×2 scenario matrix with named cells, double-ended axes, one focal quadrant; house skin, not a separate visual language. - Pyramid redrawn as a true triangular silhouette with shared edges on one slope (stacked polygons on a single triangle outline, no kinks). - Venn redesigned: dark-fill triple-intersection with white text, circle labels moved inside non-overlap lobes, pair-overlap labels removed, legend dropped. - Example content genericized (content site / product timeline / content platform instead of littlemight-branded copy). - Screenshots regenerated at 2× DPI; added quadrant-consultant.png (14th diagram in the gallery). - README: hero-first opener, preserved Why-I-built-it section, UTM tags on littlemight + bestself links, palette description updated.
4.6 KiB
4.6 KiB
Quadrant
Best for: prioritization (Impact × Effort), positioning (Reach × Frequency), portfolio maps, 2×2 decision frames.
Layout conventions
- 2×2 grid. Axis lines: 1px ink cross through the center.
- Axis labels at the ends of each axis (e.g.,
HIGH IMPACT →on the right,LOW IMPACT ←on the left — Geist Mono eyebrow). Never label at the midpoint. - Items: small labeled dots (
r=4) positioned in the quadrants. Labels 8–10px away; don't let labels cross axis lines. - Coral on the "do first" item (typically top-right).
- Limit to ~12 items; cluster or split beyond that.
Anti-patterns
- Four filled quadrants in different colors — position + label does the work; color noise weakens it.
- Items placed on axis lines (ambiguous quadrant).
- Missing axis names.
Examples
assets/example-quadrant.html— minimal lightassets/example-quadrant-dark.html— minimal darkassets/example-quadrant-full.html— full editorialassets/example-quadrant-consultant.html— consultant special (see below)
Consultant special (2×2 scenario matrix)
A layout variant of the standard quadrant — same house skin (warm paper, dot pattern, Instrument Serif title, Geist mono eyebrows, coral focal rule). The grammar shifts: axes hold a range rather than a measurement; cells hold named scenarios rather than positioned items.
Use when: you're framing four futures, archetypes, or strategic options across two independent drivers — classic scenario planning, positioning frames, or 2×2 strategy decks (BCG/McKinsey territory). The reader should come away with four named bets, not a point cloud.
Do not use for prioritization, density maps, or anything where the position inside a cell carries meaning — that's the standard quadrant above.
What makes it the consultant variant
| Move | Standard quadrant | Consultant special |
|---|---|---|
| Axis arrows | single-ended (→ HIGH EFFORT) | double-ended (← LOW ↔ HIGH →) |
| Cell content | small dots with labels | named scenario + 1–3 line description |
| Quadrant corner | short tag (e.g. DO FIRST) | numbered tag + axis combination (01 · HIGH / LOW) |
| Focal accent | coral on one item | coral on one quadrant — tinted bg + coral stroke + coral corner tag |
| Axes | 1px muted ink | 1.2px ink (slightly heavier — the axes carry more of the figure) |
Everything else — paper, dot pattern, typography, legend strip, 4px grid, complexity budget — is the house default. Don't invent new colors or fonts for this variant.
Style tokens (in-house)
- Paper / bg / pattern: defaults from
style-guide.md(paper, 22×22 dot pattern at 10% ink). - Axis lines:
ink(#2d3142),stroke-width: 1.2,marker-start+marker-endboth pointing outward. - Focal quadrant tint:
rgba(235,108,54,0.04)full rect behind the focal cell. - Focal cell:
accent-tintfill,accentstroke at 1.2px. Corner tag inaccent, weight 600. - Non-focal cells:
storetreatment (ink @ 0.04fill,muted @ 0.28stroke). - Cell title: Geist sans, 16px, weight 600,
ink. - Cell description: Geist sans, 11px,
muted, 1–3 lines, left-aligned inside the cell. - Corner tag: Geist Mono, 8px, uppercase, tracked
0.18em,muted(oraccenton focal). - Axis labels: two-line —
↑ DRIVER NAMEin Geist Mono 9px weight 600 uppercase tracked,rangesublabel in Geist Mono 9px regularmuted.
Layout conventions
- Four cells, equal size (240×160 or 280×180 are good defaults), arranged with a 40–60px gap from the axis cross.
- Axis cross passes between the cells, not through them.
- Arrow tips live ~20–40px outside the outermost cell edge; two-line axis labels beyond the tips.
- Exactly one focal cell. Picking none makes it a placeholder template; picking two erases the signal.
- Keep the legend strip + horizontal rule at the bottom — same as the standard quadrant. Legend swatches should show both "headline bet" (coral) and "candidate future" (neutral).
Anti-patterns (variant-specific)
- Plain white background — the warm paper + dot pattern is load-bearing across the skill; dropping it to "look consultant" turns the diagram generic.
- Sans-serif H1 — keep Instrument Serif for the page title. The title/diagram contrast is the house signature.
- Unnamed cells ("Scenario 1/2/3/4") in a shipped diagram — OK as a blank template; not OK as a finished artifact.
- Coral on more than one cell — same focal rule as everywhere else in the skill.
- 3×3 or 2×3 grids — those are different diagrams, not this variant.
- Positioning dots inside the cells — if position matters, use the standard quadrant.