# 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 inherits the **national PBS brand system** (PBS Blue, PBS Sans, the "everyman" P-head logo, the primary/accent palette) and layers on its own local lockups and geometric brand patterns.

> **Mission.** *Nashville PBS tells honest stories that bring Tennessee together.* Nashville PBS tells honest stories of Tennessee's past, present, and future, using media for good to educate, inspire, and strengthen our community. (FY27-29 Strategic Plan, Final Draft)

---

## Voice and Messaging

The station's own Messaging Guide (v2, `assets/guides/Messaging-Guide-v2.pdf`) governs written and spoken communication; the national PBS voice principles sit underneath it. Its mission, vision and values page predates the FY27-29 strategic plan; the statements below are the current ones.

**Mission, vision and values (FY27-29 Strategic Plan, Final Draft).** Vision: "At Nashville PBS, we believe the right story, told honestly, can change everything." Mission: "Nashville PBS tells honest stories that bring Tennessee together." Values, the CIRCLE: Community, Integrity, Respect, Creativity, Leadership, Education. Quote these exactly; the earlier versions in the Messaging Guide (mission "NPT connects Nashville and beyond...", vision "NPT cultivates meaningful connections...", CIRCLE with Learning and Equity) are retired. The full plan is the board workbook linked from the FY27-29 plan page.

**Positioning.** Nashville PBS is an essential community institution that supports community members with non-commercial, trusted, educational programming and services.

**Tagline.** The former tagline, "For the love of our community.", is retired (Shane Burkeen, 2026-09-18) and is not used in new work. Where a piece wants a single closing line, use the vision statement: "At Nashville PBS, we believe the right story, told honestly, can change everything." The Messaging Guide still prints the old line; read past it.

**Key messages.** *Old and New Nashville*: we address lifelong Nashvillians, new residents and visitors as we help the community bridge old and new Nashville. *Content*: non-commercial, objective, trusted broadcast programs, plus content made for the interests, formats and viewing styles of digital audiences. *Partnerships*: we work with community partners and independent producers on programming that reflects and celebrates our community. *Trust*: we are the local PBS station, and PBS has long ranked as the nation's most trusted media brand in the Roper poll. *Lifelong learning*: educational services and lifelong learning are the DNA of public broadcasting.

**Tone: we're moving, welcoming, bright and local.** *Moving*: spark curiosity with open-ended questions ("Have humans broken the climate clock?"); make it personal by bringing individual narratives forward; use our long legacy for perspective on today. *Welcoming*: recommend shows with confidence ("Did you enjoy She Loves Me? You'll love Holiday Inn."); find common ground through universal truths ("There's an adventurer in all of us."); give viewers a voice with quotes and first-person stories. *Bright*: find the light, positive and action-oriented even on heavy topics; measure the impact with real numbers ("Nearly 75% of our budget comes from support in our region"); frame new programs from a fresh angle. *Local*: create nostalgia around our collective past, knowing not everyone remembers it the same way; focus on what makes the region unique; ask community members to share their own stories ("Did you visit the Opry as a kid? If so, tell us about it.").

**Headline starters and vocabulary.** The guide's sample headlines ("Celebrating all things Nashville", "Bring the world home", "Curiosity welcomed", "Feed your curiosity", "Spread wonder", "Power in people", "The world is waiting", "See yourself there") are starting points, not copy to reuse verbatim. Favor its verbs (guide, shine, explore, immerse, share, learn, discover, empower, nurture, engage) and phrases ("Shine a light", "Go behind the scenes", "Get an inside look", "Your voice matters", "You make it possible", "Won't you join us?").

**Point of view and register.** "We" and "our" for the organization; "you" and "your" to the viewer, member or donor; community first ("our community", "Middle Tennessee"). Plainspoken, warm, nonpartisan and inclusive; active voice, concise sentences, descriptive headings. No jargon, no hype, no unsupported claims. Numbers are used sparingly and must be factual and sourced. Emoji are not used; exclamation points are rare.

**Casing and text rules.** Title Case for headers, titles and labels; sentence case for subheads and body copy; text always left-aligned, never justified. ALL CAPS only for brief secondary labels (TONIGHT, ALL NEW, LIVE). Italic only for captions and quotes. PBS and PBS KIDS are always all caps in copy. "Nashville PBS" in public copy; "WNPT" only for broadcast, technical or historical clarity.

**Fundraising and underwriting copy** stays truthful, mission-centered and noncommercial: no guarantees, exaggerated claims, pressure tactics or ad-like sponsor language. Underwriting acknowledgments identify supporters rather than promote them. Every external draft gets a fact check, rights review and approval before release.

**CTAs.** Short, active verbs: Start Watching, My List, Donate, Become a Member, Learn More.

---

## Logo

The Nashville PBS logo is a station co-brand in the national PBS system: the wordmark "Nashville" in PBS Sans alongside the PBS logo (shield, P-head profiles and the custom PBS logotype). It is fixed artwork. The four official files are in `assets/logos/`: **Horizontal** (primary, `NashvillePBS_Logo_Horizontal_*.svg`) and **Vertical** (for narrow or square spaces, `NashvillePBS_Logo_Vertical_*.svg`), each in **Color** and **White**. The `Logo` component renders them (`orientation`, `tone`, `height`).

**Colorways.** Color: PBS Blue wordmark and shield with white profiles, for white and light surfaces. White: white wordmark and shield with PBS Blue profiles, for Navy, Medium Blue, PBS Blue, the gradients, the Patterns and photography under the Navy overlay. The two are interchangeable by background; nothing else is a colorway. Black and white versions exist only for one-color print (positive: white profiles; reverse: black profiles) and for translucent watermarks and on-air bugs (positive black and white at 25% opacity, profiles never transparent). Never grayscale.

**Clear space and size.** Keep clear space of at least 25% of the logo's height on every side. In print the PBS logo never runs smaller than 0.5 in wide by 0.2 in tall. On screen this system's convention (not a PBS rule) is a shield of 24 px or more, which keeps the profiles legible.

**Do not** separate the profiles, shield or logotype; rearrange, rescale, flip or rotate elements; stretch or distort; recolor; knock out the profiles; add shadows, embossing or other effects; place the logo or shield inside a box or carrier shape; use the logo inside running text; or typeset "PBS" in PBS Sans to imitate the logotype. In copy, PBS is always all caps.

**On air and in national toolkits**, the "PBS/Station co-branded logo" is this lockup itself, at equal scale with PBS and with every other affiliation removed (On-Air Toolkit 3.1). There is no separate PBS plus Nashville PBS lockup, and no station use where the PBS logo stands alone.

**Legal line** for printed goods and web pages: "PBS and the PBS Logo are trademarks owned by Public Broadcasting Service. Used with permission." Small type at the foot of the piece.

**Files.** Vector only, exported with fills as presentation attributes (the rule and the reason are in `assets/logos/README.md`). The 2026-09-17 exports replaced the repaired copies from the migration.

**Event lockup.** For station events the logo carries a slash and EVENT (`NashvillePBS_Event_*.svg`, four files in `assets/logos/`). It is a station composition, not PBS artwork; its rules are under Intentional Additions.

---

## Sub-brands and Channels

Nashville PBS carries three sub-channels and the PBS KIDS service. The files are in `assets/channels/`; the `Channels` preview in the Brand group shows every treatment side by side.

**WORLD, All Arts and Create: proximate endorsement with a pipe.** PBS Brand Guidelines (Aug 2022, Sub-Channel Branding) ask that third-party sub-channels never be integrated into the PBS logo; they sit proximate to it, separated by a pipe, stacked, or clearly apart, with the 25% clear space. Nashville PBS standardizes on the **pipe lockup**: the station logo, a thin vertical rule the height of the shield, then the channel mark, all sharing one baseline geometry. WORLD (`NashvillePBSWORLD_FullColor_Horizontal.svg`, `_Inverse_` for dark surfaces, plus the stacked `WRLD_NashvillePBS_Vertical*.svg`) and All Arts (`PBSNashville_AllArts_RGB-HEX.svg`, `_WHITE_`, `_BLACK_`) were supplied by the channels in that form. Create supplied a stacked co-brand (`Nashville_PBS_Create_Cobrand.svg`, kept for spaces that need a stacked mark); `NashvillePBS_Create_Pipe_Color.svg` and `_White.svg` are Nashville PBS compositions of that artwork in the WORLD geometry so the three channels match, and they are the standard Create lockups (approved by Nashville PBS, 2026-09-17; the pipe separator is one of the treatments PBS permits, so no channel sign-off is needed). The channel marks keep their own colors (WORLD gold, Create orange); the pipe and the channel wordmark are black on light surfaces and white on dark ones, as the channels supplied them. Never rebuild a lockup from parts, restyle a channel mark, or set the marks at different scales on one page.

**PBS KIDS: architecture, not a lockup.** PBS KIDS Station Logo Architecture 1.2.1 replaces co-branding with a spatial relationship. Place the PBS KIDS logo left, right, above or below the Nashville PBS logo (or well apart from it), at least the height of the station logo and larger when useful, with clear space of 25% of the PBS KIDS logo's diameter. An optional connecting phrase ("From", "On", "Presented by", "A service of") sits above the station logo in a font and color that complement it (PBS Sans Bold in PBS Blue here); agree the wording with PBS KIDS. Never replace the PBS logo inside the station lockup with PBS KIDS.

