Fonts

Serif - GranjonLTW01-Roman

Sans-serif - HelveticaNeueLTW04-55Roman (Default)

Light - HelveticaNeueLTW04-45Light

Medium - HelveticaNeueLTW04-65Medium

Bold - HelveticaNeueLTW06-75Bold

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor. Nam auctor dui a neque iaculis in aliquam erat viverra. Duis orci nunc, lacinia in malesuada et, euismod id turpis. Cras mattis vulputate erat, eget tempor magna egestas eu. Vestibulum sit amet massa est.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Heading 1

Heading 2

- has extra top margin when after an H1

Heading 3

Heading 4

Heading 5
Heading 6

Heading 1 - overflow to the second line to see line spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Heading 2 - overflow to the second line to see line spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Heading 3 - overflow to the second line to see line spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Heading 4 - overflow to the second line to see line spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Heading 5 - overflow to the second line to see line spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Heading 6 - overflow to the second line to see line spacing

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Heading 2 - First element in a component

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

A normal link
A normal link
An external link
An external link without the icon

Links as buttons

Default button
Default button

Lists

Unordered list

This is how our list looks by default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

Ordered list

This is how our list looks by default

  1. Level 1. List Item 1

  2. Level 1. List Item 2

    Level 1. List Item 2

    Level 1. List Item 2

    Level 1. List Item 2

  3. Level 1. List Item 3

    1. Level 2. Item 1
    2. Level 2. Item 2
      1. Level 3. Item 1
    3. Level 2. Item 3

  4. Level 1. List Item 4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis, velit gravida convallis tincidunt, felis enim venenatis lorem, nec lobortis nisl urna et mi. Pellentesque ac dictum ante. Fusce dignissim tempor elementum. Ut dignissim convallis eros, viverra luctus lacus consequat ac. Sed feugiat velit sed magna aliquam accumsan. Nam vitae porta tortor.

List compact style

List items are closer together

Comact unordered list

Compact ordered list

  1. List item 1
  2. List item 2
    1. Level 2. List item 1
    2. Level 2. List item 2

Compact mixed list

  1. List item 1
  2. List item 2
  3. List item 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

List flush

Flush "ul"

Flush and compact "ul"

Flush "ol"

  1. List item 1
  2. List item 2

Flush and compact "ol"

  1. List item 1
  2. List item 2

Reset list

Lists that don't have list styling

  1. Ordered List item 1
  2. Ordered List item 2

CTA list

Buttons


Should not be used on light backgounds


Action Buttons

Theme colors

Default

Background Light – Default – #F2F3F4. Here's a regular inline link.

Background Light – Default – #F2F3F4. Here's a regular inline link.

test btn test external test cta

Background Medium – Default – #E1E3E5. Here's a regular inline link.

Background Medium – Default – #E1E3E5. Here's a regular inline link.

test btn test external test cta

Background Dark – Default – #052049. Here's a regular inline link.

Background Dark – Default – #052049. Here's a regular inline link.

test btn test external test cta

Cool-Blue

Background Light – Cool-Blue – #E6EEF6. Here's a regular inline link.

Background Light – Cool-Blue – #E6EEF6. Here's a regular inline link.

test btn test external test cta

Background Medium – Cool-Blue – #B9D6F4. Here's a regular inline link.

Background Medium – Cool-Blue – #B9D6F4. Here's a regular inline link.

test btn test external test cta

Background Dark – Cool-Blue – #4896E8. Here's a regular inline link.

Background Dark – Cool-Blue – #4896E8. Here's a regular inline link.

test btn test external test cta

Warm-Blue

Background Light – Warm-Blue – #E2F4FC. Here's a regular inline link.

Background Light – Warm-Blue – #E2F4FC. Here's a regular inline link.

test btn test external test cta

Background Medium – Warm-Blue – #B8E6FA. Here's a regular inline link.

Background Medium – Warm-Blue – #B8E6FA. Here's a regular inline link.

test btn test external test cta

Background Dark – Warm-Blue – #178CCB. Here's a regular inline link.

Background Dark – Warm-Blue – #178CCB. Here's a regular inline link.

test btn test external test cta

Teal

Background Light – Teal – #E8F6F8. Here's a regular inline link.

Background Light – Teal – #E8F6F8. Here's a regular inline link.

test btn test external test cta

Background Medium – Teal – #B4E2E8. Here's a regular inline link.

Background Medium – Teal – #B4E2E8. Here's a regular inline link.

test btn test external test cta

Background Dark – Teal – #16A0AC. Here's a regular inline link.

Background Dark – Teal – #16A0AC. Here's a regular inline link.

test btn test external test cta

Cool-Green

Background Light – Cool-Green – #EBF7EB. Here's a regular inline link.

Background Light – Cool-Green – #EBF7EB. Here's a regular inline link.

test btn test external test cta

Background Medium – Cool-Green – #C8EBC3. Here's a regular inline link.

Background Medium – Cool-Green – #C8EBC3. Here's a regular inline link.

test btn test external test cta

Background Dark – Cool-Green – #32A03E. Here's a regular inline link.

Background Dark – Cool-Green – #32A03E. Here's a regular inline link.

test btn test external test cta

Warm-Green

Background Light – Warm-Green – #F4F8EA. Here's a regular inline link.

Background Light – Warm-Green – #F4F8EA. Here's a regular inline link.

test btn test external test cta

Background Medium – Warm-Green – #D7EBB2. Here's a regular inline link.

Background Medium – Warm-Green – #D7EBB2. Here's a regular inline link.

test btn test external test cta

Background Dark – Warm-Green – #84C234. Here's a regular inline link.

Background Dark – Warm-Green – #84C234. Here's a regular inline link.

test btn test external test cta

Purple

Background Light – Purple – #F0F0F8. Here's a regular inline link.

Background Light – Purple – #F0F0F8. Here's a regular inline link.

test btn test external test cta

Background Medium – Purple – #C0C0EA. Here's a regular inline link.

Background Medium – Purple – #C0C0EA. Here's a regular inline link.

test btn test external test cta

Background Dark – Purple – #6C62D0. Here's a regular inline link.

Background Dark – Purple – #6C62D0. Here's a regular inline link.

test btn test external test cta

Violet

Background Light – Violet – #F6F0F7. Here's a regular inline link.

Background Light – Violet – #F6F0F7. Here's a regular inline link.

test btn test external test cta

Background Medium – Violet – #EACCF0. Here's a regular inline link.

Background Medium – Violet – #EACCF0. Here's a regular inline link.

test btn test external test cta

Background Dark – Violet – #C45ED8. Here's a regular inline link.

Background Dark – Violet – #C45ED8. Here's a regular inline link.

test btn test external test cta

Magenta

Background Light – Magenta – #F7F0F4. Here's a regular inline link.

Background Light – Magenta – #F7F0F4. Here's a regular inline link.

test btn test external test cta

Background Medium – Magenta – #F2C2DE. Here's a regular inline link.

Background Medium – Magenta – #F2C2DE. Here's a regular inline link.

test btn test external test cta

Background Dark – Magenta – #C42882. Here's a regular inline link.

Background Dark – Magenta – #C42882. Here's a regular inline link.

test btn test external test cta