Style Guide

A complete guide to CustomerHub's styles and interface elements.
Colors

Primaries, feedback colors and gray shades

Primary
#00ADEE
Primary 2
#59C9A5
Primary 3
#016085
Gradient 1
Gradient 2
Success
#59C9A5
Warning
#FED766
Error
#F25F5C
Gray 1
#312E30
Gray 2
#757780
Gray 3
#E6E7E7
Gray 4
#F8F8F8
White
#FFFFFF
Typography

Headings, body text, links and other common text elements.

Headline - Rubik 500 72px #312E2F

H1 - Rubik 600 54px #312E2F

H2 - Rubik 400 40px #312E2F

H3 - Rubik 500 32px #312E2F

H4 - Rubik 400 28px #312E2F

H5 - Rubik 500 24px #312E2F
H6 - Rubik 700 20px #312E2F
H6 small - Rubik 500 16px #312E2F
Large Text - IBM Plex Sans 300 20px #757780
Large Link
Body Text - IBM Plex Sans 300 16px #757780
Body Link
Small Text - IBM Plex Sans 300 14px #757780
Small Link
Tiny Text - IBM Plex Sans 300 #757780
Tiny Link
small uppercase text - IBM PLEX SANS 500 14PX #757780
Icons Social

Dark and light icons for commonly used social networks

Twitter
Icons Interface

Common interface iconography

Expand
More...Left arrowRight arrowClose button
Buttons

Custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.

Forms

Size and state variations for text inputs

Sizes
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Textarea
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Labelled Input
* Here is some input hint text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Select
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Radio
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Badges

Combine with other components to display metadata

Sizes
Standard
Small
Colors
Primary
Primary 2
Primary 3
Success
Warning
Error
Avatars

Represent users and customers throughout the interface

Sizes
Status Indicator
Group
With Name
Nils Hendrikkson
Cards

Structural component for displaying boxed content

Basic Variations
Default Style

Some card text

Text Link
Offset Style

Some card text

Text Link
Dark Style

Some card text

Text Link
Footer
Default Style

Some card text

Text Link
Image Cards
Default Style

Some card text

Text Link
Pills

A small encapsulated element based on the card. Displays small media items that generally live in a group.

Content Variations
"Couldn't be happier with the result!"
User Message
Dropbox
Image
Biometric
Icon
Here's a handy multi-purpose notice. Link here
Notice
Color Variations
Standard
Primary
Primary 2
Primary 3
Success
Warning
Error
On Dark
Shadows

Preset shadow utilities to imply varying levels of depth

Small
Medium
Large
Expandable

Toggle element based on the Card for displaying discrete portions of information

Tabs

Navigational element responsible for toggling the display of content in a nearby container

Vertical Button Style
Tab 1 Content

Some card text

Tab 2 Content

Some card text

Tab 3 Content

Some card text

Horizontal Link Style
Tab 1 Content

Some card text

Tab 2 Content

Some card text

Tab 3 Content

Some card text

Icon Arrangements

Preset arrangements for icons with associated content

Vertical

Unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

Horizontal

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

Large Circled

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa.

  • Checkmark
    Icon list item
  • Checkmark
    Another item in the list
  • Checkmark
    Have a great day
Section Dividers

Decorative SVG elements for dividing two sections of content