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
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
Body Text
Body LinkSmall Text
Small Linktext 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
With Image

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