A flexible UI kit

Style Guide

Colors

Primaries and grays

Primary 1

Primary 2

Primary 3

Primary 4

Primary 5

Primary 6

Gray 1

Gray 2

Gray 3

Gray 4

White

Note: The numbers Primary 1, Primary 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Primary 1" , "BG Primary 2" etc.

Gradients

Gradients based on the primary colors

Gradient 1

Gradient 2

Gradient 3

Gradient 4

Gradient 5
‍

Gradient 6

Gradient 7

Gradient 8
‍

Gradient 9

Note: The numbers Gray 1, Gray 2 etc. refer to the colors found in the Global Color Swatch . You can set the background color of an element by using the classes: "BG Gray 1" , "BG Gray 2" etc.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Project Link.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Bold text

Emphasis

^Superscript

_Subscript

Typography

Headings, body and other common text elements.

Display 1

Display 2

Display 3

Display 4

Heading one

Heading two

Heading three

Heading four

Heading five

Heading Six

Lead Text

Body Text

Small Text

Icons - Interface

Common interface iconography

Icons - Social

Common social network icons

Icons - General

Illustrations used throughout the template

Note: Use the class "Circle Large" in conjunction with the Color classes to achieve the above result.

Buttons

Component, text style and size variations

Text Inputs

Size and state variations for text inputs

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.

Selectables

Checkboxes, Radios and Select dropdowns

Select Elements

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Avatars

Represent users thoughout the interface

Badges

Combine with other components to display metadata and icons

Hot

Great

New

Cool

Blam

Note: Use the class "Badge" in conjunction with the Color classes to achieve the above result.

Panels

Structural component for displaying boxed content

Panel Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Panel With Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.