Style Guide

Typography

Global Setting

font-family: "Ordinary", sans-serif; 
font-style: normal; 
font-weight: 500; 
letter-spacing: 0; 
line-height: 1.4; 
text-wrap: pretty; 
html-font-size: 16; 
font-size: 14; 
font-weight-light: 300; 
font-weight-regular: 400; 
font-weight-medium: 500; 
font-weight-bold: 700;

Heading 1

  max-width: 95%; 
  font-family: "Ordinary", sans-serif; 
  font-style: normal; 
  font-size: 3.75rem; 
  letter-spacing: 0.02em; 
  font-weight: 900; 
  text-wrap: balance; 
  @ Tablet:  
    font-size: 2.25rem;
  line-height: 1.167;

Heading 2

  max-width: 95%; 
  font-family: "Ordinary", sans-serif; 
  font-style: normal; 
  font-weight: 900; 
  font-size: 2.5rem; 
  letter-spacing: 0.003em; 
  padding-bottom: 0.5em; 
  text-wrap: balance; 
  line-height: 1.2;

Heading 3

  max-width: 95%; 
  font-family: "Ordinary", sans-serif; 
  font-style: normal; 
  font-weight: 800; 
  font-size: 1.5rem; 
  margin-bottom: 0.5em; 
  letter-spacing: 0.02em; 
  text-wrap: balance; 
  Medium:  
    font-weight: 500;
    line-height: 1.1;
  line-height: 1.167;

Heading 4

  max-width: 95%; 
  font-family: "Ordinary", sans-serif; 
  font-style: normal; 
  font-weight: 900; 
  font-size: 1.25rem; 
  letter-spacing: 0.04em; 
  margin-bottom: 1em; 
  line-height: 1.235;

Heading 5

  max-width: 95%; 
  font-family: "Ordinary", sans-serif; 
  font-style: normal; 
  font-size: 1.5rem; 
  letter-spacing: 0.03em; 
  font-weight: 600; 
  line-height: 1.334; 
  text-wrap: balance; 
  Bold:  
    font-weight: 700;
  @ Tablet:  
    font-size: 2.25rem;

Heading 6

  max-width: 95%; 
  font-family: "Ordinary", sans-serif; 
  font-style: normal; 
  font-size: 3.75rem; 
  letter-spacing: 0.02em; 
  font-weight: 700; 
  line-height: 1; 
  text-wrap: balance; 
  @ Tablet:  
    font-size: 2.25rem;

Paragraph 1

  font-family: "Ordinary Text", sans-serif; 
  font-style: normal; 
  font-weight: 400; 
  font-size: 1.5rem; 
  letter-spacing: 0em; 
  Bold Italic:  
    font-weight: 600;
    font-style: italic;
  Bold:  
    font-weight: 600;
  line-height: 1.5;

Paragraph 2

  font-family: "Ordinary Text", sans-serif; 
  font-style: normal; 
  font-weight: 400; 
  font-size: .85rem; 
  letter-spacing: 0em; 
  line-height: 1.45; 
  Bold:  
    font-weight: 700;
  Medium:  
    font-weight: 500;
  Medium Italic:  
    font-weight: 500;
    font-style: italic;

body3

  font-family: "Ordinary Text", sans-serif; 
  font-style: normal; 
  font-weight: 400; 
  font-size: 1.1rem; 
  letter-spacing: 0.00em; 
  line-height: 1.45; 
  Bold:  
    font-weight: 700;
  Medium Italic:  
    font-weight: 500;
    font-style: italic;

body4

  font-family: "Ordinary Text", sans-serif; 
  font-style: normal; 
  font-weight: 500; 
  font-size: .75rem; 
  letter-spacing: 0.00em; 
  line-height: 1.2; 
  Bold:  
    font-weight: 800;
  Medium Italic:  
    font-weight: 600;
    font-style: italic;

Caption 1

  max-width: 750px; 
  font-family: "Ordinary Text", sans-serif; 
  font-style: normal; 
  font-weight: 400; 
  font-size: 1rem; 
  letter-spacing: 0.00em; 
  Medium:  
    font-weight: 500;
  Medium Italic:  
    font-weight: 500;
    font-style: italic;
  Bold:  
    font-weight: 700;

button

  font-family: "Ordinary", sans-serif; 
  font-weight: 500; 
  font-size: 0.875rem; 
  line-height: 1.75; 
  text-transform: uppercase;

subtitle1

  font-family: "Ordinary", sans-serif; 
  font-weight: 400; 
  font-size: 1rem; 
  line-height: 1.75;

subtitle2

  font-family: "Ordinary", sans-serif; 
  font-weight: 500; 
  font-size: 0.875rem; 
  line-height: 1.57;

overline

  font-family: "Ordinary", sans-serif; 
  font-weight: 400; 
  font-size: 0.75rem; 
  line-height: 2.66; 
  text-transform: uppercase;

caption

  font-family: "Ordinary", sans-serif; 
  font-weight: 400; 
  font-size: 0.75rem; 
  line-height: 1.66;

inherit

  font-family: inherit; 
  font-weight: inherit; 
  font-size: inherit; 
  line-height: inherit; 
  letter-spacing: inherit;