diff --git a/.circleci/config.yml b/.circleci/config.yml
index acee1e4..12c0931 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -48,4 +48,4 @@ workflows:
             tags:
               only: /v[0-9]+(\.[0-9]+)*/
           requires:
-            - test
\ No newline at end of file
+            - test
diff --git a/__tests__/__snapshots__/index.js.snap b/__tests__/__snapshots__/index.js.snap
index f57ecae..9c0926f 100644
--- a/__tests__/__snapshots__/index.js.snap
+++ b/__tests__/__snapshots__/index.js.snap
@@ -15,6 +15,8 @@ Object {
   "GhostButton": [Function],
   "Modal": [Function],
   "PrimaryButton": [Function],
+  "QATrackEventTag": [Function],
+  "QATrackTag": [Function],
   "SecondaryButton": [Function],
   "Tag": [Function],
 }
diff --git a/package-lock.json b/package-lock.json
index 3ae520f..b151255 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "topcoder-react-ui-kit",
-  "version": "0.5.10",
+  "version": "1.0.7",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -6616,7 +6616,8 @@
         "jsbn": {
           "version": "0.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "json-schema": {
           "version": "0.2.3",
@@ -12010,7 +12011,7 @@
       "dependencies": {
         "minimist": {
           "version": "1.2.0",
-          "resolved": "http://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
         }
       }
diff --git a/package.json b/package.json
index f01e7d4..7722f59 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "lint:scss": "./node_modules/.bin/stylelint **/*.scss --syntax scss",
     "test": "npm run lint && npm run jest"
   },
