foundations
Typography
Three families, three jobs. A ten-step scale. Weight creates hierarchy — colour never carries it on its own.
Read the full specThree families
Every surface uses exactly these three. No additions without design-system review.
- Display600 · 700Barlow--font-display.font-display
H1, H2, hero titles, section titles, marketing headings.
- Body400 · 500 · 600Source Sans 3--font-sans.font-sans
Body copy, UI text, forms — the default on every surface.
- Mono400Geist Mono--font-mono.font-mono
Code, API names, filenames, tabular numerals in tables.
Display specimen — Barlow
Display type carries the surface. Barlow 700 on hero, Barlow 600 on sections. Tight tracking at large sizes.
Safety data infrastructure.
Built for the phones guards already carry.
One number, one conversation, one source of truth.
<h1 className="font-display text-6xl font-bold tracking-tight">
Safety data infrastructure.
</h1>Body specimen — Source Sans 3
Humanist sans with open apertures and high x-height. Designed for long-form reading; holds up from xs to xl.
Replace R1,500-per-month hardware scanners with the phones guards already carry. Same workflow, one monthly fee per device, works offline.
Wolf is a safety data platform. We aggregate and structure millions of safety signals — incidents, patrols, access scans — into intelligence used by communities, security firms and cities. Every surface we build writes back to the same data model.
Small print runs at 14px in the muted-foreground colour. Stays AA-compliant on every role surface.
<p className="font-sans text-base leading-relaxed">
Body copy in Source Sans 3, 16px default, 1.5 line-height.
</p>Mono specimen — Geist Mono
Mono is never decorative. Use it for code, API names, filenames, and tabular numerals.
POST /reports · { lat, lng, category }GET /areas?bbox=18.3,-34.2,18.7,-33.9X-Wolf-Signature: hmac-sha256=…| Reports | 1,247 |
| Areas | 42 |
| Guards online | 8 |
<code className="font-mono text-sm">
POST /reports · { lat, lng, category }
</code>Ten-step scale
Every size in the system, rendered at its canonical line-height. Never freestyle a pixel value.
- xs12px · 0.75remThe quick brown fox leaps safely home.1.33 · 16px
- sm14px · 0.875remThe quick brown fox leaps safely home.1.43 · 20px
- base16px · 1remThe quick brown fox leaps safely home.1.5 · 24px
- lg18px · 1.125remThe quick brown fox leaps safely home.1.56 · 28px
- xl20px · 1.25remThe quick brown fox leaps safely home.1.4 · 28px
- 2xl24px · 1.5remThe quick brown fox leaps safely home.1.33 · 32px
- 3xl30px · 1.875remThe quick brown fox leaps safely home.1.2 · 36px
- 4xl36px · 2.25remThe quick brown fox leaps safely home.1.11 · 40px
- 5xl48px · 3remThe quick brown fox leaps safely home.1.0 · 48px
- 6xl60px · 3.75remThe quick brown fox leaps safely home.1.0 · 60px
Heading hierarchy — marketing
On marketing surfaces H1 is Barlow 700 at 5xl–6xl. Headings pull scale down as they descend.
Safer cities, built on data
What Wolf does
Reports, patrols, access
One data model across every surface
Section label · H6 all-caps
Heading hierarchy — product UI
Product UI shrinks the top of the scale. H1 becomes 2xl — no hero type in the dashboard.
Incidents
Last 24 hours
Open reports
Body text stays at base. Muted-foreground for supporting copy.
Weights and rhythm
Barlow uses 600/700. Source Sans 3 uses 400/500/600. Never 400 on display, never 700 on body.
- Regular · 400 body default
- Medium · 500 emphasis inline
- Semibold · 600 strong emphasis, H3-H6 body sans
- Barlow · 600 section titles
- Barlow · 700 hero, H1 marketing