Nzinga mosaic in magenta, flame and Volt
Design
/
Overview

Design System

How Nzinga looks, sounds and behaves.

Phone App
Expo SDK 58

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

What Nzinga Is

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

Example
Live component

Who Can Use Your Recordings

Your starting choice. You can change it on every recording.

02

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.

01
Principles
Privacy, sovereignty, social, culture and fair pay. The why behind every rule.
02
Brand
The cowrie, the wordmark, Nzinga Electric, type and icons.
03
Communication
Voice, tone by moment, writing rules and languages.
04
Accessibility
Contrast, targets, text size, screen readers, low bandwidth.
05
Build
Foundations, components and patterns, then check the screen guide.
Note
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.
03

What Is in the Repo

Source
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
The words of these pages, one page per section. scripts/build-design-web.py sets them on the platform site's Docs page.
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.