Your Style Guide

Font
Header Font

Cammron 64 0.9EM

Body font

Montserrat Light 16 1.5EM

Global colors
Typography
Hero header - h1

Designed to win customers

Section header - h2

Designed to win customers

Topic Header - h3

Designed to win customers

Subtitle - h4

Designed to win customers

Eyebrow - h5
Designed to win customers
Paragraph Hero

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Paragraph

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 aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Paragraph Small

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Labels
Excepteur sint occaeca
Bullets
grain
Iccaecat cupidatat
grain
Quis autem vel
grain
Ea voluptate
SectionS

Section

Flex Box with child properties:
Direction Vertical
Align Center
Justify Start

Top 140px
Bottom 140px
Left 10 View-Port Width
Right 10 View-Port Width

Width 100%

Section No Top Bottom

Flex Box with child properties:
Direction Vertical
Align Center
Justify Start

Top 0px
Bottom 0px
Left 10 View-Port Width
Right 10 View-Port Width

Width 100%

Section 100 Top Bottom

Flex Box with child properties:
Direction Vertical
Align Center
Justify Start

Top 100px
Bottom 100px
Left 10 View-Port Width
Right 10 View-Port Width

Width 100%

Section Footer

Flex Box with child properties:
Direction Vertical
Align Center
Justify Start

Top 60px
Bottom 40px
Left 10 View-Port Width
Right 10 View-Port Width

Width 100%

Section Wrapper

Flex Box with child properties:
Direction Vertical
Align Stretch
Justify Start

Width 100%
Max Width 1400px

Content Wrapper

Grid Display
Width 100%
Height 100%
Column 1 x 1FR
Row Auto
C Width 20px
R Width 20px

Grid with child properties:
Align Stretch
Distribute Stretch

Content Wrapper - 2C

Grid Display
Width 100%
Height 100%
Column 2 x 1FR
Row Auto
C Width 20px
R Width 20px

Grid with child properties:
Align Stretch
Distribute Stretch

Content Wrapper - 3C

Grid Display
Width 100%
Height 100%
Column 3 x 1FR
Row Auto
C Width 20px
R Width 20px

Grid with child properties:
Align Stretch
Distribute Stretch

Content Wrapper - 4C

Grid Display
Width 100%
Height 100%
Column 1FR x 1FR x 1FR x 1FR
Row Auto
C Width 20px
R Width 20px

Grid with child properties:
Align Stretch
Distribute Stretch

Text Wrapper

Inline Block

Width 100%
Top 1.25EM
Bottom 1.25EM
Left 1.25EM
Right 1.25EM
Bottom Margin 1.25EM

Bullet Text Wrapper

Flex box with child properties:
Horizontal
Align Stretch
Justify Start

Top 0px
Bottom 0px
Left 0px
Right 0px
Bottom Margin 0.5EM

Text Wrapper with Image

Inline Block

Width 100%
Top 0px
Bottom 1.25EM
Left 0px
Right 0px
Bottom Margin 1.25EM

Image Wrapper

Width 100%
Overflow None
Fit to Fill

Image Portrait

Max Width 100%
900x1350
72dpi
150kb or less

Image Landscape section breaker

Max Width 100%
1920x640
72dpi
150kb or less

Image Landscape

Max Width 100%
1920x1280
72dpi
150kb or less

Cards section

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.

Card one

Eyebrow

Topic Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card two

Eyebrow

Topic Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Card three

Eyebrow

Topic Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.