Foundations
Colors
Typography
Atoms
Buttons
Avatars
Badges
Inputs
Components
Cards
Alerts
Crew card
Status
Check-in stepper
Navigation
Spacing & Motion
Feedback
Colors
Crew Monitor · Maritime tablet design system
v1.0
Color Tokens
All values derived from the primary blue ramp. Status colours are semantic — never use them for decoration.
Brand / Primary
--color-primary-bg
#DBEAFE
--color-primary-soft
#93C5FD
--color-primary
#1D7CC4
--color-primary-dark
#1560A0
--color-primary-darker
#1A4F7A
--color-primary-sidebar
#0A2E52
Neutral
--neutral-900
#1A1D21
--neutral-700
#3D4248
--neutral-500
#6B7280
--neutral-300
#C4C9D1
--neutral-100
#F0F2F5
--neutral-50
#F8F9FB
Status tokens
Active · #10B981
Warning · #F59E0B
Critical · #EF4444
Break · #8B5CF6
Inactive · #6B7280
Typography
Inter for UI · JetBrains Mono for code, tokens, timestamps.
Type scale
TOKENSPECSAMPLE
--text-display 32px w700 lh1.2 Dashboard
--text-h1 24px w600 lh1.3 Crew Management
--text-h2 20px w600 lh1.35 Active Alerts
--text-h3 16px w600 lh1.4 Eriksen, Lars
--text-body 14px w400 lh1.5 Chief Engineer · Engine Room · last seen 1h ago
--text-small 12px w400 lh1.4 Shift 08:00–16:00 · Bridge · 4h 23m on duty
--text-tiny 10px w600 lh1.3 ON DUTY · OVERTIME · NEAR LIMIT
--font-mono 12px w500 lh1.4 --color-primary: #1D7CC4
Buttons
48px touch target (comfortable). 34px small, 56px large. All variants, sizes, and states.
Variants
btn-primary · #1D7CC4
btn-secondary · #DBEAFE
btn-neutral · #F0F2F5
btn-tertiary · transparent
btn-critical · #EF4444
Sizes
btn-sm · 34px
btn · 48px
btn-lg · 56px
States
default
hover · #1560A0
pressed · #1A4F7A
disabled · opacity 0.38
With icons
Full width
Avatars
Initials-based. 5 sizes. Per-crew colour coding persists across the UI.
Sizes
EL
xs · 24px
EL
sm · 32px
EL
md · 40px ★
EL
lg · 52px
EL
xl · 64px
Per-crew colour variants
EL
Eriksen
AH
Hansen
MB
Berg
KN
Nilsen
SR
Rønning
PO
Olsen
Badges & Pills
Status indicators. Always uppercase, always use the semantic colour token — never raw hex.
Status pills — with dot
Active
badge-active
Near limit
badge-warning
Overtime
badge-critical
Break
badge-break
Off duty
badge-inactive
ID #0847
badge-primary
Duty pills
4h 23m on duty 7h 31m — near limit 9h 12m — overtime On break · 22m left
Inputs & Forms
48px touch height. All states. JetBrains Mono for time/ID fields.
Text input states
Default
Focused
Error
Invalid ID format. Use #XXXX.
Disabled
With icon · Select · Toggle
Search with icon
Select
Toggle
Alerts on
Notifications off
Cards & Containers
Three elevation levels. Stat card for dashboard KPIs.
Card variants
Default card
0.5px border · white · no shadow
card
Elevated card
shadow-md · modals · overlays
card-elevated
Selected card
1.5px primary border
card-selected
Stat cards
Total crew
24
21 on vessel
neutral
On duty
14
3 on break
active
Alerts
2
1 critical · 1 warning
critical
Avg on-duty
5h 42m
Limit: 8h
default
Alerts
Left border = severity. Icon chip tinted with status-bg. btn-primary + btn-neutral actions.
Alert cards
Overtime threshold exceeded
Eriksen, Lars — 9h 12m on duty. Immediate relief required.
Triggered 12 min ago
Approaching shift limit
Nilsen, Kari — 7h 31m on duty. Limit in 29 minutes.
Updated 3 min ago
Unconfirmed check-in
Olsen, Per — shift started 14 min ago, no check-in recorded.
14 min ago
Alert strip — banner
Critical: Eriksen, Lars — overtime exceeded (9h 12m). Immediate action required. 1 CRITICAL ×
Warning: Nilsen, Kari — approaching 8h limit (7h 31m on duty). 1 WARNING ×
Crew Card
Primary crew status component. 3-line layout: name·role / location / extra info. Badge absolute top-right.
All states
AH
Hansen, Astrid · OOW
Bridge
last seen 12s ago
Active
default state
MB
Berg, Morten · AB
Mess Hall
on break · 22m
Break
selected state · 1.5px primary border
EL
Eriksen, Lars · ENG
Engine Room
no motion 1h
Overtime
alert state · red bg + 1.5px critical border
PO
Olsen, Per · OS
No check-in
shift started 14m ago
Off duty
inactive state
Status Indicators
Dots, duty progress bars, and shift type pills.
Status dots
Active
pulse
Warning
Critical
Break
Inactive
Duty progress bars
Hansen, Astrid4h 23m
active · 54%
Nilsen, Kari7h 31m
near limit · 94%
Eriksen, Lars9h 12m — overtime
critical · 100%
Shift pills
08–16
shift-day
14–22
shift-eve
22–06
shift-night
Off
shift-off
08–16 ★
shift-now
Check-in Stepper
4-step flow. Identity → Location → Shift → Confirm. Completed steps show checkmark.
Step 2 of 4 — active state
Identity
Crew ID verified
2
Location
Select station
3
Shift
Confirm hours
4
Confirm
Submit
Room / station selector
Bridge
Engine Room
Deck A
Deck B
Galley
Mess Hall
Navigation
Sidebar · Tab bar · Topbar bell indicator.
Sidebar nav
Dashboard
Crew
Check-in
Schedule
sidebar · #0A2E52 · active border-left #60A5FA
Tab bar / section switcher
Overview
Hours
Certs
Log
active: white card · inactive: transparent
Feedback & Overlays
Toasts, empty states, timeline.
Toast notifications
Check-in confirmed
Olsen, Per — Bridge · 08:14
success
Break scheduled
Nilsen, Kari — break in 5 min
warning
Overtime alert
Eriksen exceeded 8h limit
error
Empty state
No crew on duty
No crew members are checked in for this shift.
Timeline
08:01
Checked in
Engine Room
10:30
Break taken
25 min · Mess Hall
17:12
Overtime alert triggered
9h 12m — limit exceeded
18:12
No motion alert
1h ago · last seen Engine Room
Spacing & Motion
4px grid · calm short motion · gloved-hand touch targets · elevation system.
Spacing scale · 4px grid
4
space-1
8
space-2
12
space-3
16 ★
space-4
20
space-5
24
space-6
32
space-8
40
space-10
48
space-12
64
space-16
★ space-4 (16px) — most common card padding and standard gap value
Motion · calm and short
--duration-fast100msState change, hover
--duration-normal200msDefault transitions
--duration-slow300msSheets, modals
--duration-slower500msPage transitions
Easing: cubic-bezier(0.4, 0, 0.2, 1)  —  No springs, no bounces, no parallax. Nausea-inducing on a moving vessel.
Touch targets · gloved-hand minimum
44
min
WCAG floor
icon-only row action
48
comfortable ★
default for
all controls
56
large
primary action,
alarm acknowledge
Marine tablets are operated through neoprene gloves on a rolling deck.  Default to 48 px ; use 56 for any control that must succeed first try.
Elevation · shadow system
sm
0 1px 2px · 5%
resting card
md
0 4px 6px · 7%
hover, dropdown
lg
0 10px 15px · 10%
popover, toast
xl
0 20px 25px · 15%
modal, sheet
Shadows are purely additive — never use them to imply interactivity. Elevation increases with z-index depth only.