Style Guidelines

Color

Colors convey our brand personality and values but also help to navigate users through interfaces. The right combination of colors can influence how they feel, think, and behave.

Primary colors

These four colors are our primary colors. They are the colors most associated with the Frontline brand and should be the most predominant color of any webpage or composition.

  • Plum (600)

    #7e4082

  • Plum (700)

    #402b56

  • Mint (400)

    #6bccb3

  • Berry (700)

    #2b4c59

Accent & Support Colors

These colors are meant to compliment the primary colors and should be used sparingly — never as the most dominant color of a webpage or composition.

  • Plum (800)

    #1d1934

  • Peach (400)

    #e56a54

  • Banana (300)

    #f6dc6b

  • Berry (400)

    #4ec3e0

Neutral Tones

Too many competing colors can be overwhelming, so it’s important to balance them out with a foundation of neutral tones. These muted tones are meant to give users’ eyes a rest as well as help draw attention to more meaningful elements of a page or composition.

  • Pepper (700)

    #15181d

  • Pepper (500)

    #2f353f

  • Pepper (400)

    #414c56

  • Pepper (300)

    #65727d

  • Pepper (100)

    #a6b0b9

  • Salt (500)

    #d5dbe0

  • Salt (300)

    #f1f3f5

  • Salt (200)

    #fafbfb

Expanded Color Palette

In some instances (mostly having to do with accessibility) you’ll find yourself needing an alternative tone of one of our brand colors. Below is our brand’s expanded color palette, which may be used sparingly when none of the main colors prove to be sufficient.

Examples for using our expanded color palette: Shading in illustration, Graphs and charts when more colors than our main colors are needed, and specific accessibility needs.

Plum

  • Plum (800)

    #1d1934

  • Plum (700)

    #402b56

  • Plum (600)

    #7e4082

  • Plum (500)

    #a05da6

  • Plum (400)

    #c67dcc

  • Plum (300)

    #df9ee5

  • Plum (200)

    #efc4f3

  • Plum (100)

    #f9eafa

Mint

  • Mint (700)

    #1d5447

  • Mint (600)

    #2e7362

  • Mint (500)

    #52a38f

  • Mint (400)

    #6bccb3

  • Mint (300)

    #85dec8

  • Mint (200)

    #b1f0e0

  • Mint (100)

    #d8f5ed

Berry

  • Berry (700)

    #2b4c59

  • Berry (600)

    #2a6478

  • Berry (500)

    #2c96b0

  • Berry (400)

    #4ec3e0

  • Berry (300)

    #71d2eb

  • Berry (200)

    #abe7f7

  • Berry (100)

    #d4f2fa

Peach

  • Peach (700)

    #7a1600

  • Peach (600)

    #992f17

  • Peach (500)

    #c44c31

  • Peach (400)

    #e56a54

  • Peach (300)

    #f09078

  • Peach (200)

    #fabeaf

  • Peach (100)

    #ffe9e3

Banana

  • Banana (700)

    #593900

  • Banana (600)

    #946a07

  • Banana (500)

    #bf942e

  • Banana (400)

    #deb743

  • Banana (300)

    #f6dc6b

  • Banana (200)

    #faecaf

  • Banana (100)

    #fcf6d7

Pepper

  • Pepper (800)

    #000000

  • Pepper (700)

    #15181d

  • Pepper (600)

    #20242b

  • Pepper (500)

    #2f353f

  • Pepper (400)

    #414c56

  • Pepper (300)

    #65727d

  • Pepper (200)

    #87939e

  • Pepper (100)

    #a6b0b9

Salt

  • Salt (600)

    #c0c8cf

  • Salt (500)

    #d5dbe0

  • Salt (400)

    #e5e9ec

  • Salt (300)

    #f1f3f5

  • Salt (200)

    #fafbfb

  • Salt (100)

    #ffffff