diff --git a/cms/envs/common.py b/cms/envs/common.py
index 7521cc21fa11..e036e7a32084 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -1418,6 +1418,13 @@
         ],
         'output_filename': 'css/cms-style-xmodule-annotations.css',
     },
+    'my_new_bundle': {
+        'source_filenames': [
+            'css/my_new_bundle.css',
+        ],
+        'output_filename': 'css/my_new_bundle.css',
+    },
+
 }
 
 base_vendor_js = [
diff --git a/cms/static/images/pencil-icon.svg b/cms/static/images/pencil-icon.svg
new file mode 100644
index 000000000000..c48724f84cbd
--- /dev/null
+++ b/cms/static/images/pencil-icon.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" focusable="false" aria-hidden="true">
+  <path d="m14.06 9.02.92.92L5.92 19H5v-.92l9.06-9.06ZM17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83a.996.996 0 0 0 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29Zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75Z" fill="currentColor"></path>
+</svg>
diff --git a/cms/static/sass/elements/_xblocks.scss b/cms/static/sass/elements/_xblocks.scss
index 31bc2b62472f..943c4f322d47 100644
--- a/cms/static/sass/elements/_xblocks.scss
+++ b/cms/static/sass/elements/_xblocks.scss
@@ -1074,108 +1074,3 @@ div.wrapper-comp-editor.is-inactive ~ div.launch-latex-compiler {
     padding: ($baseline / 2) 0 ($baseline * 0.4);
   }
 }
