Align plugin-manager header bar with Gerrit Use the same 'Roboto' font as the Google screen and align the style of the top-level bar, including the search box. Also, swap the action button font with the 'Open Sans' used in the Gerrit header. In order to reuse the same Gerrit fonts, import the /styles/fonts.css from the plugin-manager and intro pages. Old custom UI : https://www.pasteboard.co/_EDQs3sdyOEU.png UI more aligned to Gerrit: https://www.pasteboard.co/pUNu1B9guRTP.png Release-Notes: Align plugin-manager and intro headers with Gerrit L&F Change-Id: I8248c2e67e29033ffde779eade6aeeb7684d6b75 (cherry picked from commit 6b19964dd31d25a839d0e07f24821f9f16ce888f)

diff --git a/src/main/resources/static/css/intro.css b/src/main/resources/static/css/intro.css
index ca5a51a..07269f6 100644
--- a/src/main/resources/static/css/intro.css
+++ b/src/main/resources/static/css/intro.css

@@ -4,11 +4,12 @@
     --text-dark: #1f2937;
     --text-body: #4b5563;
     --text-light: #9ca3af;
+    --text-lighter: #e1e7f1;
     --bg-light: #f9fafb;
     --bg-card: #ffffff;
     --border-light: #e5e7eb;
-    --btn-skip: #e5e7eb;
-    --btn-skip-hover: #d1d5db;
+    --btn-skip: #314972;
+    --btn-skip-hover: #3d5d92;
 }
 
 * {
@@ -18,10 +19,11 @@
 }
 
 body {
-    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+    font-family: 'Roboto', Arial, sans-serif;
+    font-size: 1rem;
+    line-height: 1.4;
     background-color: var(--bg-light);
     color: var(--text-body);
-    line-height: 1.6;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
@@ -40,27 +42,46 @@
 .header-container {
     max-width: 1200px;
     margin: 0 auto;
-    padding: 1rem 1.5rem;
+    padding: 0.15rem 0.15rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
+    height: 48px;
 }
 
 .header-title {
-    font-size: 1.25rem;
-    font-weight: 700;
-    letter-spacing: -0.025em;
+    font-size: 1.6rem;
+    font-weight: 400;
+    margin-left: 1rem;
+}
+
+.header-title::before {
+    background-image: url("/diffy.png");
+    --icon-width: 1em;
+    --icon-height: 1em;
+    background-size: 1em 1em;
+    background-repeat: no-repeat;
+    content: "";
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-right: clamp(0px, 1em, 8px);
+    margin-bottom: -4px;
+    flex-shrink: 0;
 }
 
 .skip-btn {
     background-color: var(--btn-skip);
-    color: var(--text-dark);
+    color: var(--text-lighter);
     text-decoration: none;
     padding: 0.5rem 1.25rem;
     border-radius: 0.5rem;
-    font-weight: 600;
-    font-size: 0.875rem;
+    font-size: 0.9rem;
     transition: background-color 0.2s ease, transform 0.1s ease;
+    margin-left: auto;
+    font-family: 'Open Sans';
+    font-style: normal;
+    font-weight: 500;
 }
 
 .skip-btn:hover {
@@ -100,7 +121,6 @@
     color: var(--text-dark);
     line-height: 1.1;
     text-align: left;
-    letter-spacing: -0.05em;
 }
 
 .hero-intro-text {

diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css
index 4692d86..fbf00be 100644
--- a/src/main/resources/static/css/style.css
+++ b/src/main/resources/static/css/style.css

@@ -4,13 +4,15 @@
   padding: 0 1.5rem;
 }
 .search-input {
-  width: 100%;
-  padding: 1rem 1.5rem;
+  width: 60%;
+  padding: 0.4rem 1rem 0.4rem 1rem;
   border: 1px solid var(--border-light);
-  border-radius: 0.5rem;
+  border-radius: 50px;
   font-size: 1rem;
   font-family: inherit;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  margin-left: auto;
+  color: var(--text-body);
 }
 .search-input:focus {
   outline: none;

diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html
index cda1549..7f3468c 100644
--- a/src/main/resources/static/index.html
+++ b/src/main/resources/static/index.html

@@ -8,6 +8,7 @@
     <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
+    <link href="../../../styles/fonts.css" rel="stylesheet">
     <link href="css/intro.css" rel="stylesheet">
     <link href="css/style.css" rel="stylesheet">
 </head>
@@ -16,7 +17,8 @@
 
   <header>
       <div class="header-container">
-          <div class="header-title">Gerrit Code Review</div>
+          <div class="header-title">Gerrit</div>
+          <input type="text" class="search-input" placeholder="Search for plugins..." ng-model="searchPlugin">
           <button type="button" class="skip-btn" style="border: none; cursor: pointer;" ng-click="plugins.goToGerrit()">
               Done &raquo; Go To Gerrit
           </button>
@@ -36,7 +38,6 @@
               Browse, install, and keep your Gerrit Code Review environment up to date with the latest plugins built
               on <a href="https://gerrit-ci.gerritforge.com/plugin-manager/">Gerrit-CI</a>.
           </p>
-          <input type="text" class="search-input" placeholder="Search for plugins..." ng-model="searchPlugin">
       </div>
 
       <div class="features-section">

diff --git a/src/main/resources/static/intro.html b/src/main/resources/static/intro.html
index 7ce5686..b9409ed 100644
--- a/src/main/resources/static/intro.html
+++ b/src/main/resources/static/intro.html

@@ -8,12 +8,12 @@
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
     <link href="css/intro.css" rel="stylesheet">
+    <link href="../../../styles/fonts.css" rel="stylesheet">
 </head>
 <body>
 
     <header>
         <div class="header-container">
-            <div class="header-title">Gerrit Code Review</div>
             <a href="/" class="skip-btn">&gt; Skip Intro</a>
         </div>
     </header>