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
- Ordered list item goes here
- 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
- 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