Skip to content

The Nyuchi Design System

One design system for the way the internet actually reaches Africa.

The Five African Minerals palette, a token layer, a shadcn-compatible component registry, and a 3D frontend architecture — the shared design language behind Mukoko, Nyuchi, Shamwari, and Bundu. Implemented in this repo as @bundu-labs/ui.

Open the design portal Explore foundations

What it is

A design system, not a theme.

The Nyuchi Design System is the design language every product in the Bundu ecosystem is built from. It is not a stylesheet bolted onto each app — it is one token layer, one component registry, and one architecture, consumed everywhere.

A brand picks its own primary mineral — Nyuchi runs on gold — and everything else stays shared. A fix to a component or a contrast pair lands across Mukoko, Nyuchi, Shamwari, and Bundu at once. The canonical, always-current reference is the design portal; in this repository the implementation ships as the @bundu-labs/ui package.

The palette

Five African Minerals.

The colour system draws from the continent's mineral wealth. Every swatch below is a live design token — the same value every component in the ecosystem reads.

  • Cobalt

    Democratic Republic of the Congo

    Primary actions, links, active states.

  • Tanzanite

    Tanzania

    Brand identity, premium features, purple accents.

  • Malachite

    Congo

    Success states, positive indicators, growth.

  • Gold

    Ghana and South Africa

    Achievements, warmth, premium badges. Nyuchi's own primary.

  • Terracotta

    Pan-African

    Community features, grounding, heritage.

Container and on-container tones, semantic tokens, and the full type scale live in Foundations .

The components

Built once. Rendered everywhere.

A sample of the shared building blocks, rendered here with the live design tokens. Buttons, inputs, and badges are pill-shaped by mandate; touch targets never drop below the accessible floor.

Buttons

Primary Secondary Outline Ghost

Badges

Cobalt Tanzanite Malachite Gold Terracotta

Input

Demo only — not a working field.

Ubuntu pull-quote

A person is a person through other persons.

See the full set, and how the shadcn-compatible registry works, in Components .

Doctrine

The constraints the system enforces.

Ubuntu is not a marketing claim — it is the spec. The design system encodes the same six constraints every Nyuchi product ships against, so they are inherited, not re-argued per app.

  • Outdoor-readable by default

    APCA Lc 90+ contrast on body text and 56-pixel touch targets are baked into the tokens — not a theme you opt into. The same components hold up on a verandah at noon.

  • Built for the connectivity gradient

    The resilience layer assumes 3G is the floor. Components mount in sequence, watch memory pressure, and degrade gracefully so a Tecno Spark and a Macbook render the same product.

  • Multi-language and RTL from day one

    Logical CSS properties, reflowable layouts, and a Noto type stack that carries African-language diacritics. English, Shona, and Ndebele are first-class, never localisations bolted on later.

  • One system, every surface

    Mukoko, Nyuchi, Shamwari, and Bundu draw from one token layer and one registry. A brand sets its own primary mineral; everything else stays shared, so a fix lands everywhere at once.

  • Accessibility is continuous, not a checklist

    An assurance node re-validates every semantic-colour pair against protanopia, deuteranopia, tritanopia, and achromatopsia simulations daily. Regressions become tracked issues automatically.

  • The registry is the source of truth

    Production source for every stable component lives in the registry and renders shadcn-compatible. The portal pulls from the database at build time — documentation can never drift from the code.

The same doctrine, framed as engineering decisions, lives on Philosophy .

Explore

Three ways in.

From the blog

Notes on the design system.

No design posts yet. When the editorial team publishes writing in the blog's Design category, it will surface here automatically.

Read the blog

The architecture underneath

The Design System sits on Mzizi.

The Nyuchi Design System gives teams the colour, type, components, and patterns. Mzizi is the architecture framework underneath — the structural model that defines how the layers compose into a resilient, observable whole. They are separate projects, versioned separately; Mzizi has its own home at mzizi.dev.

See the architecture Open the design portal

Frequently asked

What is the Nyuchi Design System?
The Nyuchi Design System is the shared design system behind every Bundu-ecosystem product — Mukoko, Nyuchi, Shamwari, and Bundu. It pairs the Five African Minerals palette with a token layer, a shadcn-compatible component registry, and a 3D frontend architecture. In this codebase its implementation ships as the @bundu-labs/ui package.
How is the Nyuchi Design System different from Mzizi?
The Nyuchi Design System is the colour, typography, components, and patterns teams build interfaces with. Mzizi is the architecture framework underneath it — the structural model that defines how layers compose. The design system sits on Mzizi; they ship and version separately. Mzizi has its own site at mzizi.dev.
Where is the canonical documentation?
The design portal at design.nyuchi.com is the canonical, always-current record. It renders every component, token, and demo straight from the registry database, so the documentation cannot drift from the code. This page is the marketing introduction; the portal is the working reference.
Can I use the components in my own project?
Yes. The registry is shadcn-compatible, so components install into any project that follows the shadcn conventions. The design portal documents the registry and the install flow.