The road is the line
The logo's dashed centre line, dash 3 to gap 2, is how Waypoint draws dividers, progress and every timeline. A selected trip on the map is the road from the logo.
lane • 12 / 8 / 2 pxVLM • Viganium Fleet Management
Every route ends at a waypoint.
Waypoint is the brand and design system of VLM. The logo is a road that winds to a pin; the system is built from exactly that — the line, the point, and the signs along the way.
2 themes • day & night
62 contrast floors, checked on every build
EN • ع left-to-right and right-to-left
01The idea
Five ideas, all taken from the mark
Nothing in Waypoint is decoration. Every rule traces back to something in the logo — a red disc, a road with a dashed centre line, a pin where the road ends — or to the job: getting a fleet where it needs to go, and showing it calmly.
Red marks the destination
Waypoint Red is the pin: the brand, the selected vehicle, the link, the focus ring — "you are here". It is never an alarm and never the everyday button. Asphalt does the everyday work.
brand • focus • selected • linkStatus is a road sign
Every state wears a road-sign colour and a road-sign shape — arrow, triangle, square, octagon, ring — so no state is ever told by colour alone.
go • caution • info • hazard • offlineThe map is the floor
Map-first: the map is level zero and the interface floats over it in layers, lit from above by day and edge-lit by night.
shadow 1 → 4 • z map → tooltipRead it at a glance
Text is set in Overpass, a descendant of Highway Gothic — the face of the road signs. Numbers speak in Overpass Mono. Anything used in a cab gets cab density: 56 px targets.
desk 40 px • cab 56 px02Logo
A road sign, a road, a waypoint
Traced from the raster original into exact vectors: the disc is a true circle, the road and the pin are its knockouts, and the wordmark keeps every bracketed serif. Recolour by setting the text colour — never edit the paths.
- The disc — a road signA red circle is the road's own word for "this matters". It holds the whole mark and sets the brand red,
#BC191E. - The road — two edges and a lane lineWhite edges and a dashed centre line: the route, and the source of Waypoint's lane line and of how a trip is drawn on the map.
- The waypoint — where the road endsThe pin. Every trip ends at one. It is why red means destination, selection and focus — and why the system is called Waypoint.
Lockups
Primary on light grounds; reverse on asphalt and night; one colour where only one ink exists.
On a dark ground the one-colour mark's road takes the ground's colour — the road turns to asphalt. That knockout is intended: never fill the road back in by hand. Where the road must stay white, use the two-tone mark.
Clear space & small sizes
Keep one pin-height clear on every side. Below 180 px wide, drop the descriptor; below 32 px, use the small mark.
P = the height of the pin, a quarter of the disc. The dashed line is the closest anything may come.
The small mark (vlm-mark-small.svg) drops the lane dashes and fills the pin — at 32 px and below the dashes are noise. It is the favicon.
Compact lockup — the descriptor drops below 180 px wide; the compact one holds down to 72 px.
Never
The mark is fixed geometry. Six ways to break it.
Files
All in brand/logo/, traced by brand/tools/trace_logo.py.
vlm-logo.svgprimaryvlm-logo-reverse.svgdark groundsvlm-logo-mono.svgone colourvlm-logo-compact*.svgno descriptorvlm-logo-stacked*.svgsquare spacesvlm-mark.svgtwo-tone markvlm-mark-mono.svgknockout markvlm-mark-small.svg≤ 32 px, faviconvlm-app-icon.svgapp-icon master03Colour
Three colours from the logo, five from the road
The brand core is sampled from the logo — the median of tens of thousands of pixels, not a guess. The status colours are the road's own code, tuned from the RAL "Traffic" paints and measured against every surface they sit on. Click any swatch to copy it.
The disc
Waypoint Red
The wordmark
Asphalt
The road
Lane White
Ramps
Brand red sits at 500. On night, red text lifts to 400 — 500 on graphite is 2.75:1 and fails.
The road code
Five states, five road signs. The shape always travels with the colour.
Two traps, designed around. Hazard is not the brand red — it is safety orange, 13° of hue away, so an alarm can never read as the brand. And caution amber is 1.7:1 on white: on light grounds it is always a fill with an asphalt glyph or edge, never a thin line or text.
Roles
Components use roles, never raw palette. Day and night are both complete themes.
| Role | Use | Day | Night |
|---|
Charts
Charts are drawn in asphalt; the waypoint is red. One bar carries the colour — the one that matters.
Distance today • km
FleetTruck 14 — 288 km
Fuel used • litres per day
Depot 1Depot 2Depot 3
Fleet right now • 128 vehicles
Moving64
Idling12
Parked41
Offline9
Alarm2
04Typography
A serif from the wordmark, a sans from the road signs
Four families, each with one job. All load from Google Fonts on the web and through google_fonts in Flutter — nothing to bundle.
DisplayMerriweather 700 • 900
Every route, accounted for.
Heavy, bracketed serifs — the same voice as the VLM wordmark. Page titles and section openers only; never a control.
TextOverpass 400 – 800
Truck 14 has been idling at Depot 3 for 12 min.
Overpass descends from Highway Gothic, the typeface of North American road signs: open, wide, legible at a glance and at speed. It does all the reading work.
Machine voiceOverpass Mono 400 – 600
IMEI 356938035643809
30.0444, 31.2357 • 128,402 km
Plates, IMEIs, coordinates, odometers, timestamps. Always tabular, so a live value never shakes its own tile.
العربيةNoto Kufi Arabic 400 – 900
كل مسار في الحسبان.
الخط الكوفي هندسي البناء ومألوف على اللافتات — يحمل العناوين بالوزن الثقيل والنصوص بالوزن العادي.
Scale
Seventeen steps. Display sizes sit tight; Arabic gets its own taller line heights and no negative tracking — automatically, under :lang(ar).
05Space, shape & layers
Built in layers over the map
A 4 px grid, sign-plate corners, and five elevation steps that read as layers floating above the map.
Space • 4 px base
Radius • sign plates
Buttons and fields md, cards lg, floating panels xl, sheets 2xl. Only pills, avatars and markers go full round.
Layers • the map is the floor
Cardshadow-1
Map panelshadow-2
Popovershadow-3
Modalshadow-4
Density: desk and cab
Desk is a pointer at a desk. Cab is a thumb in a moving day — set data-density="cab", and every control grows.
Deskcontrols 32 / 40 / 48 • body 15
Cabcontrols 48 / 56 / 64 • body 17
06Components
The parts a fleet is run with
Live, theme-aware, built only from tokens. Flip the theme in the header and everything below follows.
Buttons
Action (asphalt) does the everyday work. Brand (red) marks the destination — one per screen at most. Destructive is hazard orange, never red.
Fields
As printed on the plate. Spaces are kept.
km/h
Enter a limit between 20 and 160 km/h./
Filters & status
Moving 64 km/h
Idling 12 min
Parked
Offline 3 h
SOS
On timeDue todayScheduledOverdueArchived
ABC 4817ن ص ب 5682The plate chip — a vehicle's identity at a glance.
Controls
Geofence Depot 3 saved.
Loading • the lane flows
Fleet components
The KPI tile, the vehicle card, the trip timeline and the alert — the parts no stock library has.
Moving now
64/ 128
50% of the fleet+6
Distance today
12,480km
since 00:00+4.2%
Idle time
3:12h
≈ 21 L of fuel+18 min
ABC 4817
MovingTruck 14
Volvo FH 460 • 2024
Speed64 km/h
Fuel62%
Odometer128,402
AS
Ahmed Samir
Driver • on duty 4 h 12 m
Ring Road, northbound • 12 s ago
Trip timeline • the road, standing up
- Depot 3Trip started
- Al Noor MarketStop • 14 min
- IdlingMarket St • 6 min, engine on
- Harbor Rd warehouseDestination • ETA
Harsh braking — Truck 2264 → 12 km/h in 1.6 s • Ring Road • 2 min ago
Service due — Van 07Oil change at 120,000 km • 410 km left
No trips yet today
Trips appear here the moment a vehicle starts moving.
| Vehicle | Status | Driver | Speed | Odometer | Last report |
|---|---|---|---|---|---|
| ABC 4817 Truck 14 | Moving | Ahmed Samir | 64 km/h | 128,402 km | 12 s |
| KDR 2093 Van 07 | Idling | Mona Adel | 0 km/h | 119,590 km | 31 s |
| MNB 7410 Truck 22 | Harsh brake | Karim Fawzy | 12 km/h | 88,317 km | 4 s |
| QSR 1168 Bus 03 | Parked | — | 0 km/h | 204,881 km | 6 min |
| LTF 5521 Pickup 11 | Offline | Omar Hany | — | 61,204 km | 3 h |
07The map
Waypoint Day & Waypoint Night
A quiet base map so the fleet stands out. The selected trip is drawn as the logo's road — red, white edges, a dashed lane — and ends at the red pin. Every marker is a road sign wearing a Lane White ring.
Waypoint Day
500 m
Waypoint Night
500 m
08Motion
Motion reports movement
Things move in VLM because vehicles move. Each animation reports something real and stops when it is reported. All of them switch off under prefers-reduced-motion.
Route draw
A trip draws itself from start to end when it loads.
route 1400 ms • drivePin drop
A destination lands, with one small overshoot — the only spring in the system.
move 360 ms • pinLane flow
Work in progress: the lane line flows toward the reading end.
flow 1100 ms • linearLoops while loading, stops when done.Ping
A vehicle reported its position. One ring per report — never a loop.
ping 1600 ms • arriveOdometer
A number that changed rolls to its new value, digit by digit.
odometer 600 ms • driveEasing
Named for what a vehicle does.
09Surfaces
One system, five apps
The platform our customers run their fleets on, the mobile app in the cab, Viganium's admin, the website — and the gateway, which has no screen but speaks the same names in its logs.
Platform • live map
Desk density. The list and the vehicle float over the map as layers.
Mobile • in the cab
Cab density, follows the phone's theme. One red action: the one that moves the trip forward.
9:41
Today
ASTrip 3 of 5ABC 4817
Al Noor MarketPick-up • 6 boxes
Harbor Rd warehouseDrop-off • dock 4
ETA10:15
Distance18.4 km
Stops2
Website
Light pages with night heroes. The brand button lives here.
Fleet management • EN / ع
Your fleet, in plain sight.
Live tracking, trips, drivers and vehicle health for companies that run vehicles — in one calm view, in English and Arabic.
Admin
Viganium's own back office: who runs on VLM, on which plan, with how many devices.
| Customer | Plan | Vehicles | Devices online | Status |
|---|---|---|---|---|
| Al Noor Logistics | Fleet | 128 | 119 / 128 | Active |
| Delta Cold Chain | Fleet+ | 64 | 64 / 64 | Active |
| Sinai Buses | Trial | 22 | 18 / 22 | Trial ends in 3 days |
| Cairo Courier Co. | Fleet | 41 | 0 / 41 | Payment overdue |
The gateway has no screen. It speaks to the devices and logs in the same road code —
go, caution, info, hazard, offline — so a log line and a map marker mean the same thing.10Arabic & RTL
Written in Arabic, not translated into it
Arabic is a first-class language on every surface. Layout mirrors; logos, maps, clocks and numbers do not. Digits stay Western in both languages, and every plate, speed and timestamp keeps the machine voice.
English • LTRdir="ltr"
Harsh braking — Truck 2264 → 12 km/h in 1.6 s • 2 min ago
Moving now
64/ 128
العربية • RTLdir="rtl"
فرملة مفاجئة — شاحنة 22من 64 إلى 12 كم/س خلال 1.6 ث • منذ دقيقتين
متحركة الآن
64/ 128
11Applications
Where the brand shows up
The app icon, the browser tab, the card in a pocket — and the two labels that matter in a fleet business: the one on a tracking device, and the one on the vehicle door.
App icon
Asphalt ground, the two-tone mark at 62% — inside Android's adaptive-icon safe zone. Master: vlm-app-icon.svg.
Browser tab
VLM — Live map
VLM Admin
The small mark is opaque two-tone, so it holds on light and dark browser chrome alike.
Business card • 85 × 55 mm
Full NameFleet solutions • Viganium
name@viganium.com+20 000 000 0000
Device label • 70 × 30 mm
Fleet tracking device
- IMEI
- 356938035643809
- Installed
- 2026-10-20
DO NOT REMOVEلا تقم بإزالته
Asphalt, mono, bilingual: an installer reads it under a dashboard with a torch.
Vehicle door sticker
This vehicle is tracked by VLMهذه المركبة مُتتبَّعة بنظام VLM
Drivers and the public should know a vehicle is tracked. Plain words, both languages.
Avatar
Social and directory avatars: the mark alone, edge to edge on light, inset on asphalt.
12Voice
Calm on the radio
VLM sounds like a good dispatcher: says where, when and how much; leads with the state; stays calm until something is genuinely urgent — and then says so plainly.
Where, when, how much.Concrete beats general. A place, a time and a number in every message that has them.
State first, detail second."Truck 14 is idling — 12 min at Depot 3." The reader can stop after the dash.
Calm by default.No exclamation marks, no "Warning!!!". An alarm earns urgency by being rare.
One word per thing.A vehicle is a vehicle, not a unit, an asset and a car on three screens.
Arabic is written, not translated.Same meaning, natural Arabic — and the same digits.
| Say Truck 14 has been idling for 12 min at Depot 3. | Not Warning!!! Idle event detected on asset #A-0014. |
| Say Harsh braking — Truck 22, 64 → 12 km/h in 1.6 s. | Not A harsh braking event has occurred. |
| Say No trips yet today. They appear the moment a vehicle moves. | Not No data. |
| Say Can't reach VLM. Your changes are kept on this phone. | Not Error 503: Service Unavailable. |
Taglines • proposals
For marketing to choose from. The descriptor in the logo stays "Viganium Fleet Management".
Your fleet, in plain sight.أسطولك أمام عينيك.Recommended — says what the product does, in five words
Every route, accounted for.كل مسار في الحسبان.
From the road to the report.من الطريق إلى التقرير.
Glossary
One word per thing, in both languages. The full list lives in brand/BRAND.md.