01 Colour Palette

Core app palette and support tokens.

The main palette is small: maroon, gold, cream, near-black, muted grey, and semantic status colours. Support colours cover gradients, borders, dark mode, and selected states.

Core UI colours

Primary maroon, gold, cream surfaces, near-black text, muted grey, divider, and status colours are used across normal app screens.

Support tokens

Primary Light, Soft Gold, Muted Rose, Background Cream, Input Border, dark surfaces, overlays, and gradient endpoints support specific components or states.

Included details

The guide includes HEX, RGB, HSL, intended usage, and WCAG contrast pairings used by the UI.

Primary Burgundy HEX #5C0018 RGB 92, 0, 24 HSL 344deg 100% 18%

Used for primary actions, brand blocks, and the start of the main gradient.

Primary Primary Dark HEX #570013 RGB 87, 0, 19 HSL 347deg 100% 17%

Used for dark headers, logo backgrounds, and high-contrast text pairings.

Primary Light Primary Light HEX #70172A RGB 112, 23, 42 HSL 347deg 66% 26%

Used for subtle maroon variation, hover states, and secondary brand surfaces.

Gradient End Rose Maroon HEX #A8003A RGB 168, 0, 58 HSL 339deg 100% 33%

Used only as the brighter end of the brand gradient for energy and depth.

Accent Gold HEX #D4AF37 RGB 212, 175, 55 HSL 46deg 65% 52%

Used for highlights, selected states, logo details, and premium emphasis.

Accent Muted Deep Gold HEX #755B00 RGB 117, 91, 0 HSL 47deg 100% 23%

Used where gold needs to feel quieter, such as subtle labels or muted accents.

Accent Soft Soft Gold HEX #C9A84C RGB 201, 168, 76 HSL 44deg 54% 54%

Used for softer highlight moments where full gold feels too strong.

Tertiary Muted Muted Rose HEX #7A5C5C RGB 122, 92, 92 HSL 0deg 14% 42%

Used for tertiary supporting details that should not compete with primary actions.

Background Background Light HEX #FEF9F1 RGB 254, 249, 241 HSL 37deg 87% 97%

Used as the default light-mode page background.

Surface Light / Muted Warm Surface HEX #F8F3EB RGB 248, 243, 235 HSL 37deg 48% 95%

Used for cards, inputs, panels, and light surfaces sitting above the page.

Background Cream Soft Cream HEX #F2EDE5 RGB 242, 237, 229 HSL 37deg 33% 92%

Used for secondary warm backgrounds and page bands.

Input Border Soft Rose Border HEX #E0BFBF RGB 224, 191, 191 HSL 0deg 35% 81%

Default outline for standard text fields before focus or error.

Text Muted Muted Grey HEX #6B7280 RGB 107, 114, 128 HSL 220deg 9% 46%

Used for helper text, timestamps, captions, and non-critical metadata.

Background Dark Dark Background HEX #1D1C17 RGB 29, 28, 23 HSL 50deg 12% 10%

Used for dark mode page backgrounds and the footer surface.

Surface Dark Dark Surface HEX #1A1A1A RGB 26, 26, 26 HSL 0deg 0% 10%

Used for dark mode cards, inputs, and grouped content surfaces.

Surface White White HEX #FFFFFF RGB 255, 255, 255 HSL 0deg 0% 100%

Used when pure white is needed for text or clean high-contrast surfaces.

Text Light Near Black HEX #0E0D0B RGB 14, 13, 11 HSL 40deg 12% 5%

Primary readable text on light surfaces.

Contrast

Readable combinations

These examples show which colour combinations are suitable for text, buttons, and important interface information.

Foreground	Background	Contrast ratio	Use	Status
White #FFFFFF	Primary Dark #570013	14.84:1	Text on dark buttons and headers	Pass AA + AAA
Primary Dark #570013	Background Light #FEF9F1	14.16:1	Headings and body text	Pass AA + AAA
Text Light #0E0D0B	Background Light #FEF9F1	18.53:1	Primary readable text	Pass AA + AAA
Gold #D4AF37	Primary #5C0018	6.8:1	Logo and highlights on dark	Pass AA
Muted Grey #6B7280	Background Light #FEF9F1	4.6:1	Non-critical metadata only	Large text only
Error #DC2626	Background Light #FEF9F1	4.61:1	Error text and validation messages	Pass AA
Primary #5C0018	Input Border #E0BFBF	8.43:1	Focused field border and input emphasis	Pass AA + AAA

Visual contrast examples

Each card matches the same-numbered row in the table above and shows the foreground colour sitting on its approved background.

1 14.84:1

White on Primary Dark

2 14.16:1

Primary Dark on Background Light

3 18.53:1

Text Light on Background Light

4 6.8:1

Gold on Primary

5 4.6:1

Muted Grey on Background Light

Semantic Colours

Feedback states

Semantic colours should support messages and icons; they should not be the only way information is communicated.

SuccessGreenHEX #4CAF50RGB 76, 175, 80HSL 122deg 39% 49%

ErrorRedHEX #DC2626RGB 220, 38, 38HSL 0deg 72% 51%

WarningOrangeHEX #F97316RGB 249, 115, 22HSL 25deg 95% 53%

DividerSoft LineHEX #E5E2E1RGB 229, 226, 225HSL 15deg 7% 89%

Gradients

Brand gradients

Gradients are used for brand surfaces, primary buttons, and image overlays.

Save recipe

brand

#5C0018 to #A8003A, left to right.

Used for primary buttons, smart suggestion cards, selected filters, and brand panels.

Welcome back Find something pantry-friendly tonight.

brandOverlay

#5C0018 at 85% opacity to #A8003A at 85% opacity.

Used over photography and splash imagery when text still needs strong contrast.

Recipe detailIngredients, steps, and notes.

warmBg

#FEF9F1 to #1D1C17, top to bottom.

Used as a warm atmospheric background when a screen needs depth.