deep-comparison

structure

The comparison archetype evaluates multiple options (frameworks, tools, approaches) side-by-side. It presents objective differences, explores key tradeoff dimensions, then offers a decision framework.

• Comparison table — at-a-glance view of 2–3+ options
• Dimension sections (3–5 H2s) — each exploring one axis of difference (latency, cost, learning curve, deployment model, etc.)
• How to choose — decision framework: when to pick each option given constraints

Works for: tool selection guides, framework comparisons, architecture pattern tradeoffs, cloud service evaluations.

required widgets

• Comparison table — HTML `<table>` with options as columns, attributes as rows
• Visualization of tradeoffs — scatter plot, bar chart, or matrix showing dimension relationships

visual silhouette

archetype-check rules

• One `<table>` element with <thead> and <tbody>
• ≥3 H2s: ≥1 "dimension: " sections + "how to choose" (required)
• `<p class="vg-deep-opener">` exists
• `<span class="vg-dropcap">` exists with exactly 1 character
• ≥2 inline `<svg>` elements (scatter or chart showing tradeoffs)
• `<p class="vg-deep-closer">` with `<strong>Take-away</strong>`
• Universal contract: opener, dropcap, closer with strong tag

when to use

Comparison works best when there is no single "right" answer — only different choices suited to different constraints. The value is in articulating those constraints and tradeoffs clearly enough that readers can make their own informed decision.