Typography

Font Size/Weight

css class starting with "font-" is used to describe font size and weight

*fluid is still under development

Title

font size: 32px (fluid*: 24px - 32px) | font-weight: 800/$bolder

Example
Hero shot titles

Header 1

font size: 20px (fluid*: 16px - 20px) | font-weight: 700/$bold

Example
Category and List headings, Modal titles, Navigational titles

Header 2

font size: 16px (fluid*: 12px - 16px) | font-weight: 500/$medium

Example
Primary Buttons, Toast titles

Subheader 2

font size: 16px (fluid*: 12px - 16px) | font-weight: 500/$medium | color: $white-70

Example
Secondary Buttons, Subheaders under Headers or Titles

Caption Header

font size: 12px (fluid*: 9px - 12px) | font-weight: 500/$medium

Example
Chat Thread, Stacked Buttons, Toasts

Caption Body

font size: 12px (fluid*: 9px - 12px) | font-weight: 400/$book

Example
Captions, Chat Thread Timestamps

Heading elements

Example

= Title

= Title

= Header 1

= Header 1

= Header 2
= Header 2

Body

font size: 16px (fluid*: 12px - 16px) | font-weight: 400/$book

Example
Body, text inputs

font size: 10px (fluid*: 8px - 10px) | font-weight: 500/$medium

Example
Tab Bar titles, Usernames, and Chat Thread Timestamps

Font Colors

css class such as "text" or starting with "text-" is used to describe font color

Default font color

color: $pumice(dark), $smoke(light)

Example
default font color

Emphasis font color

color: $pumice(dark), $smoke(light)

Example
Text and inline icons. (See Typography: Common Styles)

color: $white(dark)

Example
onHover Links and Usersnames convert to White and have underlines

Success state font color

color: $green(dark,light)

Example
Success State

Robux font color

color: $green(dark,light)

Example
Robux font

Error state font color

color: $red(dark,light)

Example
error , alert

Disabled state font color

color: 50% opacity(dark, light)

Example
disabled state