Brand Kit

Broadway Scorecard

Colors, type, and assets used across broadwayscorecard.com. Click any swatch to copy its hex. Import into Canva, Figma, Buffer, or any design tool.

Colors Score Tiers Typography Canva Setup Buffer Downloads Badge Builder Attribution Code

Surfaces

Dark theme background layers. Pages start at Surface and build up.

Brand

Muted gold is the signature. West End uses pink for differentiation.

Score Tiers

Every show is rated on this 5-tier scale. Must See is a gold gradient; others are solid fills.

Badge Preview

Text Colors

Four-step gray scale for text hierarchy on dark backgrounds.

Typography

Inter for everything. Extrabold for headlines, Regular for body.

Headline — Inter Extrabold

The 2025-26 Season

Title — Inter Bold

Critical Gold

Body — Inter Regular

Broadway Scorecard aggregates every critic review into a single 0-100 score per show, so you always know what's worth seeing.

Caption — Inter Medium Small

MUSICAL · PREVIEWS · $89

Canva Brand Kit Setup

Add BWSC colors to Canva once. Every design automatically uses the right hex.

1
Open Canva → Brand Hub
In Canva, click Brand in the left sidebar → Brand Kits → pick or create a kit. Requires Canva Pro or Teams. (Exact path may vary — search "Brand Kit" from the Canva homepage if you can't find it.)
2
Add the brand colors
Click + Add new under Brand Colors. Paste each hex below. Canva auto-fills the name.
3
Add the brand font
Under Brand Fonts → set Heading + Body to Inter. It's free in Canva.
4
Upload logo reference
Under Logos → upload the palette reference image (download below). Use it while designing to keep scores on-brand.

Buffer

Social post scheduling. Content Library doesn't support brand kits — use downloads below.

Buffer doesn't have a Brand Kit feature — its Content Library is for saving ready-to-schedule posts, not tokens.

Workflow: Design posts in Canva (with the Brand Kit above applied), export as PNG, upload to Buffer's Content Library as templates you can reuse across Twitter, Instagram, etc.

When drafting copy: Grab any hex from this page (click a swatch) and drop into Canva.

Downloads

Ready-made PNGs for social, press, partners. Click any tile to download, or grab the full kit as a zip.

Download Entire Brand Kit

52 PNGs · logos, score/grade badges, social templates · 8.2 MB zip

Get kit

Palette Reference (SVG)

One-page color reference. Upload to Canva's Brand Kit as a logo asset.

Brand Tokens (JSON)

Full palette in machine-readable form. Auto-updates with every deploy.

Badge Builder

Make a custom score badge for any show. Pick a score, pick a background, download the PNG.

Score

Tier: Critical Gold · Range 83–100

Background

Include tier label (Critical Gold, Recommended, …)

Rendered client-side at 2× pixel ratio. Matches the kit badges above but may differ very slightly in font anti-aliasing.

Critical Gold

Drop-everything great

83–100

CriticScore™ Lockup

How to display the score when embedding on another site. The score and its tier travel as a unit — never split them.

Required lockup

Proof

Critical Gold · 12 critics

CriticScore™ by Broadway Scorecard

The four required elements for any external display of a BWSC score:

Score number — rounded, as a whole integer (e.g. 88)
Tier color — the badge background must match the tier: gold (83+), green (75-82), teal (65-74), orange (55-64), red (<55)
Tier label — “Critical Gold,” “Recommended,” “Worth Seeing,” “Mixed,” or “Critical Miss”
Attribution — the text CriticScore™ by Broadway Scorecard in brand gold #d4a574, linking to broadwayscorecard.com

Not allowed: stripping the tier color, normalizing to a different scale (e.g. /5 stars), removing the attribution, or showing a stale cached score. Partners should use the live embed or SVG badge so scores update automatically.

Want to embed? Copy-paste snippets are at /partners. Both iframe and SVG options bake the attribution in automatically.

For Developers

Copy-paste snippets for code consumers.

Tailwind (this codebase)

// Use these Tailwind tokens instead of raw hex:
// Surfaces
className="bg-surface"          // Page
className="bg-surface-raised"   // Cards
className="bg-surface-overlay"  // Hover

// Brand
className="bg-brand hover:bg-brand-hover text-white"

// Scores (CSS badge classes, from globals.css)
className="score-badge score-must-see"   // 83-100
className="score-badge score-great"      // 75-82
className="score-badge score-good"       // 65-74
className="score-badge score-tepid"      // 55-64
className="score-badge score-skip"       // 0-54

CSS Variables

/* Paste into any non-Tailwind stylesheet */
:root {
  --bwsc-surface: #0f0f14;
  --bwsc-surface-raised: #1a1a24;
  --bwsc-surface-overlay: #2a2a38;
  --bwsc-brand-gold: #d4a574;
  --bwsc-brand-gold-hover: #c4956a;
  --bwsc-text-primary: #ffffff;
  --bwsc-text-muted: #9ca3af;
  --bwsc-score-must-see: #FFD700;
  --bwsc-score-great: #22c55e;
  --bwsc-score-good: #14b8a6;
  --bwsc-score-tepid: #d97706;
  --bwsc-score-skip: #ef4444;
  --bwsc-font: 'Inter', system-ui, sans-serif;
}

Fetch JSON

// Fetch the full token palette (auto-updated with every deploy):
fetch('https://broadwayscorecard.com/brand-tokens.json')
  .then(r => r.json())
  .then(tokens => {
    console.log(tokens.brand.gold);  // "#d4a574"
    console.log(tokens.scores);       // full score tier palette
  });

Canonical source: scripts/lib/brand-colors.js. When colors change, update that file AND tailwind.config.ts.