diff --git a/app/account/login/login.jade b/app/account/login/login.jade
index f35281938..9b8e646e8 100644
--- a/app/account/login/login.jade
+++ b/app/account/login/login.jade
@@ -21,7 +21,7 @@
     p.problem-signin
       a.forgot-password(ui-sref="resetPassword") Forgot your password?
 
-    button(type="submit", ng-disabled="vm.loginForm.$invalid", ng-class="{'enabled-button': vm.loginForm.$valid}") Log In
+    button.tc-btn.tc-btn-l(type="submit", ng-disabled="vm.loginForm.$invalid") Log In
 
   section.social
     p ------------ Or Log in With ------------
@@ -41,7 +41,7 @@
         p Twitter
 
 .join-topcoder
-  span Not a member yet? 
-  p.redirect
-    a(ui-sref="register(vm.$stateParams)") Join now
+  span Not a member yet?
+
+  a.tc-btn.tc-btn-ghost-secondary.tc-btn-s(ui-sref="register(vm.$stateParams)") Join now
 
diff --git a/app/account/register/register.jade b/app/account/register/register.jade
index f61a304df..2a1bbfa48 100644
--- a/app/account/register/register.jade
+++ b/app/account/register/register.jade
@@ -96,7 +96,7 @@
     section.terms
       p By clicking "Join," you agree to Topcoder's #[a(href="http://www.topcoder.com/community/how-it-works/terms/", target="_blank") Terms of Service] and #[a(href="http://www.topcoder.com/community/how-it-works/privacy-policy/", target="_blank") Privacy Policy]
 
