Parade Style Guide
This style guide is used by Parade to apply your brand to your site. Any edits made here will affect all other pages.
>> Learn more about Stepful’s Online Medical Assistant Training Program
>> Learn more about Stepful’s Online Medical Assistant Training Program
>> Learn more about Stepful’s Online Medical Assistant Training Program
Logos
These symbols are connected to all of the instances of your logo on the site.
Main Logo
White Logo
Colors
A complete color swatch used to color all interface elements on the website.
Primary colors
Primary
Primary 000
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
Accent colors
Accent
Accent 000
Accent 100
Accent 200
Accent 300
Accent 400
Accent 500
Accent 600
Accent 700
Accent 800
Accent 900
Grays
Gray 000
Gray 100
Gray 200
Gray 300
Gray 400
Gray 500
Gray 600
Gray 700
Gray 800
Gray 900
Utility Colors
Text on Primary
Text on Accent
Primary on White
Primary on Black
Accent on White
Accent on Black
Typography
Headings, body and other common text elements.
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Patterns
These patterns can be changed by uploading a new SVG in the "Backgrounds" section of the Style panel.
Black Pattern
White Pattern
Primary Pattern
Accent Pattern
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.
Primary colors
Primary 1
#068466
Primary 2
#FC9F5B
Primary 3
#001E42
Accent 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
Icons
Search
Finish
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
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.
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
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
Input Label
* Hint Text
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
Radio Label
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Checkbox
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
Basic
Link 1
Link 2
Link 3
Multi Column
Company Pages
Inform your visitors about all facets of your business
Blog
Multiple blog layouts to engage your visitors.
Pricing
Clearly articulate your products pricing options.
Account
Beautiful sign up and sign in pages in multiple styles.
With Footer
Link 1
Link 2
Link 3
Foot Link
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