Fifteen colours, each with one job. Clay is the brand; Action is the button. Click any swatch to copy its hex. Light is the default everywhere; dark is something people choose in Settings.
Light set (default)
Tokens and roles
Surfaces
Ink
Brand and action
Illustration
Price signals
The two orangesClay #C4501F is the brand colour: the seed, illustration and display type at 24px and above. It is 4.32:1 on Paper, so it never sets small text. Action #A63E14 is the deeper shade for the one primary button on each screen and for links, at 6.32:1 with white.
One Action-coloured thing per screen: the primary button.
Saffron only behind Ink (9.21:1), as a highlight fill or in illustration.
Don’t
Clay or Action as large fills, backgrounds or tinted bands.
Saffron or Sage as text on Paper (1.76:1 and below). Gradients of any kind.
Contrast
Every pair, checked
Sample
Pair
Ratio
Result
Aa
Ink on Paper #1E1914 on #FAF6F0
16.20:1
AAA text
Aa
Ink 2 on Paper #5A5047 on #FAF6F0
7.30:1
AAA text
Aa
Ink 3 on Paper #6B6157 on #FAF6F0
5.62:1
AA text
Aa
Ink 3 on Raised #6B6157 on #FFFFFF
6.05:1
AA text
Aa
Ink 3 on Sunken #6B6157 on #F2ECE3
5.15:1
AA text
Aa
White on Action (button) #FFFFFF on #A63E14
6.32:1
AA text
Aa
White on Action pressed #FFFFFF on #8A3310
8.20:1
AAA text
Aa
Action link on Paper #A63E14 on #FAF6F0
5.87:1
AA text
Aa
Action link on Raised #A63E14 on #FFFFFF
6.32:1
AA text
Aa
Clay on Paper (display only) #C4501F on #FAF6F0
4.32:1
Large text ≥3:1
Aa
Paper on Cocoa #FAF6F0 on #2A211B
14.65:1
AAA text
Aa
Saffron on Cocoa #E9B44C on #2A211B
8.33:1
AAA text
Aa
Ink on Saffron #1E1914 on #E9B44C
9.21:1
AAA text
Aa
Field edge on Raised #8E8377 on #FFFFFF
3.71:1
UI ≥3:1 pass
Aa
Good price on Raised #1F6F43 on #FFFFFF
6.15:1
AA text
Aa
Price rise on Raised #B4342B on #FFFFFF
6.06:1
AA text
Aa
Coles rule on Raised #C5141A on #FFFFFF
6.02:1
UI ≥3:1 pass
Aa
Woolworths rule on Raised #0B7A35 on #FFFFFF
5.46:1
UI ≥3:1 pass
Aa
ALDI rule on Raised #0B57B0 on #FFFFFF
6.99:1
UI ≥3:1 pass
Aa
Hairline on Paper #DED4C6 on #FAF6F0
1.36:1
Decorative only
Aa
Saffron on Paper #E9B44C on #FAF6F0
1.76:1
Decorative only
WCAG 2.x formula. Text needs 4.5:1 (AA) and should reach 7:1 (AAA) for body copy where possible. “UI” is non-text contrast (3:1) for field edges, checkboxes and the retailer rule. Ticked rows stay at Ink 2 (7.86:1 on Raised), never faded with opacity.
Dark mode set
Opt-in, warm, never inverted
The app stays light unless someone turns dark on in Settings, because supermarket aisles are bright and dark-on-light reads faster there (DESIGN-V2). Never follow prefers-color-scheme on the List screen. In dark, row names step up to 18px/700.
Dark contrast
Sample
Pair
Ratio
Result
Aa
Ink on Paper #F6EFE6 on #1A1511
15.88:1
AAA text
Aa
Ink 2 on Paper #C9BDB0 on #1A1511
9.82:1
AAA text
Aa
Ink 3 on Raised #A89B8C on #241D18
6.12:1
AA text
Aa
Ink on Action (button) #1E1914 on #EE8A5C
7.00:1
AA text
Aa
Action link on Paper #EE8A5C on #1A1511
7.27:1
AAA text
Aa
Clay on Paper (display) #E2703F on #1A1511
5.71:1
Large text ≥3:1
Aa
Field edge on Raised #8F8274 on #241D18
4.44:1
UI ≥3:1 pass
Aa
Good price on Raised #5CC48A on #241D18
7.69:1
AAA text
Aa
Price rise on Raised #F08A80 on #241D18
6.85:1
AA text
Aa
Coles on Raised #F2666B on #241D18
5.45:1
AA text
Aa
Woolworths on Raised #3FC46B on #241D18
7.37:1
AAA text
Aa
ALDI on Raised #5A9BE8 on #241D18
5.77:1
AA text
Aa
Hairline on Paper #3A3029 on #1A1511
1.41:1
Decorative only
Dark mode previewExample data
What this list costs
Coles Your shopfor 38 of your 41 items$151.40
Woolworthsfor 37 of your 41 items$154.75
ALDIfor 31 of your 41 items$119.85
Each total covers different items. Prices checked Wed 30 Sep.
Plan this week
Needs Wes’s decisionThe dark set is new: directions.md defines only the light palette. These values keep the Hearth warmth and pass every check above, but haven’t been reviewed on a real phone yet. The dark Action button uses Ink text (7.00:1), not white.
Retailer colours
Coles, Woolworths and ALDI
Retailer
Light
Dark
On white
Coles
#C5141A RGB 197 20 26
#F2666B RGB 242 102 107
6.02:1
Woolworths
#0B7A35 RGB 11 122 53
#3FC46B RGB 63 196 107
5.46:1
ALDI
#0B57B0 RGB 11 87 176
#5A9BE8 RGB 90 155 232
6.99:1
Retailer identity in a listExample data
Coles Your shopfor 38 of your 41 items$151.40
Woolworthsfor 37 of your 41 items$154.75
ALDI Your shopfor 31 of your 41 items$119.85
Each total covers different items. Tap a shop to see what it leaves out. Prices checked Wed 30 Sep; in-store prices may differ.
Rules
A 3px rule plus the shop’s name. Nothing else carries a retailer colour. Never a crest, a logo, a badge or a filled chip.
Only on retailer surfaces: store totals, per-store prices in a sheet, provenance. Never on buttons, headings, illustration or marketing.
No slogans. Not “Down Down”, “The Fresh Food People” or “Good Different”. Pantri isn’t affiliated with any of them.
Colour is never the only signal. The name is always written out.
“Your shop” is Pantri’s marker, drawn in Action as an outline pill, not in the retailer’s colour.
Never crown a shop. No “cheapest”, no winner styling, no ranking a shop that has prices for fewer than 60% of the list.
Do
Coles · for 38 of your 41 items · $151.40
Don’t
ALDI is cheapest! (in ALDI blue, with a crest, ignoring that it covers only 31 items)
Price signals
Green and red always come with words
Do
$1.10 less than last time
40c more than last time
Colour is never the only channel (WCAG 1.4.1). Savings are in dollars, never percentages.