diff --git a/templates/zerver/portico-header.html b/templates/zerver/portico-header.html
index 122765ff8d..2e421e7e66 100644
--- a/templates/zerver/portico-header.html
+++ b/templates/zerver/portico-header.html
@@ -15,13 +15,13 @@
                 </a>
 
                 {% if page_is_help_center %}
-                <span class="light"> | <a href="{{ root_domain_url }}/help/">{{ doc_root_title }}</a></span>
+                <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/help/">{{ doc_root_title }}</a></span>
                 {% endif %}
                 {% if page_is_api_center %}
-                <span class="light"> | <a href="{{ root_domain_url }}/api/">{{ doc_root_title }}</a></span>
+                <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/api/">{{ doc_root_title }}</a></span>
                 {% endif %}
                 {% if page_is_policy_center %}
-                <span class="light"> | <a href="{{ root_domain_url }}/policies/">{{ doc_root_title }}</a></span>
+                <span class="light portico-header-text"> | <a href="{{ root_domain_url }}/policies/">{{ doc_root_title }}</a></span>
                 {% endif %}
             </div>
             {% endif %}
diff --git a/web/styles/portico/portico_signin.css b/web/styles/portico/portico_signin.css
index 9ddfc97996..226cee1dcf 100644
--- a/web/styles/portico/portico_signin.css
+++ b/web/styles/portico/portico_signin.css
@@ -297,7 +297,8 @@ html {
     top: 0;
 
     .top-links a,
-    .header-main .logo span {
+    /* specificity to override the color of `.light` */
+    .header-main .logo .portico-header-text {
         color: hsl(0deg 0% 27%);
     }
 }