Nzinga mosaic in magenta, flame and Volt
Design
/
Components

Components

Web reproductions of the components the phone app is built from, at their real sizes, in the Nzinga Electric palette.

Phone App
Expo SDK 58

Each example loads nzinga-ds.css, so what you review here is what gets built. Most show the app's dark theme beside its light theme.

Source
apps/mobile/components/* · docs/ds/nzinga-ds.css

Luna is the base template; a badge names the template where a component came from elsewhere.

01

Actions

What the member does: the buttons and round actions.

Button

File
components/Button.tsx variant primary | secondary | outline | ghost · size small py-2 | medium py-3 | large py-3.5 (48pt) · rounded lg default, full · iconStart / iconEnd · loading · disabled · href
  • Label Text font-medium at the 14px default; text-invert on primary, text-primary otherwise
  • Icons 16 / 18 / 20 by size, mr-2 / ml-2
  • Volt CTA !bg-highlight + !text-black, iconColor onHighlight (Record now, I Agree, Send for review, Save method)
  • Withdraw outline with !border-flame and !text-flame
  • Loading spinner in black on Volt, accent on outline, invert on primary
Example
Live component

Welcome's pills: flex-1 rounded-full py-4, icon 20, label ml-2 text-sm font-medium; the invite pill is bg-text with !text-invert.

ActionButton

Template
from Walley
File
Walley components/ActionButton.tsx: icon · label (two lines with \n) · href / onPress · disabled · variant highlight | secondary
  • Circle h-16 w-16 rounded-full bg-highlight, Icon 24 in black
  • secondary border border-border bg-secondary, icon in the text colour
  • Label mt-2 text-center text-sm font-semibold
  • Wallet row flex-row justify-between px-global: Withdraw (disabled below the minimum), Statements, How you're paid, Payout method
Example
Live component

Withdraw disabled until the available balance reaches the minimum payout.

Last one in the secondary look, for actions that move no money.

02

Inputs

Fields the member types into or switches.

Input

File
components/forms/Input.tsx variant animated (default) | classic | underlined · label · rightIcon · error · isPassword · containerClassName
  • Field h-14 (56), 14px text, border border-border
  • animated rounded-lg, the label floats from 16px placeholder to 12px on a background box
  • classic rounded-2xl, label above in mb-2 font-medium; search fields are !rounded-full !border-transparent !bg-secondary
  • underlined border-b-2, mb-6 (Review title, Edit Profile)
  • Error border-magenta and mt-1 text-xs text-magenta
Example
Live component
Invite code
K7Q2-M8XA
Name
Name

Tell us what to call you.

Phone number
With the country code
Search by title or language
Title
Directions from the market
Name on the account
Amara Okafor

CodeInput

File
components/CodeInput.tsx (Nzinga): six boxes over a hidden TextInput (number pad, one-time-code autofill) · onComplete at six digits · error · disabled
  • Box h-14 flex-1 rounded-lg border, gap-2
  • Current border-highlight with a blinking h-7 w-0.5 Volt caret
  • Digit text-2xl font-semibold
  • Error every box border-magenta, mt-2 text-xs text-magenta
Example
Live component
482
482910

That code is not right. Check it and try again.

Switch

File
components/forms/Switch.tsx label · description · icon · value · onChange
  • Track h-6 w-10; off bg-secondary, on bg-highlight
  • Thumb h-5 w-5 bg-white shadow-sm
  • Label text-base font-medium · Description text-sm text-subtext
Example
Live component
Microphone · neededTo record voice notes when you tap record. Nothing records on its own. Allowed.
Pause all sharingNew recordings stay with you until you turn this off.
03

Selection

Choosing one thing from a few, including who can use a recording.

Chip

File
components/Chip.tsx label · isSelected · size xs | sm | md (default) | lg | xl | xxl · icon · href / onPress
  • xs / sm text-xs · md px-3 py-1 text-sm · lg px-4 py-1.5 text-base (filters, setup, payout)
  • Unselected bg-secondary text-subtext · Selected bg-text text-invert
  • Icon -ml-1 mr-2 in colors.icon
Example
Live component
AllRecordingsInvitesPayouts
SwahiliHausaAdd a languageDemo data
xssmmdlgxlxxl
Template
from Feedy
File
components/ConsentOption.tsx · Feedy , from subscription.tsx SubscriptionCard: title · description · pay / paid · active · suggested · icon · disabled
  • Card mb-3 rounded-2xl border bg-secondary, Volt border when active
  • Inner px-4 py-3.5
  • Radio h-6 w-6 (24pt), filled Volt with a black Check 14 when active
  • Title text-base font-semibold, "Suggested" in text-accent
  • Description mt-0.5 text-sm text-subtext
  • Pay line Coins / CircleOff 14 + text-xs font-medium (setup choice only)
  • Names exactly "Only me", "Nzinga's models", "Nzinga and approved partners", "Everyone"
Example
Live component

Left: the setup choice with the pay line. Right: Review, Privacy and the change sheet (description and pay joined), with sharing paused so only "Only me" is enabled.

05

Content

The building blocks of a screen and what fills it.

Screen shell

File
ThemedScroller · ThemedFooter (ThemeScroller.tsx) flex-1 bg-background px-global with a trailing h-20 spacer · (ThemeFooter.tsx) px-global pt-global, paddingBottom insets.bottom, no border · every screen has a Header; sticky actions go in the footer
Example
Live component

Section

File
components/layout/Section.tsx title · subtitle · titleSize sm | md | lg | xl (default) | 2xl | 3xl | 4xl · link / linkText · icon
  • Title font-bold at the titleSize class
  • Subtitle text-subtext at the 14px default
  • Link text-primary underline (14px), right-aligned
  • Page titles 4xl on Library, Circle, Payout, Statements, All Activity, Languages, Notifications
Example
Live component
Library
5 recordings · 3 accepted · 12 min
Recent activity See all
Record now
Today's idea, in Swahili
Sessions See all
Short sets of ideas on one theme
Who can use new recordings
File
components/ListLink.tsx icon (18) · title · description · href / onPress · hasBorder · showChevron · disabled
  • Row py-5; px-5 inside a group
  • Title text-base font-medium · Description text-xs text-subtext
  • Group rounded-3xl bg-secondary + shadow medium (Profile, About); flat elsewhere
Example
Live component

Expandable

File
components/Expandable.tsx title · description · icon (24, mr-3) · defaultExpanded · onChange · content px-4 pb-4 pt-4, children "text-sm leading-6 text-subtext"
Example
Live component

TipCard

File
components/TipCard.tsx , Luna's chat-home card: title · icon · label · note · tone default | highlight | cyan | violet | magenta | flame · size md | lg · rightIcon / onRightPress
  • Card rounded-3xl border border-border bg-background, min-h 44, mb-2; never changes colour
  • md p-3, icon box h-7 w-7 rounded-xl bg-secondary, Icon 15, title text-sm font-semibold
  • lg p-4, box h-10 w-10, Icon 20, title text-base font-semibold leading-6
  • Tone colours the icon and the label (text-[11px] uppercase tracking-wider)
  • Note mt-0.5 text-xs text-subtext · Right h-9 w-9, Icon 18 subtext
Example
Live component

Rows and details

File
RecentRow · RecordingRow · InviteRow · DetailItem · Statement Inline sub-components the screens repeat: (Home) · (Library) · (Circle) · (Payout review, Transaction, from Walley) · (Statements, Walley) · summary rows (How You're Paid, Agreement)
Example
Live component

SessionCard

Template
from Courso
File
components/SessionCard.tsx · Courso , from FeaturedCourse: session (lib/sessions.ts) · status · width (260; Sessions screen up to 320) · opens /screens/session
  • Panel min-h-[200px] rounded-3xl p-5 in the session's tone: cyan, violet, magenta or flame; content is black
  • Top icon tile h-11 w-11 rounded-2xl bg-black/10 and the status pill (New, 2 of 5 recorded, Complete)
  • Title mt-6 font-outfit-bold text-xl · Meta "5 prompts · 8 min · about $1.60" text-sm text-black/70
  • Progress mt-3, h 5, bg-black/15 with a black fill
  • Session header the same panel at full width with the title at font-outfit-bold text-3xl
Example
Live component

SessionRow and PromptUnit

Template
from Courso
File
components/SessionRow.tsx · Courso · PromptUnit , from CourseList · in app/screens/session.tsx, Courso's unit row
  • SessionRow tone tile h-16 w-16 rounded-2xl, title text-base font-bold, meta text-xs subtext with dot separators, a thin progress line once started, h-11 w-11 rounded-xl chevron tile
  • PromptUnit py-4 border-b, h-12 w-12 rounded-xl tile (Volt with a check once recorded, else the number), state line Recorded / Up next / Not yet, Mic or RotateCcw tile
Example
Live component

Avatar

File
components/Avatar.tsx src · name (initials) · size xxs 28 · xs 32 · sm 40 · md 48 · lg 64 · xl 80 · xxl 96 · border · link
Example
Live component
AOAOAOAOAOAO

Initials are 14px font-medium at every size; Home uses xs, Circle rows sm, Profile xl, the setup photo xxl with a border.

Cards

File
components/Card.tsx Bordered card (Luna profile.tsx: rounded-3xl border, no fill) · list group (rounded-3xl bg-secondary, shadow medium) · info note (rounded-2xl bg-secondary p-4, Icon 18, text-sm text-subtext) · is present but no screen uses it
Example
Live component
AO
Amara Okafor
Phone number on file
Swahili · member since October
HausaEnglish
Requested on this phone; Nzinga confirms by SMS before any money moves. Check the number and name: they must match the account.
Found by comparing scrambled phone numbers. Nzinga keeps none of them, and people who are not members are never revealed.

Icon

File
components/Icon.tsx Lucide, size 24, strokeWidth 1.75, colour colors.text · variant plain | bordered | contained · iconSize xs 32/16 · s 40/20 · m 48/24 · l 64/32 · xl 80/40 · xxl 96/48
Example
Live component

plain 24 · contained xs / s / m · bordered l / xl · the Volt disc on Saved and Payout (h-20 w-20 bg-highlight, black icon).

06

Feedback

Status, progress and what to show when there is nothing yet.

StatusBadge

Template
from Multia
File
components/StatusBadge.tsx · Multia , from 's order pill: label · tone · dot · rounded-full px-2 py-1, text-xs font-semibold in the tone, the fill a tint of the same colour (alpha 2E dark, 24 light) so it reads on both themes
Example
Live component

highlight / green → accent · cyan / amber → cyan · flame / red → flame · magenta · violet · muted: bg-secondary with subtext.

ProgressBar

Template
from Feedy
File
Feedy · SetupProgress components/ProgressBar.tsx, extended: percentage · height (8) · backgroundColor (bg-secondary) · fillColor (bg-highlight) · segments · label · animates on focus · is the 6-piece setup line under the setup headers
Example
Live component
Ready to withdrawminimum $5.00

$1.90 more to reach the minimum payout.

Wallet's minimum payout bar · the setup line at step 4 of 6 · a session row's 4pt line.

Timelines

Template
from Multia
File
Multia · Walley order-detail TimelineStep (Recording Detail, Saved) · send.tsx "Track your transfer" (Payout success)
  • Done Volt disc with a black check · Current cyan ring with a cyan dot · Failed flame disc with an X · To come bordered, title in subtext
  • Payout Check in accent when done, Circle in subtext to come, ml-3 h-10 connectors
Example
Live component

Placeholder

File
components/Placeholder.tsx icon · title · subtitle · button with href or onPress · circle h-20 w-20 bordered, Icon 30 · title text-xl font-bold · subtitle text-subtext · Button outline rounded full
Example
Live component
Not enough to withdraw yet
The minimum payout is $5.00. You have $3.10 available.
Could not load your wallet
Check your connection and try again.
07

Money

Balances, earnings and activity.

StatCard

Template
from Multia
File
components/StatCard.tsx · Multia , from analytics.tsx: title · value · caption · tone default | accent | cyan | magenta | violet · icon · trend · href
  • Card rounded-2xl bg-secondary p-global
  • Title text-sm text-subtext · Value text-xl font-bold in the tone · Caption text-xs text-subtext
  • Icon h-8 w-8 rounded-full bg-background, Icon 16 subtext
  • Trend mt-10 pill, accent up / magenta down
Example
Live component
Example
Live component

FlipBalance

Template
from Walley
File
Walley components/FlipBalance.tsx: value (formatted) · visible · label · textClassName · each digit in a 48pt window slides to "•" when hidden, 280 ms, 30 ms stagger; symbols and separators stay
Example
Live component
Available balance
+$1.80 this week
2h 11m accepted · in US dollars
Available balance
+$1.80 this week
2h 11m accepted · in US dollars

BalanceChart

Template
from Walley
File
Walley components/BalanceChart.tsx: data · labels · visible · height (Wallet 220) · formatYLabel · line and fill in colors.highlight (fill .25), dashed grid · Wallet reveals it left to right over 2 s each time the tab is focused
Example
Live component

TransactionItem

Template
from Walley
File
Walley components/TransactionItem.tsx: title · time · amount · method · isIncome · pending · icon · href / onPress
  • Row py-3, minHeight 64 · circle h-14 w-14 bg-secondary, Icon 24
  • Title text-lg font-bold · Time text-sm text-subtext
  • Amount text-lg font-semibold: income accent, pending cyan, payouts primary · Method (status) text-sm text-subtext
Example
Live component
08

Recording

Recording and playing back.

RecordButton

File
components/RecordButton.tsx · AiCircle , on Luna's : size (Record screen 200) · live · busy · icon · ring size × 0.56 on bg-background (shadow large), gradient ring − 12 in the brand spectrum Magenta → Flame → Volt, disc ring − 20, Mic at disc × 0.3, stroke 1.2 · live: the ring breathes to 1.06, the icon turns magenta and speaking.json plays over it at 0.2 · the recording screen's level meter draws magenta bars
Example
Live component

AudioPlayerBar and recording controls

File
components/AudioPlayerBar.tsx · recording.tsx (Nzinga, in Luna's ChatInput box): uri · durationSeconds · unavailableText · tap the bars to seek · controls in the same box
  • Box rounded-[25px] border bg-background px-3 py-3 + shadow card
  • Play h-11 w-11 rounded-full bg-primary, Play/Pause 18 in invert
  • Bars 36, played in Volt, the rest subtext at .45 · Time text-xs tabular
  • Recording Pause and Trash2 in h-11 w-11 bg-secondary circles, Done in a Volt pill (min-w 120) with black text
Example
Live component
09

Brand

The mark and the wordmark as components. They are generated from docs/logo; never retype the wordmark as text. The rules for using them are on Brand, Logo.

Cowrie

File
components/brand/Cowrie.tsx size · color (the shell) · ground (the slit) · spectrum · small (seven bars, automatic below 32)
Example
Live component
Spectrum · 96
Volt · in the app
Black on Volt
40 · 24 · 16

Welcome tints the mark per slide (spectrum, cyan, Volt); About sets the spectrum mark over the two-line wordmark.

Wordmark

File
components/brand/Wordmark.tsx width · color · descriptor (adds NETWORK) · short form 3079 × 1000, two-line form 3079 × 1421
Example
Live component
Short form · Home 92, Welcome 104, Phone 112
About · 168
Note
Colour, type, spacing and shadows moved to Foundations. The original single-page gallery is still at ds/index.html.
Previous
← Foundations
Next
Patterns →