Register for our upcoming webinar!

Security, Privacy, and Compliance in 2023: Predictions, Expectations, and Preparations for Data Management in a Post-Pandemic Environment

SEARCH BY:

Style Guide

The internal tool powered by HUSL

Colors


$primary1 #072A53 Night
$primary2 #0069B4 True Blue
$primary3 #00ACEB Maya
$primary4 #006037 Pine
$primary5 #00A557 Grass
$primary6 #F9752E Saifron
$primary7 #FFC630 Sunflower
$body1 #494949 Charcoal
$white #fff White
$secondary1 #B4DBFF Sky Blue
$2secondary2 #D7EFFD Ice Blue
$secondary3 #EBF8FF Mist Blue

Gradients


$darkBlueGradient #00ACEB #0069B4 #072A53
$blueGradient #00ACEB #0069B4
$lightBlueGradient #EBF8FF #D7EFFD
$greenGradient #00A557 #006037
$orangeGradient #FFC630 #F9752E

Typography

H1 header

(>1025px) 60px/60px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H2 header

(>1025px) 36px/46px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H3 header

(>1025px) 34px/44px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H4 header

(>1025px) 22px/30px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H5 header

(>1025px) 20px/26px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

H6 header

(>1025px) 18px/20px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lead body .lead

(>1025px) 20px/32px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Body

(>1025px) 18px/26px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Small Body .small

(>1025px) 16px/26px Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lists

  • Unordered bullet list item goes here
  • Unordered bullet list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui
  • Unordered bullet list item goes here
  1. Ordered list item goes here
  2. Ordered list item lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui
  3. Ordered list item goes here

Buttons & Links

Pill Buttons

Solid orange button (dark backgrounds)

Solid green button (light backgrounds)

Solid blue button (white backgrounds)

Circle GO Buttons

Solid orange circle button

Solid green circle button

Solid blue circle button

Small circle button (used in Hero News module and for smaller instances)

Arrow Buttons

White Arrow Button | .white-arrow-btn

Blue Arrow Button | .blue-arrow-btn

Large Arrow CTA | .large-arrow-btn

Block Quotes

Climplifi testimonial Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce pretium neque eget malesuada malesuada. Donec nec urna et augue euismod convallis suscipit eget justo.
TONY GOMEZ

Executive Vice President and Chief Legal Officer, CITRIX

>