Nzinga Network ยท Design System
The Nzinga Design System
How Nzinga looks, sounds and behaves. The principles behind every screen, the brand, the words, the accessibility rules, and the components the phone app is built from. Every rule here points to the file it comes from.
Your language. Your voice. Your terms.
What Nzinga Is
README.md SPEC.md apps/mobile/lib/consent-copy.ts
Nzinga is an invite-only phone app for African languages. Members sign in with the phone number they already have, join with an invite code from someone they know, and record voice notes in their own languages.
For every recording, the member chooses who can use it. There are exactly four choices. Recordings that are shared and accepted are paid per accepted minute, and when partners license recordings, part of that income comes back to the member.
Friends are found by comparing scrambled phone numbers. Contacts are hashed on the phone, and the server keeps none of them.
The name comes from Njinga Mbande, who in Luanda in 1622 refused the lower seat and negotiated as an equal. The mark is a cowrie: the shell that was money, with its opening drawn as a voice.
Who Can Use Your Recordings
Your starting choice. You can change it on every recording.
How to Use This System
Start with the principles: they decide what a screen may ask for, what it must explain and what it may never do. Then use the brand and communication pages for how it looks and sounds, and the foundations, components and patterns for how it is built.
When two documents disagree, the code wins. Tokens live in apps/mobile/utils/color-theme.ts, app/contexts/ThemeColors.tsx and tailwind.config.js; member-facing consent words live in apps/mobile/lib/consent-copy.ts. This site is written from those files.
Principles
Privacy, sovereignty and social by design.
Brand
Mark, wordmark, colour, type, icons.
Communication
Voice, tone and the writing rules.
Accessibility
Measured contrast, targets and text size.
Foundations
Tokens, type scale, spacing, radius.
Components
Every component, live, in both themes.
Patterns
Consent, joining, recording, payouts.
Screens
Every screen in the app, clickable.
What Is in the Repo
README.md
| Path | What it holds |
|---|---|
apps/mobile | The phone app (Expo SDK 58, React Native, NativeWind, Expo Router), built on the Luna template's component system. |
apps/api | The API server: sign-in, invites, contacts matching, recordings, consent, review and earnings. |
packages/core | Shared rules used by the server and the app: consent, invites, contacts matching, the earnings ledger, profiles. |
consent/ | The consent text members are shown, one file per version (draft for legal review). |
docs/site | This site: one page per section, sharing site.css and site.js. |
docs/ds | nzinga-ds.css, the web reproduction of the app's components that every live example here loads. |
docs/screen-guide.html | The visual spec: every screen, clickable, with what it is built from. |
docs/logo | The brand page and the generator for the mark and wordmark. |
SCREENS.md, SPEC.md | The screen map, and the product and technical specification. |
Principles at a Glance
Privacy by Design
A choice for every recording, withdraw any time, contacts hashed and never stored, audio on the phone.
Sovereignty by Design
Members own their voice. African control of data, tokenizer, standards and infrastructure, stated honestly.
Social by Design
Invite-only circles of people who know each other. Bonuses to the direct inviter only. No public profiles.
Culture
Greetings in the member's language, everyday themes, respect for elders and for what is not ours to record.
Fair Pay
Plain money: paid per accepted minute of your own voice, a licence share, and clear minimums and timing.
Usable by Everyone
Measured contrast, 44pt targets, text that grows, labels for screen readers, small downloads.