From 64c8a461ec2ce82af7a61f3b9f82f31a02e72f83 Mon Sep 17 00:00:00 2001
From: Scott Cranfill <scranfill@compiler.la>
Date: Wed, 3 Dec 2025 22:21:59 +0000
Subject: [PATCH 1/2] feat: Update all colors to use the DSDL

---
 src/_data/initiatives.yml     |  6 ++---
 src/_includes/home-stats.html |  6 ++---
 src/_layouts/press.html       |  3 +--
 src/_layouts/resource.html    |  3 +--
 src/customer-stories.html     | 16 ++++++-------
 src/partners.html             | 14 +++++------
 src/resources.html            |  2 +-
 src/stylesheet.html           |  4 ++--
 src/stylesheets/core.css      |  5 ++--
 src/stylesheets/homepage.css  |  8 +++----
 src/stylesheets/main.css      | 23 +++++++++---------
 src/stylesheets/nav-pills.css | 10 ++++----
 src/stylesheets/navbar.css    | 16 ++++++-------
 src/stylesheets/tokens.css    |  5 ++++
 src/stylesheets/utilities.css |  4 ++++
 src/stylesheets/variables.css | 44 +++++++++++------------------------
 16 files changed, 80 insertions(+), 89 deletions(-)

diff --git a/src/_data/initiatives.yml b/src/_data/initiatives.yml
index 7c0cfcc6..f93c9f68 100644
--- a/src/_data/initiatives.yml
+++ b/src/_data/initiatives.yml
@@ -15,7 +15,7 @@
   button:
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
-  class: --calitp-primary-blue
+  class: --calitp-brand-blue
 - tag: Benefits
   slug: benefits
   id: automating-customer-discounts
@@ -43,7 +43,7 @@
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
     class: d-none
-  class: --calitp-red-5
+  class: --dsdl-red-80
 - tag: GTFS
   slug: gtfs
   id: standardizing-trip-quality
@@ -65,4 +65,4 @@
     text: Explore Mobility Marketplace
     url: https://camobilitymarketplace.org
     class: d-none
-  class: --calitp-purple-4
+  class: --dsdl-purple-70
diff --git a/src/_includes/home-stats.html b/src/_includes/home-stats.html
index 6fc3234f..4d9425a7 100644
--- a/src/_includes/home-stats.html
+++ b/src/_includes/home-stats.html
@@ -22,7 +22,7 @@
   <div class="col-12">
     <h2 class="h1 text-center">Impact across California</h2>
     <div class="row justify-content-center pt-3 pt-3 pt-lg-5 mt-lg-1 pb-4 mb-lg-3">
-      <div class="col-11 mb-4 mb-lg-0 col-lg-3 px-4 text-center background-yellow-4 clipped-home-stat-1">
+      <div class="col-11 mb-4 mb-lg-0 col-lg-3 px-4 text-center background-yellow-30 clipped-home-stat-1">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">68%</p>
         <p class="fs-4 fw-bold lh-sm px-3">
           Increase in reduced-fare transactions<sup id="fnref:1" role="doc-noteref"><a class="link-body-emphasis text-decoration-none"
@@ -32,7 +32,7 @@ <h2 class="h1 text-center">Impact across California</h2>
         <a class="pb-3 mb-3 mb-lg-5 fw-normal link-body-emphasis d-inline-block"
            href="/customer-stories#stories-benefits-MST">Learn how Monterey-Salinas Transit made it simpler to access transit benefits.</a>
       </div>
-      <div class="col-11 mb-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-4 clipped-home-stat-2">
+      <div class="col-11 mb-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-30 clipped-home-stat-2">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">229,988</p>
         <p class="fs-4 fw-bold lh-sm px-3">
           Trips using a contactless credit/debit card<sup id="fnref:2" role="doc-noteref"><a class="link-body-emphasis text-decoration-none"
@@ -42,7 +42,7 @@ <h2 class="h1 text-center">Impact across California</h2>
         <a class="pb-3 mb-3 mb-lg-5 fw-normal link-body-emphasis d-inline-block"
            href="/customer-stories#stories-contactless-payments-GCTD">Read how Glenn County is implementing contactless payments.</a>
       </div>
