Brand

Logo

docs/logo/index.html apps/mobile/components/brand/Cowrie.tsx components/brand/Wordmark.tsx

The mark is a cowrie: the shell that served as currency across the continent for centuries, and whose toothed opening has always looked like a mouth. Here the opening is drawn as a voice: eleven bars that rise and fall like a level meter. The wordmark is nzinga in drawn Outfit ExtraBold outlines, over NETWORK.

The Mark

• Shape a true 7:10 ellipse, 56 by 80 units
• Slit eleven bars, 3.6 units tall on a 6.4 pitch; widths 32, 30, 26, 20, 14, 8
• Small below 32px a seven-bar slit keeps the gaps open; both are drawn, not scaled
• Spectrum Magenta to Flame to Volt, top to bottom; applied after the silhouette, never relied on

The Wordmark

• Name lowercase, because it is a word people say
• Kerning tracked tighter than Outfit's defaults, five pairs set by eye
• NETWORK Outfit Bold capitals at 62% of the x-height, as wide as the name, tracked 0.31 em
• Never typed always the drawn outlines; never set the name in a font

Lockups and Where They Go

Clear Space and Minimum Sizes

App Icon

Icon corners follow the platform: about 22% of the icon's size on iPhone. The mark sits at the centre with its clear space.

Misuse

Also never: typed instead of drawn, the spectrum reversed, the slit filled, or the mark placed on a photo without a solid ground.

Open the full brand page: the symmetry tests, kerning table, alternate descriptor and the sources behind the cowrie and the name.

Colour

apps/mobile/utils/color-theme.ts app/contexts/ThemeColors.tsx docs/logo/index.html

Nzinga Electric is a near-black ground, near-white ink and five live colours, each with one job. The app is dark by default. Ratios below are the contrast of black (#0B0B10) or white (#F7F7FA) text on each colour.

Click a swatch to copy its value. Measured ratios for every pair are on Accessibility.

Rules

1. One accent per screen. A screen leads with one live colour. Volt marks the one action or the money; the other colours mark state, not decoration.
2. Content on Volt is black. Always text-black or colors.onHighlight. White on Volt measures 1.1:1.
3. Volt is never text on a light ground. Use accent, which is Volt in dark mode and #5C7A00 in light mode.
4. The spectrum belongs to the mark and to the record button. It is not a background for text.
5. Change both files. A colour lives in utils/color-theme.ts (Tailwind) and app/contexts/ThemeColors.tsx (JS); change them together.

Typography

apps/mobile/tailwind.config.js components/ThemedText.tsx

Two families. Outfit (Bold) for display titles through font-outfit-bold; the platform font (San Francisco on iPhone, Roboto on Android) for everything else. On the web, this site uses Inter in place of the platform font. The scale is compact on purpose: the owner found the templates' text oversized on a phone.

• Body text is 14pt. Text with no size class renders at 14pt.
• Screen and page titles are in Title Case: "Who Can Use Your Recordings", "How You're Paid".
• ThemedText caps Dynamic Type at 1.25 times, so text grows for people who need it without breaking layouts.
• The full scale, with every step, is on Foundations.

Iconography

apps/mobile/components/Icon.tsx apps/mobile/CLAUDE.md (sizing rules)

Icons are Lucide, drawn through the Icon component at a 1.75 stroke and 24pt by default, in the text colour unless they sit on a coloured surface.

1. Full-width calls to action are text only. "Send for review", "I Agree", "Save method". The one exception in the app is Record now on Home, which keeps its microphone because the icon is the meaning.
2. Icons only where they add meaning: the leading icon of a settings row, a status, a round action, the record button.
3. Icons come with words. An icon alone is a puzzle for a new reader; every icon button has a visible label or an accessibility label.

Imagery and Motion

apps/mobile/components/AnimatedView.tsx components/RecordButton.tsx components/SessionCard.tsx docs/ds/nzinga-ds.css

Imagery

• The app uses no stock photography. Its pictures are the member's own profile photo (kept on the phone), the cowrie, and colour panels.
• Guided sessions are colour panels in cyan, violet, magenta or flame with black content and one icon. The themes are everyday life, not scenery.
• When people appear in marketing, show them as members with something to say. See the imagery rules in Culture.

Motion

• Motion confirms what happened: a screen fades in (AnimatedView), the balance digits flip, the chart line draws once, the record button breathes while it records.
• Nothing moves on its own to attract attention, and nothing loops except the live recording state.
• Short and quiet: fades of a few hundred milliseconds, no bounces on money or consent.