Skip to content
design
Foundations

Logos

The bosun logo and the vessel mark, and how each sits on the four themes.

On this page
The bosun logo, as the web UI renders it, beside the vessel mark at the sizes it appears.
01Two marks, two jobsThe bosun logo names the product. The vessel mark names the boat the screen belongs to, at the top of the sidebar.
02Gradients mark identitySurfaces are flat. The vessel mark runs from the accent toward blue, and the vessel overview and a report's header carry a faint tint of the same kind; nothing else carries a gradient.
03Follows the themeBoth marks are drawn in currentColor and theme tokens, so they turn amber in Night and darken in Day and Bright.

The kit's Logo component renders the symbol, the name and the tagline, and beside the name the release the application runs, small and level with the end of the tagline. It comes in three sizes, and the tagline can be hidden where space is short, which hides the release with it. The specimens below are the live component, given the example release 27.1.3 through BosunkitProvider.

sm
md
lg
md, no version
md, no tagline
Logo sizes

The vessel mark

The vessel mark is a small tile: the vessel icon in the accent color, on a tint that runs from the accent toward blue, with a hairline in the accent. The kit draws it as VesselMark, in em of the text around it: beside the vessel's name it is 1.625em, 26px at 16px, with a 6px radius.

Althea
Sidebar · 24 px
Althea
Header · 32 px
Althea
Title · 48 px
Vessel mark with the vessel's name

Proportions

¼ mark
Tile · 1 unit squareIcon · 0.58 of the tileRadius · a step of the scale: 6, 8 or 12 pxSpace around · 0.25 of the tile

The dashed line marks the space kept clear around the mark: a quarter of the tile on every side.

On every surface

Althea
--bg
Althea
--surface
Althea
--surface-elevated
Vessel mark on the page, recessed and raised surfaces

Identity in documents and navigation

Use the shared Logo component in the application and design-site header. It keeps the default arrow cursor; its mark and text are identity, not an implied home action. Provide a separate labeled link for navigation. Leave enough clear space that a nearby search field or theme control does not read as part of the wordmark.

A report or presentation can carry the logo in its header while the document title remains the primary heading. Email also needs the company name as text when images are unavailable. Use an asset that contrasts with the chosen background; do not redraw the mark, stretch its proportions or bake the complete heading into an image. Version text describes the running product when supplied. It should not stand in for a report's publication date or revision metadata.

Using the marks

Do
Althea
Keep the mark in its own colors: the accent icon on its accent-to-blue tint.
Don't
Althea
Don't recolor the mark red. Red is reserved for alarms, and a red mark at the top of the sidebar reads as one.
Do
Scale the mark as one piece, keeping the tile square and the icon in proportion.
Don't
Althea
Don't stretch the tile or crowd the name against it. A distorted mark stops reading as the vessel.

The wordmark and the symbol

One mark names the product everywhere it appears outside the application: the public site, the reports, the slides. The wordmark pairs the symbol — the anchor ring and shank in the accent color — with the name in the accent, the tagline under it and the release beside the name. The symbol alone stands where the name beside it would repeat it: a favicon, an app icon, a badge.

Symbol · 16 px
Symbol · 24 px
Symbol · 48 px
Wordmark · sm
Wordmark · md
Wordmark · lg
The symbol and the wordmark

Minimum sizes and clear space

¼ mark
Symbol · not below 16 pxWordmark · not below sm: an 18 px symbol, an 11 px nameSpace around · 0.25 of the symbol on every side

The dashed line marks the space kept clear around the mark: a quarter of the symbol on every side, as around the vessel mark.

On light and dark surfaces

The marks draw in currentColor and the theme tokens, so they adapt to the surface they sit on: the accent symbol and name on both, and a tagline in the text color, near-black on a light surface and near-white on a dark one. The site's and the reports' static assets are the same mark exported on a light and a dark ground; nothing is redrawn for one of them.

Light
Dark
The wordmark on light and dark surfaces