-      <div class="col-11 mb-lg-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-4 clipped-home-stat-3">
+      <div class="col-11 mb-lg-4 mt-2 mt-lg-0 mb-lg-0 col-lg-3 px-4 offset-lg-1 text-center background-yellow-30 clipped-home-stat-3">
         <p class="fs-stats pt-3 mt-3 mt-lg-5">91%</p>
         <p class="fs-4 fw-bold lh-sm px-3">
           Reduction of expired GTFS Schedule Feeds<sup id="fnref:3" role="doc-noteref"><a class="link-body-emphasis text-decoration-none"
diff --git a/src/_layouts/press.html b/src/_layouts/press.html
index 57c86e82..208d9bcd 100644
--- a/src/_layouts/press.html
+++ b/src/_layouts/press.html
@@ -16,8 +16,7 @@
   <div class="row justify-content-center">
     <div class="col-lg-8 col-md-8">
       <article class="press-release pb-5 mb-5">
-        <a class="d-block text-decoration-none mb-2 pt-3 mt-5 text-primary-blue"
-           href="/press">Press</a>
+        <a class="d-block text-decoration-none mb-2 pt-3 mt-5" href="/press">Press</a>
         <h1 class="h2">{{ page.heading }}</h1>
         {% if page.lead %}<p>{{ page.lead }}</p>{% endif %}
         <hr />
diff --git a/src/_layouts/resource.html b/src/_layouts/resource.html
index d64d0c9b..7091b308 100644
--- a/src/_layouts/resource.html
+++ b/src/_layouts/resource.html
@@ -17,8 +17,7 @@
 <div class="row justify-content-center">
   <div class="col-lg-8 col-md-8">
     <article class="press-release pb-5 mb-5">
-      <a class="d-block text-decoration-none mb-2 pt-3 mt-5 text-primary-blue"
-         href="/resources">Resource</a>
+      <a class="d-block text-decoration-none mb-2 pt-3 mt-5" href="/resources">Resource</a>
       <h1 class="h2">{{ page.title }}</h1>
       <hr />
       <p>{{ date }}</p>
diff --git a/src/customer-stories.html b/src/customer-stories.html
index f198e08a..d3f32535 100644
--- a/src/customer-stories.html
+++ b/src/customer-stories.html
@@ -9,7 +9,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center justify-content-lg-start">
-  <div class="clipped-header background-yellow-4 offset-lg-1 col-lg-10 col-11 mt-4 mt-md-5 mb-4 mb-lg-3 py-4 py-md-4 px-4 px-md-0">
+  <div class="clipped-header background-yellow-30 offset-lg-1 col-lg-10 col-11 mt-4 mt-md-5 mb-4 mb-lg-3 py-4 py-md-4 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
       <h1 class="mb-2">Our customers</h1>
       <p class="mb-3 pb-3">
@@ -110,14 +110,14 @@ <h2>Selected agency highlights</h2>
                  class="rounded-2 w-100"
                  src="/images/stories-photo-vctc.jpg" />
           </figure>
-          <figure class="quote border-yellow-4 mt-3">
+          <figure class="quote border-yellow-30 mt-3">
             <blockquote>
               “As a small agency who doesn’t have the resources to be specialists in these areas, we’re able to leverage Cal-ITP’s
               support to get complicated tech projects done more quickly…or at all.”
             </blockquote>
             <figcaption class="ps-3">— Public Transit Director in Ventura County</figcaption>
           </figure>
-          <h3 class="small-caps border-0 bg-transparent fw-bold text-primary p-0 mb-0"
+          <h3 class="small-caps border-0 bg-transparent fw-bold text-brand-blue p-0 mb-0"
               id="stories-GTFS-VCTC">GTFS</h3>
           <span class="fw-bold fs-4 display-heading d-block">Ventura County Transportation Commission</span>
           <ul class="mt-3 ps-4">
@@ -151,7 +151,7 @@ <h2>Selected agency highlights</h2>
                  class="rounded-2 w-100"
                  src="/images/stories-photo-glenn.png" />
           </figure>
-          <h3 class="small-caps border-0 bg-transparent fw-bold text-primary p-0 mb-0"
+          <h3 class="small-caps border-0 bg-transparent fw-bold text-brand-blue p-0 mb-0"
               id="stories-contactless-payments-GCTD">Contactless payments</h3>
           <span class="fw-bold fs-4 display-heading d-block">Glenn County Transportation Division</span>
           <ul class="mt-3 ps-4">
