# Full token catalogue

Values are grouped by source family to preserve current, artwork, runtime-theme and historical differences. Read [README.md](README.md) before applying a set.

## campaign

Current campaign/product design tokens. Default starting point for extending the comic visual system. Numeric measurements are px except durations (ms); type arrays are [fontSizePx, lineHeightPx].

| Path | Value | Resolved value | Unit |
| --- | --- | --- | --- |
| pcColor.surfacePage | #0E0D0C |  | sRGB hex |
| pcColor.surfaceRaised | #161514 |  | sRGB hex |
| pcColor.surfaceOverlay | #1A1816 |  | sRGB hex |
| pcColor.surfacePaper | #EFE9D8 |  | sRGB hex |
| pcColor.surfaceHeroOrange | #FFA800 |  | sRGB hex |
| pcColor.surfaceHeroOrangeDeep | #FF7A00 |  | sRGB hex |
| pcColor.surfaceHeroViolet | #9652EF |  | sRGB hex |
| pcColor.surfaceHeroVioletDeep | #6330D3 |  | sRGB hex |
| pcColor.surfacePanelViolet | #210D49 |  | sRGB hex |
| pcColor.outcomeYes | #91BB4F |  | sRGB hex |
| pcColor.outcomeYesDark | #3C8214 |  | sRGB hex |
| pcColor.outcomeNo | #EA2A46 |  | sRGB hex |
| pcColor.outcomeNoDark | #B21229 |  | sRGB hex |
| pcColor.accentHighlight | #FAF424 |  | sRGB hex |
| pcColor.accentInfo | #419FE5 |  | sRGB hex |
| pcColor.accentLime | #91BB4F |  | sRGB hex |
| pcColor.textPrimary | #EFE9D8 |  | sRGB hex |
| pcColor.textSecondary | #A1A1A1 |  | sRGB hex |
| pcColor.textTertiary | #8773AF |  | sRGB hex |
| pcColor.textOnAccent | #0B0B0B |  | sRGB hex |
| pcColor.textOnPaper | #141414 |  | sRGB hex |
| pcColor.textBrand | #FFA800 |  | sRGB hex |
| pcColor.textPositive | #91BB4F |  | sRGB hex |
| pcColor.textNegative | #EA2A46 |  | sRGB hex |
| pcColor.textNegativeSoft | #F24B61 |  | sRGB hex |
| pcColor.borderDefault | #343434 |  | sRGB hex |
| pcColor.borderHover | #4A4A4A |  | sRGB hex |
| pcColor.borderInk | #0B0B0B |  | sRGB hex |
| pcColor.accentPink | #FF8A9E |  | sRGB hex |
| pcShadow.comicXs | 2px 2px 0 #000000 |  | source value |
| pcShadow.comicSm | 3px 3px 0 #000000 |  | source value |
| pcShadow.comicMd | 4px 4px 0 #000000 |  | source value |
| pcShadow.comicLg | 5px 5px 0 #000000 |  | source value |
| pcShadow.comicXl | 8px 8px 0 #000000 |  | source value |
| pcShadow.comic2xl | 11px 11px 0 #000000 |  | source value |
| pcSpace.1.desktop | 4 |  | px |
| pcSpace.1.mobile | 4 |  | px |
| pcSpace.2.desktop | 8 |  | px |
| pcSpace.2.mobile | 8 |  | px |
| pcSpace.3.desktop | 12 |  | px |
| pcSpace.3.mobile | 12 |  | px |
| pcSpace.4.desktop | 16 |  | px |
| pcSpace.4.mobile | 12 |  | px |
| pcSpace.5.desktop | 24 |  | px |
| pcSpace.5.mobile | 16 |  | px |
| pcSpace.6.desktop | 32 |  | px |
| pcSpace.6.mobile | 24 |  | px |
| pcSpace.7.desktop | 48 |  | px |
| pcSpace.7.mobile | 32 |  | px |
| pcSpace.8.desktop | 64 |  | px |
| pcSpace.8.mobile | 40 |  | px |
| pcSpace.9.desktop | 96 |  | px |
| pcSpace.9.mobile | 56 |  | px |
| pcGap.1 | 8 |  | px |
| pcGap.2 | 16 |  | px |
| pcGap.3 | 24 |  | px |
| pcGap.4 | 32 |  | px |
| pcGap.5 | 40 |  | px |
| pcGap.6 | 68 |  | px |
| pcStroke.hairline.desktop | 1 |  | px |
| pcStroke.hairline.mobile | 1 |  | px |
| pcStroke.ink.desktop | 2 |  | px |
| pcStroke.ink.mobile | 1 |  | px |
| pcStroke.heavy.desktop | 3 |  | px |
| pcStroke.heavy.mobile | 2 |  | px |
| pcControl.sm.desktop | 36 |  | px |
| pcControl.sm.mobile | 28 |  | px |
| pcControl.md.desktop | 50 |  | px |
| pcControl.md.mobile | 40 |  | px |
| pcControl.lg.desktop | 64 |  | px |
| pcControl.lg.mobile | 48 |  | px |
| pcControl.xl.desktop | 82 |  | px |
| pcControl.xl.mobile | 60 |  | px |
| pcRadius.none | 0 |  | px |
| pcRadius.sm | 4 |  | px |
| pcRadius.md | 8 |  | px |
| pcDuration.instant | 40 |  | ms |
| pcDuration.fast | 150 |  | ms |
| pcDuration.base | 200 |  | ms |
| pcDuration.slow | 240 |  | ms |
| pcDuration.page | 320 |  | ms |
| pcDuration.hero | 620 |  | ms |
| pcEase.out | cubic-bezier(0, 0, .2, 1) |  | source value |
| pcEase.emphasized | cubic-bezier(.16, 1, .3, 1) |  | source value |
| pcEase.linear | linear |  | source value |
| pcEase.step | steps(1) |  | source value |
| pcTravelY | 12 |  | px |
| pcBand.bleed | 1857 |  | px |
| pcBand.stage | 1820 |  | px |
| pcBand.wide | 1650 |  | px |
| pcBand.pair | 1569 |  | px |
| pcBand.body | 1428 |  | px |
| pcBand.section | 1007 |  | px |
| pcBand.inline | 491 |  | px |
| pcBand.stageMobile | 412 |  | px |
| pcFrame.desktop.frame | 1920 |  | px |
| pcFrame.desktop.stage | 1820 |  | px |
| pcFrame.desktop.outerMargin | 50 |  | px |
| pcFrame.desktop.topMargin | 40 |  | px |
| pcFrame.mobile.frame | 478 |  | px |
| pcFrame.mobile.stage | 412 |  | px |
| pcFrame.mobile.outerMargin | 32 |  | px |
| pcFrame.mobile.topMargin | 18 |  | px |
| pcFontRole.display.licensed | Futura Condensed PT |  | source value |
| pcFontRole.display.fallback | Barlow Condensed |  | source value |
| pcFontRole.body.licensed | Futura PT |  | source value |
| pcFontRole.body.fallback | Inter |  | source value |
| pcFontRole.data.licensed | JetBrains Mono |  | source value |
| pcFontRole.data.fallback | ui-monospace |  | source value |
| pcCapsTracking | 0.08em |  | source value |
| pcTypeScale.desktop.displayXl | [128,163] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.displayLg | [96,122] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.displayMd | [64,81] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.rowHero | [80,80] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.headingLg | [48,61] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.headingMd | [36,46] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.headingSm | [28,36] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.body4xl | [56,56] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.body3xl | [38,38] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.body2xl | [34,34] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.bodyXl | [28,28] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.bodyLg | [24,35] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.bodyMd | [20,29] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.bodySm | [16,23] |  | [fontSize px, lineHeight px] |
| pcTypeScale.desktop.nav | [20,26] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.displayXl | [84,107] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.displayLg | [64,81] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.displayMd | [44,56] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.headingLg | [34,43] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.headingMd | [26,33] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.headingSm | [20,25] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.bodyLg | [18,26] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.bodyMd | [14,20] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.bodySm | [12,17] |  | [fontSize px, lineHeight px] |
| pcTypeScale.mobile.nav | [16,21] |  | [fontSize px, lineHeight px] |

