Premier Swim Academy

Style Guide

Breakpoints

Colors

$primaryColor #22d1ff
$secondaryColor #fe8722
$tertiaryColor #0055a4
$body-color #29262e
$gray #666666
$grayLight #f9f9f9

Typography

H1 header

(>1025px) 60px/75px, (1024-768px) 50px/56px, (<767px) 28px/32px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

H2 header

(>1025px) 48px/52px, (1024-768px) 40px/48px, (<767px) 24px/28px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

H3 header

(>1025px) 36px/100%, (1024-768px) 30px/32px, (<767px) 22px/26px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

H4 header

(>1025px) 26px/120%, (1024-768px) 24px/28px, (<767px) 20px/24px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

H5 header

(>1025px) 20px/120%, (1024-768px) 18px/120%, (<767px) 18px/22px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

H6 header

(>1025px) 18px/120%, (1024-768px) 16px/20px, (<767px) 14px/18px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

Lead body

(>1025px) 22px/150% | 20px paragraph spacing, (1024-768px) 20px/30px, (<767px) 16px/22px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor.

Body

(>1025px) 18px/140% | 20px paragraph spacing, (1024-768px) 16px/24px, (<767px) 14px/20px Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

Small Body

(>1025px) 16px/150% | 20px paragraph spacing, (1024-768) 14px/150% (<767px) 12px/150% Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non augue at lacus tristique consectetur eu vel orci. Aliquam venenatis velit quis interdum porttitor. In ac ipsum cursus, tempus odio id, sagittis dui.

Bullet List (unordered)
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here
Bullet List (ordered)
  1. List item goes here
  2. Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  3. List item goes here
Unordered List, Arrows
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here
Bullet List (unordered)
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here
Bullet List (ordered)
  1. List item goes here
  2. Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  3. List item goes here
Unordered List, Arrows
  • List item goes here
  • Another list item goes here that wraps to 
two lines lrem ipsum dolor sit amet
  • List item goes here

Buttons & Links

Primary
Button Small Button Medium Button Large
Primary Blue
Button Small Button Medium Button Large
Secondary
Button small Button medium Button large
Tertiary
No Background Button
Hyperlinks

Buttons & Links

Primary
Button Small Button Medium Button Large
Primary Blue
Button Small Button Medium Button Large
Secondary
Button small Button medium Button large
Tertiary
No Background Button
Hyperlinks