<!-- @generated by the Design System type on every save and build — do not edit -->
# Tokens

Every token of the system, a section per group: Surfaces — 6 tokens; Text — 7 tokens; Fills and status backgrounds — 3 tokens; Borders and rings — 3 tokens; Palette ramps and brand — 34 tokens; Type styles, families, font files; Spacing — 20 tokens; Radius — 10 tokens; Shadow — 8 tokens; Other — 28 tokens; Font weight — 6 tokens; Line height — 3 tokens; Letter spacing — 3 tokens.

## Color · Surfaces

### Use

```css
/* in a page’s CSS: the token’s name, with its value from the same row of the table below as the fallback, so the page draws whether or not it links tokens.css */
color: var(--surface-page, #ffffff);
/* on a slide, in a chart’s options, or anywhere else var() cannot go, and in an SVG attribute such as fill, which not every browser reads var() in: the value alone */
color: #ffffff;
```

### Tokens (6)

| token | default | usage |
| --- | --- | --- |
| `--surface-page` | #ffffff | Default page background: white content canvas. |
| `--surface-card` | #ffffff | Card surface: white with 1px border and restrained shadow. |
| `--surface-subtle` | #eef0f5 | Slightly tinted surface for alternating sections, selected states, and subtle panels. |
| `--surface-sunken` | #f6f8fa | Inset/recessed surface: search fields, code blocks, and depressed UI areas. |
| `--surface-inverse` | #0a145a | Dark inverse surface: headers, footers, and dark-theme panels. Use white text on this surface. |
| `--surface-brand` | #2638c4 | Brand-colored surface: membership bands, CTA sections, brand callouts. Use white text on this surface. |

## Color · Text

### Use

```css
/* in a page’s CSS: the token’s name, with its value from the same row of the table below as the fallback, so the page draws whether or not it links tokens.css */
color: var(--text-heading, #0a145a);
/* on a slide, in a chart’s options, or anywhere else var() cannot go, and in an SVG attribute such as fill, which not every browser reads var() in: the value alone */
color: #0a145a;
```

### Tokens (7)

| token | default | usage |
| --- | --- | --- |
| `--text-heading` | #0a145a | Heading and label text color on light surfaces: h1 through h4 and prominent labels. |
| `--text-body` | #10173a | Primary body text color: paragraphs, descriptions, and all readable prose on white. |
| `--text-muted` | #6b7191 | Muted/secondary text: captions, metadata, timestamps, and supporting labels. |
| `--text-on-dark` | #ffffff | Full-opacity text on dark or brand surfaces (navy, PBS Blue, gradient). |
| `--text-on-dark-muted` | rgba(255,255,255,.72) | Muted text on dark or brand surfaces: 72% white for secondary labels on navy/PBS Blue. |
| `--text-link` | #2638c4 | Link text color on light surfaces. |

**Interaction states** (same roles, suffixed):

| token | default |
| --- | --- |
| `--text-link-hover` | #0f1e8c |

## Color · Fills and status backgrounds

### Use

```css
/* in a page’s CSS: the token’s name, with its value from the same row of the table below as the fallback, so the page draws whether or not it links tokens.css */
color: var(--accent-teal, #48d3cd);
/* on a slide, in a chart’s options, or anywhere else var() cannot go, and in an SVG attribute such as fill, which not every browser reads var() in: the value alone */
color: #48d3cd;
```

### Tokens (3)

| token | default | usage |
| --- | --- | --- |
| `--accent-teal` | #48d3cd | Component-level alias for the teal primary accent. One per layout; never body text on white. |
| `--accent-yellow` | #ffcf00 | Component-level alias for the yellow primary accent. One per layout; never body text on white. |
| `--accent-coral` | #fe704e | Component-level alias for the coral primary accent. One per layout; never body text on white. |

## Color · Borders and rings

### Use

```css
/* in a page’s CSS: the token’s name, with its value from the same row of the table below as the fallback, so the page draws whether or not it links tokens.css */
color: var(--border, #e4e6f0);
/* on a slide, in a chart’s options, or anywhere else var() cannot go, and in an SVG attribute such as fill, which not every browser reads var() in: the value alone */
color: #e4e6f0;
```

### Tokens (3)

| token | default | usage |
| --- | --- | --- |
| `--border` | #e4e6f0 | Default 1px border for cards and surface containers. |
| `--border-strong` | #c3c7d9 | Stronger 1.5px border for interactive controls (inputs, tags, secondary buttons). |
| `--border-brand` | #2638c4 | Brand-colored border: focus indicators, selected states, and brand-outlined elements. |

