Skip to main content
This section documents the Mzizi registry — the shipping design system served at mzizi.dev — not Mzizi-lang, the Phase 0 research language the rest of this site covers. The ecosystem page draws the line.
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.

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