Skip to content
Now Hiring

Cloud, data, Salesforce, SAP, engineering and more roles. View open jobs.

Writing about us? The media kit has every logo file, approved descriptions and a fact sheet.

Brandguidelines

The logo and colours behind Oceanblue Solutions, Inc. Both blues come from the logo. Paper and navy ink carry the page; logo blue is the block colour and the action.

Logo

The primary wordmark. Keep clear space around it, and never recolour, stretch or redraw it.

Oceanblue Solutions, Inc. logo on a light background
Oceanblue Solutions, Inc. logo on a dark background

Paper

#F5F8FA, bg-field-paperDefault ground, forms, reading

Mist

#EAF1F4, bg-field-mistOne step from paper, for a second light chapter

Shallow

#C9E4EF, bg-field-shallowPeople. The lightest coloured field

Cyan

#0CAACF, bg-field-cyanLogo cyan. Accent, contact sentences

Brand

#0A72C0, bg-field-brandLogo blue. Platforms, the home hero

Deep

#0B2E46, bg-field-deepOperations, product, running ink

Abyss

#061A28, bg-field-abyssFooter and closing fields

Using colour

Logo blue is the block and the action
Ocean 600 fills brand fields and primary buttons, and carries white text at AA contrast.
Cyan is an accent, never text on light
Logo cyan is for fills, marks and actions on dark fields. On white it reaches only about 2.7:1, too low for text.
Navy is the ink
Navy 900 carries running text on paper and mist, and mist 600 the secondary text. Both pass AA on every light field.
One field per section
A section takes one chapter field, floor to ceiling. Fields change between sections, not inside them.
Status colour means something
Buoy is for flags and warnings inside product screens only, never decoration.

Full scales

Ocean (logo blue)

  • 50 #eaf4fb
  • 100 #d2e8f7
  • 200 #a6d0ef
  • 300 #6fb2e3
  • 400 #3794d4
  • 500 #1580c8
  • 600 #0a72c0
  • 700 #085c9c
  • 800 #0a4b7d
  • 900 #0c3e66

Cyan (logo cyan)

  • 100 #c9eef7
  • 200 #97ddef
  • 300 #5cc8e3
  • 400 #2ab7d8
  • 500 #0caacf
  • 600 #0889aa
  • 700 #0a6e89

Navy

  • 600 #22587a
  • 700 #1c4763
  • 800 #153a52
  • 900 #0b2e46
  • 950 #061a28

Tide

  • 100 #e1f0f6
  • 200 #c9e4ef
  • 300 #a9d2e3
  • 400 #7db8d0
  • 700 #2f6880
  • 800 #24536a

Mist

  • 0 #ffffff
  • 50 #f5f8fa
  • 100 #eaf1f4
  • 200 #dbe5ea
  • 300 #c3d0d8
  • 400 #98a9b4
  • 500 #6e8291
  • 600 #4b6273
  • 700 #3a4e5d

Buoy (status only)

  • 300 #f8c55a
  • 400 #f5b83d
  • 500 #e99a16