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

Button Sizes

Links

Theme Colors

Feedback Colors

Grays & White

Circle Buttons

Icons

Sign up with Google

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

Body Text

Small Text

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.

With Foot

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

With Image

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

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

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

The form submission was a success!

There was an issue with the form submission!

Shadows

Preset styles to imply depth on interface components

Shadow Small

Shadow

Shadow Large

Dropdowns

Preset styles to imply depth on interface components

Tooltips

Provide additional information in a small pop-up.

Hover on this icon

Helpful resources

Thoughts from our team.

The clienteling gap…and how to close it

Feb 7, 2023

by

Brandon Wright

The clienteling gap…and how to close it

This is some text inside of a div block.

by

Brandon Wright

Retail forecasting: What it is and how to do it

Oct 23, 2023

by

Gabrielle Smith

Retail forecasting: What it is and how to do it

This is some text inside of a div block.

by

Gabrielle Smith

These are the jewelry trends to watch this summer and beyond

Aug 2, 2024

by

Gabrielle Smith

These are the jewelry trends to watch this summer and beyond

This is some text inside of a div block.

by

Gabrielle Smith

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.

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.