Design Tokens
VeloCMS uses OKLCH for all theme colors. OKLCH (Lightness, Chroma, Hue) is perceptually uniform — equal increments in L produce equal visual steps regardless of the hue. This matters in practice: a 10% change in lightness feels the same on a blue and on a red. Hex colors don't behave that way.
CSS custom property mapping
The theme engine injects your preset's color values as CSS custom properties on :root. Tailwind's semantic classes resolve to these variables, so bg-background uses --background from your preset automatically.
| Preset field | CSS variable | Tailwind class |
|---|---|---|
| colors.background | --background | bg-background |
| colors.foreground | --foreground | text-foreground |
| colors.primary | --primary | bg-primary |
| colors.secondary | --secondary | bg-secondary |
| colors.accent | --accent | bg-accent |
| colors.muted | --muted | bg-muted |
| colors.muted_foreground | --muted-foreground | text-muted-foreground |
| colors.border | --border | border-border |
OKLCH syntax
/* oklch(L C H) */
/* L: 0-100% (0=black, 100=white) */
/* C: 0-0.4 (0=grey, 0.4=max saturation) */
/* H: 0-360 (hue angle) */
oklch(55% 0.20 240) /* blue-ish primary */
oklch(65% 0.25 30) /* warm accent */
oklch(99% 0.002 100) /* near-white background */
oklch(12% 0.01 210) /* near-black foreground */WCAG AA contrast requirements
The marketplace checks your theme's foreground/background contrast ratio during review. Body text must achieve at least 4.5:1, large text (18pt+) at least 3:1. Use oklch.com to pick accessible color combinations before submitting — it shows the contrast ratio as you adjust values.
Typography tokens
Font names must be valid Google Fonts identifiers. The theme engine constructs the Google Fonts API URL, loads the variable font variant if available, and sets the CSS --font-heading and --font-body properties. For code blocks, set mono_font to any monospace font (e.g. "Fira Code", "JetBrains Mono"). If the font is not on Google Fonts, include it in your theme's npm package as a woff2 file and set the CSS property directly in styles.css.