Repaint to jet-black + atomic-tangerine skin, add consultant-special 2×2
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.
This commit is contained in:
@@ -18,3 +18,55 @@
|
||||
- `assets/example-quadrant.html` — minimal light
|
||||
- `assets/example-quadrant-dark.html` — minimal dark
|
||||
- `assets/example-quadrant-full.html` — full editorial
|
||||
- `assets/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-end` both pointing outward.
|
||||
- **Focal quadrant tint**: `rgba(235,108,54,0.04)` full rect behind the focal cell.
|
||||
- **Focal cell**: `accent-tint` fill, `accent` stroke at 1.2px. Corner tag in `accent`, weight 600.
|
||||
- **Non-focal cells**: `store` treatment (`ink @ 0.04` fill, `muted @ 0.28` stroke).
|
||||
- **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` (or `accent` on focal).
|
||||
- **Axis labels**: two-line — `↑ DRIVER NAME` in Geist Mono 9px weight 600 uppercase tracked, `range` sublabel in Geist Mono 9px regular `muted`.
|
||||
|
||||
### 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.
|
||||
|
||||
Reference in New Issue
Block a user