Design Guide – Traceall Global

Foundation

Color Palette

A warm, minimal palette anchored by Sunshine Yellow — optimism, energy, and forward momentum. Every color has a defined role.

Primary Brand

Sunshine Yellow#FFE255

Dark Charcoal#1A1A1A

Yellow Hover#FFD700

Yellow Active#FFC700

Yellow Alpha#FFE255 40%

Interactive Blue#0066FF

Neutral Scale

Pure White#FFFFFF

Off White#F8F8F8

Light Gray#E8E8E8

Border Strong#CCCCCC

Medium Gray#999999

Dark Gray#2D2D2D

Semantic / Status

Success Green#22C55E

Warning Orange#F59E0B

Error Red#EF4444

Info Blue#3B82F6

/* CSS Custom Properties — paste in :root */
--yellow: #FFE255;    /* Primary CTA */
--charcoal: #1A1A1A;  /* Headings & body */
--off-white: #F8F8F8; /* Section bg */
--border-subtle: #E8E8E8; /* Cards, dividers */
--gray-mid: #999999;  /* Secondary text */

Type System

Typography

Inter as the primary typeface. All sizes follow a 4pt scale. Weight and size create hierarchy — never rely on color alone.

Display XL56px / 700 / -0.02em

Trace the world.

Display L48px / 700 / -0.015em

Global logistics,
simplified.

Display M40px / 700 / -0.01em

Visibility at every step

Heading XL32px / 700

Track. Trace. Deliver.

Heading L28px / 600

Real-time supply chain insights

Heading M24px / 600

Global shipment tracking

Heading S20px / 600

Live shipment status

Body Large18px / 400 / 1.6lh

TraceAll Global gives you complete visibility across your supply chain — from origin to destination, updated in real time.

Body Regular16px / 400 / 1.6lh

Monitor every shipment, anticipate delays, and keep your customers informed with accurate delivery estimates and live tracking updates.

Body Small14px / 400 / 1.5lh

Last updated 2 minutes ago · Shipment #TG-49281 · In transit via Rotterdam

Button16px / 600 / +0.02em

Get Started Free

Caption12px / 400 / +0.01em

* Prices shown exclude VAT. Free plan limited to 50 shipments/month.

Code / Mono14px / SF Mono

TG-49281-LON-RTM-2026

Interactions

Buttons

Three variants with clear visual hierarchy. Primary is always yellow. Padding never shrinks below 14px×32px for standard, 10px×20px for small.

Primary

background: #FFE255;
color: #1A1A1A;
padding: 14px 32px;
border-radius: 8px;
font-weight: 600;
hover → #FFD700 + shadow lift

Secondary

background: #FFFFFF;
color: #1A1A1A;
border: 2px solid #E8E8E8;
padding: 14px 32px;
hover → bg #F8F8F8, border #CCCCCC

Ghost

background: transparent;
border: 1px solid transparent;
hover → rgba(255,226,85,0.1)
        border: 1px solid #FFE255

Small Variants

padding: 10px 20px;
font-size: 14px;
border-radius: 6px;
Icon btn: 48×48px, no padding

Surfaces

Cards & Containers

Feature cards have 32px padding, 12px radius, and lift on hover. Service cards are off-white, lighter weight, and reveal on hover.

Feature Cards (hover me)

🌍

Global Coverage

Track shipments across 190+ countries with real-time carrier integrations and customs status.

⚡

Live Updates

Millisecond-level event streaming keeps your data current without refreshing or polling.

🔒

Secure by Default

SOC 2 Type II certified. All data encrypted in transit and at rest with audit trails.

Service Cards (hover me)

🚢

Ocean Freight

FCL & LCL tracking across all major shipping lines

✈️

Air Cargo

AWB tracking with real-time flight status

🚚

Road Freight

GPS-linked last-mile and cross-border trucking

📦

Parcel & Express

All major couriers in one unified view

Stat Cards

Active Shipments

14,291

↑ 12% this week

On-time Rate

97.4%

↑ 2.1% vs last month

Delayed

38

↓ 5 from yesterday

Countries Active

124

↑ 8 new markets

Progress Bars

Shipment completion78%

Customs cleared100%

Documentation45%

Data Entry

Forms & Inputs

12px/16px padding, 6px radius, 16px font. Yellow focus ring is the signature interaction. Never shrink below 48px touch height.

Input States

Default input Format: TG-XXXXXX-XXX

With icon

🔍

Disabled

Error state ⚠ This tracking number doesn't exist in our system.

Full Form Example

Full Name

Business Email

Company

Message

Feedback & Labels

Badges, Status & Alerts

Compact label components for states, tags, and status communication. Semantic colors only — never decorate.

Badge Variants

Brand Delivered Failed Delayed In Transit Archived

Chips / Filter Tags

All Shipments Ocean Air Road + Add Filter

Status Banners

Wayfinding

Navigation

80px desktop / 64px mobile. White with a subtle bottom border. Active links get the yellow underline treatment.

Primary Navbar

TraceAll

Dashboard Shipments Analytics Integrations Docs

Tab Navigation

Shipment #TG-49281
Origin: Shanghai, CN → Destination: Rotterdam, NL · Status: In Transit

Route details: Shanghai Port → Suez Canal → Mediterranean → Rotterdam

Bill of Lading, Packing List, Certificate of Origin — all verified ✓

Event log: Departed Shanghai 02 May · Passed Suez 05 May · ETA Rotterdam 14 May

Foundation

Spacing System

4pt base unit. Every spacing value is a multiple of 4. Consistency across all padding, margin, and gap values creates visual rhythm.

4px — 1× microInline gaps, icon-to-text

8px — 2× baseCompact padding, tight groups

12px — 3×Button horizontal edge

16px — 4×Input padding, standard gaps

20px — 5×Card gap, grid gutter

24px — 6×Card padding, mobile margin

32px — 8×Large card padding

40px — 10×Desktop container margin

48px — 12×Mobile section padding

64px — 16×Major section separation

80px — 20×Section padding desktop

120px — 30×Hero maximum breathing room

Depth & Edges

Shadows & Border Radius

Elevation through shadows — never borders. Radius communicates the weight of a component: 4px tags, 8px buttons, 12px cards.

Elevation Scale

Flat

No shadow
Flat elements

Soft

2px / 8px
Cards (default)

Medium

4px / 16px
Cards (hover)

Strong

8px / 24px
Sticky, modals

Deep

12px / 32px
Overlays, hero

Border Radius Scale

0px
Full-width

4px
Badges

6px
Inputs

8px
Buttons

12px
Feature cards

16px
Premium

50%
Avatars

UI Patterns

Components

Supporting UI elements — avatars, tooltips, chips, and icons — all following the same 4pt rhythm and yellow accent system.

Avatars

JA

James Allen

Logistics Manager

Avatar Group

SA

MK

TR

+4

7 team members

Tooltips (hover buttons)

Dividers

Content above

Subtle divider (1px, #E8E8E8)

Strong divider (2px, #CCCCCC)

Icon Set (24px — minimum interactive size)

🌍globe

📦package

🚢vessel

✈️air cargo

🚚truck

📍location

⏱ETA

🔔alerts

📄documents

🔗integrations

📊analytics

🔒secure

Composition

Hero Section Demo

Full hero with gradient, 120px padding, Display L typography, yellow accent, and dual CTA layout — as per the design system spec.

🌍 Trusted by 500+ logistics teams globally

Complete visibility across your global supply chain

Track every shipment, in real time, across every carrier — from origin to final mile. No blind spots.

No credit card required · 14-day free trial · 190+ countries