## artwork

Fixed artwork palette, component specimen typography, hard shadows, and Foundations grid. Preserve SVG colors. These are not a replacement for semantic UI colors.

| Path | Value | Resolved value | Unit |
| --- | --- | --- | --- |
| dsArtwork.orange | #FFA800 |  | sRGB hex |
| dsArtwork.orangeDeep | #FF7A00 |  | sRGB hex |
| dsArtwork.violet | #9652EF |  | sRGB hex |
| dsArtwork.violetDeep | #6330D3 |  | sRGB hex |
| dsArtwork.violetInk | #210D49 |  | sRGB hex |
| dsArtwork.yellow | #FAF424 |  | sRGB hex |
| dsArtwork.outcomeYes | #91BB4F |  | sRGB hex |
| dsArtwork.outcomeYesDark | #3C8214 |  | sRGB hex |
| dsArtwork.outcomeNo | #EA2A46 |  | sRGB hex |
| dsArtwork.outcomeNoDark | #B21229 |  | sRGB hex |
| dsArtwork.info | #419FE5 |  | sRGB hex |
| dsArtwork.ink | #141414 |  | sRGB hex |
| dsArtwork.paper | #F0EAD9 |  | sRGB hex |
| dsArtwork.disabledFace | #A3A3A3 |  | sRGB hex |
| dsComicShadow.xs | 2px 2px 0 #000000 |  | source value |
| dsComicShadow.sm | 3px 3px 0 #000000 |  | source value |
| dsComicShadow.md | 4px 4px 0 #000000 |  | source value |
| dsComicShadow.lg | 5px 5px 0 #000000 |  | source value |
| dsComicShadow.xl | 8px 8px 0 #000000 |  | source value |
| dsComicShadow.2xl | 11px 11px 0 #000000 |  | source value |
| dsTypeScale.0.name | Display XL |  | source value |
| dsTypeScale.0.desktopPx | 128 |  | px |
| dsTypeScale.0.mobilePx | 84 |  | px |
| dsTypeScale.0.lineHeight | 1.27 |  | ratio |
| dsTypeScale.0.weight | 800 |  | source value |
| dsTypeScale.0.italic | true |  | source value |
| dsTypeScale.1.name | Display LG |  | source value |
| dsTypeScale.1.desktopPx | 96 |  | px |
| dsTypeScale.1.mobilePx | 64 |  | px |
| dsTypeScale.1.lineHeight | 1.27 |  | ratio |
| dsTypeScale.1.weight | 800 |  | source value |
| dsTypeScale.1.italic | true |  | source value |
| dsTypeScale.2.name | Display MD |  | source value |
| dsTypeScale.2.desktopPx | 64 |  | px |
| dsTypeScale.2.mobilePx | 44 |  | px |
| dsTypeScale.2.lineHeight | 1.27 |  | ratio |
| dsTypeScale.2.weight | 800 |  | source value |
| dsTypeScale.2.italic | true |  | source value |
| dsTypeScale.3.name | Row Hero |  | source value |
| dsTypeScale.3.desktopPx | 80 |  | px |
| dsTypeScale.3.mobilePx | null |  | px |
| dsTypeScale.3.lineHeight | 1 |  | ratio |
| dsTypeScale.3.weight | 800 |  | source value |
| dsTypeScale.3.italic | true |  | source value |
| dsTypeScale.4.name | Heading LG |  | source value |
| dsTypeScale.4.desktopPx | 48 |  | px |
| dsTypeScale.4.mobilePx | 34 |  | px |
| dsTypeScale.4.lineHeight | 1.27 |  | ratio |
| dsTypeScale.4.weight | 800 |  | source value |
| dsTypeScale.4.italic | true |  | source value |
| dsTypeScale.5.name | Heading MD |  | source value |
| dsTypeScale.5.desktopPx | 36 |  | px |
| dsTypeScale.5.mobilePx | 26 |  | px |
| dsTypeScale.5.lineHeight | 1.28 |  | ratio |
| dsTypeScale.5.weight | 800 |  | source value |
| dsTypeScale.5.italic | true |  | source value |
| dsTypeScale.6.name | Heading SM |  | source value |
| dsTypeScale.6.desktopPx | 28 |  | px |
| dsTypeScale.6.mobilePx | 20 |  | px |
| dsTypeScale.6.lineHeight | 1.29 |  | ratio |
| dsTypeScale.6.weight | 800 |  | source value |
| dsTypeScale.6.italic | true |  | source value |
| dsTypeScale.7.name | Body 4XL |  | source value |
| dsTypeScale.7.desktopPx | 56 |  | px |
| dsTypeScale.7.mobilePx | null |  | px |
| dsTypeScale.7.lineHeight | 1 |  | ratio |
| dsTypeScale.7.weight | 500 |  | source value |
| dsTypeScale.7.italic | true |  | source value |
| dsTypeScale.8.name | Body 3XL |  | source value |
| dsTypeScale.8.desktopPx | 38 |  | px |
| dsTypeScale.8.mobilePx | null |  | px |
| dsTypeScale.8.lineHeight | 1 |  | ratio |
| dsTypeScale.8.weight | 500 |  | source value |
| dsTypeScale.8.italic | true |  | source value |
| dsTypeScale.9.name | Body 2XL |  | source value |
| dsTypeScale.9.desktopPx | 34 |  | px |
| dsTypeScale.9.mobilePx | null |  | px |
| dsTypeScale.9.lineHeight | 1 |  | ratio |
| dsTypeScale.9.weight | 500 |  | source value |
| dsTypeScale.9.italic | true |  | source value |
| dsTypeScale.10.name | Body XL |  | source value |
| dsTypeScale.10.desktopPx | 28 |  | px |
| dsTypeScale.10.mobilePx | null |  | px |
| dsTypeScale.10.lineHeight | 1 |  | ratio |
| dsTypeScale.10.weight | 500 |  | source value |
| dsTypeScale.10.italic | true |  | source value |
| dsTypeScale.11.name | Body LG |  | source value |
| dsTypeScale.11.desktopPx | 24 |  | px |
| dsTypeScale.11.mobilePx | 18 |  | px |
| dsTypeScale.11.lineHeight | 1.46 |  | ratio |
| dsTypeScale.11.weight | 500 |  | source value |
| dsTypeScale.11.italic | true |  | source value |
| dsTypeScale.12.name | Body MD |  | source value |
| dsTypeScale.12.desktopPx | 20 |  | px |
| dsTypeScale.12.mobilePx | 14 |  | px |
| dsTypeScale.12.lineHeight | 1.45 |  | ratio |
| dsTypeScale.12.weight | 500 |  | source value |
| dsTypeScale.12.italic | true |  | source value |
| dsTypeScale.13.name | Body SM |  | source value |
| dsTypeScale.13.desktopPx | 16 |  | px |
| dsTypeScale.13.mobilePx | 12 |  | px |
| dsTypeScale.13.lineHeight | 1.44 |  | ratio |
| dsTypeScale.13.weight | 500 |  | source value |
| dsTypeScale.13.italic | true |  | source value |
| dsTypeScale.14.name | Nav |  | source value |
| dsTypeScale.14.desktopPx | 20 |  | px |
| dsTypeScale.14.mobilePx | 16 |  | px |
| dsTypeScale.14.lineHeight | 1.3 |  | ratio |
| dsTypeScale.14.weight | 600 |  | source value |
| dsTypeScale.14.italic | false |  | source value |
| dsGrid.desktop.frame | 1440 |  | px |
| dsGrid.desktop.columns | 12 |  | count |
| dsGrid.desktop.margin | 40 |  | px |
| dsGrid.desktop.gutter | 24 |  | px |
| dsGrid.mobile.frame | 480 |  | px |
| dsGrid.mobile.columns | 4 |  | count |
| dsGrid.mobile.margin | 18 |  | px |
| dsGrid.mobile.gutter | 16 |  | px |
| dsPlateLabelClassName | font-display font-extrabold italic uppercase leading-none tracking-[0.01em] |  | source value |

