TypographyColorsButtonsSymbols

Typography

You'll see that these typography elements don't have classes. That's because on this page, we want to edit the styles after selecting "All H1 Headings" for example, so that it will effect all the elements on the site. To do this, select the H1 below, click where it says "Select a Class or Tag" and select "All H1 Headings" at the bottom of the list.

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading

Heading
Heading
Heading
Heading

This is a Paragraph

This is a Paragraph

This is a Paragraph

This is some text inside of a div block.
This is some text inside of a div block.
This is some text inside of a div block.
Text Link

Heading

Colors

These colors have been created using Global Swatches. If you edit the Global Swatch color, it will change every element that uses that color swatch.
Global Colors
Body Background Color
Body Text Color
Headings Color
Brand Color
Background Color 1
Background Color 2
Background Color 3
Background Color 4

Buttons

These are all the buttons that are used in this project. Editing them will reflect the changes on all the other buttons of the project too.

Symbols

These are all the sections that are created into 'Symbols' as they are being reused on different pages. Double click on the Symbol to edit it. Any changes made in a Symbol will implement every where else too.

Style Guide

Evergreen is a premium Webflow Template for Fin-Tech and Online Banking startups.

Color Styles

Primary Color Variants

This color should be displayed most frequently and be used for important actions

Primary - 500
Hax - #347362
Primary - 400
Hax - #5D8F81
Primary - 300
Hax - #85ABA1
Primary - 200
Hax - #AEC7C0
Primary - 100
Hax - #D6E3E0
Secondary Color Variants

This color should be applied sparingly to highlight information and background.

Secondary - 500
Hax - #EF8450
Secondary - 400
Hax - #F29D73
Secoundary - 300
Hax - #F5B596
Secoundary - 200
Hax - #F9CEB9
Secoundary - 100
Hax - #FCE6DC
Dark Color Variants

This color should be used for text.

Dark - 500
Hax - #10393B
Dark - 400
Hax - #406162
Dark - 300
Hax - #708889
Dark - 200
Hax - #9FB0B1
Dark - 100
Hax - #CFD7D8
White Color Variants

This color should be used for text and background.

White - 500
Hax - #F5F3EE
White - 400
Hax - #F7F5F1
White - 300
Hax - #F9F8F5
White - 200
Hax - #FDFDFC
White - 100
Hax - #FFFFFF
Green Color Variants (Success)

This color should be used to show positive feedback or status.

Green - 500
Hax - #3EBE8A
Green - 400
Hax - #65CBA1
Green - 300
Hax - #8BD8B9
Green - 200
Hax - #B2E5D0
Green - 100
Hax - #D8F2E8
Yellow Color Variants (Warning)

This color should be used to show warning feedback or status.

Yellow - 500
Hax - #FFCB3D
Yellow - 400
Hax - #FFD564
Yellow - 300
Hax - #FFE08B
Yellow - 200
Hax - #FFEAB1
Yellow - 100
Hax - #FFF5D8
Red Color Variants (Error)

This color should be used to show negative feedback or status.

Red - 500
Hax - #F25E3A
Red - 400
Hax - #F57E61
Red - 300
Hax - #F79E89
Red - 200
Hax - #FABFB0
Red - 100
Hax - #FCDFD8

Typography Styles

Scale
Size
Line Height
Weight

H 1

60px
70
Extra Bold

H 2

46px
62
Extra Bold

H 3

30px
46
Extra Bold

H 4

22px
38
Extra Bold
H 5
20px
36
Extra Bold
H 6
18px
34
Extra Bold

Paragraph 1

20px
36
Semibold

Paragraph 2

18px
34
Semibold

Paragraph 3

16px
32
Semibold
Link 1
16px
32
Semibold
Link 2
16px
32
Bold
CAPtION (All Caps)
20px
36
Extra Bold

Start using Evergreen, right now