Style Guide

A complete guide to all Clientbook's modular interface elements.
Colors
A complete color swatch used to color all interface elements on the website.
Primary Colors
Primary 1
#33AAFC
Primary 2
#1c5F8e
Primary 3
#1f2529
Accent
Accent 1
#f7f3ef
Accent 2
#e8edf0
Grays
Gray 1
#abB3b9
Gray 2
#ddE4e9
Gray 3
#f3F6f8
Feedback
Success
#24B482
Warning
#F19953
Error
#ED6A5E
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Avatar Group
Avatar Indicators
Avatar with name
Katherine Cho
Buttons
Component, text style and size variations
Typography
Headings, body and other common text elements.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five
Heading Six
Heading Six - Class H6 Small
Text Large   
Link Large
Body Text  
Body Link
Small Text   
Small Link
text caps
Lists
Headings, body and other common text elements.
Unstyled <ul></ul>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • Dope
  • Sick
  • Amazing
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
Theme Colors
Primary 1
Primary 2
Primary 3
Feedback Colors
Success
Warning
Error
Cards
A multipurpose component used to display content in boxed format.
Default Styles
Heading

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
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
Shadows
Preset styles to imply depth on interface components
Shadow Small
Shadow
Shadow Large
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.
Helpful resources

Thoughts from our team.

Turn customers into clients.

Get a personalized demo of Clientbook.

Let us show you how leading retailers use Clientbook to nurture relationships with clients and drive sales.