9 industry dashboards,
one Snowflake-themed design system.
Every chart starts with a business question. Brand colour stays out of the data palette. Bars start at zero, sorted descending. Red means alert, never a category. Below: five industry demos applying the rules end-to-end.
tokens.css
components.css
echarts-theme.js
Apache ECharts 5.5
Inter
· No build, just open in a browser.
Industry examples
Each card maps a real-world use case to one of four dashboard archetypes (Executive · Operational · Analytical · Report). Dashboard #09 demonstrates multi-tab navigation.
Quarterly board view: ARR, NRR, churn, CAC payback. Revenue-vs-plan trend with anomaly markers. Top customers ranking. Revenue mix stacked by product line.
Live storefront: status pills per service, real-time order/conversion KPIs. Latency p50/p95/p99 last 60 minutes with SLA threshold. Active alerts table sorted by severity.
Care quality explorer: cohort retention heatmap of readmission rates, patient-flow funnel, LOS-vs-age scatter, DRG ranking, drill-down department table with sparklines.
Q1 2026 board pack: cover, executive summary, P&L bridge waterfall with side commentary, AUM by segment, NPL ratio with threshold, appendix table with sparkline trend column.
Territory performance: choropleth (revenue per capita), store bubbles, DC→store flows, customer foot-traffic heatmap. Multi-layer toggle, MapLibre GL JS, dark mode.
Production floor: status per line + first-pass yield + cycle-time + downtime KPIs. OEE heatmap (line × day) with red cells below 60%. Defect Pareto. Downtime-per-shift trend with target. Same archetype as #2 — different operational pattern (matrix-state heatmap vs SRE-style time-series).
Acquisition analytics: 6-stage conversion funnel, MQL→SQL trend vs 30% target, ROAS by channel (horizontal ranking), spend mix stacked bar, cohort retention heatmap, campaign table.
Live platform health: service status row with 5 health cards, alert banner, p50/p95/p99 latency with red SLA markLine at 200ms, error rate, throughput, active incidents table.
Four-tab dashboard: Overview (WAU trend + feature ranking), Acquisition funnel (lifecycle stages + segment table), Retention (cohort heatmap + D1/D7/D30/D90 summary), Experiments (A/B results table + uplift charts).
10 rules every dashboard above respects
Bar from zero, line may be truncated
Bar charts always start at zero. Line charts may use a scaled axis when small differences matter — but axis is shown.
Sort bars descending
Never alphabetical (unless natural order exists). Top-of-list is the answer; the rest is context.
Direct labels over legends
endLabel on lines, label.show on bars. Saves an eye-trip to the legend.
Brand vs data, separated
Snowflake Blue is a UI accent (CTA, focus, sparkline). Data uses an 8-hue palette without red and without the brand colour.
Delta = direction × sentiment
Arrow shows which way the value moved (▲/▼). Color shows whether that's good or bad. A churn drop renders as good — value went down, and that's good. Red still means alert; never a category colour.
Cross-chart consistency
Same metric, same colour across panels of one dashboard. ARR is always indigo; cost is always slate.
5–7 KPIs per primary view
More than that and decision paralysis kicks in. Push deeper metrics into drill-downs.
Tabular numerals everywhere
font-feature-settings: "tnum" on numbers in cells, KPIs, axis labels. Digits align in columns.
Title = business question
"How is monthly revenue tracking against plan?" beats "Revenue". The title commits to what the chart answers.
Every chart has 4 states
Empty / loading / error / partial. The components include skeleton loading and per-card error states for all four.
Built with the dashboard-design-system Claude skill.
Foundation: Tufte data-ink ratio, Few signal-over-noise, Cleveland-McGill encoding hierarchy.
Branding: Snowflake (Blue #29B5E8 · Midnight #1B2A47 · Navy #000A20).
Stack: vanilla HTML + CSS variables + Apache ECharts 5.5 via CDN — no bundler.
Numbers and incidents are synthetic for illustration only.