Design patterns for OKR executive dashboards including RAG heatmaps, confidence bands, audience modes, and brand compliance.
From opspal-okrsnpx claudepluginhub revpalsfdc/opspal-commercial --plugin opspal-okrsThis skill is limited to using the following tools:
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Designs, audits, and improves analytics tracking systems using Signal Quality Index for reliable, decision-ready data in marketing, product, and growth.
Enforces A/B test setup with gates for hypothesis locking, metrics definition, sample size calculation, assumptions checks, and execution readiness before implementation.
This skill provides canonical design rules for generating OKR cycle dashboards. Any agent producing HTML dashboards for OKR data MUST follow these patterns.
Map data types to dashboard components:
| Data Type | Component | Example |
|---|---|---|
| Single metric with trend | KPI card | ARR growth, NRR, pipeline coverage |
| Status per objective/KR | Heatmap table with RAG badges | Objective health grid |
| Distribution or comparison | Bar chart (horizontal or vertical) | KR confidence bands |
| Time series | Line chart with fill | Weekly KR completion trend |
| Ranked list with metadata | Sortable table | Initiative watchlist |
| Score with thresholds | Gauge | Overall cycle health |
okr-confidence-rating-reference.yaml:
.status-green, #22C55E): On Track — completion ≥70%.status-yellow, #F59E0B): At Risk — completion 40-69%.status-red, #EF4444): Off Track — completion <40%.status-green, .status-yellow, .status-red from the RevPal dashboard theme.The board-level scoreline always appears in row 1 as four KPI cards:
| Position | Metric | Format |
|---|---|---|
| Col 1-3 | ARR Growth | Percent with trend |
| Col 4-6 | Net Revenue Retention | Percent with trend |
| Col 7-9 | Pipeline Coverage | Number with "x" suffix |
| Col 10-12 | KR Completion Rate | Percent with trend |
These four KPIs are the minimum for any OKR dashboard regardless of audience mode.
When showing P10/P50/P90 confidence bands:
#94A3B8), P50 = grape (#5F3B8C), P90 = apricot (#E99560)opspal-core/templates/web-viz/themes/revpal-dashboard.css--brand-grape, --brand-apricot, --brand-indigo, --brand-sand, --brand-greendashboard-container → dashboard-header → dashboard-content → dashboard-grid.viz-kpi, .viz-chart, .viz-table, .viz-component