Resources · Nzinga Design System

Resources

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

Repository

gtcx-ecosystem/nzinga-voice

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

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)

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

scripts/deploy-docs.sh DEPLOY.md

The site is plain HTML, CSS and JavaScript with no build step. The deploy script copies the pages into one folder and publishes it to Cloudflare Pages (project nzinga-design).

bash scripts/deploy-docs.sh --build   # build only, into dist/docs-site
bash scripts/deploy-docs.sh           # build and deploy (needs CLOUDFLARE_API_TOKEN and CLOUDFLARE_ACCOUNT_ID)

Built path	From
`index.html`, `tokenizer.html`, `network.html`, `app.html`, `assets/`, `img/app/`	`docs/site/` (platform pages: the template markup with the Nzinga skin)
`design.html` … `resources.html`, `site.css`, `site.js`	`docs/site/`
`ds/nzinga-ds.css`, `ds/index.html`	`docs/ds/`
`screen-guide.html`	`docs/screen-guide.html`
`brand/index.html`	`docs/logo/index.html`

Every page sends X-Robots-Tag: noindex. The licensed template screenshots in docs/native-templates-every-screen are never copied, and the build stops if any appear.
Pages link to each other with relative paths written for the built layout, so open the built folder, not docs/site, to click through.
To add a page: write docs/site/name.html with the same shell (header, sidebar, footer slots and site.js), then add it to NAV in site.js. Marketing pages set data-section on <body> and get the header and footer without the design system sidebar; the top-level links live in SITE_NAV.

Changelog

git log

Date	Change
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.