Colour

The Odela palette is built on a warm, energetic gradient (yellow → orange) anchored by a deep charcoal. The warm accents carry the brand’s growth-and-optimism energy; the charcoal provides the institutional weight and legibility the SPOT platform demands.

The full reference palette lives in context/brand.json and as CSS variables in app/globals.css. The values below are the single source of truth — always copy from here rather than re-deriving.

Primary

Charcoal

#414042 · rgb(65, 64, 66)

Charcoal (#414042) is the primary brand colour. Use it for headings, primary text, dark backgrounds, and the structural “institutional” layer of the interface.

Accent colours

The three accents form the warm gradient used in the mark. Use them as a family — Warm Yellow leads, Orange supports, Deep Orange emphasises.

Warm Yellow

#FEC010 · rgb(254, 192, 16)

Orange

#ED8922 · rgb(237, 137, 34)

Deep Orange

#FF6D00 · rgb(255, 109, 0)

Colour	Hex	RGB	Use
Warm Yellow	`#FEC010`	254, 192, 16	Primary accent — highlights, active states, key emphasis
Orange	`#ED8922`	237, 137, 34	Secondary accent — links, hover states, the navbar wordmark
Deep Orange	`#FF6D00`	255, 109, 0	Tertiary accent — inline emphasis, alerts, the gradient’s deepest stop

Surface and text

Off-white (Surface)

#FAFAF5 · rgb(250, 250, 245)

White

#FFFFFF · rgb(255, 255, 255)

Mid Gray

#6B7280 · rgb(107, 114, 128)

Colour	Hex	RGB	Use
Off-white	`#FAFAF5`	250, 250, 245	Default light surface, card backgrounds, page background
White	`#FFFFFF`	255, 255, 255	Text on dark/charcoal backgrounds, pure surfaces
Charcoal	`#414042`	65, 64, 66	Body text and headings on light surfaces (see Primary)
Mid Gray	`#6B7280`	107, 114, 128	Secondary text, captions, borders, dividers

Functional colours

Reserved for status feedback inside the product UI. Do not use these as decorative brand colour.

Success

#22C55E

Warning

#F59E0B

Error

#EF4444

Role	Hex	RGB	Use
Success	`#22C55E`	34, 197, 94	Confirmations, completed states
Warning	`#F59E0B`	245, 158, 11	Cautions, attention required
Error	`#EF4444`	239, 68, 68	Errors, destructive actions, “don’t” examples

Accessibility

The warm accents are bright. Never set body text in Warm Yellow on white — the contrast is far too low. Use the accents for fills, borders, icons, and large headings, and keep body text in Charcoal (#414042) on Off-white/White.

Foreground	Background	Contrast ratio	Body text
Charcoal `#414042`	Off-white `#FAFAF5`	≈ 9.8 : 1	✅ Pass AAA
White `#FFFFFF`	Charcoal `#414042`	≈ 10.3 : 1	✅ Pass AAA
Charcoal `#414042`	Warm Yellow `#FEC010`	≈ 6.3 : 1	✅ Pass AA
White `#FFFFFF`	Deep Orange `#FF6D00`	≈ 2.8 : 1	❌ Avoid for text
Warm Yellow `#FEC010`	White `#FFFFFF`	≈ 1.6 : 1	❌ Fail

Aim for WCAG AA (4.5:1) on all body text and AAA (7:1) wherever practical. Reserve Deep Orange for fills and iconography, not text.

CSS variables (for engineers)

The palette is exposed as CSS custom properties in app/globals.css under the Tailwind @theme block. Use these tokens in components instead of hard-coded hex.


--color-odela-primary:        #414042;
--color-odela-accent1:        #FEC010;  /* Warm Yellow */
--color-odela-accent2:        #ED8922;  /* Orange      */
--color-odela-accent3:        #FF6D00;  /* Deep Orange */
--color-odela-surface:        #FAFAF5;
--color-odela-text:           #414042;
--color-odela-text-light:     #FFFFFF;
--color-odela-text-secondary: #6B7280;

These also map to Tailwind utilities, e.g. bg-odela-accent2, text-odela-primary, border-odela-accent3.