Style Guide
This style guide includes colors, typography, icons, buttons, fields, grid and images.
These are styles that are use for Intro content.
Brand Colors (Color and Shadows)
SCSS variable name:$primary
Hex code:#4c7637
RGB:76 118 55
SCSS variable name:$primary-01
Hex code:#c6d52f
RGB:198 213 47
SCSS variable name:$primary-02
Hex code:#034c1f
RGB:3 76 31
SCSS variable name:$primary-03
Hex code:#232325
RGB:35 35 37
SCSS variable name:$primary-04
Hex code:#424245
RGB:66 66 69
SCSS variable name:$secondary-01
Hex code:#183544
RGB:24 53 68
SCSS variable name:$secondary-02
Hex code:#b37da7
RGB:179 125 167
SCSS variable name:$secondary-03
Hex code:#d8bed2
RGB:216 190 210
SCSS variable name:$secondary-04
Hex code:#00587c
RGB:0 88 124
SCSS variable name:$secondary-05
Hex code:#669bb0
RGB:102 155 76
SCSS variable name:$secondary-06
Hex code:#b2ccd7
RGB:178 204 215
SCSS variable name:$secondary-07
Hex code:#daa000
RGB:218 160 0
SCSS variable name:$secondary-08
Hex code:#e9cc66
RGB:233 204 102
SCSS variable name:$secondary-09
Hex code:#f3e5b2
RGB:243 229 178
SCSS variable name:$success
Hex code:#35792a
RGB:53 121 42
SCSS variable name:$warning
Hex code:#ffaa00
RGB:255 170 0
SCSS variable name:$black
Hex code:#000000
RGB:0 0 0
SCSS variable name:$light-gray
Hex code:#f7f7f9
RGB:247 247 249
SCSS variable name:$gray
Hex code:#efeff4
RGB:239 239 244
SCSS variable name:$medium-gray
Hex code:#9a9a9d
RGB:154 154 157
SCSS variable name:$light-gray-2
Hex code:#f4f4f4
RGB:244 244 244
SCSS variable name:$light-gray-3
Hex code:#c2c2c2
RGB:194 194 194
SCSS variable name:$text
Hex code:#424245
RGB:66 66 69
SCSS variable name:$primary-contrast
Hex code:#ffffff
RGB:255 255 255
Typography
Display-1
Display-2
Headline 1
Headline 2
Headline 3
Headline 4
Headline 5
This is body copy using Roboto Regular at 15px, with a 24px line-height in the color of Black. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui.
-
This is a list paragraph using Roboto Regular at 15px, with a 24px line-height in the color #424245. Phasellus pharetra urna sit amet tellus elementum aliquet in et quam. In condimentum dui.
-
This is a paragraph showing the use of bold text, using the Roboto Bold. Nam ornare lectus ullamcorper nisl accumsan accumsan. Mauris et arcu sit amet enim lacinia pellentesque eu quis sapien.
“Employee blockquote uses Roboto Light Italic at 18px and 26px line-height in the color #034C1F. Nam ornare lectus ullamcorper nisl accumsan accumsan. Mauris et arcu sit amet enim lacinia pellentesque eu quis sapien."