Skip to main content

​
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 ColorLight Mode HSLDark Mode HSL
Teal (default)172 80% 34%172 70% 55%
Blue221 83% 53%217 91% 60%
Purple262 83% 58%263 70% 60%
Green142 76% 36%142 70% 45%
Orange24 95% 53%20 90% 48%
Red0 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:
VariablePurpose
--backgroundPage background
--foregroundDefault text color
--primaryBrand color — buttons, links, active states
--secondarySubtle backgrounds for secondary actions
--mutedMuted backgrounds and section dividers
--muted-foregroundSubdued text — labels, descriptions
--accentHover and highlight backgrounds
--destructiveDelete, danger, error states
--borderBorders and dividers
--inputInput field borders
--ringFocus rings
--successSuccess 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:
FontVariableUsage
Inter--font-sansAll body text, headings, data values
JetBrains Mono--font-monoCode snippets, terminal content, small section labels
To change fonts:
  1. 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;
}
  1. 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:
FileLocationFormat
Logo (sidebar)Used in apps/web/src/components/sidebar.tsxSVG or image import
Faviconapps/web/public/favicon.icoICO 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