HEX:
#03031C
RGB:
rgb(4, 1, 22)
Main text color, alternate background color
HEX:
#7A7A7A
RGB:
rgb(122, 122, 122)
Call out text color, superscript, subscript, captions
HEX:
#F6F6F6
RGB:
rgb(246, 246, 246)
Secondary alternate background color
HEX:
#F900D5
RGB:
rgb(249, 0, 213)
Use white text or icon over pink highlight background
HEX:
#6CFF00
RGB:
rgb(108, 255, 0)
Use black text or icon over green highlight background
HEX:
#B513F7
RGB:
rgb(181, 19, 247)
Use white text or icon over purple highlight background
HEX:
#FEFF00
RGB:
rgb(254, 255, 213)
Use black text or icon over yellow highlight background
Use white text or icon over blue highlight background.
Alternatively use blue text with blue border over white background
HEX:
#0F00E8
RGB:
rgb(15, 0, 232)
Use white text or icon over blue highlight background
Font Family: Archivo Black
Font Weight: 900
Letter Spacing: 1 em
Line Height: 1.3
Font Family: Archivo
Font Weight: 100
Letter Spacing: 1.3 em
Line Height: 1.3
Font Family: Archivo
Font Weight: 700
Letter Spacing: 1.3 em
Line Height: 1.5
Body text
Font Family: Archivo
Font Weight: 300
Letter Spacing: 0 em
Line Height: 1.5
Action Text and CTA's
Font Family: Archivo Narrow
Font Weight: 700
Letter Spacing: 0 em
Line Height: 1.5
Call Out Text
Font Family: Architect's Daughter
Font Weight: 100
Letter Spacing: 1 em
Line Height: 1.3
Use emphasis text anywhere to make a specific point stand out compared to standard body text!
Use emphasis text anywhere to make a specific point stand out compared to standard body text!
The main body text is for in depth descriptions. Notice that the main body text is formatted with left-alignment. Typically, this is the is smallest font-size, and Dark Gray is used over light backgrounds.
The main body text is for in depth descriptions. Notice that the main body text is formatted with left-alignment. Typically, this is the is smallest font-size, and White is used over light backgrounds.
Hover over the buttons to see hover effects:
Right-Click on any of the elements below to download it.
Add colored borders to one side of text boxes to make that section of text standout
Add a white box with a slight shadow over a light background
Right-Click on any of the logos below to download a copy.
Images of people
For images with people, the primary style is to use isolated images with either a blank background or a slight gradient background
Screenshots and images with backgrounds
For screenshots and images without isolated backgrounds, a frame is used with a large white border and slight drop shadow