diff --git a/core/css/decanter.css b/core/css/decanter.css
index a5db57bae..4372245a7 100644
--- a/core/css/decanter.css
+++ b/core/css/decanter.css
@@ -2467,7 +2467,10 @@ button,
   -webkit-font-variant-ligatures: discretionary-ligatures;
   font-variant-ligatures: discretionary-ligatures;
   -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale; }
+  -moz-osx-font-smoothing: grayscale;
+  color: #8c1515; }
+  .su-logo:hover, .su-logo:active, .su-logo:focus {
+    color: #8c1515; }
 
 .su-quote {
   padding: 1em;
diff --git a/core/scss/components/logo/_logo.scss b/core/scss/components/logo/_logo.scss
index 162fd15f9..b85800a18 100644
--- a/core/scss/components/logo/_logo.scss
+++ b/core/scss/components/logo/_logo.scss
@@ -6,10 +6,17 @@
 // For displaying the Stanford University logo using custom font and glyphs.
 // Can be used with the generic logo twig template.
 //
-// Markup: <a href="/" class="logo">Stanford<br>University</a>
+// Markup: ../templates/components/logo/logo.twig
 //
 // Style guide: Components.Logo
 //
 .su-logo {
   @include logo;
+  color: $color-cardinal-red;
+
+  &:hover,
+  &:active,
+  &:focus {
+    color: $color-cardinal-red;
+  }
 }
diff --git a/core/templates/components/logo/logo.json b/core/templates/components/logo/logo.json
new file mode 100644
index 000000000..dbcedc294
--- /dev/null
+++ b/core/templates/components/logo/logo.json
@@ -0,0 +1,4 @@
+{
+  "href": "https://www.stanford.edu",
+  "logo_text": "Stanford<br>University"
+}
diff --git a/core/templates/components/logo/logo.twig b/core/templates/components/logo/logo.twig
index d332aca93..65706db39 100644
--- a/core/templates/components/logo/logo.twig
+++ b/core/templates/components/logo/logo.twig
@@ -1,3 +1,15 @@
-<a{{ attributes }} class="su-logo {{ modifier_class }}" href="{{ href|default('https://www.stanford.edu') }}" >
-  <img src="{{ src|default("../../img/footer-stanford-logo@2x.png") }}" alt="{{ alt|default("Stanford University") }}" />
-</a>
+{#
+/**
+ * @file
+ * Logo Component
+ *
+ * The Stanford wordmark logo rendered with the custom Stanford ligature font.
+ *
+ * Available variables:
+ * - attributes: For additional HTML attributes not already provided.
+ * - modifier_class: Additional CSS classes to change look and behaviour.
+ * - href: The URL that the logo links to.
+ * - logo_text: The text for the ligature logo - either Stanford<br>University or Stanford.
+ */
+#}
+<a{{ attributes }} class="su-logo {{ modifier_class }}" href="{{ href|default('https://www.stanford.edu') }}">{{ logo_text|default('Stanford<br>University')|raw }}</a>