Skip to content
Velocity

Customization Guide

Velocity is designed to be easily customizable.

Quick Customizations

Section titled “Quick Customizations”

Brand Colors & Themes

Change colors, switch themes, or create your own.

Components

Add new components or modify existing ones.

Routes

Add pages and navigation items.

Collections

Create new content types.

Common Changes

Section titled “Common Changes”

Update Branding

Section titled “Update Branding”
  1. Replace logos in src/assets/branding/
  2. Update public/favicon.svg
  3. Edit site.config.ts for site name and info

Change Colors

Section titled “Change Colors”

Edit src/styles/tokens/primitives.css:

:root {
  --brand-500: oklch(62.5% 0.22 260); /* Blue instead of orange */
}

Switch Theme

Section titled “Switch Theme”

Edit src/styles/tokens/colors.css line 9:

/* Default theme */
@import '../themes/default.css';


/* Or use midnight theme */
@import '../themes/midnight.css';

Add Navigation

Section titled “Add Navigation”

Update src/config/routes.ts:

export const routes = {
  // ... existing
  pricing: {
    path: '/pricing',
    nav: { show: true, order: 5, label: 'Pricing' },
  },
};

Customize Components

Section titled “Customize Components”

Edit components in src/components/ or create new ones following existing patterns.

Next Steps

Section titled “Next Steps”