From 12bb106b94a7e756bfadef093e32f96639ffec1e Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Wed, 15 Jul 2026 16:50:19 -0700
Subject: [PATCH 1/5] changes according to Yesol's feedback

---
 assets/css/content-pages.css                  |   6 +-
 assets/css/content.css                        |   6 +-
 assets/css/cross-page.css                     | 118 +++--------------
 assets/css/home.css                           |  18 ++-
 assets/css/list-pages.css                     | 120 ++++++++----------
 assets/css/stats.css                          |   4 +-
 .../layouts/index.html                        |   4 +-
 .../layouts/install-guides/list.html          |   6 +-
 .../filter-search-sort/csp-term-page.html     |   3 +-
 .../mobile-search-and-filter.html             |   2 +-
 .../filter-search-sort/open-expansion.html    |   2 +-
 11 files changed, 98 insertions(+), 191 deletions(-)

diff --git a/assets/css/content-pages.css b/assets/css/content-pages.css
index 82668c8410..8e6f71be33 100644
--- a/assets/css/content-pages.css
+++ b/assets/css/content-pages.css
@@ -155,7 +155,7 @@ div.github-div {
 
 html[theme='dark'] div.github-div {
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: rgb(23,25,27);;  /* CLOSE to this, but not due to close to gradient background. var(--arm-color-base) at 75% transparency */
+    background-color: var(--color-background-primary);
 
 }
 
@@ -185,12 +185,12 @@ ads-card.multi-install-card {
     --ads-card-box-shadow-hover: 0 3px 6px 1px rgba(0,0,0,0.16);  /* 0 1px 3px 3px rgba(0,0,0,0.25); */
 } 
 html[theme='dark'] ads-card.multi-install-card {
-    --ads-card-background-color: var(--arm-color-base);
+    --ads-card-background-color: var(--color-background-tertiary);
     --ads-card-border-color: #000000;
     /*--ads-card-box-shadow:  0 3px 12px rgba(0, 0, 0, 0.5);*/
 
     /* hover state */
-    --ads-card-background-color-hover: var(--arm-color-base);
+    --ads-card-background-color-hover: var(--color-background-tertiary);
     --ads-card-border-color-hover: transparent;
     /*--ads-card-box-shadow-hover:  0 3px 12px rgba(0, 0, 0, 0.5);*/
 
diff --git a/assets/css/content.css b/assets/css/content.css
index bf833b968a..737fe33de9 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -16,6 +16,10 @@
 
 
 /* Box around content (learning paths and tools) */
+html[theme="dark"] #main {
+    background-color: var(--color-background-secondary);
+}
+
 div.content-box {
     padding-left: 16px;
     padding-right: 16px;
@@ -28,7 +32,7 @@ div.content-box {
     border-radius: 5px;
 
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: rgba(31,32,35,0.75);  /* var(--arm-color-base) at 75% transparency */
+    background-color: var(--color-background-primary);
 }
 html[theme="light"] div.content-box {
     background-color: white;
diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css
index cfbe307b95..f524e7e910 100644
--- a/assets/css/cross-page.css
+++ b/assets/css/cross-page.css
@@ -52,6 +52,11 @@
     --lp-accent-secondary: #D1BAFC; /* ADS UI Violet 04 */
     --lp-hover-text: #D9D9D9;       /* ADS UI Gray 35 */
 
+    /* ADS v5 Arm Ink background tokens. */
+    --color-background-primary: #080225;
+    --color-background-secondary: #16122A;
+    --color-background-tertiary: #211B3B;
+
     /* Keep existing site styles working while testing the v5 palette. */
     --arm-green: var(--lp-accent-primary);
     --arm-light-blue: var(--lp-accent-secondary);
@@ -92,7 +97,7 @@ ads-search#search-box.install-guide{
     padding-right: 14px;
 }
 ads-search {
-    --ads-search-button-background-color: var(--arm-color-base);
+    --ads-search-button-background-color: #7233F7;
 }
 
 /* Colors of buttons & links to match DevHub styling */
@@ -232,30 +237,6 @@ ads-masthead {
     
 
 
-ads-breadcrumbs {
-    --ads-breadcrumb-color: var(--lp-accent-secondary);
-    --ads-breadcrumb-current-color: white;
-    --ads-breadcrumb-hover-color: var(--lp-hover-text);
-    --ads-breadcrumbs-link-color: var(--lp-accent-secondary);
-    --ads-breadcrumbs-link-color-hover: var(--lp-hover-text);
-    --ads-breadcrumbs-link-color-visited: var(--lp-accent-secondary);
-    --ads-breadcrumbs-current-color: white;
-}
-
-#breadcrumb-element ads-breadcrumb[current] {
-    --ads-breadcrumb-color: white;
-    --ads-breadcrumb-current-color: white;
-    --ads-breadcrumbs-current-color: white;
-    color: white;
-}
-
-#breadcrumb-element ads-breadcrumb:not([current]):hover {
-    --ads-breadcrumb-color: var(--lp-hover-text);
-    --ads-breadcrumbs-link-color: var(--lp-hover-text);
-    color: var(--lp-hover-text);
-}
-
-
 /* Hide breadcrumb when small screen. */
  @media (max-width: 576px) {
         #breadcrumb-element {
@@ -267,7 +248,7 @@ ads-breadcrumbs {
 /* Replicate style of breadcrumb in masthead when alone. */
 #only-breadcrumb-masthead {
     width: 100%;
-    background-color: var(--arm-color-footing);
+    background-color: var(--color-background-primary);
     padding-top: 8px;
     padding-left: 15px; /* u-padding-left-2-1/2 */
     padding-bottom: 8px; 
@@ -292,9 +273,7 @@ ads-breadcrumbs {
     width: fit-content;
     height: fit-content;
 
-    background: -webkit-linear-gradient(left,var(--arm-green), var(--arm-light-blue));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: var(--lp-accent-secondary);
 }
 .beta-homepage {
     vertical-align: top;
@@ -328,7 +307,7 @@ ads-breadcrumbs {
     margin: -1px;
     z-index: -1;
     border-radius: inherit;
-    background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
+    background: #848192;
     opacity: 0;
     transition: opacity 0.3s ease; 
 }
@@ -338,48 +317,12 @@ ads-breadcrumbs {
 
 
 
-.gradient-box-tool {
-    /*display: inline-block;*/
-    position: relative;
-    border-radius: 0px;
-    z-index:1;
-  }
-
-.gradient-box-tool::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 1px;
-    left: 2px;
-    margin: -2px;
-    z-index: -1;
-    border-radius: inherit;
-    background: linear-gradient(90deg, var(--lp-accent-primary), var(--lp-accent-secondary));
-    opacity: 0;
-    transition: opacity 0.3s ease; 
-}
-.gradient-box-tool:hover::before {
-    opacity: 1;
-}
-
-
-
-
-html[theme="dark"] .orchard-breeze-text {
-    background: -webkit-linear-gradient(left,var(--arm-green), var(--arm-light-blue));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-html[theme="dark"] .fullbourn-sunrise-text {
-    background: -webkit-linear-gradient(left,var(--arm-yellow), var(--arm-orange));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
+html[theme="dark"] .orchard-breeze-text,
+html[theme="dark"] .fullbourn-sunrise-text,
 html[theme="dark"] .minhang-mist-text {
-    background: -webkit-linear-gradient(left,var(--arm-light-blue), var(--arm-light-grey));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    background: none;
+    color: #E6E6E9;
+    -webkit-text-fill-color: currentColor;
 }
 
 
@@ -410,36 +353,9 @@ html[theme='light'] body {
 
 /* Dark Theme */
 /****************************************************/
-/* Mobile background */
-@media (max-width: 768px) {
-    html[theme='dark'] body {
-        background-image: url("/img/bg-img-736x800-purple.webp");
-        background-color: var(--arm-color-footing);      
-        background-position: 0% 100%;
-        background-attachment: fixed;
-        background-size: 100% 100%;         /* Forces smaller width; best solution for mobile sizes */
-    } 
-}
-/* Laptop background */
-@media (min-width: 768px) {
-    html[theme='dark'] body {
-        background-image: url("/img/bg-img-1920x1600-purple.webp");
-        background-color: var(--arm-color-footing);      
-        background-position: 0% 100%;
-        background-attachment: fixed;
-        background-size: cover;             /* Stretches image to fit; best solution for desktop sizes */
-    } 
-}
-
-/* Large Monitor background */
-@media (min-width: 1400px) {
-    html[theme='dark'] body {
-        background-image: url("/img/bg-img-2500x1700-purple.webp");
-        background-color: var(--arm-color-footing);      
-        background-position: 0% 100%;
-        background-attachment: fixed;
-        background-size: cover;             /* Stretches image to fit; best solution for desktop sizes */
-    } 
+html[theme='dark'] body {
+    background-color: var(--color-background-primary);
+    background-image: none;
 }
 
 
diff --git a/assets/css/home.css b/assets/css/home.css
index 47ee25374a..0723bb0ce9 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -16,6 +16,12 @@ ads-breadcrumbs:not(:defined) {
     min-height: 32px;
 }
 
+/* The homepage uses the ADS v5 Arm Ink background hierarchy. */
+html[theme='dark'] body {
+    background-color: var(--color-background-primary);
+    background-image: none;
+}
+
 /* CLS fix: lock the breadcrumb masthead height so hydration doesn't shift content below */
 #only-breadcrumb-masthead {
     height: 40px;
@@ -43,7 +49,7 @@ ads-breadcrumbs:not(:defined) {
     min-height: 152px;
     height: 152px;
     align-items: center;
-    background-color: var(--arm-color-base);
+    background-color: var(--color-background-tertiary);
     border: 1px solid transparent;
     border-color: #000000;
     transition: 
@@ -51,8 +57,8 @@ ads-breadcrumbs:not(:defined) {
         border-color 0.3s ease-in-out;
 }
 .main-topic-card:hover {
-    background-color: var(--arm-color-base);
-    border-color: var(--arm-green);
+    background-color: var(--color-background-tertiary);
+    border-color: #848192;
     cursor: pointer;
     transform: translateY(-3px); /* move up 3px */
 
@@ -86,6 +92,8 @@ ads-breadcrumbs:not(:defined) {
     height: 50px;
     object-fit: contain;
     display: block;
+    /* Figma specifies neutral white icons instead of the legacy purple gradients. */
+    filter: brightness(0) invert(1);
 }
 
 .main-topic-card img[src$="mobile-graphics-and-gaming.svg"],
@@ -102,7 +110,7 @@ ads-breadcrumbs:not(:defined) {
 /* Title styling */
 /**************************************/
 .main-topic-title {
-    color: var(--arm-light-blue);
+    color: #E6E6E9;
     font-weight: 700;
     font-size: 20px;
     line-height: 1.2;
@@ -209,7 +217,7 @@ table.contributor-table th {
     color: black;
 }
 table.contributor-table tbody { 
-    background-color: var(--arm-color-base); 
+    background-color: var(--color-background-secondary);
 }
 
 
diff --git a/assets/css/list-pages.css b/assets/css/list-pages.css
index 208f882eaa..8ad0b22e34 100644
--- a/assets/css/list-pages.css
+++ b/assets/css/list-pages.css
@@ -160,20 +160,20 @@ ads-expansion-panel.learning-path-filters {
 }
 
 html[theme='dark'] ads-expansion-panel.learning-path-filters {
-    --ads-expansion-panel-border-color: var(--arm-color-footing);
-    --ads-expansion-panel-content-background-color: var(--arm-color-footing);
-    --ads-expansion-panel-toggle-background-color: var(--arm-color-footing);
-    --ads-expansion-panel-toggle-background-color-hover: var(--arm-color-footing);
+    --ads-expansion-panel-border-color: var(--color-background-secondary);
+    --ads-expansion-panel-content-background-color: var(--color-background-primary);
+    --ads-expansion-panel-toggle-background-color: var(--color-background-primary);
+    --ads-expansion-panel-toggle-background-color-hover: var(--color-background-secondary);
 
     --ads-expansion-panel-toggle-icon-color-hover: var(--arm-green);
 }
 
 /* mobile facets styling */
 div#facets-background > ads-expansion-panel.learning-path-filters {
-    --ads-expansion-panel-border-color: var(--arm-color-base);
-    --ads-expansion-panel-content-background-color: var(--arm-color-base);
-    --ads-expansion-panel-toggle-background-color: var(--arm-color-base);
-    --ads-expansion-panel-toggle-background-color-hover: var(--arm-color-base);   
+    --ads-expansion-panel-border-color: var(--color-background-secondary);
+    --ads-expansion-panel-content-background-color: var(--color-background-secondary);
+    --ads-expansion-panel-toggle-background-color: var(--color-background-secondary);
+    --ads-expansion-panel-toggle-background-color-hover: var(--color-background-tertiary);
 }
 
 
@@ -212,13 +212,13 @@ ads-card.path-card.featured-path-card {
 }
 
 html[theme='dark'] ads-card.path-card {
-    --ads-card-background-color: var(--arm-color-base);
-    --ads-card-border-color: #000000;
+    --ads-card-background-color: var(--color-background-secondary);
+    --ads-card-border-color: var(--color-background-tertiary);
     --ads-card-box-shadow:  #000 @50%, X:0 Y: 3 B:12; /* probably not working */
     
     /* hover state */
-    --ads-card-background-color-hover: var(--arm-color-base);
-    --ads-card-border-color-hover: transparent;
+    --ads-card-background-color-hover: var(--color-background-secondary);
+    --ads-card-border-color-hover: #848192;
     --ads-card-box-shadow-hover:  #000 @50%, X:0 Y: 3 B:12; /* probably not working */
 }
 
@@ -234,11 +234,7 @@ ads-card.path-card.featured-path-card ads-card-content::before {
     inset: 0;
     border-radius: 10px;
     padding: 3px;
-    background: linear-gradient(135deg,
-        var(--arm-green) 0%,
-        var(--arm-green) 50%,
-        var(--arm-web-safe-blue) 50%,
-        var(--arm-web-safe-blue) 100%);
+    background: #848192;
     -webkit-mask:
         linear-gradient(#fff 0 0) content-box,
         linear-gradient(#fff 0 0);
@@ -250,11 +246,7 @@ ads-card.path-card.featured-path-card ads-card-content::before {
 }
 
 html[theme='dark'] ads-card.path-card.featured-path-card ads-card-content::before {
-    background: linear-gradient(135deg,
-        var(--arm-green) 0%,
-        var(--arm-green) 50%,
-        var(--arm-light-blue) 50%,
-        var(--arm-light-blue) 100%);
+    background: #848192;
 }
 
 ads-card.path-card.featured-path-card:hover ads-card-content::before {
@@ -346,6 +338,10 @@ html[theme="light"] .learning-path-title, html[theme="light"] .basics-title {
     margin-bottom: 4px;
 }
 
+html[theme="dark"] .learning-path-title {
+    color: #E6E6E9;
+}
+
 .basics-title {
     margin: 0;
 }
@@ -364,26 +360,43 @@ html[theme="light"] .learning-path-title, html[theme="light"] .basics-title {
 .install-guide-title {
     margin-top: 0px;
     margin-bottom: 0px;
-    font-size: 1.25rem!important;
+    font-size: 1rem!important;
 }
 
 
 ads-card.tool-card {
     height: 112px;
-    --ads-card-border-radius: 0px;
+    --ads-card-border-radius: 8px;
     --ads-card-border-width: 1px;    
 }
 
 
 html[theme='dark'] ads-card.tool-card {
-    --ads-card-background-color: var(--arm-color-base);
-    --ads-card-border-color: #000000;
-    --ads-card-box-shadow: #000 @50%, X:0 Y: 3 B:12;     /* shadow likely not working */
+    --ads-card-background-color: var(--color-background-tertiary);
+    --ads-card-border-color: transparent;
+    --ads-card-background-color-hover: var(--color-background-tertiary);
+    --ads-card-border-color-hover: #848192;
+    --ads-card-box-shadow-hover: none;
+}
 
+html[theme='dark'] .install-guide-card-wrapper {
+    border-radius: 8px;
+    position: relative;
+}
 
-    --ads-card-background-color-hover: var(--arm-color-base);
-    --ads-card-border-color-hover: transparent;
-    --ads-card-box-shadow-hover: #000 @50%, X:0 Y: 3 B:12; /* 0 3px 6px 1px rgba(0,0,0,0.16);*/
+html[theme='dark'] .install-guide-card-wrapper::after {
+    border: 1px solid transparent;
+    border-radius: 8px;
+    content: '';
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+    transition: border-color 0.2s ease-in-out;
+    z-index: 2;
+}
+
+html[theme='dark'] .install-guide-card-wrapper:hover::after {
+    border-color: #848192;
 }
 
 ads-card-content.tool-card-content {
@@ -391,47 +404,16 @@ ads-card-content.tool-card-content {
   margin-bottom: 0px;
 }
 
-ads-card-content.tool-card-content::before {
-    background-color: var(--arm-web-safe-blue);
-    content: '';
-    height: calc(100% + 2px);
-    left: -1px;
-    position: absolute;
-    top: -1px;
-    transition: background-color;
-    transition-duration: 0.3s;
-    transition-timing-function: ease-in-out;
-    width: 12px;
-  }
-  html[theme="dark"] ads-card-content.tool-card-content::before {
-    background-color: var(--arm-blue);
-  }
-
-
-
-  ads-card.tool-card:hover ads-card-content.tool-card-content::before {
-    background-color: var(--arm-green);
-  }
-  ads-card.tool-card p {
+ads-card.tool-card p {
     color: var(--arm-web-safe-blue);
-    margin-left: 8px;
-    transition: color;
-
-    transition: margin-left;
-    transition-duration: 0.3s;
-    transition-timing-function: ease-in-out;
-  }
-  html[theme="dark"] ads-card.tool-card p {
-    color: var(--arm-light-blue);
-  }
-
-  ads-card.tool-card:hover p {
-    color: var(--lp-hover-text);
-    margin-left: 12px;
-  }
-  html[theme="dark"]       ads-card.tool-card:hover p {
+}
+html[theme="dark"] ads-card.tool-card p {
+    color: #E6E6E9;
+}
+ads-card.tool-card:hover p,
+html[theme="dark"] ads-card.tool-card:hover p {
     color: var(--lp-hover-text);
-  }
+}
 
 
 
diff --git a/assets/css/stats.css b/assets/css/stats.css
index e418a3a08a..715f0c348d 100644
--- a/assets/css/stats.css
+++ b/assets/css/stats.css
@@ -31,9 +31,7 @@
 }
 
 ads-card.stats-card:hover * {
-    background: white;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    color: #E6E6E9;
 }
 
 .stats-table {
diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html
index 239fad2fe9..dd6818ca10 100644
--- a/themes/arm-design-system-hugo-theme/layouts/index.html
+++ b/themes/arm-design-system-hugo-theme/layouts/index.html
@@ -27,7 +27,7 @@ <h1 id="homepage-header" class="orchard-breeze-text">Arm Learning Paths</h1>
 </div>
 <div class="homepage-top-divs homepage-top-desc">
     <p style="margin: 0px; color: #fff;">Tutorials to help you develop software on Arm. <br> With <a id='contribute-btn' name="contribute-cta" href="/learning-paths/cross-platform/_example-learning-path/">contributions</a> from experts in Arm and our developer community.</p>
-    <ads-cta-button size="medium" class='u-margin-bottom-1 u-margin-top-2' onclick="window.location.href='/install-guides'" level="secondary">Install Guides for Tools</ads-cta-button>
+    <ads-cta-button size="medium" class='u-margin-bottom-1 u-margin-top-2' onclick="window.location.href='/install-guides'" level="primary">Install Guides for Tools</ads-cta-button>
 </div>
 
  
@@ -37,7 +37,7 @@ <h1 id="homepage-header" class="orchard-breeze-text">Arm Learning Paths</h1>
 <!-- Search functionality -->
 <div class="c-row u-margin-top-2 u-margin-bottom-2">
     <div class="c-col">
-        <ads-search id="homepage-search-bar" has-search-button placeholder="Search all Learning Paths and Install Guides..." search-index="learning-paths" ></ads-search>
+        <ads-search id="homepage-search-bar" theme="dark" has-search-button placeholder="Search all Learning Paths and Install Guides..." search-index="learning-paths"></ads-search>
     </div>
 </div>
 <script>
diff --git a/themes/arm-design-system-hugo-theme/layouts/install-guides/list.html b/themes/arm-design-system-hugo-theme/layouts/install-guides/list.html
index c73413afa1..6f604fdf4a 100644
--- a/themes/arm-design-system-hugo-theme/layouts/install-guides/list.html
+++ b/themes/arm-design-system-hugo-theme/layouts/install-guides/list.html
@@ -28,7 +28,7 @@
     .
 </p>
 
-<ads-search class="u-margin-top-0 install-guide" has-search-button id="search-box" placeholder="Search by tool name"></ads-search>
+<ads-search class="u-margin-top-0 install-guide" theme="dark" has-search-button id="search-box" placeholder="Search all install guides"></ads-search>
 
 <!-- Bars containing Active Filter tags, how many content are displayed, and sorting info -->
 {{ partial "filter-search-sort/active-filter-and-sort-bar.html" (dict "content_to_list" $tools_to_list "page_type" "tools")}} 
@@ -40,13 +40,13 @@
         <div class="u-display-grid u-gap-1 xs:u-grid-columns-1 sm:u-grid-columns-2 md:u-grid-columns-3 lg:u-grid-columns-4 xl:u-grid-columns-5 u-margin-top-1 u-margin-bottom-2">
             {{ range $tools_to_list}}
               <!-- div used for search hiding via additional search terms -->
-              <div class='search-div gradient-box-tool
+              <div class='search-div install-guide-card-wrapper
                           {{ with .Params.additional_search_terms }}
                               {{range .}}
                                   term-{{. | urlize}}
                               {{end}}
                           {{ end }}'>
-                  <ads-card has-hover-effect class="tool-card" link="{{.Permalink}}">
+                  <ads-card class="tool-card" link="{{.Permalink}}">
                       <ads-card-content class="tool-card-content" slot="content">
                           <p class="search-title install-guide-title">{{.Title}}</p>
                       </ads-card-content>   
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/csp-term-page.html b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/csp-term-page.html
index f81fc75467..0b9a7fdea5 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/csp-term-page.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/csp-term-page.html
@@ -13,7 +13,7 @@
 
 <!-- Search (no filtering) -->
 <div class="u-flex u-justify-content-between c-col c-col-12 u-flex u-position-relative u-width-100% lg:u-width-auto u-margin-bottom-0">
-    <ads-search id="search-box" class="u-margin-top-0 u-width-100%" has-search-button="" placeholder="Search by Learning Path name"></ads-search>
+    <ads-search id="search-box" class="u-margin-top-0 u-width-100%" theme="dark" placeholder="Search by topic, tool, platform, or Learning Path"></ads-search>
 </div>
 
 <!-- Current results & sorting bar -->
@@ -35,4 +35,3 @@
     {{- end -}}
 </div>
 
-
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html
index 55ecc2788d..b64df63c57 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/mobile-search-and-filter.html
@@ -15,7 +15,7 @@
 
 <!-- Search / filter now occupy same row -->
 <div class="u-flex u-justify-content-between c-col c-col-12 u-flex u-position-relative u-width-100% lg:u-width-auto u-margin-bottom-0">
-    <ads-search id="search-box" class="u-margin-top-0 u-width-100%" has-search-button="" placeholder="Search by Learning Path name"></ads-search>
+    <ads-search id="search-box" class="u-margin-top-0 u-width-100%" theme="dark" placeholder="Search by topic, tool, platform, or Learning Path"></ads-search>
     <!-- Filter div -->
     <div>
         <!-- Filter button -->
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/open-expansion.html b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/open-expansion.html
index 65b563b363..36c600e571 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/open-expansion.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/filter-search-sort/open-expansion.html
@@ -23,7 +23,7 @@
     <span slot="toggle">{{.displayname}}</span>
     <div slot="content">
         <div class="u-flex u-flex-column">
-            <ads-search id="openfilter-search-box" class="u-margin-top-0 u-width-100%" has-search-button="" placeholder="Search for a filter"></ads-search>
+            <ads-search id="openfilter-search-box" class="u-margin-top-0 u-width-100%" theme="dark" variant="Fill&amp;Stroke" placeholder="Search for a filter"></ads-search>
             <div id="openfilter-results-status-bar" class="u-margin-bottom-1/2">
                 Displaying 
                 <span id="openfilter-currently-shown-number" class="u-text-bold"> {{$counter }} </span>

From 368af5b413a455e1c5b48226a22f451cbbf5b3b1 Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Thu, 16 Jul 2026 11:26:31 -0700
Subject: [PATCH 2/5] Zach's feedback + images + alert

---
 assets/css/content-pages.css                  | 20 ++--------
 assets/css/content.css                        |  4 +-
 assets/css/cross-page.css                     | 33 +++++++++++-----
 assets/css/home.css                           | 20 ++++------
 assets/css/list-pages.css                     | 26 ++++++-------
 .../layouts/_default/baseof.html              |  4 ++
 .../layouts/index.html                        | 12 +++++-
 .../partials/header/color-refresh-alert.html  | 39 +++++++++++++++++++
 .../layouts/partials/header/masthead.html     |  4 +-
 .../layouts/partials/header/nav-masthead.html |  4 +-
 .../static/img/main-topic-icons/AI_2.svg      |  4 ++
 .../static/img/main-topic-icons/Cloud.svg     |  4 ++
 .../img/main-topic-icons/Microcontroller.svg  | 10 +++++
 .../img/main-topic-icons/Premium Phone.svg    |  5 +++
 14 files changed, 129 insertions(+), 60 deletions(-)
 create mode 100644 themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
 create mode 100644 themes/arm-design-system-hugo-theme/static/img/main-topic-icons/AI_2.svg
 create mode 100644 themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Cloud.svg
 create mode 100644 themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Microcontroller.svg
 create mode 100644 themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Premium Phone.svg

diff --git a/assets/css/content-pages.css b/assets/css/content-pages.css
index 8e6f71be33..d9629c8667 100644
--- a/assets/css/content-pages.css
+++ b/assets/css/content-pages.css
@@ -88,20 +88,6 @@ html[theme='dark'] .tab-right-card > h6 {
     line-height: 1.2;
 }
 
-/* Force a 2-line clamp for masthead title */
-ads-masthead #ads-masthead-title {
-  line-height: 1.2;
-  padding-bottom: 6px;
-  box-sizing: border-box;
-  max-height: calc(1.2em * 2 + 8px); /* dyncamically calculate height depending on length of title */
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  white-space: normal;
-}
-
-
 /* hover effects */
 a:hover {
     text-decoration: none; }
@@ -155,7 +141,7 @@ div.github-div {
 
 html[theme='dark'] div.github-div {
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: var(--color-background-primary);
+    background-color: var(--ads-ui-ink-100);
 
 }
 
@@ -185,12 +171,12 @@ ads-card.multi-install-card {
     --ads-card-box-shadow-hover: 0 3px 6px 1px rgba(0,0,0,0.16);  /* 0 1px 3px 3px rgba(0,0,0,0.25); */
 } 
 html[theme='dark'] ads-card.multi-install-card {
-    --ads-card-background-color: var(--color-background-tertiary);
+    --ads-card-background-color: var(--ads-ui-ink-80);
     --ads-card-border-color: #000000;
     /*--ads-card-box-shadow:  0 3px 12px rgba(0, 0, 0, 0.5);*/
 
     /* hover state */
-    --ads-card-background-color-hover: var(--color-background-tertiary);
+    --ads-card-background-color-hover: var(--ads-ui-ink-80);
     --ads-card-border-color-hover: transparent;
     /*--ads-card-box-shadow-hover:  0 3px 12px rgba(0, 0, 0, 0.5);*/
 
diff --git a/assets/css/content.css b/assets/css/content.css
index 737fe33de9..54611c4975 100644
--- a/assets/css/content.css
+++ b/assets/css/content.css
@@ -17,7 +17,7 @@
 
 /* Box around content (learning paths and tools) */
 html[theme="dark"] #main {
-    background-color: var(--color-background-secondary);
+    background-color: var(--ads-ui-ink-90);
 }
 
 div.content-box {
@@ -32,7 +32,7 @@ div.content-box {
     border-radius: 5px;
 
     border-color: rgba(163, 168, 174,0.25); /* #A3A8AE at 25% transparency */
-    background-color: var(--color-background-primary);
+    background-color: var(--ads-ui-ink-100);
 }
 html[theme="light"] div.content-box {
     background-color: white;
diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css
index f524e7e910..6db3880626 100644
--- a/assets/css/cross-page.css
+++ b/assets/css/cross-page.css
@@ -52,11 +52,6 @@
     --lp-accent-secondary: #D1BAFC; /* ADS UI Violet 04 */
     --lp-hover-text: #D9D9D9;       /* ADS UI Gray 35 */
 
-    /* ADS v5 Arm Ink background tokens. */
-    --color-background-primary: #080225;
-    --color-background-secondary: #16122A;
-    --color-background-tertiary: #211B3B;
-
     /* Keep existing site styles working while testing the v5 palette. */
     --arm-green: var(--lp-accent-primary);
     --arm-light-blue: var(--lp-accent-secondary);
@@ -171,9 +166,7 @@ table tbody td {
 /* Fix Nav Masthead Breadcrumb container */
 /*************************************/
 #nav-masthead-breadcrumbs {
-    background-image: url("/img/masthead-background.webp"); /* The image used */
-    background-color: var(--arm-color-footing);            /* Used if the image is unavailable */
-    background-size: cover;
+    background-color: var(--ads-ui-ink-80);
 }
 
 
@@ -234,6 +227,26 @@ arm-top-navigation:not(:defined) {
 ads-masthead {
     --ads-masthead-border-bottom-color: transparent;
 }
+
+/* Bypass ADS's fixed 70% heading wrapper while retaining its typography. */
+ads-masthead #ads-masthead-title {
+    box-sizing: border-box;
+    color: var(--ads-masthead-color, #E6E6E9);
+    font-size: 32px;
+    line-height: 35px;
+    max-height: none;
+    overflow: visible;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    width: calc(100% - 32px);
+}
+
+@media (min-width: 768px) {
+    ads-masthead #ads-masthead-title {
+        font-size: 48px;
+        line-height: 53px;
+    }
+}
     
 
 
@@ -248,7 +261,7 @@ ads-masthead {
 /* Replicate style of breadcrumb in masthead when alone. */
 #only-breadcrumb-masthead {
     width: 100%;
-    background-color: var(--color-background-primary);
+    background-color: var(--ads-ui-ink-100);
     padding-top: 8px;
     padding-left: 15px; /* u-padding-left-2-1/2 */
     padding-bottom: 8px; 
@@ -354,7 +367,7 @@ html[theme='light'] body {
 /* Dark Theme */
 /****************************************************/
 html[theme='dark'] body {
-    background-color: var(--color-background-primary);
+    background-color: var(--ads-ui-ink-100);
     background-image: none;
 }
 
diff --git a/assets/css/home.css b/assets/css/home.css
index 0723bb0ce9..90b2913a89 100644
--- a/assets/css/home.css
+++ b/assets/css/home.css
@@ -18,7 +18,7 @@ ads-breadcrumbs:not(:defined) {
 
 /* The homepage uses the ADS v5 Arm Ink background hierarchy. */
 html[theme='dark'] body {
-    background-color: var(--color-background-primary);
+    background-color: var(--ads-ui-ink-100);
     background-image: none;
 }
 
@@ -49,7 +49,7 @@ html[theme='dark'] body {
     min-height: 152px;
     height: 152px;
     align-items: center;
-    background-color: var(--color-background-tertiary);
+    background-color: var(--ads-ui-ink-80);
     border: 1px solid transparent;
     border-color: #000000;
     transition: 
@@ -57,7 +57,7 @@ html[theme='dark'] body {
         border-color 0.3s ease-in-out;
 }
 .main-topic-card:hover {
-    background-color: var(--color-background-tertiary);
+    background-color: var(--ads-ui-ink-80);
     border-color: #848192;
     cursor: pointer;
     transform: translateY(-3px); /* move up 3px */
@@ -96,14 +96,10 @@ html[theme='dark'] body {
     filter: brightness(0) invert(1);
 }
 
-.main-topic-card img[src$="mobile-graphics-and-gaming.svg"],
-.main-topic-card img[src$="ai.svg"] {
-    transform: scale(1.16);
-    transform-origin: center;
-}
-
-.main-topic-card img[src$="embedded-and-microcontrollers.svg"] {
-    transform: scale(1.34);
+/* The two legacy SVGs fill their view boxes more fully than the new 64px icon set. */
+.main-topic-card img[src$="automotive.svg"],
+.main-topic-card img[src$="laptops-and-desktops.svg"] {
+    transform: scale(0.82);
     transform-origin: center;
 }
 
@@ -217,7 +213,7 @@ table.contributor-table th {
     color: black;
 }
 table.contributor-table tbody { 
-    background-color: var(--color-background-secondary);
+    background-color: var(--ads-ui-ink-90);
 }
 
 
diff --git a/assets/css/list-pages.css b/assets/css/list-pages.css
index 8ad0b22e34..aa90dd87a0 100644
--- a/assets/css/list-pages.css
+++ b/assets/css/list-pages.css
@@ -160,20 +160,20 @@ ads-expansion-panel.learning-path-filters {
 }
 
 html[theme='dark'] ads-expansion-panel.learning-path-filters {
-    --ads-expansion-panel-border-color: var(--color-background-secondary);
-    --ads-expansion-panel-content-background-color: var(--color-background-primary);
-    --ads-expansion-panel-toggle-background-color: var(--color-background-primary);
-    --ads-expansion-panel-toggle-background-color-hover: var(--color-background-secondary);
+    --ads-expansion-panel-border-color: var(--ads-ui-ink-90);
+    --ads-expansion-panel-content-background-color: var(--ads-ui-ink-100);
+    --ads-expansion-panel-toggle-background-color: var(--ads-ui-ink-100);
+    --ads-expansion-panel-toggle-background-color-hover: var(--ads-ui-ink-90);
 
     --ads-expansion-panel-toggle-icon-color-hover: var(--arm-green);
 }
 
 /* mobile facets styling */
 div#facets-background > ads-expansion-panel.learning-path-filters {
-    --ads-expansion-panel-border-color: var(--color-background-secondary);
-    --ads-expansion-panel-content-background-color: var(--color-background-secondary);
-    --ads-expansion-panel-toggle-background-color: var(--color-background-secondary);
-    --ads-expansion-panel-toggle-background-color-hover: var(--color-background-tertiary);
+    --ads-expansion-panel-border-color: var(--ads-ui-ink-90);
+    --ads-expansion-panel-content-background-color: var(--ads-ui-ink-90);
+    --ads-expansion-panel-toggle-background-color: var(--ads-ui-ink-90);
+    --ads-expansion-panel-toggle-background-color-hover: var(--ads-ui-ink-80);
 }
 
 
@@ -212,12 +212,12 @@ ads-card.path-card.featured-path-card {
 }
 
 html[theme='dark'] ads-card.path-card {
-    --ads-card-background-color: var(--color-background-secondary);
-    --ads-card-border-color: var(--color-background-tertiary);
+    --ads-card-background-color: var(--ads-ui-ink-90);
+    --ads-card-border-color: var(--ads-ui-ink-80);
     --ads-card-box-shadow:  #000 @50%, X:0 Y: 3 B:12; /* probably not working */
     
     /* hover state */
-    --ads-card-background-color-hover: var(--color-background-secondary);
+    --ads-card-background-color-hover: var(--ads-ui-ink-90);
     --ads-card-border-color-hover: #848192;
     --ads-card-box-shadow-hover:  #000 @50%, X:0 Y: 3 B:12; /* probably not working */
 }
@@ -372,9 +372,9 @@ ads-card.tool-card {
 
 
 html[theme='dark'] ads-card.tool-card {
-    --ads-card-background-color: var(--color-background-tertiary);
+    --ads-card-background-color: var(--ads-ui-ink-80);
     --ads-card-border-color: transparent;
-    --ads-card-background-color-hover: var(--color-background-tertiary);
+    --ads-card-background-color-hover: var(--ads-ui-ink-80);
     --ads-card-border-color-hover: #848192;
     --ads-card-box-shadow-hover: none;
 }
diff --git a/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html b/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html
index ff3d5cac7d..fc007bd137 100644
--- a/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html
+++ b/themes/arm-design-system-hugo-theme/layouts/_default/baseof.html
@@ -19,6 +19,10 @@
 
         {{partial "header/nav-masthead.html" .}}
 
+        {{ if not .IsHome }}
+            {{ partial "header/color-refresh-alert.html" . }}
+        {{ end }}
+
         {{/* Where all content sits. Each layout file defines "main" which then sits here. */}}
         <div id="main" class="c-container is-responsive-width" style="min-height: 250px;">
             <div id="all-content-div-margined" class="u-margin-left-0 u-margin-right-0">
diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html
index dd6818ca10..91a19db8f8 100644
--- a/themes/arm-design-system-hugo-theme/layouts/index.html
+++ b/themes/arm-design-system-hugo-theme/layouts/index.html
@@ -62,10 +62,18 @@ <h1 id="homepage-header" class="orchard-breeze-text">Arm Learning Paths</h1>
     <div class="c-col">
         <div class="u-display-grid u-gap-2 sm:u-grid-columns-1 md:u-grid-columns-2 lg:u-grid-columns-2 xl:u-grid-columns-3 xxl:u-grid-columns-3 u-margin-top-1">
             {{ range (where .Site.Pages "Params.maintopic" true).ByWeight}}
+                {{ $iconFilename := printf "%s.svg" (.Title | urlize) }}
+                {{ if eq .Title "Servers and Cloud Computing" }}
+                    {{ $iconFilename = "Cloud.svg" }}
+                {{ else if eq .Title "Mobile, Graphics, and Gaming" }}
+                    {{ $iconFilename = "Premium%20Phone.svg" }}
+                {{ else if eq .Title "Embedded and Microcontrollers" }}
+                    {{ $iconFilename = "Microcontroller.svg" }}
+                {{ end }}
                 <a href="{{.Permalink}}">
                 <div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
                     <div class="c-col-3">
-                        <img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{.Title | urlize}}.svg" width="60" height="45" />
+                        <img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{ $iconFilename }}" width="60" height="45" />
                     </div>
                     <div class="maintopic-content c-col-9 u-margin-left-1">                       
                         <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Title "and" "&" }}</h3>   
@@ -79,7 +87,7 @@ <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Ti
             <a href="/tag/ml/">
             <div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
                 <div class="c-col-3">
-                    <img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/ai.svg" width="60" height="45" style="width: 100%;" />
+                    <img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/AI_2.svg" width="60" height="45" style="width: 100%;" />
                 </div>
                 <div class="maintopic-content c-col-9 u-margin-left-1">
                     <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">AI</h3> 
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
new file mode 100644
index 0000000000..95f065b9a1
--- /dev/null
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
@@ -0,0 +1,39 @@
+{{/* Site-wide launch notice. The homepage is excluded by baseof.html. */}}
+<div id="color-refresh-alert-container" hidden>
+    <ads-alert
+        id="color-refresh-alert"
+        theme="dark"
+        level="default"
+        has-close-button="true"
+        text="We’ve refreshed our colors. The site’s content and functionality remain the same."
+    ></ads-alert>
+</div>
+
+<script>
+    (function () {
+        var dismissalKey = 'arm-learning-paths-color-refresh-alert-dismissed-v1';
+        var container = document.getElementById('color-refresh-alert-container');
+        var alert = document.getElementById('color-refresh-alert');
+        var dismissed = false;
+
+        try {
+            dismissed = window.localStorage.getItem(dismissalKey) === 'true';
+        } catch (error) {
+            // Keep the notice available when storage is disabled.
+        }
+
+        if (!dismissed) {
+            container.hidden = false;
+        }
+
+        alert.addEventListener('visibleChange', function (event) {
+            if (event.detail && event.detail.visible === false) {
+                try {
+                    window.localStorage.setItem(dismissalKey, 'true');
+                } catch (error) {
+                    // The alert still closes for this page when storage is disabled.
+                }
+            }
+        });
+    })();
+</script>
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html
index 40cb63fb66..ebb2828da8 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html
@@ -15,9 +15,9 @@
   
           <!-- Change title slightly for Tag entries -->
           {{ if eq .Kind "term" }}
-            <h1 id="ads-masthead-title" slot="heading"><span>Tag: {{.Title}}</span></h1>
+            <h1 id="ads-masthead-title"><span>Tag: {{.Title}}</span></h1>
           {{else}}
-            <h1 id="ads-masthead-title" slot="heading"><span>{{.Title}}</span></h1>
+            <h1 id="ads-masthead-title"><span>{{.Title}}</span></h1>
           {{end}}
       </ads-masthead>
       </div>
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
index cbdda54571..f03ae9972d 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
@@ -30,9 +30,9 @@
             
                     <!-- Change title slightly for Tag entries -->
                     {{ if eq .Kind "term" }}
-                        <h1 id="ads-masthead-title" slot="heading"><span>Tag: {{.Title}}</span></h1>
+                        <h1 id="ads-masthead-title"><span>Tag: {{.Title}}</span></h1>
                     {{else}}
-                        <h1 id="ads-masthead-title" slot="heading"><span>{{.Title}}</span></h1>
+                        <h1 id="ads-masthead-title"><span>{{.Title}}</span></h1>
                     {{end}}
                 </ads-masthead>
             </div>
diff --git a/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/AI_2.svg b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/AI_2.svg
new file mode 100644
index 0000000000..b254f4e193
--- /dev/null
+++ b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/AI_2.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M57 32C57 18.1914 45.8087 7.00005 32 7.00005C18.1914 7.00005 7.00005 18.1914 7.00005 32C7.00005 45.8087 18.1914 57 32 57C45.8087 57 57 45.8087 57 32ZM58.2001 32C58.2001 46.4714 46.4714 58.2001 32 58.2001C17.5287 58.2001 5.80005 46.4714 5.80005 32C5.80005 17.5287 17.5287 5.80005 32 5.80005C46.4714 5.80005 58.2001 17.5287 58.2001 32Z" fill="#E6E6E9"/>
+<path d="M32.6 12.646C34.3245 19.1393 35.8536 22.94 38.4805 25.567C41.1074 28.1939 44.9056 29.7205 51.3938 31.44V32.6C44.9055 34.3196 41.1048 35.8462 38.4767 38.4731C35.8487 41.1 34.3195 44.9005 32.6001 51.3936L31.4401 51.3937C29.7205 44.9054 28.1939 41.1048 25.5669 38.4767C22.9401 35.8486 19.1395 34.3195 12.6464 32.6V31.44C19.1398 29.7205 22.9403 28.1938 25.567 25.567C28.1938 22.9402 29.7205 19.1397 31.4401 12.6464L32.6 12.646ZM32.0209 15.0616C30.5049 20.3573 28.9669 23.8642 26.4156 26.4155C23.8646 28.9665 20.3585 30.5043 15.0643 32.02C20.3587 33.5363 23.8648 35.0763 26.4157 37.6283C28.9664 40.1802 30.5042 43.6861 32.0199 48.9764C33.5362 43.6816 35.0762 40.1754 37.6284 37.6244C40.1803 35.0736 43.6864 33.5357 48.977 32.0199C43.6869 30.5042 40.1829 28.9663 37.6321 26.4155C35.0808 23.8642 33.5408 20.3575 32.0209 15.0616Z" fill="#E6E6E9"/>
+</svg>
diff --git a/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Cloud.svg b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Cloud.svg
new file mode 100644
index 0000000000..38b2931008
--- /dev/null
+++ b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Cloud.svg
@@ -0,0 +1,4 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.2004 25.0001C21.6377 25.0002 23.9309 25.6492 25.9006 26.7911L25.2991 27.8292C23.5091 26.7914 21.4228 26.2004 19.2004 26.2003C12.4618 26.2003 7.00024 31.6619 7.00024 38.4005C7.00046 45.1389 12.4619 50.5997 19.2004 50.5997H48.0002C52.9688 50.5996 57.0002 46.5683 57.0002 41.5997C57.0001 39.2928 56.1373 37.1939 54.7034 35.6007C53.0515 33.7612 50.6613 32.5998 48.0002 32.5997V31.4005C51.0187 31.4005 53.7279 32.7189 55.5959 34.7989C57.2218 36.6055 58.2003 38.987 58.2004 41.5997C58.2004 47.231 53.6315 51.7998 48.0002 51.7999H19.2004C11.7992 51.7999 5.80026 45.8017 5.80005 38.4005C5.80005 30.9991 11.7991 25.0001 19.2004 25.0001Z" fill="#E6E6E9"/>
+<path d="M21.3958 16.5958C27.2501 10.7415 36.7504 10.7415 42.6047 16.5958C48.4589 22.4501 48.459 31.9505 42.6047 37.8048L41.7561 36.9562C47.1417 31.5705 47.1416 22.8301 41.7561 17.4444C36.3704 12.0588 27.6301 12.0588 22.2444 17.4444C20.738 18.9508 19.6467 20.7139 18.9866 22.5987L17.8538 22.2022C18.5736 20.1471 19.7622 18.2294 21.3958 16.5958Z" fill="#E6E6E9"/>
+</svg>
diff --git a/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Microcontroller.svg b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Microcontroller.svg
new file mode 100644
index 0000000000..33224a11aa
--- /dev/null
+++ b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Microcontroller.svg
@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M38.2804 40.8306C40.4451 40.8308 42.2003 42.5857 42.2003 44.7505C42.2001 46.9151 40.445 48.6702 38.2804 48.6704C36.1156 48.6704 34.3597 46.9153 34.3595 44.7505C34.3595 42.5855 36.1154 40.8306 38.2804 40.8306ZM38.2804 42.0298C36.7782 42.0298 35.5597 43.2483 35.5597 44.7505C35.5599 46.2525 36.7783 47.4702 38.2804 47.4702C39.7823 47.47 40.9999 46.2524 41.0001 44.7505C41.0001 43.2484 39.7824 42.03 38.2804 42.0298Z" fill="#E6E6E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M51.0802 40.8306C53.245 40.8307 55.0001 42.5856 55.0001 44.7505C54.9999 46.9152 53.2449 48.6703 51.0802 48.6704C48.9154 48.6704 47.1605 46.9153 47.1603 44.7505C47.1603 42.5855 48.9152 40.8306 51.0802 40.8306ZM51.0802 42.0298C49.578 42.0298 48.3595 43.2483 48.3595 44.7505C48.3597 46.2525 49.5781 47.4702 51.0802 47.4702C52.5822 47.4701 53.7997 46.2524 53.7999 44.7505C53.7999 43.2484 52.5823 42.0299 51.0802 42.0298Z" fill="#E6E6E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M24.42 25.0005C25.4013 25.0005 26.2002 25.7985 26.2003 26.7798V37.2202C26.2002 38.2015 25.4013 39.0004 24.42 39.0005H13.9796C12.9985 39.0003 12.2004 38.2014 12.2003 37.2202V26.7798C12.2004 25.7986 12.9985 25.0007 13.9796 25.0005H24.42ZM13.9796 26.1997C13.6612 26.1999 13.3997 26.4614 13.3995 26.7798V37.2202C13.3997 37.5386 13.6612 37.8001 13.9796 37.8003H24.42C24.7386 37.8002 25 37.5387 25.0001 37.2202V26.7798C25 26.4613 24.7386 26.1998 24.42 26.1997H13.9796Z" fill="#E6E6E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.0304 21.8003C28.3426 21.8005 29.3968 22.8585 29.4103 24.1636V39.8403C29.4101 41.1515 28.3513 42.2103 27.0402 42.2104H11.3702C10.059 42.2104 9.00027 41.1516 9.00012 39.8403V24.1704C9.00012 22.859 10.0589 21.8003 11.3702 21.8003H27.0304ZM11.3702 23.0005C10.7216 23.0005 10.2003 23.5218 10.2003 24.1704V39.8403C10.2005 40.4888 10.7217 41.0103 11.3702 41.0103H27.0402C27.6886 41.0101 28.2099 40.4888 28.2101 39.8403V24.1704C28.2002 23.5188 27.6756 23.0007 27.0304 23.0005H11.3702Z" fill="#E6E6E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.88 25.0005C54.5012 25.0005 54.9999 25.4985 55.0001 26.1196V31.48C55.0001 32.1013 54.5013 32.6001 53.88 32.6001H35.7198C35.0985 32.6 34.5997 32.1013 34.5997 31.48V26.1196C34.5999 25.4985 35.0987 25.0006 35.7198 25.0005H53.88ZM35.7999 31.3999H53.7999V26.1997H35.7999V31.3999Z" fill="#E6E6E9"/>
+<path d="M44.7999 13.3999H38.3995V12.1997H44.7999V13.3999Z" fill="#E6E6E9"/>
+<path d="M51.2003 13.3999H48.0001V12.1997H51.2003V13.3999Z" fill="#E6E6E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M53.92 9.3999C54.5114 9.39996 55.0001 9.88865 55.0001 10.48V12.1997H56.3995C57.4009 12.1997 58.2101 13.0089 58.2101 14.0103V49.9995C58.2101 51.0009 57.4009 51.8101 56.3995 51.8101H7.6095C6.60833 51.8098 5.79993 51.0007 5.79993 49.9995V14.0103C5.79995 13.009 6.60834 12.1999 7.6095 12.1997H34.5997V10.48C34.5997 9.89683 35.0704 9.39998 35.6798 9.3999H53.92ZM7.6095 13.3999C7.27108 13.4001 7.00014 13.6718 7.00012 14.0103V49.9995C7.00012 50.338 7.27107 50.6096 7.6095 50.6099H56.3995C56.7382 50.6099 57.0099 50.3381 57.0099 49.9995V14.0103C57.0099 13.6716 56.7381 13.3999 56.3995 13.3999H55.0001V15.0298C55.0001 15.613 54.5295 16.1098 53.92 16.1099H35.6798C35.0967 16.1098 34.5997 15.6392 34.5997 15.0298V13.3999H7.6095ZM35.7999 14.9097H53.7999V10.6001H35.7999V14.9097Z" fill="#E6E6E9"/>
+</svg>
diff --git a/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Premium Phone.svg b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Premium Phone.svg
new file mode 100644
index 0000000000..c2228b5c8e
--- /dev/null
+++ b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Premium Phone.svg	
@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M38.4302 55.0002H25.6304V53.8H38.4302V55.0002Z" fill="#E6E6E9"/>
+<path d="M31.9995 9.00024C33.0904 9.00024 34.1743 9.03078 35.2397 9.10181L35.1597 10.2991C34.1252 10.2301 33.0685 10.2004 31.9995 10.2004C30.9308 10.2004 29.8746 10.2301 28.8403 10.2991L28.7603 9.10181C29.8255 9.0308 30.9088 9.00025 31.9995 9.00024Z" fill="#E6E6E9"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.8198 5.80005C47.8112 5.80006 48.6099 6.59872 48.6099 7.59009V56.429C48.5949 57.4045 47.7998 58.2003 46.8101 58.2004H17.1899C16.1987 58.2004 15.4001 57.4016 15.3999 56.4104V7.59009C15.3999 6.59872 16.1986 5.80005 17.1899 5.80005H46.8198ZM16.6001 56.4104C16.6003 56.7388 16.8614 57.0002 17.1899 57.0002H46.8101C47.1392 57.0001 47.4034 56.7365 47.4097 56.4133V49.8547C46.8158 50.0589 46.1643 50.2489 45.4653 50.4221C42.0454 51.2771 37.3639 51.8 32.2095 51.8C27.0562 51.8 22.3657 51.277 18.9556 50.4221C18.0912 50.2078 17.2999 49.9656 16.6001 49.7034V56.4104ZM17.1899 7.00024C16.8613 7.00024 16.6001 7.26146 16.6001 7.59009V48.4143C17.283 48.6963 18.098 48.9631 19.0239 49.2014L19.2446 49.2571L19.2456 49.2581C22.5352 50.0829 27.1239 50.5998 32.2095 50.5999C37.2949 50.5999 41.8742 50.0831 45.1743 49.2581L45.1753 49.2571C46.011 49.05 46.7606 48.8217 47.4097 48.5793V7.59009C47.4097 7.26146 47.1484 7.00025 46.8198 7.00024H17.1899Z" fill="#E6E6E9"/>
+</svg>

From 1487df17ccc1439e89f90c524d567bbc2041bdc6 Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Thu, 16 Jul 2026 11:37:08 -0700
Subject: [PATCH 3/5] masthead adjusting

---
 assets/css/cross-page.css                                      | 3 +--
 .../layouts/partials/header/masthead.html                      | 2 +-
 .../layouts/partials/header/nav-masthead.html                  | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css
index 6db3880626..d2ec8ed12c 100644
--- a/assets/css/cross-page.css
+++ b/assets/css/cross-page.css
@@ -166,7 +166,7 @@ table tbody td {
 /* Fix Nav Masthead Breadcrumb container */
 /*************************************/
 #nav-masthead-breadcrumbs {
-    background-color: var(--ads-ui-ink-80);
+    background-color: var(--ads-ui-ink-100);
 }
 
 
@@ -210,7 +210,6 @@ arm-top-navigation:not(:defined) {
 
 /* Fix Masthead Height */
 #expanded-masthead  {
-        background-color: transparent;
         min-height: 100px;                  /* Keep baseline height for short titles */
         height: auto;                       /* Allow 2-line titles to expand */
         background-position: center; 
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html
index ebb2828da8..6d1e3dd46b 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/masthead.html
@@ -8,7 +8,7 @@
   <!-- No masthead on homepage, as that has a special gradient look/feel -->
   {{ if .IsHome }}
   {{else}}
-    <div id="expanded-masthead">
+    <div id="expanded-masthead" class="u-bg-color-ads-ui-violet-90">
       <div class="is-responsive-width">
       <ads-masthead style="background-color: rgba(0,0,0,0)" theme="dark">
           {{partial "header/breadcrumbs.html" .}}
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
index f03ae9972d..b820866c71 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/nav-masthead.html
@@ -23,7 +23,7 @@
             <arm-top-navigation observe="#breadcrumb-element"></arm-top-navigation>
         </div>
         <!-- Masthead -->
-        <div id="expanded-masthead">
+        <div id="expanded-masthead" class="u-bg-color-ads-ui-violet-90">
             <div class="is-responsive-width">
                 <ads-masthead style="background-color: rgba(0,0,0,0)" theme="dark">
                     {{partial "header/breadcrumbs.html" .}}

From 7a1515abb02575078d7d808f887f96555ebb835a Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Thu, 16 Jul 2026 12:31:19 -0700
Subject: [PATCH 4/5] adjustments to alert and card title size

---
 assets/css/cross-page.css                        |  6 ++++++
 assets/css/list-pages.css                        | 12 ++++++++----
 .../partials/header/color-refresh-alert.html     | 16 +++++++++-------
 3 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/assets/css/cross-page.css b/assets/css/cross-page.css
index d2ec8ed12c..bd2230f2d3 100644
--- a/assets/css/cross-page.css
+++ b/assets/css/cross-page.css
@@ -227,6 +227,12 @@ ads-masthead {
     --ads-masthead-border-bottom-color: transparent;
 }
 
+/* Align the alert icon with the masthead title while its surface spans the page. */
+#color-refresh-alert-container {
+    background-color: #F0F0F0;
+    overflow: hidden;
+}
+
 /* Bypass ADS's fixed 70% heading wrapper while retaining its typography. */
 ads-masthead #ads-masthead-title {
     box-sizing: border-box;
diff --git a/assets/css/list-pages.css b/assets/css/list-pages.css
index aa90dd87a0..ddc66c6478 100644
--- a/assets/css/list-pages.css
+++ b/assets/css/list-pages.css
@@ -329,15 +329,18 @@ html[theme="light"] .learning-path-title, html[theme="light"] .basics-title {
 }
 .learning-path-title, .basics-title {
     color: var(--arm-light-blue);
-    /*font-weight: bold;
-    font-size:1.25rem;
-    */
     font-weight: 400;
 
     margin-top: 0px;
     margin-bottom: 4px;
 }
 
+.learning-path-title,
+.module-card-title {
+    font-size: 1.25rem!important;
+    line-height: 1.3;
+}
+
 html[theme="dark"] .learning-path-title {
     color: #E6E6E9;
 }
@@ -360,7 +363,8 @@ html[theme="dark"] .learning-path-title {
 .install-guide-title {
     margin-top: 0px;
     margin-bottom: 0px;
-    font-size: 1rem!important;
+    font-size: 1.25rem!important;
+    line-height: 1.3;
 }
 
 
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
index 95f065b9a1..08373ae5d7 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
@@ -1,12 +1,14 @@
 {{/* Site-wide launch notice. The homepage is excluded by baseof.html. */}}
 <div id="color-refresh-alert-container" hidden>
-    <ads-alert
-        id="color-refresh-alert"
-        theme="dark"
-        level="default"
-        has-close-button="true"
-        text="We’ve refreshed our colors. The site’s content and functionality remain the same."
-    ></ads-alert>
+    <div class="color-refresh-alert-inner is-responsive-width">
+        <ads-alert
+            id="color-refresh-alert"
+            theme="dark"
+            level="default"
+            has-close-button="true"
+            text="We’ve refreshed our colors. The site’s content and functionality remain the same."
+        ></ads-alert>
+    </div>
 </div>
 
 <script>

From 753bbe6c73d231c9f14a4be6fe311748c04f986b Mon Sep 17 00:00:00 2001
From: Christopher Moroney <christopher.moroney1@gmail.com>
Date: Thu, 16 Jul 2026 14:05:25 -0700
Subject: [PATCH 5/5] copilot fixes

---
 themes/arm-design-system-hugo-theme/layouts/index.html    | 6 +++---
 .../layouts/partials/header/color-refresh-alert.html      | 8 ++++++--
 .../{Premium Phone.svg => premium-phone.svg}              | 0
 3 files changed, 9 insertions(+), 5 deletions(-)
 rename themes/arm-design-system-hugo-theme/static/img/main-topic-icons/{Premium Phone.svg => premium-phone.svg} (100%)

diff --git a/themes/arm-design-system-hugo-theme/layouts/index.html b/themes/arm-design-system-hugo-theme/layouts/index.html
index 91a19db8f8..fff8f69277 100644
--- a/themes/arm-design-system-hugo-theme/layouts/index.html
+++ b/themes/arm-design-system-hugo-theme/layouts/index.html
@@ -66,14 +66,14 @@ <h1 id="homepage-header" class="orchard-breeze-text">Arm Learning Paths</h1>
                 {{ if eq .Title "Servers and Cloud Computing" }}
                     {{ $iconFilename = "Cloud.svg" }}
                 {{ else if eq .Title "Mobile, Graphics, and Gaming" }}
-                    {{ $iconFilename = "Premium%20Phone.svg" }}
+                    {{ $iconFilename = "premium-phone.svg" }}
                 {{ else if eq .Title "Embedded and Microcontrollers" }}
                     {{ $iconFilename = "Microcontroller.svg" }}
                 {{ end }}
                 <a href="{{.Permalink}}">
                 <div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
                     <div class="c-col-3">
-                        <img alt="Icon for {{.Title}}" aria-hidden="true" src="img/main-topic-icons/{{ $iconFilename }}" width="60" height="45" />
+                        <img alt="" aria-hidden="true" src="img/main-topic-icons/{{ $iconFilename }}" width="60" height="45" />
                     </div>
                     <div class="maintopic-content c-col-9 u-margin-left-1">                       
                         <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Title "and" "&" }}</h3>   
@@ -87,7 +87,7 @@ <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">{{ replace .Ti
             <a href="/tag/ml/">
             <div class="main-topic-card c-row" style="flex-wrap: nowrap !important;">
                 <div class="c-col-3">
-                    <img alt="Icon for AI" aria-hidden="true" src="img/main-topic-icons/AI_2.svg" width="60" height="45" style="width: 100%;" />
+                    <img alt="" aria-hidden="true" src="img/main-topic-icons/AI_2.svg" width="60" height="45" style="width: 100%;" />
                 </div>
                 <div class="maintopic-content c-col-9 u-margin-left-1">
                     <h3 class="main-topic-title u-margin-top-1/2 u-margin-bottom-1/2">AI</h3> 
diff --git a/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html b/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
index 08373ae5d7..1d92bf5be2 100644
--- a/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
+++ b/themes/arm-design-system-hugo-theme/layouts/partials/header/color-refresh-alert.html
@@ -15,9 +15,13 @@
     (function () {
         var dismissalKey = 'arm-learning-paths-color-refresh-alert-dismissed-v1';
         var container = document.getElementById('color-refresh-alert-container');
-        var alert = document.getElementById('color-refresh-alert');
+        var alertElement = document.getElementById('color-refresh-alert');
         var dismissed = false;
 
+        if (!container || !alertElement) {
+            return;
+        }
+
         try {
             dismissed = window.localStorage.getItem(dismissalKey) === 'true';
         } catch (error) {
@@ -28,7 +32,7 @@
             container.hidden = false;
         }
 
-        alert.addEventListener('visibleChange', function (event) {
+        alertElement.addEventListener('visibleChange', function (event) {
             if (event.detail && event.detail.visible === false) {
                 try {
                     window.localStorage.setItem(dismissalKey, 'true');
diff --git a/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Premium Phone.svg b/themes/arm-design-system-hugo-theme/static/img/main-topic-icons/premium-phone.svg
similarity index 100%
rename from themes/arm-design-system-hugo-theme/static/img/main-topic-icons/Premium Phone.svg
rename to themes/arm-design-system-hugo-theme/static/img/main-topic-icons/premium-phone.svg