Skip to main content
All colors use CSS variables for theme consistency.

​
CSS Variables

VariablePurpose
--bg-primaryMain background color
--bg-secondarySecondary background
--glassSemi-transparent overlay background
--text-primaryMain text color
--text-secondaryMuted text color
--accentHighlight/selection color
--borderBorder color

​
Brightness System

The brightness slider (0-100) adjusts the background:
ValueResult
0Pure black (#000000)
50Medium gray (#808080)
100Pure white (#FFFFFF)
Components should use CSS variables, never hardcoded colors.

​
Design Tokens

Located in theme/designTokens.js:
  • Component-specific styling (card shadows, border radius)
  • Spacing scales
  • Typography scales

​
Theme Guidelines

Never hardcode colors

Use var(--text-primary) not 'white'

Test both extremes

Check appearance at brightness 0 and 100

Use glass for overlays

var(--glass) provides consistent transparency

Accent for highlights

var(--accent) for selection, focus states

​
Theme-Aware Components

// CORRECT
<div style={{ color: 'var(--text-primary)' }}>
  Content
</div>

// WRONG - hardcoded color
<div style={{ color: 'white' }}>
  Content
</div>

​
ThemeProvider

The ThemeProvider component:
  • Wraps the entire application
  • Provides brightness state
  • Updates CSS variables when brightness changes
  • Located in theme/ThemeProvider.jsx
<ThemeProvider>
  <App />
</ThemeProvider>