Documentation Index
Fetch the complete documentation index at: https://docs.bunship.com/llms.txt
Use this file to discover all available pages before exploring further.
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% |
--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 |
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 |
- 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 |
sidebar.tsx.
Border Radius
The global border radius is set with the --radius variable:
:root {
--radius: 0.625rem; /* default — 10px */
}
--radius-sm, --radius-md, --radius-lg, --radius-xl). Increase it for rounder corners, decrease for sharper.
Next Steps