## Color · Palette ramps and brand

### Use

```css
/* in a page’s CSS: the token’s name, with its value from the same row of the table below as the fallback, so the page draws whether or not it links tokens.css */
color: var(--pbs-blue, #2638c4);
/* on a slide, in a chart’s options, or anywhere else var() cannot go, and in an SVG attribute such as fill, which not every browser reads var() in: the value alone */
color: #2638c4;
```

### Tokens (34)

| token | default | usage |
| --- | --- | --- |
| `--pbs-blue` | #2638c4 | PBS signature blue: primary CTAs, links, and prominent brand placement. The only color used for the P-head logo shield. |
| `--white` | #ffffff | Primary canvas color for content pages; text and icons on dark/brand surfaces. |
| `--navy-blue` | #0a145a | Darkest blue: headers, footers, covers, dark UI surfaces, and headings. Button active/pressed state. |
| `--medium-blue` | #0f1e8c | Secondary depth blue: primary button hover state, gradient midpoint, dark panel fills. |
| `--light-blue` | #486cd8 | Reclassified in v3 from accent to secondary blue: focus rings, gradient start point, UI depth. Passes WCAG AA on white as a UI color. |
| `--teal` | #48d3cd | 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. |
| `--yellow` | #ffcf00 | 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. |
| `--coral` | #fe704e | 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. |
| `--sky` | #8ddfff | 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. |
| `--honey` | #ffbd00 | 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. |
| `--peach` | #ffb699 | 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. |
| `--purple` | #4e05ac | Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents. |
| `--red` | #d6383a | Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents. |
| `--green` | #087b45 | Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents. |
| `--cloud` | #f6f8fa | Recommended neutral (PBS Brand v3): subtlest surface tint for alternating sections. Cool-only; never on-air. |
| `--fog` | #eef0f5 | Recommended neutral (PBS Brand v3): light surface background for cards and panels. Cool-only; never on-air. |
| `--slate` | #5c6e85 | Recommended neutral (PBS Brand v3): secondary text, muted UI labels, and metadata. Cool-only; never on-air. |
| `--deep-sea` | #040c41 | Recommended neutral (PBS Brand v3): near-black for very dark surfaces. Cool-only; never on-air. |
| `--midnight` | #000525 | Recommended neutral (PBS Brand v3): deepest dark, nearly black. Cool-only; never on-air. |
| `--brand-primary` | #2638c4 | Semantic alias: primary interactive color. Maps to PBS Blue. Use for buttons, links, and primary interactive elements. |
| `--brand-primary-hover` | #0f1e8c | Semantic alias: hover state for primary buttons and interactive elements. |
| `--brand-primary-active` | #0a145a | Semantic alias: active/pressed state for primary buttons and interactive elements. |
| `--brand-on-primary` | #ffffff | Semantic alias: text and icon color on primary brand surfaces (PBS Blue, gradient backgrounds). |
| `--focus-ring` | #486cd8 | 3px focus ring color for keyboard navigation. WCAG AA compliant. Applied as box-shadow, not outline. |

| ramp | step and value (default) |
| --- | --- |
| `--neutral-*` | 50 #f8f9fc, 100 #f2f3f8, 200 #e4e6f0, 300 #c3c7d9, 400 #9297b3, 500 #6b7191, 700 #3a4166, 800 #232a52, 900 #10173a, 950 #070c2e |

## Type

Set text in one of the styles below: write its values from the Styles and Families tables, or, on a page that links or inlines tokens.css, prefer its variable, where the Styles table’s CSS column gives one.

### Use

```css
/* any surface: a style’s values from the Styles and Families tables */
font: 400 5rem/1.4 "PBS Sans",Arial,-apple-system,system-ui,sans-serif;
/* a page that links or inlines tokens.css: prefer the variables, so that a change to tokens.css reaches the page */
font: var(--text-fs-display-2xl);
font-family: var(--font-sans);   /* the family alone */
```

### Styles

