# Nashville PBS — Design System

A design system for **Nashville PBS (WNPT)**, the PBS member station serving Middle Tennessee. It packages the brand's visual foundations, reusable UI components, and a full website UI kit so designers and agents can produce on-brand interfaces and assets quickly.

> Nashville PBS enriches Middle Tennessee by connecting our community to the wider world through the power of public media. Supported by local donors, our nonprofit offers diverse programming on the free PBS app, PBS KIDS app, and four over-the-air channels — reaching nearly 2.4 million viewers with educational, news, environmental, emergency and cultural content.

Nashville PBS inherits the **national PBS brand system** (PBS Blue, the PBS Sans typeface, the "everyman" P-head logo, the primary/accent palette) and layers on its **local lockups** and **geometric brand patterns** (Community, Insight).

---

## Sources used to build this system

- **Uploaded assets** (`uploads/`, copied + repaired into `assets/`):
  - `NashvillePBS_Logo_{Horizontal,Vertical}_{Color,White}.svg` — the four official Nashville PBS lockups.
  - `Community_Pattern_RGB_1920x1920.png`, `Insight_Pattern_RGB_1920x1920.png` — brand geometric patterns.
- **PBS Brand Document Style Guide v3.0** (`uploads/PBS_Brand_Document_Style_Guide_v3_part_*.pdf`) — the governing 119-page national spec, fully folded in: color (Secondary Blues, Accent Alts, Neutrals), Gradients, typography, imagery, illustration, Graphic Elements, Patterns.
- **PBS Sans** — full licensed family (`uploads/PBS Brand_Font_PBS Sans/`), self-hosted as `.woff2` in `/fonts`.
- **Symbol Crop templates** (`uploads/Brand_Graphic_Template_Symbol Crop_*.svg`) — repaired into `assets/brand/`.
- **PBS national brand references** (public): PBS Color Use Guidelines (Aug 2025); pbs.org/brand.
- **PBS On-Air Toolkit Guide v3.1** (`uploads/PBS_On-Air_Toolkit_Guide_v3.1_part_*.pdf`) — the national broadcast-graphics spec (After Effects Toolkits 1.0 + 3.1), folded into the **Broadcast Graphics** guideline cards and the `templates/on-air/` generator. Live station examples in `uploads/` (`JIPNPBS24.png`, `SSNPBS24_*.png`, `support.png`).

### ⚠️ Repairs & substitutions (please review)
1. **Logo fills restored.** The uploaded color/white SVGs shipped with an empty `<defs>`, so every path rendered **solid black**. Fills were restored to the official spec using explicit `fill` attributes: color logo = PBS Blue shield + wordmark with white profiles; white logo = white shield + wordmark with PBS Blue profiles. Originals are untouched in `uploads/`. **Please confirm these match your master files.**
2. **Font.** The brand face **PBS Sans** is self-hosted from the licensed `.woff2` files in `/fonts` (upright + italic, Light→Black, plus the condensed cut via `--font-cond`). Arial (Regular/Bold + italics) is the sanctioned fallback only where custom fonts are unavailable.
3. **UI-kit imagery** uses generic placeholder photos (picsum.photos) to stand in for program artwork. Swap for real show images in production.
4. **Symbol Crop SVGs** also shipped with an empty `<defs>` (rendered all black). Fills restored per the mark: PBS Blue field, white shield circle, PBS Blue profiles, white eye. **Please confirm against your masters.**

---

## CONTENT FUNDAMENTALS — how Nashville PBS writes

