Typito colour tool
An internal playground for testing a colour palette and background against five quiz-video themes. It scores readability and harmony, and exports the colours as JSON.
Internal tool
- Claude Code
Why I built it
The tool began as one large artifact that got too complex to update, then a first app with the tools on the left, all five themes in a row, and an export that always used one theme. The brief: tools on the right, three swappable themes, and a better-looking tool.
- 5quiz themes, 3 on screen at a time
- 2,700palette and background pairs tested per theme
- 4.5:1contrast every text colour has to pass
What I did
Designed on a canvas, built from one spec.
Two boards, a written spec, five reference pages and six build steps for Claude Code, each ending in a report I reviewed. Prompts in bits and pieces had failed; one spec worked.
First canvas draft and the final design Three swappable slots, tools on the right.
Picking a theme that’s already showing swaps the two slots, so none appears twice. All 45 combinations were clicked through. Compact fits the window; Large shows bigger cards.
Two preview sizes: Compact and Large A score that means something.
Harmony came out the same for every theme, so it now scores only the colours that touch on each card. Readability became a gate: low contrast caps the score.
- Before the fixExcellent 97%
- AfterExcellent 23.8% · Good 46.7% · Fair 28.3% · Poor 1.2%
Ratings across 2,700 palette and background pairs per theme. Bands: 85 / 77 / 69. Photos that keep text readable.
Random photos come through a server route, so the API key never reaches the browser. The app samples each photo and adds the smallest overlay that lets text pass 4.5:1.
The overlay on a dark photo and a light one
More screens
Drag or scroll to browseSwipe to browse
What I learned
- Colour mathsWCAG contrast ratios, checked against WebAIM, and a harmony model that depends on the layout.
- Unsplash APIPhotos through a server route so the key stays private, with bundled fallbacks.
- Tuning with dataTesting 2,700 combinations per theme before setting the rating bands.
- Vercel and gitCLI deploys and environment variables, and cleaning a secret out of git history.
