Nautical Maritime Flags

International Signal Code Design System

Color Palette

Drawn from the international maritime signal flag spectrum: the four primary signal colors that must be visible across open ocean, paired with brass hardware and weathered rope.

Signal Colors

Signal Red
#C8102E
Danger, primary actions
Signal Blue
#0057B8
Information, links
Signal Yellow
#FFC72C
Warnings, highlights
Signal White
#F5F2EB
Text, dividers
Signal Black
#1C1C1E
Contrast, depth
Signal Orange
#E87722
Accents, urgency

Naval & Hardware

Navy Deep
#0C2340
Surface backgrounds
Brass
#B5882A
Borders, headings
Copper
#B87333
Warm accents
Rope
#C4A35A
Texture borders
Flag Pattern
Oscar (O)
Decorative
Flag Pattern
November (N)
Decorative

Typography

Condensed, stencil-style fonts evoke ship hull markings and harbor signage. Monospace for coordinates, log entries, and technical data.

All Hands On Deck
Port & Starboard
Bearing 270 True
Every vessel at sea carries a set of signal flags that form the International Code of Signals. These flags allow ships of different nations to communicate without a common language. Each flag represents a letter of the alphabet and carries its own specific meaning when flown alone.
LOG ENTRY — 0600 UTC / LAT 41.39 N / LON 71.05 W
Display: Oswald 700 | Heading: Oswald 600 | Body: Barlow Condensed 400 | Mono: Courier Prime
Display — Oswald
ABCDEFGHIJ
0123456789
Body — Barlow Condensed
The maritime signal flag system dates to 1857 and has been revised by international agreement. The current version uses 26 alphabetical flags, 10 numeral pennants, and 3 substitutes.
Mono — Courier Prime
POSITION: 51.5074 N 0.1278 W
COURSE: 127 TRUE
SPEED: 12.4 KTS
DEPTH: 48.2 FTH
Scale
Aa Aa Aa Aa Aa

Spacing

A 4px base unit provides consistent rhythm. Like the measured lines on a nautical chart, spacing maintains legibility at every scale.

--space-xs
4px
--space-sm
8px
--space-md
16px
--space-lg
32px
--space-xl
64px

Buttons

Signal-flag-inspired color coding ensures clear visual hierarchy. Brass-finished buttons evoke shipboard instruments.

Primary Actions

Secondary & Ghost

Sizes

Forms

Ship's log style inputs. Brass-accented focus states, chart-paper subtle texture, stencil labels.

Official registered name

Vessel Class

Certifications

Cards

Content panels with signal-flag top stripes. Each stripe pattern identifies the card category at a glance, just as flags identify vessels at sea.

Bravo Flag

Dangerous Cargo

This vessel is carrying, loading, or discharging dangerous goods. All vessels must maintain safe distance and observe precautions.

Echo Flag

Course Alteration

I am altering my course to starboard. All vessels in the vicinity should take appropriate action and monitor VHF Channel 16.

Quebec Flag

Health Clearance

My vessel is healthy and I request free pratique. All crew have been inspected and documentation is in order for port entry.

Charlie Flag

Affirmative

Yes. Affirmative. The preceding signal or group should be read in the affirmative. Standing by on frequency for confirmation.

Lima Flag

Stop Immediately

You should stop your vessel instantly. In harbour: the ship is under quarantine. All movement prohibited until further notice.

Kilo Flag

Communicate

I wish to communicate with you. Switch to working channel as assigned by port control. Maintain radio watch at all times.

Alerts

Status messages styled after maritime signal classifications. Color-coded for instant recognition, as at sea.

Navigational Notice

Chart BA 1234 has been updated. Shoal reported at position 50.42N 001.15W. Mariners should exercise caution and update passage plans accordingly.

Port Entry Confirmed

Vessel cleared for entry to berth 7, Victoria Dock. Pilot boarding at waypoint Alpha at 0630 UTC. Harbor speed limits apply.

Gale Warning

Storm Force 10 expected in sea area Fitzroy. Southwest veering northwest, 48 to 55 knots. Very rough to high seas. Moderate to poor visibility.

Mayday Relay

All stations, all stations. MAYDAY RELAY. Motor vessel Dorado, 12 persons on board, taking water in position 49.30N 005.45W. All vessels in vicinity requested to assist.

Signal Flags

A selection of International Code of Signals flags rendered in pure CSS. Each flag has a single-letter meaning when flown alone.

A
Diver Down
B
Dangerous
C
Affirmative
D
Keep Clear
E
Altering Stbd
F
Disabled
H
Pilot On Board
K
Communicate
N
Negative
O
Man Overboard

Navigation

Compact nav bar with signal-red active indicator and brass hover state.

Ship's Log

Tabular data styled as a captain's log book. Brass-topped headers, subtle row hover.

Time (UTC) Position Course Speed Weather
0000 50.72N 001.16W 225 T 12.4 kts Clear, SW 15 kts
0400 50.18N 001.82W 228 T 11.8 kts Overcast, SW 18 kts
0800 49.65N 002.47W 230 T 12.1 kts Rain, W 22 kts
1200 49.10N 003.15W 232 T 10.6 kts Fog, W 12 kts
1600 48.55N 003.88W 235 T 13.2 kts Clear, NW 10 kts