← BBC Design System · Reference
06 · Data Display
DD-01 · STAT COUNTERS

Stat Counters

Big-number rows with eyebrow label and optional description. Use as proof bars in proposals, audits, and About sections.

DD-01-A · 4-stat row with descriptions
9
Years
Founded 2017 in Chennai.
100+
Brands
Across consumer, B2B, edu, real estate.
20+
Industries
From legacy enterprises to startups.
300%
Avg ROI
Across our Growth-tier engagements.
DD-02 · BEFORE / AFTER

Before / After Comparison

Two-panel split showing the transformation. Use for case studies, audit findings, and "current state vs. desired state" sections.

DD-02-A · Before/After with metrics
Before
₹2,400
Customer acquisition cost across paid channels at engagement start.
↘ High & rising
After (Q2)
₹1,488
Customer acquisition cost after channel discipline, attribution, and creative refresh.
38% reduction
DD-03 · COMPARISON TABLE

Tier / Plan Comparison

Side-by-side feature matrix. Use for pricing pages, "us vs them" comparisons, and tier-decision tables.

DD-03-A · 3-tier comparison · 6 features
Capability
Foundation
Growth
Scale
Brand Audit & Positioning
✓
✓
✓
Identity System & Guidelines
✓
✓
✓
Performance Marketing
✕
✓
✓
Content & Video Production
Limited
✓
✓
CRM Automation
✕
✓
✓
52-Wk GTM Roadmap
✕
✕
✓
Dedicated Team Pod
✕
✕
✓
DD-04 · PROGRESS BARS

Progress / Skill Bars

Horizontal bars for showing percentages, capability ratings, audit scores, or campaign progress.

DD-04-A · Progress bars · capability scores
Brand Strategy95%
Performance Marketing88%
Content Production82%
Web & Tech90%
CRM & Automation75%
DD-05 · KPI GRID

KPI / Target Grid

Four-column success-metric grid. Use in proposals (Section 20), audits, and quarterly reviews.

DD-05-A · 4-KPI grid with change indicators
CAC reduction
25–35%
↓ 38% achieved
By end of Q2 vs baseline.
Pipeline lift
2–3×
↑ 3× achieved
Qualified leads / month.
Sales cycle
-30%
↓ 30% achieved
Days to close.
Brand recall
+50%
↑ 62% achieved
Aided + unaided survey.
DD-06 · HERO STAT (single big number)

Hero Stat

One enormous number, one label, optional context. Use as a breakaway between dense sections — gives a single stat the weight it deserves.

DD-06-A · Single hero stat (warm-rev)

Across 100+ brands

300%

Average return on investment delivered across our Growth-tier engagements over the last 36 months.

DD-07 · SCORECARD TABLE

Audit Scorecard

Multi-row scorecard with current value, change delta, and status badge. Use for brand audits, channel audits, GTM scorecards.

DD-07-A · 6-row scorecard with status badges
Dimension
Current
Δ vs target
Status
Brand Voice Consistency
62 / 100
-18
Off
Visual System Coherence
71 / 100
-9
Watch
Channel Discipline
54 / 100
-26
Off
Pipeline Attribution
42 / 100
-38
Critical
Sales Enablement
68 / 100
-12
Watch
Content Cadence
82 / 100
+2
On
DD-08 · TIMELINE TRACK

Horizontal Timeline

Multi-stage timeline with dots, week labels, milestones. Used in `11-A-proposal-v2.html` Section 20. Best for engagement timelines, project plans, roadmaps.

DD-08-A · 5-stage timeline
Week 1–2
Discovery
Stakeholder interviews, audit, competitive scan.
Week 3–4
Strategy
Positioning workshop, audience, messaging.
Week 5–7
Identity
Logo, type, color, system, applications.
Week 8–10
Build
Website, content, campaigns, sales tools.
Week 11–14
Activate
Launch, measure, optimise, handover.
DD-09 · BAR CHART (CSS-only)

Simple Bar Chart

CSS-only bar chart. Use for monthly trend, channel comparison, or any 4–8 data point visualization without a charting library.

DD-09-A · 6-bar quarterly chart
42Jan
58Feb
66Mar
87Apr
106May
120Jun
DD-10 · DONUT CHART (CSS-only)

Donut Chart

CSS conic-gradient donut. Use for channel-mix breakdowns, budget allocation, market-share visualization.

DD-10-A · Donut with legend (channel mix)
100%
Channel mix
Performance · 35%
Content · 25%
Email · 20%
Social · 15%
Other · 5%