Style Guide

A complete guide to all Ollie's modular interface elements.

Colors

A complete color swatch used to color all interface elements on the website.

Theme Colors

Primary 1

#712d91

Primary 2

#f2ab47

Primary 3

#260030

Secondary Colors

Secondary 1

#24949b

Secondary 2

#d1461c

Neutrals

Gray 1

#35342e

Gray 2

#515151

Gray 3

#f2eae2

Gray 4

#f4f2ed

Gray 4

#f4f2ed

Feedback

Success

#128040

Warning

#F19953

Error

#d1461c

Buttons

Component, text style and size variations

Button Sizes

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>

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.

Share on Social

Links to share content like blogs or caregiver profiles on 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

Avatars

Multiple sizes and styles to represent users around the interface.

Avatar Sizes

Avatar Group

Avatar Indicators

Avatar with name

Katherine Cho

Find the best at-home caregiver for your loved one.