Options Ranker

OptionAutomator Style Guide

The OptionAutomator Website Refresh Style Guide Oct 2020.  Here you will find all the styles and classes used on this website.

OptionAutomator Website Refresh
Style Guide

A complete guide to all OptionAutomator Marketing Site modular elements.

OptionAutomator Website Refresh
Style Guide

A complete guide to all OptionAutomator Marketing Site modular elements.

Typography Light Display
Headings, body and other
common text elements.
Display One
Display Two

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
Label
Text Muted
Subheading
Small text

Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum. Integer et augue id enim vestibulum ullamcorper

Blog Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum. Integer et augue id enim vestibulum ullamcorper

Larger text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Typography Dark
Headings, body and other
common text elements.
Display One
Display Two

Heading one

Heading two

Heading three

Heading four

Heading five
Heading six
Label
Text Muted
Subheading
Small text

Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum. Integer et augue id enim vestibulum ullamcorper

Blog Body text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin placerat nisi vitae ex vestibulum interdum. Integer et augue id enim vestibulum ullamcorper

Larger text – Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

Colors
A complete color swatch
used to color all interface
elements on the website.
 
Primary 1
#8DC63F
Primary hover
#4d543e
Secondary 1
#296A8A
Secondary hover
#296A8A
Gray
#333333
Dimgray
#696969
Dark Gray
#111112
Black
#000000
Light Grey
#f7f7f7
White
#ffffff
Success
#84cc20
Review star
#ffcb0a
Quasar: Amber-5
Warning
#e67a00
Danger
#EB2D07
Colors on Dark
A complete color swatch
used to color all interface
elements on the dark website
 
Primary 1
#8DC63F
Primary hover
#4d543e
Secondary 1
#296A8A
Secondary hover
#296A8A
Gray
#333333
Dimgray
#696969
Dark Gray
#111112
Black
#000000
Light Grey
#f7f7f7
White
#ffffff
Success
#84cc20
Review star
#ffcb0a
Quasar: Amber-5
Warning
#e67a00
Danger
#EB2D07
Blog Colors
A complete color swatch
used to color all interface
elements on the website.
 
Blog Light Blue
#49a0af
Blog Green
#76B042
Blog Purple
#515294
Blog Yellow
#EBB610
Blog Slate
#484F59
Blog Slate Blue
#4A82A1
Blog Dark Blue
#242D42
Blog Taupe
#E0DED7
Success
#84cc20
Review star
#ffcb0a
Quasar: Amber-5
Warning
#e67a00
Danger
#EB2D07
Blog Colors Dark
A complete color swatch
used to color on blog bgs
on dark interface
 
Blog Light Blue
#49a0af
Blog Green
#76B042
Blog Purple
#515294
Blog Yellow
#EBB610
Blog Slate
#484F59
Blog Slate Blue
#4A82A1
Blog Dark Blue
#242D42
Blog Taupe
#E0DED7
Success
#84cc20
Review star
#ffcb0a
Quasar: Amber-5
Warning
#e67a00
Danger
#EB2D07
Spacing and border radius
A complete spacing guide
Selectors for padding, margin
and space below items
Padding 1x
Padding 2x
Padding 3x
Space 1x
Space 2x
Space 3x
Space 4x
border-radius
Space Bottom 1x
Space Bottom 2x
Space Bottom 3x
Space Bottom 4x
Other Layout Classes
Other helper
layout classes
.no-show
Padding 1x
.no-select
Placeholder
Placeholder2
Buttons Dark
Button styles and size variations
use .btn for size and use primary,
outline or other selectors for styling
Icons
Common interface
and social network iconography
 
icon-1x
icon-2x
icon-3x
icon-4x
Icons Dark
Common interface
and social network iconography
 
icon-1x
icon-2x
icon-3x
icon-4x
icon-1x
icon-2x
icon-3x
icon-4x
Image mute
image-muted is grayscale. 
good for logos
Normal image
.image-muted (gray scale 100%)
Image mute (dark)
image-muted is grayscale. 
good for logos
Normal image
image-stylized
.image-muted (gray scale 100%)
Shadow
If you need an element to stand out
you can use the .shadow class
.shadow
.shadow-natural
.shadow-natural
.shadow-natural-dark
Shadow Dark
If you need an element to stand out
you can use the .shadow-dark class
on dark backgrounds
.shadow-dark
.shadow-natural-dark
.shadow-natural
.shadow-natural-dark
Blog Callouts
Used to make the blog more engaging
can be used for social media images as well
homepictureusercrossmenuarrow-right-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram