Green if metric > target, Amber if within range, Red if below critical| Component | Purpose | Design Rule | Example |
|---|---|---|---|
| KPI Card | Show single metric with trend | Number + sparkline + RAG dot | MRR: $125K (+8% MoM) |
| RAG Indicator | Visual status at a glance | Green/Amber/Red with measurable thresholds | Green > 10%, Amber 5-10%, Red < 5% |
| Trend Line | Show direction over time | 12-week rolling, no daily noise | Weekly active users trend |
| Comparison Bar | Show actual vs target | Horizontal bar with target marker | Revenue: $800K / $1M target |
| Alert Badge | Flag items needing attention | Red count badge, link to detail | 3 Critical Alerts |
| Action Card | Prescribed next step for red KPI | If-then rule with owner | If churn > 5% → CS review top 10 |
| Drill-down Link | Navigate to detail view | One click from summary to detail | MRR card → revenue breakdown |
| Owner Badge | Accountability per KPI | Name next to each KPI | VP Sales: Pipeline Velocity |
| Data Freshness | Show when data last updated | Timestamp in header or per-card | Last updated: 2 min ago |
START: What type of command center?
├── Audience is CEO/founder only?
│ ├── YES → Single-screen overview with 5-8 KPIs covering all functions
│ └── NO ↓
├── Audience is executive team?
│ ├── YES → Overview + department drill-downs (one tab per function)
│ └── NO ↓
├── Audience is board of directors?
│ ├── YES → Quarterly snapshot with trend comparisons (simpler)
│ └── NO ↓
└── Company-wide?
└── Simplified version with 3-5 company-level KPIs (no sensitive data)
KPI Selection:
├── Directly measures progress toward a company goal?
│ ├── NO → Remove it
│ └── YES ↓
├── Can an owner take action when it changes?
│ ├── NO → Move to drill-down page
│ └── YES ↓
└── Changes frequently enough for dashboard?
├── NO → Move to quarterly report
└── YES → Include on command center
Apply three filters: strategic alignment, actionability, and volatility. Choose 8-12 KPIs with a mix of leading and lagging indicators across revenue, acquisition, retention, product, efficiency, and team health. [src1] [src2]
Verify: 8-12 KPIs selected, each passes all 3 filters.
Set measurable Green/Amber/Red boundaries for each KPI. Use percentages or ratios that scale with growth. Set amber as a buffer zone. Review thresholds quarterly. [src3] [src5]
Verify: Every KPI has Green/Amber/Red thresholds with measurable data points.
Create three alert tiers: Critical (red threshold, Slack DM + email, < 4 hour response), Warning (amber, dashboard badge only), Info (notable changes, weekly digest). Attach remediation checklists to critical alerts. Auto-escalate if unacknowledged after 48 hours. [src4] [src6]
Verify: Alert tiers defined, notification channels configured, remediation checklists attached.
Every red KPI must have a pre-defined action rule: IF metric crosses red THEN owner performs immediate diagnosis, implements corrective action within N days, and reports in next standup. Include escalation timeline. [src2]
Verify: Every red-threshold KPI has an action rule with owner, timeline, and escalation path.
Single screen with visual hierarchy: Row 1 financial KPIs (most important, top-left), Row 2 customer/product KPIs, Row 3 operational KPIs, Row 4 action items for red KPIs. Each card: large number + sparkline + RAG dot + owner initials. No pie charts. [src1] [src6]
Verify: Layout fits single screen, follows visual hierarchy, all KPIs visible without scrolling.
// Input: KPI name, value, trend, threshold config
// Output: Styled card with RAG indicator and sparkline
function KPICard({ name, value, trend, thresholds, owner }) {
const status = value >= thresholds.green ? 'green'
: value >= thresholds.amber ? 'amber' : 'red';
const icon = status === 'green' ? '✓'
: status === 'amber' ? '⚠' : '✗';
return (
<div className={`kpi-card kpi-${status}`}>
<span className="kpi-status">{icon}</span>
<h3>{name}</h3>
<p className="kpi-value">{value}</p>
<Sparkline data={trend} />
<span className="kpi-owner">{owner}</span>
</div>
);
}
# Input: KPI data dict with current values and threshold config
# Output: List of alerts for KPIs that crossed red threshold
def evaluate_alerts(kpis, thresholds):
alerts = []
for kpi_name, current in kpis.items():
config = thresholds[kpi_name]
if config["direction"] == "higher_is_better":
if current < config["red"]:
alerts.append({"kpi": kpi_name, "value": current,
"threshold": config["red"], "severity": "critical"})
else:
if current > config["red"]:
alerts.append({"kpi": kpi_name, "value": current,
"threshold": config["red"], "severity": "critical"})
return alerts
Showing every available metric because stakeholders each want their metric visible. Executives glance for 2 seconds, absorb nothing, and stop using it. [src1]
Limit the command center to 8-12 KPIs that pass the 3-filter test. Everything else goes on department drill-down pages.
Letting people manually assign green/amber/red based on feeling. Everything is green until it is suddenly, catastrophically red.
Define measurable thresholds before launch. RAG is calculated automatically from data. No human judgment in status assignment. [src3]
Sending notifications for every amber and red change. Within a week, the channel is muted. A real critical alert is missed.
Reserve push notifications for red-threshold crossings. Amber changes go in weekly digest. This preserves signal value. [src5]
| Use When | Don't Use When | Use Instead |
|---|---|---|
| Building a real-time executive dashboard | Need data pipeline architecture | startup-dashboard-architecture |
| Designing KPI selection and alert rules | Need a specific department dashboard | Department-specific dashboard card |
| Setting up RAG thresholds and action rules | Need to select dashboard tooling | dashboard-template-library |