Design System
Charting a course through visual design
with the precision of celestial navigation
and the timelessness of the open sea.
From the deepest navy of midnight waters to the gleaming brass of a ship's wheel, every color is drawn from the maritime world.
Classic serif typefaces evoke the engraved lettering of nautical charts, ship nameplates, and captain's logbooks.
A measured 4px base unit brings the same precision to layout that nautical miles bring to charting a course.
Actions forged with the reliability of brass fittings and the clarity of signal flags. Each button communicates intent and hierarchy.
Input elements as precise as a ship's log. Every field captures essential data for navigation and record-keeping.
Content vessels carrying information as reliably as clipper ships. Each variant serves a distinct navigational purpose.
Celestial and dead reckoning methods for determining position at sea using the stars and compass.
The art and science of mapmaking, translating the curved earth onto flat parchment with precision.
Reading the sky, barometer, and sea state to predict weather and plot safe passage through storms.
Detailed route from departure to arrival, including waypoints, hazards, tidal data, and contingency anchorages along the passage.
Detailed soundings and navigational aids for safe entry into port, including buoy positions and channel markers.
Wind shifted to the southwest at dawn. Reduced sail and altered course to compensate. Crew in good spirits despite rough conditions.
Standing rigging inspected and found in satisfactory condition. Replaced two worn shrouds on the mainmast. All running rigging serviceable.
Structured records as orderly as a ship's manifest. Clear headers and measured rows provide quick comprehension at a glance.
| Vessel | Classification | Home Port | Status | Tonnage |
|---|---|---|---|---|
| HMS Endeavour | Bark | Whitby, England | At Sea | 366 |
| Flying Cloud | Clipper Ship | Boston, MA | At Sea | 1,783 |
| Cutty Sark | Clipper Ship | London, England | In Port | 963 |
| Constitution | Frigate | Boston, MA | Refit | 2,200 |
| Thermopylae | Composite Clipper | Aberdeen, Scotland | Decommissioned | 948 |
Signal flags of the interface, communicating classification, status, and category with compact maritime precision.
Critical communications from the bridge, ranging from routine notices to urgent warnings. Each level carries appropriate visual gravity.
Navigational Notice
New channel markers have been deployed at the harbor entrance. All vessels should update their charts to reflect the revised approach bearings.
All Clear
Port inspection completed successfully. Vessel cleared for departure on the next favorable tide. All documentation verified and stamped.
Weather Advisory
Barometric pressure falling rapidly. Expect deteriorating conditions within 12 hours. All vessels should secure loose gear and review storm procedures.
Storm Warning
Force 10 gale imminent from the northwest. All vessels must seek shelter immediately. Harbor operations suspended until further notice.
The guiding stars by which we navigate our design decisions, drawn from centuries of maritime tradition and seamanship.
Every design decision should point toward clarity. Like a compass needle, our interfaces guide users unerringly to their destination without confusion or misdirection.
Design for all conditions, not just fair weather. Interfaces must remain usable and legible across devices, screen sizes, and varying user contexts, much as a ship endures all seas.
Just as navigators read the stars by brightness, our visual hierarchy must make the most important elements shine brightest while supporting stars provide essential context.
Precision in every detail, from spacing to typography. A ship's rigging must be measured and tied with exactness; likewise, every pixel of our design must serve its purpose with care.
Consistency is the keel of good design. Patterns, once established, should be maintained throughout the system so that users always know what to expect.
Like a well-built vessel, our design system must be durable and timeless. Trends may shift like tides, but fundamentally sound design endures through every season.