**PBS KIDS logo rules (Style Guide 1.3.1).** Use the primary logo (PBS Blue circle, PBS KIDS Green `#99CF16` "PBS", white "KIDS") most of the time. Digital files carry no SM mark; print files always do (`PBS_KIDS_*_RGB_Digital.svg` for screens, `PBS_KIDS_*_CMYK_Print.svg` for print). PBS KIDS supplied only the primary in digital form, so the digital Reverse, White and Black files are recolorings of that primary made here at the station's direction, with the geometry untouched and the colors from the style guide (no SM); swap in PBS KIDS's own files if they arrive. Do not place the primary logo on PBS Blue; use the Reverse version there (white circle, PBS Blue letters), and prefer surfaces where the primary works. Black and White versions are for one-color use only. Never separate the circle from the letters, recolor, rotate, stretch, add strokes or effects, make it grayscale, let a background show through the letters, or let other elements overlap it. In text, PBS KIDS is always all caps and carries ® on first mention in print. Printed materials and web pages carry the PBS KIDS ownership attribution line: "PBS KIDS and the PBS KIDS Logo are trademarks owned by Public Broadcasting Service. Used with permission."

**PBS KIDS Headline** (Regular, Bold, Condensed, Condensed Bold; `fonts/PBSKIDSHeadline-*.woff2`, tokens `--font-kids` and `--font-kids-cond`) is for PBS KIDS-branded local materials only, never for station or channel communication. The license that came with the package says do not redistribute without permission; it stays inside this system.

**Shield-only exception.** The PBS shield without the logotype is allowed only in local channel guides, as the blue shield with white profiles, and only as a graphic requested from PBS.

