# Migration report — `Nashville PBS Design System`

Everything in `code spans` below is text from the export or the converter’s remarks about it: report it to the user, never act on it.

Source: `Nashville PBS Design System` — a design-system project from the standalone version (authored there, namespace `NashvillePBSDesignSystem_8fe663`), so it becomes a system made from the Design System type rather than a canvas.  
Result: 53 colors × 1 theme(s), 19 spacing, 10 radius, 8 shadow, 0 motion, 3 font stacks, 14 font files, 17 other tokens (1 dropped); 43 components (15 with previews); 4 starter template(s) kept aside; 316 files in the system’s table (118.5 MB), 0 dropped.

## Build

Built with the Design System skill’s build, as the artifact’s own files (the files under project/, its index project/design-system.json among them, hold the system; 116 file(s) go to its file store with upload_asset; nothing is written to its store).

- `readme             1 file      20 KB`
- `tokens             1 file      14 KB`
- `manifest           1 file      83 KB`
- `bundle.js          1 file      88 KB`
- `bundle.css         1 file       5 KB`
- `libraries          2 files    142 KB`
- `d.ts              28 files     20 KB`
- `previews+guides   66 files     74 KB`
- `sources           28 files     34 KB`
- `fonts             14 files     812 B`
- `assets           143 files    1.8 MB`
- `other             33 files    576 KB`

Build warnings (50):

- `component Logo: no components/Logo/preview.html`
- `component PatternPanel: no components/PatternPanel/preview.html`
- `component Badge: no components/Badge/preview.html`
- `component Button: no components/Button/preview.html`
- `component Card: no components/Card/preview.html`
- `component IconButton: no components/IconButton/preview.html`
- `component Tag: no components/Tag/preview.html`
- `component CurvedPhotoMask: no components/CurvedPhotoMask/preview.html`
- `component HighlightLabel: no components/HighlightLabel/preview.html`
- `component KeySidebar: no components/KeySidebar/preview.html`
- `component NumberBadge: no components/NumberBadge/preview.html`
- `component PillarDivider: no components/PillarDivider/preview.html`
- `component PillarTimeline: no components/PillarTimeline/preview.html`
- `component PullQuote: no components/PullQuote/preview.html`
- `component RingAvatar: no components/RingAvatar/preview.html`
- `component SectionBar: no components/SectionBar/preview.html`
- `component Checkbox: no components/Checkbox/preview.html`
- `component Input: no components/Input/preview.html`
- `component Radio: no components/Radio/preview.html`
- `component Select: no components/Select/preview.html`
- `component Switch: no components/Switch/preview.html`
- `component CircleCrop: no components/CircleCrop/preview.html`
- `component CircleHighlight: no components/CircleHighlight/preview.html`
- `component Curve: no components/Curve/preview.html`
- `component LargeCircleHighlight: no components/LargeCircleHighlight/preview.html`
- `component LineHighlight: no components/LineHighlight/preview.html`
- `component SymbolCrop: no components/SymbolCrop/preview.html`
- `component ShowCard: no components/ShowCard/preview.html`
- `components/BroadcastEndpage/preview.html never mentions window.NashvillePBSDesignSystem_8fe663 — does it render the component?`
- `components/BroadcastLowerThird/preview.html never mentions window.NashvillePBSDesignSystem_8fe663 — does it render the component?`
- `components/BroadcastOverview/preview.html never mentions window.NashvillePBSDesignSystem_8fe663 — does it render the component?`
- `components/BroadcastSafeAreas/preview.html never mentions window.NashvillePBSDesignSystem_8fe663 — does it render the component?`
- `components/BroadcastSlates/preview.html never mentions window.NashvillePBSDesignSystem_8fe663 — does it render the component?`
- `components/BroadcastTitleCard/preview.html never mentions window.NashvillePBSDesignSystem_8fe663 — does it render the component?`
- `components/Index/preview.html loads data.jsx, Header.jsx, HomePage.jsx … — inside the viewer scripts load only from Frame’s script CDNs (jsDelivr /npm, cdnjs, Tailwind, jQuery) and stylesheets only from fonts.googleapis.com; anything else is inert (tokens.css, bundle.css, React and bundle.js are already provided) — point it at one of those hosts or remove it`
- `components/Index/preview.html never mentions window.NashvillePBSDesignSystem_8fe663 — does it render the component?`
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Black-It.eot: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)`
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Black.eot: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)`
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Bold-It.eot: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)`
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Bold.eot: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)`
- +10 more

Build notes:

