How to use
the Cargoo brand.
The condensed, working reference. For anything outside these rules, ask Christina.
Mission, vision, personality
Who we are, what we're building, and how we show up.
Positioning & role in CSA
What Cargoo is, and how it relates to CSA Group.
Voice, tone & slogan
How we sound on the page.
Four words that define the full scope of ocean freight operations — and the four layers Cargoo covers end to end.
Bold, confident, direct. Short sentences carry weight.
No jargon, buzzwords, or futurist talk.
Reframe before you describe. Be diagnostic, not alarmist.
Never be vague. Be specific.
Back every claim with structure or numbers.
Don't name a problem loosely — name it precisely.
- · British spelling.
- · En-dash (–), never em-dash (—).
- · Sentence case in body copy; title case only in headings when required.
Primary, icon, monochrome
Four container forms in perfect symmetry — a top-down view of an engine of precision, oversight, and control, with the customer's supply chain in the centre.
Use the primary gradient logo wherever colour reproduction allows.
Don't rotate, stretch, skew, or recolour the mark.
Use the icon for tight spaces or when a lighter brand presence is needed.
Don't drop the wordmark below the minimum size — switch to the icon.
Palette
A disciplined system: gradient for hero moments, cyan as the active brand primary, neutrals do the heavy lifting.
Geist & Geist Mono
Geist for voice, Geist Mono for numbers.
A modern geometric sans-serif rooted in Swiss typography — precise, built for digital interfaces. High x-height, angular terminals that echo the logo's geometry. Used for headlines, key messaging, and bold display text.
Where Geist carries the brand voice, Geist Mono carries the numbers — dashboards, tables, terminal output, diagrams.
Use the primary font for all text by default — headings, body, CTAs, labels, nav.
Don't use the mono font as body copy. It's reserved for metadata and technical detail.
Left align text. Centre alignment is reserved for covers and hero moments.
Don't lean on weight variation — everything is Regular. Let size do the work.
Keep an obvious size contrast between headings and body. If it's not immediately obvious, it's not big enough.
Don't tighten body line-height below 140% for paragraph copy.
| Style | Size | Line height | Weight | Align | Font |
|---|---|---|---|---|---|
| H1 — default | 56 px | 110 % | Regular | Left | Geist |
| H1 — special | 110 px | 110 % | Regular | Center | Geist |
| H2 | 36 px | 120 % | Regular | Left | Geist |
| H3 | 28 px | 130 % | Regular | Left | Geist |
| H4 | 22 px | 130 % | Regular | Left | Geist |
| P — XS (tags) | 14 px | 140 % | Regular | Left | Geist Mono |
| P — S (body) | 16 px | 140 % | Regular | Left | Geist |
| P — M | 22 px | 140 % | Regular | Left | Geist |
| P — L | 28 px | 130 % | Regular | Left | Geist |
| P — XL | 36 px | 130 % | Regular | Left | Geist |
| P — XXL | 56 px | 130 % | Regular | Left | Geist |
| P — XXXL | 120 px | 130 % | Regular | Left | Geist |
Spacing, roundness, iconography
The rules that keep every screen recognisably Cargoo.
- · Max width 1200 px
- · Default padding 32 px
- · Container gutter 16 px horizontal / 16 px vertical
- · Text-box gutter 32 px horizontal / 16 px vertical
- · Graphics & illustration — hard edges, no radius
- · Small UI (secondary buttons, icon boxes) — 6 px
- · Large UI (cards, modals, panels) — 24 px
- · Nested large elements — 16 px
- · Primary buttons & connecting lines — fully rounded
- · Style — Outline
- · Size — 24 px
- · Stroke — 2
- · Cap / join — hard edge