@@ -174,7 +174,7 @@ <h2>Selected agency highlights</h2>
             This dedicated support is designed to help Glenn County make informed decisions, meet their deadlines, and set them up
             for a successful contactless payments launch.
           </p>
-          <figure class="quote border-yellow-4 mt-3">
+          <figure class="quote border-yellow-30 mt-3">
             <blockquote>
               “Our county’s situation may be a bit more unique than other jurisdictions, requiring more handholding, but Cal-ITP’s
               assistance hasn’t wavered. They’ve navigated us throughout this process and provided crucial resources—that’s more
@@ -202,7 +202,7 @@ <h2>Selected agency highlights</h2>
                     </path>
                     </clipPath>
                   </svg>
-                  <div class="impact-stats background-yellow-4 clipped-stories-impact col-11 col-lg-12 p-4 p-lg-5">
+                  <div class="impact-stats background-yellow-30 clipped-stories-impact col-11 col-lg-12 p-4 p-lg-5">
                     <h2 class="fs-0 text-center pt-lg-3">Our impact</h2>
                     <p>
                       Over the last 5 years, Cal-ITP has worked collaboratively with our customers to make progress toward the
@@ -244,7 +244,7 @@ <h2 class="fs-0 text-center pt-lg-3">Our impact</h2>
         </section>
 
         <section class="monterey-and-contact">
-          <h3 class="small-caps border-0 bg-transparent fw-bold text-primary p-0 mb-0"
+          <h3 class="small-caps border-0 bg-transparent fw-bold text-brand-blue p-0 mb-0"
               id="stories-benefits-MST">Benefits</h3>
           <span class="fw-bold fs-4 display-heading d-block">Monterey-Salinas Transit</span>
           <ul class="mt-3 ps-4">
@@ -283,7 +283,7 @@ <h2 class="fs-0 text-center pt-lg-3">Our impact</h2>
                class="link-body-emphasis fw-normal">Benefits Monthly Update</a>
             to learn more and to stay connected as we expand.
           </p>
-          <figure class="quote mt-3 border-yellow-4">
+          <figure class="quote mt-3 border-yellow-30">
             <blockquote>
               “The Cal-ITP team is wonderful to work with. We greatly appreciate their support, technical expertise, and
               collaboration!”
diff --git a/src/partners.html b/src/partners.html
index 1ddb8fcf..ad033267 100644
--- a/src/partners.html
+++ b/src/partners.html
@@ -7,7 +7,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped-header background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+  <div class="clipped-header background-purple-70 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 pt-3 pb-1 pt-md-5 pb-md-3 px-2 px-md-2">
       <h1 class="text-white mb-3">Partners</h1>
       <p class="text-white mb-3">
@@ -48,7 +48,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
              target="_blank">California Department of Technology</a>
           (CDT) to provide transit riders with a seamless way to qualify for and enroll in transit benefits online.
         </p>
-        <figure class="quote border-purple-4 my-md-4 my-3">
+        <figure class="quote border-purple-70 my-md-4 my-3">
           <blockquote>
             “The Cal-ITP project offered us a test-case to deliver dependable and equitable public services, and reduce outdated
             paper-based processes.”
@@ -83,7 +83,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
         </ul>
         <div class="row justify-content-md-center align-content-stretch my-md-4 my-3">
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
               <span class="fs-stats text-white pt-4 pt-md-3">68%</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">
                 Increase in reduced-fare transactions<sup id="fnref:1" role="doc-noteref"><a class="text-decoration-none text-white" href="#fn:1" rel="footnote">1</a></sup>
@@ -92,7 +92,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
           </div>
           <div class="d-lg-none lh-1">&nbsp;</div>
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-end">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-end">
               <span class="fs-stats text-white pt-4 pt-md-3">870</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">Number of reduced-fare transactions enabled by the CA Identity Gateway</span>
             </div>
@@ -122,7 +122,7 @@ <h2 class="my-md-4 my-3">California Department of Technology</h2>
              alt=""
              src="/images/partners-background-carb.png" />
         <h2 class="my-3 my-md-4">California Air Resources Board</h2>
