◇ RUNDECK DESIGN LANGUAGE

Steady under load.

The design system Rundeck is built from. Every hex value, contrast ratio, and font metric on this page was measured. Where a value failed WCAG, it was corrected and re-measured — the failures are documented because they generated the rules.

WCAG AA verified Designed for freight operations One system, four surfaces
01 · Creative direction

A freight brokerage runs on a controlled emergency. A truck breaks down in Amarillo, a shipper moves an appointment by six hours, a driver goes dark for ninety minutes, and somewhere a margin quietly evaporates. In that room, the software’s job is not to be exciting — it is to be the one thing that is not panicking. Rundeck should feel like well-machined equipment: dense, quiet, exact, and more legible the more pressure it is under.

Three tests every decision must pass

  • Does it survive 200 rows? If a treatment looks good on 8 rows and turns to noise on 200, it is wrong.
  • Does the colour mean something? If you cannot name the state it encodes, remove it.
  • Would a dispatcher who has done this for twelve years believe it? Real data shapes.

The one governing rule

Colour marks the exception. Type does the structural work. Nothing decorates. On a board where 190 of 200 loads are fine, ten row-health rails are visible — and only ten. Lifecycle status is rendered achromatically. Only live and terminal success earn chroma.

02 · Colour

Green / amber / red are not free — they are Rundeck’s core state vocabulary (on-time / at-risk / late). The brand colour cannot compete with them.

Harbor · brand · petrol-teal (deliberately not default SaaS blue)

--h-50#E9F9FB
--h-100#D1F1F6
--h-200#AEE2EA
--h-500#078A97
--h-600 · primary#006F7B · 5.90:1
--h-700 · link#005761 · 8.28:1
--h-900#002B31

Hi-Vis · accent · literal safety-vest yellow-green

⚠
Rule: Hi-Vis is never ink on a light surface (1.48:1 on white). It only appears as (a) a signal on a dark ground, or (b) a fill carrying dark ink. Total surface area across the entire ops app: ~40 pixels.
--v-500#D6DD06 · fill
on Asphalt13.57:1 ✓
v-500 on v-900ink pair
✗ on white1.48:1 FAIL

Asphalt · neutrals · cool cast

--n-0#FFFFFF
--n-50 · page bg#F5F7F9
--n-100#EEF1F3
--n-200 · line#E1E5E8
--n-500 · input border#6B737A · 4.82
--n-600 · text floor#5E666C · 5.84
--n-700#424A50 · 9.02
--n-900 · ink#161C21 · 17.18
--n-1000 · asphalt#05080C · sidebar
✓
Text-floor rule: --n-600 is the lightest grey permitted for text anywhere. Verified on every panel surface (white, n-50, n-100, harbor-50, ok-soft, wa-soft, er-soft) — all clear 4.5:1.

Semantic · lifecycle rendered achromatically, health gets chroma

Quoted Assigned En Route Delivered Invoiced Paid Cancelled
On Time Late Exception Verifying…
Compact dot form (uses -ink tier for 3:1):
03 · Typography

Archivo variable (weight 100–900 + width 62–125% in one file) for structure. IBM Plex Mono for reference IDs only — not money. The split is the freight-specific rule.

Scale

Freight brokerage OS--fs-4xl · 44px · weight 700
Load RD-2026-88412--fs-2xl · 26px · weight 700
Dispatch Board--fs-xl · 21px · weight 700 · page title
Panel title--fs-lg · 18px · weight 600
Portal body — customer-facing surfaces read at 15px--fs-base · 15px · weight 400
Ops workhorse — table body, dense UI default--fs-xs · 13px · weight 400
Timestamp · meta--fs-2xs · 12px
Column header micro-label--fs-3xs · 11px · uppercase · wdth 88

The freight-specific number rule

Money · weight · miles · %
$2,850.00 · 42,000 lb · 1,315 mi · 16.1%

Archivo with tabular-nums. Digits align, columns don’t jitter.

Reference numbers
RD-2026-88412 · MC-778412 · USDOT# 2334187 · BOL-88412

IBM Plex Mono at 0.95em with slashed zero — disambiguation for a dispatcher reading a PRO number aloud.

Width axis — the signature move

DISPATCH BOARD · COMPACTwdth 62%
DISPATCH BOARD · COMPACTwdth 92% — compact density mode
DISPATCH BOARD · COMPACTwdth 100% — default
DISPATCH BOARD · COMPACTwdth 125% — display
04 · Components

Buttons

KPI tile

Active Loads
38↑ 4
vs 34 yesterday
Avg Margin
$448↓ $12
last 7 days
On-Time %
96.2%
rolling 30 days
Loads at Risk
3
2 late · 1 exception

Forms

Laredo, TX
Please choose equipment type before continuing.
From To

Alerts

Load cleared to Accounting
QC review passed. INV-2026-1841 queued for generation.
Route deviation — RD-2026-88412
18-mile deviation off I-20 near Vicksburg, MS. Driver has not responded to check-call.

Integration chip

Toggle Integrations in the demo bar to highlight every external system Rundeck would call in production.

DAT API Truckstop API RMIS FMCSA SAFER Twilio Stripe ACH FCM Push Face ID
05 · Motion

Frequency first, purpose second, easing third, duration last. Only transform + opacity animate.

Animates

Button press
scale(0.985) · 140ms
Dropdown
opacity + scale(0.96→1) · 160ms · trigger-origin
Modal
opacity + scale(0.97→1) · 180ms · centre
Drawer
translateX 100→0 · 260ms · ease-drawer
Status flash
420ms wash · the earned decoration
Live pulse
2s · one dot per screen

Deliberately doesn’t animate

Page transitions
adds latency to every nav
⌘K open
highest-frequency action
Table row hover
reads as lag at 5 rows/sec
Sidebar item hover
bg only, no transform
KPI count-up
the loudest template tell
Sort/filter re-render
instant · never animate data changing
06 · Anti-pattern ban list

Named explicitly so nobody has to relitigate them at 11pm before the demo.

⚠
Purple/violet anything · gradients on surfaces or buttons · glassmorphism · rounded-2xl as a default · drop shadows on static panels · emoji as icons · a hero gradient inside an internal tool · KPI count-up animations · donut charts with three slices · overlapping -ml-2 avatar stacks on every table row · transition: all · ease-in · scale(0) entrances.
⚠
Lorem ipsum · “John Doe” · “Acme Inc.” · the four-tile Total Revenue / Total Orders / Total Customers / Total Something row with a green +12.5% chip on each.
See it in the product →

Every screen in Rundeck uses only these tokens.