typography.md

Typography

Definitions

• font-weight
• text-decoration
• font-style

Font families

• 'Optima Nova Pro Medium'
• 'Proxima Nova Regular'
• 'Proxima Nova SemiBold'
• 'Proxima Nova Bold'

Headers

h1 - Heading level 1

Description: Use cases Definitions:

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• padding-bottom: px
• padding-top: px

h2 - Heading level 2

Description: Use cases Definitions:

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• padding-bottom: px
• padding-top: px

h3 - Heading level 3

Description: Use cases Definitions:

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• padding-bottom: px
• padding-top: px

h4 - Heading level 4

Description: Use cases Definitions:

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• padding-bottom: px
• padding-top: px

h5 - Heading level 5

Description: Use cases Definitions:

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• padding-bottom: px
• padding-top: px

h6 - Heading level 6

Description: Use cases Definitions:

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• padding-bottom: px
• padding-top: px

Regular text

p - Paragraph

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px

a - Link

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• text-decoration

:hover

• color: RGB
• font-weight:
• text-decoration

:hover:active

• color: RGB
• font-weight:
• text-decoration

:hover:focus

• color: RGB
• font-weight:
• text-decoration

:active

• color: RGB
• font-weight:
• text-decoration

:active:focus

• color: RGB
• font-weight:
• text-decoration

:focus

• color: RGB
• font-weight:
• text-decoration

s - Strong

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• text-decoration
• font-style:

em - Emphasis

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• text-decoration
• font-style:

u - Underline

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• font-style:

s - Strike

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• font-style:

blockquote - Blockquote

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• font-style:

Lists

ol - Ordered list

ol padding-top padding-bottom padding-left

ol li - Ordered list item

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• font-style:

ol li NUMBER - Ordered list item Number

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• font-style:

ul - Unordered list

ul padding-top padding-bottom padding-left

ul li - Unordered list item

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• font-style:

ul li SYMBOL - Unordered list item symbol

• color: RGB
• format
• size

Buttons

For each variation

button - Ordered list item

• color: RGB
• font-family: font name
• font-size: px
• font-weight:
• line-height: px
• margin-bottom: px
• font-style:
• background-color: RGB
• border-color: RGB
• border-width: px
• border-radius: px

:hover

• color: RGB
• background-color: RGB
• font-weight:
• text-decoration

:hover:active

• color: RGB
• background-color: RGB
• border-color: RGB
• font-weight:
• text-decoration

:hover:focus

• color: RGB
• background-color: RGB
• border-color: RGB
• font-weight:
• text-decoration

:active

• color: RGB
• background-color: RGB
• border-color: RGB
• font-weight:
• text-decoration

:active:focus

• color: RGB
• background-color: RGB
• border-color: RGB
• font-weight:
• text-decoration

:focus

• color: RGB
• background-color: RGB
• border-color: RGB
• font-weight:
• text-decoration

Modifiers

if we have variations of typography not related to the TAG elements, list what should be possible