Fieldnotes.

Start with what needs to be read.

Colour is a relationship. A shade that feels clear on a pale background can disappear against a dark one. Begin with the text, controls and information that people need, then build your palette around them.

Give every colour a job.

Choose a surface, an ink and an accent. Use your accent where a decision happens. Let quieter tones connect the rest of the interface. A smaller palette is easier to reason about and easier to reuse.

Check the pair, then the page.

Use Chroma to calculate the contrast of two solid colours. Then inspect the complete interface at different sizes. Contrast is one part of accessibility, alongside readable type, visible focus and clear language.

Take the method with you.

Download the checklist, adapt the prompt, or start with the quickstart. This is an original demonstration resource created for the jetskibay prototype.

Before you build

[ ] Give every colour a role
[ ] Check foreground/background pairs
[ ] Keep focus and error states visible
[ ] Test the real screen at small sizes
[ ] Record what you learned