beqom Visual identity and Content Style Guide

beqom

Colors

The beqom color palette uses 3 primary colors plus white.

Red

  • $red
  • RGB 195, 0, 20
  • #c30014

Navy

  • $navy
  • RGB 36, 58, 85
  • #243A55

Mid Grey

  • $midnavy
  • RGB 96, 114, 133
  • #607285

White

  • $white
  • RGB 255, 255, 255
  • #ffffff

Use beqom’s color palette:

  • to draw users’ focus to particular content areas
  • to give emphasis, depth and highlight to our work where needed
  • in the right context — for example don’t use large amounts of color in a form, it can distract the user
  • with restraint — users can read content better when we use limited color
  • to help convey meaning to interaction patterns, for example, for mandatory form fields. Never use color alone to do this

White space

White space can help group elements on a page and structure information. Used well, white space makes content easier to read.

Text Color

Use a color contrast checker when using the dark colors on backgrounds other than white.

Highlight Text

Red

  • $red
  • RGB 195, 0, 20
  • #c30014

Body Text

Mid Grey

  • $midnavy
  • RGB 96, 114, 133
  • #607285

All headings (Dark background)

White

  • $white
  • RGB 255, 255, 255
  • #ffffff

Other colors you can use

You can use other colors to:

  • to draw users’ focus to particular content areas
  • emphasise content so that it’s read in an order that makes sense to users
  • give the impression of depth and layering — this can help structure content in a helpful way for users
Yellow
Yellow
  • Start Color: #F2E27A
  • End Color: #F4E6C5
Orange
Orange
  • Start Color: #F1B168
  • End Color: #F1D19A
Pink
Pink
  • Start Color: #EEA49F
  • End Color: #F7DFDE
Purple
Purple
  • Start Color: #D3CDE1
  • End Color: #E5DFF3
Green
Green
  • Start Color: #BADE80
  • End Color: #DDEFB3
Teal
Teal
  • Start Color: #92D6D6
  • End Color: #C2EDED
Blue
Blue
  • Start Color: #8BC1DD
  • End Color: #C0E1EC
Navy
Navy
  • Start Color: #627384
  • End Color: #C0E1EC

Download Gradients (Adobe Illustrator)