Design tokens
Every value the design system uses, exposed two ways: as --po-* CSS variables (works in any stylesheet) and as TypeScript exports from @pixelore/react/tokens (works in any JS / TS context).
Colour
Foreground/background pairs are designed for WCAG AA 4.5:1 contrast at the body text size. Override any token by redefining the CSS variable on :root.
bg
--po-color-bg
#0d0f1c
bgElevated
--po-color-bg-elevated
#171a2e
surface
--po-color-surface
#1f2340
fg
--po-color-fg
#f4f4f8
fgMuted
--po-color-fg-muted
#9ea1c1
border
--po-color-border
#2a2f55
primary
--po-color-primary
#ff2d6c
primaryFg
--po-color-primary-fg
#ffffff
primaryStrong
--po-color-primary-strong
#cc0d4d
secondary
--po-color-secondary
#00e5ff
secondaryFg
--po-color-secondary-fg
#0d0f1c
secondaryStrong
--po-color-secondary-strong
#00b8cc
accent
--po-color-accent
#ffd93d
accentFg
--po-color-accent-fg
#0d0f1c
success
--po-color-success
#00ff88
successFg
--po-color-success-fg
#0d0f1c
warning
--po-color-warning
#ff8c00
warningFg
--po-color-warning-fg
#0d0f1c
danger
--po-color-danger
#ff3838
dangerFg
--po-color-danger-fg
#ffffff
Typography
tokens.fontFamilies.display
--font-display
"Press Start 2P", "VT323", monospace
tokens.fontFamilies.body
--font-body
"VT323", "Press Start 2P", monospace
tokens.fontFamilies.mono
--font-mono
"VT323", ui-monospace, monospace
Font sizes
tokens.fontSizes.xs
--text-xs
12px
tokens.fontSizes.sm
--text-sm
14px
tokens.fontSizes.base
--text-base
16px
tokens.fontSizes.lg
--text-lg
20px
tokens.fontSizes.xl
--text-xl
24px
tokens.fontSizes.2xl
--text-2xl
32px
tokens.fontSizes.3xl
--text-3xl
48px
tokens.fontSizes.4xl
--text-4xl
64px
Spacing
Spacing follows Tailwind's 4-pixel base. Reference these from JS for component dimensions that match the design system grid.
tokens.spacing["1"]
4px
tokens.spacing["2"]
8px
tokens.spacing["3"]
12px
tokens.spacing["4"]
16px
tokens.spacing["5"]
20px
tokens.spacing["6"]
24px
tokens.spacing["8"]
32px
tokens.spacing["10"]
40px
tokens.spacing["12"]
48px
tokens.spacing["16"]
64px
tokens.spacing["px"]
1px
tokens.spacing["0.5"]
2px
tokens.spacing["1.5"]
6px
Shadows
Pixel shadows use solid offsets — no blur, no softness — to keep the 8-bit feel. Pair with the .po-bevel utility for the inset highlight.
pixel
4px 4px 0 0 rgba(0, 0, 0, 0.6)
pixelSm
2px 2px 0 0 rgba(0, 0, 0, 0.6)
pixelLg
6px 6px 0 0 rgba(0, 0, 0, 0.6)
inset
inset 2px 2px 0 0 rgba(255, 255, 255, 0.15), inset -2px -2px 0 0 rgba(0, 0, 0, 0.3)
glow
0 0 0 2px var(--po-color-primary), 4px 4px 0 0 var(--po-color-primary-strong)
Motion
tokens.motion.durationFast
0.08
tokens.motion.durationBase
0.12
tokens.motion.durationSlow
0.22
tokens.motion.ease
[0.32, 0.72, 0, 1]
tokens.motion.step
[0.25, 0, 0.5, 1]
How to override
/* In your global CSS, after importing @pixelore/react/styles.css */
:root {
--po-color-primary: #00d4aa; /* mint instead of hot pink */
--po-color-primary-strong: #009b7a;
--font-display: "Silkscreen", monospace;
}