- **Voice:** warm, welcoming, trustworthy, plainspoken. Public-service, not sales. PBS describes its tone as "warm and engaging."
- **Point of view:** speaks as **"we"/"our"** about the organization ("our nonprofit," "we provide") and **"you"/"your"** to the viewer/donor ("your membership," "your favorite shows"). Community-first — "our community," "Middle Tennessee," "those we serve."
- **PBS voice principles (Style Guide v3):** *impactful* (present/future perspective, spark curiosity, benefit framing), *celebratory* (viewers like you, positive connections, emotional links), *illuminating* (more to the story, shine a light, facts for perspective).
- **Casing (v3):** **Title Case** for headers, titles and labels; **sentence case** for subheaders and all body copy (left-aligned, never justified); **ALL CAPS** only for brief secondary messages (TONIGHT, ALL NEW, TUNE IN) and badges (LIVE).
- **Mission language:** leans on concrete public-service value — "free access," "educational," "trusted," "for all of Middle Tennessee," "reflects the diversity of our region."
- **CTAs** are short, active verbs: *Start Watching · My List · Donate · Become a Member · Learn more.*
- **Emoji:** not used. **Exclamation points:** rare. Numbers are used sparingly and factually ("nearly 2.4 million viewers," "four channels").
- **Vibe:** civic, inclusive, curious, calm. Never hype-y or urgent except genuine live/premiere moments.

Example copy: *"Bring the world a little closer."* · *"Free, trusted programming across the PBS app, PBS KIDS, and four broadcast channels."*

---

## VISUAL FOUNDATIONS

- **Color (v3 taxonomy):** overwhelmingly **blue**. *Primary:* PBS Blue `#2638C4` (signature — CTAs, links, prominent placement) and White. *Secondary Blues:* Navy `#0A145A`, Medium `#0F1E8C`, **Light Blue `#486CD8` (reclassified in v3 — no longer an accent)** — depth, serious tones, dark surfaces. *Primary accents* Teal `#48D3CD`, Yellow `#FFCF00`, Coral `#FE704E`: interchangeable, used minimally, one at a time (more only when each has a distinct purpose). *Primary Accent Alts (new in v3)* Sky `#8DDFFF`, Honey `#FFBD00`, Peach `#FFB699`: infrequent — when accents fail contrast or less vibrancy is needed; text over solid blues, subtle backgrounds, alt text over footage; never paired with secondary accents. *Secondary accents* Purple `#4E05AC` (v3-updated hex), Red `#D6383A`, Green `#087B45`: infographics/illustration only — never On-Air, never replacing primary accents. *Recommended Neutrals (official in v3)* Cloud `#F6F8FA`, Fog `#EEF0F5`, Slate `#5C6E85`, Deep Sea `#040C41`, Midnight `#000525`: cool only, non-primary elements, never On-Air. The `--neutral-*` ramp remains a UI extension. All text/background pairings must pass WCAG AA (pass/fail matrices: guide pp. 29–34).
- **Type:** a **single family** (PBS Sans, self-hosted) across the whole system; PBS Sans for everything ≥14pt. Display and headings run **bold to black (700–800) with tight, slightly negative tracking**; body is regular weight with airy 1.55 line-height. **Italic** only for captions, quotes and AP-style needs; **Condensed** only for credits and fine print — neither for primary messages. No gradient/emboss/shadow text effects.
- **Backgrounds:** three registers — (1) clean **white** content pages; (2) **navy** surfaces for headers/footers/dark UI; (3) **full-bleed imagery** with a blue gradient/scrim overlay for legibility. The **geometric brand patterns** (Community, Insight) appear on section headers, membership bands and cover cards, usually under a blue overlay.
- **Imagery:** natural, luminous, warm — "beauty in the details" and wide establishing context; immersive, unexpected, simple. Real photography, never heavily filtered or duotoned (the blue lives in overlays, not the photo itself). Keep imagery full-frame and full color even under overlays; never rotate, flip, desaturate, or use posed/staged shots. Overlays: White over lighter imagery; PBS/Navy/Medium Blue or the Primary Gradient (at 80%) over darker imagery.
- **Gradients (v3):** *Primary* = Light Blue → PBS Blue → Medium Blue (`--gradient-primary`) — backgrounds, graphic-element fills, and imagery overlays (overlays always 80%: `--gradient-primary-overlay`). *Secondary* adds Sky (`--gradient-secondary`) — full-bleed backgrounds ONLY, never with imagery/footage or competing elements. Always diagonal with the light source in a TOP corner — opposite the subject when over imagery, never at the bottom. Never build gradients from other palette colors. Curved elements on gradient backgrounds may take a hard Medium-Blue shadow (Multiply; Normal on Navy) — never with imagery, never with Patterns.
- **Graphic elements (v3, `components/graphic/`):** **Circle Crop** — perfect circle bleeding off exactly 3 sides, holds text or imagery; **Curve** — bottom-left only, derived from the back of the Profiles, never flipped/rotated/stretched; **Circle Highlight** — key text only (≤8 chars/line, ≤3 lines), one per layout, never combined with other elements, never gradient-filled; **Large Circle Highlight** — centered, Primary Gradient at exactly 80%, cropped top+bottom, over wide imagery only; **Symbol Crop** — official artwork on PBS Blue (`assets/brand/`), layout ≥1.5:1, bleeds top/left/bottom, never recolored or paired with imagery/gradients; **Line & Highlight** — DIGITAL ONLY (never print), white line at 20–30% opacity, 8–20px thick, spanning the layout, ONE Teal/Yellow/Coral/White highlight, on blue backgrounds only.
- **Patterns (v3):** blue colorway only (PBS Blue / Medium / Navy; print uses shifted CMYK values per guide p.98). Fill areas with whole rows/columns — 3–6 rows in a given area, no thin slivers, one Pattern per layout/project; never rotated, mirrored, stretched, recolored, or combined with imagery/illustration. Text over Pattern: PBS Sans Medium/Bold/Black, a few words max, Navy overlay at ≥50% opacity for legibility, white logo for contrast.
- **Corner radii:** buttons are **fully pill-shaped**; cards and media use a **quiet 8–12px** radius. Nothing is sharp-cornered except full-bleed bands.
- **Cards:** white surface, 1px cool border, **restrained** cool-tinted shadow (flat by default). Interactive cards lift 2px and deepen the shadow on hover.
- **Elevation:** minimal, navy-tinted shadow scale (`xs`→`xl`). The brand reads mostly flat.
- **Borders:** 1px `--border` on surfaces; 1.5px on interactive controls (inputs, tags, secondary buttons).
- **Motion:** quick and subtle — 0.15–0.18s ease transitions on hover/focus (background, shadow, 2px lift, image scale 1.04 on media hover). No bounces or long animations.
- **Hover states:** primary button → Medium Blue; secondary/ghost → faint blue tint; media → play overlay + slight zoom. **Press:** deepens to Navy Blue.
- **Focus:** 3px light-blue (`#486CD8`) ring for accessibility.
- **Transparency & blur:** white/blue translucent chips on imagery (search field, back button, "on dark" controls). No heavy glassmorphism.
- **Layout:** 1240px max content width, 24px gutters, sticky navy header. 4px-based spacing scale.

