# Cargoo Design System
> Reference file for AI-assisted generation of website and app assets.
> Source of truth: Cargoo Brand Book MVP 2026.
> Date created: 2nd July 2026

---

## 1. Brand Foundation

### 1.1 Identity

**Mission**
Make ocean freight run on one connected operating system, so the people who move the world's freight can run their supply chains with full control over every shipment, every contract, and every cost.

**Vision**
A world where every BCO operates ocean freight with full commercial, operational, and strategic control: where the supply chain evolves and adapts to the business, compounds intelligence with every shipment, and serves only the customer's strategies.

**Brand Personality: The Hero**
Bold, direct, and action-oriented. We name problems precisely, and we take them on. We don't accept the status quo as inevitable.

**Our Enemy: Fragmentation**
Procurement in one tool, planning in another, execution across a dozen carrier portals, and no one with the full picture in time to act. The industry accepted this as normal. We didn't.

**Core Values**
- Modular
- Configurable
- Independent
- Precise
- Connected
- Transparent

---

### 1.2 Strategy

**Unique Value Proposition**
Modular, ocean-first, carrier-agnostic, and built by ocean freight operators with three decades of experience who still run shipments on it every day. No competitor has all of it.

**Cargoo's role in the CSA Group**
Cargoo is the operating system underneath CSA Group – the technology layer that powers every service CSA delivers. CSA Group is the orchestrator: service-led, people-driven, and built to run a customer's full logistics operation. Cargoo is what it runs on.

The relationship is non-negotiable in both directions: CSA services are Powered by Cargoo. When Cargoo customers need human execution, they are Serviced by CSA.

**Slogan**
Procure. Plan. Execute. Control.

Four words that define the full scope of ocean freight operations – and the four layers Cargoo covers end to end. It is the promise we make on every website, every event, and every customer touchpoint: that ocean freight doesn't have to be managed in pieces.

---

### 1.3 Messaging

**Voice & Tone**
Cargoo's voice has three traits: Intelligent, Precise, Relentless.

Intelligent means always two steps ahead — data-driven and built for efficiency. Precise means no wasted movement, no excess complexity. Relentless means no shortcuts and no guesswork.

On the page, this sounds bold, confident, and direct. Short sentences carry weight. We reframe before we describe, and we are diagnostic rather than alarmist. When we make a claim, we back it with structure or numbers. When we name a problem, we name it precisely.

We avoid jargon, buzzwords, and futurist talk. We are specific, never vague.

**Grammar & Style**
- British English spelling at all times
- En-dash (–) only — never em-dash (—)

---

## 2. Visual Identity

### 2.1 Logo

#### Logo files

| File | Variant | Use on |
|---|---|---|
| `Cargoo_logo_-_gradient_-_black.png` | Gradient icon + black wordmark | Light backgrounds |
| `Cargoo_logo_-_gradient_-_white.png` | Gradient icon + white wordmark | Dark backgrounds |
| `Cargoo_logo_-_mono_-_black.png` | Monochrome black | Light backgrounds |
| `Cargoo_logo_-_mono_-_white.png` | Monochrome white | Dark backgrounds |
| `Cargoo_icon_-_gradient.png` | Gradient icon only | Light or dark backgrounds |
| `Cargoo_icon_-_black.png` | Black icon only | Light backgrounds |
| `Cargoo_icon_-_white.png` | White icon only | Dark backgrounds |

#### Primary vs secondary

**Primary** — gradient logo (`Cargoo_logo_-_gradient_-_black.png` / `Cargoo_logo_-_gradient_-_white.png`) and gradient icon (`Cargoo_icon_-_gradient.png`). Default for all digital touchpoints — website, app, presentations, events.

**Secondary** — monochrome logo and icon variants. Used when the gradient is not appropriate: alongside CSA Group branding, at very small sizes where gradient detail is lost, or when technical limitations prevent gradient use (e.g. silk screen printing).

#### Background rules

- **Light background** → use black wordmark variants (`-_black.png`) or gradient icon standalone
- **Dark background** → use white wordmark variants (`-_white.png`) or gradient icon standalone
- Never place a black variant on a dark background or a white variant on a light background

#### Icon vs full logo

Use the **full logo** (icon + wordmark) as the default. Switch to the **icon only** when space is too tight for the wordmark to be legible — favicons, app icons, small footers, or square format placements.

#### Minimum size
- Digital: 30px height

#### Clear space
Make sure there is enough margin around the logo to keep its legibility and importance.

#### Never
- Stretch or distort the logo
- Change logo colours outside of the approved variants
- Place on backgrounds that compromise contrast
- Use a black variant on a dark background or white variant on a light background

