Style Guide

Powered by the team at HUSL

Breakpoints

Mobile

Breakpoint: <767px
Left/right margins: 20px
Gutter: 20px
Columns: 2

Tablet

Breakpoint: 1024-768px
Left/right margins: 30px
Gutter: 30px
Columns: 6

Laptop

Breakpoint: 1025-1440px
Left/right margins: 100px
Gutter: 30px
Columns: 12

Desktop

Breakpoint: 1441-1920px
Max-width content area: 1620px
Left/right margins: 150px
Gutter: 40px
Columns: 12

Colors

$brand-purple
$brand-blue-light
$brand-blue
$brand-teal (aka $brand-green)
$brand-yellow
$brand-orange
$brand-pink
$gray-darkest
$gray
$gray-light

Typography

H1 header

(<767px) 30px/30px, (1024-768px) 48px/48px, (1025-1440px) 60px/60px, (1441-1920px) 72/72px

H2 header

(<767px) 24px/30px, (1024-768px) 30px/30px, (1025-1440px) 30px/30px, (1441-1920px) 48/48px

H3 header

(<767px) 21px/28px, (1024-768px) 24px/30px, (1025-1440px) 24px/30px, (1441-1920px) 30/30px

H4 header

(<767px) 18px/28px, (1024-768px) 21px/30px, (>1025px) 21px/30px, (1441-1920px) 24/30px

H5 header

(<767px) 18px/28px, (1024-768px) 18px/28px, (1025-1440px) 21px/30px, (1441-1920px) 21/30px

H6 header

(<767px) 16px/24px, (1024-768px) 16px/24px, (1025-1440px) 16px/24px, (1441-1920px) 18/30px

Body, Large (aka Lead Body)

(<767px) 18px/24px, (1024-768px) 21px/30px, (1025-1440px) 21px/30px, (1441-1920px) 21/30px

Body

(<767px-1440px) 16px/24px, (1441-1920px) 18/30px

Body, Small

(<767px-1440px) 14px/24px, (1441-1920px) 16/34px

  • Unordered bullet list item goes here
  • Unordered bullet list item lorem ipsum
  • Unordered list item goes here
  1. Ordered bullet list item
  2. Second bullet list item
  3. Ordered bullet list item
  • Graphic bullet list item goes here
  • Graphic bullet list item goes here
  • Graphic bullet list item goes here

Block quote example. Quisque mauris arcu, facilisis luctus nibh sed, dapibus suscipit diam. Nam at ante semper, mattis quam ac, congue est.

John Doe, Company Name

Forms

Tables

Column 1 Title Column 2 Title Column 3 Title
Item NoItem NoItem No
Item NoItem NoItem No
Item NoItem NoItem No
Item NoItem NoItem No
Item NoItem NoItem No
Item NoItem NoItem No
Item NoItem NoItem No

Navigation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien. Vestibulum non molestie ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien.

  • Accordion 1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum. Quisque sem sapien, faucibus at posuere sed, convallis sed sapien. Vestibulum non molestie ipsum.

  • Accordion 2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio. Ut eros urna, cursus in lobortis vel, porta vitae ipsum.

  • Accordion 3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas commodo, neque in feugiat tempus, sapien eros aliquam ligula, ac gravida arcu ex sed arcu. Nunc imperdiet felis at urna dignissim fermentum. Mauris semper, eros eget interdum finibus, massa ante venenatis felis, auctor tincidunt dolor tortor sed odio.