Skip to main content
This section documents Mzizi’s components: the registry and design system that support the language, served through api.mzizi.dev and browsable at mzizi.dev/components. It is not documentation for the language itself; the ecosystem page draws the line. Rust components (Mzizi Roots) lead. The React components are the React build: they keep working, but they are deprioritised.
Foundations are the decisions that shape every component and pattern in the design system. They define how tokens, typography, layout, motion, icons, accessibility and internationalisation are handled, and they are constraints rather than suggestions — N1 owning every CSS value is what makes the other seven nodes portable. The design system is also published on claude.ai as the Design System artifact, built file for file from the design-system/ folder in mzizi-dev/mzizi-registry (arriving with mzizi-registry#418), which is the copy to change.

​
Guiding philosophy

The design system is built for the reality of African infrastructure. A user on a 2G connection is not an edge case; it is the primary case. Four pillars shape the decisions:
  1. Local-first — data and UI work offline, syncing when connectivity returns.
  2. Mobile-first — most access is on mobile devices with constrained bandwidth and lower-end hardware.
  3. Open source and sovereign — no dependency on infrastructure the ecosystem does not control.
  4. Open data — transparent data pipelines.
Those translate into concrete constraints:
  • Language-inclusive — the font stack covers African languages with full diacritics. African languages are first-class, not localisations.
  • Accessible by default — APCA 3.0 contrast, 56px default and 48px minimum touch targets.
  • Performant on constrained devices — lazy loading, memory-pressure monitoring and sequential mount queues.
  • Offline-capable — components and patterns degrade gracefully.

​
Explore

Design tokens

The Seven African Minerals, the semantic status categories, and how a value flows from N1 to everything above it.

Typography

Font stack, type scale, heading hierarchy, and when serif rather than sans.

Layout

Breakpoints, the spacing scale, container patterns and grid shapes.

Motion

Timing, easing, enter and exit patterns, and reduced-motion behaviour.

Icons

Icon conventions, the size scale, and accessible icon-only controls.

Accessibility

APCA 3.0 contrast thresholds, touch targets, keyboard navigation, screen readers.

Internationalisation

Why Noto Sans, text direction, and locale-aware number and date formatting.