Skip to content
design

Site

The public bosun.bot site, in the bosun-bot/site repository, where customers meet bosun for the first time.

On this page
bosun.botYour AI watch officer.bosun watches the instruments, the weather and the traffic around your boat, and speaks up when something needs the crew.
See it aboardRead the docs
ALARMAnchor drag · 38 m outside swing circle · since 21:02ACK
DepthSOUNDER
8.4m
▲ +0.3 m / 10 min
True windMAST
14G22kn
TWD 214°
SOGGPS
0.4kn
COG 087°
The site in the system: kicker, headline, lead, two actions, and the product drawn with the same patterns as the app.

The site is a separate repository, bosun-bot/site, built with React and Vite. It is read by sailors and owners deciding whether they want bosun aboard. It takes the system's tokens, typefaces, accent and patterns, so product illustrations can use the same visual vocabulary as the application. This guide defines the intended contract; it does not verify the separate repository's implementation.

01Show the real productProduct shots are drawn with the same patterns the app uses, so a screenshot on the site matches the app aboard.
02One accentThe accent marks the primary action and what is live, as in the app. Red stays reserved for alarms, even in marketing.
03Room to breatheThe site may use larger type and more space than the app. It uses the same tokens to do so.

What the site takes from the system

System elementOn the site
TokensThe semantic tokens and the Dusk and Day palettes, as generated CSS
TypefacesIBM Plex Sans and IBM Plex Mono
AccentThe primary action and live markers
PatternsReadout strip, alarm row, status pill and sidebar in product shots
IconsOpenBridge for maritime features, Lucide for generic ones

Using the system on the site

Do
See it aboardRead the docs
Make the primary action the accent, with one neutral secondary action beside it.
Don't
Order now
Don't make a call to action red. On the site as in the app, red means alarm.

Adoption: pending — the separate site repository needs verification against the shared tokens and IBM Plex typefaces

Product story and evidence

Lead with the task the crew can accomplish, then show the relevant product view and a useful next step. State whether a capability is available, in a pilot, or planned. Label demonstration readings and keep measured results linked to their source and period. An attractive instrument drawing is not evidence of a deployed capability.

Use real kit components for interactive demonstrations. Screenshots need a caption, an accessible description and a readable crop; keep personal vessel and crew information out of public examples. Diagram colors can separate services or data paths using the shared diagram roles without assigning an alert priority.

Layout and interactions

Choose a headline role for the headline and body-reading for explanatory text. Leave buttons at their control role. Stack the text, actions and product figure at narrow widths; avoid scaling the whole hero into tiny type. Keep essential content available when animation and images are disabled.

Use a link for navigation and a button for an action. Give each page one clear primary next step, with visible keyboard focus and meaningful link text. The logo's destination, cursor and accessible name follow the logo component. Theme changes must preserve contrast in illustrations and embedded component scopes, not only in the page background.

The site uses the app's palette, type families and icons, with a larger display type scale and entrance motion on its own pages. It takes the generated tokens.json, versioned with the kit, and copies the raw icon SVGs from @bosunkit/icons/svg and lucide-static at the kit's pinned versions.