Colors
The Five African Minerals palette. Each color is named after a mineral found across the African continent, carrying its own origin story and symbolism.
Mineral Strip
The signature brand element — a 4px stripe of all five minerals, used as a visual identity marker.
Vertical left border
Always used as a vertical left-edge accent — cards, sidebars, page borders.
Five African Minerals
Click any swatch to copy its hex value. Each mineral has light and dark theme variants.
cobalt
Primary blue, links, CTAs
tanzanite
Purple accent, brand/logo, social features
malachite
Success states, positive actions
gold
Achievements, rewards, highlights
terracotta
Community features, warmth
Origins & Symbolism
cobalt
Origin: Katanga (DRC) and Zambian Copperbelt
Symbolism: Digital future, trust, knowledge
tanzanite
Origin: Merelani Hills, Tanzania
Symbolism: Premium, creativity, connection
malachite
Origin: Congo Copper Belt
Symbolism: Growth, nature, success
gold
Origin: Ghana, South Africa, Mali
Symbolism: Honey, rewards, warmth
terracotta
Origin: Pan-African Sahel
Symbolism: Earth, community, grounding
Semantic Colors
Theme-adaptive colors for success, error, warning, and informational states.
| State | Light / Dark | Usage | |
|---|---|---|---|
| success | #004D40 / #64FFDA | Success states, positive actions | |
| error | #B3261E / #F2B8B5 | Error states, destructive actions | |
| warning | #7A5C00 / #FFD866 | Warning states, caution | |
| info | #0047AB / #00B0FF | Informational states |
Background Tokens
Neutral surface colors that adapt between light and dark themes.
| Surface | Light / Dark | Usage | |
|---|---|---|---|
| base | #FAF9F5 / #0A0A0A | Page background | |
| surface | #FFFFFF / #141414 | Cards, elevated surfaces | |
| muted | #F3F2EE / #1E1E1E | Subdued backgrounds, secondary surfaces |
CSS Variables
All mineral colors are available as CSS custom properties, registered in the Tailwind @theme block.
/* globals.css @theme inline block */ --color-cobalt: #0047AB; --color-tanzanite: #B388FF; --color-malachite: #64FFDA; --color-gold: #FFD740; --color-terracotta: #D4A574; /* Usage in Tailwind */ bg-[var(--color-cobalt)] text-[var(--color-tanzanite)]