Namola, in one place.
Every token, every component, every voice rule that makes a Namola surface feel like Namola — slimmed down to the essentials a team or AI agent can consume without wading through 2,400 lines of HTML.
The brand, in one paragraph.
Namola is South Africa's safety partner. The promise is We've got you. Reassuring, never alarming. A capable friend. Everyday safety, not panic.
Reassuring, never alarming.
We don't shout. We don't use red unless it's an actual emergency. Calm tone, structured layout.
A capable friend.
Plain language. Concrete numbers — minutes, kilometres, members. Never marketing fog.
Everyday safety, not panic.
Family, places, neighbourhood — daily-use surfaces first. SOS earns its emphasis by being rare in the UI.
Color.
Three brand colors do the heavy lifting: navy for depth, working blue for action, red for the signature dot. State colors are reserved for state.
The 60-30-10 rule
60% neutral surfaces · 30% navy depth · 10% blue/red accents. Red lives under 5%. Always.
Typography.
Poppins for everything. JetBrains Mono for numerics, eyebrows, and any moment that should feel a bit operational. Tighten letter-spacing as size grows.
Spacing & radii.
4-pt base. Multiples 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96.
Spacing scale
Radii
Buttons.
Primary blue. Secondary outline. Ghost for tertiary. SOS pill is reserved for the actual SOS surface — never decorative.
Variants
Sizes
Forms.
Soft hairlines · 8px corners · blue focus ring. Labels above inputs.
Cards.
Namola Free
Communities, basic Find, test SOS.
R29 / month
Unlimited Family · Places · public dispatch.
R59 / month
Private armed & medical · operator callback.
The tier system.
Three badges, three meanings. The red parallelogram on Plus is the only permitted use of red on a non-emergency surface — it stands in for the i-dot.
Voice & copy.
Short. Concrete. Reassuring. Numbers over adjectives. Never use the word “panic” in a UI label.
“Help arrives in minutes, not hours.” Concrete comparison. Calm. Specific.
“Don't panic — we save lives daily!” Two contradictions in one line. Avoid the alarm word; never claim outcomes.
“Kgosi arrived at Crawford School.” Plain language. Names a person. Useful, not creepy.
“Subject A entered geofence zone B.” Robotic. Surveillance-vibe. Everyone hates this.
Using this with Claude (or any AI).
Paste this brief into a new chat and any agent can produce a Namola-correct artefact.
Brand: Namola — South African personal safety app. Promise: We've got you. Reassuring, never alarming. Palette: navy #202060 primary brand · headers, depth navy-deep #15153F Plus tier, deepest dark blue #2B4CB0 actions, links, Essential red #E01830 signature i-dot, emergency only Type: Poppins (400/500/600/700/800) + JetBrains Mono. Tighten letter-spacing as size grows. Use mono for numerics. Components: see /design-system on the marketing site, or import the CSS classes (.n-btn, .n-card, .n-input, .n-tier, .n-dot). Voice: short, concrete, calm. Never the word "panic" in a label. Use real SA context (Sandton, Crawford School, Aura, PSIRA, R-prices).