-    button(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid", ng-class="{'enabled-button': vm.registerForm.$valid}") Join
+    button.tc-btn.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.registering", ng-disabled="vm.registerForm.$invalid") Join
 
   section.social
     p ------------ Or Register With ------------
@@ -114,5 +114,5 @@
 
 .join-topcoder
   span Already a member?
-  p.redirect
-    a(ui-sref="login(vm.$stateParams)") Log in
+
+  a.tc-btn.tc-btn-ghost-secondary.tc-btn-s(ui-sref="login(vm.$stateParams)") Log in
diff --git a/app/directives/challenge-tile/challenge-tile.directive.jade b/app/directives/challenge-tile/challenge-tile.directive.jade
index 99c3ec869..ef6af85d1 100644
--- a/app/directives/challenge-tile/challenge-tile.directive.jade
+++ b/app/directives/challenge-tile/challenge-tile.directive.jade
@@ -18,7 +18,7 @@
       .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.
 
       .phase-action(ng-switch="challenge.userAction")
-        .submit(ng-switch-when="Submit") Submit
+        a.tc-btn.tc-btn-s.tc-btn-wide.submit(ng-switch-when="Submit") Submit
 
         .submitted(ng-switch-when="Submitted") Submitted
 
@@ -105,7 +105,7 @@
         p.ends-in(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.
 
       .phase-action(ng-switch="challenge.userAction")
-        .submit(ng-switch-when="Submit") Submit
+        a.tc-btn.tc-btn-s.tc-btn-wide.submit(ng-switch-when="Submit") Submit
 
         .submitted(ng-switch-when="Submitted") Submitted
 
diff --git a/app/directives/distribution-graph/distribution-graph.directive.jade b/app/directives/distribution-graph/distribution-graph.directive.jade
index f2c65ade2..450c7d92c 100644
--- a/app/directives/distribution-graph/distribution-graph.directive.jade
+++ b/app/directives/distribution-graph/distribution-graph.directive.jade
@@ -10,6 +10,6 @@
       .coders(ng-if="!displayCoders", style="background: {{rating | ratingColor}}")
         .num {{rating}}
         .label RATING
-      button.compare(ng-click="graphState.show = 'history'")
+      button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'history'")
         | BACK TO YOUR RATING
 
diff --git a/app/directives/history-graph/history-graph.directive.jade b/app/directives/history-graph/history-graph.directive.jade
index acc747b98..eaeb33fd7 100644
--- a/app/directives/history-graph/history-graph.directive.jade
+++ b/app/directives/history-graph/history-graph.directive.jade
@@ -12,4 +12,4 @@
       .history-info
         .challenge(ng-if="historyRating") {{historyChallenge}}
         .date(ng-if="historyRating") {{historyDate | date}}
-      button.compare(ng-click="graphState.show = 'distribution'") COMMUNITY RATINGS
+      button.tc-btn.tc-btn-s.compare(ng-click="graphState.show = 'distribution'") COMMUNITY RATINGS
diff --git a/app/directives/ios-card/ios-card.directive.jade b/app/directives/ios-card/ios-card.directive.jade
index 63589088a..6790b0b9b 100644
--- a/app/directives/ios-card/ios-card.directive.jade
+++ b/app/directives/ios-card/ios-card.directive.jade
@@ -14,9 +14,9 @@
       p.ends-in Ends In
       p.time-remaining {{challenge.userCurrentPhaseEndTime[0]}}
       p.unit-of-time {{challenge.userCurrentPhaseEndTime[1]}}
-      
+
     .stalled-challenge(ng-hide="challenge.userCurrentPhaseEndTime") This challenge is currently paused.
-      
+
     p.prize-money(ng-show="challenge.reviewType === 'PEER'") Peer Review Challenge
 
     p.prize-money(ng-hide="challenge.reviewType === 'PEER'") {{challenge.totalCheckpointPrize || 0 | currency:undefined:0}}
diff --git a/app/directives/profile-widget/profile-widget.jade b/app/directives/profile-widget/profile-widget.jade
index 051b8a10f..7919740e4 100644
--- a/app/directives/profile-widget/profile-widget.jade
+++ b/app/directives/profile-widget/profile-widget.jade
@@ -15,7 +15,7 @@
 
     p.description {{profile.description}}
 
-    button.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile
+    a.tc-btn.tc-btn-s.edit(ng-show="editProfileLink", ui-sref="settings.profile") Edit Profile
 
   .tracks-links
     .tracks
@@ -27,7 +27,7 @@
     hr
 
     .links
-      a.forums.link(ng-href="http://forums.{{DOMAIN}}/?module=History&userID={{profileVm.profile.userId}}")
+      a.tc-btn.tc-btn-secondary.tc-btn-s.forums.link(ng-href="http://forums.{{DOMAIN}}/?module=History&userID={{profileVm.profile.userId}}")
         | Forum Posts
-      button.badges.link(ng-click="profileVm.showBadges()")
+      button.tc-btn.tc-btn-secondary.tc-btn-s.badges.link(ng-click="profileVm.showBadges()")
         | Badges
diff --git a/app/directives/srm-tile/srm-tile.directive.jade b/app/directives/srm-tile/srm-tile.directive.jade
index fc364ece2..2ba2a464d 100644
--- a/app/directives/srm-tile/srm-tile.directive.jade
+++ b/app/directives/srm-tile/srm-tile.directive.jade
@@ -19,7 +19,7 @@
         i.fa.fa-check-circle-o
         p You are registered!
       .unregistered(ng-hide="vm.registered")
-        button.srm-action Register
+        button.tc-btn.tc-btn-s.tc-btn-wide.srm-action Register
 
   .past-srm(ng-show="srm.status === 'PAST'")
     .challenge-track
@@ -54,7 +54,7 @@
         i.fa.fa-check-circle-o
         p You are registered!
       .unregistered(ng-hide="vm.registered")
-        button.srm-action Register
+        button.tc-btn.tc-btn-s.tc-btn-wide.srm-action Register
 
   .past-srm(ng-show="srm.status === 'PAST'")
     .challenge-track
diff --git a/app/my-dashboard/community-updates/community-updates.jade b/app/my-dashboard/community-updates/community-updates.jade
index a6c2e35ee..d5a5c3500 100644
--- a/app/my-dashboard/community-updates/community-updates.jade
+++ b/app/my-dashboard/community-updates/community-updates.jade
@@ -11,4 +11,4 @@ header
     .description(ng-bind-html="blog.description")
 
 .blog-links(ng-hide="vm.loading")
-  a(ng-href="https://www.{{DOMAIN}}/blog/") View More
+  a.tc-btn.tc-btn-s.tc-btn-secondary(ng-href="https://www.{{DOMAIN}}/blog/") View More
diff --git a/app/my-dashboard/my-challenges/my-challenges.jade b/app/my-dashboard/my-challenges/my-challenges.jade
index 23c43b833..fc80180f7 100644
--- a/app/my-dashboard/my-challenges/my-challenges.jade
+++ b/app/my-dashboard/my-challenges/my-challenges.jade
@@ -31,9 +31,9 @@ section.noChallenges(ng-if="!vm.userHasChallenges && !vm.loading")
   p.info Compete in challenges to win money, test yourself against the world's best, and learn new skills
 
   .info-links
-    a(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
+    a.tc-btn.tc-btn-l(ng-href="https://www.{{DOMAIN}}/challenges/?pageIndex=1") Find Challenges
 
-    a(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
+    a.tc-btn.tc-btn-ghost.tc-btn-l(href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
 
 section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ 'list-view-active': vm.challengeView === 'list' }")
   .section-titles(ng-show="vm.challengeView === 'list'")
@@ -46,6 +46,6 @@ section.hasChallenges(ng-if="vm.userHasChallenges && !vm.loading", ng-class="{ '
     challenge-tile(ng-repeat="challenge in vm.myChallenges | orderBy:registrationEndDate:true", challenge="challenge", view="vm.challengeView", ng-class="vm.challengeView + '-view'")
 
 .my-challenges-links(id="viewAllChallenges", ng-if="vm.userHasChallenges && !vm.loading")
-  a(ui-sref="my-challenges({status: 'active'})") View All Active Challenges
+  a.tc-btn.tc-btn-s.tc-btn-secondary(ui-sref="my-challenges({status: 'active'})") View All Active Challenges
 
-  a(ui-sref="my-challenges({status: 'completed'})") View All Past Challenges
+  a.tc-btn.tc-btn-s.tc-btn-secondary(ui-sref="my-challenges({status: 'completed'})") View All Past Challenges
diff --git a/app/my-dashboard/programs/programs.jade b/app/my-dashboard/programs/programs.jade
index e7f3ddaba..c4b6fb445 100644
--- a/app/my-dashboard/programs/programs.jade
+++ b/app/my-dashboard/programs/programs.jade
@@ -15,9 +15,9 @@ section.ios(ng-hide="vm.loading")
       p Experienced and proven iOS developers are in high-demand. Prove your skills by earning these iOS topcoder badges and gain exclusive access to iOS challenges and prize accelerators, special previews into content and releases, and special community-related events and info.
 
       .info-links
-        a(ng-click="vm.registerUser()") Participate
+        a.tc-btn(ng-click="vm.registerUser()") Participate
 
-        a(ng-href="https://ios.{{DOMAIN}}", target="_blank") Learn More
+        a.tc-btn.tc-btn-ghost(ng-href="https://ios.{{DOMAIN}}", target="_blank") Learn More
 
   .registered(ng-show="vm.registered")
     .badge-and-challenges
@@ -28,6 +28,6 @@ section.ios(ng-hide="vm.loading")
           .badge-timeline
             img(src="/images/member-program/svg/Member-06.svg", alt="Development Challenge Icon")
 
-          a(href="http://ios.{{vm.domain}}", title="topcoder iOS Member Program") View Challenges
+          a.tc-btn.tc-btn-s.tc-btn-ghost.tc-btn-wide(href="http://ios.{{vm.domain}}", title="topcoder iOS Member Program") View Challenges
 
       ios-card(ng-repeat="challenge in vm.challenges | orderBy:reviewType:true| orderBy:registrationEndDate:true", challenge="challenge", view="'tile'")
diff --git a/app/my-dashboard/srms/srms.jade b/app/my-dashboard/srms/srms.jade
index 188cfe4cf..d112c44d1 100644
--- a/app/my-dashboard/srms/srms.jade
+++ b/app/my-dashboard/srms/srms.jade
@@ -12,13 +12,13 @@ section(ng-hide="vm.loading")
       .flex-wrapper
         h2 Practice on past problems
 
-        a(ng-href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives
+        a.tc-btn.tc-btn-s.tc-btn-wide(ng-href="https://community.{{DOMAIN}}/tc?module=ProblemArchive") Problem Archives
 
-        a(ng-href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials
+        a.tc-btn.tc-btn-s.tc-btn-wide(ng-href="https://community.{{DOMAIN}}/wiki/display/tc/Algorithm+Problem+Set+Analysis") Match Editorials
 
-        a(ng-href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
+        a.tc-btn.tc-btn-s.tc-btn-wide(ng-href="https://www.{{DOMAIN}}/community/getting-started/") Learn More
 
 .srms-links(ng-hide="vm.loading")
-  a(ui-sref="my-srms") View Past SRMs
+  a.tc-btn.tc-btn-s.tc-btn-secondary(ui-sref="my-srms") View Past SRMs
 
-  a(ng-href="https://arena.{{DOMAIN}}") Launch Arena
+  a.tc-btn.tc-btn-s.tc-btn-secondary(ng-href="https://arena.{{DOMAIN}}") Launch Arena
diff --git a/app/profile/about/about.jade b/app/profile/about/about.jade
index 96e597cbb..853d59f2f 100644
--- a/app/profile/about/about.jade
+++ b/app/profile/about/about.jade
@@ -12,8 +12,8 @@
       .skill(ng-repeat="skill in vm.skills")
         skill-tile(skill="skill")
 
-    button.more(ng-if="vm.skills.length < vm.fullSkills.length", ng-click="vm.skills = vm.fullSkills") VIEW ALL
-    button.more(ng-if="vm.skills.length > 6", ng-click="vm.skills = vm.someSkills") VIEW LESS
+    button.tc-btn.tc-btn-secondary.tc-btn-l.more(ng-if="vm.skills.length < vm.fullSkills.length", ng-click="vm.skills = vm.fullSkills") VIEW ALL
+    button.tc-btn.tc-btn-secondary.tc-btn-l.more(ng-if="vm.skills.length > 6", ng-click="vm.skills = vm.someSkills") VIEW LESS
 
     .empty-state(ng-show="!profileVm.skills || (profileVm.skills && profileVm.skills.length == 0)")
       .action-text Tell everyone what you know
@@ -24,7 +24,7 @@
 
       .description You can add languages, environments, frameworks, libraries, platforms, tools, and any other technologies that you know well.
 
-      button.link-button(ui-sref="settings.profile") ADD SKILLS
+      button.tc-btn.tc-btn-l.link-button(ui-sref="settings.profile") ADD SKILLS
 
   tc-section(ng-show="vm.displaySection.stats", state="profileVm.status.stats")
 
@@ -40,7 +40,7 @@
               div
             .text {{track | track}}
         .description Compete in challenges to win money, test yourself against the world's best, and learn new skills. Your performance rating will show up here.
-        a.link-button(href="/challenges") FIND CHALLENGES
+        a.tc-btn.tc-btn-l.link-button(href="/challenges") FIND CHALLENGES
 
       .track(
         ng-repeat="track in profileVm.profile.tracks",
@@ -96,4 +96,4 @@
 
       .description Show off your work and experience outside of Topcoder. Connect accounts from popular services and networks or add a link to any site.
 
-      button.link-button(ui-sref="settings.profile") CONNECT ACCOUNTS
+      button.tc-btn.tc-btn-l.link-button(ui-sref="settings.profile") CONNECT ACCOUNTS
diff --git a/app/settings/account-info/account-info.jade b/app/settings/account-info/account-info.jade
index f3f9982ba..0eae9a722 100644
--- a/app/settings/account-info/account-info.jade
+++ b/app/settings/account-info/account-info.jade
@@ -38,7 +38,7 @@
               p(ng-class="{ 'has-symbol-or-number': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.hasSymbolOrNumber) }") At least one number or symbol
 
           .button-container
-            button.button-l.save(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.newPasswordForm", ng-disabled="vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine", ng-class="{'disabled': vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine}") Change Password
+            button.tc-btn.tc-btn-secondary.tc-btn-l.save(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.newPasswordForm", ng-disabled="vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine", ng-class="{'disabled': vm.newPasswordForm.$invalid || vm.newPasswordForm.$pristine}") Change Password
 
 
       div(ng-show="vm.isSocialRegistration")
@@ -82,13 +82,13 @@
             .form-input-error(ng-show="vm.accountInfoForm.lastname.$invalid")
               p(ng-show="vm.accountInfoForm.lastname.$error.required") This is a required field.
 
-    
+
     .settings-section.address
       .section-info
         h2  address
         .description Required for payments and in case we need to mail you something. Will be kept private and not shared with anyone.
 
-      .section-fields          
+      .section-fields
           .form-label.address Address
           input.form-field(
             name="address", type="text",
@@ -98,7 +98,7 @@
             ng-class="{'form-field-focused': hasFocus==true}"
           )
 
-          .form-label Address 2 
+          .form-label Address 2
             span(style="text-transform: none;") &nbsp;(opt., suite, etc.)
           input.form-field(
             name="address2",
@@ -155,4 +155,4 @@
 
 
           .button-container
-            button.button-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid}") Save
+            button.tc-btn.tc-btn-secondary.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.formProcessing.accountInfoForm", ng-disabled="vm.accountInfoForm.$invalid", ng-class="{'enabled-button': vm.accountInfoForm.$valid}") Save
diff --git a/app/settings/edit-profile/edit-profile.jade b/app/settings/edit-profile/edit-profile.jade
index 54dec611b..c7b152e5f 100644
--- a/app/settings/edit-profile/edit-profile.jade
+++ b/app/settings/edit-profile/edit-profile.jade
@@ -49,7 +49,7 @@
       .section-fields
         track-toggle(tracks="vm.tracks")
 
-        button(type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': vm.editProfile.$pristine || vm.editProfile.$invalid}") Save
+        button.tc-btn.tc-btn-secondary.tc-btn-l(type="submit", tc-busy-button, tc-busy-when="vm.profileFormProcessing" ng-disabled="vm.editProfile.$invalid || vm.editProfile.$pristine", ng-class="{' ': vm.editProfile.$valid, 'disabled': vm.editProfile.$pristine || vm.editProfile.$invalid}") Save
 
   .settings-section.skills
     .section-info
diff --git a/app/skill-picker/skill-picker.jade b/app/skill-picker/skill-picker.jade
index 3630af143..69ba06607 100644
--- a/app/skill-picker/skill-picker.jade
+++ b/app/skill-picker/skill-picker.jade
@@ -23,7 +23,6 @@
             .icon 
               img(ng-src="{{vm.ASSET_PREFIX}}images/skills/id-{{tag.id}}.svg", fallback-src="/images/skills/id-design.svg")
             .name {{tag.name}}
-          
 
     .skills-section(ng-show="vm.tracks.DEVELOP")
       .track-title select development skills
@@ -48,8 +47,8 @@
             .name {{tag.name}}
 
 
-  button.button-l(
-    type="button", 
+  button.tc-btn.tc-btn-l.done-button(
+    type="button",
     tc-busy-button, tc-busy-when="vm.saving",
     ng-click="vm.submitSkills()",
     ng-class="{'enabled-button': vm.tracks.design || vm.tracks.develop || vm.tracks.data_science}") Done
diff --git a/assets/css/account/account.scss b/assets/css/account/account.scss
index b648635a2..5db7a7ab6 100644
--- a/assets/css/account/account.scss
+++ b/assets/css/account/account.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .login-container, .register-container, .reset-password-container, .registered-successfully-container {
@@ -63,26 +64,17 @@
   }
 
   .tips {
-    left: 380px;  
+    left: 380px;
   }
 
   .email-tips {
-    left: 380px;  
+    left: 380px;
   }
 
   button {
-    @include ui-submit-button;
     width: 180px;
-    border-radius: 4px;
     align-self: center;
-
-    &.enabled-button {
-      @include ui-enabled-button;
-    }
-
-    &[disabled] {
-      @include ui-disabled-button;
-    }
+    text-transform: uppercase;
   }
 
   // Form stylings
diff --git a/assets/css/account/login.scss b/assets/css/account/login.scss
index b49a2719a..a0dc088f6 100644
--- a/assets/css/account/login.scss
+++ b/assets/css/account/login.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .login-container {
diff --git a/assets/css/account/register.scss b/assets/css/account/register.scss
index 161b356e2..399f0d8eb 100644
--- a/assets/css/account/register.scss
+++ b/assets/css/account/register.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .register-container {
@@ -114,35 +115,18 @@
     align-items: center;
   }
 
-  .redirect {
-    border: 1px solid #D1D3D4;
-    background-color: white;
-    border-radius : 4px;
-    width: 66px;/* TODO as per design it should be 63px*/
-    height: 30px;
+  a {
     margin-left: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     @include sofia-pro-light;
-    text-transform: uppercase;
     font-size: 12px;
-    line-height: 14px;
+    text-transform: uppercase;
     padding: 8px 12px;
-
-    a {
-      text-decoration: none;
-    @include sofia-pro-light;
-    }
   }
 }
 
 @media (max-width: 767px) {
-
   .register-container {
-
     form {
-
       .first-last-names {
         display: flex;
         flex-direction: column;
diff --git a/assets/css/account/registered-successfully.scss b/assets/css/account/registered-successfully.scss
index ec75c4245..1de96f4c6 100644
--- a/assets/css/account/registered-successfully.scss
+++ b/assets/css/account/registered-successfully.scss
@@ -1,11 +1,12 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .registered-successfully-container {
-	p.message {   
+	p.message {
     font-size: 20px;
     line-height: 30px;
     @include source-sans-light;
     color: #3D3D3D;
     padding: 62px 90px 154px 90px;
   }
-}
\ No newline at end of file
+}
diff --git a/assets/css/account/reset-password.scss b/assets/css/account/reset-password.scss
index 029a3d419..7e5739901 100644
--- a/assets/css/account/reset-password.scss
+++ b/assets/css/account/reset-password.scss
@@ -1,7 +1,8 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .reset-password-container {
-  
+
   form {
     display: flex;
     flex-flow: column wrap;
diff --git a/assets/css/directives/challenge-tile.scss b/assets/css/directives/challenge-tile.scss
index 0b85e83a1..6c1c41116 100644
--- a/assets/css/directives/challenge-tile.scss
+++ b/assets/css/directives/challenge-tile.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 // Default Challenge Tile Stylings
@@ -108,7 +109,7 @@ challenge-tile .challenge.tile-view {
 
       .submit {
         margin-bottom: 25px;
-        @include button-m-wide;
+        display: inline-block;
       }
 
       .submitted {
@@ -629,7 +630,6 @@ challenge-tile .challenge.list-view {
     .phase-action {
       .submit {
         display: inline-block;
-        @include button-m;
       }
 
       .submitted {
diff --git a/assets/css/directives/distribution-graph.scss b/assets/css/directives/distribution-graph.scss
index adc507834..ceaea2afd 100644
--- a/assets/css/directives/distribution-graph.scss
+++ b/assets/css/directives/distribution-graph.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .distribution-graph-directive {
@@ -8,7 +9,6 @@
   .compare {
     margin-top: 100px;
     margin-bottom: 15px;
-    @include button-1-m;
   }
 
 }
diff --git a/assets/css/directives/external-account.scss b/assets/css/directives/external-account.scss
index 881b84110..232a95cf2 100644
--- a/assets/css/directives/external-account.scss
+++ b/assets/css/directives/external-account.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .ext-tile {
@@ -66,7 +67,7 @@
       line-height: 13px;
       text-align: center;
       text-transform: uppercase;
-      color: $system-gray;
+      color: $accent-gray;
     }
   }
 
diff --git a/assets/css/directives/external-link-data.scss b/assets/css/directives/external-link-data.scss
index d51815c97..c7133f11c 100644
--- a/assets/css/directives/external-link-data.scss
+++ b/assets/css/directives/external-link-data.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 external-accounts {
diff --git a/assets/css/directives/history-graph.scss b/assets/css/directives/history-graph.scss
index 48ba5a425..ce3d9d3c4 100644
--- a/assets/css/directives/history-graph.scss
+++ b/assets/css/directives/history-graph.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .history-graph-directive {
@@ -8,7 +9,6 @@
   .compare {
     margin-top: 5px;
     margin-bottom: 15px;
-    @include button-1-m;
   }
 }
 .history-graph-container {
diff --git a/assets/css/directives/input-sticky-placeholder.scss b/assets/css/directives/input-sticky-placeholder.scss
index 5fea02661..4c54b8a10 100644
--- a/assets/css/directives/input-sticky-placeholder.scss
+++ b/assets/css/directives/input-sticky-placeholder.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .input-sticky-placeholder-container {
@@ -11,6 +12,6 @@
     font-size: 10px;
     line-height: 40px;
     text-transform: uppercase;
-    color: $system-gray;
+    color: $accent-gray;
   }
 }
diff --git a/assets/css/directives/ios-card.scss b/assets/css/directives/ios-card.scss
index e9f59c8b9..a2d0296c2 100644
--- a/assets/css/directives/ios-card.scss
+++ b/assets/css/directives/ios-card.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 // Default Challenge Tile Stylings
@@ -115,7 +116,6 @@ ios-card .challenge.tile-view {
 
   .phase-action {
     margin-bottom: 25px;
-    @include button-m-wide;
   }
 
   .roles {
diff --git a/assets/css/directives/profile-widget.scss b/assets/css/directives/profile-widget.scss
index aedbb53b6..6a3af1df8 100644
--- a/assets/css/directives/profile-widget.scss
+++ b/assets/css/directives/profile-widget.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .profile-widget-directive {
@@ -62,10 +63,10 @@
     text-align: center;
   }
 
-  button.edit {
-    @include button-1-m;
+  .edit {
     width: 200px;
     margin-top: 10px;
+    text-align: center;
   }
 
   .tracks-links {
@@ -108,78 +109,73 @@
       align-items: center;
       justify-content: flex-end;
       .link {
-        @include button-2-m;
         text-decoration: none;
         text-transform: uppercase;
         margin-left: 5px;
         margin-right: 5px;
       }
     }
-
-
   }
 }
 @media (min-width: 768px) {
-
-.profile-widget-directive {
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: flex-start;
-  img.profile-circle {
-    margin-top: 10px;
-    width: 180px;
-    height: 180px;
-  }
-  .info {
-    margin-left: 15px;
-    display: flex;
-    flex-direction: column;
-    flex-grow: 2;
-
-    h1.handle {
-      margin: 0;
-      text-align: left;
-      font-size: 46px;
-      line-height: 56px;
+  .profile-widget-directive {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-start;
+    img.profile-circle {
+      margin-top: 10px;
+      width: 180px;
+      height: 180px;
     }
+    .info {
+      margin-left: 15px;
+      display: flex;
+      flex-direction: column;
+      flex-grow: 2;
+
+      h1.handle {
+        margin: 0;
+        text-align: left;
+        font-size: 46px;
+        line-height: 56px;
+      }
 
-    h3.tenure {
-      margin-top: 3px;
-      text-align: left;
-    }
+      h3.tenure {
+        margin-top: 3px;
+        text-align: left;
+      }
 
-    h3.location-challenges {
-      margin-top: 36px;
-      text-align: left;
-    }
+      h3.location-challenges {
+        margin-top: 36px;
+        text-align: left;
+      }
 
-    p.description {
-      margin-top: 12px;
-      max-width: 600px;
-      text-align: left;
-    }
+      p.description {
+        margin-top: 12px;
+        max-width: 600px;
+        text-align: left;
+      }
 
-  }
-  .tracks-links {
-    margin-top: -2.1px;
-    .tracks {
-      .track {
-        img {
-          height: 44px;
-        }
-        .text {
-          margin-top: 8px;
+    }
+    .tracks-links {
+      margin-top: -2.1px;
+      .tracks {
+        .track {
+          img {
+            height: 44px;
+          }
+          .text {
+            margin-top: 8px;
+          }
         }
       }
-    }
-    hr {
-      margin-bottom: 0;
-    }
+      hr {
+        margin-bottom: 0;
+      }
 
-    .links {
-      margin-top: 20px;
+      .links {
+        margin-top: 20px;
+      }
     }
   }
 }
-
-}
diff --git a/assets/css/directives/skill-tile.scss b/assets/css/directives/skill-tile.scss
index ad1cc0227..18432a8d1 100644
--- a/assets/css/directives/skill-tile.scss
+++ b/assets/css/directives/skill-tile.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 skill-tile {
@@ -13,8 +14,6 @@ skill-tile {
     width: 100px;
   }
 
-
-
   .new {
     .skill-icon {
       background-color: #F2FAFF;
@@ -23,7 +22,12 @@ skill-tile {
     }
   }
 
+  a:hover {
+      text-decoration: none;
+  }
+
   a.hidden {
+
     img {
       opacity: .3;
     }
@@ -34,7 +38,7 @@ skill-tile {
 
     .name {
       text-decoration: line-through;
-      color: $system-gray;
+      color: $accent-gray;
     }
   }
 
diff --git a/assets/css/directives/srm-tile.scss b/assets/css/directives/srm-tile.scss
index 8cbe6acd6..f0f083bf0 100644
--- a/assets/css/directives/srm-tile.scss
+++ b/assets/css/directives/srm-tile.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .srm.tile-view {
@@ -192,7 +193,6 @@
   .srm-action {
     margin-top: 22px;
     margin-bottom: 40px;
-    @include button-m-wide;
   }
 
   .phase-status {
@@ -356,10 +356,6 @@
     }
   }
 
-  .srm-action {
-    @include button-m-wide;
-  }
-
   .phase-status {
     flex : 1;
     display: flex;
diff --git a/assets/css/directives/tc-paginator.scss b/assets/css/directives/tc-paginator.scss
index 707aaa3a9..abd575f30 100644
--- a/assets/css/directives/tc-paginator.scss
+++ b/assets/css/directives/tc-paginator.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 
diff --git a/assets/css/directives/tc-section.scss b/assets/css/directives/tc-section.scss
index b4d66e993..cd82362cb 100644
--- a/assets/css/directives/tc-section.scss
+++ b/assets/css/directives/tc-section.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .tc-section {
@@ -6,6 +7,6 @@
   .section-loading {
     width: 100%;
     min-height: 100px;
-    background: $loading no-repeat center center;
+    background: url(/images/ripple.gif) no-repeat center center;
   }
 }
diff --git a/assets/css/directives/toggle-password-with-tips.scss b/assets/css/directives/toggle-password-with-tips.scss
index 205a97460..100051cb4 100644
--- a/assets/css/directives/toggle-password-with-tips.scss
+++ b/assets/css/directives/toggle-password-with-tips.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 // Toggle password with password tips directive
diff --git a/assets/css/directives/toggle-password.scss b/assets/css/directives/toggle-password.scss
index 4b88c835e..a886cfdb5 100644
--- a/assets/css/directives/toggle-password.scss
+++ b/assets/css/directives/toggle-password.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 // Toggle password directive
diff --git a/assets/css/directives/track-toggle.scss b/assets/css/directives/track-toggle.scss
index 88a23298b..500797cce 100644
--- a/assets/css/directives/track-toggle.scss
+++ b/assets/css/directives/track-toggle.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 track-toggle {
@@ -111,13 +112,13 @@ track-toggle {
   right: 20px;
   border: none;
   border-radius: 12px;
-  transition: all 0.3s ease-in 0s; 
+  transition: all 0.3s ease-in 0s;
 }
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
   margin-left: 0;
 }
 .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
-  right: 0px; 
+  right: 0px;
 }
 
 
diff --git a/assets/css/layout/footer.scss b/assets/css/layout/footer.scss
index defb32cf5..6d7df085c 100644
--- a/assets/css/layout/footer.scss
+++ b/assets/css/layout/footer.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .bottom-footer {
diff --git a/assets/css/layout/header.scss b/assets/css/layout/header.scss
index b5888fa12..4b0086daf 100644
--- a/assets/css/layout/header.scss
+++ b/assets/css/layout/header.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 #header {
@@ -188,7 +189,7 @@
     padding-left: 10px;
     vertical-align: middle;
   }
-  
+
   .menu-item-header {
     text-transform: none;
   }
@@ -215,6 +216,14 @@
   cursor: pointer;
 }
 
+.menu-text {
+  color: $white;
+
+  &:hover {
+    color: $white;
+  }
+}
+
 @media only screen and (max-width : 991px) {
   .header-wrapper {
     // When autocomplete list is displayed, hide all menu items and footer (except copyright notice)
@@ -263,7 +272,7 @@
 
     &.active {
       background-color: rgba(0, 150, 255, 0.2);
-      border-left: 5px solid #0096ff;
+      border-left: 5px solid $primary;
       color: #fff;
       margin: 0 -20px;
         padding-left: 15px;
@@ -369,7 +378,8 @@
     }
 
     .menu-link:hover {
-      background-color: #0096ff;
+      background-color: $primary;
+      text-decoration: none;
     }
 
     .menu-link.active {
@@ -379,7 +389,7 @@
     .menu-item:not(.anonymous-menu):hover .menu-item-header {
       position: relative;
       cursor: pointer;
-      color: #0096ff;
+      color: $primary;
 
       &:after {
         content: '';
diff --git a/assets/css/my-challenges/my-challenges.scss b/assets/css/my-challenges/my-challenges.scss
index 4cd179535..e7c03738b 100644
--- a/assets/css/my-challenges/my-challenges.scss
+++ b/assets/css/my-challenges/my-challenges.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .my-challenges-container {
@@ -8,7 +9,7 @@
   .section-loading {
     width: 100%;
     height: 50px;
-    background: $loading no-repeat center center;
+    background: url(/images/ripple.gif) no-repeat center center;
   }
 
   .section-title {
@@ -75,13 +76,13 @@
 
         .my-challenges {
           display: block;
-          color: $accent-color;
+          color: $primary;
           font-weight: 700;
           text-align: center;
           text-transform: uppercase;
           @media (min-width: 768px) {
             display: block;
-            color: $accent-color;
+            color: $primary;
             font-weight: 700;
             text-align: center;
             text-transform: uppercase;
diff --git a/assets/css/my-dashboard/community-updates.scss b/assets/css/my-dashboard/community-updates.scss
index 151091e2b..11b6f7751 100644
--- a/assets/css/my-dashboard/community-updates.scss
+++ b/assets/css/my-dashboard/community-updates.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .community-updates {
@@ -94,11 +95,15 @@
         a {
           display: block;
           margin-top: 25px;
-          color: $primary-color;
+          color: $primary;
           text-decoration: none;
           @media only screen and (min-width: 1132px) {
             margin-top: 0;
           }
+
+          &:hover {
+            text-decoration: underline;
+          }
         }
       }
     }
@@ -106,10 +111,5 @@
 
   .blog-links {
     @include module-links;
-
-    a {
-      @include button-m;
-      @include button-secondary;
-    }
   }
 }
diff --git a/assets/css/my-dashboard/header-dashboard.scss b/assets/css/my-dashboard/header-dashboard.scss
index db76997fe..4db4c4a18 100644
--- a/assets/css/my-dashboard/header-dashboard.scss
+++ b/assets/css/my-dashboard/header-dashboard.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .header-dashboard {
diff --git a/assets/css/my-dashboard/my-challenges.scss b/assets/css/my-dashboard/my-challenges.scss
index 649be86ab..5fc6141a2 100644
--- a/assets/css/my-dashboard/my-challenges.scss
+++ b/assets/css/my-dashboard/my-challenges.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .my-challenges {
@@ -51,7 +52,6 @@
       &.list:before {
         background: url(/images/ico-list.svg);
       }
-
     }
   }
 
@@ -144,7 +144,6 @@
       a {
         display: block;
         margin: 30px auto;
-        @include button-l;
         text-decoration: none;
         @media only screen and (min-width: 768px) {
           display: inline-block;
@@ -152,13 +151,19 @@
           margin-bottom: 40px;
         }
         @media only screen and (min-width: 900px) {
-          @include button-xl;
+          height: 60px;
           margin-top: 30px;
           margin-bottom: 90px;
+          padding: 0 30px;
+          line-height: 60px;
+          font-size: 24px;
+
+          &:active {
+            line-height: 62px;
+          }
         }
 
         &:last-child {
-          @include button-ghost;
           @media only screen and (min-width: 768px) {
             margin-left: 30px;
           }
@@ -290,16 +295,11 @@
       padding: 15px 0;
     }
 
-    a {
-      @include button-m;
-      @include button-secondary;
-
-      &:not(:first-child) {
-        margin-left: 10px;
-        @media only screen and (max-width: 767px) {
-          margin-top: 10px;
-          margin-left: 0;
-        }
+    a:not(:first-child) {
+      margin-left: 10px;
+      @media only screen and (max-width: 767px) {
+        margin-top: 10px;
+        margin-left: 0;
       }
     }
   }
diff --git a/assets/css/my-dashboard/my-dashboard.scss b/assets/css/my-dashboard/my-dashboard.scss
index 7c7ca3eca..8b17313b9 100644
--- a/assets/css/my-dashboard/my-dashboard.scss
+++ b/assets/css/my-dashboard/my-dashboard.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .my-dashboard-container {
diff --git a/assets/css/my-dashboard/programs.scss b/assets/css/my-dashboard/programs.scss
index 92ef8f5e2..dab7f4c93 100644
--- a/assets/css/my-dashboard/programs.scss
+++ b/assets/css/my-dashboard/programs.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .programs {
@@ -99,7 +100,6 @@
 
     .info-links {
       a {
-        @include button-m;
         display: inline-block;
         margin-top: 30px;
         font-size: 13px;
@@ -111,7 +111,6 @@
         }
 
         &:last-child {
-          @include button-ghost;
           margin-left: 30px;
         }
       }
@@ -175,8 +174,6 @@
       a {
         display: block;
         margin-top: 37px;
-        @include button-m-wide;
-        @include button-ghost;
         text-decoration: none;
       }
     }
diff --git a/assets/css/my-dashboard/srms.scss b/assets/css/my-dashboard/srms.scss
index 9c963fee5..04b85dc9e 100644
--- a/assets/css/my-dashboard/srms.scss
+++ b/assets/css/my-dashboard/srms.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .srms {
@@ -106,8 +107,6 @@
 
         a {
           margin-bottom: 21px;
-          @include button-m-wide;
-          text-decoration: none;
         }
       }
     }
@@ -116,13 +115,8 @@
   .srms-links {
     @include module-links;
 
-    a {
-      @include button-m;
-      @include button-secondary;
-
-      &:not(:first-child) {
-        margin-left: 10px;
-      }
+    a:not(:first-child) {
+      margin-left: 10px;
     }
   }
 }
diff --git a/assets/css/my-dashboard/subtrack-stats.scss b/assets/css/my-dashboard/subtrack-stats.scss
index 1210d5507..e1f580ab4 100644
--- a/assets/css/my-dashboard/subtrack-stats.scss
+++ b/assets/css/my-dashboard/subtrack-stats.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .subtrack-stats {
@@ -73,7 +74,7 @@
         p {
           @include sofia-pro-regular;
           font-size: 12px;
-          color: $system-gray;
+          color: $accent-gray;
 
           &:last-child {
             text-transform: uppercase;
diff --git a/assets/css/my-srms/my-srms.scss b/assets/css/my-srms/my-srms.scss
index 316710dee..bc702277a 100644
--- a/assets/css/my-srms/my-srms.scss
+++ b/assets/css/my-srms/my-srms.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .my-srms-container {
@@ -13,7 +14,7 @@
   .section-loading {
     width: 100%;
     height: 50px;
-    background: $loading no-repeat center center;
+    background: url(/images/ripple.gif) no-repeat center center;
   }
 
   .section-title {
@@ -53,7 +54,7 @@
       }
       .my-srms {
         display: block;
-        color: $accent-color;
+        color: $primary;
         font-weight: 700;
         text-align: center;
         text-transform: uppercase;
@@ -147,7 +148,7 @@
         }
       }
 
-      
+
       .data {
         display: flex;
         flex-flow: row wrap;
@@ -169,7 +170,7 @@
         display: inline;
         margin-bottom: 15px;
         &.tile-view {
-          
+
           margin-bottom: 20px;
           @media only screen and (max-width: 767px) {
             display: inline-block;
@@ -230,7 +231,7 @@
         }
         .my-srms {
           display: block;
-          color: $accent-color;
+          color: $primary;
           font-weight: 700;
           text-align: center;
           text-transform: uppercase;
diff --git a/assets/css/partials/_combined.scss b/assets/css/partials/_combined.scss
index 72fa6f9ab..180c72fa7 100644
--- a/assets/css/partials/_combined.scss
+++ b/assets/css/partials/_combined.scss
@@ -1,5 +1,2 @@
-@import 'colors';
-@import 'mixins';
-@import 'fonts';
-@import 'urls';
-@import 'functions';
\ No newline at end of file
+@import 'tc-colors';
+@import 'tc-mixins';
diff --git a/assets/css/partials/_fonts.scss b/assets/css/partials/_fonts.scss
deleted file mode 100644
index f6f7e82d8..000000000
--- a/assets/css/partials/_fonts.scss
+++ /dev/null
@@ -1,217 +0,0 @@
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-black-webfont.eot');
-  src: url('/fonts/sofiapro-black-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-black-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-black-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-black-webfont.svg#webfont') format('svg');
-  font-weight: 800;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-black-italic-webfont.eot');
-  src: url('/fonts/sofiapro-black-italic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-black-italic-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-black-italic-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-black-italic-webfont.svg#webfont') format('svg');
-  font-weight: 800;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-bold-webfont.eot');
-  src: url('/fonts/sofiapro-bold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-bold-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-bold-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-bold-webfont.svg#webfont') format('svg');
-  font-weight: bold;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-bold-italic-webfont.eot');
-  src: url('/fonts/sofiapro-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-bold-italic-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-bold-italic-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-bold-italic-webfont.svg#webfont') format('svg');
-  font-weight: bold;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-semibold-webfont.eot');
-  src: url('/fonts/sofiapro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-semibold-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-semibold-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-semibold-webfont.svg#webfont') format('svg');
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-semibold-italic-webfont.eot');
-  src: url('/fonts/sofiapro-semibold-italic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-semibold-italic-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-semibold-italic-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-semibold-italic-webfont.svg#webfont') format('svg');
-  font-weight: 600;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-medium-webfont.eot');
-  src: url('/fonts/sofiapro-medium-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-medium-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-medium-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-medium-webfont.svg#webfont') format('svg');
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-medium-italic.eot');
-  src: url('/fonts/sofiapro-medium-italic.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-medium-italic.woff') format('woff'),
-       url('/fonts/sofiapro-medium-italic.ttf') format('truetype'),
-       url('/fonts/sofiapro-medium-italic.svg#webfont') format('svg');
-  font-style: italic;
-  font-weight: 500;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-regular-webfont.eot');
-  src: url('/fonts/sofiapro-regular-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-regular-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-regular-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-regular-webfont.svg#webfont') format('svg');
-  font-weight: 400;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-regular-webfont.eot');
-  src: url('/fonts/sofiapro-regular-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-regular-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-regular-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-regular-webfont.svg#webfont') format('svg');
-  font-weight: 400;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-light-webfont.eot');
-  src: url('/fonts/sofiapro-light-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-light-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-light-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-light-webfont.svg#webfont') format('svg');
-  font-weight: 300;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-light-italic-webfont.eot');
-  src: url('/fonts/sofiapro-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-light-italic-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-light-italic-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-light-italic-webfont.svg#webfont') format('svg');
-  font-weight: 300;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-extralight-webfont.eot');
-  src: url('/fonts/sofiapro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-extralight-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-extralight-webfont.svg#webfont') format('svg');
-  font-weight: 200;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-extralight-italic-webfont.eot');
-  src: url('/fonts/sofiapro-extralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-extralight-italic-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-extralight-italic-webfont.svg#webfont') format('svg');
-  font-weight: 200;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-ultralight-webfont.eot');
-  src: url('/fonts/sofiapro-ultralight-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-ultralight-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-ultralight-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-ultralight-webfont.svg#webfont') format('svg');
-  font-weight: 100;
-}
-
-@font-face {
-  font-family: 'Sofia Pro';
-  src: url('/fonts/sofiapro-ultralight-italic-webfont.eot');
-  src: url('/fonts/sofiapro-ultralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/sofiapro-ultralight-italic-webfont.woff') format('woff'),
-       url('/fonts/sofiapro-ultralight-italic-webfont.ttf') format('truetype'),
-       url('/fonts/sofiapro-ultralight-italic-webfont.svg#webfont') format('svg');
-  font-weight: 100;
-  font-style: italic;
-}
-
-/**********     SOURCE SANS PRO     **********/
-@font-face {
-  font-family: 'Source Sans Pro';
-  src: url('/fonts/SourceSansPro-Light-webfont.eot');
-  src: url('/fonts/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/SourceSansPro-Light-webfont.woff') format('woff'),
-       url('/fonts/SourceSansPro-Light-webfont.ttf') format('truetype'),
-       url('/fonts/SourceSansPro-Light-webfont.svg#webfont') format('svg');
-  font-weight: 300;
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  src: url('/fonts/SourceSansPro-Regular-webfont.eot');
-  src: url('/fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/SourceSansPro-Regular-webfont.woff') format('woff'),
-       url('/fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'),
-       url('/fonts/SourceSansPro-Regular-webfont.svg#webfont') format('svg');
-  font-weight: normal;
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  src: url('/fonts/SourceSansPro-It-webfont.eot');
-  src: url('/fonts/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/SourceSansPro-It-webfont.woff') format('woff'),
-       url('/fonts/SourceSansPro-It-webfont.ttf') format('truetype'),
-       url('/fonts/SourceSansPro-It-webfont.svg#webfont') format('svg');
-  font-weight: normal;
-  font-style: italic;
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  src: url('/fonts/SourceSansPro-Semibold-webfont.eot');
-  src: url('/fonts/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/SourceSansPro-Semibold-webfont.woff') format('woff'),
-       url('/fonts/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
-       url('/fonts/SourceSansPro-Semibold-webfont.svg#webfont') format('svg');
-  font-weight: 600;
-}
-
-@font-face {
-  font-family: 'Source Sans Pro';
-  src: url('/fonts/SourceSansPro-Bold-webfont.eot');
-  src: url('/fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
-       url('/fonts/SourceSansPro-Bold-webfont.woff') format('woff'),
-       url('/fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),
-       url('/fonts/SourceSansPro-Bold-webfont.svg#webfont') format('svg');
-  font-weight: 700;
-}
diff --git a/assets/css/partials/_functions.scss b/assets/css/partials/_functions.scss
deleted file mode 100644
index 49651f6d5..000000000
--- a/assets/css/partials/_functions.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-@function url($path) {
-  $prefix: '' !default;
-  @return unquote('url(' + unquote($prefix) + unquote($path) + ')');
-}
\ No newline at end of file
diff --git a/assets/css/partials/_colors.scss b/assets/css/partials/_tc-colors.scss
similarity index 54%
rename from assets/css/partials/_colors.scss
rename to assets/css/partials/_tc-colors.scss
index 668651470..f12800889 100644
--- a/assets/css/partials/_colors.scss
+++ b/assets/css/partials/_tc-colors.scss
@@ -22,41 +22,6 @@ $dark-blue  : #0096ff;
 $review-blue: #0071bc;
 $login-blue : #26A9E0;
 
-// UI REFRESH COLORS
-$primary-color: #00aeff;
-$accent-color: #21B2F1;
-$success-color: #99cc00;
-$danger-color: #ff0066;
-$warning-color: #DAD714;
-
-$accent: #0096FF;
-$error: #F31D3D;
-$success: #5BC921;
-
-$level-5: #EF3A3A;
-$level-4: #FCB816;
-$level-3: #616BD5;
-$level-2: #69C329;
-$level-1: #9D9FA0;
-
-$design: #21B2F1;
-$data_science: #FC9A00;
-$develop: #05C14F;
-$copilot: #7D939E;
-
-$system-dark-gray: #394146;
-$system-gray: #A3A3AE;
-
-$white: #fff;
-$black: #000;
-$gray-darkest: #3D3D3D;
-$gray-darker: #7F7F7F;
-$gray-dark: #B7B7B7;
-$gray: #D1D3D4;
-$gray-light: #F0F0F0;
-$gray-lighter: #F6F6F6;
-$gray-lightest: #FCFCFC;
-
 // Refactor and get rid of these:
 $ui-page-gray: #f1f2f2;
 
diff --git a/assets/css/partials/_mixins.scss b/assets/css/partials/_tc-mixins.scss
similarity index 59%
rename from assets/css/partials/_mixins.scss
rename to assets/css/partials/_tc-mixins.scss
index 4e12b54c2..1f7ff4f26 100644
--- a/assets/css/partials/_mixins.scss
+++ b/assets/css/partials/_tc-mixins.scss
@@ -136,201 +136,6 @@
   }
 }
 
-@mixin button-s($background: $primary-color) {
-  height: 20px;
-  line-height: 20px;
-  padding: 0 8px;
-  border: none;
-  border-radius: 3px;
-  color: $white;
-  background-color: $background;
-  @include sofia-pro-regular;
-  font-size: 11px;
-  text-transform: uppercase;
-  text-decoration: none;
-  text-align: center;
-  cursor: pointer;
-  outline: 0;
-}
-
-@mixin button-m($background: $primary-color) {
-  @include button-s($background);
-  height: 30px;
-  line-height: 30px;
-  padding: 0 15px;
-  font-size: 14px;
-  border-radius: 4px;
-}
-
-@mixin button-l($background: $primary-color) {
-  @include button-s($background);
-  height: 50px;
-  line-height: 50px;
-  padding: 0 15px;
-  @include sofia-pro-bold;
-  font-size: 18px;
-  border-radius: 4px;
-}
-
-@mixin button-xl($background: $primary-color) {
-  @include button-s($background);
-  height: 60px;
-  line-height: 60px;
-  padding: 0 15px;
-  @include sofia-pro-bold;
-  font-size: 24px;
-  border-radius: 4px;
-}
-
-@mixin button-m-wide($background: $primary-color) {
-  @include button-m($background);
-  padding: 0 30px;
-}
-
-@mixin button-secondary {
-  background-color: #D1D3D4;
-}
-
-@mixin button-ghost {
-  background-color: $white;
-  color: $primary-color;
-  border: 1px solid $primary-color;
-}
-
-@mixin button-1($disabled: #b2e7fe, $normal: #1eaefc, $hover: #199ae2, $active: #1792d7) {
-  @include button-s;
-  background-color: $normal;
-  &:hover {
-    background-color: $hover;
-  }
-  &:active {
-    background-color: $active;
-  }
-  &.disabled {
-    background-color: $disabled;
-    cursor: default;
-  }
-}
-
-@mixin button-1-m {
-  @include button-1;
-  @include button-m(#1eaefc);
-}
-
-@mixin button-1-m-wide {
-  @include button-1;
-  @include button-m-wide(#1eaefc);
-}
-
-@mixin button-1-l {
-  @include button-1;
-  @include button-l(#1eaefc);
-}
-
-@mixin button-1-xl {
-  @include button-1;
-  @include button-xl(#1eaefc);
-}
-
-@mixin button-2 {
-  @include button-1(#edeeee, #d1d3d4, #1eaefc)
-}
-
-@mixin button-2-m {
-  @include button-2;
-  @include button-m(#d1d3d4);
-}
-
-@mixin button-2-m-wide {
-  @include button-2;
-  @include button-m-wide(#d1d3d4);
-}
-
-@mixin button-2-l {
-  @include button-2;
-  @include button-l(#d1d3d4);
-}
-
-@mixin button-2-xl {
-  @include button-2;
-  @include button-xl(#d1d3d4);
-}
-
-@mixin button-border($disabled, $normal, $hover, $hover-fill: white, $fill: $normal) {
-  background-color: white;
-  color: $fill;
-  border: 1px solid $normal;
-  &:hover {
-    border: 1px solid $hover;
-    color: $hover-fill;
-  }
-  &:active {
-    color: white;
-  }
-  &.disabled {
-    border: 1px solid $disabled;
-    cursor: default;
-  }
-}
-
-@mixin button-3 {
-  @include button-1(white, white, #1eaefc, #1893d8);
-  @include button-border(#dedede, #1eaefc, #1eaefc);
-}
-
-@mixin button-3-m {
-  @include button-3;
-  @include button-m(#edeeee);
-  @include button-border(#dedede, #1eaefc, #1eaefc);
-}
-
-@mixin button-3-m-wide {
-  @include button-3;
-  @include button-m-wide(#edeeee);
-  @include button-border(#dedede, #1eaefc, #1eaefc);
-}
-
-@mixin button-3-l {
-  @include button-3;
-  @include button-l(white);
-  @include button-border(#dedede, #1eaefc, #1eaefc);
-}
-
-@mixin button-3-xl {
-  @include button-3;
-  @include button-xl(#edeeee);
-  @include button-border(#dedede, #1eaefc, #1eaefc);
-}
-
-@mixin button-4 {
-  @include button-1(white, white, white, #1893d8);
-  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
-}
-
-@mixin button-4-m {
-  @include button-4;
-  @include button-m(#edeeee);
-  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
-}
-
-@mixin button-4-m-wide {
-  @include button-4;
-  @include button-m-wide(#edeeee);
-  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
-}
-
-@mixin button-4-l {
-  @include button-4;
-  @include button-l(#edeeee);
-  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
-}
-
-@mixin button-4-xl {
-  @include button-4;
-  @include button-xl(#edeeee);
-  @include button-border(#dedede, #dedede, #1eaefc, #1eaefc, #83d7fc);
-}
-
 @mixin module-s {
   margin-top: 6px;
   background-color: $white;
diff --git a/assets/css/partials/_urls.scss b/assets/css/partials/_urls.scss
deleted file mode 100644
index 007254030..000000000
--- a/assets/css/partials/_urls.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-
-
-$checkbox: url(/images/check-box.png);
-$community-background: url(/images/community-background.png);
-$loading: url(/images/ripple.gif);
-$sort-arrows: url(/images/sort-arrows.png);
diff --git a/assets/css/peer-review/completed.scss b/assets/css/peer-review/completed.scss
index ff8474dc8..aa5c907b4 100644
--- a/assets/css/peer-review/completed.scss
+++ b/assets/css/peer-review/completed.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .completed-review-container {
diff --git a/assets/css/peer-review/edit.scss b/assets/css/peer-review/edit.scss
index cd133e668..cf293c9a2 100644
--- a/assets/css/peer-review/edit.scss
+++ b/assets/css/peer-review/edit.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .edit-review-container {
diff --git a/assets/css/peer-review/peer-review.scss b/assets/css/peer-review/peer-review.scss
index 1bc5e796a..ccc46a60e 100644
--- a/assets/css/peer-review/peer-review.scss
+++ b/assets/css/peer-review/peer-review.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 @include glyphicons-halflings;
 
diff --git a/assets/css/peer-review/readOnlyScorecard.scss b/assets/css/peer-review/readOnlyScorecard.scss
index 0f657d6af..78e3515ca 100644
--- a/assets/css/peer-review/readOnlyScorecard.scss
+++ b/assets/css/peer-review/readOnlyScorecard.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .read-only-scorecard-container {
diff --git a/assets/css/peer-review/reviewStatus.scss b/assets/css/peer-review/reviewStatus.scss
index 089ed340b..9c00491d6 100644
--- a/assets/css/peer-review/reviewStatus.scss
+++ b/assets/css/peer-review/reviewStatus.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .review-status-container {
diff --git a/assets/css/profile/about.scss b/assets/css/profile/about.scss
index 21040df92..a77e29117 100644
--- a/assets/css/profile/about.scss
+++ b/assets/css/profile/about.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 .profile-about-container {
   margin-top: 20px;
@@ -7,7 +8,6 @@
   .empty-state {
     a.link-button {
       margin-top: 20px;
-      @include button-1-l;
     }
   }
 
@@ -29,6 +29,7 @@
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
+
     .track {
       margin-top: 22.4px;
       display: flex;
@@ -37,8 +38,6 @@
       cursor: pointer;
 
       .name {
-        span {
-        }
         margin: auto;
         font-family: 'Sofia Pro';
         font-weight: 200;
@@ -157,7 +156,6 @@
         width: 60%;
       }
       button.link-button {
-        @include button-1-l;
         margin-top: 20px;
       }
       padding-bottom: 40px;
@@ -192,10 +190,9 @@
       margin-top: 20px;
       margin-left: auto;
       margin-right: auto;
-      @include button-2-l;
     }
+
     .list {
-      
       display: flex;
       flex-direction: row;
       justify-content: center;
@@ -209,7 +206,6 @@
       .skill {
         margin: 5px 7.5px;
       }
-
     }
     .empty-state {
       width: 100%;
@@ -230,7 +226,6 @@
         line-height: 22px;
       }
       button.link-button {
-        @include button-1-l;
         margin-top: 30px;
       }
       .list {
@@ -281,7 +276,6 @@
         width: 60%;
       }
       button.link-button {
-        @include button-1-l;
         margin-top: 20px;
       }
       .external-account-container {
@@ -305,7 +299,7 @@
     font-family: 'Sofia Pro';
     text-transform: uppercase;
   }
-    
+
   .categories {
     padding-bottom: 90px;
     .activity {
@@ -386,7 +380,6 @@
         margin-right: auto;
       }
       button.link-button {
-        @include button-1-l;
         margin-top: 30px;
       }
       .list {
@@ -441,7 +434,6 @@
         margin-right: auto;
       }
       button.link-button {
-        @include button-1-l;
         margin-top: 30px;
       }
       .list {
@@ -520,7 +512,6 @@
       margin-right: auto;
     }
     button.link-button {
-      @include button-1-l;
       margin-top: 30px;
     }
     .list {
@@ -530,7 +521,7 @@
       padding: 10px;
       margin: 20px auto;
     }
-  } 
+  }
   }
 
 
diff --git a/assets/css/profile/badges.scss b/assets/css/profile/badges.scss
index b0a1686a0..2f0b5819d 100644
--- a/assets/css/profile/badges.scss
+++ b/assets/css/profile/badges.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .ngdialog.ngdialog-theme-default {
@@ -21,7 +22,7 @@
       span {
         display: inline;
         &.title {
-          color: $primary-color;
+          color: $primary;
           font-weight: bold;
         }
       }
@@ -32,7 +33,7 @@
         margin-bottom: -5px;
         margin-right: 13px;
       }
- 
+
     }
 
     .badges {
diff --git a/assets/css/profile/header.scss b/assets/css/profile/header.scss
index 46efac79d..8ad00c715 100644
--- a/assets/css/profile/header.scss
+++ b/assets/css/profile/header.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .profile-container {
diff --git a/assets/css/profile/subtrack.scss b/assets/css/profile/subtrack.scss
index b2acc8f9b..3a21c7b84 100644
--- a/assets/css/profile/subtrack.scss
+++ b/assets/css/profile/subtrack.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .profile-subtrack-container {
@@ -41,7 +42,7 @@
           text-decoration: none;
           color: black;
           &:hover {
-            color: $accent-color;
+            color: $primary;
           }
         }
       }
@@ -53,7 +54,7 @@
       }
       .subtrack {
         display: block;
-        color: $accent-color;
+        color: $primary;
         font-weight: 700;
         text-align: center;
         text-transform: uppercase;
@@ -152,7 +153,7 @@
         padding: 14px;
         border-bottom: 1px solid #f6f6f6;
         .right {
-          color: $accent-color;
+          color: $primary;
         }
         &.first {
           border-top: 1px solid #f6f6f6;
@@ -519,6 +520,7 @@
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
+
   .track {
     margin-top: 22.4px;
     display: flex;
@@ -618,38 +620,5 @@
       height: 80px;
       margin: auto;
     }
-
-  }
-  .empty-state {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    .action-text {
-      margin-top: 32px;
-      font-family: 'Sofia Pro';
-      font-size: 18px;
-      line-height: 24px;
-      font-weight: 200;
-    }
-    .tracks {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
-      width: 50%;
-      .track {
-      }
-    }
-    .description {
-      margin-top: 50px;
-      font-family: 'Source Sans Pro';
-      font-size: 15px;
-      line-height: 22px;
-      width: 60%;
-    }
-    button.link-button {
-      @include button-1-l;
-      margin-top: 20px;
-    }
-    padding-bottom: 40px;
   }
 }
diff --git a/assets/css/settings/account-info.scss b/assets/css/settings/account-info.scss
index 7eea0f9e5..4cf1db0ad 100644
--- a/assets/css/settings/account-info.scss
+++ b/assets/css/settings/account-info.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .account-info-container {
@@ -20,7 +21,6 @@
       .button-container {
         button.save {
           margin-top: 20px;
-          @include button-2-l;
         }
       }
     }
@@ -54,9 +54,6 @@
         justify-content: center;
         width: 100%;
         margin-top: 30px;
-        button {
-          @include button-2-l;
-        }
       }
     }
   }
diff --git a/assets/css/settings/edit-profile.scss b/assets/css/settings/edit-profile.scss
index 3b87ff722..4e422911b 100644
--- a/assets/css/settings/edit-profile.scss
+++ b/assets/css/settings/edit-profile.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .edit-profile-container {
diff --git a/assets/css/settings/preferences.scss b/assets/css/settings/preferences.scss
index 6b3ee3d9c..8869cc1c9 100644
--- a/assets/css/settings/preferences.scss
+++ b/assets/css/settings/preferences.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .preferences-container {
diff --git a/assets/css/settings/settings.scss b/assets/css/settings/settings.scss
index def0730fd..e01fb643e 100644
--- a/assets/css/settings/settings.scss
+++ b/assets/css/settings/settings.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 .settings-header {
   @include module-full-width;
@@ -92,10 +93,6 @@
   }
 
   // Common element stylings
-  .button-l {
-    @include button-l;
-  }
-
   @include ui-form-placeholder;
   input:not([type="checkbox"]) {
     @include ui-form-field;
@@ -210,7 +207,6 @@
     }
 
     button {
-      @include button-2-l;
       margin-bottom: 20px;
       align-self: center;
       margin-top: 20px;
diff --git a/assets/css/settings/update-password.scss b/assets/css/settings/update-password.scss
index 06bc8133a..8d1206bac 100644
--- a/assets/css/settings/update-password.scss
+++ b/assets/css/settings/update-password.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .update-password-container {
diff --git a/assets/css/skill-picker/skill-picker.scss b/assets/css/skill-picker/skill-picker.scss
index 5b9a5c0c1..81c697858 100644
--- a/assets/css/skill-picker/skill-picker.scss
+++ b/assets/css/skill-picker/skill-picker.scss
@@ -1,3 +1,4 @@
+@import 'topcoder-includes';
 @import '../partials/combined';
 
 .skill-picker-container {
@@ -143,8 +144,7 @@
     font-size: 15px;
     padding: 5px 0px;
   }
-  .button-l{
+  .done-button{
     margin: 30px;
-    @include button-l;
   }
 }
diff --git a/assets/css/topcoder.scss b/assets/css/topcoder.scss
index 6cfa037fc..d7e24194a 100644
--- a/assets/css/topcoder.scss
+++ b/assets/css/topcoder.scss
@@ -1,22 +1,14 @@
 @import 'partials/combined';
+@import 'topcoder-styles';
 @include glyphicons-halflings;
 
-// Resets and top level container stylings
-html {
-  min-height: 100%;
-  height: 100%;
-  box-sizing: border-box;
-}
-
-*, *:before, *:after {
-  margin: 0;
-  box-sizing: inherit;
-}
-
 body {
   @include source-sans-regular;
   background-color: $ui-page-gray;
-  height: 100%;
+
+  > svg {
+    display: none;
+  }
 }
 
 .fold-wrapper {
@@ -59,11 +51,6 @@ body {
   }
 }
 
-// Styles for elements used across modules
-a {
-  cursor: pointer;
-}
-
 // Country dropdown styles
 .angucomplete-highlight {
   color: $black;
@@ -75,12 +62,11 @@ a {
   max-height: 250px;
 }
 
-
 // Section loading and form styles
 .section-loading {
   width: 100%;
   min-height: 50px;
-  background: $loading no-repeat center center;
+  background: url(/images/ripple.gif) no-repeat center center;
 }
 
 .form-errors {
@@ -215,6 +201,223 @@ a {
   }
 }
 
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-black-webfont.eot');
+  src: url('/fonts/sofiapro-black-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-black-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-black-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-black-webfont.svg#webfont') format('svg');
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-black-italic-webfont.eot');
+  src: url('/fonts/sofiapro-black-italic-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-black-italic-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-black-italic-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-black-italic-webfont.svg#webfont') format('svg');
+  font-weight: 800;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-bold-webfont.eot');
+  src: url('/fonts/sofiapro-bold-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-bold-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-bold-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-bold-webfont.svg#webfont') format('svg');
+  font-weight: bold;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-bold-italic-webfont.eot');
+  src: url('/fonts/sofiapro-bold-italic-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-bold-italic-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-bold-italic-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-bold-italic-webfont.svg#webfont') format('svg');
+  font-weight: bold;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-semibold-webfont.eot');
+  src: url('/fonts/sofiapro-semibold-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-semibold-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-semibold-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-semibold-webfont.svg#webfont') format('svg');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-semibold-italic-webfont.eot');
+  src: url('/fonts/sofiapro-semibold-italic-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-semibold-italic-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-semibold-italic-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-semibold-italic-webfont.svg#webfont') format('svg');
+  font-weight: 600;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-medium-webfont.eot');
+  src: url('/fonts/sofiapro-medium-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-medium-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-medium-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-medium-webfont.svg#webfont') format('svg');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-medium-italic.eot');
+  src: url('/fonts/sofiapro-medium-italic.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-medium-italic.woff') format('woff'),
+       url('/fonts/sofiapro-medium-italic.ttf') format('truetype'),
+       url('/fonts/sofiapro-medium-italic.svg#webfont') format('svg');
+  font-style: italic;
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-regular-webfont.eot');
+  src: url('/fonts/sofiapro-regular-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-regular-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-regular-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-regular-webfont.svg#webfont') format('svg');
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-regular-webfont.eot');
+  src: url('/fonts/sofiapro-regular-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-regular-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-regular-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-regular-webfont.svg#webfont') format('svg');
+  font-weight: 400;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-light-webfont.eot');
+  src: url('/fonts/sofiapro-light-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-light-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-light-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-light-webfont.svg#webfont') format('svg');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-light-italic-webfont.eot');
+  src: url('/fonts/sofiapro-light-italic-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-light-italic-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-light-italic-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-light-italic-webfont.svg#webfont') format('svg');
+  font-weight: 300;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-extralight-webfont.eot');
+  src: url('/fonts/sofiapro-extralight-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-extralight-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-extralight-webfont.svg#webfont') format('svg');
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-extralight-italic-webfont.eot');
+  src: url('/fonts/sofiapro-extralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-extralight-italic-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-extralight-italic-webfont.svg#webfont') format('svg');
+  font-weight: 200;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-ultralight-webfont.eot');
+  src: url('/fonts/sofiapro-ultralight-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-ultralight-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-ultralight-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-ultralight-webfont.svg#webfont') format('svg');
+  font-weight: 100;
+}
+
+@font-face {
+  font-family: 'Sofia Pro';
+  src: url('/fonts/sofiapro-ultralight-italic-webfont.eot');
+  src: url('/fonts/sofiapro-ultralight-italic-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/sofiapro-ultralight-italic-webfont.woff') format('woff'),
+       url('/fonts/sofiapro-ultralight-italic-webfont.ttf') format('truetype'),
+       url('/fonts/sofiapro-ultralight-italic-webfont.svg#webfont') format('svg');
+  font-weight: 100;
+  font-style: italic;
+}
+
+/**********     SOURCE SANS PRO     **********/
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Light-webfont.eot');
+  src: url('/fonts/SourceSansPro-Light-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-Light-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-Light-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-Light-webfont.svg#webfont') format('svg');
+  font-weight: 300;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Regular-webfont.eot');
+  src: url('/fonts/SourceSansPro-Regular-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-Regular-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-Regular-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-Regular-webfont.svg#webfont') format('svg');
+  font-weight: normal;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-It-webfont.eot');
+  src: url('/fonts/SourceSansPro-It-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-It-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-It-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-It-webfont.svg#webfont') format('svg');
+  font-weight: normal;
+  font-style: italic;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Semibold-webfont.eot');
+  src: url('/fonts/SourceSansPro-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-Semibold-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-Semibold-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-Semibold-webfont.svg#webfont') format('svg');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Source Sans Pro';
+  src: url('/fonts/SourceSansPro-Bold-webfont.eot');
+  src: url('/fonts/SourceSansPro-Bold-webfont.eot?#iefix') format('embedded-opentype'),
+       url('/fonts/SourceSansPro-Bold-webfont.woff') format('woff'),
+       url('/fonts/SourceSansPro-Bold-webfont.ttf') format('truetype'),
+       url('/fonts/SourceSansPro-Bold-webfont.svg#webfont') format('svg');
+  font-weight: 700;
+}
 
 // Intro JS
 .introjs-overlay {
@@ -248,7 +451,7 @@ a {
   padding: 0;
   line-height: 22px;
   border: 3px solid $white;
-  background: $accent;
+  background: $primary;
   @include sofia-pro-medium;
   font-size: 17px;
   box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.20);
@@ -261,15 +464,25 @@ a {
 
 // Refactor buttons when button mixins and/or style guide is done
 .introjs-button {
-  @include button-m;
+  height: 30px;
   padding: 0 10px;
+  line-height: 30px;
+  border: none;
+  border-radius: 4px;
   background-color: $gray;
   background-image: none;
+  @include sofia-pro-regular;
+  font-size: 14px;
+  text-transform: uppercase;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  outline: 0;
   color: $white;
   text-shadow: none;
 
   &:hover {
-    background-color: $accent;
+    background-color: $primary;
     color: $white;
     box-shadow: none;
   }
@@ -311,6 +524,6 @@ a {
   background-color: $gray;
 
   &.active {
-    background-color: $accent;
+    background-color: $primary;
   }
 }
diff --git a/gulpfile.js b/gulpfile.js
index 3b5fec019..25834f759 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -2,6 +2,7 @@ var gulp         = require('gulp');
 var args         = require('yargs').argv;
 var config       = require('./gulp.config')();
 var del          = require('del'); // rm -rf
+var fs           = require('fs');
 var $            = require('gulp-load-plugins')({lazy: true});
 var browserSync  = require('browser-sync');
 var histFallback = require('connect-history-api-fallback');
@@ -49,7 +50,7 @@ gulp.task('styles', ['clean-styles'], function() {
   return gulp
     .src(config.sass, {base: './'})
     .pipe($.plumber())
-    .pipe($.sass())
+    .pipe($.sass({includePaths: [require('tc-ui-kit').includePaths]}))
     .pipe($.autoprefixer({browsers: ['last 2 version']}))
     .pipe($.replace(/\/fonts/g, assetPrefix + 'fonts'))
     .pipe(gulp.dest(config.temp));
diff --git a/package.json b/package.json
index 13835c9ed..f0db0f65a 100644
--- a/package.json
+++ b/package.json
@@ -50,11 +50,13 @@
     "gulp-plumber": "^1.0.1",
     "gulp-print": "^1.1.0",
     "gulp-replace": "^0.5.3",
+    "gulp-replace-task": "^0.11.0",
     "gulp-rev": "^5.0.1",
     "gulp-rev-all": "0.8.18",
     "gulp-rev-replace": "^0.4.2",
     "gulp-sass": "^2.0.1",
     "gulp-sourcemaps": "^1.5.2",
+    "gulp-svg-sprite": "^1.2.11",
     "gulp-task-listing": "^1.0.1",
     "gulp-uglify": "^1.2.0",
     "gulp-useref": "^1.2.0",
@@ -80,5 +82,8 @@
     "sinon-chai": "^2.8.0",
     "wiredep": "^2.2.2",
     "yargs": "^3.12.0"
+  },
+  "dependencies": {
+    "tc-ui-kit": "0.0.x"
   }
 }