Styleguide
These guidelines govern various elements such as color, typography, layout, logos, and formatting to ensure a uniform look and strong identity across all media used.
Logo
Logo hierarchy system based on human interface guidelines. Authetic form while keeping text legibility, prioritize and emphasize important information.
Color Palette
Our color system builds on the recognition of the VirtualShield brand colors to make the website interface more usable.
Primary
#A8FF36
Secondary
#7B67F2
Black
#091316
Background
#F5F9FA
Grey
#4F4F4F
Grey - Light
#E0E0E0
Typography
Typography hierarchy system based on human interface guidelines. Authetic form while keeping text legibility, prioritize and emphasize important information.
Font Family
PP Neue Montreal
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
01234567890!@#$%^&*()
Font Size
Display
72px / 1,115em
40px / 1,1em
Heading 1
48px / 1,25em
32px / 1,1em
Heading 2
38px / 1,25em
28px / 1,1em
Heading 3
32px / 1,25em
24px / 1,1em
Heading 4
28px / 1,25em
20px / 1,1em
Heading 5
24px / 1,25em
18px / 1,1em
Heading 6
20px / 1,25em
16px / 1,1em
Paragraf
20px / 1,5em
16px / 1,1em
Body
18px / 1,5em
16px / 1,1em
Small
14px / 1,5em
14px / 1,5em
Button & Links
A style guide for buttons and links outlines consistent design and functional principles for these interactive elements within a user interface.
Button
Links
Link Menu