← BBC Design System · Reference
05 · Cards
C-01 · GLASS DARK

Glass Cards (dark)

Translucent, backdrop-blurred cards. Use over warm gradients, photographic backgrounds, or any rich background where solid cards would feel heavy.

C-01-A · Glass dark · 3-card row
Real Estate · 90 days

EEPL Realty

3× qualified pipeline. Full GTM rebuild from positioning to attributed channels.

Education · 1 cycle

MGIS School

40% lower CAC. Brand modernisation + admissions funnel rebuild.

EdTech · 6 months

Vruksha

Zero to 20 demos/month. Foundation + lead gen + sales enablement.

C-02 · SOLID DARK + GOLD BORDER

Solid Dark + Gold Border

Crisp solid cards with thin gold outline. Best for capability decks and proposal pages where you want hard edges, not blur.

C-02-A · Solid + gold border · 3-card row
01

Build

Brand discovery, positioning, identity, guidelines. The foundation everything depends on.

02

Market

Website, performance, content, social. Channel discipline that compounds.

03

Scale

Sales enablement, CRM, automation. Infrastructure for inevitable growth.

C-03 · WARM GRADIENT (featured)

Warm Gradient — Featured

The "hero" card in any 3-up grid. Gradient fill, lifted shadow, optional badge. Use for "recommended" tiers, featured services, primary case studies.

C-03-A · Warm featured · in a row of 3
01

Foundation

Brand spine for early-stage teams.

Recommended
Growth

₹6L / qtr

Full-funnel system for brands ready to compound.

03

Scale

For brands with revenue and speed.

C-04 · CREAM BORDERED

Cream Bordered Cards

Standard light-mode card. White background, gradient top-border, cream container. Use on cream pages, proposals, audits, content pages.

C-04-A · Cream + gradient border · 3-card row
Discovery

Stakeholder interviews

15-22 questions per stakeholder. Surfaces the brand truth, not founder bias.

Strategy

Positioning workshop

Half-day session. Locks audience, message, narrative architecture.

Build

Identity system

Logo, type, color, applications. Guidelines that scale across every surface.

C-05 · IMAGE CARD

Image-Top Cards

Image at top, meta + title + description below. The classic case-study or article preview card.

C-05-A · Image card · 3-card grid
Case Study · Real Estate

EEPL Realty

3× pipeline. 38% CAC reduction. Full GTM rebuild in 90 days.

Read
Case Study · Education

MGIS School

40% lower CAC. Brand + admissions funnel rebuild.

Read
Case Study · EdTech

Vruksha

Zero to 20 demos/month. Foundation + lead gen.

Read
C-06 · PROFILE CARD

Profile Cards (team)

Team grid item. Avatar circle, name, role, optional bio. Compact for team grids of 8+, expanded for founder cards.

C-06-A · Profile cards · 4 in a row

Sastharam

Co-Founder · Strategy

15 years across consumer, B2B, and category-defining startups.

Achinthya

Co-Founder · Growth

Treats marketing as engineering. Builds channel discipline.

Mrinal

Brand Strategy Lead

The account lead. Translates strategy into execution.

Sriram

Tech Lead

Builds web, CRM, and the systems that hold everything together.

C-07 · METRIC CARD

Metric / KPI Cards

Big-number cards with optional change indicator. Use in dashboards, audit findings, before/after sections, KPI grids.

C-07-A · Metric cards with up/down indicators
Pipeline
↑ 200%
Qualified leads per month vs. previous period.
CAC
-38%
↓ 38%
Customer acquisition cost across paid channels.
Sales Cycle
-30%
↓ 30%
Days from first touch to close.
Brand Recall
+50%
↑ 50%
Aided + unaided survey result.
C-08 · PRICING TIER

Pricing Tier Cards

Three-tier pricing layout. Middle card scaled and gradient-filled as featured. Used in proposals (`11-A-proposal-v2.html`) and pricing pages.

C-08-A · 3-tier pricing with featured middle
Foundation
₹2.5L / qtr

For early-stage teams that need a brand spine before scaling spend.

  • Brand audit & positioning
  • Identity & guidelines
  • 1 channel
  • Monthly reporting
Scale
Custom

For brands with revenue, infrastructure, and speed to compound.

  • Everything in Growth
  • Sales enablement
  • 52-wk GTM roadmap
  • Dedicated team pod
C-09 · HOVER LIFT

Hover-Lift Link Cards

Link cards that rise and gold-border on hover. The standard interaction pattern for clickable cards across the system.

C-09-A · Hover-lift cards (try hovering)
Resource · Free

14-Week Growth Playbook

The exact framework we use across every Growth-tier engagement. 32 pages. No email gate.

Download
Resource · Free

Channel Discipline Matrix

Decision framework for choosing 2 channels to dominate vs 5 to spread thin.

Download
Resource · Free

Brand Audit Template

22-question discovery protocol to surface brand truth and gaps.

Download
C-10 · STAT TILE (compact)

Compact Stat Tiles

Small stat tiles for dense dashboards or 4+ wide stat strips. Smaller than C-07 metric cards.

C-10-A · 6 stat tiles in a row
9
Years
100+
Brands
20+
Industries
300%
Avg ROI
200%
YoY Growth
14
Weeks Avg