Color System

Five African Minerals — all achieving WCAG AAA (7:1+) in both light and dark modes.

Minerals Palette

cobalt

#0047AB

Light Mode

#00B0FF

Dark Mode

Usage: Primary CTAs, links, education

Origin: Katanga (DRC), Zambian Copperbelt

Container Colors

#E3F2FD

#001F3F

tanzanite

#4B0082

Light Mode

#B388FF

Dark Mode

Usage: Social features, premium tiers

Origin: Merelani Hills, Tanzania

Container Colors

#F3E5F5

#1A0033

malachite

#004D40

Light Mode

#64FFDA

Dark Mode

Usage: Success states, travel, positive actions

Origin: Congo Copper Belt

Container Colors

#E0F2F1

#00251A

gold

#5D4037

Light Mode

#FFD740

Dark Mode

Usage: Achievements, honey/rewards, accents

Origin: Ghana (Ashanti), South Africa, Mali

Container Colors

#FFF8E1

#332200

terracotta

#8B4513

Light Mode

#D4A574

Dark Mode

Usage: Community features, Ubuntu elements

Origin: Pan-African Earth (Sahel, Great Zimbabwe)

Container Colors

#FBE9E7

#3E1A00

Backgrounds

Light Mode

base: #FAF9F5

surface: #FFFFFF

surfaceDim: #F3F2EE

Dark Mode

base: #0A0A0A

surface: #141414

surfaceBright: #1E1E1E

Semantic Colors

success

#004D40

#64FFDA

error

#B3261E

#F2B8B5

warning

#7A5C00

#FFD866

info

#0047AB

#00B0FF

Minerals Strip

The signature visual element - a 4px vertical stripe on the left edge using the Five African Minerals.

Example card with minerals strip on left edge.

Strip colors (top to bottom):

cobalt

#0047AB

tanzanite

#4B0082

malachite

#004D40

gold

#5D4037

terracotta

#8B4513

CSS Variables

/* Use via CSS custom properties */
:root {
  /* Minerals */
  --cobalt: #0047AB;
  --tanzanite: #4B0082;
  --malachite: #004D40;
  --gold: #5D4037;
  --terracotta: #8B4513;

  /* Backgrounds */
  --bg-base: #FAF9F5;
  --bg-surface: #FFFFFF;

  /* Text */
  --text-primary: #141413;
  --text-secondary: #4A4A46;
}