--- 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 1. **Use a template when one fits** (`templates/`): `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.