Skip to content

feat: Update all colors to use the DSDL #539

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Scotchester merged 2 commits into from
Dec 4, 2025
Merged

feat: Update all colors to use the DSDL #539

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
64c8a46
feat: Update all colors to use the DSDL
Scotchester Dec 3, 2025
3025d1e
chore: Move DSDL CSS into a subdirectory
Scotchester Dec 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/_data/initiatives.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -65,4 +65,4 @@
text: Explore Mobility Marketplace
url: https://camobilitymarketplace.org
class: d-none
class: --calitp-purple-4
class: --dsdl-purple-70
6 changes: 3 additions & 3 deletions src/_includes/home-stats.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down
3 changes: 1 addition & 2 deletions src/_layouts/press.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />
Expand Down
3 changes: 1 addition & 2 deletions src/_layouts/resource.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions src/customer-stories.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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">
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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!”
Expand Down
14 changes: 7 additions & 7 deletions src/partners.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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.”
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/resources.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 2 additions & 2 deletions src/stylesheet.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,15 @@ <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.”
</blockquote>
<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.”
Expand Down
5 changes: 2 additions & 3 deletions src/stylesheets/core.css → src/stylesheets/dsdl/core.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -108,8 +108,7 @@ h1 {
font-weight: 400;
}

a:link,
a:visited {
a {
color: var(--dsdl-blue-70);
}
a:hover,
Expand Down
0 src/stylesheets/dsdl.css → src/stylesheets/dsdl/dsdl.css
View file
Open in desktop
File renamed without changes.
5 changes: 5 additions & 0 deletions src/stylesheets/tokens.css → src/stylesheets/dsdl/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
}


Expand Down
4 changes: 4 additions & 0 deletions src/stylesheets/utilities.css → src/stylesheets/dsdl/utilities.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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); }
8 changes: 4 additions & 4 deletions src/stylesheets/homepage.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
23 changes: 12 additions & 11 deletions src/stylesheets/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import 'dsdl/dsdl.css';
@import 'variables.css';
@import 'clipped-containers.css';
@import 'footnotes.css';
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -131,7 +132,7 @@ figure.quote figcaption {
}

footer a:hover {
color: var(--calitp-gray-2) !important;
color: var(--dsdl-gray-30) !important;
}

.mb-28 {
Expand Down
10 changes: 5 additions & 5 deletions src/stylesheets/nav-pills.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Copy link
Member

@jgravois jgravois Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this might be a little too clever, but TIL it's possible derive RGB on the fly.

Suggested change
border-color: rgba(38, 38, 38, 0.8); /* gray 80 at 80% opacity */
border-color: rgb(from var(--dsdl-gray-80) r g b / 0.8);

browser support is currently slightly > the opacity (~85%) :trollface:
https://caniuse.com/mdn-css_types_color_rgb_relative_syntax

Copy link
Member Author

@Scotchester Scotchester Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh wow, that is cool! It does feel maybe slightly too bleeding-edge right now (just landed in Safari in fall 2024), but this could provide a nice path forward in the near future.

Copy link
Member

@jgravois jgravois Dec 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this could provide a nice path forward in the near future.

given our target audience, i agree.

}

.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);
}

Expand Down
Loading