Colours and type
The colour codes, what each one is for, and the three typefaces.
Colour
Paper, ink and three bright colours. Every value below has a job, so the same colour means the same thing on the site, in the app and in the store pictures. None of them are in there because I liked the look of them.
The brand
Green is the main colour. Raspberry and yellow are accents, and never the main button.
- Brand green #0B7A4E Buttons, links, the tile behind the mark. The main colour.
- Bright green #12A36B Rings, chips, small marks. Not for body text.
- Section green #0D724B Whole bands of colour, where white text still has to be readable.
- Raspberry #E5397D Stickers and highlights. One of the morsels in the mark.
- Raspberry, read #B8215C A pink word on a pale background. The brighter one fails the contrast test.
- Yellow #FFD23F The highlighter, and an unanswered question in the app.
- Paper #FFF9EC The page. Warm white, never pure white.
- Ink #15201A All body text and headings.
The nutrients, inside the app
One colour per nutrient, so you know which dial you're looking at before you read the label. Protein gets the brand green because it's the one you're trying to reach, not the one you're trying to stay under.
- Protein #0B7A4E The big dial. A target to reach, not a limit to stay under.
- Carbohydrates #0A8F98 Carbohydrate readings and dots.
- Added sugar #5C6B12 Added sugar only. Never total sugar.
- Fat #6C5CE7 Fat readings and dots.
The one that catches people
Bright green can't be used for body text. White on #12A36B measures 3.24:1 and a paragraph needs 4.5:1, so anything painted green across a whole section gets #0D724B instead. Raspberry has the same problem the other way round: #E5397D is 4.03:1 on white, so a pink word on a pale background is #B8215C. I got both of these wrong on this very page, and the contrast check is what caught it.
In the dark
Every colour has a counterpart for dark backgrounds. Green becomes #2ED18B, paper #161A17, ink #EEF0E8. And colour is never the only signal in the app: a finished dial shows a tick and a sentence as well as the fill.
Three typefaces, one job each
All three are free fonts under the SIL Open Font License and all three are on Google Fonts, so you can set a headline in Bricolage yourself if you want to. The text inside the app is deliberately none of them. The app uses the font the phone already has.