Colors

These blues are meant to be used in these specific use cases to optimize for readability but appear optically as the same color.

Knottie Blue

  • Class Name: .knottie-blue
  • SASS Variable: $knottie-blue
  • Hex: #8AD2F3
  • Use this blue in TK logo, solid color shapes (i.e. navigation bar, button), and icons

New Blue

  • Class Name: .new-blue
  • SASS Variable: $new-blue
  • Hex: #6CC6F0
  • Use this blue in a button that has a blue border (both CTA and the border) and for text links

Dark Gray

  • Class Name: .dark-gray
  • SASS Variable: $dark-gray
  • Hex: #888888

Medium Gray

  • Class Name: .medium-gray
  • SASS Variable: $medium-gray
  • Hex: #C3C3C3

Warm Gray

  • Class Name: .warm-gray
  • SASS Variable: $warm-gray
  • Hex: #F7F6F5
  • This color is currently only used for page background and may change.

Light Gray

  • Class Name: .light-gray
  • SASS Variable: $light-gray
  • Hex: #E9E9E9

Background Gray

  • Class Name: .super-light-gray
  • SASS Variable: $super-light-gray
  • Hex: #F9F9F9

Black

  • Class Name: .black
  • SASS Variable: $black
  • Hex: #1F1F1F

Green

  • Class Name: .green
  • SASS Variable: $green
  • Hex: #79CC66

Knottie Red

  • Class Name: .knottie-red
  • SASS Variable: $knottie-red
  • Hex: #FA6466

Light Gray - Warm

  • Note: This color is currently only used in the footer and may change.
  • SASS Variable: $light-gray-warm
  • Hex: #EDEAE6

Medium Gray - Warm

  • Note: This color is currently only used in the footer and may change.
  • SASS Variable: $medium-gray-warm
  • Hex: #D7D6D1

The following classes were created for greater flexibility to implement color changes. Please add classes to elements as needed

.knottie-blue-border
.knottie-blue-background
.knottie-blue
<div class="color-group">
  <div class="knottie-blue-border">.knottie-blue-border</div>
  <div class="knottie-blue-background">.knottie-blue-background</div>
  <div class="knottie-blue">.knottie-blue</div>
</div>
.new-blue-border
.new-blue-background
.new-blue
<div class="color-group">
  <div class="new-blue-border">.new-blue-border</div>
  <div class="new-blue-background">.new-blue-background</div>
  <div class="new-blue">.new-blue</div>
</div>
.dark-gray-border
.dark-gray-background
.dark-gray
<div class="color-group">
  <div class="dark-gray-border">.dark-gray-border</div>
  <div class="dark-gray-background">.dark-gray-background</div>
  <div class="dark-gray">.dark-gray</div>
</div>
.medium-gray-border
.medium-gray-background
.medium-gray
<div class="color-group">
  <div class="medium-gray-border">.medium-gray-border</div>
  <div class="medium-gray-background">.medium-gray-background</div>
  <div class="medium-gray">.medium-gray</div>
</div>
.light-gray-border
.light-gray-background
.light-gray
<div class="color-group">
  <div class="light-gray-border">.light-gray-border</div>
  <div class="light-gray-background">.light-gray-background</div>
  <div class="light-gray">.light-gray</div>
</div>
.super-light-gray-border
.super-light-gray-background
.super-light-gray
<div class="color-group">
  <div class="super-light-gray-border">.super-light-gray-border</div>
  <div class="super-light-gray-background">.super-light-gray-background</div>
  <div class="super-light-gray">.super-light-gray</div>
</div>
.black-border
.black-background
.black
<div class="color-group">
  <div class="black-border">.black-border</div>
  <div class="black-background">.black-background</div>
  <div class="black">.black</div>
</div>
.green-border
.green-background
.green
<div class="color-group">
  <div class="green-border">.green-border</div>
  <div class="green-background">.green-background</div>
  <div class="green">.green</div>
</div>
.knottie-red-border
.knottie-red-background
.knottie-red
<div class="color-group">
  <div class="knottie-red-border">.knottie-red-border</div>
  <div class="knottie-red-background">.knottie-red-background</div>
  <div class="knottie-red">.knottie-red</div>
</div>