-
-
-body .wrapper-xblock .xblock-header-primary .header-details .xblock-display-name {
-  font-size: 22px;
-  line-height: 28px;
-  font-weight: 700;
-  color: #000;
-}
-
-.wrapper-xblock .xblock-header-primary {
-  padding: 24px;
-  padding-bottom: 12px;
-}
-
-.wrapper-xblock {
-  background-color: transparent;
-  border-radius: 6px;
-  border: none;
-
-  &:hover {
-    border-color: none;
-  }
-}
-
-.wrapper-xblock.level-element {
-  box-shadow: 0 .125rem .25rem rgba(0,0,0,.15),0 .125rem .5rem rgba(0,0,0,.15);
-}
-
-.wrapper-xblock.level-element .xblock-header-primary {
-  background-color: #fff;
-}
-
-.view-container .content-primary {
-  background-color: transparent !important;
-  width: 100% !important;
-}
-
-.wrapper-xblock.level-element .xblock-render {
-  background: #fff;
-  margin: 0;
-  padding: 24px;
-  padding-top: 12px;
-}
-
-.action-edit {
-  .action-button-text {
-    display: none;
-  }
-
-  .edit-button.action-button {
-    width: 44px;
-    height: 44px;
-    border-radius: 50% !important;
-
-    &:hover {
-      background-color: #00262B;
-    }
-
-    &:focus {
-      outline: 2px rgba(0,0,0,0);
-      background-color: rgba(0,0,0,0);
-      box-shadow: inset 0 0 0 2px #00262b;
-    }
-  }
-}
-
-.wrapper-xblock .wrapper-xblock .header-actions .actions-list .action-item .action-button {
-  width: 44px;
-  height: 44px;
-  border-radius: 50%;
-
-  &:hover {
-    background-color: #00262B;
-  }
-
-  &:focus {
-    outline: 2px rgba(0,0,0,0);
-    background-color: rgba(0,0,0,0);
-    box-shadow: inset 0 0 0 2px #00262b;
-  }
-}
-
-body .nav-dd .nav-sub {
-  box-shadow: 0px 4px 10px 0px rgba(0,0,0,.15),0px 8px 16px 0px rgba(0,0,0,.15);
-  border-radius: .375rem;
-  padding: 10px 0;
-  border: none;
-
-  .nav-item {
-    padding: .625rem 1rem;
-    border-bottom: none;
-    color: #212529;
-    font-size: 18px;
-
-    &:hover {
-      background-color: #f2f0ef;
-      color: #212529;
-    }
-
-    &:active {
-      background-color: #00262b;
-      color: #fff;
-    }
-  }
-}
\ No newline at end of file
diff --git a/cms/static/sass/my_new_bundle.scss b/cms/static/sass/my_new_bundle.scss
new file mode 100644
index 000000000000..0f5ea8842e15
--- /dev/null
+++ b/cms/static/sass/my_new_bundle.scss
@@ -0,0 +1,664 @@
+@import 'cms/theme/variables-v1';
+
+%button-styles {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+}
+
+%input-styles {
+  font-size: $base-font-size;
+  color: $text-color !important;
+  background-color: $white;
+  border: 1px solid $border-color !important;
+  border-radius: $input-border-radius !important;
+  padding: 10px 16px !important;
+  background-image: none;
+  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
+}
+
+%modal-actions-button {
+  font-size: $base-font-size;
+  line-height: 20px;
+  padding: 10px 16px;
+  border-radius: $btn-border-radius;
+}
+
+.wrapper-content.wrapper {
+  padding: 5px;
+}
+
+body .wrapper-xblock {
+  background-color: $transparent;
+  border-radius: 6px;
+  border: none;
+
+  &:hover {
+    border-color: none;
+  }
+
+  .xblock-header-primary {
+    padding: 24px;
+    padding-bottom: 12px;
+    border-bottom: none !important;
+
+    .header-details .xblock-display-name {
+      font-size: 22px;
+      line-height: 28px;
+      font-weight: 700;
+      color: $black;
+    }
+  }
+
+  &.level-element {
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .15);
+    margin: 0 0 28px 0;
+  }
+
+  &.level-element .xblock-header-primary {
+    background-color: $white;
+  }
+
+  &.level-element .xblock-render {
+    background: $white;
+    margin: 0;
+    padding: 24px;
+    padding-top: 12px;
+  }
+
+  .wrapper-xblock .header-actions .actions-list .action-item .action-button {
+    color: $black;
+
+    @extend %button-styles;
+
+    .fa-ellipsis-v {
+      font-size: $base-font-size;
+    }
+
+    &:hover {
+      background-color: $primary;
+      border-color: $transparent;
+    }
+
+    &:focus {
+      outline: 2px $transparent;
+      background-color: $transparent;
+      box-shadow: inset 0 0 0 2px $primary;
+      color: $primary;
+      border-color: $transparent;
+    }
+  }
+}
+
+.view-container .content-primary {
+  background-color: $transparent !important;
+  width: 100% !important;
+}
+
+.btn-default.action-edit.title-edit-button {
+  position: relative;
+  top: 7px;
+
+  @extend %button-styles;
+
+  .fa-pencil {
+    display: none;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    background-color: $black;
+    mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
+    top: 11px;
+    left: 11px;
+    width: 20px;
+    height: 20px;
+  }
+
+  &:hover {
+    background-color: $primary;
+    border-color: $transparent;
+
+    &::before {
+      background-color: $white;
+    }
+  }
+
+  &:focus {
+    outline: 2px $transparent;
+    background-color: $transparent;
+    box-shadow: inset 0 0 0 2px $primary;
+    border-color: $transparent;
+
+    &:hover {
+      color: $white;
+      border-color: $transparent;
+
+      &::before {
+        background-color: $primary;
+      }
+    }
+  }
+}
+
+.action-edit {
+  .action-button-text {
+    display: none;
+  }
+
+  .edit-button.action-button {
+    position: relative;
+
+    @extend %button-styles;
+
+    .fa-pencil {
+      display: none;
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      background-color: $black;
+      mask: url('#{$static-path}/images/pencil-icon.svg') center no-repeat;
+      top: 11px;
+      left: 11px;
+      width: 20px;
+      height: 20px;
+    }
+
+    &:hover {
+      background-color: $primary;
+      border-color: $transparent;
+
+      &::before {
+        background-color: $white;
+      }
+    }
+
+    &:focus {
+      outline: 2px $transparent;
+      background-color: $transparent;
+      box-shadow: inset 0 0 0 2px $primary;
+      border-color: $transparent;
+
+      &:hover {
+        color: $white;
+        border-color: $transparent;
+
+        &::before {
+          background-color: $primary;
+        }
+      }
+    }
+  }
+}
+
+.nav-dd.ui-right .nav-sub {
+  &::before,
+  &::after {
+    display: none;
+  }
+}
+
+[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .editor-button,
+[class*="view-"] .modal-lg.modal-editor .modal-header .editor-modes .action-item .settings-button,
+#openassessment-editor #openassessment_editor_header .editor_tabs .oa_editor_tab {
+  color: $black;
+  background-color: $light-background-color;
+  border-color: $light-background-color;
+  box-shadow: none;
+  border: 1px solid $transparent;
+  font-weight: 500;
+
+  @extend %modal-actions-button;
+}
+
+[class*="view-"] .modal-window .modal-actions .action-primary,
+body .xblock--drag-and-drop--editor .btn,
+body #openassessment-editor .openassessment_container_add_button,
+body #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion .openassessment_criterion_add_option {
+  background-color: $primary;
+  color: $white;
+  border: 1px solid $primary;
+  cursor: pointer;
+  background-image: none;
+  display: block;
+
+  @extend %modal-actions-button;
+
+  &:hover {
+    background: darken($primary, 5%);
+    border-color: #2d494e;
+    box-shadow: none;
+  }
+
+  &:focus {
+    background: $primary;
+    outline: none;
+    box-shadow: none;
+  }
+}
+
+[class*="view-"] .modal-window .modal-actions a {
+  color: $text-color;
+  background-color: $transparent;
+  border-color: $transparent;
+  box-shadow: none;
+  font-weight: 500;
+  border: 1px solid $transparent !important;
+  padding: 10px 16px !important;
+  font-size: $base-font-size;
+  line-height: 20px;
+  border-radius: $btn-border-radius !important;
+  text-align: center;
+  vertical-align: middle;
+  user-select: none;
+  background-image: none;
+  display: block;
+
+  &:hover {
+    background-color: $light-background-color;
+    border-color: $transparent;
+    color: $text-color;
+  }
+
+  &:focus {
+    background: $transparent;
+    outline: none;
+  }
+}
+
+body .nav-dd .nav-sub {
+  border: 1px solid rgba(0, 0, 0, .15);
+  border-radius: 6px;
+  padding: 10px 0;
+  min-width: 288px;
+  right: 90px;
+
+  .nav-item {
+    border-bottom: none;
+    color: #212529;
+    font-size: $base-font-size;
+
+    a {
+      padding: 10px 16px;
+    }
+
+    &:hover {
+      background-color: #f2f0ef;
+      color: #212529;
+    }
+
+    a:hover {
+      color: #212529 !important;
+    }
+
+    a:focus {
+      outline: none;
+    }
+
+    &:active {
+      background-color: $primary;
+
+      a {
+        color: $white !important;
+      }
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.wrapper-comp-settings {
+  .list-input.settings-list {
+    .metadata-list-enum .create-setting {
+      background-color: $primary;
+      color: $white;
+      border: 1px solid $primary;
+      cursor: pointer;
+
+      @extend %modal-actions-button;
+
+      &:hover {
+        background: darken($primary, 5%);
+        border-color: #2d494e;
+      }
+
+      &:focus {
+        background: $primary;
+        outline: none;
+      }
+    }
+  }
+
+  .list-input.settings-list .field.comp-setting-entry.is-set .setting-input {
+    color: $text-color;
+  }
+
+  .list-input.settings-list select {
+    border: 1px solid $border-color;
+    border-radius: $input-border-radius;
+    color: $text-color;
+    height: 44px;
+
+    &:focus {
+      background-color: $white;
+      color: $text-color;
+      outline: 0;
+      box-shadow: 0 0 0 1px #0a3055;
+    }
+  }
+
+  .list-input.settings-list .setting-label {
+    font-size: $base-font-size;
+    line-height: 28px;
+    color: $text-color;
+    font-weight: 400;
+  }
+
+  .list-input.settings-list input[type="number"] {
+    width: 45%;
+  }
+
+  .list-input.settings-list .action.setting-clear {
+    background-color: $transparent;
+    color: $primary;
+    border: none;
+
+    @extend %button-styles;
+
+    &:hover {
+      background-color: $primary;
+      color: $white;
+      border: none;
+    }
+
+    &:focus {
+      outline: 2px $transparent;
+      background-color: $transparent;
+      box-shadow: inset 0 0 0 2px $primary;
+      color: $primary;
+    }
+  }
+}
+
+body select {
+  border: 1px solid $border-color;
+  border-radius: $input-border-radius;
+  color: $text-color;
+  height: 44px;
+  padding: 10px 16px;
+
+  &:focus {
+    background-color: $white;
+    color: $text-color;
+    outline: 0;
+    box-shadow: 0 0 0 1px #0a3055;
+  }
+}
+
+body .modal-window.modal-editor {
+  background-color: $white;
+  border-radius: 6px;
+
+  a {
+    color: #00688d;
+  }
+
+  select {
+    &:focus {
+      background-color: $white;
+      color: $text-color;
+      outline: 0;
+      box-shadow: 0 0 0 1px #0a3055;
+    }
+  }
+
+  input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
+    line-height: 20px;
+    height: 44px !important;
+
+    @extend %input-styles;
+
+    &:hover {
+      border: solid 1px #002121;
+    }
+
+    &:focus {
+      color: $text-color;
+      background-color: $white;
+      border-color: $primary;
+      outline: 0;
+      box-shadow: 0 0 0 1px $primary;
+    }
+  }
+
+  textarea {
+    box-shadow: none !important;
+
+    @extend %input-styles;
+
+    &:hover {
+      border: solid 1px #002121;
+    }
+
+    &:focus {
+      color: $text-color !important;
+      background-color: $white;
+      border-color: $primary !important;
+      outline: 0;
+      box-shadow: 0 0 0 1px $primary !important;
+    }
+  }
+
+  .tip.setting-help {
+    color: $border-color;
+    font-size: 14px;
+    line-height: $base-font-size;
+  }
+
+  label,
+  .label.setting-label {
+    font-size: $base-font-size;
+    line-height: 28px;
+    color: $text-color;
+    font-weight: 400;
+  }
+
+  .title.modal-window-title {
+    color: $black;
+    font-weight: 700;
+    font-size: 22px;
+    line-height: 28px;
+  }
+
+  .xblock-actions {
+    background-color: $white !important;
+
+    .action-button {
+      background-color: $transparent;
+      border: 1px solid $transparent;
+      padding: 9px 16px;
+      border-radius: $input-border-radius;
+      font-weight: 400;
+      color: #00688d;
+      font-size: $base-font-size;
+      line-height: 20px;
+      cursor: pointer;
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .openassessment_save_button,
+    .save-button,
+    .continue-button {
+      color: $white !important;
+      background-color: $primary;
+      border-color: $primary !important;
+      box-shadow: none;
+      font-weight: 500;
+      border: 1px solid $transparent !important;
+      padding: 10px 16px !important;
+      font-size: $base-font-size;
+      line-height: 20px;
+      border-radius: $btn-border-radius !important;
+      text-align: center;
+      vertical-align: middle;
+      user-select: none;
+      background-image: none;
+      height: auto !important;
+      display: block;
+
+      &:hover {
+        background: darken($primary, 5%);
+        border-color: $transparent;
+        color: $white;
+      }
+
+      &:focus {
+        background: $primary;
+        outline: none;
+      }
+    }
+
+    .openassessment_cancel_button,
+    .cancel-button {
+      color: $text-color;
+      background-color: $transparent;
+      border-color: $transparent;
+      box-shadow: none;
+      font-weight: 500;
+      border: 1px solid $transparent !important;
+      padding: 10px 16px !important;
+      font-size: $base-font-size;
+      line-height: 20px;
+      border-radius: $btn-border-radius !important;
+      text-align: center;
+      vertical-align: middle;
+      user-select: none;
+      background-image: none;
+      display: block;
+
+      &:hover {
+        background-color: $light-background-color;
+        border-color: $transparent;
+        color: $text-color;
+      }
+
+      &:focus {
+        background: $transparent;
+        outline: none;
+      }
+    }
+  }
+}
+
+body #openassessment-editor #openassessment_editor_header,
+body #openassessment-editor .openassessment_tab_instructions {
+  background-color: $white;
+}
+
+body {
+  .xblock--drag-and-drop--editor .tab {
+    background-color: $white;
+  }
+
+  #openassessment-editor #oa_rubric_editor_wrapper {
+    .openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings label input,
+    .openassessment_criterion_option .openassessment_criterion_option_name_wrapper label,
+    .openassessment_criterion_option .openassessment_criterion_option_explanation_wrapper label,
+    .openassessment_criterion .openassessment_criterion_feedback_wrapper label,
+    #openassessment_rubric_feedback_wrapper label,
+    .openassessment_criterion_option .openassessment_criterion_option_point_wrapper label,
+    .openassessment_criterion_option .openassessment_criterion_option_name_wrapper label input,
+    .openassessment_criterion .openassessment_criterion_basic_editor .comp-setting-entry .wrapper-comp-settings .openassessment_criterion_prompt,
+    #openassessment_rubric_feedback_wrapper textarea {
+      font-size: $base-font-size;
+      background-color: $white;
+      background-image: none;
+    }
+  }
+
+  #oa_rubric_editor_wrapper .openassessment_criterion_option
+  .openassessment_criterion_option_explanation_wrapper label textarea,
+  #openassessment-editor input[type=number] {
+    font-size: $base-font-size !important;
+    background-color: $white !important;
+    background-image: none !important;
+  }
+
+  #openassessment-editor input[type=number] {
+    min-width: 70px !important;
+  }
+
+  #openassessment-editor #oa_rubric_editor_wrapper .openassessment_criterion
+  .openassessment_criterion_basic_editor .comp-setting-entry
+  .wrapper-comp-settings label {
+    font-size: $base-font-size;
+    line-height: 28px;
+    color: $text-color;
+    font-weight: 400;
+  }
+
+  #openassessment-editor .openassessment_description {
+    font-size: 14px;
+    line-height: $base-font-size;
+  }
+
+  .modal-lg.modal-window.confirm.openassessment_modal_window {
+    height: 635px;
+  }
+
+  #openassessment-editor #oa_schedule_editor_wrapper #dates_config_new_badge {
+    background-color: $primary;
+  }
+}
+
+.setting-help,
+.ti.wrapper-comp-settings .list-input.settings-list .setting-help {
+  color: $border-color;
+  font-size: 14px !important;
+  line-height: $base-font-size !important;
+}
+
+#openassessment-editor .openassessment_assessment_module_settings_editor:hover {
+  border-color: $primary !important;
+}
+
+#openassessment-editor .openassessment_assessment_module_settings_editor:hover .drag-handle {
+  background-color: $primary !important;
+  border-color: $primary !important;
+}
+
+// [class*="view-"] .modal-window .editor-with-buttons .xblock-actions {
+//   bottom: -6px;
+// }
+
+.xblock-header-primary {
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 83px;
+    left: 25px;
+    width: 95%;
+    height: 1px;
+    background-color: #eae6e5;
+  }
+}
+
+.ui-loading {
+  background-color: #f8f7f6;
+  box-shadow: none;
+
+  .spin,
+  .copy {
+    color: $primary;
+  }
+}
diff --git a/cms/static/sass/partials/cms/theme/_variables-v1.scss b/cms/static/sass/partials/cms/theme/_variables-v1.scss
index c2ff073b94b1..5b5cabad8079 100644
--- a/cms/static/sass/partials/cms/theme/_variables-v1.scss
+++ b/cms/static/sass/partials/cms/theme/_variables-v1.scss
@@ -304,3 +304,11 @@ $state-danger-bg: #f2dede !default;
 $state-danger-border: darken($state-danger-bg, 5%) !default;
 
 $text-dark-black-blue: #2c3e50;
+
+$primary: #0A3055 !default;
+$btn-border-radius: 6px !default;
+$input-border-radius: 6px !default;
+$text-color: #454545 !default;
+$light-background-color: #e1dddb !default;
+$border-color: #707070 !default;
+$base-font-size: 18px !default;
diff --git a/cms/templates/container_chromeless.html b/cms/templates/container_chromeless.html
index 4e1dedafc2a0..5efdcf923881 100644
--- a/cms/templates/container_chromeless.html
+++ b/cms/templates/container_chromeless.html
@@ -2,6 +2,7 @@
 ## mako
 
 <%! main_css = "style-main-v1" %>
+<%! my_new_bundle = "my_new_bundle" %>
 
 <%namespace name='static' file='static_content.html'/>
 <%!
@@ -78,6 +79,8 @@
         <%static:css group='${self.attr.main_css}'/>
         % endif
 
+        <%static:css group='${self.attr.my_new_bundle}'/>
+
         <%include file="widgets/segment-io.html" />
 
         % for template_name in templates: