diff --git a/platform/commonUI/dialog/res/templates/message.html b/platform/commonUI/dialog/res/templates/message.html
index 480332cccb..c75878cfc5 100644
--- a/platform/commonUI/dialog/res/templates/message.html
+++ b/platform/commonUI/dialog/res/templates/message.html
@@ -1,10 +1,10 @@
-<div class="l-message"
+<div class="c-message"
      ng-class="'message-severity-' + ngModel.severity">
     <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.title}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.title}}</div>
         </div>
-        <div class="hint" ng-hide="ngModel.hint === undefined">
+        <div class="c-message__hint" ng-hide="ngModel.hint === undefined">
             {{ngModel.hint}}
             <span ng-if="ngModel.timestamp !== undefined">[{{ngModel.timestamp}}]</span>
         </div>
@@ -16,17 +16,17 @@
                          ng-model="ngModel"
                          ng-show="ngModel.progress !== undefined || ngModel.unknownProgress"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-               class="s-button"
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+               class="c-button"
                ng-click="dialogOption.callback()">
                 {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
+            </button>
+            <button class="c-button c-button--major"
                ng-if="ngModel.primaryOption"
                ng-click="ngModel.primaryOption.callback()">
                 {{ngModel.primaryOption.label}}
-            </a>
+            </button>
         </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/platform/commonUI/dialog/res/templates/notification-message.html b/platform/commonUI/dialog/res/templates/notification-message.html
index c655faaffd..52ba7ecc8c 100644
--- a/platform/commonUI/dialog/res/templates/notification-message.html
+++ b/platform/commonUI/dialog/res/templates/notification-message.html
@@ -1,25 +1,25 @@
-<div class="l-message"
+<div class="c-message"
      ng-class="'message-severity-' + ngModel.severity">
     <div class="w-message-contents">
-        <div class="top-bar">
-            <div class="title">{{ngModel.message}}</div>
+        <div class="c-message__top-bar">
+            <div class="c-message__title">{{ngModel.message}}</div>
         </div>
         <div class="message-body">
             <mct-include key="'progress-bar'"
                          ng-model="ngModel"
                          ng-show="ngModel.progressPerc !== undefined"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogOption in ngModel.options"
-                class="s-button"
+        <div class="c-overlay__button-bar">
+            <button ng-repeat="dialogOption in ngModel.options"
+                class="c-button"
                 ng-click="dialogOption.callback()">
                     {{dialogOption.label}}
-            </a>
-            <a class="s-button major"
+            </button>
+            <button class="c-button c-button--major"
                 ng-if="ngModel.primaryOption"
                 ng-click="ngModel.primaryOption.callback()">
                     {{ngModel.primaryOption.label}}
-            </a>
+            </button>
         </div>
     </div>
 </div>
diff --git a/platform/commonUI/dialog/res/templates/overlay-message-list.html b/platform/commonUI/dialog/res/templates/overlay-message-list.html
index 36145312dd..39aa0ca228 100644
--- a/platform/commonUI/dialog/res/templates/overlay-message-list.html
+++ b/platform/commonUI/dialog/res/templates/overlay-message-list.html
@@ -1,22 +1,23 @@
 <mct-container key="overlay">
-    <div class="t-message-list">
-        <div class="top-bar">
-            <div class="dialog-title">{{ngModel.dialog.title}}</div>
-            <div class="hint">Displaying {{ngModel.dialog.messages.length}} message<span ng-show="ngModel.dialog.messages.length > 1 ||
-                                                                                                  ngModel.dialog.messages.length == 0">s</span>
+    <div class="t-message-list c-overlay__contents">
+        <div class="c-overlay__top-bar">
+            <div class="c-overlay__dialog-title">{{ngModel.dialog.title}}</div>
+            <div class="c-overlay__dialog-hint">Displaying {{ngModel.dialog.messages.length}} message<span
+                    ng-show="ngModel.dialog.messages.length > 1 ||
+                            ngModel.dialog.messages.length == 0">s</span>
             </div>
         </div>
-        <div class="w-messages">
+        <div class="w-messages c-overlay__messages">
             <mct-include
                 ng-repeat="msg in ngModel.dialog.messages | orderBy: '-'"
                 key="'notification-message'" ng-model="msg.model"></mct-include>
         </div>
-        <div class="bottom-bar">
-            <a ng-repeat="dialogAction in ngModel.dialog.actions"
-               class="s-button major"
+        <div class="c-overlay__bottom-bar">
+            <button ng-repeat="dialogAction in ngModel.dialog.actions"
+               class="c-button c-button--major"
                ng-click="dialogAction.action()">
                 {{dialogAction.label}}
-            </a>
+            </button>
         </div>
     </div>
 </mct-container>
diff --git a/platform/commonUI/dialog/res/templates/overlay.html b/platform/commonUI/dialog/res/templates/overlay.html
index af88d22ecd..39a26e3d9e 100644
--- a/platform/commonUI/dialog/res/templates/overlay.html
+++ b/platform/commonUI/dialog/res/templates/overlay.html
@@ -22,9 +22,9 @@
 <div class="c-overlay l-overlay-small" ng-class="{'delayEntry100ms' : ngModel.delay}">
     <div class="c-overlay__blocker"></div>
     <div class="c-overlay__outer">
-        <a ng-click="ngModel.cancel()"
+        <button ng-click="ngModel.cancel()"
            ng-if="ngModel.cancel"
-           class="c-click-icon c-overlay__close-button icon-x-in-circle"></a>
+           class="c-click-icon c-overlay__close-button icon-x-in-circle"></button>
         <div class="c-overlay__contents" ng-transclude></div>
     </div>
 </div>
diff --git a/platform/commonUI/general/res/templates/message-banner.html b/platform/commonUI/general/res/templates/message-banner.html
index 9447c57dd4..861db30522 100644
--- a/platform/commonUI/general/res/templates/message-banner.html
+++ b/platform/commonUI/general/res/templates/message-banner.html
@@ -1,13 +1,13 @@
 <div ng-controller="BannerController" ng-show="active.notification"
-     class="l-message-banner s-message-banner {{active.notification.model.severity}}" ng-class="{
+     class="c-message-banner {{active.notification.model.severity}}" ng-class="{
      'minimized': active.notification.model.minimized,
      'new': !active.notification.model.minimized}"
      ng-click="maximize(active.notification)">
