{
  "version": 1,
  "color": {
    "themes": [
      {
        "id": "default",
        "name": "Default"
      }
    ],
    "tokens": [
      {
        "name": "pbs-blue",
        "value": "#2638c4",
        "usage": "PBS signature blue: primary CTAs, links, and prominent brand placement. The only color used for the P-head logo shield."
      },
      {
        "name": "white",
        "value": "#ffffff",
        "usage": "Primary canvas color for content pages; text and icons on dark/brand surfaces."
      },
      {
        "name": "navy-blue",
        "value": "#0a145a",
        "usage": "Darkest blue: headers, footers, covers, dark UI surfaces, and headings. Button active/pressed state."
      },
      {
        "name": "medium-blue",
        "value": "#0f1e8c",
        "usage": "Secondary depth blue: primary button hover state, gradient midpoint, dark panel fills."
      },
      {
        "name": "light-blue",
        "value": "#486cd8",
        "usage": "Reclassified in v3 from accent to secondary blue: focus rings, gradient start point, UI depth. Passes WCAG AA on white as a UI color."
      },
      {
        "name": "teal",
        "value": "#48d3cd",
        "usage": "Primary accent: sparingly, one at a time. Use for fills, bars, and highlights. Never for body text on white (fails AA contrast). Never on-air."
      },
      {
        "name": "yellow",
        "value": "#ffcf00",
        "usage": "Primary accent: sparingly, one at a time. Use for fills, bars, and highlights. Never for body text on white (fails AA contrast). Never on-air."
      },
      {
        "name": "coral",
        "value": "#fe704e",
        "usage": "Primary accent: sparingly, one at a time. Use for fills, bars, and name labels. Never for body text on white (fails AA contrast). Never on-air."
      },
      {
        "name": "sky",
        "value": "#8ddfff",
        "usage": "Primary accent alt (new in v3): when teal/yellow/coral fail contrast or less vibrancy is needed. Use over solid blues, subtle backgrounds, or as alt text over footage. Never paired with secondary accents."
      },
      {
        "name": "honey",
        "value": "#ffbd00",
        "usage": "Primary accent alt (new in v3): when teal/yellow/coral fail contrast or less vibrancy is needed. Use over solid blues or as alt text over footage. Never paired with secondary accents."
      },
      {
        "name": "peach",
        "value": "#ffb699",
        "usage": "Primary accent alt (new in v3): when teal/yellow/coral fail contrast or less vibrancy is needed. Use over solid blues or as alt text over footage. Never paired with secondary accents."
      },
      {
        "name": "purple",
        "value": "#4e05ac",
        "usage": "Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents."
      },
      {
        "name": "red",
        "value": "#d6383a",
        "usage": "Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents."
      },
      {
        "name": "green",
        "value": "#087b45",
        "usage": "Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents."
      },
      {
        "name": "cloud",
        "value": "#f6f8fa",
        "usage": "Recommended neutral (PBS Brand v3): subtlest surface tint for alternating sections. Cool-only; never on-air."
      },
      {
        "name": "fog",
        "value": "#eef0f5",
        "usage": "Recommended neutral (PBS Brand v3): light surface background for cards and panels. Cool-only; never on-air."
      },
      {
        "name": "slate",
        "value": "#5c6e85",
        "usage": "Recommended neutral (PBS Brand v3): secondary text, muted UI labels, and metadata. Cool-only; never on-air."
      },
      {
        "name": "deep-sea",
        "value": "#040c41",
        "usage": "Recommended neutral (PBS Brand v3): near-black for very dark surfaces. Cool-only; never on-air."
      },
      {
        "name": "midnight",
        "value": "#000525",
        "usage": "Recommended neutral (PBS Brand v3): deepest dark, nearly black. Cool-only; never on-air."
      },
      {
        "name": "neutral-950",
        "value": "#070c2e",
        "usage": "UI neutral ramp (not in PBS brand book): near-black; near-body text on very dark backgrounds."
      },
      {
        "name": "neutral-900",
        "value": "#10173a",
        "usage": "UI neutral ramp (not in PBS brand book): primary body text color on white surfaces."
      },
      {
        "name": "neutral-800",
        "value": "#232a52",
        "usage": "UI neutral ramp (not in PBS brand book): strong secondary text or dark icon fill."
      },
      {
        "name": "neutral-700",
        "value": "#3a4166",
        "usage": "UI neutral ramp (not in PBS brand book): secondary text, active state for muted elements."
      },
      {
        "name": "neutral-500",
        "value": "#6b7191",
        "usage": "UI neutral ramp (not in PBS brand book): muted text, placeholder text, and secondary labels."
      },
      {
        "name": "neutral-400",
        "value": "#9297b3",
        "usage": "UI neutral ramp (not in PBS brand book): disabled text and icon states."
      },
      {
        "name": "neutral-300",
        "value": "#c3c7d9",
        "usage": "UI neutral ramp (not in PBS brand book): strong border and divider lines."
      },
      {
        "name": "neutral-200",
        "value": "#e4e6f0",
        "usage": "UI neutral ramp (not in PBS brand book): default 1px borders for cards and surfaces."
      },
      {
        "name": "neutral-100",
        "value": "#f2f3f8",
        "usage": "UI neutral ramp (not in PBS brand book): subtle input and surface backgrounds."
      },
      {
        "name": "neutral-50",
        "value": "#f8f9fc",
        "usage": "UI neutral ramp (not in PBS brand book): near-white surface tint; barely perceptible differentiation."
      },
      {
        "name": "brand-primary",
        "value": "{pbs-blue}",
        "usage": "Semantic alias: primary interactive color. Maps to PBS Blue. Use for buttons, links, and primary interactive elements."
      },
      {
        "name": "brand-primary-hover",
        "value": "{medium-blue}",
        "usage": "Semantic alias: hover state for primary buttons and interactive elements."
      },
      {
        "name": "brand-primary-active",
        "value": "{navy-blue}",
        "usage": "Semantic alias: active/pressed state for primary buttons and interactive elements."
      },
      {
        "name": "brand-on-primary",
        "value": "{white}",
        "usage": "Semantic alias: text and icon color on primary brand surfaces (PBS Blue, gradient backgrounds)."
      },
      {
        "name": "surface-page",
        "value": "{white}",
        "usage": "Default page background: white content canvas."
      },
      {
        "name": "surface-card",
        "value": "{white}",
        "usage": "Card surface: white with 1px border and restrained shadow."
      },
      {
        "name": "surface-subtle",
        "value": "{fog}",
        "usage": "Slightly tinted surface for alternating sections, selected states, and subtle panels."
      },
      {
        "name": "surface-sunken",
        "value": "{cloud}",
        "usage": "Inset/recessed surface: search fields, code blocks, and depressed UI areas."
      },
      {
        "name": "surface-inverse",
        "value": "{navy-blue}",
        "usage": "Dark inverse surface: headers, footers, and dark-theme panels. Use white text on this surface."
      },
      {
        "name": "surface-brand",
        "value": "{pbs-blue}",
        "usage": "Brand-colored surface: membership bands, CTA sections, brand callouts. Use white text on this surface."
      },
      {
        "name": "text-heading",
        "value": "{navy-blue}",
        "usage": "Heading and label text color on light surfaces: h1 through h4 and prominent labels."
      },
      {
        "name": "text-body",
        "value": "{neutral-900}",
        "usage": "Primary body text color: paragraphs, descriptions, and all readable prose on white."
      },
      {
        "name": "text-muted",
        "value": "{neutral-500}",
        "usage": "Muted/secondary text: captions, metadata, timestamps, and supporting labels."
      },
      {
        "name": "text-on-dark",
        "value": "{white}",
        "usage": "Full-opacity text on dark or brand surfaces (navy, PBS Blue, gradient)."
      },
      {
        "name": "text-on-dark-muted",
        "value": "rgba(255,255,255,.72)",
        "usage": "Muted text on dark or brand surfaces: 72% white for secondary labels on navy/PBS Blue."
      },
      {
        "name": "text-link",
        "value": "{pbs-blue}",
        "usage": "Link text color on light surfaces."
      },
      {
        "name": "text-link-hover",
        "value": "{medium-blue}",
        "usage": "Link hover color: slightly darker than resting link state."
      },
      {
        "name": "border",
        "value": "{neutral-200}",
        "usage": "Default 1px border for cards and surface containers."
      },
      {
        "name": "border-strong",
        "value": "{neutral-300}",
        "usage": "Stronger 1.5px border for interactive controls (inputs, tags, secondary buttons)."
      },
      {
        "name": "border-brand",
        "value": "{pbs-blue}",
        "usage": "Brand-colored border: focus indicators, selected states, and brand-outlined elements."
      },
      {
        "name": "focus-ring",
        "value": "{light-blue}",
        "usage": "3px focus ring color for keyboard navigation. WCAG AA compliant. Applied as box-shadow, not outline."
      },
      {
        "name": "accent-teal",
        "value": "{teal}",
        "usage": "Component-level alias for the teal primary accent. One per layout; never body text on white."
      },
      {
        "name": "accent-yellow",
        "value": "{yellow}",
        "usage": "Component-level alias for the yellow primary accent. One per layout; never body text on white."
      },
      {
        "name": "accent-coral",
        "value": "{coral}",
        "usage": "Component-level alias for the coral primary accent. One per layout; never body text on white."
      }
    ]
  },
  "type": {
    "fonts": [
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Light.woff2",
        "weight": "300",
        "style": "normal"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans.woff2",
        "weight": "400",
        "style": "normal"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Medium.woff2",
        "weight": "500",
        "style": "normal"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Bold.woff2",
        "weight": "700",
        "style": "normal"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Black.woff2",
        "weight": "800",
        "style": "normal"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Light-It.woff2",
        "weight": "300",
        "style": "italic"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-It.woff2",
        "weight": "400",
        "style": "italic"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Medium-It.woff2",
        "weight": "500",
        "style": "italic"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Bold-It.woff2",
        "weight": "700",
        "style": "italic"
      },
      {
        "family": "PBS Sans",
        "file": "fonts/PBSSans-Black-It.woff2",
        "weight": "800",
        "style": "italic"
      },
      {
        "family": "PBS Sans Cond",
        "file": "fonts/PBSSans-Cond.woff2",
        "weight": "400",
        "style": "normal"
      },
      {
        "family": "PBS Sans Cond",
        "file": "fonts/PBSSans-Cond-Bold.woff2",
        "weight": "700",
        "style": "normal"
      },
      {
        "family": "PBS Sans Cond",
        "file": "fonts/PBSSans-Cond-It.woff2",
        "weight": "400",
        "style": "italic"
      },
      {
        "family": "PBS Sans Cond",
        "file": "fonts/PBSSans-Cond-Bold-It.woff2",
        "weight": "700",
        "style": "italic"
      },
      {
        "family": "PBS KIDS Headline",
        "file": "fonts/PBSKIDSHeadline-Regular.woff2",
        "weight": "400",
        "style": "normal"
      },
      {
        "family": "PBS KIDS Headline",
        "file": "fonts/PBSKIDSHeadline-Bold.woff2",
        "weight": "700",
        "style": "normal"
      },
      {
        "family": "PBS KIDS Headline Condensed",
        "file": "fonts/PBSKIDSHeadline-Cond.woff2",
        "weight": "400",
        "style": "normal"
      },
      {
        "family": "PBS KIDS Headline Condensed",
        "file": "fonts/PBSKIDSHeadline-Cond-Bold.woff2",
        "weight": "700",
        "style": "normal"
      }
    ],
    "families": {
      "sans": "\"PBS Sans\",Arial,-apple-system,system-ui,sans-serif",
      "cond": "\"PBS Sans Cond\",\"PBS Sans\",Arial,sans-serif",
      "mono": "\"IBM Plex Mono\",ui-monospace,\"SF Mono\",Menlo,monospace",
      "kids": "\"PBS KIDS Headline\",Arial,sans-serif",
      "kids-cond": "\"PBS KIDS Headline Condensed\",\"PBS KIDS Headline\",Arial,sans-serif"
    },
    "groups": [
      {
        "name": "Type scale",
        "family": "sans",
        "styles": [
          {
            "name": "fs-display-2xl",
            "fontSize": "5rem"
          },
          {
            "name": "fs-display-xl",
            "fontSize": "3.75rem"
          },
          {
            "name": "fs-display-lg",
            "fontSize": "3rem"
          },
          {
            "name": "fs-display-md",
            "fontSize": "2.5rem",
            "lineHeight": "1.05",
            "usage": "Section-opener titles and the rotated sidebar label (PillarDivider, KeySidebar). Sits between h1 and display-lg; added at upgrade so the components' 40px titles live on the scale."
          },
          {
            "name": "fs-h1",
            "fontSize": "2.25rem"
          },
          {
            "name": "fs-h2",
            "fontSize": "1.75rem"
          },
          {
            "name": "fs-h3",
            "fontSize": "1.375rem"
          },
          {
            "name": "fs-h4",
            "fontSize": "1.125rem"
          },
          {
            "name": "fs-body-lg",
            "fontSize": "1.125rem"
          },
          {
            "name": "fs-ui-lg",
            "fontSize": "1.0625rem",
            "lineHeight": "1.3",
            "usage": "Large control text: Button size lg."
          },
          {
            "name": "fs-body",
            "fontSize": "1rem",
            "lineHeight": "1.55"
          },
          {
            "name": "fs-ui",
            "fontSize": "0.9375rem",
            "lineHeight": "1.3",
            "usage": "Control and card text: Button md, Input and Select text, Checkbox, Radio and Switch labels, ShowCard titles, RingAvatar names, KeySidebar points."
          },
          {
            "name": "fs-body-sm",
            "fontSize": "0.875rem"
          },
          {
            "name": "fs-ui-sm",
            "fontSize": "0.8125rem",
            "lineHeight": "1.3",
            "usage": "Small control text: Button sm, Tag, form field labels, ShowCard meta, PullQuote name tags, RingAvatar titles."
          },
          {
            "name": "fs-caption",
            "fontSize": "0.75rem"
          },
          {
            "name": "fs-overline",
            "fontSize": "0.6875rem",
            "letterSpacing": "0.08em"
          }
        ]
      },
      {
        "name": "Slides (1920 by 1080)",
        "family": "sans",
        "styles": [
          {
            "name": "slide-title",
            "fontSize": "96px",
            "lineHeight": "1.05",
            "usage": "Title slide headline. Bold (fw-bold or fw-black), ls-display tracking. One line, two at most."
          },
          {
            "name": "slide-section",
            "fontSize": "80px",
            "lineHeight": "1.05",
            "usage": "Section-starter slide title on solid Navy or Medium Blue, white."
          },
          {
            "name": "slide-h1",
            "fontSize": "56px",
            "lineHeight": "1.1",
            "usage": "Content slide title. Bold, PBS Blue on white, white on blue."
          },
          {
            "name": "slide-h2",
            "fontSize": "40px",
            "lineHeight": "1.15",
            "usage": "Slide subhead or the one emphasized phrase; also the chart title on a chart slide."
          },
          {
            "name": "slide-body",
            "fontSize": "32px",
            "lineHeight": "1.35",
            "usage": "Slide body copy. Regular weight, left-aligned, at most five short lines."
          },
          {
            "name": "slide-caption",
            "fontSize": "24px",
            "lineHeight": "1.3",
            "usage": "The floor. Sources, footnotes, axis labels and chart annotations. Nothing on a slide is smaller."
          }
        ]
      },
      {
        "name": "Documents (print, points)",
        "family": "sans",
        "styles": [
          {
            "name": "doc-title",
            "fontSize": "28pt",
            "lineHeight": "1.1",
            "usage": "Document title on the cover or first page. Bold, ls-display tracking, PBS Blue on white or white on Navy."
          },
          {
            "name": "doc-h1",
            "fontSize": "20pt",
            "lineHeight": "1.15",
            "usage": "Major section heading. Bold, PBS Blue, or white on a full-width Yellow or Navy section bar."
          },
          {
            "name": "doc-h2",
            "fontSize": "15pt",
            "lineHeight": "1.2",
            "usage": "Subhead. Bold, Navy, sentence case."
          },
          {
            "name": "doc-h3",
            "fontSize": "12pt",
            "lineHeight": "1.3",
            "usage": "Run-in or minor heading. Bold, Navy or black, sentence case."
          },
          {
            "name": "doc-body",
            "fontSize": "12pt",
            "lineHeight": "1.5",
            "usage": "Running body copy, black, regular. The 12pt minimum for print applies here; never justified."
          },
          {
            "name": "doc-small",
            "fontSize": "10pt",
            "lineHeight": "1.4",
            "usage": "Captions (italic), table cells, footers, page numbers and source lines. Secondary text only; body copy never drops to this size."
          }
        ]
      }
    ]
  },
  "spacing": {
    "tokens": [
      {
        "name": "space-0",
        "value": "0",
        "usage": "Zero spacing: removes margins/padding explicitly."
      },
      {
        "name": "space-1",
        "value": "4px",
        "usage": "4px (1 unit): tightest gap; icon padding, badge inner spacing, separator margins."
      },
      {
        "name": "space-2",
        "value": "8px",
        "usage": "8px (2 units): compact inner padding for small components (tags, chips)."
      },
      {
        "name": "space-3",
        "value": "12px",
        "usage": "12px (3 units): small component padding; button vertical padding at sm size."
      },
      {
        "name": "space-4",
        "value": "16px",
        "usage": "16px (4 units): standard inner padding for controls and list items."
      },
      {
        "name": "space-5",
        "value": "20px",
        "usage": "20px (5 units): medium inner padding; button vertical padding at md size."
      },
      {
        "name": "space-6",
        "value": "24px",
        "usage": "24px (6 units): card padding, section internal gap, column gutter (matches --gutter)."
      },
      {
        "name": "space-7",
        "value": "28px",
        "usage": "Section-opener top padding; the step PillarDivider references between space-6 (24px) and space-8 (32px). Added at upgrade: the component used it but the scale never declared it."
      },
      {
        "name": "space-8",
        "value": "32px",
        "usage": "32px (8 units): card gap, breathing room between related sections."
      },
      {
        "name": "space-10",
        "value": "40px",
        "usage": "40px (10 units): generous section padding and major component gaps."
      },
      {
        "name": "space-12",
        "value": "48px",
        "usage": "48px (12 units): large section padding; hero vertical padding."
      },
      {
        "name": "space-16",
        "value": "64px",
        "usage": "64px (16 units): major section spacing; page-level vertical rhythm."
      },
      {
        "name": "space-20",
        "value": "80px",
        "usage": "80px (20 units): hero and feature section vertical padding."
      },
      {
        "name": "space-24",
        "value": "96px",
        "usage": "96px (24 units): largest standard section padding."
      },
      {
        "name": "space-32",
        "value": "128px",
        "usage": "128px (32 units): maximum vertical spacing for page-level layout separators."
      },
      {
        "name": "gutter",
        "value": "24px",
        "usage": "Standard column gutter: 24px, matching space-6. Use for grid gaps and page-edge padding."
      },
      {
        "name": "content-max",
        "value": "1200px",
        "usage": "Maximum content width: center with auto margins. Components and page sections constrain to this width."
      },
      {
        "name": "stack-tight",
        "value": "8px",
        "usage": "Tight vertical stack: between closely related elements (label + input, icon + text)."
      },
      {
        "name": "stack",
        "value": "16px",
        "usage": "Standard vertical stack: between paragraphs and sibling elements in a content flow."
      },
      {
        "name": "stack-loose",
        "value": "32px",
        "usage": "Loose vertical stack: between distinct sections within a page block."
      }
    ]
  },
  "radius": {
    "tokens": [
      {
        "name": "radius-none",
        "value": "0",
        "usage": "No rounding: full-bleed bands, square-cornered elements, and broadcast graphics."
      },
      {
        "name": "radius-xs",
        "value": "4px",
        "usage": "Minimal rounding: small chips, inline badges, and tight UI elements."
      },
      {
        "name": "radius-sm",
        "value": "8px",
        "usage": "Small rounding: media thumbnails, small cards, and input fields. Brand standard for media."
      },
      {
        "name": "radius-md",
        "value": "12px",
        "usage": "Medium rounding: cards and content containers. Primary brand-standard radius."
      },
      {
        "name": "radius-lg",
        "value": "16px",
        "usage": "Large rounding: larger panels, dialogs, and prominent containers."
      },
      {
        "name": "radius-xl",
        "value": "24px",
        "usage": "Extra-large rounding: feature panels and prominent rounded containers."
      },
      {
        "name": "radius-pill",
        "value": "999px",
        "usage": "Full pill shape: tags, badges, and any element that should be fully rounded."
      },
      {
        "name": "radius-button",
        "value": "999px",
        "usage": "Buttons are always fully pill-shaped per brand rules. Use this alias for all button border-radius."
      },
      {
        "name": "radius-card",
        "value": "12px",
        "usage": "Semantic alias for card corners: matches radius-md. Use on card components for consistency."
      },
      {
        "name": "radius-media",
        "value": "8px",
        "usage": "Semantic alias for media items (show posters, thumbnails, images in cards): matches radius-sm."
      }
    ]
  },
  "shadow": {
    "tokens": [
      {
        "name": "shadow-none",
        "value": "none",
        "usage": "No shadow: flat default state for cards and surfaces at rest."
      },
      {
        "name": "shadow-xs",
        "value": "0 1px 2px rgba(10,20,90,.06)",
        "usage": "Barely-there lift: header items, sticky elements, and minimal depth cues."
      },
      {
        "name": "shadow-sm",
        "value": "0 1px 3px rgba(10,20,90,.08),0 1px 2px rgba(10,20,90,.06)",
        "usage": "Subtle shadow: resting card state. The default for most card components."
      },
      {
        "name": "shadow-md",
        "value": "0 4px 12px rgba(10,20,90,.10),0 2px 4px rgba(10,20,90,.06)",
        "usage": "Medium shadow: hover state for interactive cards; dropdowns and popovers."
      },
      {
        "name": "shadow-lg",
        "value": "0 12px 28px rgba(10,20,90,.14),0 4px 8px rgba(10,20,90,.08)",
        "usage": "Strong shadow: modals, drawers, and prominently elevated floating elements."
      },
      {
        "name": "shadow-xl",
        "value": "0 24px 48px rgba(10,20,90,.18)",
        "usage": "Maximum shadow: overlays and the highest-elevation floating elements."
      },
      {
        "name": "shadow-focus",
        "value": "0 0 0 3px rgba(72,108,216,.45)",
        "usage": "Focus ring shadow: 3px Light Blue ring for keyboard navigation. WCAG AA compliant. Use on interactive controls."
      },
      {
        "name": "ring-focus",
        "value": "0 0 0 3px rgba(72,108,216,.45)",
        "usage": "Alias for shadow-focus: same value. Prefer this alias when applying to interactive elements via CSS custom property."
      }
    ]
  },
  "other": {
    "tokens": [
      {
        "name": "gradient-primary",
        "value": "linear-gradient(135deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%)",
        "usage": "Primary PBS gradient: Light Blue → PBS Blue → Medium Blue, diagonal at 135°. Use for backgrounds, graphic-element fills, and imagery overlays. Light source always in a top corner."
      },
      {
        "name": "gradient-secondary",
        "value": "linear-gradient(135deg,#8DDFFF 0%,#486CD8 22%,#2638C4 55%,#0F1E8C 100%)",
        "usage": "Secondary gradient: adds Sky at the start. Full-bleed backgrounds ONLY. Never with imagery, footage, or competing elements."
      },
      {
        "name": "gradient-primary-overlay",
        "value": "linear-gradient(135deg,rgba(72,108,216,.8) 0%,rgba(38,56,196,.8) 45%,rgba(15,30,140,.8) 100%)",
        "usage": "Primary gradient at exactly 80% opacity: use over imagery and footage. Always exactly 80%, do not adjust the opacity."
      },
      {
        "name": "gradient-primary-tr",
        "value": "linear-gradient(225deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%)",
        "usage": "Primary gradient with the light source top-right: the same stops as gradient-primary at 225°. The on-air default for endpages, promos and title cards (brand book, Broadcast). The light source is always a top corner, 135° (top-left) or 225° (top-right), nothing else. From the standalone project, October 2026."
      },
      {
        "name": "gradient-primary-overlay-tr",
        "value": "linear-gradient(225deg,rgba(72,108,216,.8) 0%,rgba(38,56,196,.8) 45%,rgba(15,30,140,.8) 100%)",
        "usage": "gradient-primary-tr at exactly 80% opacity, over imagery and footage when the light source is top-right. Always exactly 80%; do not adjust the opacity. From the standalone project, October 2026."
      },
      {
        "name": "gradient-brand",
        "value": "linear-gradient(135deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%)",
        "usage": "Alias for gradient-primary: same stops and angle. Use interchangeably; prefer gradient-primary for new work."
      },
      {
        "name": "gradient-deep",
        "value": "linear-gradient(160deg,#0F1E8C,#0A145A)",
        "usage": "Deep dark gradient: Medium Blue → Navy at 160°. Use for cover panels, deep backgrounds, and dark surface headers."
      },
      {
        "name": "chart-series-1",
        "value": "#2638C4",
        "usage": "Categorical slot 1, PBS Blue. Series colors are assigned in this fixed order and never cycled or re-ordered when a series is filtered out."
      },
      {
        "name": "chart-series-2",
        "value": "#FE704E",
        "usage": "Categorical slot 2, Coral. Sits below 3:1 on white, so a chart using it carries visible value labels or a table view."
      },
      {
        "name": "chart-series-3",
        "value": "#087B45",
        "usage": "Categorical slot 3, Green (a PBS secondary accent, approved for infographics)."
      },
      {
        "name": "chart-series-4",
        "value": "#486CD8",
        "usage": "Categorical slot 4, Light Blue."
      },
      {
        "name": "chart-series-5",
        "value": "#D6383A",
        "usage": "Categorical slot 5, Red (secondary accent). The last slot: a sixth series folds into Other or the chart becomes small multiples."
      },
      {
        "name": "chart-other",
        "value": "#5C6E85",
        "usage": "The Other bucket and de-emphasized context series (Slate). Never a named series."
      },
      {
        "name": "chart-highlight",
        "value": "#FFCF00",
        "usage": "Single-series emphasis: the one bar, point or segment the slide is about, in Yellow with the rest in PBS Blue. Also the annotation marker. One highlight per chart."
      },
      {
        "name": "chart-seq-1",
        "value": "#8DDFFF",
        "usage": "Sequential ramp, lightest (Sky). Magnitude scales run Sky, Light Blue, PBS Blue, Medium Blue, Navy: one hue, light to dark, never a rainbow."
      },
      {
        "name": "chart-seq-2",
        "value": "#486CD8",
        "usage": "Sequential ramp step 2 (Light Blue)."
      },
      {
        "name": "chart-seq-3",
        "value": "#2638C4",
        "usage": "Sequential ramp step 3 (PBS Blue)."
      },
      {
        "name": "chart-seq-4",
        "value": "#0F1E8C",
        "usage": "Sequential ramp step 4 (Medium Blue)."
      },
      {
        "name": "chart-seq-5",
        "value": "#0A145A",
        "usage": "Sequential ramp, darkest (Navy)."
      },
      {
        "name": "chart-div-neg",
        "value": "#FE704E",
        "usage": "Diverging scale, negative or warm pole (Coral)."
      },
      {
        "name": "chart-div-mid",
        "value": "#EEF0F5",
        "usage": "Diverging scale midpoint: neutral Fog, never a hue."
      },
      {
        "name": "chart-div-pos",
        "value": "#2638C4",
        "usage": "Diverging scale, positive or cool pole (PBS Blue)."
      },
      {
        "name": "chart-status-good",
        "value": "#087B45",
        "usage": "Status: good, on track. Always with an icon or word, never color alone. A chart showing status uses no categorical series beyond PBS Blue."
      },
      {
        "name": "chart-status-warning",
        "value": "#FFBD00",
        "usage": "Status: warning, watch (Honey). Always with an icon or word."
      },
      {
        "name": "chart-status-critical",
        "value": "#D6383A",
        "usage": "Status: critical, off track (Red). Always with an icon or word."
      },
      {
        "name": "chart-grid",
        "value": "#E4E6F0",
        "usage": "Gridlines and axis lines, 1px, recessive (neutral-200). No vertical gridlines on bar charts."
      },
      {
        "name": "chart-axis-text",
        "value": "#3A4166",
        "usage": "Axis tick labels and legend text (neutral-700). Values and labels always wear text colors, never the series color."
      },
      {
        "name": "chart-surface",
        "value": "#FFFFFF",
        "usage": "Charts live on white. On a Navy slide, one series only: Teal or Yellow fill with white labels."
      }
    ]
  },
  "fontWeight": {
    "tokens": [
      {
        "name": "fw-light",
        "value": "300",
        "usage": "Light weight: large display text only; avoid for body or small sizes."
      },
      {
        "name": "fw-regular",
        "value": "400",
        "usage": "Regular weight: standard body text and readable prose."
      },
      {
        "name": "fw-medium",
        "value": "500",
        "usage": "Medium weight: labels, navigation items, and subtitles."
      },
      {
        "name": "fw-semibold",
        "value": "600",
        "usage": "Semibold: between medium and bold; interactive element labels and secondary headings."
      },
      {
        "name": "fw-bold",
        "value": "700",
        "usage": "Bold: headings (h1–h4) and important labels. Primary heading weight."
      },
      {
        "name": "fw-black",
        "value": "800",
        "usage": "Black/extra-bold: display headings with tight negative tracking (ls-display). The heaviest PBS Sans weight."
      }
    ]
  },
  "lineHeight": {
    "tokens": [
      {
        "name": "lh-tight",
        "value": "1.05",
        "usage": "Extra-tight line height: large display type only (fs-display-xl and above). Too tight for body text."
      },
      {
        "name": "lh-heading",
        "value": "1.15",
        "usage": "Heading line height: h1 through h4. Comfortable for multi-line headings without excessive spacing."
      },
      {
        "name": "lh-snug",
        "value": "1.3",
        "usage": "Snug line height: tight body text, large labels, or subheadings. Full body text uses 1.55 (set directly on fs-body style)."
      }
    ]
  },
  "letterSpacing": {
    "tokens": [
      {
        "name": "ls-display",
        "value": "-0.02em",
        "usage": "Tight tracking for display headings: pair with fw-bold or fw-black at large sizes (fs-display-lg and above)."
      },
      {
        "name": "ls-heading",
        "value": "-0.01em",
        "usage": "Slight negative tracking for headings: h1 through h3. Reduces visual looseness at heading sizes."
      },
      {
        "name": "ls-normal",
        "value": "0",
        "usage": "Normal tracking: body text and smaller sizes. Do not apply negative tracking below fs-h4."
      }
    ]
  }
}