Before this site had a single episode, it needed an identity. So I asked the AI for colour — not as hex lists, but as drawn boards I could feel. Six boards and one argument later, the whole brand had a palette.
A palette picked from a hex list is a guess. I wanted to see each colour doing its job — so every candidate came back as a board: the swatches on the left, the same palette living inside a real phone UI on the right.
Round one settled the family: the blue-greens felt like care, the indigo felt like a bank, the sky blue felt like everyone else. So round two changed the test. Three refined, named candidates — and instead of more swatch boards, each one was road-tested on the same sketch, recoloured three ways, so the colours fought on a real image.
Calm Lagoon won. But when it came to locking the primary button colour, I pointed at the shiny bright aqua — and the AI ran the numbers instead of agreeing with me. White text on that aqua fails accessibility contrast. The hero shade got darkened until it passed, and the pretty aqua was demoted to highlights.
The prettiest shade is rarely the workhorse. The locked palette keeps the bright aqua for highlights and puts a darker #0B7D74 under every button, so white text is readable for everyone — including people the shiny version would have excluded. That one decision is baked into tokens.css forever.
Two rounds, six renders, one winner — all drawn by the same five-cent visual pipeline this series keeps coming back to. And yes: every round-one board has hex codes leaked into the labels. The glitch was there from night one. Tap any image to enlarge it and read the exact prompt that drew it.
The winner became a real design system that same evening: a full 50–900 colour scale, green-leaning neutrals, one warm coral accent so it never goes clinical, and semantic colours that never signal by colour alone. Written down once — brand-colors.md + tokens.css — and every screen since just inherits it.
Six boards, two rounds, one accessibility overrule — in under a minute.
The locked colour spec, the paste-ready CSS tokens, and the three board prompts. Swap in your own product and run your own palette fight — the board format is the trick, not the teal. Everything's free and open.
gh repo clone bitesize-ai/episodes ~/bitesize && open ~/bitesize/ep01-palette
No GitHub? Comment PALETTE on the post and the bot DMs you the link.
A palette is just paint until something uses it. Next: the five-cent command that turns one line of text into a genuinely hand-drawn diagram — the same pipeline that rendered every board on this page.