-        <figure class="quote border-purple-4 my-3 my-md-4-4">
+        <figure class="quote border-purple-70 my-3 my-md-4-4">
           <blockquote>
             “In order to unlock the greenhouse gas reductions and mobility justice opportunities that transit provides, we have to make it easier for people to use California’s buses and trains. Cal-ITP tackles basic but essential challenges that transit users face so that more Californians can make the switch to sustainable transportation options.”
           </blockquote>
@@ -151,14 +151,14 @@ <h2 class="my-3 my-md-4">California Air Resources Board</h2>
         </ul>
         <div class="row justify-content-md-center align-content-stretch my-3 my-md-4 mb-2">
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
               <span class="fs-stats text-white pt-4 pt-md-3">2035</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">By 2035, all new cars & light trucks sold in CA must be zero emission</span>
             </div>
           </div>
           <div class="d-lg-none lh-1">&nbsp;</div>
           <div class="col-12 col-md-12 col-lg-6">
-            <div class="background-purple-4 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
+            <div class="background-purple-70 py-4 py-md-5 my-md-2 px-3 text-center clipped-stat-start">
               <span class="fs-stats text-white pt-4 pt-md-3">89%</span>
               <span class="h3 text-white d-block mb-3 mb-md-0">
                 of main industry players use contactless payment cards<sup id="fnref:2" role="doc-noteref"><a class="text-white text-decoration-none" href="#fn:2" rel="footnote">2</a></sup>
diff --git a/src/resources.html b/src/resources.html
index ac16c620..c2112584 100644
--- a/src/resources.html
+++ b/src/resources.html
@@ -10,7 +10,7 @@
 {% include clipped-header.html %}
 
 <div class="row justify-content-center">
-  <div class="clipped-header background-purple-4 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
+  <div class="clipped-header background-purple-70 col-11 col-md-10 mt-4 mt-md-5 mb-4 py-4 py-md-5 px-4 px-md-0">
     <div class="offset-md-2 col-md-8 py-3 py-md-5 px-2 px-md-2">
       <h1 class="text-white mb-2">Resources</h1>
       <p class="text-white mb-3 pb-3">
diff --git a/src/stylesheet.html b/src/stylesheet.html
index e991025b..74c52b36 100644
--- a/src/stylesheet.html
+++ b/src/stylesheet.html
@@ -25,7 +25,7 @@ <h2>Paragraph text with links</h2>
 
   <article>
     <h2>Quotes</h2>
-    <figure class="quote border-purple-4">
+    <figure class="quote border-purple-70">
       <blockquote>
         “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
         aliqua.”
@@ -33,7 +33,7 @@ <h2>Quotes</h2>
       <figcaption>- Lorem Ipsum, Manager at California State Transit</figcaption>
     </figure>
 
-    <figure class="quote border-yellow-4">
+    <figure class="quote border-yellow-30">
       <blockquote>
         “Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
         aliqua.”
diff --git a/src/stylesheets/core.css b/src/stylesheets/core.css
index 0f4b2bd2..c68cc388 100644
--- a/src/stylesheets/core.css
+++ b/src/stylesheets/core.css
@@ -5,7 +5,7 @@
 
 
 body {
-  color: var(--dsdl-gray-100);
+  color: var(--dsdl-body-color);
   font-family: var(--dsdl-font-stack);
   line-height: var(--line-height-normal);
 }
@@ -108,8 +108,7 @@ h1 {
   font-weight: 400;
 }
 
-a:link,
-a:visited {
+a {
   color: var(--dsdl-blue-70);
 }
 a:hover,
diff --git a/src/stylesheets/homepage.css b/src/stylesheets/homepage.css
index e1f86d4b..657078f5 100644
--- a/src/stylesheets/homepage.css
+++ b/src/stylesheets/homepage.css
@@ -20,19 +20,19 @@
 }
 
 .rainbow-list ol li:nth-child(1):before {
-  background: var(--calitp-primary-blue);
+  background: var(--calitp-brand-blue);
 }
 
 .rainbow-list ol li:nth-child(2):before {
-  background: var(--calitp-orange-5);
+  background: var(--dsdl-orange-80);
 }
 
 .rainbow-list ol li:nth-child(3):before {
-  background: var(--calitp-red-5);
+  background: var(--dsdl-red-80);
 }
 
 .rainbow-list ol li:nth-child(4):before {
-  background: var(--calitp-purple-4);
+  background: var(--dsdl-purple-70);
 }
 
 /* Initiatives */
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 4142c741..98cec49b 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -1,3 +1,4 @@
+@import 'dsdl.css';
 @import 'variables.css';
 @import 'clipped-containers.css';
 @import 'footnotes.css';
