Theme Styles
Symbols

ProvenCFO Styleguide

Colors

Primary Colors

Proven Black
#181818
White
#FFFFF
Primary 1 - Tropical 80
#2EB07D

Greens

Tropical 100
#1C9668
Tropical 80
#2EB07D
Tropical 60
#72C0A1
Tropical 40
#B0DDCB
Tropical 20
#C7EEDF
Minty
#F0F8F5

Reds

Sunset 100
#DE6057
Sunset 80
#F58974
Sunset 60
#F6C2B8
Sunset 40
#FFD4CC
Sunset 20
#FFE1DB

Blues

Wave 100
#05768F
Wave 80
#409EB2
Wave 60
#A6D4DF
Wave 40
#C9E3EA
Wave 20
#D4EBF1

Yellows

Golden Hour 120
#FFB45B
Golden Hour
#FFDB74
Golden Hour 80
#FFE7A3
Parchment
#C9E3EA

Gray

Black 80
#333232
Black 60
#474646
Black 40
#D4D4D4
Black 20
#EBECF0
Black 10
#F9F9F9

Typography

Display

Heading H1 - Aa Bb Cc

Display 01 - 72px/ Line Height - 1.1em/ Weight - Bold

Heading H2 - Aa Bb Cc Dd

Display 02 - 56px/ Line Height - 1.1em/ Weight - Bold

Heading H3 - Aa Bb Cc Dd

Display 03 - 36px/ Line Height - 1.1em/ Weight - Bold

Heading H4 - Aa Bb Cc Dd

Label 01 - 22px/ Line Height - 1.1em/ Weight - Semi-Bold
Heading H5 - Aa Bb Cc Dd
Label 02 - 16px/ Line Height - 1.1em / Weight - Semi-Bold
Heading H6 - Aa Bb Cc Dd
Button Large - 20px / Line Height - 1.1em / Weight - Semi-Bold

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.

Paragraph 01 - 20px / Line Height - 1.5em / Weight - Normal

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.

Paragraph 02 - 18px / Line Height - 1.5em / Weight - Normal

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.

Paragraph 03 - 16px / Line Height - 1.5em / Weight - Normal

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.

Paragraph 04 - 14px / Line Height - 1.5em / Weight - Normal

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
  • Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Senectus et netus et malesuada fames ac turpis egestas
Bullet List
  1. Aliquet porttitor lacus luctus accumsan tortor. Gravida rutrum.
  2. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  3. Senectus et netus et malesuada fames ac turpis egestas
Numered List
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Block Quote
Proin sed libero enim sed faucibus turpis in. Nisi est sit amet facilisis.
Figure and Figure Caption

Icons

Buttons

Small
Button - Small
Default
Button - Default
Large
Button - Large
Default
Button Icon- Small
Default
Button Icon - Default
Default
Button Icon- Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large