| style | CSS | size / line, italic, letter spacing | weight | family | usage |
| --- | --- | --- | --- | --- | --- |
| `fs-display-2xl` | `.fs-display-2xl`, `--text-fs-display-2xl` | 5rem / 1.4 | 400 | `sans` |  |
| `fs-display-xl` | `.fs-display-xl`, `--text-fs-display-xl` | 3.75rem / 1.4 | 400 | `sans` |  |
| `fs-display-lg` | `.fs-display-lg`, `--text-fs-display-lg` | 3rem / 1.4 | 400 | `sans` |  |
| `fs-display-md` | `.fs-display-md`, `--text-fs-display-md` | 2.5rem / 1.05 | 400 | `sans` | 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. |
| `fs-h1` | `.fs-h1`, `--text-fs-h1` | 2.25rem / 1.4 | 400 | `sans` |  |
| `fs-h2` | `.fs-h2`, `--text-fs-h2` | 1.75rem / 1.4 | 400 | `sans` |  |
| `fs-h3` | `.fs-h3`, `--text-fs-h3` | 1.375rem / 1.4 | 400 | `sans` |  |
| `fs-h4` | `.fs-h4`, `--text-fs-h4` | 1.125rem / 1.4 | 400 | `sans` |  |
| `fs-body-lg` | `.fs-body-lg`, `--text-fs-body-lg` | 1.125rem / 1.4 | 400 | `sans` |  |
| `fs-ui-lg` | `.fs-ui-lg`, `--text-fs-ui-lg` | 1.0625rem / 1.3 | 400 | `sans` | Large control text: Button size lg. |
| `fs-body` | `.fs-body`, `--text-fs-body` | 1rem / 1.55 | 400 | `sans` |  |
| `fs-ui` | `.fs-ui`, `--text-fs-ui` | 0.9375rem / 1.3 | 400 | `sans` | Control and card text: Button md, Input and Select text, Checkbox, Radio and Switch labels, ShowCard titles, RingAvatar names, KeySidebar points. |
| `fs-body-sm` | `.fs-body-sm`, `--text-fs-body-sm` | 0.875rem / 1.4 | 400 | `sans` |  |
| `fs-ui-sm` | `.fs-ui-sm`, `--text-fs-ui-sm` | 0.8125rem / 1.3 | 400 | `sans` | Small control text: Button sm, Tag, form field labels, ShowCard meta, PullQuote name tags, RingAvatar titles. |
| `fs-caption` | `.fs-caption`, `--text-fs-caption` | 0.75rem / 1.4 | 400 | `sans` |  |
| `fs-overline` | `.fs-overline`, `--text-fs-overline` | 0.6875rem / 1.4, letter-spacing 0.08em | 400 | `sans` |  |
| `slide-title` | `.slide-title`, `--text-slide-title` | 96px / 1.05 | 400 | `sans` | Title slide headline. Bold (fw-bold or fw-black), ls-display tracking. One line, two at most. |
| `slide-section` | `.slide-section`, `--text-slide-section` | 80px / 1.05 | 400 | `sans` | Section-starter slide title on solid Navy or Medium Blue, white. |
| `slide-h1` | `.slide-h1`, `--text-slide-h1` | 56px / 1.1 | 400 | `sans` | Content slide title. Bold, PBS Blue on white, white on blue. |
| `slide-h2` | `.slide-h2`, `--text-slide-h2` | 40px / 1.15 | 400 | `sans` | Slide subhead or the one emphasized phrase; also the chart title on a chart slide. |
| `slide-body` | `.slide-body`, `--text-slide-body` | 32px / 1.35 | 400 | `sans` | Slide body copy. Regular weight, left-aligned, at most five short lines. |
| `slide-caption` | `.slide-caption`, `--text-slide-caption` | 24px / 1.3 | 400 | `sans` | The floor. Sources, footnotes, axis labels and chart annotations. Nothing on a slide is smaller. |

### Families

| family | CSS variable | stack |
| --- | --- | --- |
| `sans` | `--font-sans` | `"PBS Sans",Arial,-apple-system,system-ui,sans-serif` |
| `cond` | `--font-cond` | `"PBS Sans Cond","PBS Sans",Arial,sans-serif` |
| `mono` | `--font-mono` | `"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace` |
| `kids` | `--font-kids` | `"PBS KIDS Headline",Arial,sans-serif` |
| `kids-cond` | `--font-kids-cond` | `"PBS KIDS Headline Condensed","PBS KIDS Headline",Arial,sans-serif` |

### Font files

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.

`tokens.css` carries the `@font-face` rules for a page that links it and names each family by the CSS variable below.

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

