For your safety as well as our employees, we are taking precautions to prevent the spread of COVID-19.
CompSource Mutual is open for business via phone, email and online. However, our Oklahoma City and Tulsa buildings are closed until further notice.

For updates and policyholder assistance options click here

StyleGuide

Colors

Primary

Secondary

Accent 1

Accent 2

Accent 3

Neutral

Fonts

Aa Zz

ProximaNova-Regular

Aa Zz

ProximaNova-Light

Aa Zz

ProximaNova-Medium

Aa Zz

ProximaNova-Semibold

Aa Zz

ProximaNova-Black

Aa Zz

Futura PT Med

Aa Zz

Futura PT Demi

Aa Zz

Futura PT Bold

Aa Zz

Arial

Type Styles

H1

HEADER H1 LEFT WHITE


H2

Header H2 LEFT Primary Demi

Header H2 LEFT Secondary Demi

Header H2 LEFT Primary Demi


H3

Header H3 LEFT Primary Demi

Header H3 LEFT Primary Medium

Header H3 LEFT Primary Medium


H4

Header H4 CENTER Primary 2 Gray

Header H4 LEFT White

HEADER/H4/LEFT/PRIMARY

HEADER/H4/LEFT/White

HEADER/H4/LEFT/Light Blue

HEADER/H4/LEFT/Light Gray


H5

HEADER/H5/LEFT/LIGHT GRAY
HEADER/H5/LEFT/ Light Blue
Futura/H5/LEFT/LIGHT Blue
Futura/H5/LEFT/Primary
Futura/H5/LEFT/White

Special

SPECIAL / CATEGORY / LEFT / GRAY

SPECIAL CATEGORY SMALL

DASHBOARD

DATE August 9, 2018

Special Form

SPECIAL / QUICKLINKS / LEFT / GRAY

Paragraph/Body

  • BULLET ONE
  • BULLET TWO
  • BULLET THREE

Disclaimer: Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis amet voluptatibus cumque reiciendis veritatis veniam vel vero! Quasi ipsa in assumenda minima quae? Nesciunt sit eveniet nulla exercitationem error repudiandae?

Disclaimer: Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis amet voluptatibus cumque reiciendis veritatis veniam vel vero! Quasi ipsa in assumenda minima quae? Nesciunt sit eveniet nulla exercitationem error repudiandae?

Overview lorem, ipsum dolor sit amet consectetur adipisicing elit. Non, sit vitae? Non ipsa dolorem, necessitatibus eligendi esse eos tempora beatae labore ex sapiente? Excepturi unde natus eveniet, fugit doloremque quos.

Overview lorem, ipsum dolor sit amet consectetur adipisicing elit. Non, sit vitae? Non ipsa dolorem, necessitatibus eligendi esse eos tempora beatae labore ex sapiente? Excepturi unde natus eveniet, fugit doloremque quos.

Paragraph text lorem, ipsum dolor sit amet consectetur adipisicing elit. Harum blanditiis tempore molestias reiciendis odit, exercitationem distinctio soluta mollitia accusamus dolorum fugit aperiam, et vel praesentium nemo hic eum labore aut?


Button and Links

PROXIMA NOVA; BOLD; 20pt ; 24 LINE HEIGHT; CENTER; #00A3E0 (Note: Mockup said 10pt and 12pt, styles in sketch said 20pt and 24pt)
BUTTON/LARGE/CENTER/TEAL

PROXIMA NOVA; BOLD; 20pt ; 24 LINE HEIGHT; CENTER; #FFFFFF (Note: Mockup said 10pt and 12pt, styles in sketch said 20pt and 24pt)
BUTTON/LARGE/CENTER/TEAL

PROXIMA NOVA; BOLD; 20pt ; 24 LINE HEIGHT; CENTER; #00263A (Note: Mockup said 10pt and 12pt, styles in sketch said 20pt and 24pt)
BUTTON/LARGE/CENTER/PRIMARY

FUTURA PT; MED; 12pt ; 16 LINE HEIGHT; CENTER; #5D6673
BUTTON/SMALL/CENTER/GRAY

FUTURA PT; MED; 10pt ; 16 LINE HEIGHT; CENTER; #FFFFFF
BUTTON/XSMALL/CENTER/WHITE

FUTURA PT; DEMI; 14pt ; 18 LINE HEIGHT; CENTER; #00A3E0
LINK/CENTER/TEAL

FUTURA PT; DEMI; 14pt ; 18 LINE HEIGHT; CENTER; #00263A
LINK/CENTER/PRIMARY

FUTURA PT; DEMI; 14pt ; 18 LINE HEIGHT; CENTER; #FFFFFF
LINK/CENTER/WHITE

PROXIMA NOVA; REG; 16pt ; 34 LINE HEIGHT; CENTER; #00A3E0
IN LINE LINK/CENTER/TEAL

PROXIMA NOVA; REG; 16pt ; 28 LINE HEIGHT; LEFT; #5D6673
IN LINE LINK/LEFT/GRAY

ARIAL; REG; 14pt ; 34 LINE HEIGHT; LEFT; #5D6673
IN LINE LINK/LEFT/GRAY


Nav

FUTURA PT; DEMI; 15pt ; 20 LINE HEIGHT; CENTER; #00A3E0
NAV/CENTER/TEAL

FUTURA PT; DEMI; 15pt ; 20 LINE HEIGHT; CENTER; #FFFFFF
NAV/CENTER/WHITE


Mobile

This styleguide is responsive.

Iconography





BUTTONS/LINKS

Fallback Styles when none specified. (plain default UI)






Styled Buttons



















Learn More

Learn More

Back to Knowledge Center

Start New Search

Elements

This Element Contains the Honeycomb Background

Any block element can inherit this background with the classname "hc"

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam praesentium dolorum quos deleniti culpa laudantium aliquid similique, iste nihil natus temporibus. Eos assumenda animi exercitationem natus iste odit ab iure.