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/outside_in.libraries.yml b/core/modules/outside_in/outside_in.libraries.yml
index 5eddea4..234dc1c 100644
--- a/core/modules/outside_in/outside_in.libraries.yml
+++ b/core/modules/outside_in/outside_in.libraries.yml
@@ -10,6 +10,7 @@ drupal.outside_in:
       css/outside_in.table.css: {}
       css/outside_in.details.css: {}
       css/outside_in.tabledrag.css: {}
+      css/outside_in.messages.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