Nine accent colours, two shades each, and one function picks the right one

The colour system lives in one file called theme-colors. It exports an accentColors object with nine named pairs — purple, violet, fuchsia, cyan, emerald, orange, blue, amber, and pink. Each pair has a dark value and a light value. The dark values are Tailwind's -400 shades — vibrant enough to read on dark backgrounds. The light values are -600 and -700 shades that pass WCAG AA 4.5 to 1 contrast ratio on white. One object, eighteen hex values, and every accent on the site pulls from it. The noteTypeColorPairs record maps each note type to its colour pair — thought gets violet, update gets blue, building gets emerald, tip gets amber. The tagColorPairs record maps each tag to its service accent — software gets purple, ai gets purple, accessibility gets fuchsia, audio gets cyan, production gets emerald. Both records reference the same accentColors entries so there is no duplication. The pickColor function takes a colour pair and a theme string — dark or light — and returns the right hex value. That is three lines of code. Every component that needs a theme-aware accent calls pickColor with the pair and the current theme from the useTheme hook. The MobileNav calls it for icon colours. The NoteCard calls it for badge and tag colours. The HomeNotesFilter calls it for dropdown accents. The service pages do not use this system because they set their accent as a CSS custom property at the page level and everything underneath inherits it. The theme-colors file handles the components that live outside a service context — notes, navigation, the homepage. Nine colours, two modes, one function. No conditional classNames, no ternary chains, no theme context provider. Just a lookup and a return.