chevron up 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
#f8fafc
Feedback
Success
#57A773
Warning
#F19953
Error
#ED6A5E
Buttons
Component, text style and size variations
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>
  • Dope
  • Sick
  • Amazing
Colored Bullets
  • Dope
  • Sick
  • Amazing
Checklist
  • white checkmark icon
    Dope
  • white checkmark icon
    Sick
  • white checkmark icon
    Amazing
Icons - Interface
Headings, body and other common text elements.
arrow down icon
arrow left icon
arrow right icon
arrow up icon
caret up icon
caret right icon
caret down icon
caret left icon
calendar icon
checkmark icon
chevron left icon
chevron right icon
chevron down icon
chevron up icon
clock icon
heart icon
small horizontal line icon
3 horizontal dots icon
house icon
envelope icon
map marker icon
+ icon
3 horizontal lines icon
shopping cart icon
X icon
magnifying glass icon
shopping bag icon
3 vertical dots icon
arrow down icon
arrow left icon
arrow right icon
arrow up icon
caret up icon
caret right icon
caret down icon
caret left icon
calendar icon
checkmark icon
chevron left icon
chevron right icon
chevron down icon
chevron up icon
clock icon
heart icon
small horizontal line icon
3 horizontal dots icon
house icon
envelope icon
map marker icon
+ icon
3 vertical lines icon
shopping cart icon
X icon
magnifying glass icon
shopping bag icon
3 vertical dots icon
Icons - Social
Icons for popular social networks.
linkedin icon
vimeo icon
spotify  icon
unsplash icon
twitter icon
instagram icon
skype icon
slack icon
proucthunt icon
kickstarter icon
google icon
github icon
pinterest icon
dribble icon
facebook icon
YouTube icon
linkedin icon
vimeo icon
Spotify icon
unsplash icon
twitter icon
instagram icon
skype icon
slack icon
product hunt icon
kickstarter icon
Google icon
github icon
pinterest icon
dribble icon
Facebook icon
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.
With Head

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Link
With Image

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
magnifying glass icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
envelope icon
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
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
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
Avatar Group
Avatar Indicators
Avatar with name
Katherine Cho
Global Classes
BG Colors
BG Primary 1
BG Primary 2
BG Primary 3
BG White
BG Gray 1
BG Gray 1
BG Gray 1
BG Gray 1
BG Success
BG Warning
BG Error

Build websites rapidly with over 100 interface blocks.