habitica/website/client/src/assets/scss/typography.scss

body {
  font-family: 'Roboto', sans-serif;
  color: $gray-50;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 14px;
  line-height: 1.43;
}

.small-text {
  font-size: 12px;
  font-style: italic;
  line-height: 1.33;
  color: $gray-200;
}

// Restore the default styling for a elements without an href attribute
// that was changed in bootstrap 4.5.1
a:not([href]), a:not([href]):hover {
  &:not([role=button]) { 
    color: inherit;
    text-decoration: none;
  }
}

a, a:not([href]):not([tabindex]) {
  cursor: pointer;
  color: $purple-300;

  &:hover, &:active, &:focus {
    text-decoration: underline;
    color: $purple-300;
  }

  &[disabled="disabled"] {
    color: $gray-300;
    text-decoration: none;
    cursor: default;
  }

  &.small-link {
    font-size: 12px;
    line-height: 1.33;
  }
}

// Headers
h1, h2, h5, h6 {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
  color: $gray-10;
}

h1 {
  font-size: 24px;
  line-height: 1.67;
  margin-bottom: 24px;
}

h2 {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 16px;
}

h3, h4 {
  font-weight: bold;
  font-size: 0.875rem;
  line-height: 1.71;
}

h3 {
  color: $gray-10;
}

h4 {
  color: $gray-100;
}

.textCondensed {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: bold;
}

.opacity-75 {
  opacity: 0.75;
}

.bg-gray-100 {
  background-color: $gray-100 !important;
}

.bg-gray-300 {
  background-color: $gray-300 !important;
}

.bg-gray-600 {
  background-color: $gray-600 !important;
}

.bg-gray-700 {
  background-color: $gray-700 !important;
}

.bg-green-10 {
  background-color: $green-10 !important;
}

.bg-green-100 {
  background-color: $green-100 !important;
}

.bg-purple-50 {
  background-color: $purple-50 !important;
}

.bg-purple-100 {
  background-color: $purple-100 !important;
}

.bg-purple-300 {
  background-color: $purple-300 !important;
}

.bg-yellow-50 {
  background-color: $yellow-50 !important;
}

.bg-white {
  background-color: $white !important;
}

.gray-10 {
  color: $gray-10 !important;
}

.gray-50 {
  color: $gray-50 !important;
}

.gray-100 {
  color: $gray-100 !important;
}

.gray-200 {
  color: $gray-200 !important;
}

.gray-300 {
  color: $gray-300 !important;
}

.green-10 {
  color: $green-10 !important;
}

.maroon-50 {
  color: $maroon-50 !important;
}

.purple-200 {
  color: $purple-200 !important;
}

.purple-300 {
  color: $purple-300 !important;
}

.purple-600 {
  color: $purple-600 !important;
}

.teal-1 {
  color: $teal-1 !important;
}

.teal-10 {
  color: $teal-10 !important;
}

.yellow-10 {
  color: $yellow-10 !important;
}

.white {
  color: $white !important;
}