Theming & Branding

BunShip Pro uses CSS custom properties (HSL values) for its entire color system. Change one variable and every component updates — buttons, borders, backgrounds, charts, everything.

Brand Color

The primary brand color is defined in packages/ui/src/styles/globals.css. BunShip Pro ships with teal (172 on the hue scale). To change it, update the --primary HSL value in both :root (light mode) and .dark (dark mode):

/* packages/ui/src/styles/globals.css */

:root {
  --primary: 172 80% 34%; /* Change the hue (first number) */
  --primary-foreground: 0 0% 100%; /* Text on primary — usually white */
  --accent: 172 60% 95%; /* Lighter tint for hover/accent areas */
  --accent-foreground: 172 80% 24%; /* Text on accent */
  --ring: 172 80% 34%; /* Focus ring — match primary */
}

.dark {
  --primary: 172 70% 55%; /* Brighter in dark mode */
  --accent: 172 30% 15%;
  --accent-foreground: 172 70% 70%;
  --ring: 172 70% 55%;
}

Common Brand Colors

Brand Color	Light Mode HSL	Dark Mode HSL
Teal (default)	`172 80% 34%`	`172 70% 55%`
Blue	`221 83% 53%`	`217 91% 60%`
Purple	`262 83% 58%`	`263 70% 60%`
Green	`142 76% 36%`	`142 70% 45%`
Orange	`24 95% 53%`	`20 90% 48%`
Red	`0 84% 60%`	`0 72% 51%`

Change all five variables (--primary, --primary-foreground, --accent, --accent-foreground, --ring) to keep the theme consistent.

Color System

The full color palette uses these CSS variables:

Variable	Purpose
`--background`	Page background
`--foreground`	Default text color
`--primary`	Brand color — buttons, links, active states
`--secondary`	Subtle backgrounds for secondary actions
`--muted`	Muted backgrounds and section dividers
`--muted-foreground`	Subdued text — labels, descriptions
`--accent`	Hover and highlight backgrounds
`--destructive`	Delete, danger, error states
`--border`	Borders and dividers
`--input`	Input field borders
`--ring`	Focus rings
`--success`	Success states and indicators

All values are HSL triplets (e.g., 172 80% 34%) and are referenced as hsl(var(--primary)) in Tailwind classes.

Dark Mode

BunShip Pro supports three theme modes: light, dark, and system (follows OS preference). The toggle is in the dashboard header and in user preferences at /settings/preferences. The theme is applied by adding or removing the dark class on the <html> element. The .dark block in globals.css overrides all color variables. To adjust dark mode colors, edit the .dark section in globals.css. The dark background defaults to 0 0% 7.8% (near-black).

Fonts

BunShip Pro uses two fonts defined in globals.css:

Font	Variable	Usage
Inter	`--font-sans`	All body text, headings, data values
JetBrains Mono	`--font-mono`	Code snippets, terminal content, small section labels

To change fonts:

Update the @theme block in globals.css:

@theme inline {
  --font-sans: "Your Font", system-ui, sans-serif;
  --font-mono: "Your Mono Font", ui-monospace, monospace;
}

Load the new font — either add a <link> tag in the root layout or install it as an npm package

Logo and Favicon

Replace these files with your own:

File	Location	Format
Logo (sidebar)	Used in `apps/web/src/components/sidebar.tsx`	SVG or image import
Favicon	`apps/web/public/favicon.ico`	ICO or SVG

The sidebar currently uses the text “BunShip” with the Ship icon from Lucide. To replace it with an image logo, edit the logo section in sidebar.tsx.

Border Radius

The global border radius is set with the --radius variable:

:root {
  --radius: 0.625rem; /* default — 10px */
}

All components derive their radius from this value (--radius-sm, --radius-md, --radius-lg, --radius-xl). Increase it for rounder corners, decrease for sharper.

Next Steps

UI Components — Available components and how to use them
Landing Page — Customize the marketing site with your branding

​Theming & Branding

​Brand Color

​Common Brand Colors

​Color System

​Dark Mode

​Fonts

​Logo and Favicon

​Border Radius

​Next Steps