Choosing Your Colours
This is a member-only chapter. Log in with your Signal Over Noise membership email to continue.
Log in to readModule 3 · Section 4 of 7
Choosing Your Colours
Pick three: a text colour, a background colour, and a primary accent. Everything else derives from those.
For jimchristian.net I used a near-black text on white with a deep teal accent. For signalovernoise.at the background is very dark (almost black) with a lighter accent. For definitelyrealproducts.com it’s deliberately garish — that’s part of the joke.
The pattern is always the same: define the palette as custom properties, build components that reference the properties, never hardcode a hex value inside a component.
Generating a palette with Claude Code:
I need a colour palette for a site about [topic].
The mood is [adjective, adjective].
Give me CSS custom properties for: text, text-muted, background,
primary accent, primary-dark, border, surface.
Use the variable names from src/styles/global.css.Claude Code will return CSS variables you can paste directly in.