Every face: `fonts/PBSSans-Light.woff2` (PBS Sans, 300), `fonts/PBSSans.woff2` (PBS Sans, 400), `fonts/PBSSans-Medium.woff2` (PBS Sans, 500), `fonts/PBSSans-Bold.woff2` (PBS Sans, 700), `fonts/PBSSans-Black.woff2` (PBS Sans, 800), `fonts/PBSSans-Light-It.woff2` (PBS Sans, 300, italic), `fonts/PBSSans-It.woff2` (PBS Sans, 400, italic), `fonts/PBSSans-Medium-It.woff2` (PBS Sans, 500, italic), `fonts/PBSSans-Bold-It.woff2` (PBS Sans, 700, italic), `fonts/PBSSans-Black-It.woff2` (PBS Sans, 800, italic), `fonts/PBSSans-Cond.woff2` (PBS Sans Cond, 400), `fonts/PBSSans-Cond-Bold.woff2` (PBS Sans Cond, 700), `fonts/PBSSans-Cond-It.woff2` (PBS Sans Cond, 400, italic), `fonts/PBSSans-Cond-Bold-It.woff2` (PBS Sans Cond, 700, italic), `fonts/PBSKIDSHeadline-Regular.woff2` (PBS KIDS Headline, 400), `fonts/PBSKIDSHeadline-Bold.woff2` (PBS KIDS Headline, 700), `fonts/PBSKIDSHeadline-Cond.woff2` (PBS KIDS Headline Condensed, 400), `fonts/PBSKIDSHeadline-Cond-Bold.woff2` (PBS KIDS Headline Condensed, 700).

## Spacing

### Use

```css
/* any surface: a token’s value from the table below */
padding: 0;
/* a page that links or inlines tokens.css: prefer the token’s name, so that a change to tokens.css reaches the page */
padding: var(--space-0);
```

### Tokens (20)

| token | value | usage |
| --- | --- | --- |
| `--space-0` | 0 | Zero spacing: removes margins/padding explicitly. |
| `--space-1` | 4px | 4px (1 unit): tightest gap; icon padding, badge inner spacing, separator margins. |
| `--space-2` | 8px | 8px (2 units): compact inner padding for small components (tags, chips). |
| `--space-3` | 12px | 12px (3 units): small component padding; button vertical padding at sm size. |
| `--space-4` | 16px | 16px (4 units): standard inner padding for controls and list items. |
| `--space-5` | 20px | 20px (5 units): medium inner padding; button vertical padding at md size. |
| `--space-6` | 24px | 24px (6 units): card padding, section internal gap, column gutter (matches --gutter). |
| `--space-7` | 28px | 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. |
| `--space-8` | 32px | 32px (8 units): card gap, breathing room between related sections. |
| `--space-10` | 40px | 40px (10 units): generous section padding and major component gaps. |
| `--space-12` | 48px | 48px (12 units): large section padding; hero vertical padding. |
| `--space-16` | 64px | 64px (16 units): major section spacing; page-level vertical rhythm. |
| `--space-20` | 80px | 80px (20 units): hero and feature section vertical padding. |
| `--space-24` | 96px | 96px (24 units): largest standard section padding. |
| `--space-32` | 128px | 128px (32 units): maximum vertical spacing for page-level layout separators. |
| `--gutter` | 24px | Standard column gutter: 24px, matching space-6. Use for grid gaps and page-edge padding. |
| `--content-max` | 1200px | Maximum content width: center with auto margins. Components and page sections constrain to this width. |
| `--stack-tight` | 8px | Tight vertical stack: between closely related elements (label + input, icon + text). |
| `--stack` | 16px | Standard vertical stack: between paragraphs and sibling elements in a content flow. |
| `--stack-loose` | 32px | Loose vertical stack: between distinct sections within a page block. |

## Radius

### Use

```css
/* any surface: a token’s value from the table below (--radius-none: 0) */
/* a page that links or inlines tokens.css: prefer var(--radius-none), so that a change to tokens.css reaches the page */
```

### Tokens (10)