-    <span class="banner-elem label">
+    <span class="c-message-banner__message">
         {{active.notification.model.title}}
     </span>
     <span ng-show="active.notification.model.progress !== undefined || active.notification.model.unknownProgress">
-        <mct-include key="'progress-bar'" class="banner-elem"
+        <mct-include key="'progress-bar'" class="c-message-banner__progress-bar"
                      ng-model="active.notification.model">
         </mct-include>
     </span>
@@ -16,5 +16,5 @@
        ng-click="action(active.notification.model.primaryOption.callback, $event)">
         {{active.notification.model.primaryOption.label}}
     </a>
-    <a class="banner-elem close icon-x" ng-click="dismiss(active.notification, $event)"></a>
+    <button class="c-message-banner__close-button c-click-icon icon-x-in-circle" ng-click="dismiss(active.notification, $event)"></button>
 </div>
diff --git a/platform/features/clock/res/templates/timer.html b/platform/features/clock/res/templates/timer.html
index 30f3baa25d..235ff0f17f 100644
--- a/platform/features/clock/res/templates/timer.html
+++ b/platform/features/clock/res/templates/timer.html
@@ -24,10 +24,10 @@
         <button ng-click="timer.clickStopButton()"
                 ng-hide="timer.timerState == 'stopped'"
                 title="Reset"
-                class="c-timer__ctrl-reset c-click-icon c-click-icon--major icon-reset"></button>
+                class="c-timer__ctrl-reset c-icon-button c-icon-button--major icon-reset"></button>
         <button ng-click="timer.clickButton()"
                 title="{{timer.buttonText()}}"
-                class="c-timer__ctrl-pause-play c-click-icon c-click-icon--major {{timer.buttonCssClass()}}"></button>
+                class="c-timer__ctrl-pause-play c-icon-button c-icon-button--major {{timer.buttonCssClass()}}"></button>
     </div>
     <div class="c-timer__direction {{timer.signClass()}}"
         ng-hide="!timer.signClass()"></div>
diff --git a/src/api/overlays/components/DialogComponent.vue b/src/api/overlays/components/DialogComponent.vue
index eb1fb8b515..a05a3643fa 100644
--- a/src/api/overlays/components/DialogComponent.vue
+++ b/src/api/overlays/components/DialogComponent.vue
@@ -27,10 +27,16 @@
 <style lang="scss">
     @import "~styles/sass-base";
 
+    @mixin legacyMessage() {
+        flex: 0 1 auto;
+        font-family: symbolsfont;
+        font-size: $messageIconD; // Singleton message in a dialog
+        margin-right: $interiorMarginLg;
+    }
+
     .c-message {
         display: flex;
-        align-items: center;
-        padding: $interiorMarginLg;
+        align-items: flex-start;
 
         > * + * {
             margin-left: $interiorMarginLg;
@@ -58,7 +64,33 @@
         &__title,
         &__action-text {
             font-size: 1.2em; // TEMP
+        }
 
+        /************************** LEGACY */
+        &.message-severity-info:before {
+            @include legacyMessage();
+            content: $glyph-icon-info;
+            color: $colorInfo;
+        }
+
+        &.message-severity-alert:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-rect;
+            color: $colorWarningLo;
+        }
+
+        &.message-severity-error:before {
+            @include legacyMessage();
+            content: $glyph-icon-alert-triangle;
+            color: $colorWarningLo;
+        }
+
+        // Messages in a list
+        .c-overlay__messages & {
+            padding: $interiorMarginLg;
+            &:before {
+                font-size: $messageListIconD;
+            }
         }
     }
 </style>
diff --git a/src/api/overlays/components/OverlayComponent.vue b/src/api/overlays/components/OverlayComponent.vue
index 5f5c707d36..da8b385483 100644
--- a/src/api/overlays/components/OverlayComponent.vue
+++ b/src/api/overlays/components/OverlayComponent.vue
@@ -56,9 +56,11 @@
         }
 
         &__close-button {
-            $p: $interiorMarginSm;
+            $p: $interiorMargin;
             border-radius: 100% !important;
+            color: $overlayColorFg;
             display: inline-block;
+            font-size: 1.25em;
             position: absolute;
             top: $p; right: $p;
         }
@@ -151,6 +153,7 @@
             }
         }
 