**Broadcast / On-Air (Toolkit Guide v3.1)** — the register for anything airing on the channel, all 1920×1080:
- **Deliverable classes:** Endpages, Lower Thirds, Logo animations, Menus (Feature/Lineup), Promo Open, Series ID, Station ID, Station Messaging, Title Cards, Transitions. National masters are After Effects toolkits (1.0 flat + 3.1 dimensional) with the Essential Graphics panel driving text/color controls.
- **Approved use:** PBS Sans only with preset type accent colors; approved on-air palette only (blues + one primary accent at a time — never secondary accents or neutrals on-air); equal-scale PBS/Station co-brand lockup inside the no-fly zone, never distorted; never adjust gradients or pattern shapes.
- **Tune-in copy:** ALL CAPS, accent-colored; when using "TONIGHT," never include "pm."
- **Backgrounds:** footage/stills take a Navy overlay; without footage use full-screen PBS Blue / Medium Blue, the Primary Gradient (3.1 adds the Curve + hard Medium-Blue shadow), or a brand Pattern (Nashville PBS slates use the Community pattern as a full field or a left rail on Navy).
- **Title Cards (3.1):** the accent color highlights a run of words within the title (Highlight Start Index + Length in the toolkit; `titleHighlight` in our template).
- **Nashville PBS practice:** station slates ("We now join…", technical/network difficulties) and donation **End Cards** (white circle-crop field over pattern, VISIT url + CALL OR TEXT number + QR) are the most-produced pieces — see `templates/on-air/`.

