diff --git a/css/src/components/messages.css b/css/src/components/messages.css
index 242dead..074be69 100644
--- a/css/src/components/messages.css
+++ b/css/src/components/messages.css
@@ -1,12 +1,15 @@
 /**
  * Messages.
  */
-.messages {
-  margin: 9px 0 10px 8px; /* LTR */
-}
-[dir="rtl"] .messages {
-  margin: 9px 8px 10px 0;
+
+:root {
+  --message-color-status: #1f7a68;
+  --message-color-warning: #c7880a;
+  --message-color-error: #d72222;
+  --message-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  --message-border-radius: 4px;
 }
+
 .messages pre {
   margin: 0;
 }
@@ -24,3 +27,47 @@
 .messages .heading-f {
   margin-top: 0;
 }
+
+.messages {
+  background-color: var(--color-white);
+  background-position: var(--space-m) var(--space-m); /* LTR */
+  background-size: calc(2 * var(--space-m)) calc(2 * var(--space-m));
+  line-height: var(--line-height);
+  font-size: var(--font-size-s);
+  color: var(--color-text);
+  box-shadow: var(--message-box-shadow);
+  border-radius: var(--message-border-radius);
+  padding: var(--space-m);
+  padding-left: calc(4 * var(--space-m)); /* LTR */
+  min-height: calc(2 * var(--space-m));
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+[dir="rtl"] .messages {
+  padding-left: var(--space-m);
+  padding-right: calc(4 * var(--space-m));
+  background-position: right var(--space-m) top var(--space-m);
+}
+
+.messages--status,
+[dir="rtl"] .messages--status {
+  background-image: url(../../../images/src/message--success.svg);
+  border: 2px solid var(--message-color-status);
+  box-shadow: var(--message-box-shadow);
+}
+
+.messages--warning,
+[dir="rtl"] .messages--warning {
+  background-image: url(../../../images/src/message--warning.svg);
+  border: 2px solid var(--message-color-warning);
+  box-shadow: var(--message-box-shadow);
+}
+
+.messages--error,
+[dir="rtl"] .messages--error {
+  background-image: url(../../../images/src/message--error.svg);
+  border: 2px solid var(--message-color-error);
+  box-shadow: var(--message-box-shadow);
+}
+
diff --git a/images/src/message--error.svg b/images/src/message--error.svg
new file mode 100644
index 0000000..eccbb25
--- /dev/null
+++ b/images/src/message--error.svg
@@ -0,0 +1,5 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 16C1 7.71573 7.71573 1 16 1C24.2843 1 31 7.71573 31 16C31 24.2843 24.2843 31 16 31C7.71573 31 1 24.2843 1 16Z" fill="#D72222" stroke="#D72222" stroke-width="2"/>
+<path d="M10.3433 10.3428L21.657 21.6566" stroke="white" stroke-width="3"/>
+<path d="M10.3433 21.6572L21.657 10.3435" stroke="white" stroke-width="3"/>
+</svg>
\ No newline at end of file
diff --git a/images/src/message--info.svg b/images/src/message--info.svg
new file mode 100644
index 0000000..d1023c0
--- /dev/null
+++ b/images/src/message--info.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="30" height="30" rx="15" fill="#003CC5" stroke="#003CC5" stroke-width="2"/>
+<path d="M17.4784 12.9363H14.5V23H17.4784V12.9363ZM17.5 9H14.5V11.2105H17.5V9Z" fill="white"/>
+</svg>
diff --git a/images/src/message--success.svg b/images/src/message--success.svg
new file mode 100644
index 0000000..9ec334c
--- /dev/null
+++ b/images/src/message--success.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="1" width="30" height="30" rx="15" fill="#1F7A68" stroke="#1F7A68" stroke-width="2"/>
+<path d="M14.3273 21.9618C14.1161 22.1729 13.7688 22.1729 13.5577 21.9618L8.15839 16.5699C7.9472 16.3599 7.9472 16.0116 8.15839 15.8005L9.68782 14.2695C9.899 14.0573 10.2452 14.0573 10.4574 14.2695L13.5588 17.3686C13.7699 17.5786 14.1172 17.5786 14.3284 17.3686L21.5445 10.1583C21.7567 9.94722 22.104 9.94722 22.3141 10.1583L23.8424 11.6861C24.0525 11.8972 24.0525 12.2444 23.8424 12.4555L14.3273 21.9618Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/images/src/message--warning.svg b/images/src/message--warning.svg
new file mode 100644
index 0000000..3dd6db6
--- /dev/null
+++ b/images/src/message--warning.svg
@@ -0,0 +1,4 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="32" height="32" rx="16" fill="#C7880A"/>
+<path d="M22.7128 19.581L17.3539 9.99771C16.6099 8.66743 15.3921 8.66743 14.6472 9.99771L9.2872 19.581C8.54324 20.9122 9.29526 22 10.9586 22H21.0414C22.7047 22 23.4568 20.9122 22.7128 19.581ZM14.9909 12.086H17.0091V16.5923H14.9909V12.086ZM17.2611 19.8505C17.2611 20.1605 16.9778 20.4138 16.6311 20.4138H15.371C15.0232 20.4138 14.7399 20.1605 14.7399 19.8505V18.7338C14.7399 18.4237 15.0232 18.1705 15.371 18.1705H16.6311C16.9778 18.1705 17.2611 18.4237 17.2611 18.7338V19.8505Z" fill="white"/>
+</svg>
\ No newline at end of file