Design System v1

Advertising Report Card

The visual foundation for every client-facing page and admin surface. Report-card grading motif, ARC blue as the anchor, coral for urgency, tan for earned credibility.

Learn more →

Color Tokens

Sourced from advertisingreportcard.com. Every component below maps to these.

Primary
#297498
Accent
#DB6176
Warm
#D9A46D
Sky
#8FB9CB
Brown
#523429
Success
#2EA66B
Background
#F7FAFC
Heading
#1C2A35

Typography

Inter everywhere, matching the live ARC site. Headlines lean heavier (700/800) with tightened tracking.

H1 · Inter 800 · 2.5rem

Your Ad Spend, Graded.

H2 · Inter 700 · 1.75rem

We found $12,400 in monthly waste.

H3 · Inter 700 · 1.25rem

Three quick wins for next quarter

Body · Inter 400 · 1rem / 17px

A report card is only as useful as the plan that follows. Each audit grades your performance across Strategy, Execution, and ROI — then hands you the next move.

Code

Your grade is stored in contacts.core_score and updates on every audit run.

Grade Badges

Brand motif. A letter grade anchored to each CORE pillar, audit, and monthly report.

A B C D F A- B+ C

Stat Cards

Top-level KPIs on dashboards and monthly reports.

Active Clients
48
↑ 6 vs last month
Monthly Ad Spend Audited
$1.24M
↑ 18%
Avg. Grade
B82
across 48 clients
Open Proposals
12
↓ 2 awaiting signature

Buttons

Tags & Status

Active Onboarding Prospect Lead At Risk Won
Campaign · Month 2 / 6
33%

CORE Scores

Ring gauges for the 4-pillar diagnosis (Credibility, Optimization, Reputation, Engagement).

82
65
91
48

Client Table

ClientStatusGradeProgressUpdated
CM
Chris Morin
chris@morinclinic.com
Active B+
68%
2h ago
FP
Fufan Pedel
fufan@pedelgroup.com
Onboarding C
22%
1d ago
AM
Amanda Moore
a@mooremarketing.co
Prospect D
audit
3d ago

Report Callout

Your April Report Card is ready.

Grade B+ · $14,200 in ad spend reviewed · 3 quick wins identified · 2 risks flagged.

Form Controls

Used to tier the audit depth.