Brand Colors

Change Velocity’s colors to match your brand.

Quick Change

The brand color scale is defined in src/styles/tokens/primitives.css:

:root {
  /* Default: International Orange (hue: 38) */
  --brand-500: oklch(62.5% 0.22 38);
}

To shift your brand to a different color, change the hue value. For example, 38 (orange) → 260 (blue).

Full Color Scale

For a complete rebrand, update the entire scale in src/styles/tokens/primitives.css:

:root {
  /* Blue brand (hue: 260) */
  --brand-50: oklch(97.5% 0.02 260);
  --brand-100: oklch(94% 0.05 260);
  --brand-200: oklch(88% 0.10 260);
  --brand-300: oklch(80% 0.15 260);
  --brand-400: oklch(72% 0.19 260);
  --brand-500: oklch(62.5% 0.22 260);  /* Primary */
  --brand-600: oklch(54% 0.20 260);
  --brand-700: oklch(45% 0.17 260);
  --brand-800: oklch(36% 0.13 260);
  --brand-900: oklch(26.5% 0.09 260);
}

OKLCH Hue Reference

Color	Hue
Red	25-30
Orange	35-50
Yellow	85-95
Green	140-150
Teal	175-185
Blue	250-270
Purple	290-310
Pink	340-350

Tip

Use oklch.com to generate palettes with proper chroma values.

Update Site Config

Also update the theme color in src/config/site.config.ts:

branding: {
  colors: {
    themeColor: '#3B82F6',  // Your new brand color (hex)
    backgroundColor: '#ffffff',
  },
},

Example: Purple Theme

:root {
  /* Purple (hue: 300) */
  --brand-50: oklch(97.5% 0.02 300);
  --brand-100: oklch(94% 0.05 300);
  --brand-200: oklch(88% 0.10 300);
  --brand-300: oklch(80% 0.15 300);
  --brand-400: oklch(72% 0.19 300);
  --brand-500: oklch(62.5% 0.22 300);
  --brand-600: oklch(54% 0.20 300);
  --brand-700: oklch(45% 0.17 300);
  --brand-800: oklch(36% 0.13 300);
  --brand-900: oklch(26.5% 0.09 300);
}

site.config.ts

themeColor: '#9333EA',

Switching Themes

Velocity ships with two themes: default and midnight. To switch, edit src/styles/tokens/colors.css:

@import './primitives.css';
@import '../themes/default.css';
/* To use the midnight theme, replace the line above with:
   @import '../themes/midnight.css';
*/

Creating a New Theme

1. Duplicate src/styles/themes/default.css
2. Implement all ~35 semantic tokens for both :root (light) and .dark (dark):

Category	Tokens
Backgrounds	--background, --background-secondary, --background-tertiary, --background-elevated
Foregrounds	--foreground, --foreground-secondary, --foreground-muted, --foreground-subtle
Borders	--border, --border-strong, --border-subtle
Interactive	--primary, --primary-hover, --primary-foreground, --secondary, --secondary-hover, --secondary-foreground, --accent, --accent-hover, --accent-light
Surfaces	--muted, --muted-foreground, --card, --card-border, --input-bg, --input-border, --input-focus, --ring
Destructive	--destructive, --destructive-foreground
Gradients	--gradient-start, --gradient-end
Invert sections	--surface-invert, --surface-invert-secondary, --surface-invert-tertiary, --on-invert, --on-invert-secondary, --on-invert-muted, --border-invert, --border-invert-strong

3. Update the import in src/styles/tokens/colors.css to point to your new theme file

Caution

When creating custom themes, maintain WCAG AA contrast ratios: 7:1 for --foreground, 4.5:1 for --foreground-muted and --foreground-subtle. Each theme file documents its contrast ratios inline.

Dark Mode Considerations

The brand colors work in both light and dark modes. The semantic tokens handle the adaptation:

/* Light mode uses darker brand shades for text */
--text-brand: var(--brand-600);

/* Dark mode uses lighter brand shades */
.dark {
  --text-brand: var(--brand-400);
}

To opt out of dark mode entirely, remove the .dark { ... } block from your theme file.