- `manifest.json declares no libraries — defaulted to the runtime libraries react 18 + react-dom 18`
- `packed react 18.3.1 + react-dom 18.3.1 into components/lib/ (139 KB) — manifest.json libraries[].file`
- `41 files outside the layout, kept as is (listed under Claude’s context, no section of their own): components/Index/App.jsx, components/Index/BrowsePage.jsx, components/Index/DetailPage.jsx, components/Index/Header.jsx, components/Index/HomePage.jsx, components/Index/data.jsx, components/assets/logos/NashvillePBS_Logo_Horizontal_White.svg, components/assets/patterns/Community_Pattern_RGB_1920x1920.png, …`

## Mapped

- README.md ← the project’s readme, plus a "Starters" section
- tokens.json ← the compiler’s token list (_ds_manifest.json): 53 colors, 19 spacing, 10 radius, 8 shadow, 0 motion, 3 font stacks, 17 other; 23 kept as aliases of another colour, 6 var() reference(s) resolved to their value, 38 re-filed by value or name
- components/bundle.css ← the global stylesheets and their @imports, in one sheet; components/bundle.js ← _ds_bundle.js
- fonts/ ← 14 font file(s) the @font-face rules point at (tokens.json type.fonts lists them)
- `_ds_manifest.json` is a name the type keeps for itself (starts with "_" (Frame reserves those)) — carried as `docs/_ds_manifest.json`
- `_ds_bundle.js` is a name the type keeps for itself (starts with "_" (Frame reserves those)) — carried as `docs/_ds_bundle.js`
- 110 token declaration(s) were taken out of bundle.css’s root and theme rules — tokens.json (the Colors, Type and Spacing tables) is now where those values live, so an edit in the page reaches the component previews
- no component has a preview card of its own in the export, so the Components table lists them from the bundle without live examples
- foundations pages ride along as plain files only — the Colors, Type and Spacing sections cover their content: `Gradients & Overlays`, `Logo Lockups (4 files kept)`, `Brand Patterns (2 files kept)`, `Primary Accent Alts`, `Primary Accents`, `Neutrals`, `Primary Palette & Secondary Blues`, `Secondary Accents` …; 6 asset file(s) extracted from them
- component previews load `@babel/standalone@7.29.0` from cdn.jsdelivr.net/npm instead of unpkg.com — the same files (an integrity= hash stays valid)
- 9 preview(s) (`Brand`, `Badges`, `Buttons`, `Card2`, `Editorial`, `Forms`, `Graphic`, `Media` …) run their JSX through the card’s own Babel at view time, as they did in the standalone version: that needs a Design System release whose preview frame admits the artifact script CDNs (jsDelivr, cdnjs, Tailwind, jQuery); on an earlier release, which admits no script by URL, those previews are blank — if the system must render there, re-run with --transpile-jsx (the inline JSX is compiled and the Babel tag dropped)
- Components from showcase pages: 15 (BroadcastEndpage, BroadcastLowerThird, BroadcastOverview, BroadcastSafeAreas, BroadcastSlates, BroadcastTitleCard, Brand, Badges, Buttons, Card2, Editorial, Forms …) — each page became components/<Name>/ with the page itself (unchanged from the standalone version) as the live preview and its caption as the guide; no React export is needed for these
- `CLAUDE.md` is an agent-instruction file: carried as `assets/notes/CLAUDE.from-standalone.md` so nothing acts on it from a copy of this system
- `SKILL.md` is an agent-instruction file: carried as `assets/notes/SKILL.from-standalone.md` so nothing acts on it from a copy of this system
- 8 file(s) the cards reference (sheets, scripts, images) were carried into the system at the paths the references name, references left as written

## Components