**Print motion** (from the FY24–26 Strategic Plan, see `uploads/NPT-Strategic-Plan-2024-page-*.png`) — a distinct, bolder register used for printed reports, not the flatter digital UI:
- **Curved photo mask:** the signature device — photos cropped by one large organic circular arc from a page corner, with a thin accent-color rim (see `CurvedPhotoMask`). Used on covers and every section divider.
- **Roman-numeral pillars:** teal filled-circle badges (I–VI) mark report sections; a gold vertical line connects them into a timeline on overview pages (`NumberBadge`, `PillarTimeline`).
- **Highlighter labels:** bold text on a solid-color "marker swipe" background, used for sub-numbered strategies ("1.1 STAFFING") and fiscal-year callouts (`HighlightLabel`).
- **Full-bleed color bars:** solid yellow/blue bars carry section headings ("Table of Contents", "Key Pillars") edge-to-edge (`SectionBar`).
- **Pull quotes:** solid-color banner, italic quote, small square headshot, coral name tag (`PullQuote`).
- **Ringed headshots:** circular photos with a coral border for board/leadership bylines (`RingAvatar`).
- **Rotated sidebar labels:** a large vertical rotated word (e.g. "KEY POINTS") beside a bullet list on a full-bleed color panel (`KeySidebar`).
- Section-divider pages are solid PBS Blue; body pages stay white with the same yellow/teal/coral accents as call-outs.

---

## ICONOGRAPHY

- PBS/Nashville PBS use **simple, single-weight line icons** (~2px stroke, rounded joins) plus a few solid glyphs (play triangle). There is **no bespoke icon font** in the provided assets.
- **Substitution:** this system uses **inline line SVGs in the Lucide style** (search, play, plus, chevrons, user, arrows) inside the UI kit and component cards — a clean CDN-available match for the brand's stroke weight and rounded style. If Nashville PBS has a defined icon set, drop the SVGs into `assets/icons/` and reference them.
- The **P-head "everyman" mark** is the one true brand icon — it lives only inside the official logo lockups and must **never** be redrawn, recolored, rotated, or separated from the wordmark.
- **Emoji / unicode** are **not** used as UI icons.

---

## Index / manifest

**Root**
- `styles.css` — the single entry point consumers link (import list only).
- `tokens/` — `fonts.css`, `colors.css`, `typography.css`, `spacing.css`, `radius.css`, `shadows.css`.
- `assets/logos/` — four repaired Nashville PBS SVG lockups.
- `assets/brand/` — repaired Symbol Crop artwork (digital RGB + print CMYK).
- `assets/patterns/` — Community + Insight brand patterns.
- `guidelines/` — foundation specimen cards (Colors, Type, Spacing, Brand).
- `thumbnail.html` — homepage tile. `SKILL.md` — Agent-Skills entry point.

**Components** (`window.NashvillePBSDesignSystem_8fe663`)
- `components/core/` — **Button**, **IconButton**, **Badge**, **Tag**, **Card**
- `components/forms/` — **Input**, **Select**, **Checkbox**, **Radio**, **Switch**
- `components/brand/` — **Logo**, **PatternPanel**
- `components/graphic/` — **CircleCrop**, **Curve**, **CircleHighlight**, **LargeCircleHighlight**, **SymbolCrop**, **LineHighlight** — the official v3 Graphic Elements (rules in each `.prompt.md`)
- `components/media/` — **ShowCard**
- `components/editorial/` — **CurvedPhotoMask**, **NumberBadge**, **PillarTimeline**, **PillarDivider**, **PullQuote**, **HighlightLabel**, **SectionBar**, **RingAvatar**, **KeySidebar** — print-motion primitives lifted from the FY24–26 Strategic Plan (see VISUAL FOUNDATIONS → Print motion)

**Templates**
- `templates/on-air/` — **On-Air Graphic** (1920×1080 broadcast frame): one template, six styles via the `style` tweak — station message slate, technical-difficulties slate, support/donation end card (QR drop slot), centered endpage, title card with type highlight, lower third (footage drop slot). Accent + pattern tweaks per Toolkit rules.
- `templates/strategic-report/` — reusable cover/TOC/pillar/strategy pages for the next strategic plan (FY26–29) — duplicate and re-fill content

