Foundation
Colors
Palette C — Deep Ocean neutrals at 218–222° hue. Maritime Teal replaces green-grass for success states. All scales ship 10–12 stops plus a full alpha ramp.
Primitives
Grey — Palette C 218–222° · 12 stops · neutral base
950
#020A14
900
#071525
800
#0A1E35
750
#0F2848
700
#153258
600
#2A4F72
500
#456E92
400
#6A96B5
300
#92BACE
200
#BAD6E4
100
#D4EAF5
50
#EAF6FD
Blue — Info & Actions 217° · primary CTA
900
#001633
800
#002B66
700
#004199
600
#0056CC
500
#006CFF
400
#3389FF
300
#66A7FF
200
#99C4FF
100
#CCE2FF
50
#E8F1FE
Maritime Teal — Success 160° · bioluminescent · new
900
#00221A
800
#004535
700
#006850
600
#008B6B
500
#00AD86
400
#00C99D
300
#33D9B0
200
#80E8CE
100
#BFEDDE
50
#E5FAF5
Yellow — Brand 50°
900
800
700
600
500
#FFDB03
400
300
200
100
50
Orange — Warning 22°
900
800
700
600
500
#FF934F
400
300
200
100
50
Red — Error 0°
900
800
700
600
500
#FF5454
400
300
200
100
50
Purple — Secondary 263°
900
800
700
600
500
#8A4BFF
400
300
200
100
50
Semantic — Surface (elevation stack)
Surface Sunken
--color-surface-sunken
Surface Base
--color-surface-base
Surface Raised
--color-surface-raised
Surface Overlay
--color-surface-overlay
Surface Modal
--color-surface-modal
Surface Blur
--color-surface-blur
Semantic — Surface (status)
Surface Info
--color-surface-info
Surface Info Light
--color-surface-info-light
Surface Success
--color-surface-success
Surface Success Light
--color-surface-success-light
Surface Warning
--color-surface-warning
Surface Error
--color-surface-error
Surface Attention
--color-surface-attention
Surface Secondary
--color-surface-secondary
Semantic — Text
Text Primary
--color-text-primary
Text Secondary
--color-text-secondary
Text Tertiary
--color-text-tertiary
Text Link Primary
--color-text-link-primary
Text Link Secondary
--color-text-link-secondary
Text Success
--color-text-success
Text Error
--color-text-error
Text Warning
--color-text-warning
Text Attention
--color-text-attention
Text Disabled
--color-text-disabled
Foundation
Typography
Inter Variable for UI & display. JetBrains Mono for code and data. Semantic type scale from Figma Scale/App collection.
Type scale (Scale/App)
Route Optimised
32px / 600 / lh 40
--type-display
Vessel ETA Dashboard
28px / 600 / lh 36
--type-h1
Weather Conditions
24px / 600 / lh 32
--type-h2
Port of Rotterdam
20px / 600 / lh 28
--type-h3
Departure in 4h 22m
18px / 600 / lh 28
--type-h4
Navigate with precision
16px / 600 / lh 24
--type-h5
Section heading label
14px / 600 / lh 20
--type-h6
Body text — Beaufort Scale 4, moderate breeze expected along the northern route.
14px / 400 / lh 20
--type-body-rg
Forecast updated 3 minutes ago
12px / 500 / ls 2px
--type-caption
Last sync 09:42 UTC
11px / 600 / ls 8px
--type-overline
IMO 9786534 · LAT 51.897° N · LON 4.272° E
14px mono
--font-mono
Font weights
300 — Light
Vessel Routing
400 — Regular
Vessel Routing
500 — Medium
Vessel Routing
600 — Semibold
Vessel Routing
700 — Bold
Vessel Routing
Foundation
Spacing & Radius
4px base unit. Spacing tokens range from 4px to 80px. Border radius from 4px to 999px pill.
Spacing scale
space-1 4px
space-2 8px
space-3 12px
space-4 16px
space-5 20px
space-6 24px
space-8 32px
space-10 40px
space-12 48px
space-16 64px
space-20 80px
Border radius
radius-sm
4px
radius-md
8px
radius-lg
12px
radius-xl
16px
radius-full
999px
Components
Buttons
Six variants across three sizes. Hover states use adjacent stops in the primitive scale.
Variants
Sizes
States
With icons
Components
Badges
Status indicators for route states, vessel conditions, and system notifications.
Subtle (default)
On track In review Weather alert Expired Attention Ongoing Draft
Solid
✓ Departed → En route ⚠ Delayed ✕ Cancelled ★ Priority
Tags with remove
Rotterdam × Beaufort 4 × IMO 9786534 × Container ×
Components
Inputs
All inputs use the grey-750 surface with a 1px border-primary ring. Focus adds a blue ring and upgrades the border.
IMO number optional
Please enter a valid UTC datetime
Components
Cards
Base card on grey-800, elevated card on grey-750. Layered surfaces create visual depth without borders.
Stat cards
142
Active vessels
+12 this week
94.2%
On-time arrivals
+2.1% vs last month
7
Weather alerts
North Atlantic corridor
Content card
MV Northern Star — Route Overview
Rotterdam → Singapore · Est. 22 days
On track
Current route follows the Suez Canal transit. Weather forecast shows Beaufort 4 in the Mediterranean for the next 48 hours. Fuel consumption is within projected parameters. No deviations required.
Avatar sizes
AM
JK
RB
Components
Table
Data-dense table for vessel tracking. Compact rows at 40px, hover uses white-a4 lift.
Vessel Route Status ETA Speed Fuel
MV Northern Star Rotterdam → Singapore On track Apr 30, 09:00 14.2 kn
68%
MV Atlantic Bridge Hamburg → New York Weather delay May 3, 14:30 11.8 kn
45%
MV Pacific Crown Shanghai → Los Angeles In transit Apr 26, 06:00 16.1 kn
82%
MV Adriatic Sun Piraeus → Istanbul Delayed Apr 24, 18:00 9.4 kn
22%
MV Baltic Pioneer Copenhagen → Riga Docked — 0.0 kn
91%
Components
Alerts
Inline contextual messages. Tinted backgrounds with matching border and icon colours.
ℹ
Route update available
A more fuel-efficient route has been calculated. Estimated savings: 3.2% fuel, +4h transit time.
✓
Berth confirmed
Port of Singapore has confirmed berth allocation at Terminal 4, Gate 12. Arrival window: 06:00–08:00 UTC.
⚠
Weather alert — North Sea
Beaufort 7 forecast for the next 18 hours. Consider detouring via southern shipping lane.
✕
AIS signal lost — MV Adriatic Sun
No AIS position data received in the past 47 minutes. Last known position: 37.9°N, 23.7°E.
Components
Forms
Toggle switches, checkboxes, and selection controls.
Toggles
Weather alerts enabled
Auto-reroute on delay
AIS tracking active
Fuel optimisation (disabled)
Checkboxes
Container vessels
Bulk carriers
Tankers
LNG vessels (restricted)
Progress bars
Route completion — MV Northern Star68%
Fuel remaining — MV Atlantic Bridge45%
Cargo loaded — MV Pacific Crown92%
Engine health — MV Adriatic Sun22%
Components
Feedback
Skeleton loaders, tooltips, and empty states.
Skeleton loaders
Tooltips
Beaufort Scale 4 — Moderate breeze
IMO 9786534 · Flag: NL
Last updated 3 min ago
Live
Empty state
No vessels in this region
Adjust your filters or expand the map to see vessels in nearby areas.
Foundation
Icons
Iconly Pro library — 149 bold + 205 outlined icons across 12 semantic categories. All 24×24, also available at 16 and 20px. Click any icon to copy its name.
Sizes
16px
20px
24px · default
32px · display
Semantic colors
primary
primary-light
info
success
success-light
warning
error
attention
secondary
disabled
Icon holder component
Sizes — plain
With label
Navigate
Rotterdam
Beaufort 4
Alert
Tinted holders