Skip to content

culture

· · 3 min read

Why Five African Minerals Drive the Nyuchi Design System

Cobalt, tanzanite, malachite, gold, terracotta. Five minerals, five regions, one design system that holds up in midday Harare sun.

By Bryan Fawcett

Most design systems pick their palette from a Pantone mood board. The Nyuchi Design System picks its palette from the geology of the continent it serves.

The five minerals are:

  • Cobalt (#0047AB) — Katanga (DRC) and the Zambian Copperbelt. Deep blue. Primary actions, links, the colour of the digital future.
  • Tanzanite (#B388FF) — Merelani Hills, Tanzania. Violet. Premium, brand identity, social features.
  • Malachite (#64FFDA) — Congo Copper Belt. Brilliant green. Success states, growth, positive indicators.
  • Gold (#FFD740) — Ghana, South Africa, Mali. Honey-warm yellow. Achievements, rewards, warmth. The Nyuchi brand mineral.
  • Terracotta (#A0522D) — Pan-African Sahel. Earth-warm sienna. Community, grounding, heritage. The Bundu Foundation mineral.

Why this matters more than it sounds

A palette is not a marketing claim. It is an architectural commit. Once you ship a design system grounded in named regional colours, every product downstream has to respect them. The cobalt of a primary button in Mukoko is the same cobalt that highlights an active row in a Nyuchi clinic dashboard. The palette is a contract between the brand and the engineering.

Each mineral carries:

  • A canonical hex (light + dark mode)
  • A container tone for soft fills (bg-cobalt-container)
  • An on-container tone for accessible text on that fill
  • A region of origin
  • A symbolism note
  • A usage rule

Designers and engineers query the canonical values from the Nyuchi Design Portal at https://design.nyuchi.com. The MCP server at design.nyuchi.com/mcp lets AI coding assistants query tokens directly. The marketing website mirrors them in CSS custom properties (one place — no hardcoded hex anywhere else in the codebase). Every product then consumes the variables.

The portal currently ships 561 registry items — components, blocks, and charts — all installable via the shadcn CLI:

npx shadcn@latest add https://design.nyuchi.com/api/v1/ui/button

What gets enforced

  • No hardcoded numbers. Raw hex outside the canonical token files is a CI failure (we run a token-consistency lint on every PR).
  • No default Tailwind colours. bg-red-500 is rejected; use a semantic token (bg-error) or a mineral (bg-cobalt).
  • Containers always pair with on-container. A bg-malachite-container text block must use text-malachite-on-container to keep contrast above APCA Lc 90+.
  • Border radii are ecosystem numbers: 7, 12, 14, 17. Buttons are always pill (rounded-full).

Why mineralogy, not flag colours

A few reasons:

  1. Flags are nationalist signifiers. A pan-African ecosystem built on one country's flag teaches every other country it is secondary. The minerals span the continent.
  2. Minerals are universally legible. A Tanzanian and a Ghanaian both recognise tanzanite and gold without translation.
  3. Minerals carry their own narrative. Cobalt's history runs through the entire Congo and Zambian Copperbelt — a complicated, important story we are happy to surface in our software.
  4. They look good. A palette has to ship. The Five Minerals system passes accessibility on cream and on charcoal, holds up against APCA contrast checks, and reads in midday sun.

Where to read more

If you want to use the Nyuchi Design System in your own work, the schema and the values are public. The @nyuchi/ui npm package provides Tailwind 4 design tokens and utilities for the Five African Minerals palette. The MCP server and the design portal are the source of truth.

Back to blog