Tokens
Design tokens
One source of truth for colour, radius, shadow, spacing, and motion. The theme ships these as CSS custom properties, so every component reads the same values.
Colour
Brand purple #825FFF is the canonical primary across every Ludo surface. Charts run on a fixed five-colour palette. Semantic hues carry their own background tints. Neutrals follow the zinc ramp. Click any swatch to copy its hex.
Brand
primary
#825FFF
--primary
pink
#F76CAF
--chart-3
yellow
#FFD059
--chart-2
green
#67E8AA
--chart-4
lilac
#C8B6FF
--chart-5
Chart
chart-1
#825FFF
--chart-1
chart-2
#FFD059
--chart-2
chart-3
#F76CAF
--chart-3
chart-4
#67E8AA
--chart-4
chart-5
#C8B6FF
--chart-5
Semantic
success
#10B981
--success
warning
#F59E0B
--warning
error
#EF4444
--error
info
#3B82F6
--info
Neutral
zinc-50
#FAFAFA
zinc-100
#F4F4F5
zinc-200
#E4E4E7
zinc-500
#71717A
zinc-900
#18181B
zinc-950
#09090B
Radius
Base radius is 0.5rem. The derived steps resolve to 4, 6, 8, and 12px.
sm
4px
md
6px
lg
8px
xl
12px
Shadow
A standard scale for elevation plus a soft set for calm panels and the hover lift. No coloured glows.
shadow-sm
table rows, inputs
shadow-md
raised cards
shadow-soft
panels at rest
shadow-hover
lift on hover
Spacing
Spacing follows the Tailwind v4 rhythm. These are the steps the kit leans on most.
Motion
Durations and easings are shared by the CSS keyframes and the framework-agnostic @ludo/motion source. Durations are Tailwind utilities, for example duration-fast.
Durations
| Token | Value | Utility |
|---|---|---|
| instant | 100ms | duration-instant |
| fast | 150ms | duration-fast |
| base | 200ms | duration-base |
| slow | 300ms | duration-slow |
| slower | 500ms | duration-slower |
| ambient | 8000ms | duration-ambient |
Easings
| Token | Curve | Used for |
|---|---|---|
| standard | cubic-bezier(0.4, 0, 0.2, 1) | default transitions |
| out | cubic-bezier(0.16, 1, 0.3, 1) | enter, draw-in |
| in | cubic-bezier(0.4, 0, 1, 1) | exit, fade-out |
| emphasized | cubic-bezier(0.34, 1.56, 0.64, 1) | pop, overshoot |
Springs
| Token | Visual duration | Bounce | Used for |
|---|---|---|---|
| snappy | 0.2s | 0 | popovers, badges |
| bouncy | 0.4s | 0.3 | playful accents |
Stagger step is 50ms per child. See Motion for the presets and the reduced-motion policy.