| token | value | usage |
| --- | --- | --- |
| `--radius-none` | 0 | No rounding: full-bleed bands, square-cornered elements, and broadcast graphics. |
| `--radius-xs` | 4px | Minimal rounding: small chips, inline badges, and tight UI elements. |
| `--radius-sm` | 8px | Small rounding: media thumbnails, small cards, and input fields. Brand standard for media. |
| `--radius-md` | 12px | Medium rounding: cards and content containers. Primary brand-standard radius. |
| `--radius-lg` | 16px | Large rounding: larger panels, dialogs, and prominent containers. |
| `--radius-xl` | 24px | Extra-large rounding: feature panels and prominent rounded containers. |
| `--radius-pill` | 999px | Full pill shape: tags, badges, and any element that should be fully rounded. |
| `--radius-button` | 999px | Buttons are always fully pill-shaped per brand rules. Use this alias for all button border-radius. |
| `--radius-card` | 12px | Semantic alias for card corners: matches radius-md. Use on card components for consistency. |
| `--radius-media` | 8px | Semantic alias for media items (show posters, thumbnails, images in cards): matches radius-sm. |

## Shadow

### Use

```css
/* any surface: a token’s value from the table below (--shadow-none: none) */
/* a page that links or inlines tokens.css: prefer var(--shadow-none), so that a change to tokens.css reaches the page */
```

### Tokens (8)

| token | value | usage |
| --- | --- | --- |
| `--shadow-none` | none | No shadow: flat default state for cards and surfaces at rest. |
| `--shadow-xs` | 0 1px 2px rgba(10,20,90,.06) | Barely-there lift: header items, sticky elements, and minimal depth cues. |
| `--shadow-sm` | 0 1px 3px rgba(10,20,90,.08),0 1px 2px rgba(10,20,90,.06) | Subtle shadow: resting card state. The default for most card components. |
| `--shadow-md` | 0 4px 12px rgba(10,20,90,.10),0 2px 4px rgba(10,20,90,.06) | Medium shadow: hover state for interactive cards; dropdowns and popovers. |
| `--shadow-lg` | 0 12px 28px rgba(10,20,90,.14),0 4px 8px rgba(10,20,90,.08) | Strong shadow: modals, drawers, and prominently elevated floating elements. |
| `--shadow-xl` | 0 24px 48px rgba(10,20,90,.18) | Maximum shadow: overlays and the highest-elevation floating elements. |
| `--shadow-focus` | 0 0 0 3px rgba(72,108,216,.45) | Focus ring shadow: 3px Light Blue ring for keyboard navigation. WCAG AA compliant. Use on interactive controls. |
| `--ring-focus` | 0 0 0 3px rgba(72,108,216,.45) | Alias for shadow-focus: same value. Prefer this alias when applying to interactive elements via CSS custom property. |

## Other

### Use

```css
/* any surface: a token’s value from the table below (--gradient-primary: linear-gradient(135deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%)) */
/* a page that links or inlines tokens.css: prefer var(--gradient-primary), so that a change to tokens.css reaches the page */
```

### Tokens (28)

