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://mzizi.dev/api/v1/brand. Values below were read from it on 11 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.
Tanzanite is --primary, not cobalt. Cobalt is the exceptional mineral, reserved for links, informational states and the focus ring. Reaching for cobalt as a primary action colour is the most common token mistake in this system.

​
Semantic colours

Components reference semantic names, never minerals directly. Fourteen are published; these are the ones components reach for most:

​
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.