Plinth

One system for nine freight tools.

A design system and documentation site that unified nine internal logistics tools built by four teams over ten years.

Sector: Design system for Corvo Freight
Where: Hamburg
Year: 2026 · 10 months
Role: Design system, Tokens, Docs site

Plinthby Corvo Freight Search tasks, components, tokens⌘Kv2.4.0

Build freight screens without starting from a screenshot.

Plinth is Corvo’s design system: 46 components, one set of tokens, and docs written around the jobs your screen has to do. Start with a task.

CVF-24-118734Delayed 2 h 40 min

HAMRTM

ETATue 18 Mar, 18:40CarrierNordbahn Cargo

Show a delayed shipmentBadge, reason line and new ETA. Used in Dispatch, Tracking and the driver app.

Cancel bookingKeep it

Confirm a destructive actionWhen to ask, and what the button says.

Status: Delayed ×Lane: HAM → RTM ×+ Filter

Filter a long tableChips, saved views, empty results.

Where Plinth is live

7 of 9 tools migrated

Tool	Used by	Status	Since
Dispatch	Ops, 140 users	Migrated	Jan
Yard	Terminal staff	Migrated	Feb
Bookings	Customer service	Migrated	Mar
Billing	Finance	Migrated	May
Tracking portal	Customers	Migrated	Jun
Rates	Sales	Migrated	Aug
Driver app	Drivers	Migrated	Oct
Customs desk	Brokerage	In progress	Q1
Claims	Legal	Planned	Q2

Latest changes

2.4.0 Shipment card gets a reason line for delays. Dispatch asked twice.
2.3.2 Date range: keyboard entry for DD.MM.YYYY, matching what Yard staff type.
2.3.0 New token color.status.hold for customs holds.

Docs site homeDocs open on tasks, not a component list. The adoption table keeps every team honest about migration.

The problem

Nine apps, four button styles, three date pickers and no shared source of truth. Every new screen started from a screenshot.

What changed

Audited 1,140 screens and collapsed them into 46 components.
Shipped tokens to Figma and code from one source.
Wrote docs around tasks ('show a delayed shipment'), not components.

Plinth · 46 components · one of each

ButtonBook slotSave draftCancel shipment

Date range 18.03.2025 – 21.03.2025

Status badgeOn timeDelayed 2 h 40 minCustoms hold

Shipment card

CVF-24-118734Delayed 2 h 40 min

HAMRTM

ETATue 18 Mar, 18:40CarrierNordbahn CargoLoad2 × 40′ HC · 31.4 t

Rail slot moved at Maschen yard. New ETA confirmed by carrier 09:12.

Audit wall · 1,140 screens · buttons, date pickers and status labels found in 9 tools

SAVESubmit booking✓ OKSpeichernBookCancel shipment!Date: __/__/____ ▦From [ 18.03.25 ] To [ ▾ ]2025-03-18 → ?DELAYEDlate (2h)⚠ Verspätetstatus: 3ConfirmGo ▸ON TIME

Before · 9 toolsAfter · Plinth

Before and after the auditDrag to compare. Four button styles, three date pickers and five ways to say late became one of each.

Plinthby Corvo Freight Search tasks, components, tokens⌘Kv2.4.0

Components / Data display

Shipment card

One shipment, its route and whether it will arrive when promised.

PreviewPropsAccessibilityFigma

CVF-24-118702On time

HAMGDN

ETAWed 19 Mar, 14:00CarrierNordbahn CargoLoad2 × 40′ HC · 31.4 t

CVF-24-118734Delayed 2 h 40 min

HAMRTM

ETATue 18 Mar, 18:40CarrierNordbahn CargoLoad2 × 40′ HC · 31.4 t

Rail slot moved at Maschen yard. New ETA confirmed by carrier 09:12.

import { ShipmentCard } from "@corvo/plinth";

<ShipmentCard
  id="CVF-24-118734"
  route={["HAM", "RTM"]}
  status="delayed"
  delay={{ minutes: 160 }}
  reason="Rail slot moved at Maschen yard"
/>

Prop	Type	Default	Notes
`status`	`"ontime" \| "delayed" \| "exception"`	`"ontime"`	Sets the badge and the track colour.
`reason`	`string`	—	Required when delayed. Say what happened, not what the code was.

Component page: Shipment cardLive preview, the code to paste and the props, with notes that say why each one exists.

Plinthby Corvo Freight Search tasks, components, tokens⌘Kv2.4.0

Foundations

Tokens

One source, exported to Figma variables and to CSS, iOS and Android on every release.

Token	Value	Use it for
`color.surface.base`	`#ECEEF2`	Page background in every tool
`color.surface.raised`	`#FFFFFF`	Cards, panels, table rows
`color.text.primary`	`#16181D`	Body text, headings
`color.text.secondary`	`#5A6070`	Meta lines, table secondary
`color.action.primary`	`#3D5AFE`	Primary buttons, links, focus
`color.status.ontime`	`#1F9D63`	Badge + track: on time
`color.status.delay`	`#FF8A3D`	Badge + track: delayed
`color.status.hold`	`#D6336C`	Customs or exception holds
`space.2`	`8px`	Inside badges, between icon and label
`space.4`	`16px`	Card padding, table cell x
`radius.card`	`10px`	Cards, popovers

Token tableEvery token says what it is for. Figma variables and code come from the same file.

Button · 3 variants × 6 states

DefaultHoverPressedFocusDisabledLoading

PrimaryBook slotBook slotBook slotBook slotBook slotBook slot

SecondaryBook slotBook slotBook slotBook slotBook slotBook slot

DangerCancelCancelCancelCancelCancelCancel

1000 × 200

Shipment card / Status=ontime

CVF-24-118702On time

HAMGDN

ETAWed 19 Mar, 14:00CarrierNordbahn Cargo

Shipment card / Status=delayed

CVF-24-118734Delayed 2 h 40 min

HAMRTM

ETATue 18 Mar, 18:40CarrierNordbahn Cargo

Shipment card / Status=exception

CVF-24-118790Customs hold

BRVGOT

ETAUnknownCarrierNordbahn Cargo

Katrin Vogel2h

Exception needs the hold reason too. Customs desk will ask for it on day one.

Figma library: statesEvery component ships with all its states drawn, so nobody invents a hover colour again.

New screens ship in days, not sprints. 7 of 9 tools migrated in the first year.

46components (from 1,140 screens)
7/9tools migrated
−60%UI bugs filed

“Our engineers now open the docs before they open Figma. I didn't think I'd see that.”
Katrin VogelDesign lead, Corvo Freight

Next case studyOpenTegThe front desk, in one calm screen.

Front desk

Monday 17 March · 18:04

Door scanner online3

Scan a card or QR, or type a name/

Marko Jovanović checked inUnlimited monthly · valid until 2 Apr · 14th visit this month

1.9 sOpen profile

Checked in today214+18 vs last Monday

In the gym now47/80

Classes left today4Next: HIIT 45 at 18:30

Renewals due this week121 expired, at the door now

Live check-ins

Auto-refresh

MJMarko JovanovićUnlimited · monthly18:04Checked in
TSTeodora Savić10-visit pass · 6 left18:03Checked in
NPNikola PetrovićUnlimited · expired 14 Mar18:01Renew · 4,900 RSD
AĐAna ĐorđevićStudent · monthly17:58Checked in
SMStefan MilićUnlimited · annual17:56Checked in

The problem

What changed

New screens ship in days, not sprints. 7 of 9 tools migrated in the first year.

Got a product like this?