+        .t-dialog-sm .l-overlay-small, // Legacy dialog support
         .l-overlay-fit {
             .c-overlay__outer {
                 @include overlaySizing(auto);
diff --git a/src/plugins/folderView/components/GridItem.vue b/src/plugins/folderView/components/GridItem.vue
index 3ec1fe00e7..7da4c77ce1 100644
--- a/src/plugins/folderView/components/GridItem.vue
+++ b/src/plugins/folderView/components/GridItem.vue
@@ -16,7 +16,7 @@
         </div>
         <div class="c-grid-item__controls">
             <div class="icon-people" title='Shared'></div>
-            <button class="c-click-icon icon-info c-info-button" title='More Info'></button>
+            <button class="c-icon-button icon-info c-info-button" title='More Info'></button>
             <div class="icon-pointer-right c-pointer-icon"></div>
         </div>
     </a>
diff --git a/src/plugins/notebook/res/templates/entry.html b/src/plugins/notebook/res/templates/entry.html
index 4a9f8e569c..349cb3cd7a 100644
--- a/src/plugins/notebook/res/templates/entry.html
+++ b/src/plugins/notebook/res/templates/entry.html
@@ -26,7 +26,7 @@
     </div>
 
     <div class="c-ne__local-controls--hidden">
-        <button class="c-click-icon c-click-icon--major icon-trash"
+        <button class="c-icon-button c-icon-button--major icon-trash"
            title="Delete this entry"
            @click="deleteEntry">
         </button>
diff --git a/src/plugins/summaryWidget/res/widgetTemplate.html b/src/plugins/summaryWidget/res/widgetTemplate.html
index 9384f0adf0..12cb6737ae 100755
--- a/src/plugins/summaryWidget/res/widgetTemplate.html
+++ b/src/plugins/summaryWidget/res/widgetTemplate.html
@@ -3,7 +3,7 @@
         <div id="widgetIcon" class="c-sw__icon js-sw__icon"></div>
         <div id="widgetLabel" class="label widget-label c-sw__label js-sw__label">Default Static Name</div>
     </a>
-    <div class="c-summary-widget__message holder flex-elem t-message-inline l-message message-severity-alert t-message-widget-no-data">
+    <div class="c-summary-widget__message holder flex-elem t-message-inline c-message message-severity-alert t-message-widget-no-data">
         <div class="w-message-contents l-message-body-only">
             <div class="message-body">
                 You must add at least one telemetry object to edit this widget.
diff --git a/src/plugins/timeConductor/DatePicker.vue b/src/plugins/timeConductor/DatePicker.vue
index 1baf0f900c..273d943d09 100644
--- a/src/plugins/timeConductor/DatePicker.vue
+++ b/src/plugins/timeConductor/DatePicker.vue
@@ -21,7 +21,7 @@
  *****************************************************************************/
 <template>
     <div class="c-ctrl-wrapper c-ctrl-wrapper--menus-up c-datetime-picker__wrapper" ref="calendarHolder">
-        <a class="c-click-icon icon-calendar"
+        <a class="c-icon-button icon-calendar"
            @click="toggle"></a>
         <div class="c-menu c-menu--mobile-modal c-datetime-picker"
              v-if="open">
@@ -30,10 +30,10 @@
                         @click="toggle"></button>
             </div>
             <div class="c-datetime-picker__pager c-pager l-month-year-pager">
-                <div class="c-pager__prev c-click-icon icon-arrow-left"
+                <div class="c-pager__prev c-icon-button icon-arrow-left"
                    @click.stop="changeMonth(-1)"></div>
                 <div class="c-pager__month-year">{{model.month}} {{model.year}}</div>
-                <div class="c-pager__next c-click-icon icon-arrow-right"
+                <div class="c-pager__next c-icon-button icon-arrow-right"
                    @click.stop="changeMonth(1)"></div>
             </div>
             <div class="c-datetime-picker__calendar c-calendar">
@@ -91,7 +91,7 @@
         grid-template-columns: auto 1fr auto;
         align-items: center;
 
-        .c-click-icon {
+        .c-icon-button {
             font-size: 0.8em;
         }
 
diff --git a/src/styles-new/_about.scss b/src/styles-new/_about.scss
index 8f2b66d405..df7fbb48b7 100644
--- a/src/styles-new/_about.scss
+++ b/src/styles-new/_about.scss
@@ -21,6 +21,46 @@
  *****************************************************************************/
 
 // Used by About screen, licenses, etc.
+.c-splash-image {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-image: url('../ui/layout/assets/images/bg-splash.jpg');
+
+    &:before,
+    &:after {
+        background-position: center;
+        background-repeat: no-repeat;
+        position: absolute;
+        background-image: url('../ui/layout/assets/images/logo-app-shdw.svg');
+        background-size: contain;
+        content: '';
+    }
+
+    &:before {
+        // NASA logo, dude
+        $w: 5%;
+        $m: 10px;
+        background-image: url('../ui/layout/assets/images/logo-nasa.svg');
+        top: $m;
+        right: auto;
+        bottom: auto;
+        left: $m;
+        height: auto;
+        width: $w * 2;
+        padding-bottom: $w;
+        padding-top: $w;
+    }
+
+    &:after {
+        // App logo
+        top: 0;
+        right: 15%;
+        bottom: 0;
+        left: 15%;
+    }
+}
+
 .c-about {
     &--splash {
         // Large initial image after click on app logo with text beneath
@@ -37,48 +77,6 @@
     &__text {
         height: 50%;
         flex: 1 1 0;
-        position: relative;
-    }
-
-    &__image {
-        background-position: center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        background-image: url('../ui/layout/assets/images/bg-splash.jpg');
-        position: relative;
-
-        &:before,
-        &:after {
-            background-position: center;
-            background-repeat: no-repeat;
-            position: absolute;
-            background-image: url('../ui/layout/assets/images/logo-app-shdw.svg');
-            background-size: contain;
-            content: '';
-        }
-
-        &:before {
-            // NASA logo, dude
-            $w: 5%;
-            $m: 10px;
-            background-image: url('../ui/layout/assets/images/logo-nasa.svg');
-            top: $m;
-            right: auto;
-            bottom: auto;
-            left: $m;
-            height: auto;
-            width: $w * 2;
-            padding-bottom: $w;
-            padding-top: $w;
-        }
-
-        &:after {
-            // App logo
-            top: 0;
-            right: 15%;
-            bottom: 0;
-            left: 15%;
-        }
     }
 
     &__text {
diff --git a/src/styles-new/_constants-espresso.scss b/src/styles-new/_constants-espresso.scss
index d713f5d1a1..59b4b1e44a 100644
--- a/src/styles-new/_constants-espresso.scss
+++ b/src/styles-new/_constants-espresso.scss
@@ -173,9 +173,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
@@ -244,7 +244,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 20%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@@ -267,12 +267,19 @@ $colorLimitRedIc: #ff4222;
 
 // Status
 $colorAlert: #ff3c00;
+$colorAlertFg: #fff;
 $colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
 $colorCommand: #3693bd;
+$colorCommandFg: #fff;
 $colorInfo: #2294a2;
+$colorInfoFg: #fff;
 $colorOk: #33cc33;
+$colorOkFg: #fff;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
diff --git a/src/styles-new/_constants-maelstrom.scss b/src/styles-new/_constants-maelstrom.scss
index 548efabdcf..37bafd7fb5 100644
--- a/src/styles-new/_constants-maelstrom.scss
+++ b/src/styles-new/_constants-maelstrom.scss
@@ -177,9 +177,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.6);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.6);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: $colorDropHint;
@@ -248,7 +248,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 20%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1.3); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@@ -271,12 +271,19 @@ $colorLimitRedIc: #ff4222;
 
 // Status
 $colorAlert: #ff3c00;
+$colorAlertFg: #fff;
 $colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
 $colorCommand: #3693bd;
+$colorCommandFg: #fff;
 $colorInfo: #2294a2;
+$colorInfoFg: #fff;
 $colorOk: #33cc33;
+$colorOkFg: #fff;
 
 // Bubble colors
 $colorInfoBubbleBg: #dddddd;
diff --git a/src/styles-new/_constants-mobile.scss b/src/styles-new/_constants-mobile.scss
index 437185aa01..8016fa1d63 100644
--- a/src/styles-new/_constants-mobile.scss
+++ b/src/styles-new/_constants-mobile.scss
@@ -27,8 +27,8 @@ $mobileListIconSize: 30px;
 $mobileTitleDescH: 35px;
 $mobileOverlayMargin: 20px;
 $mobileMenuIconD: 34px;
-$phoneItemH: floor($ueBrowseGridItemLg/4);
-$tabletItemH: floor($ueBrowseGridItemLg/3);
+$phoneItemH: floor($gridItemMobile / 4);
+$tabletItemH: floor($gridItemMobile / 3);
 
 /************************** MOBILE TREE MENU DIMENSIONS */
 $mobileTreeItemH: 35px;
diff --git a/src/styles-new/_constants-snow.scss b/src/styles-new/_constants-snow.scss
index d5e35f9b2a..bb1adae2d7 100644
--- a/src/styles-new/_constants-snow.scss
+++ b/src/styles-new/_constants-snow.scss
@@ -173,9 +173,9 @@ $colorBtnMajorFgHov: pushBack($colorBtnMajorFg, 10%);
 $colorBtnCautionBg: #f16f6f;
 $colorBtnCautionBgHov: #f1504e;
 $colorBtnCautionFg: $colorBtnFg;
-$colorClickIcon: $colorKey;
-$colorClickIconBgHov: rgba($colorKey, 0.2);
-$colorClickIconFgHov: $colorKeyHov;
+$colorClickIconButton: $colorKey;
+$colorClickIconButtonBgHov: rgba($colorKey, 0.2);
+$colorClickIconButtonFgHov: $colorKeyHov;
 $colorDropHint: $colorKey;
 $colorDropHintBg: pushBack($colorDropHint, 10%);
 $colorDropHintBgHov: pushBack($colorDropHint, 40%);
@@ -244,7 +244,7 @@ $overlayColorFg: $colorMenuFg;
 $colorOvrBtnBg: pullForward($overlayColorBg, 40%);
 $colorOvrBtnFg: #fff;
 $overlayCr: $interiorMarginLg;
-$overlayBrightnessAdjust: brightness(1.3);
+$overlayBrightnessAdjust: brightness(1); // Applied in a filter: property
 
 // Indicator colors
 $colorIndicatorAvailable: $colorKey;
@@ -267,12 +267,19 @@ $colorLimitRedIc: #ffa99a;
 
 // Status
 $colorAlert: #ff3c00;
+$colorAlertFg: #fff;
 $colorWarningHi: #990000;
+$colorWarningHiFg: #FF9594;
 $colorWarningLo: #ff9900;
+$colorWarningLoFg: #523400;
 $colorDiagnostic: #a4b442;
+$colorDiagnosticFg: #39461A;
 $colorCommand: #3693bd;
+$colorCommandFg: #fff;
 $colorInfo: #2294a2;
+$colorInfoFg: #fff;
 $colorOk: #33cc33;
+$colorOkFg: #fff;
 
 // Bubble colors
 $colorInfoBubbleBg: $colorMenuBg;
diff --git a/src/styles-new/_constants.scss b/src/styles-new/_constants.scss
index 36a614b26b..7a2c78bd0a 100644
--- a/src/styles-new/_constants.scss
+++ b/src/styles-new/_constants.scss
@@ -81,6 +81,9 @@ $waitSpinnerD: 32px;
 $waitSpinnerTreeD: 20px;
 $waitSpinnerBorderW: 5px;
 $waitSpinnerTreeBorderW: 4px;
+/*************** Messages */
+$messageIconD: 80px;
+$messageListIconD: 32px;
 
 /************************** MOBILE */
 $mobileMenuIconD: 24px; // Used
diff --git a/src/styles-new/_controls.scss b/src/styles-new/_controls.scss
index b6dc3208bd..17b62d368c 100644
--- a/src/styles-new/_controls.scss
+++ b/src/styles-new/_controls.scss
@@ -55,9 +55,13 @@ button {
 }
 
 /********* Icon Buttons */
-.c-click-icon,
-.c-click-swatch {
+.c-click-icon {
     @include cClickIcon();
+}
+
+.c-icon-button,
+.c-click-swatch {
+    @include cClickIconButton();
 
     &--menu {
         &:after {
@@ -70,8 +74,8 @@ button {
     }
 }
 
-.c-click-icon {
-    .c-click-icon__label {
+.c-icon-button {
+    .c-icon-button__label {
         margin-left: $interiorMargin;
     }
 
@@ -508,12 +512,12 @@ select {
         @include cToolbarSeparator();
     }
 
-    .c-click-icon,
+    .c-icon-button,
     .c-labeled-input {
         color: $editUIBaseColorFg;
     }
 
-    .c-click-icon {
+    .c-icon-button {
         @include cControl();
         $pLR: $interiorMargin - 1;
         $pTB: 2px;
@@ -567,9 +571,8 @@ select {
 
     &[class*='--strip'] {
         // Buttons are smashed together with minimal margin
-        // c-buttons don't have border-radius between buttons, creates a horizontal tool-button-strip look
-        // c-click-icons get grouped more closely together
-
+        // c-buttons don't have border-radius between buttons, creates a tool-button-strip look
+        // c-icon-buttons get grouped more closely together
         [class^="c-button"] {
             // Only apply the following to buttons that have background, eg. c-button
             border-radius: 0;
diff --git a/src/styles-new/_forms.scss b/src/styles-new/_forms.scss
index 54b3ed1e11..02ce5de0b6 100644
--- a/src/styles-new/_forms.scss
+++ b/src/styles-new/_forms.scss
@@ -338,7 +338,6 @@
     }
 }
 
-
 mct-form.validates {
     .form-row.validates {
         > .label {
diff --git a/src/styles-new/_legacy-messages.scss b/src/styles-new/_legacy-messages.scss
new file mode 100644
index 0000000000..10bcab25cc
--- /dev/null
+++ b/src/styles-new/_legacy-messages.scss
@@ -0,0 +1,144 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2018, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+/******************************************************************* MESSAGES */
+.w-message-contents {
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+
+    > * + * {
+        margin-bottom: $interiorMargin;
+    }
+
+    .message-body {
+        flex: 1 1 100%;
+    }
+}
+
+// Singleton in an overlay dialog
+.t-message-single .l-message,
+.t-message-single.l-message {
+    $iconW: $messageListIconD;
+    &:before {
+        font-size: $iconW;
+        width: $iconW + 2;
+    }
+    .title {
+        font-size: 1.2em;
+    }
+}
+
+// Singleton inline in a view
+.t-message-inline .l-message,
+.t-message-inline.l-message {
+    border-radius: $controlCr;
+    &.message-severity-info { background-color: rgba($colorInfo, 0.3); }
+    &.message-severity-alert { background-color: rgba($colorWarningLo, 0.3); }
+    &.message-severity-error { background-color: rgba($colorWarningHi, 0.3); }
+
+    .w-message-contents.l-message-body-only {
+        .message-body {
+            margin-top: $interiorMargin;
+        }
+    }
+}
+
+// In a list
+.c-overlay__messages {
+    //@include abs();
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+    padding-right: $interiorMargin;
+
+    > div,
+    > span {
+        margin-bottom: $interiorMargin;
+    }
+
+    .w-messages {
+        flex: 1 1 100%;
+        overflow-y: auto;
+        padding-right: $interiorMargin;
+    }
+    // Each message
+    .c-message {
+        @include discreteItem();
+        flex: 0 0 auto;
+        margin-bottom: $interiorMarginSm;
+
+        .hint,
+        .bottom-bar {
+            text-align: left;
+        }
+    }
+
+}
+
+@include phonePortrait {
+    .t-message-single .l-message,
+    .t-message-single.l-message {
+        flex-direction: column;
+        &:before {
+            margin-right: 0;
+            margin-bottom: $interiorMarginLg;
+            text-align: center;
+            width: 100%;
+        }
+
+        .bottom-bar {
+            text-align: center;
+            .s-button {
+                display: block;
+                width: 100%;
+            }
+        }
+    }
+}
+
+body.desktop .t-message-list {
+    .w-message-contents { padding-right: $interiorMargin; }
+}
+
+// Alert elements in views
+mixin sUnSynced() {
+    $c: $colorPausedBg;
+    border: 1px solid $c;
+}
+
+.s-unsynced {
+    @include sUnsynced();
+}
+
+.s-status-timeconductor-unsynced {
+    // Plot areas
+    .gl-plot .gl-plot-display-area {
+        @include sUnsynced();
+    }
+
+    // Object headers
+    .object-header {
+        .t-object-alert {
+            display: inline;
+        }
+    }
+}
diff --git a/src/styles-new/_legacy.scss b/src/styles-new/_legacy.scss
index f3e8b5c1be..a00585a262 100644
--- a/src/styles-new/_legacy.scss
+++ b/src/styles-new/_legacy.scss
@@ -314,7 +314,7 @@ body.mobile.phone {
         transition: $transOut;
         width: 0;
 
-        .c-click-icon:before { font-size: 1em; }
+        .c-icon-button:before { font-size: 1em; }
     }
 
     &__direction {
@@ -797,6 +797,7 @@ mct-indicators mct-include {
     display: inline-block;
     position: relative;
     padding: 1px $interiorMarginSm; // Use padding instead of margin to keep hover chatter to a minimum
+    text-transform: uppercase;
 
     &:before {
         display: inline-block;
@@ -806,7 +807,8 @@ mct-indicators mct-include {
         display: inline-block;
         a,
         button,
-        .s-button {
+        s-button,
+        .c-button {
             // Make <a> in label look like buttons
             transition: $transIn;
             background: transparent;
@@ -831,8 +833,6 @@ mct-indicators mct-include {
                 margin-right: $interiorMarginSm;
             }
         }
-
-        button { text-transform: uppercase !important; }
     }
 
     &.no-collapse {
diff --git a/src/styles-new/_mixins.scss b/src/styles-new/_mixins.scss
index 6a162d49a6..7325ce3b0d 100644
--- a/src/styles-new/_mixins.scss
+++ b/src/styles-new/_mixins.scss
@@ -51,33 +51,15 @@
 
 /************************** EFFECTS */
 @mixin pulse($animName: pulse, $dur: 500ms, $iteration: infinite, $opacity0: 0.5, $opacity100: 1) {
-    @include keyframes($animName) {
+    @keyframes pulse {
         0%   { opacity: $opacity0; }
         100% { opacity: $opacity100; }
     }
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-direction(alternate);
-    @include animation-iteration-count($iteration);
-    @include animation-timing-function(ease-in-out);
-}
-
-@mixin animTo($animName, $propName, $propValStart, $propValEnd, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include keyframes($animName) {
-        from { #{propName}: $propValStart; }
-        to { #{$propName}: $propValEnd; }
-    }
-    @include animToParams($animName, $dur: $dur, $delay: $delay, $dir: $dir, $count: $count)
-}
-
-@mixin animToParams($animName, $dur: 500ms, $delay: 0, $dir: normal, $count: 1) {
-    @include animation-name($animName);
-    @include animation-duration($dur);
-    @include animation-delay($delay);
-    @include animation-fill-mode(both);
-    @include animation-direction($dir);
-    @include animation-iteration-count($count);
-    @include animation-timing-function(ease-in-out);
+    animation-name: $animName;
+    animation-duration: $dur;
+    animation-direction: alternate;
+    animation-iteration-count: $iteration;
+    animation-timing-function: ease-in-out;
 }
 
 /************************** VISUALS */
@@ -412,24 +394,37 @@
     }
 }
 
+
 @mixin cClickIcon() {
-    // A clickable element that just includes the icon, no background
+    @include cControl();
+    cursor: pointer;
+    padding: 4px; // Bigger hit area
+    opacity: 0.6;
+    transition: $transOut;
+    transform-origin: center;
+
+    @include hover() {
+        transform: scale(1.1);
+        transition: $transIn;
+        opacity: 1;
+    }
+}
+
+@mixin cClickIconButton() {
+    // A clickable element that just includes the icon
+    // Background is displayed on hover
     // Padding is included to facilitate a bigger hit area
     // Make the icon bigger relative to its container
     @include cControl();
-    $pLR: 4px;
-    $pTB: 4px;
     background: none;
     box-shadow: none;
-    border-radius: $controlCr;
     cursor: pointer;
+    $pLR: 4px;
+    $pTB: 4px;
+    transition: $transOut;
+    border-radius: $controlCr;
     padding: $pTB $pLR;
 
-    @include hover() {
-        background: $colorClickIconBgHov;
-        color: $colorClickIconFgHov;
-    }
-
     &:before,
     *:before {
         // *:before handles any nested containers that may contain glyph elements
@@ -437,6 +432,12 @@
         font-size: 1.25em;
     }
 
+    @include hover() {
+        transition: $transIn;
+        background: $colorClickIconButtonBgHov;
+        color: $colorClickIconButtonFgHov;
+    }
+
     &[class*="--major"] {
         color: $colorKey;
     }
diff --git a/src/styles-new/core.scss b/src/styles-new/core.scss
index f3c4f5ab43..a07cf588c8 100644
--- a/src/styles-new/core.scss
+++ b/src/styles-new/core.scss
@@ -24,6 +24,7 @@
 @import "sass-base";
 
 /******************** RENDERS CSS */
+@import "about";
 @import "glyphs";
 @import "global";
 @import "status";
diff --git a/src/styles-new/sass-base.scss b/src/styles-new/sass-base.scss
index ca9aea73e2..50bb54867a 100644
--- a/src/styles-new/sass-base.scss
+++ b/src/styles-new/sass-base.scss
@@ -24,6 +24,7 @@
 // Meant for use as a single line import in Vue SFC's.
 // Do not include anything that renders to CSS!
 @import "constants";
+@import "constants-mobile.scss";
 @import "constants-espresso"; // TEMP
 //@import "constants-snow"; // TEMP
 //@import "constants-maelstrom";
diff --git a/src/ui/layout/AboutDialog.vue b/src/ui/layout/AboutDialog.vue
index 7829450d44..a3c4ed51a4 100644
--- a/src/ui/layout/AboutDialog.vue
+++ b/src/ui/layout/AboutDialog.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="c-about c-about--splash">
     <div v-if="branding.aboutHtml" class="s-text l-content" v-html="branding.aboutHtml"></div>
-    <div v-else class="c-about__image"></div>
+    <div v-else class="c-about__image c-splash-image"></div>
 
     <div class="c-about__text s-text">
         <h1 class="l-title s-title">Open MCT</h1>
diff --git a/src/ui/layout/BrowseBar.vue b/src/ui/layout/BrowseBar.vue
index 4811d4ceb3..3321115749 100644
--- a/src/ui/layout/BrowseBar.vue
+++ b/src/ui/layout/BrowseBar.vue
@@ -2,7 +2,7 @@
     <div class="l-browse-bar">
         <div class="l-browse-bar__start">
             <button v-if="hasParent"
-                class="l-browse-bar__nav-to-parent-button c-click-icon c-click-icon--major icon-pointer-left" 
+                class="l-browse-bar__nav-to-parent-button c-icon-button c-icon-button--major icon-pointer-left"
                 @click="goToParent"></button>
             <div class="l-browse-bar__object-name--w"
                  :class="type.cssClass">
diff --git a/src/ui/layout/Layout.vue b/src/ui/layout/Layout.vue
index c43e4319c8..98c4953487 100644
--- a/src/ui/layout/Layout.vue
+++ b/src/ui/layout/Layout.vue
@@ -5,11 +5,11 @@
         <div class="l-shell__head">
             <CreateButton class="l-shell__create-button"></CreateButton>
             <div class="l-shell__controls">
-                <button class="c-click-icon c-click-icon--major icon-new-window" title="Open in a new browser tab"
+                <button class="c-icon-button c-icon-button--major icon-new-window" title="Open in a new browser tab"
                     @click="openInNewTab"
                     target="_blank">
                 </button>
-                <button v-bind:class="['c-click-icon c-click-icon--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
+                <button v-bind:class="['c-icon-button c-icon-button--major', fullScreen ? 'icon-fullscreen-collapse' : 'icon-fullscreen-expand']"
                     v-bind:title="`${fullScreen ? 'Exit' : 'Enable'} full screen mode`"
                     @click="fullScreenToggle">
                 </button>
@@ -74,7 +74,7 @@
             [class*="collapse-button"] {
                 // For mobile, collapse button becomes menu icon
                 body.mobile & {
-                    @include cClickIcon();
+                    @include cClickIconButton();
                     position: absolute;
                     right: -2 * nth($shellPanePad, 2); // Needs to be -1 * when pane is collapsed
                     top: 0;
diff --git a/src/ui/layout/status-bar/NotificationBanner.vue b/src/ui/layout/status-bar/NotificationBanner.vue
index 42dc674f56..c6efce384d 100644
--- a/src/ui/layout/status-bar/NotificationBanner.vue
+++ b/src/ui/layout/status-bar/NotificationBanner.vue
@@ -17,7 +17,7 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-<div class="c-message-banner s-message-banner"
+<div class="c-message-banner"
     :class="[
         activeModel.severity,
         {
@@ -31,36 +31,68 @@
             class="c-message-banner__progress-bar"
             v-if="activeModel.progressPerc !== undefined" :model="activeModel">
     </progress-bar>
-    <button class="c-message-banner__close-btn c-click-icon icon-x"
-            @click="dismiss()"></button>
+    <button class="c-message-banner__close-button c-click-icon icon-x-in-circle"
+            @click.stop="dismiss()"></button>
 </div>
 </template>
 
 <style lang="scss">
     @import "~styles/sass-base";
 
+    @mixin statusBannerColors($bg, $fg: $colorStatusFg) {
+        $bgPb: 10%;
+        $bgPbD: 10%;
+        background-color: darken($bg, $bgPb);
+        color: $fg;
+        &:hover {
+            background-color: darken($bg, $bgPb - $bgPbD);
+        }
+        .s-action {
+            background-color: darken($bg, $bgPb + $bgPbD);
+            &:hover {
+                background-color: darken($bg, $bgPb);
+            }
+        }
+    }
+
     .c-message-banner {
         $closeBtnSize: 7px;
         $m: 1px;
 
+        border-radius: $controlCr;
+        @include statusBannerColors($colorStatusDefault, $colorStatusFg);
+        cursor: pointer;
+
         display: flex;
         align-items: center;
         left: 50%;
         max-width: 50%;
-        padding: $interiorMargin $interiorMarginLg;
+        padding: $interiorMargin $interiorMargin $interiorMargin $interiorMarginLg;
         position: absolute;
         transform: translateX(-50%);
         bottom: $m;
         z-index: 2;
 
-        // TODOs:
-        // - Styling for message types, add color values to theme scss files
-        // - Factor out s-message-banner
-
         > * + * {
             margin-left: $interiorMargin;
         }
 
+        &.ok {
+            @include statusBannerColors($colorOk, $colorOkFg);
+        }
+
+        &.info {
+            @include statusBannerColors($colorInfo, $colorInfoFg);
+        }
+        &.caution,
+        &.warning,
+        &.alert {
+            @include statusBannerColors($colorWarningLo,$colorWarningLoFg);
+        }
+        &.error {
+            @include statusBannerColors($colorWarningHi, $colorWarningHiFg);
+        }
+
         &__message {
             @include ellipsize();
             flex: 1 1 auto;
@@ -78,29 +110,10 @@
             }
         }
 
-        &__close-btn {
-            font-size: $closeBtnSize;
+        &__close-button {
+            font-size: 1.25em;
         }
-
     }
-
-
-
-
-
-
-
-
-   /*
-
-    .l-message-banner {
-        display: flex;
-        left: 50%;
-        position: absolute;
-    }
-    .banner-elem {
-        display: inline;
-    }*/
 </style>
 
 <script>
@@ -176,6 +189,7 @@
             },
             destroyActiveNotification() {
                 this.clearModel();
+                activeNotification.off('destroy', this.destroyActiveNotification);
                 activeNotification = undefined;
             },
             dismiss() {
@@ -189,7 +203,6 @@
                 this.activeModel.minimized = true;
                 activeNotification.off('progress', this.updateProgress);
                 activeNotification.off('minimized', this.minimized);
-                activeNotification.off('destroy', this.destroyActiveNotification);
 
                 activeNotification.off('progress', updateMaxProgressBar);
                 activeNotification.off('minimized', dismissMaximizedDialog);
diff --git a/src/ui/toolbar/components/toolbar-button.vue b/src/ui/toolbar/components/toolbar-button.vue
index 3c99ff5361..57eee92543 100644
--- a/src/ui/toolbar/components/toolbar-button.vue
+++ b/src/ui/toolbar/components/toolbar-button.vue
@@ -1,13 +1,13 @@
 <template>
     <div class="c-ctrl-wrapper">
-        <div class="c-click-icon"
+        <div class="c-icon-button"
             :title="options.title"
             :class="{
                 [options.icon]: true,
-                'c-click-icon--caution': options.modifier === 'caution'
+                'c-icon-button--caution': options.modifier === 'caution'
             }"
             @click="onClick">
-            <div class="c-click-icon__label"
+            <div class="c-icon-button__label"
                  v-if="options.label">
                 {{ options.label }}
             </div>
diff --git a/src/ui/toolbar/components/toolbar-color-picker.vue b/src/ui/toolbar/components/toolbar-color-picker.vue
index d32339be26..08d5c6a81a 100644
--- a/src/ui/toolbar/components/toolbar-color-picker.vue
+++ b/src/ui/toolbar/components/toolbar-color-picker.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="c-ctrl-wrapper">
-        <div class="c-click-icon c-click-icon--swatched"
+        <div class="c-icon-button c-icon-button--swatched"
              :class="options.icon"
              :title="options.title"
              @click="toggle">
diff --git a/src/ui/toolbar/components/toolbar-menu.vue b/src/ui/toolbar/components/toolbar-menu.vue
index 5d803c443a..f1c6f18475 100644
--- a/src/ui/toolbar/components/toolbar-menu.vue
+++ b/src/ui/toolbar/components/toolbar-menu.vue
@@ -1,10 +1,10 @@
 <template>
     <div class="c-ctrl-wrapper">
-        <div class="c-click-icon c-click-icon--menu"
+        <div class="c-icon-button c-icon-button--menu"
              :class="options.icon"
              :title="options.title"
              @click="toggle">
-            <div class="c-click-icon__label"
+            <div class="c-icon-button__label"
                  v-if="options.label">
                 {{ options.label }}
             </div>
diff --git a/src/ui/toolbar/components/toolbar-select-menu.vue b/src/ui/toolbar/components/toolbar-select-menu.vue
index ea4e69d2e2..8d07413eb5 100644
--- a/src/ui/toolbar/components/toolbar-select-menu.vue
+++ b/src/ui/toolbar/components/toolbar-select-menu.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="c-ctrl-wrapper">
-        <div class="c-click-icon c-click-icon--menu"
+        <div class="c-icon-button c-icon-button--menu"
              :class="options.icon"
              :title="options.title"
              @click="toggle">
diff --git a/src/ui/toolbar/components/toolbar-toggle-button.vue b/src/ui/toolbar/components/toolbar-toggle-button.vue
index 0f5cd6a143..e2400062fe 100644
--- a/src/ui/toolbar/components/toolbar-toggle-button.vue
+++ b/src/ui/toolbar/components/toolbar-toggle-button.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="c-ctrl-wrapper">
-        <div class="c-click-icon"
+        <div class="c-icon-button"
              :title="nextValue.title"
              :class="nextValue.icon"
              @click="cycle">