Ocearo
GitHub Try it
Brand guidelines

The Ocearo brand.

How the Ocearo name, mark and colours are built, and how to use them. For articles, videos, partners and contributors.

Logo for dark backgrounds (SVG) Logo for light backgrounds (SVG) Compass mark (SVG) App icon (PNG)
01

Logo

The logo is the word OCEARO in which the O is the compass of the 3D view and the A is a bow splitting the horizon. Use the dark version on dark backgrounds and the light version on light ones.

Ocearo logo on a dark backgroundlogo · dark backgrounds
Ocearo logo on a light backgroundlogo · light backgrounds
Ocearo compass markcompass mark
Ocearo app iconapp icon
02

Construction

Every part of the logo comes from the app itself.

  • The O is the compass of the 3D view, tilted 60° in perspective like the ring that floats around the boat, with its bezel, its twelve graduations fading towards the back and the own boat at its centre.
  • The boat heads 045, towards the rest of the name: white jib, Ocearo-blue mainsail, standing in its centreline plane.
  • The A is the bow: two blades meeting at the stem, the horizon line in Ocearo blue passing behind and cut where they touch.
  • The letters are Geist Regular in capitals, tracked at 0.34 em, like the labels of the instrument panel (SOG, HEADING, TWS).
  • Small sizes: at 48 px and below the compass is shown flat, face-on, with the two sails, so it stays sharp.
03

Clear space and sizes

Keep a clear space around the logo at least as wide as the letter C. Never place it closer to an edge or to other elements.

UseMinimum sizeVersion
Full logo, screen120 px wideLogo, dark or light
Full logo, print30 mm wideLogo, dark or light
App icon64 pxTilted compass on black tile
Favicon16 pxFlat compass with sails
04

Colours

A near-black ground and one luminous blue. Red, green, violet and yellow are reserved for meaning — danger, starboard, their move, caution — and never used for decoration.

Ocearo Blue#09BFFF · oBlueBrand accent, own boat, actions
Night Black#0A0A0A · backgroundMain background
White#FFFFFF · foregroundText and logo on dark
Deep Ink#0D1114 · inkLogo and text on light
Blue on light#0090C8 · blue-deepAccent on light backgrounds
Port Red#CC000C · oRedDanger, our move, MOB
Starboard Green#0FCD4F · oGreenOK, starboard, course
Caution Yellow#FFBE00 · oYellowWarnings
Panel Grey#424242 · oGray2Panels and borders
05

Typography

Geist, by Vercel, under the SIL Open Font Licence. One family for everything; Geist Mono for coordinates and data.

Geist
Display · 300Your boat, the sea and the traffic, in live 3D.
Label · 500 · 0.22emSOG — HEADING — TWS — AWA
Value · 4006.0 KN
Body · 400Ocearo turns the boat’s data into a calm, live picture of the boat, the sea and the traffic around it.
Geist Mono · data46°09.2′N 001°09.8′W · CPA 0.4 NM
06

Interface principles

The look of the app and of everything around it.

  • Calm first. A dark, quiet screen; only what needs attention lights up.
  • One accent. Ocearo blue marks the own boat and the actions. Everything else is white or grey.
  • Colour means something. Red, violet, orange and green follow the COLREG and navigation-light conventions, everywhere.
  • Numbers you read from afar. Large values, small spaced labels, tabular figures.
  • Real pictures only. Screenshots and videos come from the app with real data, never mock-ups or stock photos.
07

Do and don’t

The logo is always used as supplied.

✓As supplied, on a plain background
✕Do not stretch or squeeze
✕Do not recolour
✕Do not rotate
✕No shadows, glows or outlines
✕Not on busy pictures
08

Voice

Ocearo speaks like a good crew member: short, factual, calm. Sailing words, not software words.

SayAvoid
Avoid: 15° to port. Rule 18, we keep clear.Collision algorithm output
An aid to the watch.Fully autonomous navigation
Anchor watch, man overboard, laylines.Geofence, emergency module, routing engine
Works offline once the area is downloaded.Cloud-powered