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

#027EAD

Primary 2

#DFECF7

Primary 3

#001E42

Grays

Gray 1

#272929

Gray 2

#62636B

Gray 3

#ECEBEA

Gray 4

#F5F8FD

Feedback

Success

#57A773

Warning

#F19953

Error

#ED6A5E

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></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

Avatars

Multiple sizes and styles to represent users around the interface.

Avatar Sizes

Avatar Group

Avatar Indicators

Avatar with name

Katherine Cho

Heading

This is some text inside of a div block.

This is some text inside of a div block.