studio - adds in basic rules for notices UI

cms/static/sass/elements/_system-help.scss

@@ -1,2 +1,41 @@
 // studio - elements - system help
 // ====================
+
+// notices - in-context: to be used as notices to users within the context of a form/action
+.notice-incontext {
+  @extend .ui-well;
+
+  .title {
+    @extend .t-title7;
+    margin-bottom: ($baseline/4);
+    font-weight: 600;
+
+    [class^="icon-"] {
+      @extend .t-icon5;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: ($baseline/4);
+    }
+  }
+
+  .copy {
+    @extend .t-copy-sub2;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+}
+
+// particular warnings around a workflow for something
+.notice-workflow {
+  background: $yellow-l5;
+
+  .copy {
+    color: $gray-d1;
+  }
+
+  .icon-warning-sign {
+    color: $yellow-s3;
+  }
+}

cms/static/sass/views/_settings.scss

@@ -21,7 +21,7 @@ body.course.settings {
     font-size: 14px;
   }
 
-  .message-status { 
+  .message-status {
     display: none;
     @include border-top-radius(2px);
     @include box-sizing(border-box);
@@ -52,6 +52,12 @@ body.course.settings {
     }
   }
 
+  // notices - used currently for edx mktg
+  .notice-workflow {
+    margin-top: ($baseline);
+  }
+
+
   // in form - elements
   .group-settings {
     margin: 0 0 ($baseline*2) 0;

common/static/sass/_mixins.scss

@@ -189,3 +189,10 @@
 
   }
 }
+
+// UI archetypes - well
+.ui-well {
+  @include box-shadow(inset 0 1px 2px 1px $shadow-l1);
+  padding: ($baseline*0.75);
+}
+