FleetFlow AI

Our own product, built to be bought

FleetFlow AI is what we make when nobody hands us a brief: the complete front end for an AI logistics platform, designed in Figma and then built in React. We sell it as a kit to logistics software founders, freight brokers and agencies, and we use it to show what our product work looks like when it is finished rather than mocked up.

Logistics is a good test for a design studio. The screens are dense, the data is unforgiving, a missed delivery window costs real money, and the people using the software have been doing the job longer than any designer has been looking at it. A dashboard that only looks good in a screenshot does not survive a dispatcher’s morning.

AI proposes, a person approves

The product has six agents: Dispatch, Route, Exception, Customer, Fleet and an Operations Analyst. They watch every load, flag risk early and draft the fix. None of them changes anything on its own. Every action an agent takes either sits inside limits a person set, or waits on an approval screen that shows what will change, what it saves and what the agent was looking at.

Each agent has an autonomy level, a permissions list, an activity log and a pause switch. That is the part most AI dashboards skip, and it is the part a buyer of an operations product asks about first: not what the AI can do, but how they stay in charge of it.

Problems ranked by what they cost

A logistics operation runs on exceptions, and most tools list them by time. FleetFlow ranks them by business impact, so a late refrigerated load for a key account sits above a paperwork mismatch that happened an hour earlier. Each row carries its severity, its impact, the agent’s recommendation and an owner, so the desk can be worked from the top down.

Live tracking follows the same idea. The detail panel shows what a dispatcher checks before they call a driver, reefer temperature, fuel and hours left, and the route agent’s recommendation appears only when a delivery window is actually at risk.

One system, desktop to phone

The Figma file holds 249 screens: 83 desktop, 69 tablet, 33 mobile and 64 in Arabic, all built from one system of 197 components, 52 variables and 19 text styles. Every screen has its loading, empty, error and offline states designed, along with sign in, two step verification and the no access screen that most kits never draw.

Responsive behaviour is written down rather than implied. Two column rows stack below desktop width, tables become card lists on phones, modals become bottom sheets, and wide components have a compact version for tablets.

Arabic, done properly

Arabic is not a translated copy of the English file. The 64 Arabic screens are laid out right to left on their own pages, with the sidebar on the right, timelines and route strips running right to left, and 18 Arabic text styles set in Noto Sans Arabic with line heights that suit the script. Numbers stay in Western digits, and IDs, plates and email addresses keep reading left to right inside Arabic sentences, which is how operations teams in the region actually work.

The design, as code

The same product is built in React 19 and TypeScript, styled with Tailwind using the Figma variables as its tokens, on accessible Radix primitives. It covers 86 screens, modals and states, each at its own address, so a developer can open any designed state directly instead of clicking their way to it. English and Arabic switch at runtime across more than 3,500 translated strings.

The live demo is that code, not a prototype of it. Anyone weighing up the kit can resize it, switch it to Arabic and move through it with a keyboard before they buy. Owning it starts at the FleetFlow AI kit page.

Films that sell the product

Each film covers one complete flow and is animated in code, element by element, at 3200 by 2400. They do the job a feature list cannot: in under a minute a viewer watches a delay get caught, a fix get proposed and a person approve it, which is the whole argument for the product.