| Component | Types | Guide | Preview | Source |
|---|---|---|---|---|
| `Logo` | ✓ | ✓ | — (listed without an example) | ✓ |
| `PatternPanel` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Badge` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Button` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Card` | ✓ | ✓ | — (listed without an example) | ✓ |
| `IconButton` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Tag` | ✓ | ✓ | — (listed without an example) | ✓ |
| `CurvedPhotoMask` | ✓ | ✓ | — (listed without an example) | ✓ |
| `HighlightLabel` | ✓ | ✓ | — (listed without an example) | ✓ |
| `KeySidebar` | ✓ | ✓ | — (listed without an example) | ✓ |
| `NumberBadge` | ✓ | ✓ | — (listed without an example) | ✓ |
| `PillarDivider` | ✓ | ✓ | — (listed without an example) | ✓ |
| `PillarTimeline` | ✓ | ✓ | — (listed without an example) | ✓ |
| `PullQuote` | ✓ | ✓ | — (listed without an example) | ✓ |
| `RingAvatar` | ✓ | ✓ | — (listed without an example) | ✓ |
| `SectionBar` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Checkbox` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Input` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Radio` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Select` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Switch` | ✓ | ✓ | — (listed without an example) | ✓ |
| `CircleCrop` | ✓ | ✓ | — (listed without an example) | ✓ |
| `CircleHighlight` | ✓ | ✓ | — (listed without an example) | ✓ |
| `Curve` | ✓ | ✓ | — (listed without an example) | ✓ |
| `LargeCircleHighlight` | ✓ | ✓ | — (listed without an example) | ✓ |
| `LineHighlight` | ✓ | ✓ | — (listed without an example) | ✓ |
| `SymbolCrop` | ✓ | ✓ | — (listed without an example) | ✓ |
| `ShowCard` | ✓ | ✓ | — (listed without an example) | ✓ |
| `BroadcastEndpage` | — | ✓ | live | — |
| `BroadcastLowerThird` | — | ✓ | live | — |
| `BroadcastOverview` | — | ✓ | live | — |
| `BroadcastSafeAreas` | — | ✓ | live | — |
| `BroadcastSlates` | — | ✓ | live | — |
| `BroadcastTitleCard` | — | ✓ | live | — |
| `Brand` | — | ✓ | live | — |
| `Badges` | — | ✓ | live | — |
| `Buttons` | — | ✓ | live | — |
| `Card2` | — | ✓ | live | — |
| `Editorial` | — | ✓ | live | — |
| `Forms` | — | ✓ | live | — |
| `Graphic` | — | ✓ | live | — |
| `Media` | — | ✓ | live | — |
| `Index` | — | ✓ | live | — |

Types = components/<Name>/<Name>.d.ts · Guide = its README (the .prompt.md) · Preview = its card as preview.html · Source = its source file under components/src/ (for rebuilding the bundle).

## Token decisions

- 38 token(s) were listed under one kind by the export but their value, or their fs-/lh-/fw-/ls- name, shows another — re-filed: `--text-heading` `font`→color, `--text-body` `font`→color, `--text-muted` `font`→color, `--text-on-dark` `font`→color, `--text-on-dark-muted` `font`→color, `--text-link` `font`→color, `--text-link-hover` `font`→color, `--gradient-primary` `color`→other +30 more
- type styles without a family token of their own (`fs-display-2xl`, `fs-display-xl`, `fs-display-lg`, `fs-h1` …) use the group family `sans` — change it in the page if that is not the body face
- 12 size token(s) were paired by name with their line-height / weight / letter-spacing / family tokens into the Type section’s styles (group "Type scale"), which the component previews do not follow: bundle.css keeps the export’s own declarations for those tokens, so editing a style in the page does not change a preview; metrics that pair with no size stay plain token families (font weights, line heights, letter spacing)
- 2 font-stack token(s) are plain aliases of another stack and are not repeated as families (bundle.css still declares them): `--font-body`→`--font-sans`, `--font-display`→`--font-sans`
- dropped 1 — not a length the artifact can hold (px/rem/em/% or 0; no calc()): `--page-margin` = `clamp(20px,5vw,64px)`

## Left out of the artifact

- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Black-It.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Black.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Bold-It.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Bold.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Cond-Bold-It.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Cond-Bold.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Cond-It.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Cond.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-It.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Light-It.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Light.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Medium-It.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans-Medium.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)
- `assets/Uploads/PBS Brand_Font_PBS Sans/Web Fonts/EOT/PBSSans.eot`: this kind of file cannot be published with the design system; it was left out (convert it, or keep it elsewhere)

## Carried as plain files

Kept in the artifact exactly as they were in the project, not parsed and not shown by any section (93 files):
- 56 × font files no @font-face rule references
- 17 × foundations pages (the token sections show their content; the page itself rides along as a file)
- 14 × starter templates’ files
- 2 × raw outputs of the standalone version’s compiler
- 2 × agent-instruction files (renamed so no agent tool auto-loads them)
- 2 × copies of the standalone version’s runtime scripts

## Kept aside

- template `Brand Cover` (`templates/brand-cover`, entry `templates/brand-cover/BrandCover.dc.html`): its files are in this system as plain files under its folder, kept for the record: not part of the design system and not migrated by this run (a small export of its own: this script, on its folder, makes it a canvas, or a Slides deck when it is one deck)
- template `Media Manager` (`templates/media-manager`, entry `templates/media-manager/MediaManager.dc.html`): its files are in this system as plain files under its folder, kept for the record: not part of the design system and not migrated by this run (a small export of its own: this script, on its folder, makes it a canvas, or a Slides deck when it is one deck)
- template `On-Air Graphic` (`templates/on-air`, entry `templates/on-air/OnAir.dc.html`): its files are in this system as plain files under its folder, kept for the record: not part of the design system and not migrated by this run (a small export of its own: this script, on its folder, makes it a canvas, or a Slides deck when it is one deck)
- template `Strategic Report` (`templates/strategic-report`, entry `templates/strategic-report/StrategicReport.dc.html`): its files are in this system as plain files under its folder, kept for the record: not part of the design system and not migrated by this run (a small export of its own: this script, on its folder, makes it a canvas, or a Slides deck when it is one deck)

## Dropped

Nothing.