Style Guide

Pro-tips: Paste this content into a dedicated page named “Style guide”. Convert each color style below to global swatches so they can be used in text, borders, backgrounds, and gradients. To do this, select a color style element, navigate to the Background Color section in the Style panel, edit the color, and add it as a global swatch.

Block Quote

Heading

Text styles

Lorem ipsum dolor

Inter Medium 14px/20px

Lorem ipsum dolor

Inter Regular 12px/15px

Lorem ipsum dolor

Inter Regular 14px/20px

Lorem ipsum dolor

Inter Regular 16px/24px

Lorem ipsum dolor

Inter Medium 12px/16px

Lorem ipsum dolor

Inter Medium 16px/24px

Lorem ipsum dolor

Inter Medium 22px/undefinedpx

Lorem ipsum dolor

Instrument Serif Regular 32px/36px

Lorem ipsum dolor

Instrument Serif Regular 52px/52px

Lorem ipsum dolor

Instrument Serif Italic 52px/52px

Lorem ipsum dolor

Instrument Serif Regular 80px/78px

Lorem ipsum dolor

Instrument Serif Italic 80px/78px

Lorem ipsum dolor

Instrument Serif Regular 52px/52px

Lorem ipsum dolor

Inter Regular 16px/24px

Lorem ipsum dolor

Roboto Regular 20px/28px

Lorem ipsum dolor

Roboto Regular 32px/40px

Lorem ipsum dolor

Roboto Regular 14px/20px

Lorem ipsum dolor

Roboto Medium 16px/24px

Lorem ipsum dolor

Roboto Regular 18px/24px

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Text link
Block quote

Ordered list

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

Unordered list

  • Item A
  • Item B
  • Item C

Bold text

Emphasis

Superscript

Subscript

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

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

Unordered list

  • Item A
  • Item B
  • Item C
Text link

Bold text

Emphasis

Superscript

Subscript

Color styles

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.

background/base - #F6F4ED

content/high - #1A1914

content/mid - #1A1919

content/low - #1A1919

content/on.color - #F6F4ED

background/high - #1A1914

background/mid - #F6F4ED

background/low - #1A1919

border/high - #1A1914

border/low - #1A1919

semantic/highlight - #0032A6

content/high - #1A1914

background/low - #1A1919

content/on.color - #F6F4ED

light/content/oncolor - #FFFFFF

dark/background/base - #000000

dark/content/mid - #FFFFFF

dark/content/high - #FFFFFF

light/semantic/success - #00B277

light/content/high - #000000

light/content/onhigh - #FFFFFF

light/semantic/primary - #0D3FF5