@@ -7,23 +8,23 @@
 
 
 .background-calitp-blue {
-  background-color: var(--calitp-primary-blue);
+  background-color: var(--calitp-brand-blue);
 }
 
-.background-purple-4 {
-  background-color: var(--calitp-purple-4);
+.background-purple-70 {
+  background-color: var(--dsdl-purple-70);
 }
 
-.background-yellow-4 {
-  background-color: var(--calitp-yellow-4);
+.background-yellow-30 {
+  background-color: var(--dsdl-yellow-30);
 }
 
-.border-purple-4 {
-  border-color: var(--calitp-purple-4);
+.border-purple-70 {
+  border-color: var(--dsdl-purple-70);
 }
 
-.border-yellow-4 {
-  border-color: var(--calitp-yellow-4);
+.border-yellow-30 {
+  border-color: var(--dsdl-yellow-30);
 }
 
 .min-w-0 {
@@ -92,7 +93,7 @@ hr {
   font-size: 0.75rem;
   font-family: var(--bs-font-sans-serif);
   border: 1.5px solid var(--bs-white);
-  background-color: rgba(33, 33, 33, 0.2);
+  background-color: rgba(38, 38, 38, 0.2);  /* gray 80 at 20% opacity */
 }
 
 .fs-7 {
@@ -131,7 +132,7 @@ figure.quote figcaption {
 }
 
 footer a:hover {
-  color: var(--calitp-gray-2) !important;
+  color: var(--dsdl-gray-30) !important;
 }
 
 .mb-28 {
diff --git a/src/stylesheets/nav-pills.css b/src/stylesheets/nav-pills.css
index d8844bcd..b2bc5efa 100644
--- a/src/stylesheets/nav-pills.css
+++ b/src/stylesheets/nav-pills.css
@@ -10,23 +10,23 @@
 
 .black-on-white .nav-pills {
   --bs-nav-pills-link-active-color: var(--bs-white);
-  --bs-nav-pills-link-active-bg: var(--bs-body-color);
+  --bs-nav-pills-link-active-bg: var(--dsdl-body-color);
 }
 
 .black-on-white .nav-pills .nav-link {
-  border-color: var(--bs-body-color);
+  border-color: var(--dsdl-body-color);
 }
 
 .black-on-white .nav-pills .nav-link:not(.active) {
-  color: var(--bs-body-color);
+  color: var(--dsdl-body-color);
 }
 
 .black-on-white .nav-pills .nav-link:hover {
-  border-color: rgba(33, 33, 33, 0.8);
+  border-color: rgba(38, 38, 38, 0.8);  /* gray 80 at 80% opacity */
 }
 
 .white-on-color .nav-pills {
-  --bs-nav-pills-link-active-color: var(--bs-body-color);
+  --bs-nav-pills-link-active-color: var(--dsdl-body-color);
   --bs-nav-pills-link-active-bg: var(--bs-white);
 }
 
diff --git a/src/stylesheets/navbar.css b/src/stylesheets/navbar.css
index d2b79274..9eca8f5e 100644
--- a/src/stylesheets/navbar.css
+++ b/src/stylesheets/navbar.css
@@ -4,9 +4,9 @@
 }
 
 .navbar-nav {
-  --bs-nav-link-color: var(--bs-body-color);
-  --bs-navbar-active-color: var(--calitp-primary-blue);
-  --bs-nav-link-hover-color: var(--calitp-primary-blue);
+  --bs-nav-link-color: var(--dsdl-body-color);
+  --bs-navbar-active-color: var(--calitp-brand-blue);
+  --bs-nav-link-hover-color: var(--calitp-brand-blue);
 }
 
 header .nav-link {
@@ -14,12 +14,12 @@ header .nav-link {
 }
 
 header .nav-link[aria-current="page"] {
-  color: var(--calitp-primary-blue);
-  background-color: var(--calitp-background-light-blue);
+  color: var(--calitp-brand-blue);
+  background-color: var(--calitp-background-blue);
 }
 
 header .nav-link:hover {
-  background-color: var(--calitp-background-light-blue);
+  background-color: var(--calitp-background-blue);
 }
 
 main.container {
@@ -42,7 +42,7 @@ main.container {
   }
 
   .navbar-nav {
-    --bs-nav-link-color: var(--bs-body-color);
+    --bs-nav-link-color: var(--dsdl-body-color);
     --bs-navbar-nav-link-padding-y: 0;
     --bs-nav-link-padding-y: 0;
     gap: 2rem;
@@ -73,7 +73,7 @@ main.container {
 
   .navbar-nav .nav-link {
     padding: 23.8px 0 23.8px 12px;
-    border-bottom: 1px solid var(--calitp-cyan-1);
+    border-bottom: 1px solid var(--dsdl-cyan-20);
   }
 
   .navbar-nav {
diff --git a/src/stylesheets/tokens.css b/src/stylesheets/tokens.css
index 900edf17..c07f0344 100644
--- a/src/stylesheets/tokens.css
+++ b/src/stylesheets/tokens.css
@@ -19,6 +19,7 @@
   /* Fonts */
   --dsdl-font-stack: 'Space Grotesk', system-ui;
   --dsdl-monospace-font-stack: 'Source Code Pro', 'Cascadia Code', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+
   /* Size */
   --text-xxs: calc(10rem / 16);
   --text-xs: calc(12rem / 16);
@@ -29,11 +30,15 @@
   --text-xxl: calc(32rem / 16);
   --text-xxxl: calc(40rem / 16);
   --text-display: calc(64rem / 16);
+
   /* Line height */
   --line-height-extra-tight: 1.125;
   --line-height-tight: 1.25;
   --line-height-normal: 1.5;
   --line-height-loose: 1.625;
+
+  /* Colors */
+  --dsdl-body-color: var(--dsdl-gray-100);
 }
 
 
diff --git a/src/stylesheets/utilities.css b/src/stylesheets/utilities.css
index 379b8934..e93b5bf6 100644
--- a/src/stylesheets/utilities.css
+++ b/src/stylesheets/utilities.css
@@ -12,11 +12,15 @@
 .font-size-xxl { font-size: var(--text-xxl) !important; }
 .font-size-xxxl { font-size: var(--text-xxxl) !important; }
 .font-size-display { font-size: var(--text-display) !important; }
+
 .font-weight-normal { font-weight: 400 !important; }
 .font-weight-semi-bold { font-weight: 500 !important; }
 .font-weight-bold { font-weight: 600 !important; }
 .font-weight-extra-bold { font-weight: 700 !important; }
+
 .line-height-extra-tight { line-height: 1.125 !important; }
 .line-height-tight { line-height: 1.25 !important; }
 .line-height-normal { line-height: 1.5 !important; }
 .line-height-loose { line-height: 1.625 !important; }
+
+.text-brand-blue { color: var(--calitp-brand-blue); }
diff --git a/src/stylesheets/variables.css b/src/stylesheets/variables.css
index e32d68c4..88345065 100644
--- a/src/stylesheets/variables.css
+++ b/src/stylesheets/variables.css
@@ -1,40 +1,24 @@
 :root {
+  /* Typography */
   --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans",
     "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
   --calitp-headline-sans-serif: "Raleway", system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue", "Noto Sans",
     "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --bs-border-radius: 20px;
-  --bs-border-style: dashed;
   --bs-body-line-height: 1.4;
+  --calitp-font-weight-bold: 700;
+
+  /* Magic numbers for layout adjustments */
   --header-nav-height: 110px;
   --footer-nav-height: 39px;
-}
 
-body {
-  --bs-primary: #045b86;
-  --bs-primary-rgb: 4, 91, 134;
-  --bs-body-color: rgb(33, 33, 33); /* #212121 */
-  --bs-dark-rgb: 33, 33, 33; /* #212121 */
-  --bs-emphasis-color-rgb: rgb(33, 33, 33); /* #212121 */
-  --bs-link-color: rgb(4, 91, 134); /* #045B86, calitp-primary-blue */
-  --bs-link-color-rgb: 4, 91, 134; /* #045B86, calitp-primary-blue */
-  --bs-link-hover-color: rgb(4, 72, 105); /* #044869, calitp-primary-dark-blue */
-  --bs-link-hover-color-rgb: 4, 72, 105; /* #044869, calitp-primary-dark-blue */
-  --bs-secondary-rgb: 143, 147, 153; /* calitp-gray-3 */
-  --bs-tertiary-color: rgb(96, 101, 107); /* calitp-scales-gray-4 */
-  --calitp-primary-blue: rgb(4, 91, 134); /* #045B86 */
-  --calitp-primary-dark-blue: rgb(4, 72, 105); /* #044869, , calitp-primary-dark-blue */
-  --calitp-background-blue: rgb(245, 249, 251); /* #F5F9FB */
-  --calitp-background-light-blue: rgb(223, 242, 242); /* #DFF2F2 */
-  --calitp-cyan-1: rgb(213, 238, 245); /* #d5eef5 */
-  --calitp-gray-2: rgb(200, 200, 201); /* #C8C8C9 */
-  --calitp-green-4: rgb(0, 117, 91); /* #00755b */
-  --calitp-green-5: rgb(0, 73, 57); /* #004939 */
-  --calitp-orange-5: rgb(178, 86, 0); /* #b25600 */
-  --calitp-purple-4: rgb(82, 76, 143); /* #524c8f */
-  --calitp-purple-5: rgb(41, 34, 120); /* #292278 */
-  --calitp-red-4: rgb(192, 63, 77); /* #c03f4d */
-  --calitp-red-5: rgb(160, 46, 59); /* #a02e3b */
-  --calitp-yellow-4: rgb(253, 183, 20); /* #FDB714 */
-  --calitp-font-weight-bold: 700;
+  /* Bootstrap border overrides */
+  --bs-border-radius: 20px;
+  --bs-border-style: dashed;
+
+  /* Colors */
+  --calitp-background-blue: var(--dsdl-cyan-10);
+  --bs-primary: var(--calitp-brand-blue);
+  --bs-secondary-color: var(--dsdl-gray-80);
+  --bs-tertiary-color: var(--dsdl-slate-60);
+  --bs-nav-link-color: var(--dsdl-gray-90);
 }

From 3025d1ea404b0b7eeb9856ba59118f5b1fe8b2d1 Mon Sep 17 00:00:00 2001
From: Scott Cranfill <scranfill@compiler.la>
Date: Wed, 3 Dec 2025 22:34:44 +0000
Subject: [PATCH 2/2] chore: Move DSDL CSS into a subdirectory

---
 src/stylesheets/{ => dsdl}/core.css      | 0
 src/stylesheets/{ => dsdl}/dsdl.css      | 0
 src/stylesheets/{ => dsdl}/tokens.css    | 0
 src/stylesheets/{ => dsdl}/utilities.css | 0
 src/stylesheets/main.css                 | 2 +-
 5 files changed, 1 insertion(+), 1 deletion(-)
 rename src/stylesheets/{ => dsdl}/core.css (100%)
 rename src/stylesheets/{ => dsdl}/dsdl.css (100%)
 rename src/stylesheets/{ => dsdl}/tokens.css (100%)
 rename src/stylesheets/{ => dsdl}/utilities.css (100%)

diff --git a/src/stylesheets/core.css b/src/stylesheets/dsdl/core.css
similarity index 100%
rename from src/stylesheets/core.css
rename to src/stylesheets/dsdl/core.css
diff --git a/src/stylesheets/dsdl.css b/src/stylesheets/dsdl/dsdl.css
similarity index 100%
rename from src/stylesheets/dsdl.css
rename to src/stylesheets/dsdl/dsdl.css
diff --git a/src/stylesheets/tokens.css b/src/stylesheets/dsdl/tokens.css
similarity index 100%
rename from src/stylesheets/tokens.css
rename to src/stylesheets/dsdl/tokens.css
diff --git a/src/stylesheets/utilities.css b/src/stylesheets/dsdl/utilities.css
similarity index 100%
rename from src/stylesheets/utilities.css
rename to src/stylesheets/dsdl/utilities.css
diff --git a/src/stylesheets/main.css b/src/stylesheets/main.css
index 98cec49b..09ea6739 100644
--- a/src/stylesheets/main.css
+++ b/src/stylesheets/main.css
@@ -1,4 +1,4 @@
-@import 'dsdl.css';
+@import 'dsdl/dsdl.css';
 @import 'variables.css';
 @import 'clipped-containers.css';
 @import 'footnotes.css';