Skip to main content

Utility (external) navigation

Color

Color plays a big part in bringing a brand together. Here is the palette of the base scheme, right next to each other. If you can't feel a brand impression or at least get a hint at a mood, it might be worthwhile to revisit the scheme.

  • #0081a7
  • #f07167
  • #00afb9
  • #6100a7

Often the brand palette is used more subtly, via the light versions of the brand shades. These washed-out or pastel tones should also work together to give you a hint of the brand:

  • #ccf4ff
  • #ffcfcc
  • #ccfcff

Here are all the brand colors, broken out in logical groupings.

Palette Value Name Description Category
#222 black Black or near-black, typically used for body text against a white background. Monochrome
#555 grey-dark A dark grey used for less text contrast in places, and some light-on-dark sections Monochrome
#aaa grey A medium grey has lots of utility throughout; borders, text, everything Monochrome
#f7f7f7 grey-light Especially used for alternating sections with white background, but also versatile Monochrome
#fff white The one, the only, white. Monochrome
#0081a7 main A medium shade of an on-brand blue, ideally. Used for links by default Theme
#002733 main-dark A dark shade of the main hue, used for thematic backgrounds Theme
#ccf4ff main-light A very light shade of the main hue, used for backgrounds primarily. Theme
#f07167 second Medium shade of what is usually a hot color like red, yellow, or orange Theme
#331716 second-dark A darker shade of the secondary hue Theme
#ffcfcc second-light A light shade of the secondary hue Theme
#00afb9 third The third brand/theme color in a medium shade Theme
#003033 third-dark A dark shade of the third hue Theme
#ccfcff third-light A light shade of the third hue Theme
#6100a7 accent A special color, often a medium shade. If the brand has a purple or teal, it is great here Theme
#004085 status Text color for status alerts UI
#cce5ff status-background Background color for status alerts UI
#856404 warning Text color for warning alerts UI
#fff3cd warning-background Background color for warning alerts UI
#721c24 error Text color for error alerts UI
#f8d7da error-background Background color for error alerts UI