---

### 2.2 Colour

**Brand colours**
| Token | Hex | RGB | Usage |
|---|---|---|---|
| Primary | `#00C3FF` | 0 195 255 | Used in supporting brand elements. |
| Secondary | `#000BDD` | 0 11 221 | Used in supporting brand elements. Good contrast on both light and dark backgrounds. |
| Tertiary | `#1C6BFB` | 28 107 251 | Used in supporting brand elements. |
| Accent | `#F145FF` | 241 69 255 | Used for interactive elements. |

**Gradient**
Direction: bottom-left (Primary `#00C3FF`) → top-right (Secondary `#000BDD`).
Used for supplementary and supporting visuals.

**Light theme neutrals**
| Token | Hex | Usage |
|---|---|---|
| surface | `#F7F8FA` | Page background |
| surface-container | `#EEEFF3` | Cards, panels |
| on-surface | `#000000` | Primary text |
| on-surface-low | `#7E8295` | Secondary text, captions |
| outline | `#B2B5C2` | Borders |
| outline-low | `#DDDEE4` | Subtle dividers |

**Functional colours**
| Token | Hex | Usage |
|---|---|---|
| Error | `#FF1610` | Errors, destructive actions |
| Success | `#24CC5C` | Confirmations, positive states |
| Warning | `#FF7C0F` | Warnings, caution states |

---

### 2.3 Typography

**Typefaces**
- **Geist** — primary typeface. Modern geometric sans-serif, Swiss typography roots. Used for all headings, body copy, CTAs, labels, and navigation. Available on Google Fonts.
- **Geist Mono** — secondary typeface. Monospaced, technical character. Used for tags, metadata, timestamps, data tables, and short technical notes only.

**Rules**
- All text is Regular weight. Size and hierarchy carry the visual weight — not bold or semibold.
- Default alignment: left. Centre alignment only for covers, hero sections, and standalone display text.
- Body text line height: 140%.
- Maintain strong size contrast between headings and body text.

**Website text styles — desktop**
| Style | Size | Line height | Align | Font |
|---|---|---|---|---|
| H1 – default | 56px | 110% | Left | Geist |
| H1 – special | 110px | 110% | Centre | Geist |
| H2 | 36px | 120% | Left | Geist |
| H3 | 28px | 130% | Left | Geist |
| H4 | 22px | 130% | Left | Geist |
| P – XS (tags) | 14px | 140% | Left | Geist Mono |
| P – S (body) | 16px | 140% | Left | Geist |
| P – M | 22px | 140% | Left | Geist |
| P – L | 28px | 130% | Left | Geist |
| P – XL | 36px | 130% | Left | Geist |
| P – XXL | 56px | 130% | Left | Geist |
| P – XXXL (numbers) | 120px | 130% | Left | Geist |

---

### 2.4 User Interface

**Spacing**
| Rule | Value |
|---|---|
| Max content width | 1200px |
| Default padding | 32px |
| Horizontal gap between containers | 16px |
| Vertical gap between containers | 16px |
| Horizontal gap between text blocks | 32px |
| Vertical gap between text blocks | 16px |

**Containers**
- Fill: `surface-container` (`#EEEFF3`) only
- Border: none — containers never use an outline or custom fill colour

**Roundness**
- **Main graphics and illustrations**: hard edges, no border radius. This includes containers and all structural graphic elements.
- **Small UI elements** (secondary buttons, icon boxes, chips, tags, badges): `6px`
- **Large UI elements** (cards, modals, panels): `24px`
- **Nested large elements**: `16px`
- **Special elements** (primary buttons, connecting lines, pills): fully rounded (`9999px`)

**Buttons**

*Primary button*
- Padding: `16px 24px`
- Border radius: `9999px` (pill)
- Border: `2px solid transparent`
- Background: `linear-gradient({parent-background}, {parent-background}) padding-box, linear-gradient(to right, #00C3FF, #F145FF) border-box` — replace `{parent-background}` with the actual background colour of the surface the button sits on (e.g. `#F7F8FA` on a light page, `#000000` on a dark section). Both instances must match.
- Font: Geist Mono, Regular, 14px
- Text colour: `#000000`

*Secondary button*
- Padding: `10px 16px`
- Border radius: `6px`
- Border: `1px solid #BFC0CE` (outline token)
- Background: transparent
- Font: Geist Mono, Regular, 14px
- Text colour: `#030A1E`

---

### 2.5 Iconography

- **Set**: Nucleo Core
- **Style**: Outline
- **Size**: 24px
- **Stroke**: 2px
- **Cap / Join**: Hard edge (no rounded terminals)