FreightOps · Design System

Move freight.
Zero downtime.

A logistics and dispatch SaaS design system built for operations that can't afford errors. Barlow Condensed authority, industrial orange signals, and every component optimized for 3AM readability.

Barlow Condensed Orange #FB923C Dark Default Industrial Logistics SaaS
Color Tokens
Signal-first palette — every color has a job. No decoration.
Primary Signal
accent
—
accent-hover
—
accent-dim
dim
Status Signals
green
delivered
blue
in transit
yellow
delayed
red
failed
Surfaces
bg-base
near black
bg-surface
dark steel
bg-elevated
gunmetal
text-primary
cold white
Typography
Barlow Condensed — maximum information density. Built for dispatch screens.
display / 44px / 800
247 LOADS ACTIVE
h1 / 32px / 700
Northeast Corridor — Route 7
h2 / 22px / 700
Warehouse Chicago IL-04
h3 / 17px / 600
Driver Check-In Required
body / 14px Barlow 400
Load #FO-2025-8812 is currently 47 miles from destination. ETA revised to 06:42 AM due to I-80 construction delay. Driver: M. Santos. Carrier: Allied Freight.
data / DM Mono 500
LOC: 41.8827°N, 87.6233°W · SPEED: 62mph · TEMP: 34°F
caption / DM Mono
LOAD_ID: FO-2025-8812 · CARRIER: ALF-004 · BOL: 2025-CHI-8812
Buttons
Angular, uppercase, zero ambiguity. Every action has a clear consequence.
Primary Dispatch
Secondary & Utility
Critical Actions
Shipment Badges
Load and vehicle status — readable at a glance from 10 feet away.
In Transit Delivered Delayed Failed Pending Idle
Form Inputs
Load entry, driver assignment, and route configuration forms.
⚖
KPI Cards
Operations metrics with progress bars and signal colors.
Active Loads📦
247 loads
↑ 12 vs yesterday
On-Time Rate⏱
94.2%
↑ 1.8pp vs last week
Delayed⚠
14 loads
⚠ 3 critical
Revenue / Day💰
$84k
↑ 9% vs last week
Load Board
Active shipment roster — all critical fields visible without scrolling.
Load IDRouteCarrierDriverETAΔ SchedStatus
FO-2025-8812 Chicago → Detroit
I-94 E · 281 mi		 Allied ALF-004 M. Santos 06:42 AM +47 min Delayed
FO-2025-8801 Dallas → Houston
I-45 S · 239 mi		 Pacific PAC-011 R. Garza 04:15 AM On time In Transit
FO-2025-8799 LA → Phoenix
I-10 E · 372 mi		 National NDC-022 T. Kim Delivered +12 min early Delivered
FO-2025-8794 NYC → Boston
I-95 N · 215 mi		 Allied ALF-007 J. Patel — FAILED Failed
Shipment Tracker
Live shipment progress with step indicator and field data.
LOAD ID: FO-2025-8812
Chicago → Detroit · Dry Van
Revised ETA
06:42 AM
✓
Pickup
✓
In Transit
📍
En Route
Arrival
Delivered
Location
Gary, IN
Speed
62 mph
Miles Left
47 mi
Cargo Temp
36°F ✓
Fleet Status
Vehicle status cards with driver assignment and route progress.
UNIT ALF-004 · 2022 Freightliner
Dry Van 53'
M. Santos · CDL-A
Active
Speed
62 mph
Miles Today
234 mi
HOS Left
4.2 hrs
Fuel
34%
Chicago → Detroit62%
UNIT PAC-011 · 2023 Kenworth
Reefer 48'
R. Garza · CDL-A
Active
Speed
58 mph
Miles Today
189 mi
HOS Left
6.8 hrs
Fuel
71%
Dallas → Houston79%
UNIT NDC-022 · 2021 Peterbilt
Flatbed 48'
T. Kim · CDL-A
Idle
Speed
0 mph
Location
Phoenix AZ
HOS Left
10.0 hrs
Fuel
88%
Awaiting next load—
Dispatch AI
AI-powered route optimization, delay prediction, and load matching.
⚡
Dispatch AI
Online · Monitoring 247 Loads
GPT-4.1
🚨 Alert: Load FO-2025-8812 (Chicago→Detroit) is running 47 minutes late due to I-94 construction near Gary, IN. Revised ETA: 06:42 AM. Customer SLA breach at 07:00 AM. Recommend notifying consignee and renegotiating delivery window. Driver Santos has 4.2 hrs HOS remaining — no risk of violation.
Dispatch AI · 03:14:22
Draft the delay notification for the consignee and check if any alternate routes save time.
Dispatcher · 03:15:01
📧 Notification drafted. Subject: "Load FO-8812 — Revised ETA 06:42 AM".

🗺 Alt route analysis: I-94 → US-12 detour saves 22 minutes (ETA 06:20 AM, within SLA). Adds 8 miles. Driver reroute instruction sent to Santos's unit. Confirm to apply?
Dispatch AI · 03:15:02
Theme Compare
Dark for dispatch floors — light for office reporting.
🌙 Dark Mode (Default)
--bg-base: #080A0C
--accent: #FB923C
--text: #E8EDF2
Font: Barlow Condensed 800
☀️ Light Mode
--bg-base: #F2F4F6
--accent: #EA580C
--text: #0C1014
Font: Barlow Condensed 800
CSS Token Export
Complete FreightOps design token set.
/* FreightOps Design System v1.0 — Dark Theme */
/* Surfaces */
--bg-base: #080A0C;
--bg-surface: #0E1114;
--bg-elevated: #14181D;

/* Accent — Industrial Orange */
--accent: #FB923C;
--accent-hover: #FDBA74;

/* Signal Palette */
--green: #4ADE80; /* delivered */
--blue: #38BDF8; /* in transit */
--yellow: #FCD34D; /* delayed */
--red: #F87171; /* failed */

/* Typography */
--font-heading: 'Barlow Condensed'; /* 700/800, uppercase */
--font-body: 'Barlow';
--font-data: 'DM Mono';
FREIGHTOPS DESIGN SYSTEM v1.0 · STUDIOFLOW.TOP · BUILT WITH ❤ BY APTOCODE