Files
pi-skill/skills/references/type-quadrant.md
2026-05-25 16:41:08 +07:00

977 B
Raw Blame History

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 810px 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 light
  • assets/example-quadrant-dark.html — minimal dark
  • assets/example-quadrant-full.html — full editorial