Jimmy Lewis Canada
Style Guide

Colors

Primary Colors

Primary 1 – "Outer Space"

#2F4346

Primary 2 – "Verdigris"

#6ABCB9

Secondary Colors

Secondary 1 – "Isabelline"

#F2EDEC

Secondary 2 – "Satin Sheen Gold"

#C9A235

Tertiary Colors

Tertiary 1 – "Amaranth Purple"

#993B4F

Neutrals & Shades

Neutral 1 – Pure Black

#000000

Neutral 2 – Pure White

#FFFFFF

Neutral 3 – Pure Grey

#909090

Neutral 3 – Regular Text

#333333

Neutral 4 – Light Text

#666666

Neutral 5 – Off-White

#FAFAFA

Neutral 6 – Light Grey – Borders

#DDDDDD

Neutral 7 – Medium Grey – Dividers

#AAAAAA

Typography

This is heading text

Heading 1 - 32px

This is heading text

Heading 2 - 28px

This is heading text

Heading 3 - 24px

This is heading text

Heading 4 - 20px

This is heading text

Heading 5 - 18px

This is heading text

Heading 6 - 16px

Heading style classes

Apply the following heading styles to default headings or other text to change the size to match a different heading size. For example, you could apply a h3-style class to a default h5 heading to increase the size of that default heading whilst retaining it's status as an H3.

This is useful when trying to retain a heading hierarchy without needing to use a particular heading just because it is the size you need.

h1 – styled

h1 styleD – 72px

h2 – styled

h2 styleD – 56px

h3 – styled

h3 styleD – 40px

h4 – styled

h4 styleD – 32px

h5 – styled

h5 styleD – 24px

h6 – styled

h6 styleD – 20px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph small - 14px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph normal - 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

Paragraph large - 18px

Bold - Lorem ipsum dolor sit amet

text bold - 16px

Italic - Lorem ipsum dolor sit amet

text italic - 16px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

block quote

  • Lorem ipsum dolor sit amet consectetur.
  • Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  • Sapien in tempus lectus lorem quis est.

Bullet list

  1. Lorem ipsum dolor sit amet consectetur.
  2. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  3. Sapien in tempus lectus lorem quis est.

numbered list

Structure

Container 1200px

Centered Container 850px max width

2-col-grid

3-col-grid

4-col-grid

Global Classes

These are global classes that be added to any element. The values can be changed to suit your project. Feel free to add your own and expand what already exists e.g padding top, padding bottom etc.

light-text

Margin Classes (Font sizes in brackets aren't part of the class)

no-margin-bottom (gets rid of margin on the bottom of text and elements)

margin-bottom-tiny (10px)

margin-bottom-small (20px)

margin-bottom-medium (40px)

margin-bottom-ML (50px)

margin-bottom-large (80px)

margin-bottom-XL (100px)

margin-bottom-XXL (120px)

margin-top-tiny (10px)

margin-top-small (20px)

margin-top-medium (40px)

margin-top-ML (50px)

margin-top-large (80px)

margin-top-XL (100px)

margin-top-XXL (120px)

Max Width Classes

max-width-tiny (300px)

max-width-small (400px)

max-width-medium (500px)

max-width-ML (600px)

max-width-large (800px)

max-width-XL (900px)

max-width-XXL (1000px)

Screen Size Classes (Text Align)

hidden (hides stuff)

tablet-centered

mobile-landscape-centered

mobile-centered

tablet-left-align

mobile-landscape-left-align

mobile-left-align

Icons

Forms

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich Text

This is Heading 1

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.

UDESLY-START-PHPecho udesly_get_image(_u('ic8a503c', 'img'))->altUDESLY-END-PHP
Lorem Ipsum dolor sim amet

This is 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. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus.

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  2. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  3. Sapien in tempus lectus lorem quis est.

This is 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales sapien, in tempus lectus lorem quis est.

This is 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.

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Ut sollicitudin, diam ut efficitur pharetra, mauris augue sodales.
  • Sapien in tempus lectus lorem quis est.
This is 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.

This is Heading 6

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.

Buttons

Small

Primary - Small

Default

Primary - Default

Small

Secondary - Small

Default

Secondary - Default

Small

Tertiary - Small

Default

Tertiary - Default