Style: Comparative Analysis Dashboard. Type: BI/Analytics. Keywords: Side-by-side comparisons, period-over-period metrics, A/B test results, regional comparisons, performance benchmarks. Primary Colors: Comparison colors: primary (blue), comparison (orange/purple), delta indicator (green/red). Secondary Colors: Winning metric color (green), losing metric color (red), neutral comparison (grey), benchmark colors. Effects & Animation: Comparison bar animations (grow to value), delta indicator animations (direction arrows), highlight on compare. Best For: Period-over-period reporting, A/B test dashboards, market comparison, competitive analysis, regional performance. Do Not Use For: Single metric dashboards, future projections (use forecasting), real-time only (no historical). Light Mode: ✓ Full. Dark Mode: ✓ Full. Performance: ⚡ Excellent. Accessibility: ✓ WCAG AA. Mobile-Friendly: ◐ Medium. Conversion-Focused: ✗ Not applicable. Framework Compatibility: Recharts 9/10, Chart.js 9/10, D3.js 10/10. Era/Origin: 2020s Modern. Complexity: Medium. AI Prompt Keywords: Design a comparison dashboard. Use: side-by-side metrics, period selectors (vs last month), delta indicators (+/-), benchmark lines, A/B comparison tables, winning/losing highlights, percentage change badges.. CSS/Technical: display: flex for side-by-side, gap for comparison spacing, color coding (green up, red down), arrow indicators, diff highlighting, comparison table zebra striping. Implementation Checklist: ☐ Period selector works, ☐ Deltas calculated, ☐ Colors meaningful, ☐ Benchmarks shown, ☐ Mobile stacks properly, ☐ Export comparison. Design System Variables: --positive-color: #22C55E, --negative-color: #EF4444, --neutral-color: #6B7280, --comparison-gap: 2rem, --arrow-size: 16px, --badge-padding: 4px 8px.