## rootCSS

Every custom property in the actual app root scope, with original aliases and resolved values. Includes current pc tokens and the older UI/brand layer still consumed by non-campaign chrome.

| Path | Value | Resolved value | Unit |
| --- | --- | --- | --- |
| --font-colombo | "Colombo Sans Font", var(--font-barlow) | "Colombo Sans Font", "Barlow Condensed", "Arial Narrow", Impact, sans-serif | CSS value |
| --font-futura | "Futura PT", var(--font-inter) | "Futura PT", "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif | CSS value |
| --font-futura-cond | "Futura PT Cond", var(--font-barlow) | "Futura PT Cond", "Barlow Condensed", "Arial Narrow", Impact, sans-serif | CSS value |
| --font-display | var(--font-futura-cond) | "Futura PT Cond", "Barlow Condensed", "Arial Narrow", Impact, sans-serif | CSS value |
| --font-body | var(--font-futura) | "Futura PT", "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif | CSS value |
| --font-inter | "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif | "Inter", "Segoe UI", ui-sans-serif, system-ui, sans-serif | CSS value |
| --font-barlow | "Barlow Condensed", "Arial Narrow", Impact, sans-serif | "Barlow Condensed", "Arial Narrow", Impact, sans-serif | CSS value |
| --font-mono | "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", monospace | "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", monospace | CSS value |
| --pump-orange | #FFA800 | #FFA800 | CSS value |
| --pump-orange-rgb | 255 168 0 | 255 168 0 | CSS value |
| --pump-black | #0B0B0B | #0B0B0B | CSS value |
| --pump-black-rgb | 11 11 11 | 11 11 11 | CSS value |
| --paper-white | #F0EAD9 | #F0EAD9 | CSS value |
| --paper-white-rgb | 240 234 217 | 240 234 217 | CSS value |
| --concrete-gray | #5A5A5A | #5A5A5A | CSS value |
| --concrete-gray-rgb | 90 90 90 | 90 90 90 | CSS value |
| --arcade-green | #91BB4F | #91BB4F | CSS value |
| --arcade-green-rgb | 145 187 79 | 145 187 79 | CSS value |
| --sheet-green | #C6FF00 | #C6FF00 | CSS value |
| --sheet-green-rgb | 198 255 0 | 198 255 0 | CSS value |
| --warning-orange | #FF5A1F | #FF5A1F | CSS value |
| --alert-red | #FF2E00 | #FF2E00 | CSS value |
| --arcade-blue | #0094FF | #0094FF | CSS value |
| --volt-purple | #6A2CFF | #6A2CFF | CSS value |
| --spray-pink | #FF3284 | #FF3284 | CSS value |
| --pc-surface-page | #0E0D0C | #0E0D0C | CSS value |
| --pc-surface-raised | #161514 | #161514 | CSS value |
| --pc-surface-overlay | #1A1816 | #1A1816 | CSS value |
| --pc-surface-paper | #EFE9D8 | #EFE9D8 | CSS value |
| --pc-surface-hero-orange | #FFA800 | #FFA800 | CSS value |
| --pc-surface-hero-orange-deep | #FF7A00 | #FF7A00 | CSS value |
| --pc-surface-hero-violet | #9652EF | #9652EF | CSS value |
| --pc-surface-hero-violet-deep | #6330D3 | #6330D3 | CSS value |
| --pc-surface-panel-violet | #210D49 | #210D49 | CSS value |
| --pc-outcome-yes | #91BB4F | #91BB4F | CSS value |
| --pc-outcome-yes-dark | #3C8214 | #3C8214 | CSS value |
| --pc-outcome-no | #EA2A46 | #EA2A46 | CSS value |
| --pc-outcome-no-dark | #B21229 | #B21229 | CSS value |
| --pc-accent-highlight | #FAF424 | #FAF424 | CSS value |
| --pc-accent-info | #419FE5 | #419FE5 | CSS value |
| --pc-accent-lime | var(--pc-outcome-yes) | #91BB4F | CSS value |
| --pc-accent-pink | #FF8A9E | #FF8A9E | CSS value |
| --pc-text-primary | var(--pc-surface-paper) | #EFE9D8 | CSS value |
| --pc-text-secondary | #A1A1A1 | #A1A1A1 | CSS value |
| --pc-text-tertiary | #8773AF | #8773AF | CSS value |
| --pc-text-on-accent | #0B0B0B | #0B0B0B | CSS value |
| --pc-text-on-paper | #141414 | #141414 | CSS value |
| --pc-text-brand | var(--pc-surface-hero-orange) | #FFA800 | CSS value |
| --pc-text-positive | var(--pc-outcome-yes) | #91BB4F | CSS value |
| --pc-text-negative | var(--pc-outcome-no) | #EA2A46 | CSS value |
| --pc-text-negative-soft | #F24B61 | #F24B61 | CSS value |
| --pc-border-default | #343434 | #343434 | CSS value |
| --pc-border-hover | #4A4A4A | #4A4A4A | CSS value |
| --pc-border-ink | var(--pc-text-on-accent) | #0B0B0B | CSS value |
| --pc-shadow-comic-xs | 2px 2px 0 #000000 | 2px 2px 0 #000000 | CSS value |
| --pc-shadow-comic-sm | 3px 3px 0 #000000 | 3px 3px 0 #000000 | CSS value |
| --pc-shadow-comic-md | 4px 4px 0 #000000 | 4px 4px 0 #000000 | CSS value |
| --pc-shadow-comic-lg | 5px 5px 0 #000000 | 5px 5px 0 #000000 | CSS value |
| --pc-shadow-comic-xl | 8px 8px 0 #000000 | 8px 8px 0 #000000 | CSS value |
| --pc-shadow-comic-2xl | 11px 11px 0 #000000 | 11px 11px 0 #000000 | CSS value |
| --pc-gap-1 | 8px | 8px | CSS value |
| --pc-gap-2 | 16px | 16px | CSS value |
| --pc-gap-3 | 24px | 24px | CSS value |
| --pc-gap-4 | 32px | 32px | CSS value |
| --pc-gap-5 | 40px | 40px | CSS value |
| --pc-gap-6 | 68px | 68px | CSS value |
| --pc-duration-instant | 40ms | 40ms | CSS value |
| --pc-duration-fast | 150ms | 150ms | CSS value |
| --pc-duration-base | 200ms | 200ms | CSS value |
| --pc-duration-slow | 240ms | 240ms | CSS value |
| --pc-duration-page | 320ms | 320ms | CSS value |
| --pc-duration-hero | 620ms | 620ms | CSS value |
| --pc-ease-out | cubic-bezier(0, 0, .2, 1) | cubic-bezier(0, 0, .2, 1) | CSS value |
| --pc-ease-emphasized | cubic-bezier(.16, 1, .3, 1) | cubic-bezier(.16, 1, .3, 1) | CSS value |
| --pc-ease-step | steps(1) | steps(1) | CSS value |
| --pc-travel-y | 12px | 12px | CSS value |
| --color-bg | #0A0A0A | #0A0A0A | CSS value |
| --color-bg-rgb | 10 10 10 | 10 10 10 | CSS value |
| --color-surface | #141414 | #141414 | CSS value |
| --color-surface-rgb | 20 20 20 | 20 20 20 | CSS value |
| --color-surface-raised | #1F1F1F | #1F1F1F | CSS value |
| --color-surface-raised-rgb | 31 31 31 | 31 31 31 | CSS value |
| --color-surface-overlay | #1F1F1F | #1F1F1F | CSS value |
| --color-surface-overlay-rgb | 31 31 31 | 31 31 31 | CSS value |
| --color-border | #343434 | #343434 | CSS value |
| --color-border-rgb | 52 52 52 | 52 52 52 | CSS value |
| --color-border-hover | #4A4A4A | #4A4A4A | CSS value |
| --color-border-hover-rgb | 74 74 74 | 74 74 74 | CSS value |
| --color-text-primary | #F0EAD9 | #F0EAD9 | CSS value |
| --color-text-primary-rgb | 240 234 217 | 240 234 217 | CSS value |
| --color-text-secondary | #A1A1AA | #A1A1AA | CSS value |
| --color-text-secondary-rgb | 161 161 170 | 161 161 170 | CSS value |
| --color-text-tertiary | #8A8A94 | #8A8A94 | CSS value |
| --color-text-tertiary-rgb | 138 138 148 | 138 138 148 | CSS value |
| --color-text-disabled | #8A8A94 | #8A8A94 | CSS value |
| --color-text-disabled-rgb | 138 138 148 | 138 138 148 | CSS value |
| --color-text-placeholder | #8A8A94 | #8A8A94 | CSS value |
| --color-text-placeholder-rgb | 138 138 148 | 138 138 148 | CSS value |
| --color-accent | #FFA800 | #FFA800 | CSS value |
| --color-accent-rgb | 255 168 0 | 255 168 0 | CSS value |
| --color-accent-text | #0B0B0B | #0B0B0B | CSS value |
| --color-accent-text-rgb | 11 11 11 | 11 11 11 | CSS value |
| --color-success | #91BB4F | #91BB4F | CSS value |
| --color-success-rgb | 145 187 79 | 145 187 79 | CSS value |
| --color-danger | #F24B61 | #F24B61 | CSS value |
| --color-danger-rgb | 242 75 97 | 242 75 97 | CSS value |
| --color-info | #4DB8FF | #4DB8FF | CSS value |
| --color-info-rgb | 77 184 255 | 77 184 255 | CSS value |
| --color-purple | #BBA8FF | #BBA8FF | CSS value |
| --color-purple-rgb | 187 168 255 | 187 168 255 | CSS value |
| --bg | var(--color-bg) | #0A0A0A | CSS value |
| --surface | var(--color-surface) | #141414 | CSS value |
| --surface-raised | var(--color-surface-raised) | #1F1F1F | CSS value |
| --border | var(--color-border) | #343434 | CSS value |
| --border-hover | var(--color-border-hover) | #4A4A4A | CSS value |
| --fg | var(--color-text-primary) | #F0EAD9 | CSS value |
| --sticker-white | #FFFFFF | #FFFFFF | CSS value |
| --muted | var(--color-text-secondary) | #A1A1AA | CSS value |
| --muted-rgb | var(--color-text-secondary-rgb) | 161 161 170 | CSS value |
| --dim | var(--color-text-tertiary) | #8A8A94 | CSS value |
| --dim-rgb | var(--color-text-tertiary-rgb) | 138 138 148 | CSS value |
| --subtle | var(--color-text-disabled) | #8A8A94 | CSS value |
| --subtle-rgb | var(--color-text-disabled-rgb) | 138 138 148 | CSS value |
| --glow-orange | 0 0 12px rgba(255, 168, 0, 0.4) | 0 0 12px rgba(255, 168, 0, 0.4) | CSS value |
| --glow-orange-sm | 0 0 6px rgba(255, 168, 0, 0.3) | 0 0 6px rgba(255, 168, 0, 0.3) | CSS value |
| --glow-green | 0 0 12px rgba(145, 187, 79, 0.35) | 0 0 12px rgba(145, 187, 79, 0.35) | CSS value |
| --glow-red | 0 0 12px rgba(234, 42, 70, 0.4) | 0 0 12px rgba(234, 42, 70, 0.4) | CSS value |
| --mobile-header-height | 60px | 60px | CSS value |
| --mobile-header-height-with-nav | 107px | 107px | CSS value |
| --mobile-bottom-nav-height | 61px | 61px | CSS value |
| --mobile-section-nav-height | 60px | 60px | CSS value |
| --mobile-trade-ticket-height | 158px | 158px | CSS value |

