White chevron up arrow icon.

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
#068466
Primary 2
#FC9F5B
Primary 3
#001E42
Grays
Gray 1
#272929
Gray 2
#62636B
Gray 3
#ECEBEA
Gray 4
#F8F6F4
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
Button Sizes
Small
Standard
Large
Theme Colors
Primary 1
Primary 2
Primary 3
Outline
Feedback Colors
Success
Warning
Error
Grays & White
Gray 1
Gray 2
Gray 3
Gray 4
White
Circle Buttons
White search icon.
Charcoal grey shopping bag icon.
Icons
White search icon.
Search
White check icon.
Finish
Colorful Google icon.
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   
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
  • White check icon.
    Dope
  • White check icon.
    Sick
  • White check icon.
    Amazing
Icons - Interface
Headings, body and other common text elements.
Charcoal grey down arrow icon.
Charcoal grey left arrow icon.
Charcoal grey right arrow icon.
Charcoal grey up arrow icon.
Charcoal grey caret up icon.
Charcoal grey caret right icon.
Charcoal grey caret down icon.
Charcoal grey caret left icon.
Charcoal grey calendar icon.
Charcoal grey check icon.
Charcoal grey chevron left arrow icon.
Charcoal grey chevron right arrow icon.
Charcoal grey chevron down arrow icon.
Charcoal grey chevron up arrow icon.
Charcoal grey clock icon.
Charcoal grey heart icon.
Charcoal grey minus icon.
Charcoal grey more horizontal dots icon.
Charcoal grey home icon.
Charcoal grey mail icon.
Charcoal grey map marker icon.
Charcoal grey plus icon.
Charcoal grey menu icon.
Charcoal grey shopping cart icon.
Charcoal grey x icon.
Charcoal grey search icon.
Charcoal grey shopping bag icon.
Charcoal grey more vertical dots icon.
White down arrow icon.
White left arrow icon.
White right arrow icon.
White up arrow icon.
White caret up icon.
White caret right icon.
White caret down icon.
White caret left icon.
White calendar icon.
White check icon.
White chevron left arrow icon.
White chevron right arrow icon.
White chevron down arrow icon.
White chevron up arrow icon.
White clock icon.
White heart icon.
White minus icon.
White more horizontal dots icon.
White home icon.
White mail icon.
White map marker icon.
White plus icon.
White menu icon.
White shopping cart icon.
White x icon.
White search icon.
White shopping bag icon.
White more vertical dots icon.
Icons - Social
Icons for popular social networks.
Charcoal grey LinkedIn icon.
Charcoal gray Vimeo icon.
Charcoal grey Spotify icon.
Charcoal grey Unsplash icon.
Charcoal grey Twitter icon.
Charcoal grey Instagram icon.
Charcoal grey Skype icon.
Charcoal grey Slack icon.
Charcoal grey Product Hunt icon.
Charcoal grey Kick Starter icon.
Charcoal grey Google icon.
Charcoal grey Git Hub icon.
Charcoal grey Pinterest icon.
Charcoal grey Dribbble icon.
Charcoal grey Facebook icon.
Charcoal grey YouTube icon.
White LinkedIn icon.
White Vimeo icon.
White Spotify icon.
White Unsplash icon.
White Twitter icon.
White Instagram icon.
White Skype icon.
White Slack icon.
White Product Hunt icon.
White Kick Starter icon.
White Google icon.
White Git Hub icon.
White Pinterest icon.
White Dribbble icon.
White Facebook icon.
White YouTube icon.
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.
Text Link
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image
Headshot of a man.

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
Charcoal grey search icon.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Charcoal grey mail icon.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Charcoal grey map marker icon.
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
Dropdowns
Preset styles to imply depth on interface components
Tooltips
Provide additional information in a small pop-up.
Hover on this icon
?
Here is a message to help explain the content.
Avatars
Multiple sizes and styles to represent users around the interface.
Avatar Sizes
Headshot of a man.Headshot of a man.Headshot of a man.
Avatar Group
Headshot of a man.Side profile headshot of a woman.Side profile headshot of a woman in blue shirt.Headshot of a man.
Avatar Indicators
Headshot of a man.
Headshot of a woman.
Side profile headshot of a woman.
Avatar with name
Side profile headshot of a woman in blue shirt.
Katherine Cho