Design system · Phase 0
A lighthouse sweeping
the dark of the oceans.
Le Phare reads like a publication and behaves like an instrument. The abyss is the paper, light is the ink, and the amber beam marks only what matters.
Five principles
The chart carries the conclusion
Figure titles are statements, not descriptions. One hero series in amber, context in muted blues, events annotated on the axis, source in mono below.
Darkness is the paper
No borders where a 2 to 4 percent lightness step will do. Hairlines at 8 percent. Amber appears three times per screen at most; red only for incidents.
Serif argues, sans measures, mono locates
Spectral for titles and editorial voice. Archivo for interface and labels. IBM Plex Mono for coordinates, timestamps and identifiers. Tabular figures wherever numbers meet.
Density in layers, finish at the pixel
The number first, the trend second, the detail on hover. Transitions of 150 to 250 ms with a pronounced ease-out. Every animation states something.
Honesty is a design element
Sources under every figure, aggregation only, a methodology page built with the same care as the home page.
Color
One accent. The palette works in luminance steps, not in hues. Light mode swaps the same roles onto cool paper.
Page. The abyss is the paper.
Raised panel, hover rows.
Active surface.
Primary text.
Secondary text.
Meta, captions, axes.
The beam. CTA, hero series, critical data. Three appearances per screen, maximum.
Incidents only. Never decorative.
Measured contrast
| Pair | Ratio | WCAG |
|---|---|---|
| ink on bg-0 | 15.49:1 | AAA |
| ink-2 on bg-0 | 9.00:1 | AAA |
| ink-3 on bg-0 | 4.85:1 | AA |
| accent on bg-0 | 10.28:1 | AAA |
| accent-ink on accent | 10.28:1 | AAA |
| risk-text on bg-0 | 5.56:1 | AA |
| ink on bg-0 (light) | 14.88:1 | AAA |
| ink-3 on bg-0 (light) | 4.64:1 | AA |
| accent-text on bg-0 (light) | 5.16:1 | AA |
Typography
Spectral carries the argument, Archivo runs the instruments, IBM Plex Mono keeps the ship's log.
The observatory
Red Sea transits halve
Weekly risk brief
Chokepoint monitor
Transits through Bab el-Mandeb fell below thirty per week for the first time since tracking began, while insurers widened the listed area to the entire southern Red Sea. Rates followed within days.
Interface text is set in Archivo. Labels stay short, sentence case, and never compete with the data they describe.
Southern Red Sea · war risk zone
1,084 → 42 → 30,660
Every number that meets another number aligns on a fixed grid.
Recommended · Spectral
Suez transits have halved since November
Cool, transitional, close to the register of a broadsheet. The optical axis sharpens at display sizes. This is the voice of measured authority.
Alternative · Fraunces
Suez transits have halved since November
Warmer, softer terminals, more personality but less gravitas. Kept here for comparison; one of the two ships, not both.
Iconography
A custom maritime set: 20 px grid, 1.5 stroke, square terminals, drawn to sit next to IBM Plex Mono.
Components
Actions
Taxonomy tags
Live statistics
0
Incidents · last 30 days
0
Bab el-Mandeb transits
0
AIS anomalies flagged
Data table
| Zone | Type | Incidents 30d | Trend | Last event · UTC |
|---|---|---|---|---|
| Southern Red Sea | Drone strike | 23 | +9 | 2026-07-08 14:32 |
| Gulf of Aden | Boarding | 7 | +1 | 2026-07-05 03:11 |
| Strait of Hormuz | GPS jamming | 41 | +17 | 2026-07-09 21:47 |
| Gulf of Guinea | Hijack | 2 | 0 | 2026-06-28 06:54 |
Dataviz theme
One theme shared by every chart. Categorical order is fixed and CVD-validated (worst adjacent ΔE 31.2); the hero series wears the beam.
Bab el-Mandeb transits fell by two thirds
Weekly transits, cargo vessels above 10k dwt. Sample data.
Jamming now drives the incident count
Monthly incidents by type, Jan to Jun. Sample data.
Six chokepoints, one glance
Weekly transits per chokepoint, indexed scales. Sample data.
Map style · Abyss
A custom MapLibre style built for the observatory: water is the page itself, land recedes, no roads, no cities without purpose. Amber marks observations, red marks incidents.
Motion
Three durations, one curve. Every animation has an editorial meaning; under prefers-reduced-motion everything degrades to its final state.
| Gesture | Meaning | Tool |
|---|---|---|
| Beam sweep, on load then every 9 s | the observatory is on watch | CSS keyframes |
| Masthead lines rise from a mask | the argument opens the page | GSAP SplitText |
| Sections reveal on scroll, staggered | density arrives in layers | GSAP ScrollTrigger |
| Charts draw themselves in viewport | the data is being traced | Web Animations API |
| Shipping-lane particles in the hero | traffic keeps moving through the dark | Canvas 2D |
| Map: camera drift, lane flow, pulsing incidents | the watch room leans in | MapLibre native |
| Counters count up, light streak on primary CTA | the data is alive; the beam passes | rAF · CSS |
150ms
Hover, focus
200ms
State changes
250ms
Entrances