## theme

Shared theme contract. Retained separately because some brand definitions differ from the app. pumpcadeDarkTheme is a semantic subset/alias mapping of pumpcadeThemeHex.

| Path | Value | Resolved value | Unit |
| --- | --- | --- | --- |
| pumpcadeThemeHex.name | pumpcade-dark |  | source value |
| pumpcadeThemeHex.bg | #0A0A0A |  | sRGB hex |
| pumpcadeThemeHex.surface | #141414 |  | sRGB hex |
| pumpcadeThemeHex.surfaceRaised | #1F1F1F |  | sRGB hex |
| pumpcadeThemeHex.surfaceOverlay | #1F1F1F |  | sRGB hex |
| pumpcadeThemeHex.border | #343434 |  | sRGB hex |
| pumpcadeThemeHex.borderHover | #4A4A4A |  | sRGB hex |
| pumpcadeThemeHex.textPrimary | #F0EAD9 |  | sRGB hex |
| pumpcadeThemeHex.textSecondary | #A1A1AA |  | sRGB hex |
| pumpcadeThemeHex.textTertiary | #8A8A94 |  | sRGB hex |
| pumpcadeThemeHex.textDisabled | #8A8A94 |  | sRGB hex |
| pumpcadeThemeHex.textPlaceholder | #8A8A94 |  | sRGB hex |
| pumpcadeThemeHex.accent | #FFA800 |  | sRGB hex |
| pumpcadeThemeHex.accentText | #0B0B0B |  | sRGB hex |
| pumpcadeThemeHex.success | #91BB4F |  | sRGB hex |
| pumpcadeThemeHex.danger | #F24B61 |  | sRGB hex |
| pumpcadeThemeHex.info | #4DB8FF |  | sRGB hex |
| pumpcadeThemeHex.purple | #BBA8FF |  | sRGB hex |
| pumpcadeThemeHex.brandInk | #0B0B0B |  | sRGB hex |
| pumpcadeThemeHex.warningOrange | #FF5A1F |  | sRGB hex |
| pumpcadeThemeHex.alertRed | #EA2A46 |  | sRGB hex |
| pumpcadeThemeHex.arcadeBlue | #0094FF |  | sRGB hex |
| pumpcadeThemeHex.voltPurple | #6A2CFF |  | sRGB hex |
| pumpcadeThemeHex.sprayPink | #FF3284 |  | sRGB hex |
| pumpcadeThemeHex.stickerWhite | #FFFFFF |  | sRGB hex |
| pumpcadeDarkTheme.name | pumpcade-dark |  | source value |
| pumpcadeDarkTheme.bg | #0A0A0A |  | sRGB hex |
| pumpcadeDarkTheme.surface | #141414 |  | sRGB hex |
| pumpcadeDarkTheme.surfaceRaised | #1F1F1F |  | sRGB hex |
| pumpcadeDarkTheme.surfaceOverlay | #1F1F1F |  | sRGB hex |
| pumpcadeDarkTheme.border | #343434 |  | sRGB hex |
| pumpcadeDarkTheme.borderHover | #4A4A4A |  | sRGB hex |
| pumpcadeDarkTheme.textPrimary | #F0EAD9 |  | sRGB hex |
| pumpcadeDarkTheme.textSecondary | #A1A1AA |  | sRGB hex |
| pumpcadeDarkTheme.textTertiary | #8A8A94 |  | sRGB hex |
| pumpcadeDarkTheme.textDisabled | #8A8A94 |  | sRGB hex |
| pumpcadeDarkTheme.textPlaceholder | #8A8A94 |  | sRGB hex |
| pumpcadeDarkTheme.accent | #FFA800 |  | sRGB hex |
| pumpcadeDarkTheme.accentText | #0B0B0B |  | sRGB hex |
| pumpcadeDarkTheme.success | #91BB4F |  | sRGB hex |
| pumpcadeDarkTheme.danger | #F24B61 |  | sRGB hex |
| pumpcadeDarkTheme.info | #4DB8FF |  | sRGB hex |
| pumpcadeDarkTheme.purple | #BBA8FF |  | sRGB hex |
| pumpcadeDarkTheme.brandInk | #0B0B0B |  | sRGB hex |

