Edge Factor
Brand & Style Guide

This style guide is used to ensure alignment and consistency across brand assets and the edgefactor.com website. This should be updated as design decisions are made to ensure consistency.  

Fonts

Body Copy

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Fonts

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Subtitle

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Subtitle

Heading 1

  • Web Class: h1-hero
  • Font: Montserrat
  • Size (web): 65px
  • Weight: 800
  • Line Height: 120%
  • Letter Spacing: .03em
  • Casing: Title Case
  • Use-cases: Main page heading, only one per page

Heading 2

  • Web Class: h2-new
  • Font: Montserrat
  • Size (web): 45px
  • Weight: 700
  • Line Height: 125%
  • Letter Spacing: .03em
  • Casing: Title Case
  • Use-cases: Page section headings

Heading 3

  • Web Class: h3-new LightBG
  • Font: Montserrat
  • Size (web): 65px
  • Weight: 700
  • Line Height: 135%
  • Letter Spacing: .03em
  • Casing: Title Case
  • Use-cases: Nested under a heading 2

Heading 4

  • Web Class: h4-new LightBG
  • Font: Montserrat
  • Size (web): 65px
  • Weight: 700
  • Line Height: 135%
  • Letter Spacing: .03em
  • Casing: Title Case
  • Use-cases: Nested under a heading 3
Heading 5
  • Web Class: h5-new
  • Font: Montserrat
  • Size (web): 65px
  • Weight: 700
  • Line Height: 135%
  • Letter Spacing: .03em
  • Casing: Title Case
  • Use-cases: Nested under a heading 4
Heading 6
  • Web Class: h6
  • Font: Montserrat
  • Size (web): 65px
  • Weight: 700
  • Line Height: 135%
  • Letter Spacing: .03em
  • Casing: Title Case
  • Use-cases: Nested under a heading 5

Subtitle

  • Web Class: pre-h
  • Font: Montserrat
  • Size (web): 14px
  • Weight: 500
  • Line Height: 150%
  • Letter Spacing: .07em
  • Casing: Uppercase
  • Use-cases: Directly preceding a heading to give more context

COLORS

Copy

Headings (Off Black)

Main Copy (Soft Black)

Accent (Orange)

Gradient (Yellow/Orange)

Colors

Backgrounds

Light Background

Container Background (Shade)

Dark Background

Dark Container Background (Shade)

Buttons

Primary Call-to-Action

Book a demo

Primary Call-to-Action (no gradient)

Book a demo

Secondary Call-to-Action

Learn More

Google Play Store

Hero Banner Styles

Image Cut-out - Left Align Copy

Example: see home page

Image Background - Center Copy

Example: see toolkit pages

Brand Elements

Edge Factor Logo - Black

Edge Factor Logo - White

Career Cluster Icons

Various Classes

To be added