Designed & built by Nisarg Thunga
Design · components

Components

Every drawing the company owns, on the page colour it belongs on. Turn a knob and it redraws — this page runs the same function that renders the PDFs — then take the SVG, a 3× PNG, or the one line that puts it on a page.

Components
14
Across 4 groups — maps, illustrations, data, backgrounds
Ready to use
14
Every one built and downloadable
Variants
69
Named presets — pick one, or turn the knobs from it
Twelve drawings in one contract: the same render function on a page, in a flyer, and from the terminal.
Maps · 1000 × 1000
The globe # globe
The house globe: real coastlines on an orthographic sphere, our own-office countries lit amber, office dots and the Dubai label. Aim it at another region, or turn the label and dots off for a small slot.
DUBAIMIDDLE EAST HQ
Maps · 1000 × 523
Lane map # lane-map
The world map with real shipping lanes drawn as great circles between real ports.
JEBEL ALIHOUSTONNEW YORKROTTERDAMSINGAPORESHANGHAIMUMBAIMOMBASASYDNEY
Maps · 1000 × 660
Region map # region-map
The Gulf and India with the countries World Zone has its own offices in lit, and every office on it.
ARABIAN SEADUBAIDOHAMANAMAJEBEL ALIABU DHABISHARJAHRAS AL KHAIMAHDAMMAMSOHARMUSCATRIYADHKUWAIT CITYKOCHIBANGALOREJEDDAH15 OWN OFFICES · 7 COUNTRIES
Maps · 1000 × 560
Gateway map # gateway-map
A partner pitch's map: their country in blue, the seven own-office countries in amber with the fifteen offices, a lane from their port to Jebel Ali, and the legend that says gateway to the GCC.
USAHOUSTONJEBEL ALIDUBAI HQUSA → THE GULFYour gateway to the GCC15 own offices · 7 countriesUSAWorld Zone own officesUAE 5 · Saudi Arabia 3 · Oman 2 · Qatar 1 · Bahrain 1 · Kuwait 1 · India 2
Illustrations · 800 × 600
Container stack # container-stack
ISO containers in true isometric — one box or a whole yard, in any of the brand colours.
Illustrations · 1000 × 220
Port band # port-band
A container terminal in silhouette — cranes, stacks, a vessel at the quay — as a strip across the head or foot of a page. Also draws the container yard and the airside apron.
Illustrations · 400 × 260
Mode illustrations # mode-set
Ship, freighter, truck and warehouse drawn in one line — the four ways cargo moves.
Data & structure · 1000 × 200
Corridor # corridor
From → via → to: stops on a line, a mode icon on every leg, transit notes underneath.
SEA · LAEM CHABANG TO JEDDAHVIA BAB EL-MANDEBLaem ChabangTHAILANDJeddahSAUDI ARABIA
Data & structure · 1000 × 160
Stat band # stat-band
The KPI strip: big numbers, spaced labels, hairline dividers — one baseline across every cell.
15OWN OFFICES7COUNTRIES25+YEARS EXPERIENCE200+PEOPLE ACROSS THE GCC
Data & structure · 1000 × 220
Timeline # timeline
Milestones on a rule — dates, labels, and the last step in amber.
WORLD ZONE · THE RECORD2014IncorporatedWorld Zone Shipping Services LLC, DubaiOwn offices across the GCCNot an agent network — our own staffIndia officesKochi · BangaloreFMC registeredOwn bond & AMS filing2026Overseas Partners programmeDirect partners, in our own name
Data & structure · 1000 × 300
Office grid # office-grid
The own-office footprint: a tile per country with its flag, its cities and how many.
UNITED ARAB EMIRATES5DubaiHQ · Jebel Ali · Abu DhabiSharjah · Ras Al KhaimahSAUDI ARABIA3Jeddah · Riyadh · DammamOMAN2Muscat · SoharQATAR1DohaBAHRAIN1ManamaKUWAIT1Kuwait CityINDIA2Kochi · Bangalore
Data & structure · 1000 × 180
Credential wall # credential-wall
Networks and accreditations on one white panel — every mark at its own optical weight.
MEMBER NETWORKS · CERTIFIED & ACCREDITEDEvery membership held in our own name — verifiable with the issuing bodyID 89630ID 153760BY ALL MEANSONE FAMILYFMC REGISTEREDCARGO AGENTQUALITYACCREDITEDMIDDLE EAST 2026
Backgrounds · 1000 × 1000
Chart motif # chart-motif
A nautical chart as a background: graticule, compass rose, faint rhumb lines and a scale bar. Sits behind a cover or a page without shouting.
N050100NAUTICAL MILES
Backgrounds · 794 × 1123
Marble # marble
White marble in pure vector: warm white stone, soft clouds, tapered grey veins on one diagonal with branches, hairline cracks and thin gold threads. The upper left stays quiet for the logo and headline.
How to use it
One drawing, one source, four surfaces
  1. On a page. "Copy code" gives you the line. Paste it into any Astro page under animport Component from '../components/design/Component.astro' and it renders at build time — the same function, so the page and the PDF cannot drift apart.
  2. In a flyer template. Put <div data-component="lane-map" data-variant="vietnam-gulf" data-from="art"></div>on a print page. The binder renders it from the document, so the drawing is edited inthe editor like a headline is — change art in the document and the sheet follows.
  3. From the terminal. The second copied line. --out writes the SVG,--png rasterises it through headless Chrome with the house fonts loaded, andnode scripts/component.mjs --list prints everything on this page with its variants.
  4. From a report the vault builds. The Python builders inresources/scripts/ call that same CLI and drop the SVG straight into the report — they never re-implement a drawing, so a fix here fixes the reports too.

SVG or PNG? The SVG is vector and its ground is transparent — it is meant to be placed on a page that already has a colour, and it stays sharp at any size in print. The PNG is 3× and carries the page ground painted in, for a chat, a slide or anywhere that will not take a vector. Every logo and flag is inlined into both, so neither file has anything missing when it leaves this machine.