bosun design
One visual language for everything bosun shows a person, on the boat and ashore.
On this page
Althea
Go to…/
Underway
Dashboard
Situation⬤ 1
Conning
Chart7
Anchor
Passage
Aboard
GPS 3DRisk low ▼21:04
ALARMACK
DepthSOUNDER
8.4m
▲ +0.3 m / 10 min
True windMAST
14G22kn
TWD 214°
SOGGPS
0.4kn
COG 087°
bosun design is the shared design system for the crew-facing web UI, the WiFi setup portal, reports and documentation, presentations, investor communications and the public site. It pairs the discipline of OpenBridge, the open maritime design system behind certified bridge displays, with the finish of a modern product: one flat surface separated by hairlines, a single accent, and icons wherever they help the reader find their place. Shared visual roles come from Bosunkit's stylesheets. Live specimens show the kit's implementation; consumer pages describe adoption and the responsibilities of each application.
01Chrome quiet, data loudNavigation, labels and borders stay dim. Live values and alerts own the brightness and the color, so the eye lands on what the boat is doing.
02Meaning never by color aloneSeverity, integrity and state carry a shape or a word with their color, so they read the same at night, in sunlight and to every eye.
03One language, every surfaceThe web UI, the WiFi portal, reports, docs, presentations, investor communications and the site share tokens, type and icons. A change to a token reaches the surfaces that consume it.
What the system covers
ThemesNight, Dusk, Day and Bright, for every light condition aboard.ColorA neutral surface, one accent, and reserved colors that each carry one meaning.TypographyIBM Plex Sans and IBM Plex Mono; size carries the hierarchy.Spacing and gridOne scale on a 4px grid, and the layouts built from it.Elevation and borderFlat surfaces, hairlines, a raised surface for what is active, and a shadow only under overlays.IconographyOpenBridge for maritime concepts, Lucide for generic UI.Alarms and severityThe severity ramp and how an alarm is shown and acknowledged.Data integrityEvery live value says how far to trust it.Data visualizationMeasured, forecast and thresholds, drawn the same way everywhere.ComponentsThe kit's components, rendered live with their examples and props.InstrumentsThe OpenBridge dials, gauges and tanks, rendered from fixed values.UI compositionThe helm, a phone and the nav station, built only from kit parts.
The system at a glance
TypefaceIBM Plex Sans for text and values, IBM Plex Mono for technical labels, code and tabular figures, with roles for controls, reading and diagrams.
SurfacesFlat surfaces separated by hairlines. A card is a bordered surface, only overlays cast a shadow, and only identity surfaces carry a faint gradient.
NavigationAn icon rail beside a grouped panel. The active row is a raised surface, not a color. Groups open and close with −/+.
IconsOpenBridge icons for maritime concepts and Lucide for generic controls, in content as well as in navigation.
AlarmsPriority shape, priority word, cause icon, cause and time, and an ACK button. Only an alarm or an emergency flashes while unacknowledged.
StatusStatus pills such as GPS 3D carry a marker dot in the accent when the state is current.
Where it is used
Web UIpackages/bosun/ui/web: the crew-facing app on the vessel.WiFi portalThe setup portal a crew member opens on a phone to give the vessel its network and name.Reports and docsThe report library in fleet/reports and the documentation bosund serves at /docs/.Report typesStructures and starters for activity, feature, technical, audit, benchmark, decision and investor reports.Investor communicationsThe quarterly report and shareholder email templates.PresentationsSlide layouts, presentation typography and an editable starter deck.SiteThe public bosun.bot site, in the bosun-bot/site repository.