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.  

Diagonal striped bar with orange-to-red gradient, used as an interface accent for progress or section breaks.
//GLOBAL SITE STYLING// //ANGLED BAR//

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

Click to access Edge Factor directly on the 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

Edge Factor Logo (White)

Career Cluster Icons

Orange airplane flying around a gray globe representing global transportation and logistics.Paintbrush dripping orange paint transforming into a sound wave with orange signal lines on a white circular background.Gray caduceus medical symbol with two wings and a snake entwined around a staff inside a white circle.Three gray skyscrapers with three orange map location pins around them.Gray shield with an orange star next to a gray firefighter helmet with an orange badge.Government building icon with capitol domeGray school building icon with a clock and an orange bell symbol in the tower, inside a white circle with a light gray border.

Various Classes

To be added