Brand guidelines
The Argus design system.
The single source of truth for the Argus Tracking brand. If you're creating anything that carries our name — ad creative, brochures, imagery, social posts, landing pages — everything you need is on this page.
Direction
Confident, editorial, proof-forward.
Argus is premium B2B telematics with an editorial look in two themes: the brand-default dark (warm near-black canvas) and a crisp white light theme — both built on oversized statement headlines, extreme negative space, and a single red accent. Restrained and expensive-feeling — never flashy, never cyberpunk.
Tagline: “Who. What. Where. Know your fleet!”
Themes
One brand, two themes.
The website ships both: it follows each visitor's system preference by default, and a floating switcher lets them choose Dark, Light, or System. Every colour is a themed token — the same design flips between themes with no redesign, and contrast is WCAG AA or better in both.
Fleet tracking
Know your fleet.
Live GPS tracking, RUC automation, and driver safety for NZ fleets.
Dark — brand default
Fleet tracking
Know your fleet.
Live GPS tracking, RUC automation, and driver safety for NZ fleets.
Light
For off-site material there is no wrong choice — both themes are fully on-brand. Prefer dark for hero moments and ad creative; prefer light where the medium calls for it (print, documents, light-ground placements). The red never changes sides: fills stay #DC1A32 with white text in both themes, and only the red used for text and lines shifts shade to keep contrast.
Colour
Greyscale, plus one red — in both themes.
Argus Red is the only accent colour in the brand. Everything else is cool zinc greyscale — hierarchy comes from contrast, weight, and space, never from a second hue. Every swatch below shows its value in each theme; on the website these are CSS tokens that flip automatically. For print, convert from the RGB values and proof against the digital colour.
The accent — Argus Red
Argus Red --accent
RGB 220, 26, 50
Solid fills only — buttons, badges, dots — always with white text on top. Identical in both themes.
Red hover --accent-hover
RGB 176, 20, 42
Hover state for red fills. Identical in both themes.
Red ink --accent-ink
RGB 242, 61, 84 · 176, 20, 42
Red text, icons, links, and thin lines — brightened on the dark canvas, darkened on the light canvas. Both pass WCAG AA.
Canvas & text — themed
Canvas --bg
RGB 10, 10, 11 · 255, 255, 255
Page and layout background — deep warm-black on dark, crisp white on light.
Surface --bg-elev
RGB 20, 20, 22 · 244, 244, 245
Cards, panels, and elevated surfaces.
Text --text
RGB 244, 244, 245 · 24, 24, 27
Headlines and primary text — AAA contrast in both themes.
Text muted --text-muted
RGB 161, 161, 170 · 82, 82, 91
Body copy and secondary text — 7:1+ in both themes.
Border --border
RGB 39, 39, 42 · 228, 228, 231
Hairline borders and dividers — 1px only, never heavy rules.
Inverse bands — the contrast sections
Some sections deliberately break to the opposite canvas for rhythm — cream on the dark site, near-black on the light site. These tokens always resolve to that opposite ground, so the drama survives the theme flip.
Inverse surface --surface-inverse
RGB 245, 243, 239 · 10, 10, 11
Contrast-band sections — always the opposite canvas: a cream band on the dark site, a near-black band on the light site.
Raised on inverse --surface-inverse-raised
RGB 255, 255, 255 · 24, 24, 27
Cards and chips sitting on an inverse band.
Text on inverse --text-inverse
RGB 28, 25, 23 · 244, 244, 245
Headlines and primary text on inverse bands.
Muted on inverse --text-inverse-muted
RGB 87, 83, 78 · 161, 161, 170
Secondary text on inverse bands.
Border on inverse --border-inverse
RGB 231, 229, 228 · 39, 39, 42
Hairline borders on inverse bands.
Red ink on inverse --accent-ink-inverse
RGB 176, 20, 42 · 242, 61, 84
Red text and lines on inverse bands — the mirror of Red ink.
Typography
Two typefaces, both free.
Space Grotesk for headlines, Plus Jakarta Sans for everything else. Both are open-source Google Fonts, so every agency and freelancer can use the exact same type at no cost — no substitutes, please.
Display — Space Grotesk · weights 500–700 · letter-spacing -0.03em · line-height 1.0–1.05 · Get it on Google Fonts
Body — Plus Jakarta Sans · weights 300–600 · line-height 1.5–1.7 · 65–75 characters per line · Get it on Google Fonts
Eyebrow labels — Plus Jakarta Sans 600 · uppercase · wide tracking · Red ink (#F23D54 on dark / #B0142A on light)
Components
The shapes we build with.
For web and digital work: 12px corner radius, 1px hairline borders, and colour-only hover states (nothing moves or grows). These live examples are the reference — hover them.
Buttons — solid red primary / hairline ghost secondary · min 44px touch target · radius 12px
The primary call to action is always Book a Demo; the secondary is Get a Quote.
Feature cards — transparent with hairline border · hover fills the surface and turns the border red
Live GPS tracking
Second-by-second location for every vehicle and asset.
RUC automation
Automatic road user charge claims — no missed kilometres.
Driver safety
Behaviour scoring that coaches drivers, not punishes them.
Voice
Plain English. NZ spelling. Proof over hype.
We write like a knowledgeable local, not a global SaaS brand. Short sentences, concrete claims, and numbers presented as our own figures — never dressed up as audited industry stats.
Always
- NZ spelling everywhere: optimise, behaviour, kilometres, centre.
- Lead with proof — real stats, real customers, real savings.
- “Book a Demo” as the primary action, “Get a Quote” as the secondary.
- Speak to the operator: fleet managers, owners, and drivers.
- Keep it confident and direct — no jargon, no hard sell.
Never
- No public pricing in any material — the only exception is Vision AI, labelled “from $62 NZD/mo”.
- No emoji as icons — use Lucide SVG icons only.
- No second accent colour, gradients, or neon effects.
- No stock-photo cliché (handshakes, pointing at laptops).
- No unverifiable superlatives — “NZ's #1” needs a source.
In the wild
Ads, brochures, and social.
The same system, translated to other media. Both themes are on-brand — pick the ground that suits the medium. When in doubt: dark ground, big Space Grotesk headline, lots of air, one red element.
Ad creative & social
Prefer the dark theme for hero moments: near-black canvas (#0A0A0B), one oversized headline in Space Grotesk, one red element (a CTA button, a stat, or a map pin), white logo. On a light ground, use the light theme (white canvas, #18181B text, #B0142A red ink) and the dark logo.
Brochures & print
Prefer the light theme for readability in print: white ground, #18181B text, #52525B secondary, red reserved for headings, rules, and calls to action (#B0142A for printed red text). Convert colours from RGB and proof against screen.
Imagery
Real fleets, real NZ roads and worksites. Photography runs monochrome or desaturated so the red accent stays the only colour moment. Line illustrations are monochrome with red highlights.
Working on something for Argus?
If a format isn't covered here or you need source assets, ask before improvising — we'd rather answer a quick email than un-ship an off-brand campaign.