Theme & Design Tokens
This project uses a small design system built with CSS custom properties to provide consistent spacing, colors, and components.
Palettes
warm: amber accents (default)cool: teal/cyan accents
How it works
- Accent palettes are switched by setting
data-themeon<html>towarmorcool. - Light/dark schemes are switched by setting
data-schemeon<html>tolightordark.
Available tokens
- Colors:
--bg,--surface,--text,--muted,--accent-500, etc. - Layout:
--space-1,--space-2,--space-3,--radius - Utilities:
.btn,.btn-primary,.card,.muted,.theme-toggle
Usage
- Use
var(--accent-500)for primary accent color in components. - Use
.btn-primaryfor call-to-action buttons.
These tokens are defined in src/styles.css. The app includes a small theme switcher UI in src/App.jsx (top-right of header) that persists your choice to localStorage. Storybook: run npm run storybook to open a live component/style explorer at http://localhost:6006. A snapshot test exists (see src/__tests__/StyleGuide.test.jsx); run tests with npm test (Vitest).
See docs/STORYBOOK.md for a short Storybook prototyping guide (how to add stories, build, and wire visual regression tests).
Keyboard & Accessibility: press t to toggle palettes (warm/cool) and s to toggle light/dark scheme. Theme changes are announced via an aria-live region for screen readers.