Foundations
- Logos
- Color
- Gradients
- Typography
- Iconography
Logos
Note: The tagline version of the logo should only be used in cases where the tagline is large enough to be legible. In all other cases, the standard version, without tagline, should be used.
Primary Logo/Logo + Tagline
White Logo/White Logo + Tagline
Logomark
Color
Brand
Virtru Blue
#004987
var(--virtru-blue)
Contrast Test
Pass
Pass
Fail
Fail
Fail
Fail
Dark Blue
#001E4A
var(--dark-blue)
Contrast Test
Pass
Pass
Fail
Fail
Fail
Fail
Control Bar Blue
#6AAAE4
var(--control-bar-blue)
Contrast Test
Fail
Fail
Fail
Pass
Fail
Fail
Light Blue
#92C0E9
var(--light-blue)
Contrast Test
Fail
Fail
Fail
Pass
Fail
Pass
Lightest Blue
#C2D5ED
var(--lightest-blue)
Contrast Test
Fail
Fail
Pass
Pass
Fail
Pass
Neutral
Dark Gray
#2D323B
var(--dark-gray)
Contrast Test
Pass
Pass
Fail
Fail
Fail
Fail
Light Gray
#636469
var(--light-gray)
Contrast Test
Pass
Pass
Fail
Fail
Fail
Fail
Secondary & Feedback
Light Green
#6ABF4B
var(--light-green)
This color is strictyly used for messages indicating success. Utilize black on top of a Light Green background.
Contrast Test
Fail
Fail
Pass
Pass
Dark Red
#9F2241
var(--light-green)
This color is strictyly used for messages indicating an error. Utilize Dark Red on top of a white background, or white on top of a Dark Red background.
Contrast Test
Pass
Pass
Fail
Fail
Light Yellow
#FFC629
var(--light-yellow)
This color is used in very specific cases to draw attention to elements or text. It can be seen on the homepage and solutions pages. This color is used very sparingly, if attention to important pieces is not achievable with standard colors.
Contrast Test
Fail
Fail
Pass
Pass
Pass
Pass
Gradients
Gradient 1
Use white as the font color and white buttons against this gradient.
Gradient 2
Use white as the font color and white buttons against this gradient.
Gradient 3
Use Virtru Blue as the font color and primary buttons against this gradient.
Gradient 4
Use white as the font color and white buttons against this gradient.
Gradient 5
Use Virtru Blue as the font color and primary buttons against this gradient.
Gradient 6
Use Virtru Blue as the font color and primary buttons against this gradient.
Gradient 7
Use white as the font color and white buttons against this gradient.
Gradient 8
Use white as the font color and white buttons against this gradient.
Gradient 9
Use white as the font color and white buttons against this gradient.
Gradient 10
Use white as the font color and white buttons against this gradient.
Gradient 11
Use white as the font color and white buttons against this gradient.
Gradient 12
Use white as the font color and white buttons against this gradient.
Gradient 13
Use white as the font color and white buttons against this gradient.
Typography
This is Adelle,
Our heading typeface.
This is Barlow,
Our body typeface.
Desktop Break
Mobile Break
Heading One
Heading One
3rem/2rem - Adelle
Heading Two
Heading Two
2rem/1.5rem - Adelle
Heading Three
Heading Three
1.25rem/1.125rem - Barlow
Heading Four
Heading Four
1.125rem/1rem - Barlow
Heading Five
Heading Five
1.125rem/1rem - Barlow
Heading Six
Heading Six
0.875rem/0.875rem - Barlow
Subtitle
Subtitle
1.25rem/1.25rem - Barlow
Body Bold
Body Bold
1rem/1rem - Barlow
Body
Body
1rem/1rem - Barlow
Link Link1rem/1rem - Barlow
V-Accordion 1
This is our main accordion. It is used to break down 3 or more bullet points, while keeping the page a little cleaner.