## appTailwind

Actual apps/web Tailwind extension aliases, font stacks, radii, shadows, and fixed artwork colors. <alpha-value> is a Tailwind placeholder, not a literal CSS value.

| Path | Value | Resolved value | Unit |
| --- | --- | --- | --- |
| fontFamily.sans | ["var(--font-futura)","\"Futura PT\"","var(--font-inter)","Inter","ui-sans-serif","system-ui","sans-serif"] |  | source value |
| fontFamily.body | ["var(--font-futura)","\"Futura PT\"","var(--font-inter)","Inter","ui-sans-serif","system-ui","sans-serif"] |  | source value |
| fontFamily.display | ["var(--font-futura-cond)","\"Futura PT Cond\"","var(--font-barlow)","\"Barlow Condensed\"","\"Arial Narrow\"","Impact","sans-serif"] |  | source value |
| fontFamily.condensed | ["var(--font-futura-cond)","\"Futura PT Cond\"","var(--font-barlow)","\"Barlow Condensed\"","\"Arial Narrow\"","Impact","sans-serif"] |  | source value |
| fontFamily.futura | ["var(--font-futura)","\"Futura PT\"","var(--font-inter)","Inter","ui-sans-serif","system-ui","sans-serif"] |  | source value |
| fontFamily.barlow | ["var(--font-barlow)","\"Barlow Condensed\"","\"Arial Narrow\"","Impact","sans-serif"] |  | source value |
| fontFamily.colombo | ["var(--font-colombo)","\"Colombo Sans Font\"","var(--font-barlow)","\"Barlow Condensed\"","\"Arial Narrow\"","Impact","sans-serif"] |  | source value |
| fontFamily.mono | ["var(--font-mono)","ui-monospace","monospace"] |  | source value |
| colors.ui.bg | rgb(var(--color-bg-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.surface | rgb(var(--color-surface-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.surface-raised | rgb(var(--color-surface-raised-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.surface-overlay | rgb(var(--color-surface-overlay-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.default | rgb(var(--color-border-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.hover | rgb(var(--color-border-hover-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.primary | rgb(var(--color-text-primary-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.secondary | rgb(var(--color-text-secondary-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.tertiary | rgb(var(--color-text-tertiary-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.disabled | rgb(var(--color-text-disabled-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.placeholder | rgb(var(--color-text-placeholder-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.accent | rgb(var(--color-accent-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.accent-text | rgb(var(--color-accent-text-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.success | rgb(var(--color-success-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.danger | rgb(var(--color-danger-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.info | rgb(var(--color-info-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.purple | rgb(var(--color-purple-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pump-orange | rgb(var(--pump-orange-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-orange | rgb(var(--pump-orange-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.warning-orange | #FF5A1F |  | sRGB hex |
| colors.pumpcade-orange-dark | #FF5A1F |  | sRGB hex |
| colors.alert-red | #FF2E00 |  | sRGB hex |
| colors.arcade-blue | #0094FF |  | sRGB hex |
| colors.volt-purple | #6A2CFF |  | sRGB hex |
| colors.spray-pink | #FF3284 |  | sRGB hex |
| colors.arcade-green | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-green | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.sheet-green | rgb(var(--sheet-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ds-orange | #FFA800 |  | sRGB hex |
| colors.ds-orange-deep | #FF7A00 |  | sRGB hex |
| colors.ds-violet | #9652EF |  | sRGB hex |
| colors.ds-violet-deep | #6330D3 |  | sRGB hex |
| colors.ds-violet-ink | #210D49 |  | sRGB hex |
| colors.ds-yellow | #FAF424 |  | sRGB hex |
| colors.ds-outcome-yes | #91BB4F |  | sRGB hex |
| colors.ds-outcome-no | #EA2A46 |  | sRGB hex |
| colors.ds-info | #419FE5 |  | sRGB hex |
| colors.pumpcade-black | rgb(var(--pump-black-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-white | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.paper-white | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-fg | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.sticker-white | #FFFFFF |  | sRGB hex |
| colors.concrete-gray | rgb(var(--concrete-gray-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.fg-muted | rgb(var(--muted-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.fg-dim | rgb(var(--dim-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.fg-subtle | rgb(var(--subtle-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.black | rgb(var(--pump-black-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.white | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.300 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.400 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.500 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.600 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.800 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.900 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-primary | rgb(var(--color-bg-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-secondary | rgb(var(--color-surface-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-tertiary | rgb(var(--color-surface-raised-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-border | rgb(var(--color-border-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-border-hover | rgb(var(--color-border-hover-rgb) / &lt;alpha-value&gt;) |  | source value |
| borderRadius.terminal | 2px |  | source value |
| borderRadius.chip | 4px |  | source value |
| borderRadius.pump | 8px |  | source value |
| borderRadius.soft | 12px |  | source value |
| boxShadow.glow-orange | 0 0 12px rgba(255, 168, 0, 0.4) |  | source value |
| boxShadow.glow-orange-sm | 0 0 6px rgba(255, 168, 0, 0.3) |  | source value |
| boxShadow.glow-green | 0 0 12px rgba(145, 187, 79, 0.35) |  | source value |
| boxShadow.glow-red | 0 0 12px rgba(234, 42, 70, 0.4) |  | source value |

## sharedTailwind

Shared package preset. Preserved independently; differs from appTailwind on alert-red and omits Colombo / ds-* definitions.

| Path | Value | Resolved value | Unit |
| --- | --- | --- | --- |
| fontFamily.sans | ["var(--font-futura)","\"Futura PT\"","var(--font-inter)","Inter","ui-sans-serif","system-ui","sans-serif"] |  | source value |
| fontFamily.body | ["var(--font-futura)","\"Futura PT\"","var(--font-inter)","Inter","ui-sans-serif","system-ui","sans-serif"] |  | source value |
| fontFamily.display | ["var(--font-futura-cond)","\"Futura PT Cond\"","var(--font-barlow)","\"Barlow Condensed\"","\"Arial Narrow\"","Impact","sans-serif"] |  | source value |
| fontFamily.condensed | ["var(--font-futura-cond)","\"Futura PT Cond\"","var(--font-barlow)","\"Barlow Condensed\"","\"Arial Narrow\"","Impact","sans-serif"] |  | source value |
| fontFamily.futura | ["var(--font-futura)","\"Futura PT\"","var(--font-inter)","Inter","ui-sans-serif","system-ui","sans-serif"] |  | source value |
| fontFamily.barlow | ["var(--font-barlow)","\"Barlow Condensed\"","\"Arial Narrow\"","Impact","sans-serif"] |  | source value |
| fontFamily.mono | ["var(--font-mono)","ui-monospace","monospace"] |  | source value |
| colors.ui.bg | rgb(var(--color-bg-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.surface | rgb(var(--color-surface-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.surface-raised | rgb(var(--color-surface-raised-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.surface-overlay | rgb(var(--color-surface-overlay-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.default | rgb(var(--color-border-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.hover | rgb(var(--color-border-hover-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.primary | rgb(var(--color-text-primary-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.secondary | rgb(var(--color-text-secondary-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.tertiary | rgb(var(--color-text-tertiary-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.disabled | rgb(var(--color-text-disabled-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.placeholder | rgb(var(--color-text-placeholder-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.accent | rgb(var(--color-accent-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.accent-text | rgb(var(--color-accent-text-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.success | rgb(var(--color-success-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.danger | rgb(var(--color-danger-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.info | rgb(var(--color-info-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.ui.purple | rgb(var(--color-purple-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pump-orange | rgb(var(--pump-orange-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-orange | rgb(var(--pump-orange-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.warning-orange | #FF5A1F |  | sRGB hex |
| colors.pumpcade-orange-dark | #FF5A1F |  | sRGB hex |
| colors.alert-red | #EA2A46 |  | sRGB hex |
| colors.arcade-blue | #0094FF |  | sRGB hex |
| colors.volt-purple | #6A2CFF |  | sRGB hex |
| colors.spray-pink | #FF3284 |  | sRGB hex |
| colors.arcade-green | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-green | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.sheet-green | rgb(var(--sheet-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-black | rgb(var(--pump-black-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-white | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.paper-white | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.pumpcade-fg | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.sticker-white | #FFFFFF |  | sRGB hex |
| colors.concrete-gray | rgb(var(--concrete-gray-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.fg-muted | rgb(var(--muted-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.fg-dim | rgb(var(--dim-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.fg-subtle | rgb(var(--subtle-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.black | rgb(var(--pump-black-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.white | rgb(var(--paper-white-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.300 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.400 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.500 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.600 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.800 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.green.900 | rgb(var(--arcade-green-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-primary | rgb(var(--color-bg-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-secondary | rgb(var(--color-surface-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-tertiary | rgb(var(--color-surface-raised-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-border | rgb(var(--color-border-rgb) / &lt;alpha-value&gt;) |  | source value |
| colors.dark-border-hover | rgb(var(--color-border-hover-rgb) / &lt;alpha-value&gt;) |  | source value |
| borderRadius.terminal | 2px |  | source value |
| borderRadius.chip | 4px |  | source value |
| borderRadius.pump | 8px |  | source value |
| borderRadius.soft | 12px |  | source value |
| boxShadow.glow-orange | 0 0 12px rgba(255, 168, 0, 0.4) |  | source value |
| boxShadow.glow-orange-sm | 0 0 6px rgba(255, 168, 0, 0.3) |  | source value |
| boxShadow.glow-green | 0 0 12px rgba(145, 187, 79, 0.35) |  | source value |
| boxShadow.glow-red | 0 0 12px rgba(234, 42, 70, 0.4) |  | source value |

## brandKit

Historical brand-kit palette snapshot. Orange #FF8A00 and green #D1FF4D do not match current app #FFA800 and #91BB4F. Use for matching legacy assets, not as the current product palette.

| Path | Value | Resolved value | Unit |
| --- | --- | --- | --- |
| core.pump-orange | #FF8A00 |  | sRGB hex |
| core.pump-black | #0B0B0B |  | sRGB hex |
| core.paper-white | #F0EAD9 |  | sRGB hex |
| core.arcade-green | #D1FF4D |  | sRGB hex |
| core.sheet-green | #C6FF00 |  | sRGB hex |
| core.concrete-gray | #5A5A5A |  | sRGB hex |
| support.warning-orange | #FF5A1F |  | sRGB hex |
| support.alert-red | #FF2E00 |  | sRGB hex |
| support.arcade-blue | #0094FF |  | sRGB hex |
| support.volt-purple | #6A2CFF |  | sRGB hex |
| support.spray-pink | #FF3284 |  | sRGB hex |
| support.ink | #141414 |  | sRGB hex |
| ui.bg | #0A0A0A |  | sRGB hex |
| ui.surface | #141414 |  | sRGB hex |
| ui.surface-raised | #1F1F1F |  | sRGB hex |
| ui.border | #343434 |  | sRGB hex |
| ui.border-hover | #4A4A4A |  | sRGB hex |
| ui.fg | #F0EAD9 |  | sRGB hex |
| ui.sticker-white | #FFFFFF |  | sRGB hex |
| ui.muted | #A1A1AA |  | sRGB hex |
| ui.dim | #8A8A94 |  | sRGB hex |