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.

How to Fail in the Jewelry Business

by

Paul Yoachum

How to Fail in the Jewelry Business

This is some text inside of a div block.

by

Paul Yoachum

How jewelers can make the most of the back-to-school shopping season

Aug 5, 2024

by

Melanie LM

How jewelers can make the most of the back-to-school shopping season

This is some text inside of a div block.

by

Melanie LM

How bracketing became the latest challenge for online retailers

Sep 5, 2024

by

Melanie LM

How bracketing became the latest challenge for online retailers

This is some text inside of a div block.

by

Melanie LM

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.