diff --git a/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss b/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss
index e735ce96..ab1cff79 100644
--- a/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss
+++ b/web/app/themes/mitlib-parent/css/scss/modules/_colors.scss
@@ -144,3 +144,20 @@ $color-guides-experts: $magenta-dark;
 	background: linear-gradient(45deg,  #5889c2 0%,#3fa0c9 100%); /* W3C */
 	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5889c2', endColorstr='#3fa0c9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 }
+
+// Alert Semantic Variables
+// Adding new color values until we can adjust the global variables above
+$info-blue: #007499;
+$success-green: #009900;
+
+$info-border-color: $info-blue;
+$info-icon-color: $info-blue;
+
+$warning-border-color: $yellow;
+$warning-icon-color: $black;
+
+$danger-border-color: $red;
+$danger-icon-color: $red;
+
+$success-border-color: $success-green;
+$success-icon-color: $success-green;
\ No newline at end of file
diff --git a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss
index ed755607..db12440c 100644
--- a/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss
+++ b/web/app/themes/mitlib-parent/css/scss/partials/_alerts.scss
@@ -97,3 +97,78 @@
 		padding: 1% 5%;
 	}
 }
+
+.mitlib-alert {
+	border: 4px solid $info-border-color;
+	margin-bottom: 20px;
+	padding: 16px;
+	display: flex;
+
+	i  {
+		margin-right: 12px;
+
+		&:before{
+			color: $info-icon-color;
+			content: "\f05a";
+
+			font-family: FontAwesome;
+			font-weight: normal;
+			font-size: 24px;
+			font-style: normal;
+			display: inline-block;
+			text-decoration: inherit;
+		}
+	}
+
+	div > h3 {
+		font-weight: 700;
+		margin-top: 2px;
+	}
+
+	p {
+		margin-bottom: 16px;
+
+		&:last-of-type {margin-bottom: 0 !important;}
+	}
+
+	.btn {
+		border: 1px solid $black;
+		border-radius: 0;
+		padding: 6px 12px;
+		text-decoration: none;
+		font-size: 16px;
+		font-weight: 600;
+
+		&:hover {
+			color: $white;
+			background-color: $black;
+		}
+	}
+
+	&.warning {
+		border-color: $warning-border-color;
+
+		i:before {
+			color: $warning-icon-color;
+			content: "\f06a";
+		}
+	}
+
+	&.danger {
+		border-color: $danger-border-color;
+
+		i:before {
+			color: $danger-icon-color;
+			content: "\f05e";
+		}
+	}
+
+	&.success {
+		border-color: $success-border-color;
+
+		i:before {
+			color: $success-icon-color;
+			content: "\f046";
+		}
+	}
+}
\ No newline at end of file