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.
1.6 KiB
1.6 KiB
Venn / Set Overlap
Best for: intersection of concepts/domains, shared attributes between categories, "where A meets B", ikigai-style frames (desirable × feasible × viable).
Layout conventions
- Prefer 2 or 3 circles. Avoid 4+ (unreadable — use a matrix instead).
- Circle stroke: 1px hairline, color per-set (ink, muted, soft).
- Circle fill: very low-opacity tint —
rgba(45,49,66,0.04)for ink set,rgba(79,93,117,0.05)for muted. Tints compound naturally in overlap regions. - Radii: equal when sets are comparable in size; proportional when sets are meaningfully different. Don't fake equal sizes for aesthetics.
- Set labels placed outside the circle, NEVER crossing the stroke. Geist 12–14px 600 for the set name, optional Geist Mono 9px sublabel.
- Intersection labels placed inside the overlap region, Geist 12px 600, centered. For small overlaps, use a leader line to a label in clear space.
- Coral accent on the ONE focal intersection — the "sweet spot". Either coral label stroke OR clipPath-bounded coral fill tint (
rgba(235,108,54,0.10)). - Circle centers and radii divisible by 4.
Anti-patterns
- Unlabeled regions — reader can't tell which set is which.
- Circles that don't overlap when overlap is the point.
- Equal-sized circles when sets are obviously different (dishonest).
- Coral on multiple overlap regions (focal signal dies).
- Labels sitting on top of circle strokes (illegible).
- 4+ circles where 2–3 would do.
Examples
assets/example-venn.html— minimal lightassets/example-venn-dark.html— minimal darkassets/example-venn-full.html— full editorial