Studio: refactoring font-weight CSS rules to use Sass placeholders

2014-08-11 22:16:39 -04:00
parent 41425a4647
commit f8ec92949f
34 changed files with 624 additions and 625 deletions
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -30,7 +30,7 @@ a {

 h1 {
  @extend %t-title4;
-  font-weight: 300;
+  @extend %t-light;
 }

 .waiting {
@@ -52,23 +52,23 @@ h1 {
 // typography - basic
 .page-header {
  @extend %t-title3;
+  @extend %t-strong;
  display: block;
-  font-weight: 600;
  color: $gray-d3;

  .navigation, .subtitle {
    @extend %t-title7;
+    @extend %t-regular;
    position: relative;
    top: ($baseline/4);
    display: block;
    color: $gray-l2;
-    font-weight: 400;
  }
 }

 .section-header {
  @extend %t-title4;
-  font-weight: 600;
+  @extend %t-strong;

  .subtitle {
    @extend %t-title7;
@@ -77,7 +77,7 @@ h1 {

 .area-header {
  @extend %t-title6;
-  font-weight: 600;
+  @extend %t-strong;

  .subtitle {
    @extend %t-title8;
@@ -86,7 +86,7 @@ h1 {

 .area-subheader {
  @extend %t-title7;
-  font-weight: 600;
+  @extend %t-strong;

  .subtitle {
    @extend %t-title9;
@@ -163,7 +163,7 @@ h1 {

 // typography - loose headings (BT: needs to be removed once html is clean)
 .title-1, .title-2, .title-3, .title-4, .title-5, .title-6 {
-  font-weight: 600;
+  @extend %t-strong;
 }

 // typography - primary content
@@ -214,22 +214,22 @@ h1 {

 .title-4 {
  @extend %t-title7;
+  @extend %t-regular;
  margin-bottom: $baseline;
-  font-weight: 500
 }

 .title-5 {
  @extend %t-title7;
+  @extend %t-regular;
  color: $gray-l1;
  margin-bottom: $baseline;
-  font-weight: 500
 }

 .title-6 {
  @extend %t-title7;
+  @extend %t-regular;
  color: $gray-l2;
  margin-bottom: $baseline;
-  font-weight: 500
 }

 p, ul, ol, dl {
@@ -317,16 +317,16 @@ hr.divide {
  label {
    display: block;
    margin-bottom: 6px;
-    font-weight: 700;
+    @extend %t-strong;

    &.inline-label {
      display: inline;
    }

    .description {
+      @extend %t-regular;
      display: block;
      font-size: 11px;
-      font-weight: 400;
      font-style: italic;
      line-height: 1.3;
      color: #999;
@@ -366,28 +366,28 @@ hr.divide {
  }

  strong {
+    @extend %t-strong;
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
-    font-weight: 700;
    text-align: center;
  }

  .close-button {
+    @extend %t-strong;
    position: absolute;
    top: 0;
    right: 0;
    width: 27px;
    height: 27px;
    font-size: 22px;
-    font-weight: 700;
    line-height: 25px;
    color: #aaa;
    text-align: center;

    .close-icon {
+      @extend %t-strong;
      font-size: 16px;
-      font-weight: 700;
    }
  }

@@ -418,8 +418,8 @@ hr.divide {
  }

  &:after {
-    content: '';
    @extend .spinner-icon;
+    content: '';
    display: block;
    position: absolute;
    top: 50%;
@@ -475,12 +475,12 @@ hr.divide {
 .edit-button.standard,
 .delete-button.standard,
 .duplicate-button.standard {
-  @extend %t-action4;
  @include white-button;
+  @extend %t-regular;
+  @extend %t-action4;
  float: left;
  padding: 3px 10px 4px;
  margin-left: 7px;
-  font-weight: 400;

  .edit-icon,
  .delete-icon,
@@ -499,6 +499,7 @@ hr.divide {
 .tooltip {
  @include font-size(12);
  @include transition(opacity $tmg-f3 ease-out 0s);
+  @extend %t-regular;
  @extend %ui-depth5;
  position: absolute;
  top: 0;
@@ -506,7 +507,6 @@ hr.divide {
  padding: 0 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.85);
-  font-weight: normal;
  line-height: 26px;
  color: $white;
  pointer-events: none;
@@ -635,8 +635,8 @@ body.js {

    .title {
      @extend %t-title5;
+      @extend %t-strong;
      margin: 0 0 ($baseline/2) 0;
-      font-weight: 600;
      color: $gray-d3;
    }

--- a/cms/static/sass/_reset.scss
+++ b/cms/static/sass/_reset.scss
@@ -127,8 +127,8 @@ abbr[title] {
 		margin: 0;
 	}
 	a {
+		@extend %t-regular;
 		float: none;
-		font-weight: normal;
 	}
 }

@@ -152,9 +152,9 @@ abbr[title] {
 		opacity: 0.8;

 		&:ui-state-active {
+			@extend %t-regular;
 			background-color: rgba(255, 255, 255, .3);
 			opacity: 1.0;
-			font-weight: 400;
 		}
 		a:focus {
 			outline: none;
--- a/cms/static/sass/_shame.scss
+++ b/cms/static/sass/_shame.scss
@@ -44,7 +44,7 @@
 // yes we have no boldness today - need to fix the resets
 body strong,
 body b {
-  font-weight: 700;
+  @extend %t-ultrastrong;
 }

 // ====================
--- a/cms/static/sass/assets/_graphics.scss
+++ b/cms/static/sass/assets/_graphics.scss
@@ -156,9 +156,9 @@
 .draft-tag,
 .public-tag,
 .private-tag {
+	@extend %t-strong;
 	margin-left: 3px;
 	font-size: 9px;
-	font-weight: 600;
 	text-transform: uppercase;
 	color: #a4aab7;
 }
--- a/cms/static/sass/elements/_forms.scss
+++ b/cms/static/sass/elements/_forms.scss
@@ -124,7 +124,7 @@ form[class^="create-"] {

  .title {
    @extend %t-title4;
-    font-weight: 600;
+    @extend %t-strong;
    padding: $baseline ($baseline*1.5) 0 ($baseline*1.5);
  }

@@ -146,7 +146,7 @@ form[class^="create-"] {
      &.required {

        label {
-          font-weight: 600;
+          @extend %t-strong;
        }

        label:after {
@@ -308,9 +308,9 @@ form[class^="create-"] {

    .action {
      @include transition(all $tmg-f2 linear 0s);
+      @extend %t-strong;
      display: inline-block;
      padding: ($baseline/5) $baseline;
-      font-weight: 600;
      text-transform: uppercase;
    }

--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -52,9 +52,9 @@

    > ol > .nav-item {
      @extend %t-action3;
+      @extend %t-strong;
      display: inline-block;
      vertical-align: middle;
-      font-weight: 600;

      &:last-child {
        margin-right: 0;
@@ -149,12 +149,12 @@

    .course-title {
      @extend %t-action2;
+      @extend %t-strong;
      display: block;
      width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
-      font-weight: 600;
    }

    // entire link
@@ -311,17 +311,17 @@
      .action-signup {
        @include blue-button;
        @include font-size(14);
+        @extend %t-strong;
        padding: ($baseline/4) ($baseline/2);
        text-transform: uppercase;
-        font-weight: 600;
      }

      .action-signin {
        @include white-button;
        @include font-size(14);
+        @extend %t-strong;
        padding: ($baseline/4) ($baseline/2);
        text-transform: uppercase;
-        font-weight: 600;
      }
    }
  }
--- a/cms/static/sass/elements/_icons.scss
+++ b/cms/static/sass/elements/_icons.scss
@@ -25,11 +25,11 @@

 %ui-badge {
  @extend %t-title9;
+  @extend %t-strong;
  position: relative;
  border-bottom-right-radius: ($baseline/10);
  border-bottom-left-radius: ($baseline/10);
  padding: ($baseline/4) ($baseline/2) ($baseline/4) ($baseline/2);
-  font-weight: 600;
  text-transform: uppercase;

  * [class^="icon-"] {
--- a/cms/static/sass/elements/_layout.scss
+++ b/cms/static/sass/elements/_layout.scss
@@ -178,9 +178,9 @@

    .title-1 {
      @extend %t-title3;
+      @extend %t-strong;
      margin: 0;
      padding: 0;
-      font-weight: 600;
      color: $gray-d3;
    }
  }
--- a/cms/static/sass/elements/_modal-window.scss
+++ b/cms/static/sass/elements/_modal-window.scss
@@ -25,8 +25,8 @@

    .title {
      @extend %t-title5;
+      @extend %t-strong;
      margin: ($baseline/4) ($baseline/2) ($baseline/2) ($baseline/2);
-      font-weight: 600;
      color: $black;
    }

@@ -253,9 +253,9 @@

        label {
          @extend %t-copy-sub1;
+          @extend %t-strong;
          @include transition(color $tmg-f3 ease-in-out 0s);
          margin: 0 0 ($baseline/4) 0;
-          font-weight: 600;

          &.is-focused {
            color: $blue;
@@ -391,11 +391,11 @@

        .component-name {
          @extend %t-title5;
+          @extend %t-strong;
          display: inline-block;
          vertical-align: middle;
          width: 48%;
          margin-left: ($baseline/2);
-          font-weight: 600;
          color: $black;

          em {
@@ -419,12 +419,12 @@
            a.tab {
              @extend %btn-secondary-gray;
              @extend %t-copy-sub1;
+              @extend %t-regular;
              background-image: none;
              box-shadow: none;
              border: 0;
              padding: ($baseline/4) ($baseline/2);
              text-transform: uppercase;
-              font-weight: normal;

              &.current {
                background-color: $gray-d1;
--- a/cms/static/sass/elements/_modal.scss
+++ b/cms/static/sass/elements/_modal.scss
@@ -36,10 +36,10 @@
 	}

 	h2 {
+		@extend %t-light;
 		margin: 0 10px 30px;
 		color: #646464;
 		font-size: 19px;
-		font-weight: 300;
 		letter-spacing: 1px;
 		text-transform: uppercase;
 	}
--- a/cms/static/sass/elements/_modules.scss
+++ b/cms/static/sass/elements/_modules.scss
@@ -11,10 +11,10 @@

  .bar-mod-title {
    @extend %t-title6;
+    @extend %t-strong;
    display: block;
    padding: ($baseline/2) ($baseline*.75);
    background-color: $gray-l4;
-    font-weight: 600;
  }

  .bar-mod-content {
@@ -24,8 +24,8 @@

    .title {
      @extend %t-title8;
+      @extend %t-strong;
      margin-bottom: ($baseline/4);
-      font-weight: 600;
      color: $gray-l2;
      text-transform: uppercase;
    }
@@ -108,9 +108,9 @@

    h5 {
      @extend %t-title5;
+      @extend %t-strong;
      margin-bottom: ($baseline*.75);
      color: $green-d1;
-      font-weight: 600;
    }

    // add component - list of green buttons
@@ -198,12 +198,12 @@
    a {
      @include clearfix();
      @include transition(none);
+      @extend %t-strong;
      display: block;
      border: 0px;
      padding: 7px $baseline;
      background: $white;
      color: $gray-d3;
-      font-weight: 500;


      &:hover {
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -118,11 +118,11 @@ nav {

    .nav-item {
      @extend %t-action3;
+      @extend %t-strong;
      display: block;
      margin: 0 0 ($baseline/4) 0;
      border-bottom: 1px solid $gray-l5;
      padding: 0 0($baseline/4) 0;
-      font-weight: 500;

      &:last-child {
        margin-bottom: 0;
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -8,13 +8,13 @@
 }

 .message-status {
-  display: none;
  @include border-top-radius(2px);
  @include box-sizing(border-box);
+  @extend %t-strong;
+  display: none;
  border-bottom: 2px solid $yellow-d2;
  margin: 0 0 $baseline 0;
  padding: ($baseline/2) $baseline;
-  font-weight: 500;
  background: $yellow-d1;
  color: $white;

@@ -234,7 +234,7 @@

      .action-primary {
        @extend %t-action4;
-        font-weight: 600;
+        @extend %t-strong;
      }

      .action-secondary {
@@ -396,7 +396,7 @@
  min-width: $fg-min-width;

  strong {
-    font-weight: 700;
+    @extend %t-strong;
  }

  [class^="icon"], .copy {
@@ -459,8 +459,8 @@

    .action-primary {
      @include blue-button();
+      @extend %t-strong;
      border-color: $blue-d2;
-      font-weight: 600;
    }

    .action-secondary {
@@ -576,7 +576,7 @@
  color: $white;

  strong {
-    font-weight: 700;
+    @extend %t-strong;
  }

  [class^="icon"], .copy {
@@ -609,37 +609,37 @@
      width: flex-grid(1, 12);
    }

-  	.copy {
-  		width: flex-grid(7, 12);
-  		margin-right: flex-gutter();
-  	}
+    .copy {
+      width: flex-grid(7, 12);
+      margin-right: flex-gutter();
+    }

-  	.nav-actions {
-  	  width: flex-grid(4, 12);
-      float: right;
-      margin-top: ($baseline/2);
-  	  text-align: right;
+    .nav-actions {
+     width: flex-grid(4, 12);
+     float: right;
+     margin-top: ($baseline/2);
+     text-align: right;

-  	  .nav-item {
-  	    display: inline-block;
-  	    vertical-align: middle;
-  	    margin-right: ($baseline/2);
+     .nav-item {
+       display: inline-block;
+       vertical-align: middle;
+       margin-right: ($baseline/2);

-  	    &:last-child {
-  	      margin-right: 0;
-  	    }
+       &:last-child {
+         margin-right: 0;
+       }

-        .action-primary {
-          @extend %t-action4;
-          font-weight: 600;
-        }
+       .action-primary {
+        @extend %t-action4;
+        @extend %t-strong;
+      }

-        .action-secondary {
-          @extend %t-action4;
-        }
-  	  }
-  	}
+      .action-secondary {
+        @extend %t-action4;
+      }
+    }
  }
+}

  // with cancel
  .action-alert-close {
@@ -863,7 +863,7 @@ body.uxdesign.alerts {
    }

    strong {
-      font-weight: 700;
+      @extend %t-strong;
    }

    .alert-action {
@@ -877,38 +877,38 @@ body.uxdesign.alerts {
 }

 body.error {
-	background: $gray-d4;
-	color: $gray-d3;
+  background: $gray-d4;
+  color: $gray-d3;

-	.primary-header {
-		display: none;
-	}
+  .primary-header {
+    display: none;
+  }

-	.error-prompt {
-		width: 700px;
-		margin: 150px auto;
-		padding: 60px 50px 90px;
-		border-radius: 3px;
-		background: $white;
-		text-align: center;
-	}
+  .error-prompt {
+    width: 700px;
+    margin: 150px auto;
+    padding: 60px 50px 90px;
+    border-radius: 3px;
+    background: $white;
+    text-align: center;
+  }

-	h1 {
-		float: none;
-		margin: 0;
-		font-size: 60px;
-		font-weight: 300;
-		color: $gray-d3;
-	}
+  h1 {
+    @extend %t-light;
+    float: none;
+    margin: 0;
+    font-size: 60px;
+    color: $gray-d3;
+  }

-	.description {
-		margin-bottom: 50px;
-		font-size: 21px;
-	}
+  .description {
+    margin-bottom: 50px;
+    font-size: 21px;
+  }

-	.back-button {
-		@include blue-button;
-		padding: 14px 40px 18px;
-		font-size: 18px;
-	}
+  .back-button {
+    @include blue-button;
+    padding: 14px 40px 18px;
+    font-size: 18px;
+  }
 }
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -8,7 +8,7 @@

  .title {
    @extend %t-title4;
-    font-weight: 600;
+    @extend %t-strong;
  }

  .copy {
@@ -16,7 +16,7 @@
  }

  strong {
-    font-weight: 600;
+    @extend %t-strong;
  }

  // CASE: has links alongside
@@ -56,8 +56,8 @@

  .title {
    @extend %t-title6;
+    @extend %t-strong;
    margin-bottom: ($baseline/2);
-    font-weight: 700;
  }

  .copy {
@@ -72,7 +72,7 @@
  }

  strong {
-    font-weight: 600;
+    @extend %t-strong;
  }

  &.has-status {
@@ -230,9 +230,9 @@

  h3, .title {
    @extend %t-title7;
+    @extend %t-strong;
    margin: 0 0 ($baseline/4) 0;
    color: $gray-d2;
-    font-weight: 600;
  }

  p, .copy {
--- a/cms/static/sass/elements/_tender-widget.scss
+++ b/cms/static/sass/elements/_tender-widget.scss
@@ -61,7 +61,7 @@
 }

 .widget-layout h1, .widget-layout h2, .widget-layout h3, .widget-layout h4, .widget-layout h5, .widget-layout h6, .widget-layout label {
-  font-weight: 600;
+  @extend %t-strong;
 }

 .widget-layout .header h1 {
@@ -86,10 +86,10 @@
 }

 .widget-layout label {
+  @extend %t-strong;
  font-size: 14px;
  margin-bottom: 5px;
  color: #4c4c4c;
-  font-weight: 500;
 }

 .widget-layout input[type="text"], .widget-layout textarea {
@@ -177,12 +177,12 @@
 }

 .widget-layout #discussion_body:before {
+  @extend %t-strong;
  content: "What Question or Feedback Would You Like to Share?";
  display: block;
  font-size: 14px;
  margin-bottom: 5px;
  color: #4c4c4c;
-  font-weight: 500;
 }


@@ -203,8 +203,8 @@
 }

 .widget-layout dl#brain_buster_captcha dd label {
+  @extend %t-strong;
  display: block;
-  font-weight: 700;
  margin: 0 15px 5px 0 !important;
 }

@@ -214,11 +214,11 @@
 }

 .widget-layout .form-actions .btn-post_topic {
+  @extend %t-strong;
  display: block;
  width: 100%;
  height: auto !important;
  font-size: 16px;
-  font-weight: 700;
  -webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
  -moz-box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
  box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset,0 0 0 rgba(0,0,0,0);
--- a/cms/static/sass/elements/_xblocks.scss
+++ b/cms/static/sass/elements/_xblocks.scss
@@ -313,11 +313,11 @@
    }

    .xblock-header-primary {
+      @extend %t-light;
      display: flex;
      margin-bottom: 0;
      border-bottom: 1px solid $gray-l4;
      background-color: $gray-l6;
-      font-weight: 300;
    }

    .xblock-render {
@@ -434,10 +434,10 @@
    .upload-setting {
      @extend %ui-btn-flat-outline;
      @extend %t-action3;
+      @extend %t-strong;
      @include box-sizing(border-box);
      display: inline-block;
      padding: ($baseline/2);
-      font-weight: 600;
      width: 49%;
      margin-right: 2%;
    }
@@ -445,10 +445,10 @@
    .download-setting {
      @extend %ui-btn-non;
      @extend %t-action4;
+      @extend %t-strong;
      @include box-sizing(border-box);
      display: inline-block;
      padding: ($baseline/2);
-      font-weight: 600;
      width: 49%;
      text-align: center;
      color: $blue;
@@ -521,8 +521,9 @@
    }

    .setting-label {
-      @extend %t-copy-sub1;
      @include transition(color $tmg-f2 ease-in-out 0s);
+      @extend %t-copy-sub1;
+      @extend %t-strong;
      vertical-align: middle;
      display: inline-block;
      position: relative;
@@ -530,7 +531,6 @@
      width: 25%;
      min-width: 100px;
      margin-right: ($baseline/2);
-      font-weight: 600;

      &.is-focused {
        color: $blue;
@@ -662,10 +662,10 @@
      .create-setting {
        @extend %ui-btn-flat-outline;
        @extend %t-action3;
+        @extend %t-strong;
        display: block;
        width: 100%;
        padding: ($baseline/2);
-        font-weight: 600;

        *[class^="icon-"] {
          margin-right: ($baseline/4);
@@ -733,10 +733,10 @@
      .create-setting {
        @extend %ui-btn-flat-outline;
        @extend %t-action3;
+        @extend %t-strong;
        display: block;
        width: 88%;
        padding: ($baseline/2);
-        font-weight: 600;

        *[class^="icon-"] {
          margin-right: ($baseline/4);
--- a/cms/static/sass/elements/_xmodules.scss
+++ b/cms/static/sass/elements/_xmodules.scss
@@ -52,10 +52,10 @@

        .collapse-setting {
          @extend %t-action3;
+          @extend %t-strong;
          display: block;
          width: 100%;
          padding: ($baseline/2);
-          font-weight: 600;

          *[class^="icon-"] {
            margin-right: ($baseline/4);
@@ -140,8 +140,8 @@
        }

        .transcripts-message-status {
+          @extend %t-strong;
          color: $green;
-          font-weight: 700;

          &.status-error {
            color: $red;
@@ -282,9 +282,9 @@
        .create-setting {
          @extend %ui-btn-flat-outline;
          @extend %t-action3;
+          @extend %t-strong;
          display: block;
          padding: ($baseline/2);
-          font-weight: 600;

          *[class^="icon-"] {
            margin-right: ($baseline/4);
@@ -294,9 +294,9 @@
        .upload-setting {
          @extend %ui-btn-flat-outline;
          @extend %t-action3;
+          @extend %t-strong;
          display: inline-block;
          padding: ($baseline/2);
-          font-weight: 600;
          width: 49%;
          margin-right: 2%;
        }
@@ -304,9 +304,9 @@
        .download-setting {
          @extend %ui-btn-non;
          @extend %t-action4;
+          @extend %t-strong;
          display: inline-block;
          padding: ($baseline/2);
-          font-weight: 600;
          width: 49%;
          text-align: center;
          color: $blue;
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -29,9 +29,9 @@

      h1 {
        @extend %t-title3;
+        @extend %t-strong;
        margin: 0;
        padding: 0;
-        font-weight: 600;
      }

      .action {
@@ -70,13 +70,13 @@
        margin-top: $baseline;

        .action-primary {
-          @include blue-button;
-          @extend %t-action2;
+          @include blue-button();
          @include transition(all $tmg-f3 linear 0s);
+          @extend %t-action2;
+          @extend %t-strong;
          display: block;
          width: 100%;
          padding: ($baseline*0.75) ($baseline/2);
-          font-weight: 600;
          text-transform: uppercase;
        }
      }
@@ -96,7 +96,7 @@
          &.required {

            label {
-              font-weight: 600;
+              @extend %t-strong;
            }

            label:after {
@@ -228,9 +228,9 @@

      h3 {
        @extend %t-title7;
+        @extend %t-strong;
        margin: 0 0 ($baseline/4) 0;
        color: $gray-d2;
-        font-weight: 600;
      }

    }
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -60,7 +60,7 @@
      .count-current-shown,
      .count-total,
      .sort-order {
-        font-weight: 700;
+        @extend %t-strong;
      }
    }

@@ -125,12 +125,12 @@
      .page-number-input,
      .total-pages {
        @extend %t-copy-base;
+        @extend %t-strong;
        width: ($baseline*2.5);
        margin: 0 ($baseline*0.75);
        padding: ($baseline/4);
        text-align: center;
        color: $gray;
-        font-weight: 600;
      }

      .current-page {
@@ -141,9 +141,9 @@

      .page-divider {
        @extend %t-title4;
+        @extend %t-regular;
        vertical-align: middle;
        color: $gray-l2;
-        font-weight: 400;
      }


@@ -207,8 +207,8 @@


        .current-sort {
+          @extend %t-strong;
          border-bottom: 1px solid $gray-l3;
-          font-weight: 700;
        }

        // CASE: embed column
@@ -404,9 +404,9 @@

    .title {
      @extend %t-title3;
+      @extend %t-light;
      float: none;
      margin: ($baseline*2) 0 ($baseline*1.5);
-      font-weight: 300;
    }

    .file-input {
@@ -471,9 +471,9 @@
      margin: ($baseline*1.5) 0 ($baseline*4);

      label {
+        @extend %t-strong;
        display: block;
        margin-bottom: ($baseline/2);
-        font-weight: 700;
      }
    }

--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -101,17 +101,17 @@

        .status-count {
          @extend %t-copy-base;
+          @extend %t-strong;
          margin-left: ($baseline/4);
          margin-right: ($baseline/4);
          color: $gray-d3;
-          font-weight: 600;
        }

        .status-amount {
          @extend %t-copy-base;
+          @extend %t-strong;
          margin-left: ($baseline/4);
          color: $gray-d3;
-          font-weight: 600;
        }
      }
    }
@@ -140,7 +140,7 @@
      .action-secondary {
        @include grey-button();
        @extend %t-action3;
-        font-weight: 400;
+        @extend %t-regular;
        float: right;

        .icon-delete {
@@ -232,11 +232,11 @@
      }

      .task-details {
+        @extend %t-strong;
        display: inline-block;
        vertical-align: text-top;
        float: left;
        width: flex-grid(6,9);
-        font-weight: 500;

        .task-name {
          @include transition(color $tmg-f2 ease-in-out 0s);
--- a/cms/static/sass/views/_container.scss
+++ b/cms/static/sass/views/_container.scss
@@ -19,10 +19,10 @@
      .page-header {

        .page-header-title {
-          @extend %t-title;
          @include font-size(28);
          @include line-height(32);
-          font-weight: 600;
+          @extend %t-title;
+          @extend %t-strong;
        }

        .is-editable {
@@ -52,8 +52,8 @@

          .button {
            @extend %t-action3;
+            @extend %t-regular;
            padding: ($baseline/4) ($baseline*.75);
-            font-weight: 400;
          }
        }
      }
@@ -150,22 +150,22 @@

        .date,
        .user {
-          font-weight: 600;
+          @extend %t-strong;
        }
      }

      .wrapper-release {

        .release-date {
-          font-weight: 600;
+          @extend %t-strong;
        }
      }

      .wrapper-visibility {

        .copy {
+          @extend %t-strong;
          margin-bottom: ($baseline/10);
-          font-weight: 600;
        }

        [class^="icon-"] {
@@ -213,7 +213,7 @@

        .date,
        .user {
-          font-weight: 600;
+          @extend %t-strong;
        }
      }
    }
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -3,150 +3,150 @@

 .view-dashboard {

-	// temp
-	.content {
-		margin-bottom: ($baseline*5);
+  // temp
+  .content {
+    margin-bottom: ($baseline*5);

-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }

-	// ====================
+  // ====================

-	// basic layout
-	.content-primary, .content-supplementary {
-	  @include box-sizing(border-box);
-	  float: left;
-	}
+  // basic layout
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+    float: left;
+  }

-	.content-primary {
-	  width: flex-grid(9, 12);
-	  margin-right: flex-gutter();
-	}
+  .content-primary {
+    width: flex-grid(9, 12);
+    margin-right: flex-gutter();
+  }

-	.content-supplementary {
-	  width: flex-grid(3, 12);
-	}
+  .content-supplementary {
+    width: flex-grid(3, 12);
+  }

-	// ====================
+  // ====================

-	// elements - notices
-	.content .notice-incontext {
-		width: flexgrid(9, 9);
+  // elements - notices
+  .content .notice-incontext {
+    width: flexgrid(9, 9);

-	  // CASE: notice has actions {
-	  &.has-actions, &.list-notices .notice-item.has-actions {
+    // CASE: notice has actions {
+    &.has-actions, &.list-notices .notice-item.has-actions {

-	    .msg, .list-actions {
-	      display: inline-block;
-	      vertical-align: middle;
-	    }
+      .msg, .list-actions {
+        display: inline-block;
+        vertical-align: middle;
+      }

-	    .msg {
-	      width: flex-grid(6, 9);
-	      margin-right: flex-gutter();
-	    }
+      .msg {
+        width: flex-grid(6, 9);
+        margin-right: flex-gutter();
+      }

-	    .list-actions {
-	      width: flex-grid(3, 9);
-	      text-align: right;
-	      margin-top: 0;
+      .list-actions {
+        width: flex-grid(3, 9);
+        text-align: right;
+        margin-top: 0;

-	      .action-item {
+        .action-item {

-	      }
+        }

-	      .action-create-course {
-	      	@extend %btn-primary-green;
-	      	@extend %t-action3;
-	      }
-	    }
-	  }
-	}
+        .action-create-course {
+          @extend %btn-primary-green;
+          @extend %t-action3;
+        }
+      }
+    }
+  }



-	// elements - course creation rights controls
-	.wrapper-creationrights {
-		overflow: hidden;
+  // elements - course creation rights controls
+  .wrapper-creationrights {
+    overflow: hidden;

-		.ui-toggle-control {
-			@extend %ui-depth2;
-			@extend %btn-secondary-gray;
-			@include clearfix();
-			display: block;
-			text-align: left;
+    .ui-toggle-control {
+      @extend %ui-depth2;
+      @extend %btn-secondary-gray;
+      @include clearfix();
+      display: block;
+      text-align: left;

-			// STATE: hover - syncing up colors with current so transition is smoother
-			&:hover {
-				background: $gray-d1;
-				color: $white;
-			}
+      // STATE: hover - syncing up colors with current so transition is smoother
+      &:hover {
+        background: $gray-d1;
+        color: $white;
+      }

-			.label {
-				@extend %t-action3;
-				float: left;
-				width: flex-grid(8, 9);
-				margin: 3px flex-gutter() 0 0;
-			}
+      .label {
+        @extend %t-action3;
+        float: left;
+        width: flex-grid(8, 9);
+        margin: 3px flex-gutter() 0 0;
+      }

-			.icon-remove-sign {
-				@extend %t-action1;
-				@include transform(rotate(45deg));
-				@include transform-origin(center center);
-				@include transition(all $tmg-f1 linear 0s);
-				float: right;
-				text-align: right;
-			}
-		}
+      .icon-remove-sign {
+        @extend %t-action1;
+        @include transform(rotate(45deg));
+        @include transform-origin(center center);
+        @include transition(all $tmg-f1 linear 0s);
+        float: right;
+        text-align: right;
+      }
+    }

-		.ui-toggle-target {
-			@extend %ui-depth1;
-			@include transition(opacity $tmg-f1 ease-in-out 0s);
-			position: relative;
-			top: -2px;
-			display: none;
-			opacity: 0;
-		}
+    .ui-toggle-target {
+      @extend %ui-depth1;
+      @include transition(opacity $tmg-f1 ease-in-out 0s);
+      position: relative;
+      top: -2px;
+      display: none;
+      opacity: 0;
+    }

-		// CASE: when the content area is shown
-		&.is-shown {
+    // CASE: when the content area is shown
+    &.is-shown {

-			.ui-toggle-control {
-				@include border-bottom-radius(0);
+      .ui-toggle-control {
+        @include border-bottom-radius(0);

-				.icon-remove-sign {
-					@include transform(rotate(90deg));
-					@include transform-origin(center center);
-				}
-			}
+        .icon-remove-sign {
+          @include transform(rotate(90deg));
+          @include transform-origin(center center);
+        }
+      }

-			.ui-toggle-target {
-				display: block;
-				opacity: 1.0;
-			}
-		}
+      .ui-toggle-target {
+        display: block;
+        opacity: 1.0;
+      }
+    }


-	}
+  }

-	// elements - course creation rights controls
-	.status-creationrights {
-		margin-top: $baseline;
+  // elements - course creation rights controls
+  .status-creationrights {
+    margin-top: $baseline;

-		.title {
-			@extend %t-title7;
-			margin-bottom: ($baseline/4);
-			font-weight: 700;
-			color: $gray-d1;
-		}
+    .title {
+      @extend %t-title7;
+      @extend %t-strong;
+      margin-bottom: ($baseline/4);
+      color: $gray-d1;
+    }

-		.copy {
+    .copy {

-		}
+    }

-		.list-actions, .form-actions {
+    .list-actions, .form-actions {
      margin-top: ($baseline*0.75);

      .action-item {
@@ -161,29 +161,29 @@
      // specific - request button
      // BT: should we abstract these states out for all buttons like this
      .action-request {
-      	position: relative;
-      	overflow: hidden;
+        position: relative;
+        overflow: hidden;

-      	.icon-cog {
-      		@include transition(all $tmg-f1 ease-in-out $tmg-f1);
-      		@include font-size(20);
-      		position: absolute;
-      		top: ($baseline/2);
-					left: -($baseline);
-      		visibility: hidden;
-      		opacity: 0.0;
-      	}
+        .icon-cog {
+          @include transition(all $tmg-f1 ease-in-out $tmg-f1);
+          @include font-size(20);
+          position: absolute;
+          top: ($baseline/2);
+          left: -($baseline);
+          visibility: hidden;
+          opacity: 0.0;
+        }

        // state: submitting
-      	&.is-submitting {
-      		padding-left: ($baseline*2);
+        &.is-submitting {
+          padding-left: ($baseline*2);

-					.icon-cog {
-						left: ($baseline*0.75);
-						visibility: visible;
-						opacity: 1.0;
-					}
-      	}
+          .icon-cog {
+            left: ($baseline*0.75);
+            visibility: visible;
+            opacity: 1.0;
+          }
+        }

        // state: has an error
        &.has-error {
@@ -202,112 +202,112 @@

    .status-update {

-    	.label {
-				@extend %cont-text-sr;
-    	}
+      .label {
+        @extend %cont-text-sr;
+      }

-    	.value {
-    		border-radius: ($baseline/4);
-    		position: relative;
-    		overflow: hidden;
-    		padding: ($baseline/5) ($baseline/2);
-    		background: $gray;
+      .value {
+        border-radius: ($baseline/4);
+        position: relative;
+        overflow: hidden;
+        padding: ($baseline/5) ($baseline/2);
+        background: $gray;

-    		.status-indicator {
-    		  position: absolute;
-    		  top: 0;
-    		  left: 0;
-    		  display: block;
-    		  width: 100%;
-    		  height: ($baseline/4);
-    		  opacity: 0.40;
-    		}
-    	}
+        .status-indicator {
+          position: absolute;
+          top: 0;
+          left: 0;
+          display: block;
+          width: 100%;
+          height: ($baseline/4);
+          opacity: 0.40;
+        }
+      }

-			.value-formal, .value-description {
-				border-radius: ($baseline/10);
-				display: inline-block;
-				vertical-align: middle;
-				color: $white;
-			}
+      .value-formal, .value-description {
+        border-radius: ($baseline/10);
+        display: inline-block;
+        vertical-align: middle;
+        color: $white;
+      }

-    	.value-formal {
-    		@extend %t-title5;
-    		margin: ($baseline/2);
-    		font-weight: 700;
+      .value-formal {
+        @extend %t-title5;
+        @extend %t-strong;
+        margin: ($baseline/2);

-    		[class^="icon-"] {
-    			margin-right: ($baseline/4);
-    		}
-    	}
+        [class^="icon-"] {
+          margin-right: ($baseline/4);
+        }
+      }

-    	.value-description {
-    		@extend %t-copy-sub1;
-    		position: relative;
-    		color: $white;
-				opacity: 0.85;
-    	}
+      .value-description {
+        @extend %t-copy-sub1;
+        position: relative;
+        color: $white;
+        opacity: 0.85;
+      }
    }

-		// CASE: rights are not requested yet
-		&.is-unrequested {
+    // CASE: rights are not requested yet
+    &.is-unrequested {

-			.title {
-				@extend %cont-text-sr;
-			}
-		}
+      .title {
+        @extend %cont-text-sr;
+      }
+    }

-		// CASE: status is pending
-		&.is-pending {
+    // CASE: status is pending
+    &.is-pending {

-			.status-update {
+      .status-update {

-				.value {
-					background: $orange;
-				}
+        .value {
+          background: $orange;
+        }

-				.status-indicator {
-					background: $orange-d1;
-				}
-			}
-		}
+        .status-indicator {
+          background: $orange-d1;
+        }
+      }
+    }


    // CASE: status is denied
    &.is-denied {

-    	.status-update {
+      .status-update {

-    		.value {
-    			background: $red-l1;
-    		}
+        .value {
+          background: $red-l1;
+        }

-    		.status-indicator {
-    			background: $red-s1;
-    		}
-    	}
+        .status-indicator {
+          background: $red-s1;
+        }
+      }
    }
-	}
+  }

-	// ====================
+  // ====================

  // ELEM: course listings
-	.courses {
-	  margin: $baseline 0;
-	}
+  .courses {
+    margin: $baseline 0;
+  }

-	.list-courses {
-		margin-top: $baseline;
-		border-radius: 3px;
-		border: 1px solid $gray;
-		background: $white;
-		box-shadow: 0 1px 2px $shadow-l1;
+  .list-courses {
+    margin-top: $baseline;
+    border-radius: 3px;
+    border: 1px solid $gray;
+    background: $white;
+    box-shadow: 0 1px 2px $shadow-l1;

-		.course-item {
+    .course-item {
      @include box-sizing(border-box);
      width: flex-grid(9, 9);
-			position: relative;
-			border-bottom: 1px solid $gray-l1;
+      position: relative;
+      border-bottom: 1px solid $gray-l1;
      padding: $baseline;

      // STATE: hover/focus
@@ -344,8 +344,8 @@
      // course title
      .course-title {
        @extend %t-title4;
+        @extend %t-light;
        margin: 0 ($baseline*2) ($baseline/4) 0;
-        font-weight: 300;
      }

      // course metadata
@@ -405,8 +405,8 @@
          border-bottom: none;
        }
      }
-		}
-	}
+    }
+  }

  // ELEM: new user form
  .wrapper-create-course {
@@ -430,70 +430,70 @@

  // course listings

-	.create-course {
+  .create-course {

-		.row {
-			@include clearfix();
-			margin-bottom: ($baseline*0.75);
-		}
+    .row {
+      @include clearfix();
+      margin-bottom: ($baseline*0.75);
+    }

-		.column {
-			float: left;
-			width: 48%;
-		}
+    .column {
+      float: left;
+      width: 48%;
+    }

-		.column:first-child {
-			margin-right: 4%;
-		}
+    .column:first-child {
+      margin-right: 4%;
+    }

-		label {
-			@extend %t-title7;
-			display: block;
-			font-weight: 700;
-		}
+    label {
+      @extend %t-title7;
+      @extend %t-strong;
+      display: block;
+    }

-		.new-course-org,
-		.new-course-number,
-		.new-course-name,
-		.new-course-run {
-			width: 100%;
-		}
+    .new-course-org,
+    .new-course-number,
+    .new-course-name,
+    .new-course-run {
+      width: 100%;
+    }

-		.new-course-name {
-			@extend %t-title5;
-			font-weight: 300;
-		}
+    .new-course-name {
+      @extend %t-title5;
+      @extend %t-light;
+    }

-		.new-course-save {
-			@include blue-button;
-		}
+    .new-course-save {
+      @include blue-button;
+    }

-		.new-course-cancel {
-			@include white-button;
-		}
+    .new-course-cancel {
+      @include white-button;
+    }

-		.item-details {
-			padding-bottom: 0;
-		}
+    .item-details {
+      padding-bottom: 0;
+    }

-	    .wrap-error {
-	      @include transition(all $tmg-f2 ease 0s);
-	      height: 0;
-	      overflow: hidden;
-	      opacity: 0;
-	    }
+      .wrap-error {
+        @include transition(all $tmg-f2 ease 0s);
+        height: 0;
+        overflow: hidden;
+        opacity: 0;
+      }

-	    .wrap-error.is-shown {
-	      height: 65px;
-	      opacity: 1;
-	    }
+      .wrap-error.is-shown {
+        height: 65px;
+        opacity: 1;
+      }

-	    .message-status {
-	      display: block;
-	      margin-bottom: 0;
-	      padding: ($baseline*.5) ($baseline*1.5) 8px ($baseline*1.5);
-	      font-weight: bold;
-	    }
+      .message-status {
+        @extend %t-strong;
+        display: block;
+        margin-bottom: 0;
+        padding: ($baseline*.5) ($baseline*1.5) 8px ($baseline*1.5);
+      }

-	}
+  }
 }
--- a/cms/static/sass/views/_export-git.scss
+++ b/cms/static/sass/views/_export-git.scss
@@ -23,15 +23,15 @@
  }

  h3 {
-      font-size: 19px;
-      font-weight: 700;
+    @extend %t-strong;
+    font-size: 19px;
  }

  .export-git-info-block {

    dt {
+      @extend %t-strong;
      font-size: 19px;
-      font-weight: 700;
      margin-top: 12px;
    }

--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -96,13 +96,13 @@
    font-size: 14px;

    h2 {
-      font-weight: 700;
+      @extend %t-strong;
      font-size: 19px;
      margin-bottom: 20px;
    }

    strong {
-      font-weight: 700;
+      @extend %t-strong;
    }

    p + p {
@@ -132,9 +132,9 @@
      text-align: center;

      h2 {
+        @extend %t-light;
        margin-bottom: 30px;
        font-size: 26px;
-        font-weight: 300;
      }

      .error-block {
--- a/cms/static/sass/views/_group-configuration.scss
+++ b/cms/static/sass/views/_group-configuration.scss
@@ -52,12 +52,12 @@

          .group-configuration-title {
            @extend %t-title;
+            @extend %t-strong;
            @include font-size(22);
            @include line-height(22);
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: ($baseline*14);
-            font-weight: bold;

            .group-toggle {
              display: inline-block;
@@ -248,21 +248,21 @@
          // add a group is below with groups styling
          .action-primary {
            @include blue-button;
-            @extend %t-action2;
            @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
            display: inline-block;
            padding: ($baseline/5) $baseline;
-            font-weight: 600;
            text-transform: uppercase;
          }

          .action-secondary {
            @include grey-button;
-            @extend %t-action2;
            @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
            display: inline-block;
            padding: ($baseline/5) $baseline;
-            font-weight: 600;
            text-transform: uppercase;
          }

@@ -282,7 +282,7 @@
          color: $gray;

          strong {
-            font-weight: 600;
+            @extend %t-strong;
          }
        }

@@ -300,7 +300,7 @@
            &.required {

              label {
-                font-weight: 600;
+                @extend %t-strong;
              }

              label:after {
@@ -393,7 +393,7 @@
              color: $gray-l1;

              .group-configuration-value {
-                font-weight: 600;
+                @extend %t-strong;
                white-space: nowrap;
                margin-left: ($baseline*0.5);
              }
@@ -405,7 +405,7 @@
          }

          label.required {
-            font-weight: 600;
+            @extend %t-strong;

            &:after {
              margin-left: ($baseline/4);
@@ -471,12 +471,12 @@

      .action-add-group {
        @extend %ui-btn-flat-outline;
+        @extend %t-strong;
        @include font-size(16);
        display: block;
        width: 100%;
        margin: ($baseline*1.5) 0 0 0;
        padding: ($baseline/2);
-        font-weight: 600;
      }
    }
  }
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -92,7 +92,7 @@
      }

      .file-name {
-        font-weight: bold;
+        @extend %t-strong;
      }
    }

@@ -151,7 +151,7 @@

        .title {
          @extend %t-title5;
-          font-weight: 600;
+          @extend %t-strong;
        }

        .copy {
--- a/cms/static/sass/views/_index.scss
+++ b/cms/static/sass/views/_index.scss
@@ -63,11 +63,11 @@

      h1 {
        @extend %t-title2;
+        @extend %t-strong;
        float: none;
        margin: 0 0 ($baseline/2) 0;
        border-bottom: 1px solid $blue-l1;
        padding: 0;
-        font-weight: 500;
        color: $white;
      }

@@ -76,7 +76,7 @@
      }

      .logo {
-        font-weight: 600;
+        @extend %t-strong;
        margin-left: ($baseline/2);
      }

@@ -197,8 +197,8 @@

          h3 {
            @extend %t-title4;
+            @extend %t-strong;
            margin: 0 0 ($baseline/2) 0;
-            font-weight: 600;
          }

          > p {
@@ -207,8 +207,8 @@
          }

          strong {
+            @extend %t-strong;
            color: $gray-d2;
-            font-weight: 500;
          }

          .list-proofpoints {
@@ -232,8 +232,8 @@

              .title {
                @extend %t-copy-base;
+                @extend %t-strong;
                margin: 0 0 ($baseline/4) 0;
-                font-weight: 500;
                color: $gray-d3;
              }

@@ -323,10 +323,10 @@
          text-align: center;

          &.action-primary {
-            @extend %t-action1;
            @include blue-button;
+            @extend %t-action1;
+            @extend %t-strong;
            padding: ($baseline*0.75) ($baseline/2);
-            font-weight: 600;
            text-align: center;
            text-transform: uppercase;
          }
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -22,13 +22,13 @@
  }

  .message-status {
-    display: none;
    @include border-top-radius(2px);
    @include box-sizing(border-box);
+    @extend %t-strong;
+    display: none;
    border-bottom: 2px solid $yellow;
    margin: 0 0 20px 0;
    padding: 10px 20px;
-    font-weight: 500;
    background: $paleYellow;

    .text {
@@ -116,7 +116,7 @@
    .remove-item {
      @include white-button;
      @extend %t-action3;
-      font-weight: 400;
+      @extend %t-strong;
    }

    .new-button {
@@ -140,7 +140,7 @@
        &.required {

          label {
-            font-weight: 600;
+            @extend %t-strong;
          }

          label:after {
@@ -154,10 +154,10 @@
        }

        label {
-          @extend %t-copy-sub1;
          @include transition(color $tmg-f2 ease-in-out 0s);
+          @extend %t-copy-sub1;
+          @extend %t-strong;
          margin: 0 0 ($baseline/4) 0;
-          font-weight: 400;

          &.is-focused {
            color: $blue;
@@ -266,12 +266,12 @@

        input, textarea {
          @extend %t-copy-lead1;
+          @extend %t-strong;
          box-shadow: none;
          border: none;
          background: none;
          padding: 0;
          margin: 0;
-          font-weight: 600;
        }
      }

@@ -338,7 +338,7 @@
          .action-primary {
            @extend %btn-primary-blue;
            @extend %t-action3;
-            font-weight: 600;
+            @extend %t-strong;

            [class^="icon-"] {
              @extend %t-icon5;
@@ -653,10 +653,10 @@
              }

              .letter-grade {
+                @extend %t-strong;
                display: block;
                margin: 10px 15px 0 0;
                font-size: 16px;
-                font-weight: 700;
                line-height: 14px;
              }

@@ -799,8 +799,8 @@
        position: relative;

        .title {
+          @extend %t-strong;
          margin-top: ($baseline/2);
-          font-weight: 600;
        }

        .field {
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -347,8 +347,8 @@
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);

    .page-name {
+      @extend %t-strong;
      font-size: 19px;
-      font-weight: 700;
    }

    .item-actions {
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -30,8 +30,8 @@

        .textbook-title {
          @extend %t-title4;
+          @extend %t-strong;
          margin-right: ($baseline*14);
-          font-weight: bold;
        }

        .ui-toggle-expansion {
@@ -147,21 +147,21 @@

        .action-primary {
          @include blue-button;
-          @extend %t-action2;
          @include transition(all .15s);
+          @extend %t-action2;
+          @extend %t-strong;
          display: inline-block;
          padding: ($baseline/5) $baseline;
-          font-weight: 600;
          text-transform: uppercase;
        }

        .action-secondary {
          @include grey-button;
-          @extend %t-action2;
          @include transition(all .15s);
+          @extend %t-action2;
+          @extend %t-strong;
          display: inline-block;
          padding: ($baseline/5) $baseline;
-          font-weight: 600;
          text-transform: uppercase;
        }

@@ -175,7 +175,7 @@


        strong {
-          font-weight: 600;
+          @extend %t-strong;
        }


@@ -195,7 +195,7 @@
          &.required {

            label {
-              font-weight: 600;
+              @extend %t-strong;
            }

            label:after {
@@ -349,7 +349,6 @@
        width: 100%;
        margin: ($baseline*1.5) 0 0 0;
        padding: ($baseline/2);
-        font-weight: 600;
      }
    }
  }
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -3,24 +3,24 @@

 .view-updates {

-	.course-info-wrapper {
-		display: table;
-		width: 100%;
-		clear: both;
-	}
+  .course-info-wrapper {
+    display: table;
+    width: 100%;
+    clear: both;
+  }

-	.main-column,
-	.course-handouts {
-		float: none;
-		display: table-cell;
-	}
+  .main-column,
+  .course-handouts {
+    float: none;
+    display: table-cell;
+  }

-	.main-column {
-		border-radius: 3px 0 0 3px;
-		border-right-color: $mediumGrey;
-	}
+  .main-column {
+    border-radius: 3px 0 0 3px;
+    border-right-color: $mediumGrey;
+  }

-	.CodeMirror {
+  .CodeMirror {
    border: 1px solid #3c3c3c;
    background: #fff;
    color: #3c3c3c;
@@ -28,185 +28,185 @@
 }

 .course-updates {
-	padding: 30px 40px;
-	margin: 0;
+  padding: 30px 40px;
+  margin: 0;

-	.update-list > li {
-		padding: 34px 0 42px;
-		border-top: 1px solid #cbd1db;
+  .update-list > li {
+    padding: 34px 0 42px;
+    border-top: 1px solid #cbd1db;

-		&:first-child {
-			padding-top: 0;
-			border: none;
-		}
+    &:first-child {
+      padding-top: 0;
+      border: none;
+    }

-		&.editing {
-			position: relative;
-			z-index: 1001;
-			padding: 0;
-			border-top: none;
-			border-radius: 3px;
-			background: #fff;
+    &.editing {
+      position: relative;
+      z-index: 1001;
+      padding: 0;
+      border-top: none;
+      border-radius: 3px;
+      background: #fff;

-			.post-preview {
-				display: none;
-			}
-		}
+      .post-preview {
+        display: none;
+      }
+    }

-		h1 {
-			float: none;
-			font-size: 24px;
-			font-weight: 300;
-		}
+    h1 {
+      @extend %t-light;
+      float: none;
+      font-size: 24px;
+    }

-		h2 {
-			margin-bottom: 18px;
-			font-size: 14px;
-			font-weight: 700;
-			line-height: 30px;
-			color: #646464;
-			letter-spacing: 1px;
-			text-transform: uppercase;
-		}
+    h2 {
+      @extend %t-strong;
+      margin-bottom: 18px;
+      font-size: 14px;
+      line-height: 30px;
+      color: #646464;
+      letter-spacing: 1px;
+      text-transform: uppercase;
+    }

-		h3 {
-			margin: 34px 0 11px;
-			font-size: 16px;
-			font-weight: 700;
-		}
-	}
+    h3 {
+      @extend %t-strong;
+      margin: 34px 0 11px;
+      font-size: 16px;
+    }
+  }

-	.update-contents {
-		p {
-			font-size: 16px;
-			line-height: 25px;
-		}
+  .update-contents {
+    p {
+      font-size: 16px;
+      line-height: 25px;
+    }

-		p + p {
-			margin-top: 25px;
-		}
+    p + p {
+      margin-top: 25px;
+    }

-		.primary {
-			border: 1px solid #ddd;
-			background: #f6f6f6;
-			padding: 20px;
-		}
+    .primary {
+      border: 1px solid #ddd;
+      background: #f6f6f6;
+      padding: 20px;
+    }

-		ol, ul {
-		  margin: 1em 0;
-		  padding: 0 0 0 1em;
-		  color: $baseFontColor;
+    ol, ul {
+      margin: 1em 0;
+      padding: 0 0 0 1em;
+      color: $baseFontColor;

-		  li {
-		    margin-bottom: 0.708em;
-		  }
-		}
+      li {
+        margin-bottom: 0.708em;
+      }
+    }

-		ol {
-		  list-style: decimal outside none;
-		}
+    ol {
+      list-style: decimal outside none;
+    }

-		ul {
-		  list-style: disc outside none;
-		}
+    ul {
+      list-style: disc outside none;
+    }

-		pre {
-		  margin: 1em 0;
-		  color: $baseFontColor;
-		  font-family: monospace, serif;
-		  font-size: 1em;
-		  white-space: pre-wrap;
-		  word-wrap: break-word;
-		}
+    pre {
+      margin: 1em 0;
+      color: $baseFontColor;
+      font-family: monospace, serif;
+      font-size: 1em;
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }

-		code {
-		  color: $baseFontColor;
-		  font-family: monospace, serif;
-		  background: none;
-		  padding: 0;
-		}
-	}
+    code {
+      color: $baseFontColor;
+      font-family: monospace, serif;
+      background: none;
+      padding: 0;
+    }
+  }


-	.new-update-form {
-		@include edit-box;
-		margin-bottom: 24px;
-		padding: 30px;
-		border: none;
+  .new-update-form {
+    @include edit-box;
+    margin-bottom: 24px;
+    padding: 30px;
+    border: none;

-		textarea {
-			height: 180px;
-		}
-	}
+    textarea {
+      height: 180px;
+    }
+  }

-	.post-actions {
-		float: right;
+  .post-actions {
+    float: right;

-		.edit-button,
-		.delete-button{
-			float: left;
-			@include white-button;
-	    padding: 3px 10px 4px;
-	    margin-left: 7px;
-	    font-size: 12px;
-	    font-weight: 400;
+    .edit-button,
+    .delete-button{
+      @include white-button;
+      @extend %t-regular;
+      float: left;
+      padding: 3px 10px 4px;
+      margin-left: 7px;
+      font-size: 12px;

-	    .edit-icon,
-	    .delete-icon {
-	      margin-right: 4px;
-	    }
-		}
-	}
+      .edit-icon,
+      .delete-icon {
+        margin-right: 4px;
+      }
+    }
+  }
 }

 .course-handouts {
-	@extend %ui-window;
-	width: 30%;
-	padding: 20px 30px;
-	margin: 0;
-	border-radius: 0 3px 3px 0;
-	border-left: none;
-	background: $lightGrey;
+  @extend %ui-window;
+  width: 30%;
+  padding: 20px 30px;
+  margin: 0;
+  border-radius: 0 3px 3px 0;
+  border-left: none;
+  background: $lightGrey;

-	.title {
-		margin-bottom: 24px;
-		font-size: 22px;
-		font-weight: 300;
-	}
+  .title {
+    @extend %t-light;
+    margin-bottom: 24px;
+    font-size: 22px;
+  }

-	.edit-button {
-		float: right;
-		@include white-button;
+  .edit-button {
+    @include white-button;
+    @extend %t-regular;
+    float: right;
    padding: 3px 10px 4px;
    margin-left: 7px;
    font-size: 12px;
-    font-weight: 400;

    .edit-icon,
    .delete-icon {
      margin-right: 4px;
    }
-	}
+  }

-	.handouts-content {
-		font-size: 14px;
-	}
+  .handouts-content {
+    font-size: 14px;
+  }

-	.treeview-handoutsnav li {
-		margin-bottom: 12px;
-	}
+  .treeview-handoutsnav li {
+    margin-bottom: 12px;
+  }
 }

 .edit-handouts-form {
-	@include edit-box;
-	position: absolute;
-	right: 0;
-	top: 0;
-	z-index: 10001;
-	width: 800px;
-	padding: 30px;
+  @include edit-box;
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 10001;
+  width: 800px;
+  padding: 30px;

-	textarea {
-		height: 300px;
-	}
+  textarea {
+    height: 300px;
+  }
 }
--- a/cms/static/sass/views/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -101,9 +101,9 @@
        color: $white;

        .msg-you {
+          @extend %t-strong;
          margin-left: ($baseline/5);
          text-transform: none;
-          font-weight: 500;
          color: $pink-l3;
        }

@@ -131,11 +131,11 @@
        }

        .user-username {
-          @extend %t-title4;
          @include transition(color $tmg-f2 ease-in-out 0s);
+          @extend %t-title4;
+          @extend %t-strong;
          margin: 0 ($baseline/2) ($baseline/10) 0;
          color: $gray-d4;
-          font-weight: 600;
        }

        .user-email {
@@ -186,20 +186,20 @@

          &.add-admin-role {
            @include blue-button;
-            @extend %t-action2;
            @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
            display: inline-block;
            padding: ($baseline/5) $baseline;
-            font-weight: 600;
          }

          &.remove-admin-role {
            @include grey-button;
-            @extend %t-action2;
            @include transition(all .15s);
+            @extend %t-action2;
+            @extend %t-strong;
            display: inline-block;
            padding: ($baseline/5) $baseline;
-            font-weight: 600;
          }
        }

--- a/common/static/sass/_mixins-inherited.scss
+++ b/common/static/sass/_mixins-inherited.scss
@@ -121,10 +121,10 @@
@mixin button {
  @include font-size(14);
  @include transition(background-color 0.15s, box-shadow 0.15s);
+  @extend %t-strong;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .3) inset, 0 0 0 rgba(0, 0, 0, 0);
  display: inline-block;
  padding: ($baseline/5) $baseline ($baseline/4);
-  font-weight: 700;

  &.disabled, &.is-disabled {
    border: 1px solid $gray-l1 !important;
@@ -331,9 +331,9 @@
  }

  h5 {
+    @extend %t-strong;
    margin-bottom: 8px;
    color: #fff;
-    font-weight: 700;
  }

  .row {
@@ -388,9 +388,9 @@
    .draft-item:after,
    .public-item:after,
    .private-item:after {
+      @extend %t-strong;
      margin-left: 3px;
      font-size: 9px;
-      font-weight: 600;
      text-transform: uppercase;
    }

--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -182,11 +182,11 @@
 %ui-btn-primary {
  @extend %ui-btn;
  @extend %ui-btn-pill;
+  @extend %t-strong;
  padding:($baseline/2) $baseline;
  border-width: 1px;
  border-style: solid;
  box-shadow: none;
-  font-weight: 600;
  line-height: 1.5em;
  text-align: center;

@@ -224,9 +224,9 @@
 }

 %ui-btn-flat-outline {
-  @extend %t-action4;
  @include transition(all .15s);
-  font-weight: 600;
+  @extend %t-strong;
+  @extend %t-action4;
  text-align: center;
  border-radius: ($baseline/4);
  border: 1px solid $blue-l2;