Design system
Neutral surfaces, grid page background, and an eight-color chart system. IBM Plex Mono for numbers, DM Sans for copy. Charts use Apache ECharts — click chart elements to open tooltips.
Primary text, muted meta, and borders stay neutral so charts carry color.
| Token | Role | Example |
|---|---|---|
| --chart-1 | Sky · coolest | Index 82 |
| --chart-2 | Teal · links & focus use this slot | Δ +4.1% |
| --chart-3 | Violet | Risk tier |
| --chart-4 | Plum | Highlight |
| --chart-5 | Sage | Bin peak |
| --chart-6 | Yellow | Stage C |
| --chart-7 | Amber | Organic mix |
| --chart-8 | Coral · warmest | Closed-won |
Soft fills use --chart-N-soft for tags and shaded regions. Multi-series charts cycle 1→8 in this cool-to-warm order.
DM Sans — headings, body, labels. Keep measure near 60 characters for dense paragraphs.
IBM Plex Mono · 0123456789 · 1,284,009 · +14.2%
The report column (.ds-page) is capped at --ds-content-max. Each .ds-showcase-section stacks children with a uniform vertical gap; section titles align to the same left edge as bordered surfaces. Single charts, tables, and tabs use width:100% so they fill that column.
| Token | Role |
|---|---|
| --ds-content-max | Max width of the main report column (matches .ds-page). |
| --ds-page-padding-x · --ds-page-padding-y | Horizontal and vertical padding for .ds-page (narrow viewports use smaller vertical padding via media rules). |
| --ds-space-section-gap | Space between sections (.ds-showcase-section margin-bottom). |
| --ds-space-component-gap | Space between block-level items inside a section (flex gap on .ds-showcase-section). |
| --ds-inset-surface-x · --ds-inset-surface-y · --ds-inset-surface-y-tight | Padding inside bordered surfaces (.ds-chart bottom uses the tight value). |
Use .ds-section-lead for a short line under a section title; stack dense rows with .ds-stack--dense. Centered pies in a split layout: add .ds-echarts--pie-contained.
Quarterly snapshot
April 1 – April 28, 2026 · excludes internal test accounts
Use .ds-prose inside a bordered surface for methodology, caveats, or definitions. One idea per paragraph; lead with the implication, then the method.
This component uses the same border and radius as figures so the page rhythm stays even.
Executive summary
Activation improved week-over-week
Same pattern as the paywall dashboard — label, headline, stats row, narrative body.
Top segment
Acquisition · branded & non-brand
Branded queries recovered after the homepage experiment shipped; non-brand still trails plan by ~8%.
Biggest gap
Remarketing · prospecting
CTR is down Creatives 2–4; test winner from week 3 has not been scaled to full budget yet.
Operational
Edge · origin
p95 improved sharply after cache warming; monitor origin during peak EU hours.
Wide tiles with neutral chrome; pair metrics to chart series via tags or legends — not left stripes.
| Region | Channel tag | Users | Conv. |
|---|---|---|---|
| North America | Sky | 52,390 | 5.02% |
| Europe | Teal | 38,120 | 4.41% |
| APAC | Violet | 29,004 | 3.95% |
| LATAM | Plum | 14,220 | 3.12% |
| UKI | Sage | 11,090 | 4.88% |
| MEA | Yellow | 8,440 | 2.67% |
| GC | Amber | 6,102 | 3.55% |
| Other | Coral | 3,881 | 1.98% |
Tracks map to chart colors 1–4; click underlined labels for targets.
Graphic ellipses use --chart-1 / --chart-2 strokes and soft fills.
Semantic tags mirror chart hues. Click underlined terms (click-dismiss).
Sky Teal Violet Plum Sage Yellow Amber Coral Positive Risk Filter Optional
Baseline cohortUsers who matched criteria on day zero of the window; excludes pilot accounts. vs LiftRelative change vs baseline cohort in the same geography bucket. — click each term to toggle.
Same slice as a grid — swap markup only.
West · Users 41.2K · Conv. 6.1%
Use DsCharts.chartPalette() so series colors track tokens.
Assumptions and caveats belong here so the executive summary stays tight.