Colors
Every token is an OKLCH CSS variable, defined once in lib/theme/tokens.ts and published as @particular/theme. Use them through Tailwind: bg-brand, text-success, bg-warning-subtle.
Surfaces
Cool neutrals (hue 264) with just enough chroma to feel deliberate next to the brand violet.
--background--foreground--card--card-foreground--popover--popover-foreground--muted--muted-foreground--accent--accent-foreground--border--inputActions
Primary is near-black in light mode and near-white in dark mode. Brand is the Particular violet: focus rings, links, featured actions.
--primary--primary-foreground--secondary--secondary-foreground--brand--brand-foreground--brand-subtle--ringSemantic
Each tone has a strong color for text, icons, and dots, a foreground for text on the strong color, and a subtle tint for backgrounds.
--success--success-foreground--success-subtle--warning--warning-foreground--warning-subtle--info--info-foreground--info-subtle--destructive--destructive-foreground--destructive-subtleCharts
Five series colors harmonized with the brand and semantic hues.
--chart-1--chart-2--chart-3--chart-4--chart-5Sidebar
A separate set so the app sidebar can sit one step off the page background.
--sidebar--sidebar-foreground--sidebar-primary--sidebar-primary-foreground--sidebar-accent--sidebar-accent-foreground--sidebar-border--sidebar-ringContrast
Every text pairing meets WCAG AA (4.5:1). A unit test computes these ratios from the OKLCH values and fails the build if one drops below.