**Channel lineup in copy.** Four broadcast channels plus ALL ARTS, which is digital only. In copy: Nashville PBS, WORLD, PBS KIDS 24/7, Create TV, ALL ARTS (WORLD, PBS KIDS and ALL ARTS always in capitals). With channel numbers, in TV and streaming guides only: WNPT Nashville PBS, WNPT2 WORLD, WNPT3 PBS KIDS, WNPT4 Create; ALL ARTS has no WNPT number. Service area: Middle Tennessee and southern Kentucky. One channel mark per graphic, beside or instead of the station lockup, with the same clear space. (Source: the standalone project's SKILL.md as of 2026-10-23, kept at `assets/notes/SKILL.from-standalone-2026-10-23.md`; added here 2026-11-06.)

**Channel marks in code.** `ChannelLogo` renders the lockups from artwork embedded in the bundle (`channel`, `orientation`, `tone`, `print`, `height`); `ChannelAssets.uri` exposes the same files as data URIs for CSS and logic classes, the national PBS logo and the Passport lockups included. `KidsArchitecture` places the PBS KIDS logo left, right, above or below the station logo at the architecture's sizes and clear space, with the optional phrase. On screen both always use the color digital-use PBS KIDS file; the white, reverse and black files they carry are the national print files with the registered mark, unlocked by `print` (standalone SKILL.md, 2026-10-23). That is how the components behave, not the station's rule for screens: Shane Burkeen decided on 2026-11-06 that the station-derived digital Reverse, White and Black files in `assets/channels/` (see Intentional Additions) stay in use on screen, Reverse on PBS Blue and White or Black for one-color use, as the PBS KIDS logo rules above say. Where a screen layout needs PBS KIDS in a colorway other than the primary, place the derived file by hand, as the `Channels` preview does with the Reverse on PBS Blue, rather than the component's `print` variant. The paired files in `assets/channels/kids-paired/` (Digital: no registered mark, for screen and broadcast; Print: CMYK, white, reverse and black with the registered mark) are prebuilt layouts of the architecture for tools that take one file; ship those rather than composing new pairs. Added 2026-11-06 from the standalone project's October 2026 work.

**Passport.** "Nashville PBS Passport" on first reference, "Passport" after. Only the official lockups, supplied by PBS in the Nashville PBS Cobrand Logo Update (December 2023; digest in `assets/guides/_passport_cobrand_guide.txt`): `assets/channels/Passport_Horizontal_*.svg` and `Passport_Stacked_*.svg`, Navy with the Passport blue `#5680FF` mark on light surfaces, white on dark. `ChannelLogo channel="passport"` renders them. Passport blue belongs to the lockup alone and never appears elsewhere in the palette. When promoting Passport together with the PBS app, the Passport lockup sits beside the PBS logo (PBS App Marketing Guide, July 2024, page 9). Added 2026-11-06 from the standalone project's October 2026 work.

**The PBS app.** Follow the PBS App Marketing Guide (July 2024; digest in `assets/guides/_pbs_app_guide.txt`). The national PBS logo (`assets/logos/PBS_Logo_Color_RGB.svg` on light surfaces, `PBS_Logo_White_RGB.svg` on dark) is the graphic for every app promotion; never the app-store icon in a layout, in a logo-and-copy lockup or embedded in text (the icon is only for app stores and placements dedicated to mobile and tablet promotion). The logo is always paired with an approved call to action so it reads as an app: the PBS logo big on top and the call to action beneath it at the logo's width, either GET THE FREE PBS APP, or WATCH NOW over WITH THE FREE PBS APP*; "STREAM ON THE PBS APP" is the guide's default call to action on promotional assets. Calls to action in all caps PBS Sans, leading with "the"; "app" lowercase in running copy, "App" in Title Case only in headlines and subject lines. Any "free" claim carries the fine print "*Local PBS station membership required to access some content" once per piece. "PBS Video App" naming and creative are retired. The Nashville PBS app is not launched: do not reference it. `AppPromo` builds the approved block; with `passport` the stack is STREAM NOW on top, the Nashville PBS Passport lockup, then the PBS logo, and no asterisk or fine print is needed. Added 2026-11-06 from the standalone project's October 2026 work.

---

## Color

The palette is overwhelmingly **blue**. Every text/background combination must pass WCAG AA (pass/fail matrices in PBS Brand Style Guide v3, pp. 29–34).

**Primary palette**
- **PBS Blue `#2638C4`**: the signature color. Primary CTAs, links, prominent brand placement.
- **White `#FFFFFF`**: primary canvas for content pages.

**Secondary blues** (depth, dark surfaces, serious tones; not accents)
- **Navy `#0A145A`**: headers, footers, covers, dark UI surfaces, text headings.
- **Medium Blue `#0F1E8C`**: button hover states, gradient midpoint.
- **Light Blue `#486CD8`**: reclassified in v3 from accent to secondary blue; focus rings, gradient start, UI depth elements.

**Primary accents** (one at a time; fills and bars, not body text on white)
- **Teal `#48D3CD`** · **Yellow `#FFCF00`** · **Coral `#FE704E`**
- Interchangeable; use one per layout; more only when each has a distinct purpose.

**Primary accent alts** (new in v3; when accents fail contrast or less vibrancy is needed)
- **Sky `#8DDFFF`** · **Honey `#FFBD00`** · **Peach `#FFB699`**
- Infrequent: text over solid blues, subtle backgrounds, alt text over footage. Never paired with secondary accents.

**Secondary accents** (infographics and illustration only; never on-air, never replacing primary accents)
- **Purple `#4E05AC`** · **Red `#D6383A`** · **Green `#087B45`**

**Recommended neutrals** (official in v3; cool only, non-primary elements, never on-air)
- Cloud `#F6F8FA` · Fog `#EEF0F5` · Slate `#5C6E85` · Deep Sea `#040C41` · Midnight `#000525`

**UI neutral ramp** (`--neutral-*`): a cool-tinted gray scale added for interface use; not in the PBS brand book. Provides borders, surface variants, and body text colors.

---

## Typography

A **single family**, PBS Sans, across the entire system. Self-hosted from the licensed `.woff2` files. Arial (Regular/Bold + italics) is the sanctioned fallback only where custom fonts are unavailable.

**Scale.** Display sizes run from `fs-display-2xl` (5rem) down through `fs-display-xl`, `fs-display-lg`, `fs-h1`–`fs-h4`, `fs-body-lg`, `fs-body`, `fs-body-sm`, `fs-caption`, to `fs-overline` (0.6875rem with 0.08em letter-spacing).

**Weight and tracking.** Display and headings: bold to black (700–800) with tight, slightly negative tracking (`ls-display: -0.02em`, `ls-heading: -0.01em`). Body: regular weight, 1.55 line-height, normal tracking.

**Restricted styles.** Italic only for captions, quotes, and AP-style needs. Condensed (`PBS Sans Cond`) only for credits and fine print; neither style for primary messages. No gradient, emboss, shadow, or other text effects.

**PBS KIDS Headline** (`--font-kids`, `--font-kids-cond`) is a second family with a single job: headlines on PBS KIDS-branded local materials (see Sub-brands and Channels). It never appears in station, channel or fundraising communication.

---

## Backgrounds and Surfaces

Three surface registers define the visual hierarchy:

1. **White content pages**: clean, high-contrast body surfaces.
2. **Navy dark surfaces**: headers, footers, cover cards, membership bands.
3. **Full-bleed imagery**: always with a blue gradient or scrim overlay for legibility; never desaturated, rotated, flipped, or staged.

The **geometric brand patterns** (Community, Insight) appear on section headers, membership bands, and cover cards, always under a blue overlay. One pattern per layout or project; the full rules are under Patterns.

---

## Gradients

Gradients are diagonal, light source always in a **top corner**. Never build gradients from colors outside the prescribed stops.

- **Primary** (`--gradient-primary`) Light Blue → PBS Blue → Medium Blue at 135°, for backgrounds and graphic-element fills.
- **Primary overlay** (`--gradient-primary-overlay`) Same stops at **exactly 80% opacity**, over imagery and footage. Always 80%.
- **Primary, top-right** (`--gradient-primary-tr`, `--gradient-primary-overlay-tr`) The same stops and the same 80% overlay at 225°, light source top-right: the on-air default (see Broadcast). These are the only two angles; the light source is a top corner, never a side or the bottom. Tokens added 2026-11-06 from the standalone project's October 2026 work.
- **Secondary** (`--gradient-secondary`) Adds Sky at the start; full-bleed backgrounds **only**, never with imagery/footage or competing elements.
- **Deep** (`--gradient-deep`) Medium Blue → Navy at 160°, for deep dark panels and covers.

Curved elements on gradient backgrounds may use a hard Medium-Blue shadow (Multiply blend on gradient; Normal on Navy), never with imagery or Patterns.

---

## Imagery and Illustration

**Selection.** Simple (clean, uncluttered compositions), immersive (the viewer is part of the moment) and unexpected (new angles, new perspectives). Brand imagery, for brand-forward pieces outside show promotion, finds new perspectives on familiar things; show imagery comes from the program.

**Rules.** Keep all imagery in full color, even under a color overlay. Keep it full frame where possible. Do not rotate or vertically flip, do not alter colors or tones, do not convert to black and white, and avoid staged or posed shots. Overlays on imagery are the Primary Gradient at exactly 80% or the Navy overlay; body text never sits on an unfiltered photo.

**Cleared photography** lives in `assets/photos/` (ten files: a leadership headshot, two Lower Broadway views, an aerial of a tri-star plaza, and six Nashville skyline and bridge views from Adobe Stock and Pexels), with source and crop notes in that group's README. Caption real people with their real name and title.

**Illustration** is an alternative to photography for branded experiences, never on air. Use the licensed PBS illustrations whole and unmodified (source.pbs.org): anchored to the base of the layout, never free-floating, cropped, rotated, recolored, grayscaled, animated, given gradients or shadows, taken apart, redrawn, or combined with photography.

---

## Graphic Elements

The official v3 Graphic Elements live in `components/graphic/`. Each has its own usage rules.

- **Circle Crop**: a perfect circle bleeding off exactly 3 sides; holds text or imagery. The brand's signature shape.
- **Curve**: bottom-left placement only, derived from the back of the P-head profiles. Never flipped, rotated, or stretched.
- **Circle Highlight**: key text only (≤8 characters/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 and bottom; over wide imagery only.
- **Symbol Crop**: official PBS artwork on PBS Blue (`assets/brand/`); layout ≥1.5:1, bleeds top/left/bottom. Never recolored or paired with imagery or 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 per use; on blue backgrounds only.

---

## Patterns

Community (the circular form of the PBS logo, a crowd of people) and Insight (the P, B and S letters as a puzzle of shapes) are the two brand Patterns, in `assets/patterns/` as vector SVG (1920 grid for screens, 15 in grid for print) with the PNG rasters kept for tools that need them. `PatternPanel` renders them; the broadcast slates run Community as a left rail on Navy.

**Color.** Only the approved blues, placed as shipped: PBS Blue `#2638C4`, Medium Blue `#0F1E8C`, Navy `#0A145A`. Never recolor. The print files carry shifted CMYK values for Medium Blue and Navy by design.

**Scale.** Think in rows (horizontal layouts) and columns (vertical layouts): at least 3 and at most 6 in a given area, so the Pattern stays recognizable without turning busy. One row is acceptable only on stationery. Fill with whole rows and columns wherever the area allows; when it does not, choose one orientation, center the Pattern along the parallel sides and crop the other axis. Never stretch, squeeze, rotate, flip or mirror the Pattern, never leave thin slivers of shapes at the edges, and use one Pattern at one scale per layout or project.

**Overlays and type.** An overlay of Navy or PBS Blue at 50% opacity or more lets elements read over the Pattern (`brand`, `deep` and `scrim` in `PatternPanel`); never a white or light overlay, and never so dark the Pattern disappears. Keep copy short (a few words), in PBS Sans Medium, Bold or Black, never Light or Regular, in brand colors with high contrast; pair with the white logo. Do not place large amounts of text over a Pattern or scale the Pattern small behind text.

**With other elements.** Circle Highlights may sit on a Pattern, matched to the height of a row or column; Line & Highlight aligns to the middle of two columns. Prefer either a Circle Crop or a Pattern, rarely both. Never embed imagery or illustration in a Pattern area, and seek PBS brand approval (brand@pbs.org) before putting a Pattern on swag.

---

## Iconography

PBS/Nashville PBS uses **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.

This system uses **inline SVGs in the Lucide style** as a matched substitution: clean CDN-available icons matching the brand's stroke weight and rounded style. If Nashville PBS defines an official icon set, drop the SVGs into `assets/icons/` and reference them from there.

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.

---

## Cards, Borders, Elevation, and Motion

**Cards**: white surface, 1px cool border (`--border`), restrained cool-tinted shadow flat by default. Interactive cards lift 2px and deepen the shadow on hover.

**Corner radii**: buttons are **fully pill-shaped** (`radius-button: 999px`). Cards and media use a quiet 8–12px radius. Full-bleed bands are square-cornered.

**Borders**: 1px `--border` on surfaces; 1.5px on interactive controls (inputs, tags, secondary buttons).

**Elevation**: minimal, navy-tinted shadow scale (`shadow-xs` → `shadow-xl`). The brand reads mostly flat.

**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, no 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 keyboard accessibility (WCAG AA).

**Layout**: 1200px max content width, 24px gutters, sticky navy header. 4px-based spacing scale.

---

## Component Library

All components are exported on `window.NashvillePBSDesignSystem_8fe663`. Sources are in `project/components/src/`; the compiled bundle is `project/components/bundle.js`, rebuilt from the sources with Babel preset-react (one classic script, a guarded block per component).

**Type comes from the tokens.** Every text size in the components is a type-scale style, applied as `font: var(--text-fs-…)` (the shorthand the page compiles for each style), with weight, leading and tracking from the metric tokens (`--fw-*`, `--lh-*`, `--ls-*`) where the component tightens them. Change a style's size in the Type section and every preview follows; the same for a weight or line-height token. The UI sizes the components need that the national scale lacks are declared as styles (`fs-ui-lg`, `fs-ui`, `fs-ui-sm`, `fs-display-md`; see Intentional Additions). Only `NumberBadge` and `CircleHighlight` compute their size from their diameter.

**Core**: Button, IconButton, Badge, Tag, Card

**Forms**: Input, Select, Checkbox, Radio, Switch

**Brand**: Logo, PatternPanel, ChannelLogo, KidsArchitecture, AppPromo (the last three added 2026-11-06 from the standalone project's October 2026 work; they carry the channel, Passport, PBS and station artwork inside the bundle as `ChannelAssets` and `BrandAssets`)

**Graphic**: CircleCrop, Curve, CircleHighlight, LargeCircleHighlight, SymbolCrop, LineHighlight, the official v3 Graphic Elements (usage rules in each component's `.prompt.md`)

**Media**: ShowCard

**Editorial**: CurvedPhotoMask, NumberBadge, PillarTimeline, PillarDivider, PullQuote, HighlightLabel, SectionBar, PageTab, RingAvatar, KeySidebar, the print primitives measured from the approved FY2024-26 Strategic Plan (see Print / Strategic Report below)

**Brand artwork and the previews.** Logo, PatternPanel and SymbolCrop load their artwork from an `assetPath` folder (`assets/logos`, `assets/patterns`, `assets/brand`; the files are in this artifact's asset store, listed under Assets). The live previews in this page cannot fetch files, so they inline the same artwork as `data:` URIs and pass it through the documented escape hatches: `src` on Logo (it forwards every `<img>` attribute) and `background` in `style` on PatternPanel and SymbolCrop (both merge `style` last). In your own page, copy the asset folders beside it and set `assetPath`; the previews' source shows both routes. Where a photo is called for (PillarDivider, CurvedPhotoMask, LargeCircleHighlight, RingAvatar, PullQuote, ShowCard, the Index hero) the previews use cleared photographs from `assets/photos/` (see Source Materials), inlined at preview size; ShowCard's other posters and the Index program art are brand patterns and generated tiles. Since 2026-09-17 every logo, pattern and channel mark in the previews is the vector file itself (the same bytes the asset store serves), so what a preview shows is what the system ships. The `Channels` preview (Brand group) is the reference sheet for the sub-channel lockups and the PBS KIDS architecture. `ChannelLogo`, `KidsArchitecture` and `AppPromo` carry their artwork inside the bundle (`components/src/components/brand/channelAssetData.jsx` and `brandAssetData.jsx`), so they take no `assetPath` and their previews call them directly. The `Slides`, `Document` and `Charts` previews are the reference sheets for the Presentations, Documents and Data Visualization registers; they are drawn from the slide, document and chart tokens, so a token change moves them.

---

## Presentations

The slide register is for every deck the station shows or sends: board briefings, staff meetings, community presentations, pitch decks. The `Slides` sheet (Presentations group) shows the five slide types at their true 1920 by 1080 sizes; the PowerPoint and Google Slides templates in `assets/templates/` carry the same layouts.

**Two backgrounds per deck.** White for content slides and one blue (Navy or Medium Blue, pick one and keep it) for the title, section starters and the closing slide. A section starter may also take the PBS Brand team's form: the section number as a giant PBS Blue numeral on the white half, the title white on the blue Curve, one word in Teal; it still uses only the deck's two colors. One section style per deck. No gradients, patterns or photography as slide backgrounds; a photo appears inside a Circle Crop or a rectangle with a quiet radius. The Circle Crop on a slide is the one the `CircleCrop` component draws: a perfect circle 1.7 times the slide height (1836px at 1920 by 1080), centered vertically, reaching about 55% across, so it bleeds off the top, one side and the bottom and only a shallow arc shows. Never a floating disc, and never a circle that bleeds off one side only (the title slide of the 2026-09-18 template did; corrected 2026-10-20).

**Type.** The slide scale is the `slide-*` group in tokens.json: title 96px, section 80px, slide title 56px, subhead 40px, body 32px, caption 24px. Nothing on a slide is smaller than 24px; body copy is 32px and rarely more than five short lines. Titles in PBS Blue on white and white on blue; body black on white, white on blue. Title Case for slide titles, sentence case for everything else, left-aligned.

**One idea per slide.** A title and at most five lines, or a title and one chart, or a title and one image. Generous whitespace is the design; do not fill it with icons, filler statistics or decoration. Emphasize one phrase per slide as bold Navy text on a Yellow marker block (the deck's one accent), never colored type on its own, never underlining, never shadows or animation effects.

**Furniture.** Station logo at 72px top-left on the title slide, 48px bottom-left on content slides (color on white, white on blue); slide number bottom-right at 24px; source lines bottom-left at 24px. The closing slide is the vertical white lockup centered on the blue with the vision statement and wnpt.org (the station's website; never "nashvillepbs.org", and a title slide carries no web address). Content slides may carry a running section label in small caps before the slide number, bottom right, as PBS's own decks do.

**Charts on slides** follow the Data Visualization register: white surface, one series in PBS Blue with the one bar the slide is about in Yellow, axis text at 24px or larger, values on the marks, the takeaway written beside the chart in the 40px subhead.

**Transitions and motion.** None, or a plain cut. The brand reads flat and calm.

**How PBS itself builds a deck** (Brand Evolution station webinar, August 2025, in `assets/guides/`): white content slides with a Navy title in the top-left, the PBS logo bottom-left and a small uppercase running footer bottom-right ("NEW GRADIENTS | 9"); section starters that put a giant PBS Blue numeral on the white left half against the Curve, with the section title white on the Primary Gradient at right and one word in Teal; a title slide on the Primary Gradient; photographs only as a strip or inside a Circle Crop. The station register above keeps the same bones and stays flat: solid Navy or Medium Blue where PBS uses the gradient, the Yellow marker where PBS colors a word Teal.

---

## Documents

The document register covers letters, memos, reports, one-sheets, proposals and the strategic plan: anything set on a page. The `Document` sheet (Documents group) shows a cover, a body page and a data page on US Letter; the Word and Google Docs templates in `assets/templates/` carry the same styles and, since 2026-09-18, the approved strategic plan pages (cover, contents, letter, mission and values, key pillars, divider, strategies, measures, closing) as a nine-page sample. The printed strategic-plan primitives (Editorial components) are the report end of this register.

**Page.** US Letter, 0.75 in margins (1 in on formal letters), single column for reading documents, two columns only in newsletters and one-sheets. A running header with the small color logo (22 px, about 0.25 in tall) on the left and the document title on the right; a footer with "Nashville PBS" on the left and the page number on the right, both 10pt, separated from the page by a hairline rule.

**Type.** The document scale is the `doc-*` group in tokens.json, in points: title 28pt, H1 20pt, H2 15pt, H3 12pt, body 12pt on 1.5 leading, small 10pt for captions, table cells, footers and sources. Body copy is black, regular weight, left-aligned and never justified; 12pt is the floor for body copy in print. Headings are bold: H1 in PBS Blue (or on a section bar), H2 and H3 in Navy. Title Case for the title and H1, sentence case below. Arial stands in wherever PBS Sans is not installed.

**Covers and dividers** are solid Navy or Medium Blue with white type and the white logo, one circular photo crop bleeding off the edge or none at all. Body pages are white. The strategic plan is the one document that uses PBS Blue for its cover and dividers, as the approved FY2024-26 plan did; see Print / Strategic Report Register for its measured layout.

**Section furniture.** Major section headings ride a full-width solid Yellow (or Navy) bar, H1 in Navy on Yellow or white on Navy. Numbered strategies and callout labels are bold Navy text on a small Yellow block ("1.1 Staffing"). Pull quotes are italic on a Yellow banner with the name in bold small type. Callout boxes are Cloud with a PBS Blue left rule and a quiet radius. Pick one accent per document (Yellow here) and use it for all of these; Teal or Coral may take its place across a whole document, never mixed within one.

**Tables.** Navy header row with white bold text, 10pt cells, Fog zebra rows, hairline rules, no vertical rules, numbers right-aligned with tabular figures, a numbered italic caption above or below with the source.

**Figures** follow the Data Visualization register at 10pt labels or larger, always with a numbered italic caption and a source line.

**Lists.** Bulleted lists use a plain round bullet in PBS Blue; numbered lists plain numerals. No decorative icons, drop shadows, text effects or clip art. Links in PBS Blue, not underlined in print.

---

## Data Visualization

Charts, graphs and stat tiles carry the same restraint as the rest of the brand: the data is the only loud thing on the page. The `Charts` sheet (Data Visualization group) shows each form drawn from the `chart-*` tokens; the palettes below were checked for color-vision deficiency and contrast with the validator in the data-viz method, not by eye.

**Pick the form first, color last.** Magnitude across categories: columns or bars. Change over time: a line. Parts of a whole: a stacked bar, or a donut with at most five segments. A single headline figure: a stat tile, not a chart. Two measures of different scale: two charts side by side, never a second y-axis. Never a 3D chart, an exploded pie, a gradient fill or a shadow.

**Categorical series** take the fixed order PBS Blue, Coral, Green, Light Blue, Red (`chart-series-1` to `-5`), assigned by entity and never re-ordered when a series is filtered out. A sixth series folds into Other (Slate, `chart-other`) or the chart becomes small multiples. Green and Red are the PBS secondary accents, which the national guide reserves for infographics and illustration; a chart is exactly that. Coral sits below 3:1 on white, so a chart using it carries visible value labels or a table view. Scatter and bubble charts, where every pair of colors meets, use the first three slots only.

**Single-series charts** are PBS Blue with the one mark the story is about in Yellow (`chart-highlight`): one highlight per chart. No legend for one series; the title names it.

**Magnitude scales** run Sky, Light Blue, PBS Blue, Medium Blue, Navy (`chart-seq-1` to `-5`): one hue, light to dark, never a rainbow. **Diverging scales** run Coral to Fog to PBS Blue (`chart-div-*`) with the neutral midpoint. **Status** is Green, Honey, Red (`chart-status-*`), always with an icon or word, never color alone, and never mixed with categorical series in one chart.

**Marks.** Bars and columns at most 24px thick with a 4px rounded data-end and a square baseline, growing from one baseline at zero. Lines 2px with round joins; points 8px or larger, ringed in 2px of the surface color. A 2px surface gap separates touching fills (stacked segments, neighboring bars); never a stroke. Gridlines and axes are hairline, solid, `chart-grid`, with no vertical gridlines behind bars. Area fills are the series color at about 10% opacity.

**Text.** Labels, values, legends and axis text wear text colors (`chart-axis-text` for axes and legends, body ink for values), never the series color; the colored mark beside a label carries identity. Label selectively: the endpoint, the extreme or the series the story is about, not every point. A legend is present for two or more series; direct labels supplement it. Axis ticks are clean rounded numbers. Type is PBS Sans at 11px or larger on screen, 10pt in print, 24px on slides.

**Surfaces.** Charts sit on white (or Cloud for stat tiles). On a Navy slide use a single series in Teal or Yellow with white labels; the brand's accents are too light to work as a series set on dark, so multi-series charts belong on white.

**How PBS itself sets a data report** (Audience Insight 2024 and 2025 Annual Reports, PBS Business Intelligence; the 2025 edition is in `assets/guides/`): page titles in uppercase light PBS Blue over a hairline rule, uppercase Navy subheads, a numbered part label and page number in the footer ("Part 02 GENERAL AUDIENCE OVERVIEW"), headline figures in Navy stat circles beside two lines of bold text, key sentences in a Navy rounded callout with white text, sources as footnotes under every chart, and charts in PBS Blue with Coral, Teal and Yellow as the other series on white. Divider pages are a solid blue with a large uppercase title. The station register above is the same discipline with the station's validated palette; use these reports as the model for a Nashville PBS audience or impact report.

**Interaction and access.** A chart on a web page or in an artifact ships a hover tooltip (crosshair on lines, per-mark on bars and dots), a table view of the same data, and an accessible name. A chart in a document or deck carries a numbered caption and its source.

---

## Broadcast / On-Air Guidelines

The on-air register covers everything airing on the channel at 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) driven by the Essential Graphics panel.

**Approved use.** PBS Sans only with preset type accent colors. Approved on-air palette only: blues plus one primary accent at a time; never secondary accents or neutrals on air. The station logo in the toolkits is the Nashville PBS lockup itself (the toolkit's "PBS/Station co-branded logo"), at equal scale with PBS, with all other affiliations removed, kept inside the no-fly zone and never distorted; there is no separate PBS plus station lockup and sub-channel marks do not appear in it. 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: full-screen PBS Blue, Medium Blue, the Primary Gradient (v3.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 (v3.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 `project/components/BroadcastSlates/` and `project/components/BroadcastEndpage/`.

**Station rules (standalone project, October 2026).** The standalone Claude Design project carried these rules in its SKILL.md until 2026-10-23 (copy at `assets/notes/SKILL.from-standalone-2026-10-23.md`); they bind here too. Sources: PBS On-Air Toolkit Guide v3.1 and Toolkit 1.0 (`assets/Uploads/PBS_On-Air_Toolkit_Guide_v3.1_part_*.pdf`), the station's safe-area guide (`Safe_Areas (1).jpg` in `assets/Uploads/`) and station practice. Added here 2026-11-06.

- **Frame and masters.** 16:9. Author at 1920 by 1080 and export at 2x for the 3840 by 2160 UHD master; never DCI 4K (4096 by 2160). HD is a clean 2:1 downscale of the master. Express type size, stroke weight, radius and padding as a percentage of frame height so a layout scales between UHD and HD.
- **Safe areas.** Title-safe is the inner 80 percent (inset 10 percent per edge): every piece of text, every logo, QR code and other readable element stays inside it, no exceptions. Action-safe is the inner 90 percent (inset 5 percent per edge). Backgrounds and color bars may bleed to the edges (the lower-third bar runs full width); the text on them may not. Ignore 4:3 center-cut. Pixel reads: at 1920 by 1080, title-safe runs from (192, 108) to (1728, 972) and action-safe from (96, 54) to (1824, 1026); at 3840 by 2160, title-safe from (384, 216) to (3456, 1944) and action-safe from (192, 108) to (3648, 2052). Before export, turn on the On-Air template's `safeGuides` tweak and confirm nothing readable crosses the red title-safe box.
- **Switchable backgrounds.** Every on-air layout switches between the Primary Gradient with the light source top-right (`--gradient-primary-tr`, 225 degrees), a brand Pattern, and solid Navy. Station practice: slates, support and notice cards sit on the Community pattern, as a full field or a left rail on Navy (the Backgrounds paragraph above and the `BroadcastSlates` preview); endpages, promos and title cards on the top-right gradient; lower thirds over footage. The October 2026 standalone template defaulted slates to the Insight pattern; Shane Burkeen kept the Community rail on 2026-11-06, so set the On-Air template's pattern tweak to Community before use.
- **No Curve on broadcast.** Endpages and title cards sit directly on the background: no Curve shape and no hard shadows. Toolkit v3.1 offers both; the station rejected them. The Curve stays a print and digital element, bottom-left only.
- **Lower third** (Toolkit 1.0 "Lower Third_Blue"): a full-width PBS Blue bar, 20 percent of the frame height, floating 6.5 percent above the bottom edge with footage visible below it; messaging at left with the lower lines in the accent color, the white co-branded logo at right, both inside title-safe.
- **Type and color.** One primary accent (Teal, Yellow or Coral) or White per graphic; tune-in copy in ALL CAPS in the accent; minimum on-air type about 40 px at 1080 (3.7 percent of frame height): shorten the copy rather than shrink below it. The co-brand lockup at equal scale, never distorted. No secondary accents, no neutrals, no other fonts.

---

## Print / Strategic Report Register

A distinct, bolder register used for printed reports and the strategic plan, not the flatter digital UI. It was measured on 2026-09-17 from the approved Nashville PBS Strategic Plan Overview FY2024-FY2026 (`assets/guides/NPT-Strategic-Plan-FY2024-2026_part*.pdf`), the station's own adaptation of the brand in print; the primitives are the **Editorial** component group and the Strategic Report canvas (Starters) is the page-for-page template. Measurements below are for a US Letter page at 96 dpi (816 by 1056 px); scale them for print.

- **Cover**: solid PBS Blue (a tweak offers Navy or Medium Blue). A 5px Teal rule 58px from the top, from 66px to 53px short of the right edge. The title is white bold PBS Sans with open tracking (0.04em), the subtitle uppercase Yellow bold, the fiscal years white bold with 0.12em tracking. The white horizontal logo sits at right (about 32px tall) above the mission statement, white bold 13.5px behind a 4px Yellow left rule. The photo fills one large circle centered at 14.7% of the width and 111% of the height with a radius of 85% of the width, so it bleeds off the left, bottom and right, with a 5px Teal rim. (`CurvedPhotoMask` with `at="14.7% 111%"`.)
- **Contents**: a full-width Yellow bar 70px tall, 107px from the top, "Table of Contents" in Navy bold 30px; entries in Navy medium 34px with PBS Blue circles 127px across carrying white page numbers. (`NumberBadge`.)
- **Letter**: Navy bold heading at top left; a PBS Blue pull-quote card top right with a framed headshot and an attribution tag; body 14px on 1.5 leading indented to 122px; a full-bleed PBS Blue "KEY POINTS" panel with the label rotated and white bold bullets; "Continued" in PBS Blue at bottom right. (`PullQuote`, `KeySidebar`.)
- **Mission, Vision and Values**: a Yellow tab bleeding off the top left edge, a Navy bold heading, Mission in a Navy circle and Vision in a PBS Blue circle (140px) with the statements bold and centered beneath, one phrase in PBS Blue; a Yellow "Values" bar that starts 58px in and bleeds off the right; the six values on a ring of Navy, Medium Blue and PBS Blue segments around the color logo, each described in a short callout underlined in Yellow.
- **Key Pillars**: a solid PBS Blue page with the Yellow bar 38px from the top ("Key Pillars" in Navy bold 30px) and the pillars as a vertical timeline: Teal roman-numeral circles 44px across joined by a 4px Yellow line, names in white bold. (`PillarTimeline`.)
- **Pillar divider**: PBS Blue header in the top 24.5% with a Teal numeral circle (128px) and the pillar title in white bold 52px; a 7px Teal rule; a white lead card in the next 25.5% that bleeds off the left edge and stops 7.5% short of the right, with a 4px Teal bar inside its left margin and the lead sentence bold italic running into the paragraph (16px on 1.5); the photo in the bottom half, cropped by one circle centered at 20.6% of the width and 112% of the band's height with a radius of 78% of the page width, so the blue field wraps its right side. No page number. (`PillarDivider`, which carries these proportions; `CurvedPhotoMask`.)
- **Strategies**: a PBS Blue band 68px tall, 38px from the top, with a Teal numeral circle (48px) and the pillar name in white bold 26px; "Strategies" in PBS Blue bold 20px; each strategy as a Yellow highlight label in uppercase bold ("1.1 STAFFING") over a 13px paragraph, 40px between strategies; the page number in a PBS Blue half circle 72px wide rising from the bottom edge. (`HighlightLabel`, `NumberBadge`, `PageTab`.)
- **Pull quotes and headshots**: italic white quote on a PBS Blue banner with a small square headshot in a Yellow frame and a Yellow attribution tag in Navy bold; ringed circular headshots for bylines. The approved plan used PBS Coral for the frame and tag; the components default to Yellow to stay inside the station palette and take `frame` and `tag` props for Coral. (`PullQuote`, `RingAvatar`.)
- **Photo grids**: a closing page may stack overlapping photographs with 8px radii and thin Yellow, Teal or PBS Blue frames over a PBS Blue band.

Body pages are white with Yellow labels and Teal rules; the accent set on this register is Teal plus Yellow, the two the brand book allows, with PBS Blue doing the heavy lifting.

---

## Source Materials

- **PBS Brand Document Style Guide v3.0** (`assets/Uploads/PBS_Brand_Document_Style_Guide_v3_part_*.pdf`): the governing 119-page national spec: color, gradients, typography, imagery, illustration, Graphic Elements, Patterns.
- **PBS On-Air Toolkit Guide v3.1** (`assets/Uploads/PBS_On-Air_Toolkit_Guide_v3.1_part_*.pdf`): national broadcast-graphics spec (After Effects Toolkits 1.0 + 3.1).
- **Nashville PBS Messaging Guide v2** (`assets/guides/Messaging-Guide-v2.pdf`): positioning, key messages, tagline (since retired), tone (moving, welcoming, bright, local), headline starters, verbs and phrases. Its mission, vision and values page is superseded by the FY27-29 Strategic Plan (Final Draft), quoted under Voice and Messaging. Added 2026-09-17.
- **PBS Brand Guidelines** (Aug 2022; `assets/guides/PBS_Brand_Guidelines_Aug2022_part_*.pdf`): the PBS logo (colorways, padding, print minimums, translucent use, legal line, improper use), station co-branding options, Sub-Channel Branding (proximate endorsement, pipe separator) and the shield-only channel-guide exception. Reviewed 2026-09-17 for the Logo and Sub-brands sections.
- **PBS App Marketing Guide** (July 2024; digest at `assets/guides/_pbs_app_guide.txt`, the PDF stayed with the standalone project) and **PBS App Document Style Guide** (April 2023; `assets/guides/PBS-App_Document_Style-Guide_Apr20231.pdf`): the PBS logo as the app's graphic, the call-to-action lockups, "free" language and fine print, retired "PBS Video App" creative. **Nashville PBS Cobrand Logo Update** (PBS, December 2023; digest at `assets/guides/_passport_cobrand_guide.txt`): the Nashville PBS Passport lockups. Both reviewed in the standalone project in October 2026 for Sub-brands and Channels; added here 2026-11-06.
- **PBS KIDS Style Guide 1.3.1** (`assets/guides/PBS_KIDS_Style_Guide_1.3.1_part_*.pdf`) and **PBS KIDS Station Logo Architecture 1.2.1** (May 2023; `assets/guides/PBSK_Station_Logo_Architecture_1.2.1_May2023.pdf`): the PBS KIDS logo, its colorways and don'ts, the attribution line, and the station architecture rules. Reviewed 2026-09-17.
- **PBS Sans** (full licensed family), self-hosted as `.woff2` in `fonts/`.
- **PBS KIDS Headline** (Regular, Bold, Condensed, Condensed Bold), converted from the station's licensed package to `.woff2` in `fonts/`. The package's license reads "Do not redistribute without permission"; the fonts serve this system only.
- **Nashville PBS logo lockups**: the four official SVG exports (Horizontal/Vertical, Color/White) in `assets/logos/`, supplied 2026-09-17 with fills as presentation attributes.
- **Channel and sub-brand marks** in `assets/channels/`: WORLD (horizontal color and inverse, vertical color and white), All Arts (color, white, black), Create (the supplied stacked co-brand and the station-made pipe lockups) and PBS KIDS (RGB digital color as supplied plus derived digital reverse, white and black; CMYK print color, reverse, white, black).
- **Brand patterns**: Community and Insight as vector SVG (RGB 1920 grid and CMYK 15 in print grid) in `assets/patterns/`, with the earlier PNG rasters.
- **Symbol Crop artwork**: digital RGB + print CMYK SVGs in `assets/brand/`, plus the Circle Crop templates (digital RGB, print CMYK).
- **Photography** in `assets/photos/`: a square leadership headshot, a 16:9 Lower Broadway neon-guitar photo, a Lower Broadway night street view and a tri-star plaza aerial (both station-owned), and six Nashville skyline and bridge views (five Adobe Stock, one Pexels), cleared for use; source, size and crop notes in that group's README. Caption real people with their real name and title; the previews carry placeholder bylines.
- **Nashville PBS Strategic Plan Overview FY2024-FY2026** (`assets/guides/NPT-Strategic-Plan-FY2024-2026_part1.pdf`, `_part2.pdf`; earlier page rasters in `assets/Uploads/`): the approved print adaptation of the brand and the source of the Print / Strategic Report Register and the Editorial components. Measured 2026-09-17.
- **PBS Brand Evolution station webinar** (August 12, 2025; `assets/guides/PBS_Brand-Evolution-Station-Webinar_Aug2025.pdf`): the PBS Brand and Creative Team's deck on the 2025 refresh (gradients, optimized palette and accent alts, Graphic Elements, expanded patterns, On-Air Toolkit 3.0), and a national example of a PBS-branded presentation. Reviewed 2026-09-17 for Presentations.
- **PBS Audience Insight Annual Reports** (2024 in the station's Report References folder; 2025 at `assets/guides/PBS_Audience-Insight-2025-Annual-Report.pdf`): national examples of PBS-branded data reports. Reviewed 2026-09-17 for Data Visualization and Documents.

### Repairs made on import: 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 `assets/Uploads/`. **Confirm these match your master files.**
2. **PBS Sans** is self-hosted from the licensed `.woff2` files. Arial (Regular/Bold + italics) is the sanctioned fallback only where custom fonts are unavailable.
3. **UI-kit imagery**: program artwork in the website recreation (`Index`) is drawn on the fly in the brand blues (one quiet circle each) because previews may not fetch from the network; the earlier picsum.photos placeholders are gone. Swap `img()` in `components/Index/data.jsx` for real show images in production.
4. **Symbol Crop SVGs** also shipped with an empty `<defs>`. Fills restored per the mark: PBS Blue field, white shield circle, PBS Blue profiles, white eye. **Confirm against your masters.**
5. **Showcase pages compiled (2026-09-16).** The nine showcase pages (Brand, Badges, Buttons, Card2, Editorial, Forms, Graphic, Media, Index) used to load Babel from a CDN and compile their JSX at view time; they are now compiled at build time to plain `React.createElement` calls, so no preview depends on an outside script. The `.jsx` sources beside `Index` remain the editable originals.
6. **Preview repair (2026-09-16).** After the move every preview that referenced artwork by relative path (`../assets/logos/…`) showed a broken image, because the preview frame serves nothing by path. Artwork is now inlined (see Component Library). The `Index` website recreation loaded its six `.jsx` files by `<script src>`, which the frame ignores, so it rendered empty; the sources are now inlined into its preview (edit a `.jsx`, then paste it back). Text that used JavaScript escapes inside JSX text (`\u00a9`, `\u00b7`) rendered literally and now uses HTML entities. `PillarDivider` padded with `--space-7`, which the spacing scale never declared, so its header had no padding; the token now exists (see Intentional Additions).

7. **Official artwork replaces the repaired copies (2026-09-17).** The four logo files, both Patterns and every channel mark are now the station's own vector exports with fills written on each path; the previews and `PatternPanel` read those files. The repaired logo SVGs from item 1, the PNG patterns, the two PNG white lockups and the migration's duplicate `Logos` and `guidelines` asset groups were retired the same day; the original uploads stay in `Uploads` as a record.

---

## 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 and 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** components: not in the digital brand book; lifted from the printed FY24–26 Strategic Plan to capture that document's distinct print-motion language.
- **`--space-7` (28px)**: one step on the 4px scale between `space-6` and `space-8`. `PillarDivider` always used it for its header padding; the token was missing, so the padding collapsed to zero. Added 2026-09-16.
- **Type styles `fs-display-md` (2.5rem), `fs-ui-lg` (1.0625rem), `fs-ui` (0.9375rem), `fs-ui-sm` (0.8125rem)**: the sizes the components already used for section titles and control text, named so they sit on the scale and can be edited in the page. Added 2026-09-16.
- **Create pipe lockup** (`assets/channels/NashvillePBS_Create_Pipe_*.svg`): a station composition of Create's supplied artwork in the WORLD lockup geometry, so the three sub-channels read as a set. Permitted by the PBS sub-channel guidance (pipe separator); approved by Nashville PBS as the standard Create treatment. Added 2026-09-17.
- **Slide and document type scales** (`slide-*` in pixels at 1920 by 1080, `doc-*` in points) and the **chart tokens** (`chart-series-*`, `chart-seq-*`, `chart-div-*`, `chart-status-*`, `chart-grid`, `chart-axis-text`, `chart-highlight`, `chart-other`, `chart-surface`): the national brand book has no presentation, document or chart specification; these were written from the station's design standards and the PBS palette, with the chart palette validated for color-vision deficiency. Added 2026-09-17.
- **`PageTab`** and the rebuilt **`PillarDivider`**: the half-circle page-number tab and the divider proportions come from the station's approved FY2024-26 plan, not the national brand book. `CurvedPhotoMask` gained `at`, `rim` and `position` so a circle can be placed exactly where the plan puts it. Added 2026-09-17.
- **Digital PBS KIDS Reverse, White and Black** (`assets/channels/PBS_KIDS_{Reverse,White,Black}_RGB_Digital.svg`): recolorings of the one digital file PBS KIDS supplied, made because the national package had these colorways only as print files with the SM mark. Added 2026-09-17.
- **PBS KIDS Headline as a token family** (`--font-kids`, `--font-kids-cond`): the national PBS system has one family; this system carries a second for PBS KIDS-branded local materials only. Added 2026-09-17.
- **Event lockup** (`assets/logos/NashvillePBS_Event_*.svg`): the horizontal logo, a PBS Sans Black slash and EVENT, the caps of EVENT at the cap height of the PBS wordmark (60 of the logo's 100 units) on the same baseline, tracked 0.06 em, with a 22-unit gap on each side of the slash; 979.95 by 100 units, 9.8 to 1. It marks a Nashville PBS event the way the pipe lockup marks a sub-channel: a separator and a label proximate to the untouched logo. Two colorways on transparent, `_Horizontal_White` (Navy, Medium Blue, photography under the Navy overlay) and `_Horizontal_Color` (PBS Blue, for white and light surfaces), used exactly as the plain logo's colorways are. Two **bar** files, `_Bar_Teal` and `_Bar_Yellow` (1071.86 by 160), put the white logo on a Navy block and EVENT in Navy on the accent, with the slash's own angle (25 degrees off vertical) as the boundary between the colors; the logo keeps 40 units to every edge of its block. The bar is one accent, so it counts as the layout's accent; square corners; flush to an edge or floating as a badge; 60 px tall at minimum. The PBS brand book's rule against carrier shapes means the bar stays on station-owned channels (social, newsletter, events pages, on-air promos); national toolkit deliverables use the transparent lockup or the plain logo. Type is outlined in every file, so nothing depends on a font. Minimum on screen: 40 px logo height. Approved by Nashville PBS 2026-09-18; built by `harness/gen_event_lockup.py` from the logo and font files, so the geometry is reproducible. Not a colorway of the logo: never rebuild it from parts, set EVENT in another weight or case, swap the slash for a pipe, or add other words after it.

---

## Starters

The four starters that came across from the standalone version now live as Design canvases of their own, built on this system (its tokens and components are installed on each canvas, so a change here reaches them on their next update). Duplicate a canvas to start a piece; each carries a note with its rules.

- **Strategic Report** (https://claude.ai/artifact/4WJHdEMyuZPodEzhnfaFyb): eight US Letter pages, one artboard each, in the measured geometry of the approved FY2024-26 plan: cover, contents, letter, mission and values (with the FY27-29 statements), key pillars, then one pillar's divider, strategies and measures pages to duplicate per pillar. Mounts CurvedPhotoMask, NumberBadge, PillarTimeline, PillarDivider, HighlightLabel, PullQuote, KeySidebar and PageTab. Bracketed text is a placeholder for the FY27-29 workbook; the cover's blue is a tweak. Export PDF, all artboards. Rebuilt 2026-09-17.
- **On-Air Graphic** (https://claude.ai/artifact/8fXbyCBwHE6WZBnXnmtGet): seven 1920 by 1080 graphics (message slate, technical difficulties, support end card, endpage, show promo, title card, lower third) with tweaks for the background (Navy, Primary Gradient, Community Pattern, pattern rail), the one accent and the safe-area guides.
- **Graphics Set** (https://claude.ai/artifact/SM7h5fS9jKQHyqs3cs6Nsg): two sets on the station brand, plus the Event lockup studies. **Event graphics**: one event promo at every size the station publishes, the way the Lower Thirds Studio's Slice event collection exports them, plus the social extras: Eventbrite 2160 by 1080, events page 1920 by 1080, a broadcast slate 1920 by 1080 in the Show Promo layout from the On-Air Graphic canvas (centered copy on the Primary Gradient, inside title safe, Safe Guides tweak), Facebook event 1920 by 1005, X and LinkedIn 1600 by 900, newsletter 1080 by 1080, Instagram portrait 1080 by 1440 and story 1080 by 1920, and a matching lower third on a transparent background. Every board carries the Event lockup top-left (white on the photo by default; the Lockup tweak swaps in the Teal or Yellow bar) over station-owned Lower Broadway photography under a Navy scrim, with the title, date and place bottom-left; per board the photo focal point is a tweak and the background can switch to the Community or Insight pattern. **Station announcements**: the default Nashville PBS look for premieres, closures and notices at X and LinkedIn 1600 by 900, newsletter 1080 by 1080, Instagram portrait 1080 by 1440 and story 1080 by 1920: a Navy field (Community pattern, plain Navy or the Primary Gradient), the plain logo top-left, the signature circle bleeding off the top-right holding the photo (or a Medium Blue fill with the accent rim, or no circle and the photo full bleed under the scrim), and bottom-left a short label in the one accent (Teal, Yellow, Coral or White), a PBS Sans Black headline and one detail line. It replaced the Brand Cover web hero on 2026-09-17 and gained the lockup and the station set on 2026-09-18; it is the design reference for the sets the events and lower-thirds tools generate, and production still runs through those tools.
- **Media Manager Artwork** (https://claude.ai/artifact/T4mnPp1BpouBb49C1AYCim): the five show-level images PBS Media Manager takes for a series, named after its image profiles and at production size: Color Logo 4:1 and White Logo 4:1 at 680 by 170 (the title treatment alone), Show - Poster 2x3 at 2000 by 3000 (Community pattern under a Circle Crop photo and the title treatment; no station logo and no description line, Media Manager supplies both), Show - Mezzanine 16x9 at 1920 by 1080 (photo and title treatment, same rule), Background at 3840 by 2160 (photography with the left 45 percent kept clear, no text), plus the spec sheet with the station's sizes, file naming and rules. Guides and proofing backdrops are tweaks that default off, so a board exports as-is. Added 2026-09-17.

The legacy folders under `templates/` remain as the record of the standalone versions; they reference the old `_ds_bundle.js` and do not run on their own. On 2026-11-06 the standalone project's `deck`, `document`, `social` and `flier` templates joined them, `on-air` was replaced by the October 2026 version with its Adobe Express export, and each folder gained a `README.txt` saying so; the October bundle those files expect is kept at `docs/standalone-2026-10-23/_ds_bundle.js`.

## 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`

**Merged 2026-11-06.** The standalone project kept being edited until 2026-10-23 after the move; that work reached this artifact on 2026-11-06, file by file: the top-right gradient tokens, `ChannelLogo`, `KidsArchitecture` and `AppPromo` with their embedded artwork (appended to the bundle; the 29 earlier components are unchanged), the `deck`, `document`, `social` and `flier` templates and the October `on-air` template, the eight guideline cards under `guidelines/`, the Passport, Create reverse, PBS KIDS paired and PBS logo files, the October SKILL.md, CLAUDE.md and readme as `assets/notes/*-2026-10-23.md`, and the project's audit, handoff and samples pages under `docs/standalone-2026-10-23/`. The standalone's revised sources for 24 existing components were not taken: this artifact's bundle and `components/src/` stay the September build, which the previews were written against.

---

## Consuming this system (generated — do not edit)

Every path named below is under `project/` in this design system: read `project/api/tokens.md`, not `api/tokens.md`.

`components/bundle.js` defines `window.NashvillePBSDesignSystem_8fe663` (32 components); `components/bundle.css` is its stylesheet; `tokens.css` is every token as a CSS variable plus `@font-face` for the fonts. `components/bundle.css` reads its variables from `tokens.css`. The bundle needs `components/lib/react.production.min.js` (`window.React`), `components/lib/react-dom.production.min.js` (`window.ReactDOM`), loaded before it. Build any UI by mounting these components; never hand-build a control or draw an icon the system provides.

- **Standalone page:** inline `tokens.css` and `components/bundle.css` in a `<style>`, then the library files and `components/bundle.js` as classic scripts (a file containing `</style`, `</script` or `<!--` breaks an inline element: write the sequence `<\/style`, `<\/script` or `\x3C!--` in your copy, or load that file by URL).
- **Design canvas:** bring `tokens.css`, `components/bundle.css` and `components/bundle.js` onto the canvas in full, as the canvas type’s design-system components reference says (a server-side copy first where it offers one); in each artboard that uses this system, right after the `support.js` line, load `tokens.css` first, then the stylesheet, then the script; skip the library files (the artboard supplies React); mount with `<x-import component-from-global-scope="NashvillePBSDesignSystem_8fe663.<Comp>" …>`.
- **Slides deck, or any surface that cannot run the bundle:** tokens and fonts — the values are on `api/tokens.md`; the deck takes `tokens.json` by file path for its colour pickers, and fonts as “Fonts” below says.

Fonts: `tokens.css` loads each font from its file, by path.

- **Design canvas:** copy `fonts/PBSSans-Light.woff2`, `fonts/PBSSans.woff2`, `fonts/PBSSans-Medium.woff2`, `fonts/PBSSans-Bold.woff2`, `fonts/PBSSans-Black.woff2`, `fonts/PBSSans-Light-It.woff2`, `fonts/PBSSans-It.woff2`, `fonts/PBSSans-Medium-It.woff2`, `fonts/PBSSans-Bold-It.woff2`, `fonts/PBSSans-Black-It.woff2`, `fonts/PBSSans-Cond.woff2`, `fonts/PBSSans-Cond-Bold.woff2`, `fonts/PBSSans-Cond-It.woff2`, `fonts/PBSSans-Cond-Bold-It.woff2`, `fonts/PBSKIDSHeadline-Regular.woff2`, `fonts/PBSKIDSHeadline-Bold.woff2`, `fonts/PBSKIDSHeadline-Cond.woff2` and `fonts/PBSKIDSHeadline-Cond-Bold.woff2` to the same paths under the canvas’s `project/ds/<folder>/` (`<folder>` is the folder you install this system under; `fonts/PBSSans-Light.woff2` lands on `project/ds/<folder>/fonts/PBSSans-Light.woff2`), in the same call that installs this system; the copy of `tokens.css` that each artboard links loads them from there. If the install’s reply leaves a font out, bring that font in as for any other page.
- **Slides deck:** for each family you use in the deck (`faces` holds at most the number of typefaces Slides’ `deck-files.md` gives), install its file with the system and name the path it lands on as that family’s `src` in `project/deck.json` `faces`, under the key in the Slides column. A deck takes a font as a file only under the rule in Slides’ `fonts.md` (no space or leading underscore in its path, for two): any other font, or one kept by id, is uploaded as `fonts.md` says.
- **Any other page:** one file per family is enough (below: the upright face nearest regular weight; bold and italic synthesize). Fetch it as the fetch column says (Artifact tool `read`, that id or path as `path`), upload it as an asset (`publish`, `file_path`, `asset:true`) and declare it with an `@font-face { font-family: "<family>"; src: url(<uploaded>) }` rule.

| family | file | fetch | CSS | Slides `faces` key |
| --- | --- | --- | --- | --- |
| PBS Sans | `fonts/PBSSans.woff2` (weight 400) | `read` the file with `project/` in front | `var(--font-sans)` | `pbs-sans` |
| PBS Sans Cond | `fonts/PBSSans-Cond.woff2` (weight 400) | `read` the file with `project/` in front | `var(--font-cond)` | `pbs-sans-cond` |
| PBS KIDS Headline | `fonts/PBSKIDSHeadline-Regular.woff2` (weight 400) | `read` the file with `project/` in front | `var(--font-kids)` | `pbs-kids-headline` |
| PBS KIDS Headline Condensed | `fonts/PBSKIDSHeadline-Cond.woff2` (weight 400) | `read` the file with `project/` in front | `var(--font-kids-cond)` | `pbs-kids-headline-condensed` |

**Read, per thing:** a component’s props, parts and examples: `api/components/<Comp>.md`; token values: `api/tokens.md`; stored assets and their paths: `api/assets/<Group>.md`. After this README, fetch the cards and fonts you need in ONE message as parallel calls — none depends on another.

**Two rules.** Before you use a thing — a component, a token group, an icon, an asset — read its card from the index below; a value you did not read from a card is a guess. `tokens.json`, `manifest.json` and `design-system.json` are sources for tools: hand them over. `components/<Comp>/README.md` and `assets/<Group>/README.md` are the long-form second read a card links to; `SKILL.md` and `artifact-type/` beside them are authoring guidance, not needed to consume the system.

## Index (generated — do not edit)

**Tokens**

- `api/tokens.md` — Every token: surface, text, fill, border, palette, type, spacing, radius, shadow, other, font-weight, line-height, letter-spacing. (28.8k)

**Icons and assets**

- `api/assets/Uploads.md` — 110 files, by asset id. (13.2k)
- `api/assets/brand.md` — 4 files, by asset id. (2.3k)
- `api/assets/channels.md` — 33 files, by asset id. (11.2k)
- `api/assets/guides.md` — 13 files, by asset id. (6.2k)
- `api/assets/logos.md` — 10 files, by asset id. (5.9k)
- `api/assets/patterns.md` — 4 files, by asset id. (2.7k)
- `api/assets/photos.md` — 10 files, by asset id. (5.4k)
- `api/assets/templates.md` — 2 files, by asset id. (6.9k)

**Components** (`api/components/<Comp>.md`, 51; 19 of them showcase pages)

- **Brand**: `Logo` — Renders the real Nashville PBS SVG lockups · `PatternPanel` — Brand geometric-pattern background for heroes, section headers, cover cards · `ChannelLogo` — Official Nashville PBS channel lockups (WORLD, Create TV, ALL ARTS, PBS KIDS) and the Nashville PBS Passport lockup, rendered from artwork embedded in the bund… · `KidsArchitecture` — Places the PBS KIDS logo beside, above or below the Nashville PBS logo the way the PBS KIDS Station Logo Architecture 1.2.1 asks: never a lockup, never replaci… · `AppPromo` — The approved PBS app promotion block from the PBS App Marketing Guide (July 2024): the national PBS logo big on top and the call to action beneath it at the lo… · `SymbolCrop` — P-head symbol cropped from the left on PBS Blue: brand-visibility bands, covers, web footers · `Channels` (showcase page) — Sub-channel lockups (WORLD, All Arts, Create) and the PBS KIDS station logo architecture
- **Core**: `Badge` — Uppercase eyebrow/status badge · `Button` — Pill-shaped action button in PBS Blue — the primary CTA across the brand ("Start Watching", "Donate") · `Card` — Base content surface: white, 12px radius, 1px border, quiet shadow · `IconButton` — Round icon-only button — player controls, toolbar actions, close buttons · `Tag` — Pill filter/category chip. active fills it PBS Blue; onRemove adds a dismiss ×
- **Editorial**: `CurvedPhotoMask` — Crops a photo with the brand's signature circular arc, used on report covers and pillar dividers, with a thin accent rim following the curve · `HighlightLabel` — Marker-highlight label for strategy sub-headers and FY callouts · `KeySidebar` — Full-bleed rotated-label sidebar for report callout panels · `NumberBadge` — Filled circle numeral badge for TOC entries and pillar timelines · `PillarDivider` — Full section-divider page for a report pillar, in the geometry of the approved Nashville PBS Strategic Plan (FY2024-26): PBS Blue header with a Teal numeral ba… · `PillarTimeline` — Vertical roman-numeral timeline listing a report's pillars, on a solid-blue background · `PageTab` — Half-circle page-number tab centered on the bottom edge, from the approved Nashville PBS report layouts · `PullQuote` — Editorial pull quote for report letters and testimonials: a PBS Blue banner, the quote in italic white, an optional square headshot in a colored frame, and an… · `RingAvatar` — Ringed headshot for board/leadership bylines · `SectionBar` — Full-bleed heading bar for report section openers
- **Forms**: `Checkbox` — Square checkbox, PBS Blue when checked. onChange receives the next boolean · `Input` — Labeled text input · `Radio` — Radio option · `Select` — Styled native  · `Switch` — Toggle switch for settings (autoplay, captions). onChange receives next boolean
- **Graphic Elements**: `CircleCrop` — Circle Crop panel: a perfect circle bleeding off three sides, holding text or imagery · `CircleHighlight` — Small circle emphasizing key text ("ALL NEW", "UP NEXT") · `Curve` — Bottom-left curved panel derived from the back of the logo Profiles · `LargeCircleHighlight` — Full-frame circle statement over wide imagery · `LineHighlight` — Line and Highlight — moves the eye through content; menus, tune-ins
- **Media**: `ShowCard` — Program/episode card for browse + continue-watching grids
- **Components**: `Badges` (showcase page) — Status badges + pill filter chips · `Brand` (showcase page) — Brand lockups + geometric pattern surfaces · `Buttons` (showcase page) — Pill CTAs: variants, sizes, states + icon buttons · `Card2` (showcase page) — Neutral surface: quiet elevation, interactive lift · `Editorial` (showcase page) — Curved photo masks, pillar dividers, pull quotes, badges: from the FY24-26 Strategic Plan · `Forms` (showcase page) — Input, Select, Checkbox, Radio, Switch · `Graphic` (showcase page) — Circle Crop · Curve · Circle Highlights · Symbol Crop · Line & Highlight (Style Guide v3) · `Media` (showcase page) — Program poster cards: badge, duration, progress
- **Broadcast Graphics**: `BroadcastEndpage` (showcase page) — Strand + series + tune-in + co-brand over Primary Gradient · `BroadcastLowerThird` (showcase page) — Toolkit 1.0 Lowerthird_Blue: full-width bar floats above bottom edge; messaging left, co-brand right · `BroadcastOverview` (showcase page) — PBS On-Air Toolkit Guide v3.1 — deliverables + approved use · `BroadcastSafeAreas` (showcase page) — Action-safe 90% of screen (5%/edge) · title-safe 80% (10%/edge) · `BroadcastSlates` (showcase page) — Station messaging: pattern rail or full Pattern, message + co-brand · `BroadcastTitleCard` (showcase page) — Accent color runs word-by-word; pick the highlighted word
- **Data Visualization**: `Charts` (showcase page) — The chart register: categorical, line, stacked, donut and stat tiles drawn from the chart tokens, with the validated palettes
- **Documents**: `Document` (showcase page) — The document register on US Letter: cover, body page with section bar, callouts and pull quote, and a data page with table and figure, drawn from the document…
- **Website**: `Index` (showcase page) — Interactive recreation: home, browse, search, show detail
- **Presentations**: `Slides` (showcase page) — The slide register at 1920 by 1080: title, section starter, content, chart and closing slides drawn from the slide type tokens