-  "version": "0.5.10",
+  "version": "2.0.0",
   "dependencies": {
     "prop-types": "^15.6.2",
     "react": "^16.4.1",
diff --git a/src/shared/components/buttons/themes/danger.scss b/src/shared/components/buttons/themes/danger.scss
index 5913fba..e1b368c 100644
--- a/src/shared/components/buttons/themes/danger.scss
+++ b/src/shared/components/buttons/themes/danger.scss
@@ -5,7 +5,7 @@
 @import "default";
 
 @mixin button {
-  background: $tc-red-70;
+  background: $tc-red-110;
   border-color: transparent;
   color: $tc-white;
 }
@@ -38,7 +38,7 @@
   }
 
   &:active {
-    background-color: $tc-red;
+    background-color: $tc-red-110;
     background-image: none;
     box-shadow: inset 0 1px 3px 0 rgba(71, 71, 79, 0.38);
     border-color: transparent;
diff --git a/src/shared/components/buttons/themes/primary.scss b/src/shared/components/buttons/themes/primary.scss
index 09ef08d..7c4dba9 100644
--- a/src/shared/components/buttons/themes/primary.scss
+++ b/src/shared/components/buttons/themes/primary.scss
@@ -5,7 +5,7 @@
 @import "default";
 
 @mixin button {
-  background: $tc-dark-blue;
+  background: $tc-dark-blue-110;
   border-color: transparent;
   color: $tc-white;
 }
diff --git a/src/shared/components/tags/event/data-science.scss b/src/shared/components/tags/event/data-science.scss
index aca8625..3a7d7b6 100644
--- a/src/shared/components/tags/event/data-science.scss
+++ b/src/shared/components/tags/event/data-science.scss
@@ -5,14 +5,14 @@
 @import "../default";
 
 .button {
-  color: $tc-orange;
+  color: $tc-orange-110;
   background-color: $tc-orange-10;
 
   &:active,
   &:focus,
   &:hover {
     color: $tc-orange;
-    background-color: $tc-orange-10;
+    background-color: $tc-orange-30;
   }
 
   &:visited {
diff --git a/src/shared/components/tags/event/design.scss b/src/shared/components/tags/event/design.scss
index 64e113d..747e0d9 100644
--- a/src/shared/components/tags/event/design.scss
+++ b/src/shared/components/tags/event/design.scss
@@ -5,14 +5,14 @@
 @import "../default";
 
 .button {
-  color: $tc-light-blue;
+  color: $tc-dark-blue-110;
   background-color: $tc-light-blue-10;
 
   &:active,
   &:focus,
   &:hover {
     color: $tc-light-blue;
-    background-color: $tc-light-blue-10;
+    background-color: $tc-light-blue-30;
   }
 
   &:visited {
diff --git a/src/shared/components/tags/event/development.scss b/src/shared/components/tags/event/development.scss
index e2a7c7e..e277356 100644
--- a/src/shared/components/tags/event/development.scss
+++ b/src/shared/components/tags/event/development.scss
@@ -5,14 +5,14 @@
 @import "../default";
 
 .button {
-  color: $tc-green;
+  color: $tc-green-110;
   background-color: $tc-green-10;
 
   &:active,
   &:focus,
   &:hover {
     color: $tc-green;
-    background-color: $tc-green-10;
+    background-color: $tc-green-30;
   }
 
   &:visited {
diff --git a/src/shared/components/tags/event/qa.scss b/src/shared/components/tags/event/qa.scss
new file mode 100644
index 0000000..6f3b978
--- /dev/null
+++ b/src/shared/components/tags/event/qa.scss
@@ -0,0 +1,21 @@
+/**
+ * Event tag, colored with colors of qa track (purple).
+ */
+
+@import "../default";
+
+.button {
+  color: $tc-purple-120;
+  background-color: $tc-purple-20;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: $tc-purple;
+    background-color: $tc-purple-30;
+  }
+
+  &:visited {
+    color: $tc-purple;
+  }
+}
diff --git a/src/shared/components/tags/index.jsx b/src/shared/components/tags/index.jsx
index 27be7df..4c5ac01 100644
--- a/src/shared/components/tags/index.jsx
+++ b/src/shared/components/tags/index.jsx
@@ -6,10 +6,12 @@ import defaultTag from './default.scss';
 import dataScienceTrackTag from './primary/data-science.scss';
 import designTrackTag from './primary/design.scss';
 import developmentTrackTag from './primary/development.scss';
+import qaTrackTag from './primary/qa.scss';
 
 import dataScienceTrackEventTag from './event/data-science.scss';
 import designTrackEventTag from './event/design.scss';
 import developmentTrackEventTag from './event/development.scss';
+import qaTrackEventTag from './event/qa.scss';
 
 export const Tag = themr('Tag', defaultTag)(GenericButton);
 
@@ -21,3 +23,6 @@ export const DesignTrackEventTag = themr('DesignTrackEventTag', designTrackEvent
 
 export const DevelopmentTrackTag = themr('DevelopmentTrackTag', developmentTrackTag)(GenericButton);
 export const DevelopmentTrackEventTag = themr('DevelopmentTrackEventTag', developmentTrackEventTag)(GenericButton);
+
+export const QATrackTag = themr('QATrackTag', qaTrackTag)(GenericButton);
+export const QATrackEventTag = themr('QATrackEventTag', qaTrackEventTag)(GenericButton);
diff --git a/src/shared/components/tags/primary/data-science.scss b/src/shared/components/tags/primary/data-science.scss
index 9cefbf0..fc3b064 100644
--- a/src/shared/components/tags/primary/data-science.scss
+++ b/src/shared/components/tags/primary/data-science.scss
@@ -5,7 +5,7 @@
 @import "../default";
 
 .button {
-  background-color: $tc-orange;
+  background-color: $tc-orange-110;
   color: $tc-white;
 
   &:active,
diff --git a/src/shared/components/tags/primary/design.scss b/src/shared/components/tags/primary/design.scss
index 633192c..6251789 100644
--- a/src/shared/components/tags/primary/design.scss
+++ b/src/shared/components/tags/primary/design.scss
@@ -5,7 +5,7 @@
 @import "../default";
 
 .button {
-  background-color: $tc-light-blue;
+  background-color: $tc-light-blue-110;
   color: $tc-white;
 
   &:active,
diff --git a/src/shared/components/tags/primary/development.scss b/src/shared/components/tags/primary/development.scss
index eb020f7..0f98252 100644
--- a/src/shared/components/tags/primary/development.scss
+++ b/src/shared/components/tags/primary/development.scss
@@ -5,7 +5,7 @@
 @import "../default";
 
 .button {
-  background-color: $tc-green;
+  background-color: $tc-green-110;
   color: $tc-white;
 
   &:active,
diff --git a/src/shared/components/tags/primary/qa.scss b/src/shared/components/tags/primary/qa.scss
new file mode 100644
index 0000000..3deea37
--- /dev/null
+++ b/src/shared/components/tags/primary/qa.scss
@@ -0,0 +1,21 @@
+/**
+ * Primary tag, colored with colors of qa track (purple).
+ */
+
+@import "../default";
+
+.button {
+  background-color: $tc-purple-120;
+  color: $tc-white;
+
+  &:active,
+  &:focus,
+  &:hover {
+    color: $tc-white;
+    background-color: $tc-purple;
+  }
+
+  &:visited {
+    color: $tc-white;
+  }
+}
diff --git a/src/styles/_mixins/variables.scss b/src/styles/_mixins/variables.scss
index d1cb5b1..e5a0686 100644
--- a/src/styles/_mixins/variables.scss
+++ b/src/styles/_mixins/variables.scss
@@ -24,6 +24,7 @@ $tc-black: #151516;
 $tc-gray-90: #2a2a2b;
 $tc-gray-80: #404041;
 $tc-gray-70: #555;
+$tc-gray-75: #006dea;
 $tc-gray-60: #6b6b6b;
 $tc-gray-50: #808080;
 $tc-gray-40: #959596;
@@ -36,31 +37,32 @@ $tc-gray-neutral-light: #fafafb;
 $tc-white: #fff;
 
 /* Accents & Shades. */
-$tc-dark-blue-110: #006dea;
+$tc-dark-blue-110: #006ad7;
+$tc-dark-blue-105: #006feb;
 $tc-dark-blue-100: #0681ff;
 $tc-dark-blue-70: #55a5ff;
 $tc-dark-blue-30: #cee6ff;
 $tc-dark-blue-10: #f4f9ff;
 
 /* Light Blue - design color code. */
-$tc-light-blue-110: #169ed9;
-$tc-light-blue-100: #26ade9;
-$tc-light-blue-70: #67c5ef;
-$tc-light-blue-30: #bde6f8;
+$tc-light-blue-110: #0076a5;
+$tc-light-blue-100: #15acec;
+$tc-light-blue-70: #63c4f1;
+$tc-light-blue-30: #bce6f9;
 $tc-light-blue-10: #e9f6fc;
 
 /* Warm Orange - data science color code. */
-$tc-orange-110: #f26500;
-$tc-orange-100: #fb7d22;
-$tc-orange-70: #fda464;
-$tc-orange-30: #fee3d0;
+$tc-orange-110: #ba4c00;
+$tc-orange-100: #fd7d00;
+$tc-orange-70: #ffa45d;
+$tc-orange-30: #ffe3cf;
 $tc-orange-10: #fff0eb;
 
 /* Red - used for warnings/ */
 $tc-red-110: #ea1900;
-$tc-red-100: #f22f24;
-$tc-red-70: #ff5b52;
-$tc-red-30: #ffd4d1;
+$tc-red-100: #f52c14;
+$tc-red-70: #ff5a4c;
+$tc-red-30: #ffd4d0;
 $tc-red-10: #fff4f4;
 
 /* Yellow. */
@@ -71,17 +73,20 @@ $tc-yellow-30: #fff8ca;
 $tc-yellow-10: #fffde5;
 
 /* Greens - development color code. */
-$tc-green-110: #55b000;
-$tc-green-100: #60c700;
-$tc-green-70: #96d957;
-$tc-green-30: #cfefb2;
-$tc-green-10: #effae5;
+$tc-green-120: #258205;
+$tc-green-110: #328732;
+$tc-green-100: #5cc900;
+$tc-green-70: #94db4e;
+$tc-green-30: #cef0af;
+$tc-green-10: #effae4;
 
 /* Purples. */
-$tc-purple-110: #9050a3;
-$tc-purple-100: #9050a3;
-$tc-purple-70: #b47dd6;
-$tc-purple-30: #e2c7f2;
+$tc-purple-120: #8231a9;
+$tc-purple-110: #753488;
+$tc-purple-100: #914da5;
+$tc-purple-70: #b57ad8;
+$tc-purple-30: #e2c6f3;
+$tc-purple-20: #e6cff1;
 $tc-purple-10: #f8f2fb;
 
 /* TC Metal colors - Badges.
@@ -89,7 +94,7 @@ $tc-purple-10: #f8f2fb;
  * For metals the level 100 is the base metal color; 110 is for text inside
  * the metal-colored areas; and 130 is for small text inside metal-colored
  * areas, for better visibility. */
-$tc-gold-130: #865e07;
+$tc-gold-130: #9a6d00;
 $tc-gold-110: #c99014;
 $tc-gold-100: #ffd84d;
 
@@ -99,13 +104,13 @@ $tc-silver-100: #d1d0cf;
 
 $tc-bronze-130: #733d17;
 $tc-bronze-110: #854e29;
-$tc-bronze-100: #d98d64;
+$tc-bronze-100: #d98f64;
 
 /* Pastel colors, used for levels. */
-$tc-pastel-green: #25c089;
-$tc-pastel-blue: #666eff;
-$tc-pastel-yellow: #fcb816;
-$tc-pastel-crimson: #e6175c;
+$tc-pastel-green: #12c188;
+$tc-pastel-blue: #5656f4;
+$tc-pastel-yellow: #feb900;
+$tc-pastel-crimson: #e90c5a;
 
 /* Color aliases. */