Style Guide.
Headings.
Heading 1

Lorem ipsum dolor sit amet, consectetur.

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Heading 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Paragraphs.
Para >Large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Para > Small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Para > Tiny

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Text Blocks.
Txt Block > Jumbo
This is some text inside of a div block.
Txt Block > Large
This is some text inside of a div block.
Txt Block
This is some text inside of a div block.
Txt Block > Small
This is some text inside of a div block.
Txt Block > Tiny
This is some text inside of a div block.
Text Links.
Link
This is a link inside of a text block.
Text Colors & Tints.

For white, use the class Txt Neutral

Txt Primary
Text Primary
Txt Primary 50
Text Primary 50
Txt Primary 20
Text Primary 20
Txt Secondary
Text Secondary
Txt Secondary 50
Text Secondary 50
Txt Secondary 20
Text Secondary 20
Txt Tertiary
Text Tertiary
Txt Quaternary
Text Quaternary
Background Fills, Strokes & Tints.

For white, use the class Fill > Neutral or Stroke > Neutral

Fill Primary
Fill Primary 50
Fill Primary 20
Fill Primary 10
Fill Primary 5
Fill Secondary
Fill Secondary 50
Fill Secondary 20
Fill Secondary 10
Fill Secondary 5
Fill Tertiary
Fill Quaternary
Fill Quinary
Fill Senary
Stroke Primary
Stroke Secondary
Stroke Tertiary
Stroke Quartenary
Buttons and Drop Downs.
Btn
Button Text
Btn > Small
Button Text
Btn > Tiny
Button Text
Btn > Reversed
Button Text
Btn > Small > Reversed
Button Text
Btn > Tiny > Reversed
Button Text
Btn > Secondary
Button Text
Btn > Small > Secondary
Button Text
Btn > Tiny > Secondary
Button Text
Link Block Btn
Link Block Btn
Link Block Btn > Small
Link Block Btn
Link Block Btn > Tiny
Link Block Btn
Link Block Btn > Reversed
Link Block Btn
Link Block Btn > Small > Reversed
Link Block Btn
Link Block Btn > Tiny > Reversed
Link Block Btn
Link Block Btn > Secondary
Link Block Btn
Link Block Btn > Small  > Secondary
Link Block Btn
Link Block Btn > Tiny  > Secondary
Link Block Btn
Tags & Labels.
Tag
Facility x
Tag > Small
Facility x
Label
Symbols.
Symbol
Symbol > Small
Reference.
Grids.

Grids for this style guide have default column/row 20px.

Grid

Defaults to a 2 column grid

Grid > 3 Col

3 column Grid

Grid > 4 Col

4 column Grid

Grid > 5 Col

5 column Grid

Grid > 6 Col

6 column Grid

Grid > 7 Col

7 column Grid

Margins.

Margins can be applied to all elements i.e. divs, paragraphs, buttons.

margin > None

0px bottom

margin > Smallest

10px bottom

margin > small

20px bottom

Margin

40px bottom

Margin > Large

80px bottom

Margin > jumbo

120px bottom

Margin Right > Smallest

3px right

Margin Right

5px right

Margin Right > Large

10px right

Padding.

Padding can be applied to all elements i.e. divs, paragraphs, buttons.

Padding > None

0px

Padding > Smallest

10px

Padding > small

20px

Padding

40px

Padding > Large

80px

Padding > jumbo

120px

Opacity

Controls the level of opacity for any element i.e. div, text, form - anything!

Opacity 50

Opacity changes to 50

Opacity 20

Opacity changes to 20

Opacity 10

Opacity changes to 10