--- name: nashville-pbs-design description: Brand design system for Nashville PBS (WNPT). Use whenever work is for Nashville PBS, WNPT, NPT, or PBS Middle Tennessee — on-air graphics (slates, end cards, endpages, lower thirds, title cards, promos, in-memoriam/notice cards), presentations and decks, reports and documents, fliers, social graphics, Media Manager show assets, membership/pledge/donor materials, web and app UI. Carries PBS Blue palette, PBS Sans, logo lockups, brand patterns, broadcast safe-area rules, and ready templates. user-invocable: true --- # Nashville PBS design skill You are designing for Nashville PBS (WNPT), the PBS member station for Middle Tennessee and southern Kentucky. Everything below is binding. `readme.md` beside this file is the deep reference (full PBS Style Guide v3 digest, voice, imagery, graphic elements); read it when a question is not answered here. ## Start here 0. **Where you are matters.** In Claude with the Nashville PBS design system attached (or set as the org default), use its templates and components (steps 1–3). Anywhere else (Claude.ai chat without the design system, Cowork, Claude Code), build from this skill's own files: `styles.css` + `tokens/` (tokens and @font-face), `fonts/` (PBS Sans .woff2), `assets/logos/*.svg`, `assets/channels/*.svg` (WORLD, Create, ALL ARTS, PBS KIDS), `assets/patterns/*_Pattern.svg`, `assets/brand/SymbolCrop_Digital_RGB.svg`; copy them into the project you are working in and link them relatively. `reference/readme.md` is the deep brand digest; `reference/pbs-kids-station-architecture.md` has the PBS KIDS rules. 1. **Use a template when one fits** (`templates/`, design-system projects only): `on-air` (broadcast slates, support/notice/end cards, endpage, promo, title card, lower third), `deck` (16:9 presentation), `document` (Letter report/memo), `social` (1:1, 4:5, 9:16 graphics), `flier` (print one-pager), `strategic-report`, `brand-cover`, `media-manager`. Templates already satisfy the rules below; change copy and imagery, not the system. 2. **Components** ship in `_ds_bundle.js` under `window.NashvillePBSDesignSystem_8fe663`. Logos, Symbol Crop, both brand patterns, and the four channel lockups are **embedded in the bundle** (`Logo`, `ChannelLogo`, `PatternPanel`, `SymbolCrop`, and raw URLs on `BrandAssets` / `ChannelAssets`). Never copy or link `assets/` files for these; they are not shipped to consuming projects. 3. Link `styles.css` for tokens and the self-hosted PBS Sans family. Never load Google Fonts or any other typeface. ## Hard rules (never break) - **Type:** PBS Sans only (`--font-sans`). Headlines 700–800 with tight tracking; body 400 at 1.55 line-height. Title Case for titles and labels; sentence case for body; ALL CAPS only for short tune-in or badge text. Italic = captions/quotes; Condensed = credits/fine print. No gradient, emboss, or shadow text effects. There is no 600 weight; use 700. - **Color:** PBS Blue `#2638C4` is the signature. Secondary blues: Navy `#0A145A`, Medium `#0F1E8C`, Light `#486CD8`. Primary accents Teal `#48D3CD`, Yellow `#FFCF00`, Coral `#FE704E` — **one accent per layout**, used sparingly. Accent alts (Sky/Honey/Peach) only when an accent fails contrast. Purple/Red/Green are for infographics only. Neutrals (Cloud, Fog, Slate, Deep Sea, Midnight) never on air. Use tokens, never ad-hoc hex. Text contrast ≥ 4.5:1. - **Logo:** only the four official lockups via `` (color on white/light, white on Navy/PBS Blue/pattern/gradient/photo). Never recolor, rotate, stretch, outline, or separate the P-head from the wordmark. Clear space = height of the "P". - **Channel logos:** WORLD, Create TV, ALL ARTS, PBS KIDS only via `` (`tone="white"` on dark, `black` for one-color print, PBS KIDS `reverse` on PBS Blue; Create `white` is the station reverse of the official color lockup). Four broadcast channels plus ALL ARTS (digital). 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 (TV and streaming guides): WNPT Nashville PBS, WNPT2 WORLD, WNPT3 PBS KIDS, WNPT4 Create; ALL ARTS is digital with no WNPT number. Service area: Middle Tennessee and southern Kentucky. One channel mark per graphic, beside or instead of the station lockup, same clear-space rule. - **PBS KIDS (Station Logo Architecture 1.2.1):** never shown alone and never a lockup; always paired with the Nashville PBS logo. Use the prebuilt pairs in `assets/channels/kids-paired/` (Digital = no registered mark, for screen and broadcast; Print = CMYK/white/reverse/black with the registered mark, print only) or ``. Place the PBS KIDS circle left/right/above/below the Nashville PBS logo via ``; never replace the PBS mark inside the station logo with PBS KIDS; PBS KIDS at least as tall as the station logo; clear space at least 25% of the circle diameter; optional connector phrase ("From", "On", "A service of", "Presented by") above the station logo. Keep PBS KIDS's own green/blue; never recolor. On screen and broadcast use only the color digital-use PBS KIDS file; the white, reverse and black files carry the registered mark and are print-only. - **Passport:** "Nashville PBS Passport" on first reference; only the official Passport lockups via `` (Navy + Passport blue #5680FF on light, white on dark; horizontal or stacked). When promoting Passport with the PBS app, the Passport lockup sits beside the logo. - **The PBS app (PBS App Marketing Guide, July 2024):** the national PBS logo (`ChannelAssets.uri.pbs`, color on light / white on dark) is the graphic; never the app-store icon in layouts, in a logo + copy lockup, or embedded in text. The logo is always paired with an approved call-to-action lockup so it reads as an app: the PBS logo big on top with the call to action beneath it at the logo's width, either [GET THE FREE PBS APP] or [WATCH NOW] + "WITH THE FREE PBS APP*". CTAs in all-caps PBS Sans, lead with "the"; "app" lowercase in running copy, "App" only in Title Case headlines. Any "free" claim carries "*Local PBS station membership required to access some content". "PBS Video App" is retired. The Nashville PBS app is not launched: do not reference it. `` 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. - **Gradients:** Primary = Light Blue → PBS Blue → Medium Blue, diagonal, light source in a TOP corner (`--gradient-primary` = top-left, `--gradient-primary-tr` = top-right). Over imagery always at 80% (`--gradient-primary-overlay[-tr]`). Never build gradients from other colors. - **Patterns:** Community or Insight, blue colorway only, one pattern per piece. Never rotate, mirror, stretch, recolor, or place over photography. Text on pattern: PBS Sans 500–800, few words; add a Navy overlay (`overlay="navy50"`) when legibility needs it. - **Curve shape:** print/digital only, bottom-left only, never on broadcast. - **Shape language:** pill buttons, 8–12px radius on cards/media, flat surfaces with faint navy-tinted shadows. No glassmorphism, no heavy drop shadows, no emoji. - **Voice:** warm, plainspoken, civic. "We/our" for the station, "you/your" for viewers. Short active CTAs (Donate, Become a Member, Watch Now). No hype, no exclamation points. ## Broadcast hard rules (anything that airs) - Frame 16:9. Author at **1920×1080** and export at **2×** for the 3840×2160 UHD master (never DCI 4K 4096×2160). - **Title-safe = inner 80%** (inset 10% per edge: 192/108 px at HD). ALL text, logos, QR codes, and readable elements stay inside it. **Action-safe = inner 90%** (inset 5%). Backgrounds and color bars may bleed to the edges; the text on them may not. Ignore 4:3 center-cut. - Backgrounds must be switchable between Primary Gradient (light source top-right, 225°), brand Pattern, or Navy. Station practice: slates, support and notice cards sit on the **Insight** pattern with no overlay; endpages, promos and title cards on the top-right gradient; lower thirds over footage. - Endpages and title cards sit directly on the background — **no Curve shape, no hard shadows** (station-rejected). - Lower third (Toolkit 1.0 "Lower Third_Blue"): full-width PBS Blue bar, 20% of frame height, floating 6.5% above the bottom edge with footage visible below; messaging left with the lower lines in the accent color; co-branded white logo right; both inside title-safe. - One primary accent (Teal/Yellow/Coral) or White per graphic. Tune-in copy ALL CAPS in the accent; "TONIGHT" never takes "pm". Minimum on-air type ≈ 40 px at 1080 (3.7% of frame height); shorten copy rather than shrink below it. - Co-brand lockup at equal scale, never distorted. No secondary accents, no neutrals, no other fonts. - Before export: turn on the template's `safeGuides` tweak and confirm nothing readable crosses the red title-safe box. ## Print and digital registers - **Documents and decks:** white pages, Navy headings, PBS Blue for emphasis and CTAs, one accent for callouts. Section dividers may be solid PBS Blue or a pattern panel with white type. Body text ≥ 12 pt print / 16 px screen; deck text ≥ 24 px at 1920×1080. - **Imagery:** real, warm, natural photography; never duotoned or heavily filtered (the blue lives in the overlay). Use `image-slot` placeholders for photos; never draw illustrations or logos by hand. - **Graphic elements** (`components/graphic/`): Circle Crop bleeds exactly 3 sides; Circle Highlight ≤ 8 chars/line, one per layout; Large Circle Highlight = gradient at 80% over wide imagery; Symbol Crop ≥ 1.5:1, left-bleeding; Line & Highlight digital only, on blue, white line at 20–30%. - **Web/app UI:** `components/core` + `components/forms` + `ShowCard`; 1240 px max content width, 24 px gutters, Navy header, 4 px spacing scale. Focus ring = Light Blue. ## Never - Google Fonts, Inter, Arial as a design choice (Arial is the fallback only), or any second typeface. - Logos or patterns from local image files, recolored SVG logos, or a redrawn P-head. - More than one accent color on a surface; gradients at non-top-corner angles; text outside title-safe on air. - The Curve on broadcast; secondary accents or neutrals on broadcast; patterns combined with photos. ## QA before handing off PBS Sans everywhere · one accent · logo correct tone and untouched · contrast ≥ 4.5:1 · (on-air) safe guides checked, 2× export · (print) no RGB-only effects, CMYK pattern values from the guide p.98 if going to press.