Design system

One system.
Four interfaces.
Three markets.

The design language behind the Magic Transports freight platform — defined in Figma, shipped as code tokens, and running live across a shipper portal, a carrier console, a driver mobile app, and an operations back-office.

Get the tokens Figma source ↗ Live prototypes ↗ 4 surfaces · 3 regions · 1 codebase

How it works

From Figma to production

Design decisions live in one place and flow outward. Nothing in the product is hand-picked — every colour, size and radius resolves to a named token.

Figma library

Colour & text styles, logo components and 9 guideline boards define the brand foundation.

CSS custom properties

Tokens land as :root variables — one contract every surface imports.

Shared primitives

Buttons, badges, fields, cards and tables are built once from those tokens.

Four interfaces

Shipper, carrier, driver and operations compose the same primitives — so they always agree.

Foundations

Colour

Two layers on purpose. The brand palette is the identity (print, deck, marketing). The product palette is the UI system the apps run on — tuned for interface contrast and long screen sessions. Click any swatch to copy its value.

Brand palette — identity

Magic Orange

#F15E3Asignal · 10%

Near Black

#16181Dprimary text · 25%

Warm White

#F7F5F1light base · 60%

Soft Grey

#D8D5CFsupport · 5%

Graphite

#42454Bsecondary

Product palette — brand & surface

Brand

#EF5A3C--brand

Brand hover

#D94A2E--brand-hover

Brand 100

#FDE8E3--brand-100

Brand 50

#FEF3F0--brand-50

Surface

#FFFFFF--surface

Background

#F4F4F5--bg

Border

#E4E4E7--border

Border strong

#D4D4D8--border-2

Text ramp

Foreground

#09090B--fg · primary

Muted

#52525B--fg-2 · body

Subtle

#71717A--fg-3 · labels

Faint

#A1A1AA--fg-4 · hints

Semantic — shipment lifecycle states

Delivered

Success

#DCFCE7 / #15803D--success-bg / -fg

At pickup

Warning

#FEF9C3 / #854D0E--warning-bg / -fg

Disputed

Error

#FEE2E2 / #B91C1C--error-bg / -fg

In transit

Info

#DBEAFE / #1D4ED8--info-bg / -fg

Foundations

Typography

Plus Jakarta Sans carries the interface — geometric, high x-height, legible at 12px in dense freight tables. DM Mono is reserved for identifiers: shipment IDs, plate numbers, tax registrations, timestamps. Numbers that must be scanned, never guessed.

Move freight with confidence

Display
44 / 48 · 800

Shipment overview

H1
30 / 36 · 800

Active consignments

H2
22 / 28 · 700

Carrier assignment

H3
17 / 24 · 700

Body — Magic Transports connects businesses with reliable transport across road, air and sea.

Body
15 / 24 · 400

Small — supporting copy, table cells and helper text.

Body S
13 / 20 · 400

MT-2026-0481 · TN-66-AC-1234 · 33AABCU9603R1ZM

Mono / ID
13 · DM Mono

Section label

Overline
10.5 · .09em

Foundations

Space & radius

A 4px base grid keeps dense operational screens rhythmic. Radii stay soft but never playful — rounded frames are part of the brand's graphic language.

SPACING SCALE

4px

8px

12px

16px

24px

32px

48px

64px

RADIUS

full

ELEVATION

flat

raised

overlay

Foundations

Iconography

Monoline, rounded, 1.6px stroke on a 24px grid. Freight-native — the vocabulary of the domain, not generic UI clip-art.

Components

Buttons

Exactly one primary action per view. Everything else recedes.

Primary --brand · Secondary bordered --border-2 · Ghost for tertiary. Radius 10px, weight 600.

Components

Status & badges

The lifecycle a shipment moves through — one visual language across all four surfaces, so a status means the same thing to a shipper, a carrier, a driver and an ops controller.

Draft Booked Assigned At pickup In transit Delivered Settled Disputed Cancelled

Components

Forms

Region-aware by design — the same field renders GSTIN in India, UEN in Singapore, or a Trade Licence number in the UAE.

Pickup location

Tax registration

Vehicle type

Components

Data display

Freight is a numbers business. Stat cards for the glance, tables for the work — IDs always in mono so they can be read aloud over a phone call.

Shipments today

↑ 12%

GMV today

₹7.4L

↑ 8%

On-time rate

94%

↑ 2%

Avg time to assign

14 min

↓ 2%

Shipment	Route	Vehicle	Status	Rate
MT-2026-0481	Coimbatore → Chennai	32-ft multi axle	In transit	₹38,500
MT-2026-0479	Mumbai → Pune	22-ft container	Assigned	₹24,800
MT-2026-0476	Jebel Ali → Abu Dhabi	Trailer · Cat 4	Delivered	AED 1,650
MT-2026-0470	Woodlands → Johor Bahru	Prime mover	Disputed	S$ 780

Delivery

Token export

The single source every surface consumes. Copy as CSS custom properties, JSON, or Tailwind theme config.

Delivery

The four interfaces

Every screen below is built from the tokens and primitives on this page — and adapts its currency, tax logic, identity fields and language by region.

Web · businesses

One system.
Four interfaces.
Three markets.

How it works

Figma library

CSS custom properties

Shared primitives

Four interfaces

Foundations

Foundations

Foundations

Foundations

Components

Components

Components

Components

Delivery

Delivery

Shipper

Carrier

Driver app

Operations

One system.Four interfaces.Three markets.

How it works

Figma library

CSS custom properties

Shared primitives

Four interfaces

Foundations

Foundations

Foundations

Foundations

Components

Components

Components

Components

Delivery

Delivery

Shipper

Carrier

Driver app

Operations

One system.
Four interfaces.
Three markets.