Token reference
Every value a theme can set. The Default column is PopCraft Dark. In theme CSS, each token is available as the
CSS variable shown, e.g. var(--pc-accent). Change one in the theme editor and the app follows:
Description
A copy of PopCraft Dark open in the theme editor. The app.bg token, the window behind every panel, is changed from near-black to a deep blue, and the canvas surround and gaps between panels change with it.
Surfaces
Backgrounds and borders, ordered from the deepest surface up.
| Token | CSS variable | Default | Used for |
|---|---|---|---|
app.bg | --pc-app-bg | #0F0F13 | Window background behind every panel. |
sunken | --pc-sunken | #0A0A0D | Wells and focused inline fields sunk below a panel. |
base | --pc-base | #131318 | Recessed areas: previews, segmented-control tracks, dialog headers. |
window | --pc-window | #0F0F13 | Floating chips and cards over the canvas. |
overlay | --pc-overlay | #0F0F13 | Popovers, menus and dialogs. |
field | --pc-field | #16161C | Compact inputs and context menus. |
panel.bg | --pc-panel-bg | #0F0F13 | Side panels, top bar and toolbars. |
raised | --pc-raised | #1B1B22 | Secondary buttons and list rows. |
raised.hover | --pc-raised-hover | #262238 | Hovered secondary buttons and rows. |
control | --pc-control | #1B1B22 | Selects, steppers, and hovered icon buttons. |
control.hover | --pc-control-hover | #2A2A36 | Hovered controls, toggles and separators. |
border | --pc-border | rgba(228,227,238,0.075) | Default hairline between regions. |
border.strong | --pc-border-strong | #322D48 | Borders around menus and cards. |
border.faint | --pc-border-faint | rgba(228,227,238,0.05) | Barely-visible separators. |
border.muted | --pc-border-muted | #262238 | Secondary buttons and chips. |
border.emph | --pc-border-emph | rgba(228,227,238,0.15) | Hovered chips and emphasised outlines. |
Text
Foreground colors for text and icons, brightest first.
| Token | CSS variable | Default | Used for |
|---|---|---|---|
fg | --pc-fg | #E4E3EE | Primary text and icons. |
fg.bright | --pc-fg-bright | #F4F3FA | Headings in dialogs. |
fg.soft | --pc-fg-soft | rgba(228,227,238,0.85) | Body text in panels and menus. |
fg.dim | --pc-fg-dim | rgba(228,227,238,0.74) | Menu items and secondary body text. |
fg.muted | --pc-fg-muted | #A6A5B8 | Labels and inactive icons. |
fg.subtle | --pc-fg-subtle | #85849A | Hints, placeholders and section captions. |
fg.disabled | --pc-fg-disabled | #585868 | Disabled controls and faint captions. |
fg.faint | --pc-fg-faint | #3E3E4C | Decorative text that should barely show. |
fg.onAccent | --pc-fg-on-accent | #0A0A0D | Text and icons on accent-colored surfaces. |
Accents
Action and status colors.
| Token | CSS variable | Default | Used for |
|---|---|---|---|
accent | --pc-accent | #A78BFA | Primary action color. |
accent.hover | --pc-accent-hover | #C4A7FF | Hovered primary action. |
focusRing | --pc-focus-ring | #A78BFA | Keyboard focus outline. |
component | --pc-component | #7DD3FC | Components and instances. |
ai | --pc-ai | #F0ABFC | AI features: sparkle icons and AI badges. |
prototype | --pc-prototype | #93C5FD | Prototype connections and interactions in panels. |
danger | --pc-danger | #FB7185 | Destructive actions and errors. |
warning | --pc-warning | #FCD34D | Warnings. |
success | --pc-success | #6EE7B7 | Success states. |
Shape
Corner radii, border width and shadows. Shadows accept any CSS box-shadow.
| Token | CSS variable | Default | Used for |
|---|---|---|---|
radius.sm | --pc-radius-sm | 4px | Small controls. |
radius.md | --pc-radius-md | 6px | Inputs, buttons, menus and segmented controls. |
radius.lg | --pc-radius-lg | 8px | Menu surfaces and cards. |
radius.xl | --pc-radius-xl | 10px | Dialogs. |
border.width | --pc-border-width | 1px | Width of panel and input borders. |
shadow.panel | --pc-shadow-panel | none | Shadow under docked panels. |
shadow.popover | --pc-shadow-popover | 0 8px 24px rgba(0,0,0,0.6) | Shadow under floating surfaces. |
shadow.button | --pc-shadow-button | none | Shadow under buttons. |
Typography
Font stacks and heading treatment. Use fonts that are installed or bundled; remote font URLs are not loaded.
| Token | CSS variable | Default | Used for |
|---|---|---|---|
font.ui | --pc-font-ui | -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable', 'Segoe UI', Inter, system-ui, sans-serif | UI text. |
font.heading | --pc-font-heading | -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI Variable', 'Segoe UI', Inter, system-ui, sans-serif | Section titles. |
font.mono | --pc-font-mono | 'Monaspace Argon', 'Geist Mono Fallback' | Code and numeric values. |
letterSpacing.heading | --pc-letter-spacing-heading | 0 | Tracking on section titles. |
textTransform.heading | --pc-text-transform-heading | none | none |
heading.stroke | --pc-heading-stroke | 0px | Outline width drawn around section titles (comic lettering); 0px for none. |
Decoration
Optional flourishes used by theme CSS, such as panel patterns and popover tilt.
| Token | CSS variable | Default | Used for |
|---|---|---|---|
panel.pattern | --pc-panel-pattern | none | background-image layered on panels (e.g. halftone). |
tilt.popover | --pc-tilt-popover | 0deg | Rotation applied to popovers. |
motion.enabled | --pc-motion-enabled | 1 | 1 to allow theme animations, 0 to turn them off (reduced-motion users never see them). |
decor.pop1 | --pc-decor-pop1 | #A78BFA | First flourish color: active-tool bursts, caption tags and halftone washes. |
decor.pop1.fg | --pc-decor-pop1-fg | #0A0A0D | Text and icons on decor.pop1 surfaces (pressed tabs and buttons, hovered menu items, the active tool). |
decor.pop2 | --pc-decor-pop2 | #F0ABFC | Second flourish color: dialog bursts, focus pops and highlight bars. |
decor.pop3 | --pc-decor-pop3 | #7DD3FC | Third flourish color: canvas-corner halftones and hover accents. |
Canvas
Editor chrome drawn on the WebGPU canvas. These must be #hex, rgb() or rgba() colors.
| Token | CSS variable | Default | Used for |
|---|---|---|---|
canvas.selection | --pc-canvas-selection | #A78BFA | Selection outline, marquee, lasso, pen and vector-edit handles. |
canvas.selection.component | --pc-canvas-selection-component | #7DD3FC | Selection outline and labels on components. |
canvas.handle.fill | --pc-canvas-handle-fill | #ffffff | Fill of resize, vector and gradient handles. |
canvas.handle.stroke | --pc-canvas-handle-stroke | #A78BFA | Outline of resize and corner-radius handles. |
canvas.handle.strokeWidth | --pc-canvas-handle-stroke-width | 1 | Handle outline thickness, as a multiple of the default hairline (1–4). |
canvas.ruler.bg | --pc-canvas-ruler-bg | #0F0F13 | Ruler background. |
canvas.ruler.tick | --pc-canvas-ruler-tick | #3E3E4C | Ruler ticks. |
canvas.ruler.label | --pc-canvas-ruler-label | #A6A5B8 | Ruler numbers. |
canvas.ruler.track | --pc-canvas-ruler-track | #7DD3FC | Selection span on the ruler, ruler guides and control points. |
canvas.guide.hover | --pc-canvas-guide-hover | #93C5FD | Hovered ruler guide. |
canvas.measure | --pc-canvas-measure | #FB7185 | Snap lines and distance measurements. |
canvas.caret | --pc-canvas-caret | #C4A7FF | Text caret, text selection, and auto-layout padding handles. |
canvas.prototype | --pc-canvas-prototype | #93C5FD | Prototype connection arrows. |
canvas.cursor.fill | --pc-canvas-cursor-fill | #0A0A0D | Inside of the arrow and hand cursors. |
canvas.cursor.outline | --pc-canvas-cursor-outline | #E4E3EE | Cursor outlines, and the lines of the crosshair, text and resize cursors. |
canvas.cursor.shadow | --pc-canvas-cursor-shadow | rgba(0,0,0,0) | Hard drop shadow under cursors; transparent for none. A visible shadow also makes cursor lines bolder. |
canvas.backdrop.dots | --pc-canvas-backdrop-dots | rgba(0,0,0,0) | Halftone dots behind the canvas content, growing toward the bottom-right corner. The alpha is the strength; transparent turns them off. |
canvas.backdrop.dotsAlt | --pc-canvas-backdrop-dots-alt | rgba(0,0,0,0) | Second halftone layer, growing toward the top-left corner. |
canvas.stage | --pc-canvas-stage | #0B0B0E | Letterbox around the frame in Stage view (the active frame alone, fitted like a video). |
canvas.cursor.move | --pc-canvas-cursor-move | #5EEAD4 | Pulsing crosshair shown while dragging selected layers. |
canvas.cursor.resize | --pc-canvas-cursor-resize | #FB7185 | Throbbing glow shown while resizing. |
canvas.cursor.rotate | --pc-canvas-cursor-rotate | #F0ABFC | Spinning dashed ring shown while rotating. |