Foundations
Color and accents
Two semantic theme palettes, a stable purple brand, and seven personalized dashboard accents.
On this page
Source palette
Use the values exported from app/globals.css. Background, foreground, card, border and muted roles change by theme. Primary remains #9300df, and the brand gradient runs #8000e0 to #f010f0. Do not substitute project colors into the portfolio documentation chrome.
Semantic roles
| Role | Light | Dark | Use |
|---|---|---|---|
| background | #f5f5f5 | #0a0a0a | Page canvas |
| foreground | #0b0b0b | #f2f2f2 | Primary reading text |
| card | #ffffff | #0f0f0f | Menus, dialogs and settings cards |
| card-border | rgba(0, 0, 0, 0.08) | rgba(255, 255, 255, 0.12) | Low-contrast structural boundary |
| muted | rgba(0, 0, 0, 0.6) | rgba(255, 255, 255, 0.7) | Secondary copy |
| muted-strong | rgba(0, 0, 0, 0.75) | rgba(255, 255, 255, 0.85) | Labels and descriptive copy |
| primary | #9300df | #9300df | Brand links and selected public toggle |
Accent options
| Option | Light RGB | Dark RGB |
|---|---|---|
| Default | 11, 11, 11 | 242, 242, 242 |
| Sage | 120, 204, 167 | 48, 134, 92 |
| Sky | 115, 188, 247 | 44, 118, 184 |
| Rose | 239, 129, 170 | 167, 62, 103 |
| Lavender | 195, 149, 245 | 118, 78, 178 |
| Peach | 246, 160, 110 | 181, 96, 55 |
| Gold | 232, 182, 92 | 168, 118, 34 |
Theme-dependent accent foreground
Default uses white foreground on the dark light-mode accent and near-black foreground on the pale dark-mode accent. Custom accents invert that rule: near-black in light mode and white in dark mode. This is logic in ThemeProvider, AppHome and AccentApplier, not a separate CSS token per option.
Opacity and composition
Bookmark tile surfaces use 65% accent opacity until hover. Public-board icon discs use 25%. Borders and muted text also use alpha. Evaluate contrast after compositing on the actual canvas, especially over wallpaper; an opaque color pair is not sufficient evidence.
Source references
| Repository file | Responsibility |
|---|---|
| app/globals.css | Semantic CSS roles and alpha surfaces |
| lib/style-preferences.ts | Accent RGB tuples |
| components/ThemeProvider.tsx | Preference-to-token mapping |
Source palette
- --background
- #f5f5f5
- --foreground
- #0b0b0b
- --primary
- #9300df
- --card
- #ffffff
- --card-border
- rgba(0, 0, 0, 0.08)
- --muted
- rgba(0, 0, 0, 0.6)
- --muted-strong
- rgba(0, 0, 0, 0.75)
- --accent-foreground
- #ffffff
Examples from the app
Actual Startboard source UI with isolated fictional records; both native themes at 2× resolution or higher. No live integrations or account writes. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 08fa2595a668 · Documentation v1.0.0