Skip to main content
N1 is the only node allowed to define a CSS value. Every other node reads values through var(). That single rule is what makes the rest of the system portable: swapping the token layer is one of the three declared fork seams, and it works because nothing above N1 has an opinion about a hex code. The live token set is published at GET https://api.mzizi.dev/v1/brand. Values below were read from it on 29 September 2026 at brand version 4.0.31.

​
The Seven African Minerals

Seven, not five. A great deal of inherited documentation says “the Five African Minerals”. Sodalite and copper were added, and the five-mineral phrasing was removed from the framework repository and guarded against there. If you find it in a client, a manifest or a page, it is out of date.
Each mineral also carries a container pair — a pale fill for light mode and a deep one for dark — for hover states, selected rows and soft highlights.
--primary is never cobalt. Cobalt is the exceptional mineral, reserved for links, informational states and the focus ring, for every brand. Reaching for cobalt as a primary action colour is the most common token mistake in this system. Which colour --primary is depends on the brand; see brand minerals.

​
Brand minerals

Each brand in the Bundu ecosystem has a brand mineral, listed in the ecosystem array of GET /v1/brand. It sets that brand’s --primary. Read on 30 September 2026: The mukoko mini-apps and sister brands carry their own rows in the same array. events is Mukoko Events: the row was nhimbe until the brand was retired on 4 October 2026, and canon keeps nhimbe as a deprecated alias of it. Mzizi’s brand mineral is hematite, by the owner’s decision of 30 September 2026. Hematite is one of the seven heritage tones, not one of the Seven African Minerals: --color-hematite, #546E7A in light mode and #90A4AE in dark, “foundation, endurance, the substrate”. The registry’s default stylesheet, mzizi-tokens-globals.css (GET /v1/ui/mzizi-tokens-globals), resolves --primary per brand. Set data-brand on <html> to choose one; with no data-brand, the default is Mzizi, so --primary is var(--heritage-hematite-aa). Until 30 September 2026 that default was gold. --ring stays cobalt for every brand.
The -aa variants are the accessible tier of each family. For hematite that is #546E7A in light mode, which already clears the bar, and #C9D2D7 in dark mode.

​
Semantic colours

Components reference semantic names, never minerals directly. Fourteen are published; these are the ones components reach for most. The --primary value here is the one /v1/brand publishes, tanzanite; the stylesheet sets it per brand, as brand minerals describes.

​
The --status-* aliases

Five aliases exist over the semantic set, and a large share of the registry references them by those names:
They are not a second palette — they are a naming layer, declared in both the light and dark blocks so a utility class generates for each.
Earlier documentation listed eight semantic status categories — --severity-*, --notification-*, --connection-*, --tier-*, --crypto-*, --moderation-* and --health-* alongside --status-*. Only --status-* is defined in the published token layer. Connection and health states are covered by the semantic tokens above (--syncing, --offline, --success, --warning, --error) rather than by prefixed sets of their own.

​
Backgrounds

Surfaces are a ladder, not a single background colour:

​
Radii

Four numbers, and one identity rule. Buttons are always pill-shaped, and so are inputs, avatars and badges. That is a brand identity decision rather than a styling preference, and it is why those categories carry borderRadius: 9999 rather than a scale value.

​
Spacing

The scale runs from a 2px hairline upward, with names rather than raw numbers:

​
How a value reaches a component

The chain is semantic token → mineral token → value, and it is one-directional. A component that writes a hex code has broken the seam that lets an adopter fork the token layer and keep everything else.

​
Component specifications

Some tokens are component-shaped rather than colour-shaped, and they are published the same way: The 48px floor is not negotiable; see accessibility.