diff --git a/core/modules/outside_in/css/outside_in.messages.css b/core/modules/outside_in/css/outside_in.messages.css
new file mode 100644
index 0000000..cde8707
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.messages.css
@@ -0,0 +1,74 @@
+/**
+ * @file
+ * Visual styling for messages in the Outside-In modules off canvas tray.
+ */
+
+/* Style messages for offcanvas tray. */
+.ui-dialog-offcanvas .messages {
+  box-shadow: none;
+  background-repeat: no-repeat;
+  /* Y value aligns icon with the first line of text so icon doesn't get pushed down on long messages. */
+  background-position: 10px 18px; /* LTR */
+  padding-top: 15px;
+  padding-right: 10px; /* LTR */
+  padding-bottom: 15px;
+  /* Provide space for icon and asterisk. */
+  padding-left: 35px; /* LTR */
+  /* Negative margins cancel out padding on the parent. */
+  margin-top: 10px;
+  margin-right: -20px;
+  margin-bottom: 10px;
+  margin-left: -20px;
+  border-top: 1px solid transparent;
+  border-right: 0;
+  border-bottom: 1px solid transparent;
+  border-left: 0;
+  border-radius: 0;
+  /* Wide left border for message type color strip. */
+  border-left-width: 5px; /* LTR */
+  border-style: solid;
+  word-wrap: break-word;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages {
+  background-position: 93% 18px;
+  padding-left: 10px;
+  padding-right: 35px;
+  border-left-width: 0;
+  border-right-width: 5px;
+  text-align: right;
+}
+.ui-dialog-offcanvas .messages + .messages {
+  margin-top: 1px;
+}
+.ui-dialog-offcanvas .messages__list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.ui-dialog-offcanvas .messages__item + .messages__item {
+  margin-top: 0;
+}
+.ui-dialog-offcanvas .messages--status {
+  background-image: url(../../../misc/icons/73b355/check.svg);
+  border-left-color: #77b259;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--status {
+  border-right-color: #77b259;
+}
+.ui-dialog-offcanvas .messages--warning {
+  background-image: url(../../../misc/icons/e29700/warning.svg);
+  border-left-color: #e09600;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--warning {
+  border-right-color: #e09600;
+}
+.ui-dialog-offcanvas .messages--error {
+  background-image: url(../../../misc/icons/e32700/error.svg);
+  border-left-color: #e62600;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--error {
+  border-right-color: #e62600;
+}
+.ui-dialog-offcanvas .messages--error p.error {
+  color: #fff;
+}
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 4da0765..98e668a 100644
--- a/core/modules/outside_in/css/outside_in.theme.css
+++ b/core/modules/outside_in/css/outside_in.theme.css
@@ -74,7 +74,7 @@
   background: #444;
   border: 0px solid transparent;
   border-radius: 0;
-  box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.3333);
+  box-shadow: 0 0 1px 2px rgba(126, 126, 126, 0.5);
   padding: 0;
   color: #ddd;
   /* Layer the dialog just under the toolbar. */
@@ -182,9 +182,9 @@
 }
 
 /* Override default styling from jquery UI. */
-.ui-state-default,
-.ui-widget-content .ui-state-default,
-.ui-widget-header .ui-state-default {
+.ui-dialog-offcanvas .ui-state-default,
+.ui-dialog-offcanvas .ui-widget-content .ui-state-default,
+.ui-dialog-offcanvas .ui-widget-header .ui-state-default {
   border: 0;
   font-weight: normal;
   font-size: 14px;
@@ -309,7 +309,7 @@
   overflow: hidden;
   color: #fff;
 }
-.js .dropbutton-toggle .dropbutton-arrow:hover {
+.ui-dialog-offcanvas .js .dropbutton-toggle .dropbutton-arrow:hover {
   background: transparent;
 }
 .ui-dialog-offcanvas td .dropbutton-multiple {
diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml
index 6fbcd1e..579cd84 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -3,18 +3,17 @@ drupal.outside_in:
   js:
     js/outside_in.js: {}
   css:
-    component:
-      css/outside_in.module.css: {}
-      css/outside_in.motion.css: {}
-      css/outside_in.form.css: {}
-      css/outside_in.table.css: {}
-      css/outside_in.details.css: {}
-      css/outside_in.tabledrag.css: {}
-    theme:
-      # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
-      #   both jQuery UI and Classy's dialog.css, remove in
-      #   https://www.drupal.org/node/1945262.
-      css/outside_in.theme.css: { group: 200 }
+    - css/outside_in.module.css: {}
+    - css/outside_in.form.css: {}
+    - css/outside_in.table.css: {}
+    - css/outside_in.details.css: {}
+    - css/outside_in.tabledrag.css: {}
+    - css/outside_in.motion.css: {}
+    - css/outside_in.messages.css: {}
+    # @todo Set the group higher than CSS_AGGREGATE_THEME so that it overrides
+    #   both jQuery UI and Classy's dialog.css, remove in
+    #   https://www.drupal.org/node/1945262.
+    - css/outside_in.theme.css: { group: 200 }
   dependencies:
     - core/jquery
     - core/drupal