# Pumpcade portable token reference

Open **index.html** in any browser for offline swatches, typography measurements, spacing, motion, and a searchable catalogue. No server, repository access, npm install, or account is required. The viewer makes no network requests. It shows installed fonts or system fallbacks, so text appearance is not pixel-identical unless the intended faces are available.

## Which set to use

- **campaign** is the current comic campaign/product baseline, exported directly from packages/tokens/src/design-tokens.ts. Prefer its semantic colors when extending the homepage, market categories, and sports visual direction.
- **artwork** contains fixed colors for decorating exported SVG art. Preserve those colors when reusing an asset. Its 1440 / 480 grid describes the Foundations specimen, whereas campaign.pcFrame describes measured 1920 / 478 artwork composition. Both are intentional source models; neither is an implicit browser breakpoint.
- **rootCSS** and **appTailwind** preserve the actual app's other theme/chrome tokens and aliases. Older values remain in use outside campaign surfaces; they are not all dead code.
- **theme** and **sharedTailwind** are the shared package contract and preset. Preserve them for reference, with the differences below visible.
- **brandKit** is historical color provenance. Do not replace current campaign values with this set just because it is named “brand kit”.

## Files and format

- tokens.json: all seven sets, descriptions, units, source paths and hashes. This is a documented, plain JSON handoff schema, **not a DTCG/W3C or Tokens Studio import**. In Figma, create collections corresponding to the source layers and map values deliberately. A tool-specific importer may require conversion.
- sets/*.json: one source family per file for convenient extraction.
- tokens.csv: 591 flat reference records with source and unit fields, including aliases and repeated values across sets. These are records, not unique Figma variables.
- css/root-variables.css: exact app root declarations, including aliases; safe to inspect or import without fetching fonts. It does not include component styles or automatically apply colors to an element.
- css/artwork.css: handoff-generated --ds-* aliases for the fixed artwork palette. These variable names are a convenience; the product consumes TypeScript constants / Tailwind classes.
- source/: original relevant token modules, full globals.css and brand palette/typography documents, unchanged. Full source globals.css is reference-only: its @tailwind directives, relative support import, and excluded font URLs need the original build context.
- provenance.json: exact source file SHA-256 hashes and repository revision, including any uncommitted changes to these source files at capture.
- validation.json: extraction checks and counts. Run ../tooling/export-tokens.mjs with Node 22.18+ to rebuild from these snapshots, or pass the path to a newer frontend-v1 checkout.
- CATALOGUE.md: all flat reference records, plus context and differences.

## Source differences to retain

| Role | Current/app source | Value | Other source | Value |
| --- | --- | --- | --- | --- |
| Paper | campaign.pcColor.surfacePaper | #EFE9D8 | artwork.dsArtwork.paper / root --paper-white | #F0EAD9 |
| Page | campaign.pcColor.surfacePage | #0E0D0C | root --color-bg / theme.bg | #0A0A0A |
| Raised surface | campaign.pcColor.surfaceRaised | #161514 | root --color-surface-raised | #1F1F1F |
| Secondary text | campaign.pcColor.textSecondary | #A1A1A1 | root --color-text-secondary | #A1A1AA |
| Info fill / readable text | campaign.pcColor.accentInfo | #419FE5 | root --color-info | #4DB8FF |
| Artwork violet / readable text | campaign.pcColor.surfaceHeroViolet | #9652EF | root --color-purple | #BBA8FF |
| Red alias drift | appTailwind.colors.alert-red / root --alert-red | #FF2E00 | sharedTailwind.colors.alert-red / theme.alertRed | #EA2A46 |
| Legacy orange | campaign.pcColor.surfaceHeroOrange | #FFA800 | brandKit.core.pump-orange | #FF8A00 |
| Legacy green | campaign.pcColor.outcomeYes | #91BB4F | brandKit.core.arcade-green | #D1FF4D |

Do not combine similarly named tokens by visual similarity. The source comments sometimes describe earlier states (for example orange near-misses that have since converged). This export follows executable values. No source disagreement was silently corrected.

## Typography and layout

- Display/chrome: Futura Condensed PT (runtime family name “Futura PT Cond”); fallback Barlow Condensed. Use uppercase/oblique display treatment.
- Body/questions/forms: Futura PT; fallback Inter. Use body typography for sentences and email addresses.
- Values: JetBrains Mono; fallback ui-monospace. Reserve for timers, prices, IDs and other numeric data.
- Wordmark: supplied asset only; never typeset a substitute.
- Restricted Futura and Colombo font binaries are excluded. The bundle includes OFL fallback font files and licences in ../fonts/. Futura licences do not transfer in this zip. See source/pumpcade-brand-kit/07-typography/TYPOGRAPHY.md for the source's licensing and acquisition guidance. Colombo Sans Font is an app-specific navigation face in appTailwind/rootCSS and has no licence evidence in this extraction; use the defined Barlow fallback unless independently cleared.
- pcTypeScale values are [font size, exact line height] in **px**. Desktop has 15 named steps; mobile has 10. Row Hero and the four large body ribbon steps are desktop-only in source; do not invent mobile values.
- dsTypeScale contains the existing specimen's per-step weight, italic flag, desktop/mobile size and rounded desktop line-height ratio. Its ratio is preserved as source data; use pcTypeScale for exact mobile line-height measurements. The specimen displays body-named steps using the display face; the general body role remains a distinct face.
- pcSpace describes intra-component padding at desktop/mobile values. pcGap describes gaps between page regions. They are separate scales.
- pcStroke, pcControl, pcRadius and layout dimensions are px; grid columns are counts. pcDuration is ms. pcEase strings are CSS timing functions; pcTravelY is px. Shadow strings are CSS box-shadow values.
- No custom Tailwind screens are declared in the exported config. Frame widths here are design reference dimensions, not an extracted responsive breakpoint system. Component-specific media queries live with their component sources.
- pcCapsTracking is 0.08em; dsPlateLabelClassName has a scoped 0.01em plate-art treatment. Keep that exception explicit. Avoid applying the artwork label class as universal text styling.

## Motion and limitations

The six current durations are 40 / 150 / 200 / 240 / 320 / 620ms. Hard shadows are 2 / 3 / 4 / 5 / 8 / 11px down-right with zero blur. Motion tokens describe the shared baseline; individual game / result effects in globals.css include additional timings and animation behaviors. Their presence is not a promise that every component follows the baseline comment “nothing springs”. Read the component/state reference when reproducing an existing animation, and provide reduced-motion behavior for new sports sequences.

This covers every exported constant in the two dedicated token modules, the shared theme objects, both Tailwind extension objects, all root CSS custom properties, and the existing brand-kit color JSON. It does not claim to enumerate every local CSS variable, literal in a component/SVG, Figma primitive, break point, or token inside an external library. No fresh Figma export was fetched for this extraction. Existing source mentions Foundations node 6011:3 in file jyJ6D2OSjCMQnHCopJN51l; that is provenance, not a newly verified Figma snapshot.

Light and event theme scopes exist only as reserved placeholders; no invented values are supplied. New memecoin/sports/stocks category tokens and football/baseball event states must be designed as v2 additions.

## Coverage

| Source set | CSV records |
| --- | --- |
| campaign | 135 |
| artwork | 119 |
| rootCSS | 132 |
| theme | 44 |
| appTailwind | 75 |
| sharedTailwind | 65 |
| brandKit | 21 |

Snapshot: 2026-09-29. Source commit: 713c16b86313069f8ebb0f26a0c946c35b4e4f99.