Resources · Nzinga Design System

Nzinga mosaic in magenta, flame and Volt

Design

Resources

Where each rule lives in the code, how the design system is built and published, and what has changed.

Phone App

Expo SDK 58

Repository

gtcx-ecosystem/nzinga-voice

The repository is private: the link works only for people with access.

Open on GitHub

It stays private because the app is built on licensed Native Templates components that may not be published or redistributed.

Sources of Truth

What

File

Colour tokens (Tailwind)

apps/mobile/utils/color-theme.ts

Colour tokens (JS)

apps/mobile/app/contexts/ThemeColors.tsx

Type scale, gutter

apps/mobile/tailwind.config.js

Shadows

apps/mobile/utils/useShadow.ts

Components

apps/mobile/components/, brand in components/brand/

Consent words for members

apps/mobile/lib/consent-copy.ts

Consent text

consent/v1.md

Consent, invites, contacts, ledger, profile rules

packages/core/src/

What the server holds

apps/api/src/store.ts, apps/api/src/app.ts

Languages and greetings

apps/mobile/lib/languages.ts

Copy and sizing rules

apps/mobile/CLAUDE.md

Screen map and visual spec

SCREENS.md, docs/screen-guide.html

Brand

docs/logo/ (page, generator, glyphs)

Sovereignty scorecard

african-tokenizer/SOVEREIGNTY.md (the tokenizer repository)

Note

Older values in two documents. SCREENS.md and docs/TEMPLATE-MAP.md still list an earlier type scale (base 15) and a 16pt gutter. The app uses the compact scale (base 14) and a 20pt gutter from tailwind.config.js, which this site follows.

Other Pages

Screen Guide

Every screen, clickable, with what it is built from and the API it calls.

Brand Page

The cowrie's construction, symmetry tests, kerning and sources.

Original Gallery

The single-page component gallery this site's Components page grew from.

Deploy

Source

scripts/build-design-web.py · scripts/deploy-web.sh

The design system is part of the platform site. Its pages are the site's Docs page with the design system's words. A build script writes them into web/design, and the site's deploy script publishes them with every other page.

Shell

terminal

python3 scripts/build-design-web.py # writes web/design and web/nzinga/design

bash scripts/deploy-web.sh --build # build only, into dist/web

Built path

From

design/index.html … design/resources.html

docs/site/ (the words) on the template's Docs page

design/screens.html

docs/screen-guide.html (the prototype, unchanged)

nzinga/design/nzinga-ds.css

docs/ds/nzinga-ds.css, scoped to the live examples

nzinga/design/design.js, screens.js

The icons, cowrie and wordmark helpers, and the Screens page controls

Every page sends X-Robots-Tag: noindex.
Edit the words in docs/site or the prototype in docs/screen-guide.html, then run the build script again. Never edit web/design by hand.

Changelog

Source

git log

Date

Change

5 Nov 2026

The design system moved into the platform site, on its Docs page, with the Screens prototype inside it.

5 Nov 2026

This site: one page per section with principles, brand, communication, accessibility, foundations, components, patterns and resources; shared shell; light by default with a dark mode.

5 Nov 2026

Cloudflare Pages site for the screen guide, design system and brand.

5 Nov 2026

Compact pass: 14pt body, smaller titles, 20pt gutter, 44pt buttons, in the app, guide and design system.

3 Nov 2026

Text-only full-width calls to action, lighter icons, one-line choice rows, no-orphan wrapping.

3 Nov 2026

Design pass against the template screens: one accent per screen, quiet wallet actions, simpler consent cards.

3 Nov 2026

Wallet rebuilt on Walley; guided recording sessions and Record Well (Courso); theme reds moved to magenta.

3 Nov 2026

Compact type scale and the Dynamic Type cap; accessibility props on Button, Switch, Chip, Header, Placeholder, Expandable.

3 Nov 2026

Nzinga Electric theme, cowrie app icons and splash, brand components; the app renamed to Nzinga.

3 Nov 2026

Logo: the cowrie mark, symmetric to the unit, with the drawn wordmark; NETWORK as the descriptor.

2 Nov 2026

First clickable screen guide for the member app.