**UI kits**
- `ui_kits/website/` — interactive Nashville PBS streaming site: home (hero, content rows, membership band), browse + search with category filters, and show-detail with episodes. Composed entirely from the components above.

### Intentional additions (not in the PBS brand book)
- A cool **neutral ramp** (`--neutral-*`) for UI surfaces, borders and body text — the brand book defines only blues/accents.
- Standard **form controls** (Input, Select, Checkbox, Radio, Switch) and **Card / Badge / Tag** primitives — needed for real interfaces; styled strictly from brand tokens.
- **ShowCard** and the **Logo/PatternPanel** wrappers — brand-specific conveniences for building media UIs.
- The **Editorial** group (`CurvedPhotoMask`, `NumberBadge`, `PillarTimeline`, `PillarDivider`, `PullQuote`, `HighlightLabel`, `SectionBar`, `RingAvatar`, `KeySidebar`) — not in the digital brand book; lifted directly from the printed FY24–26 Strategic Plan (see `uploads/NPT-Strategic-Plan-2024-page-*.png`) to capture that document's distinct "brand in motion" print language (curved photo masks, roman-numeral pillars, highlighter labels).


## Starters

In the standalone version, this design system came with 4 starter template(s). Each is a small project of its own, not a part of the design system the page shows; its files are kept in this artifact as they were, under its folder, for a later migration of its own.

- **Brand Cover** — Full-bleed Nashville PBS cover — pattern hero, logo, display headline + CTAs (3 files, entry `templates/brand-cover/BrandCover.dc.html`)
- **Media Manager** — Reference spec sheet for the show-level image assets Media Manager (the PBS app CMS) needs — logo, poster, background, mezzanine. Duplicate and swap in real art per show. (3 files, entry `templates/media-manager/MediaManager.dc.html`)
- **On-Air Graphic** — 1920×1080 broadcast graphic — station slates, support end card, endpage, title card, lower third. SMPTE title-safe text, switchable gradient/pattern/navy background (PBS On-Air Toolkit v3.1) (4 files, entry `templates/on-air/OnAir.dc.html`)
- **Strategic Report** — Cover, TOC, mission/values, pillar divider &amp; strategy pages for the Nashville PBS strategic plan — duplicate this folder and re-fill for the next plan (e.g. FY26-29). (4 files, entry `templates/strategic-report/StrategicReport.dc.html`)

## Migrated from a legacy design system

This system was carried over from the standalone version on 2026-09-16. The part of this README the author wrote predates the move, so any file names in it are the old ones. Where things are now:

- `styles.css`, `tokens/fonts.css`, `tokens/colors.css`, `tokens/typography.css`, `tokens/spacing.css`, `tokens/radius.css`, `tokens/shadows.css` (the global stylesheets) → `project/components/bundle.css`, with the token declarations moved to `project/tokens.json` (`project/tokens.css` is generated from them)
- `_ds_bundle.js` → `project/components/bundle.js`
- showcase pages, each kept whole as one component's preview (a page of examples, not an export of the bundle): `guidelines/broadcast-endpage.card.html` → `project/components/BroadcastEndpage/preview.html`; `guidelines/broadcast-lower-third.card.html` → `project/components/BroadcastLowerThird/preview.html`; `guidelines/broadcast-overview.card.html` → `project/components/BroadcastOverview/preview.html`; `guidelines/broadcast-safe-areas.card.html` → `project/components/BroadcastSafeAreas/preview.html`; `guidelines/broadcast-slates.card.html` → `project/components/BroadcastSlates/preview.html`; `guidelines/broadcast-title-card.card.html` → `project/components/BroadcastTitleCard/preview.html`; `components/brand/brand.card.html` → `project/components/Brand/preview.html`; `components/core/badges.card.html` → `project/components/Badges/preview.html`; … and 7 more
- the migration report, which lists what did not come across: `project/assets/notes/MIGRATION-REPORT.md`