| token | value | usage |
| --- | --- | --- |
| `--gradient-primary` | linear-gradient(135deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%) | 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. |
| `--gradient-secondary` | linear-gradient(135deg,#8DDFFF 0%,#486CD8 22%,#2638C4 55%,#0F1E8C 100%) | Secondary gradient: adds Sky at the start. Full-bleed backgrounds ONLY. Never with imagery, footage, or competing elements. |
| `--gradient-primary-overlay` | linear-gradient(135deg,rgba(72,108,216,.8) 0%,rgba(38,56,196,.8) 45%,rgba(15,30,140,.8) 100%) | Primary gradient at exactly 80% opacity: use over imagery and footage. Always exactly 80%, do not adjust the opacity. |
| `--gradient-primary-tr` | linear-gradient(225deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%) | 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. |
| `--gradient-primary-overlay-tr` | linear-gradient(225deg,rgba(72,108,216,.8) 0%,rgba(38,56,196,.8) 45%,rgba(15,30,140,.8) 100%) | 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. |
| `--gradient-brand` | linear-gradient(135deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%) | Alias for gradient-primary: same stops and angle. Use interchangeably; prefer gradient-primary for new work. |
| `--gradient-deep` | linear-gradient(160deg,#0F1E8C,#0A145A) | Deep dark gradient: Medium Blue → Navy at 160°. Use for cover panels, deep backgrounds, and dark surface headers. |
| `--chart-series-1` | #2638C4 | 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. |
| `--chart-series-2` | #FE704E | Categorical slot 2, Coral. Sits below 3:1 on white, so a chart using it carries visible value labels or a table view. |
| `--chart-series-3` | #087B45 | Categorical slot 3, Green (a PBS secondary accent, approved for infographics). |
| `--chart-series-4` | #486CD8 | Categorical slot 4, Light Blue. |
| `--chart-series-5` | #D6383A | Categorical slot 5, Red (secondary accent). The last slot: a sixth series folds into Other or the chart becomes small multiples. |
| `--chart-other` | #5C6E85 | The Other bucket and de-emphasized context series (Slate). Never a named series. |
| `--chart-highlight` | #FFCF00 | 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. |
| `--chart-seq-1` | #8DDFFF | Sequential ramp, lightest (Sky). Magnitude scales run Sky, Light Blue, PBS Blue, Medium Blue, Navy: one hue, light to dark, never a rainbow. |
| `--chart-seq-2` | #486CD8 | Sequential ramp step 2 (Light Blue). |
| `--chart-seq-3` | #2638C4 | Sequential ramp step 3 (PBS Blue). |
| `--chart-seq-4` | #0F1E8C | Sequential ramp step 4 (Medium Blue). |
| `--chart-seq-5` | #0A145A | Sequential ramp, darkest (Navy). |
| `--chart-div-neg` | #FE704E | Diverging scale, negative or warm pole (Coral). |
| `--chart-div-mid` | #EEF0F5 | Diverging scale midpoint: neutral Fog, never a hue. |
| `--chart-div-pos` | #2638C4 | Diverging scale, positive or cool pole (PBS Blue). |
| `--chart-status-good` | #087B45 | Status: good, on track. Always with an icon or word, never color alone. A chart showing status uses no categorical series beyond PBS Blue. |
| `--chart-status-warning` | #FFBD00 | Status: warning, watch (Honey). Always with an icon or word. |
| `--chart-status-critical` | #D6383A | Status: critical, off track (Red). Always with an icon or word. |
| `--chart-grid` | #E4E6F0 | Gridlines and axis lines, 1px, recessive (neutral-200). No vertical gridlines on bar charts. |
| `--chart-axis-text` | #3A4166 | Axis tick labels and legend text (neutral-700). Values and labels always wear text colors, never the series color. |
| `--chart-surface` | #FFFFFF | Charts live on white. On a Navy slide, one series only: Teal or Yellow fill with white labels. |

## Font weight

### Use

```css
/* any surface: a token’s value from the table below (--fw-light: 300) */
/* a page that links or inlines tokens.css: prefer var(--fw-light), so that a change to tokens.css reaches the page */
```

### Tokens (6)

| token | value | usage |
| --- | --- | --- |
| `--fw-light` | 300 | Light weight: large display text only; avoid for body or small sizes. |
| `--fw-regular` | 400 | Regular weight: standard body text and readable prose. |
| `--fw-medium` | 500 | Medium weight: labels, navigation items, and subtitles. |
| `--fw-semibold` | 600 | Semibold: between medium and bold; interactive element labels and secondary headings. |
| `--fw-bold` | 700 | Bold: headings (h1–h4) and important labels. Primary heading weight. |
| `--fw-black` | 800 | Black/extra-bold: display headings with tight negative tracking (ls-display). The heaviest PBS Sans weight. |

## Line height

### Use

```css
/* any surface: a token’s value from the table below (--lh-tight: 1.05) */
/* a page that links or inlines tokens.css: prefer var(--lh-tight), so that a change to tokens.css reaches the page */
```

### Tokens (3)

| token | value | usage |
| --- | --- | --- |
| `--lh-tight` | 1.05 | Extra-tight line height: large display type only (fs-display-xl and above). Too tight for body text. |
| `--lh-heading` | 1.15 | Heading line height: h1 through h4. Comfortable for multi-line headings without excessive spacing. |
| `--lh-snug` | 1.3 | Snug line height: tight body text, large labels, or subheadings. Full body text uses 1.55 (set directly on fs-body style). |

## Letter spacing

### Use

```css
/* any surface: a token’s value from the table below (--ls-display: -0.02em) */
/* a page that links or inlines tokens.css: prefer var(--ls-display), so that a change to tokens.css reaches the page */
```

### Tokens (3)

| token | value | usage |
| --- | --- | --- |
| `--ls-display` | -0.02em | Tight tracking for display headings: pair with fw-bold or fw-black at large sizes (fs-display-lg and above). |
| `--ls-heading` | -0.01em | Slight negative tracking for headings: h1 through h3. Reduces visual looseness at heading sizes. |
| `--ls-normal` | 0 | Normal tracking: body text and smaller sizes. Do not apply negative tracking below fs-h4. |