Tracify's Styleguide

Everything stile related you will find on the page.

Colors

Primary Colors

Primary 1
#6254FF

Secondary Colors

Secondary 1
#4A3FCC
Secondary 2
#ECEBFF
Secondary 3
#272735
Secondary 4
#626278

Neutral Colors

Neutral 800
#222131
Neutral 700
#39394B
Neutral 600
#767887
Neutral 500
#ABADBF
Neutral 400
#E1E1E7
Neutral 300
#EFF0F6
Neutral 200
#F7F7FC
Neutral 100
#FFFFFF

Logos

Tracify FaviconTracify Icon Logo blueTracify Icon Logo whiteTracify Icon Logo blackTracify Logo all blue on whiteTracify Logo blue on whiteTracify Logo white on blackTracify Logo white on blueTracify Logo with Icon all blue on whiteTracify Logo with Icon blue on transparentTracify Logo with Icon whiteTracify Logo with Icon black on white

Typography

Rich Text

Heading H1 - Aa Bb Cc Dd

Heading 1 - 60px/1.133em

Heading H2 - Aa Bb Cc Dd

Heading 2 - 42px/1.190em

Heading H3 - Aa Bb Cc Dd

Heading 3 - 26px/1.154em

Heading H4 - Aa Bb Cc Dd

Heading 4 - 22px/1.227em
Heading H5 - Aa Bb Cc Dd
Heading 5 - 20px/1.350em
Heading H6 - Aa Bb Cc Dd
Heading 6 - 18px/1.444em

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 Default - 18px/1.667em

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 Large - 24px/1.500em

Bold - Lorem ipsum dolor sit amet

Bold Text

Italic - Lorem ipsum dolor sit amet

Italic Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquet euismod ut id ullamcorper nunc diam. Amet a ac ut pharetra. Amet, accumsan, nisl in elementum volutpat integer. Cursus est elementum maecenas ut.
Block Quote
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Lorem ipsum dolor sit amet, consectetur.
  • Lorem ipsum dolor sit amet, consectetur adipiscing.
Bullet List
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Lorem ipsum dolor sit amet, consectetur.
  3. Lorem ipsum dolor sit amet, consectetur adipiscing.

Icons

Icon Innovation
Icon Work hard - play hard
Icon Passion
Icon Accountability
Icon Growth
Icon Teamwork
Tracify Icon Features
Tracify Icon Features
Tracify Icon Features
Tracify Icon Features
Tracify Icon Features
Tracify Icon Features
Tracify Icon Features
Tracify Icon Features

Buttons

Small
Button Primary - Small
Default
Button Primary - Default
Large
Button Primary - Large
Small
Button Secondary - Small
Default
Button Secondary - Default
Large
Button Secondary - Large