Master Style Guide - PERRIN Performance

colors

#313131
#909592
#cacaca
#c62726
#0a4164
#f8f8f8
grey gradient
black gradient
trans gradient

Typography - sansation

Light Text - .light
Normal Text
Strong Text - strong
Italic Text - em
Ultrabold Text - .ultrabold

Heading Styles

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Link Styles

Paragraph Styles

This is a regular paragraph. Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

This is an callout paragraph. Phasellus rutrum bibendum justo nec cursus. Maecenas posuere eros sit amet lorem volutpat varius. Sed ornare tincidunt ligula eu hendrerit. Morbi bibendum tellus vel nisl hendrerit blandit. Maecenas convallis, diam non tincidunt dignissim, nibh nisl venenatis purus, ac auctor risus diam id nibh.

List Styles

  1. OL Example
  2. OL Example
  3. OL Example
    1. Nested OL Example
    2. Nested OL Example
    3. Nested OL Example
  4. OL Example
  5. OL Example
  6. OL Example
Definition Term
Definition Description
Definition Description
How to make websites
CSS
HTML
Definition Term
Definition Description
Defintion Description

Long List

Blockquote Styles

This is the Default Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the left float Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
This is the right float Blockquote Style Example. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehcalloutit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

HR Styles





Inputs / Text Area

White - for on non-white bgs

Gray - for On white bgs

Buttons

Button Style 2

Sidebars

Select Field




Images

corgi!Shadow Bottom
corgi!3px white border with slight shadow
corgi!rounded corners, border-left w/c color