Fulcrum Website Style Guide

Color Palette

Fulcrum Red
‍
EB3323

Only used in logo
Fulcrum Red (AA Compliant)

EB1300
Dark Red

D21100
Sky

4BAEF8
Aqua

64D9F7
Sky Light

B5E3FC
Aqua Light

B7F0FC
Gradient

B5E3FC > B7F0FC
Black

000000
Gray

767676
White

FFFFFF

Fonts

Proxima Nova Black

Proxima Nova Extrabold

Proxima Nova Regular

Proxima Nova Light

Typography

H1
Font-Family: Proxima Nova
Font-Weight: Black
Font-Size: 72px
Line-Height: 80px
Margin-Top: 20px
Color: Black

Heading 1

H2
Font-Family: Proxima Nova
Font-Weight: Black
Font-Size: 48px
Line-Height: 54px
Margin-Top: 20px
Color: Black

Heading 2

H3
Font-Family: Proxima Nova
Font-Weight: Extrabold
Font-Size: 18px
Line-Height: 24px
Margin-Top: 20px
Color: Black

Heading 3

H4
Font-Family: Proxima Nova
Font-Weight: Extrabold
Font-Size: 18px
Line-Height: 24px
Margin-Top: 20px
Color: Black, AA Red

Heading 4

Intro 1
Font-Family: Proxima Nova
Font-Weight: Light
Font-Size: 32px
Line-Height: 40px
Margin-Top: 20px
Color: Black
Intro 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Intro 2
Font-Family: Proxima Nova
Font-Weight: Light
Font-Size: 24px
Line-Height: 30px
Margin-Top: 20px
Color: Black
Intro 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.
Body
Font-Family: Proxima Nova
Font-Weight: Light
Font-Size: 24px
Line-Height: 30px
Margin-Top: 20px
Color: Black
Body Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquiop ex ea commodo consequat link body here.
  • Bulleted list At vero eos et accusamus et iusto odio
  • ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi
  • mollitia animi, id est laborum et dolorum fuga.
  • Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
  • Numbered list At vero eos et accusamus et iusto odio
  • ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi
  • mollitia animi, id est laborum et dolorum fuga.
  • Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo
Footnote
Font-Family: Proxima Nova
Font-Weight: Light
Font-Size: 14px
Line-Height: 20px
Margin-Top: 20px
Color: Black
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquiop ex ea commodo consequat.

UI Components

Primary Nav
Font-Family: Proxima Nova
Font-Weight: Extrabold
Font-Size: 18px
Color: Black
Spotlight Treatment: Link on hover remains Black while others fade to Gray
Secondary Nav -
Returning Visitor
For a returning visitor, the nav displays the account area instead of "Get Started"
On hover, the background of each element changes from AA Red to Dark Red.
Secondary Nav -
Returning Visitor
For a returning visitor, the nav displays the account area instead of "Get Started"
On hover, the background of each element changes from AA Red to Dark Red.
Sticky Nav
As you move down the page, the nav collapses into this consolidated version. The primary nav pushes up behind this.
The consolidated Fulcrum mark slides down into place
Buttons and Tags
Font-Family: Proxima Nova
Font-Weight: Extrabold
Font-Size: 18px
Padding: 10px
Border-Color: AA Red
Border-Width: 1px
Border-Radius:20px
Color: Black
On hover, AA Red changes to Dark Red. Element also gets a drop shadow:
Distance: 0px
Blur: 30px
Color: Black
Opacity: 15%
Primary Button
Secondary Button

Tag

Cards
Font styling varies depending on content
Drop Shadow
Distance:0px
Blur:30px
Color:Black
Opacity:15%
Spotlight Treatment:
Link on hover remains Black while others fade to Gray
Arrow Hover Color:
Dark Red
Drop Shadow Hover:
Opacity: 30%

CARD SAMPLE

CARD SAMPLE

CARD SAMPLE

Thin Grey Line - 0.5px - Solid - Grey
Thin Red Line - 4px - Solid - AA Red
Thin Blue Line - 4px - Solid - Sky Light
Large Arrow
60px x 80px
Used on:
- Custumer Story Pullquote
- Product Feature Card
- Use Case Card
- Customer Story Cards
- Blog Card
- Pricing Dropdown
Medium Arrow
30px x 40px
Used on:
- Platform Detail Dropdown
- Use Case Button
- Trusted By Carousel
- FAQ Dropdown
Small Arrow
15px x 20px
Used on:
- Primary Button
- Secondary Button
- Primary Nav
- Use Case Subnav on Home
- Platform Subnav
- Services Subnav
- Suctumer Story Tab Menu
- Platfrom Overview Tab Menu
Navigational / Functional Icons
Industry / Decorative Icons
These are used on the homepage in the Industries Section
Also smaller in the top right corner on App Template Cards
Also in the hero on Industry Detail Pages

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  1. The rich text element allows you to create and format headings,
  2. The rich text element allows you to create and format headings,
  3. The rich text element allows you to create and format headings,
  4. ‍

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Placeholder
This is a placeholder image.