01
Ocean Freight — FCL
Full container load on core carrier allocations, port-to-port or door-to-door.
- House B/L issued in our own name
Design system
Port Manifest
The visual language behind the BEST MEDA site: an industrial editorial system built from the metaphor of a shipping manifest — ink ground, waybill paper, and one international safety orange.
01 — Color tokens
Palette
ink-900#070b0e
ink-800#0d1419
ink-700#141d24
ink-600#1d2831
hairline#26313a
paper#efebe2
paper-dim#d9d3c6
paper-line#c9c2b1
signal#ff4b14
signal-deep#c62f00
caution#f2b705
steel#8ea3af
steel-dim#5a6b76
02 — Typography
Three voices
Display · Bricolage Grotesque
Move it once.
Variable optical size — 96 for headings, 14 for body copy.
Data · IBM Plex Mono
CNSHA → DEHAM
ALL CAPS, WIDE TRACKING. FIELD LABELS, CODES, NUMBERS.
Imprint · Saira Stencil One
BEST MEDA
ON FILE
03 — Components
Parts library
Buttons
Labels
Signal label
Steel label
Ink label
Form control
Divider — container corrugation
Card & manifest table
- Vessel
- MSC ARIA
- Voyage
- 042W
- POL → POD
- CNSHA → DEHAM
- Containers
- 2 × 40′HQ
- B/L No.
- BMSHA2401187
04 — Texture & motion
Atmosphere
Grain overlay
.grain — SVG fractal-noise at 5% over ink sections.
Paper grid
.paper-grid — 48px waybill ruling on paper sections.
Corrugation
.corrugate — 8px container-wall band.
Slash band
.slash-band — the signal-orange diagonal CTA.
Reveal
.reveal → .is-in via IntersectionObserver, staggered by delay.
Route arcs
.route-arc — dashed SVG paths that draw themselves.