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..196a33c
--- /dev/null
+++ b/core/modules/outside_in/css/outside_in.messages.css
@@ -0,0 +1,79 @@
+/**
+ * @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 */
+  /* Provide space for icon and asterisk. */
+  padding: 15px 10px 15px 35px; /* LTR */
+  /* Negative margins cancel out padding on the parent. */
+  margin-top: 10px;
+  margin-right: -20px;
+  margin-bottom: 10px;
+  margin-left: -20px;
+  /* Specificity needed to reset border style from classy. */
+  border-top-width: 0;
+  border-right-width: 0;
+  border-bottom-width: 0;
+  /* 1. Sets LTR border for all messages. */
+  border-left-width: 5px; /* LTR */
+  border-radius: 0;
+  word-wrap: break-word;
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages {
+  background-position: 93% 18px;
+  padding-left: 10px;
+  padding-right: 35px;
+  /* Classy sets a specific value here that must be overridden. */
+  margin-left: -20px;
+  border-left-width: 0;
+  border-right-width: 5px; /* 2. Sets RTL border for all messages. */
+  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;
+}
+
+/* Common for all message types. */
+.ui-dialog-offcanvas .messages--status,
+.ui-dialog-offcanvas .messages--warning,
+.ui-dialog-offcanvas .messages--error {
+  background-color: #000;
+  color: #fff;
+}
+
+/* Unique Icon and border color for each message type. */
+.ui-dialog-offcanvas .messages--status {
+  background-image: url(../../../misc/icons/73b355/check.svg);
+  border-color: transparent transparent transparent #77b259; /* LTR */
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--status {
+  border-color: transparent #77b259 transparent transparent;
+}
+.ui-dialog-offcanvas .messages--warning {
+  background-image: url(../../../misc/icons/e29700/warning.svg);
+  border-color: transparent transparent transparent #e09600; /* LTR */
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--warning {
+  border-color: transparent #e09600 transparent transparent;
+}
+.ui-dialog-offcanvas .messages--error {
+  background-image: url(../../../misc/icons/e32700/error.svg);
+  border-color: transparent transparent transparent #e62600; /* LTR */
+}
+[dir="rtl"] .ui-dialog-offcanvas .messages--error {
+  border-color: transparent #e62600 transparent transparent;
+}
diff --git a/core/modules/outside_in/css/outside_in.theme.css b/core/modules/outside_in/css/outside_in.theme.css
index 91c01ab..92f9121 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: 0 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. */
@@ -181,9 +181,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;
@@ -308,7 +308,7 @@
   overflow: hidden;
   color: #fff;
 }
-.js .ui-dialog-outside-in .dropbutton-toggle .dropbutton-arrow:hover {
+.ui-dialog-offcanvas .js .dropbutton-toggle .dropbutton-arrow:hover {
   background: transparent;
 }
 .ui-dialog-outside-in td .dropbutton-multiple {
diff --git a/core/modules/outside_in/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml
index 5eddea4..2567296 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