style guide

a complete guide to all the UpGuard's interface elements
colours
colours used across all interface elements on the website
primary colour
primary-900
#081F44
primary-700
#113F8D
primary-500
#1757C2
primary-400
#5D89D4
primary-300
#8BABE1
primary-100
#E8EEF9
primary-50
#F3F7FC
greys
grey-900
#131520
grey-700
#404668
grey-600
#4A5078
grey-500
#5D6598
grey-300
#A6ABC9
grey-100
#ECEDF3
grey-50
#F9F9FB
white
#FFFFFF
feedback
success
#0e9f6e
warning
#c27803
error
#f05252
shadows
shadow elevations used for static elements on the website
elevation levels
shadow-md
tbc
shadow-lg
card hover
shadow-xl
feature mockups
buttons
component, text style and size variations
buttons
button
button
button
button
feedback colours
circle buttons
typography
headings, body and other common text elements

Heading 1

Heading 1 class

Heading 2

Heading 2 class

Heading 3

Heading 3 class

Heading 4

Heading 4 class

Heading 5
Heading 5 class
Heading 6
Heading 6 class
Body extra large  
Link extra large
Body large  
Link large
Body  
Body link

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.

Text small  
Text small link
text caps
grey-900  
grey-700  
grey-600  
grey-500  
primary-900  
primary-700  
primary-500  
success  
warning  
red  
lists
headings, body and other common text elements
unstyled <ul></ul>
  • List item
  • List item
  • List item
coloured bullets
  • List item
  • List item
  • List item
checklist
  • List item
  • List item
  • List item
icons – interface
headings, body and other common text elements
icons – social
icons for popular social networks
badges
combine with other components to display metadata
default
badge text
feedback colors
success
warning
error
cards
a multipurpose component used to display content in boxed format
default styles
Default + no hover

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Foot
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
with image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
form inputs
styles for form inputs and form feedback states
Input Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Hint Text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Input with Icon
Search icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio & Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Form Feedback
tooltips
provide additional information in a small pop-up
Hover on this icon
?
Here is a message to help explain the content.
avatars
multiple sizes and styles to represent users around the interface
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Monica Hall
Placeholder icon

Website Risks

?
We'll need to write something for these...
This is some text inside of a div block.
Critical severity icon
Hostname does not match SSL certificate
The site's hostname does not match the SSL certificate. The domain name should be added to the certificate, either as a Subject Alternative Name or as the Common Name.
Critical severity icon
Hostname does not match SSL certificate
The site's hostname does not match the SSL certificate. The domain name should be added to the certificate, either as a Subject Alternative Name or as the Common Name.
Critical severity icon
Hostname does not match SSL certificate
The site's hostname does not match the SSL certificate. The domain name should be added to the certificate, either as a Subject Alternative Name or as the Common Name.