Maritime operational platform
A token layer for Ant Design — calm, precise, data-first.
Every value on this page is expressed through Ant Design global & component tokens. No .ant-* overrides, no styled wrappers — drop straight into ConfigProvider.theme.
01
Brand & primary
colorPrimary / colorInfo
#1f5e9e
Steel (chrome neutral)
#5a7184
Cyan accent · sparing
#1796a8
02
System status → antd tokens
success
colorSuccess
warning
colorWarning
error
colorError
info
colorInfo
processing
--sm-color-processing
03
Domain areas — semantic, not antd globals
Area hues are spread away from status hues so a functional area never reads as success / warning / error. Exposed as --sm-area-* CSS variables, consumed via antd Tag / Badge color props — never injected as global tokens.
04
Status vs area — non-conflict proof
Status signals
Active
In transit
Survey due
Detained
Area markers (same screen)
PMS
ISM
CREW
Budget
05
Typography · system stack
H1 · 28Fleet overview
H2 · 22Vessel registry
H3 · 18Planned maintenance
H4 · 15Crew certificates
Body · 13Daily operational record — table cells, descriptions, form values.
Caption · 12Labels, captions and metadata.
Mono · 13IMO 9395044 · JOB-EN-0500 · 4 218.6 h
06
Spacing · 4px base
xxs · 4inline gaps
xs · 8control inner padding
sm · 12table cell inline · gutter
md · 16card body · form column
lg · 24section gap
xl · 32page padding
07
Radius & elevation
SM · 4 — tags, checkboxes
Base · 6 — buttons, inputs
LG · 8 — cards, modals
Tertiary — resting card
Base — dropdown, hover
Secondary — modal, drawer
08
Token-driven components
Button — 9 variants
Input — focus & error states
Required field