Customization Guide

Velocity is designed to be easily customizable.

Quick Customizations

Brand Colors

Change the color palette in CSS tokens.

Components

Add new components or modify existing ones.

Routes

Add pages and navigation items.

Collections

Create new content types.

Common Changes

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

Edit src/styles/tokens/colors.css:

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

Add Navigation

Update src/config/routes.ts:

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

Customize Components

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

Next Steps

• Brand Colors — Color customization
• Adding Components — Create new components
• Adding Routes — Add new pages
• Adding Collections — New content types