DO NOT MERGE

app/assets/stylesheets/partials/_buttons.scss

@@ -1,5 +1,7 @@
   @mixin buttonSecondary {
     border: 1px solid $color-blue-500;
+    background-color: $color-white;
+    color: $color-text-primary;
     border-radius: 0;
     display: inline-block;
     padding: 6px 12px;

app/assets/stylesheets/partials/_results.scss

@@ -1,3 +1,7 @@
+// ----------------------------
+// Results List
+// ----------------------------
+
 .top-space {
   margin-top: 1.2rem;
   @media (min-width: $bp-screen-md) {
@@ -28,73 +32,77 @@
       margin-top: 0;
     }
   }
+}
 
-  .results-list {
-    @media (max-width: $bp-screen-md) {
-      .result {
-        padding-left: 0;
-        padding-right: 0;
-        margin-left: 3rem;
-      }
-    }
-  }
+.results-list {
+  list-style-type: none;
+  padding: 0;
 }
 
-.result {
-  padding: 2rem;
-  border-top: 1px solid $brand-primary;
-  font-size: $fs-small;
-  line-height: 0; /* line height needs to be reset so iOS doesn't act weird */
+// ----------------------------
+// Individual Results
+// ----------------------------
 
-  &::marker {
-    font-size: 2.5rem;
-    font-weight: $fw-bold;
-  }
+li.result {
+  margin-bottom: 48px;
 
-  &:hover,
-  &:focus {
-    background-color: $gray-l4;
+  .eyebrow {
+    color: $color-text-secondary;
+    font-size: 1.3rem;
+    font-weight: $fw-medium;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
   }
 
-  .result-content {
-    line-height: 1.2;
+  .record-title {
+    font-size: 2.4rem;
+    line-height: 1.3;
+    margin-bottom: 8px;
 
-    .record-title {
-      font-size: 2.5rem;
-      line-height: 1.1;
+    a {
+      @include underlinedLinks;
+      font-weight: $fw-semibold;     
     }
+  }
 
-    a:visited {
-      color: $brand-secondary;
+  .pub-info {
+    font-size: $fs-base;
+    color: $color-text-secondary;
+    span:first-child:after {
+      content: " • ";
+      color: $color-text-disabled;
     }
+    margin-bottom: 1em;
+  }
 
-    .pub-info {
-      font-size: $fs-base;
-      color:  $gray-d1;
-      span:first-child:after {
-        content: " | ";
+  .result-summary {
+    margin-bottom: 2.4em;
+  }
+
+  .result-highlights {
+    margin-top: 1.4em;
+    ul {
+      list-style: none;
+      li {
+        margin-left: 2rem;
       }
-      margin: 1em 0;
     }
+  }
 
-    .result-summary {
-      margin-bottom: 2.4em;
-    }
+  .result-highlights.use {
+    margin-top: 0;
 
-    .result-highlights {
-      margin-top: 1.4em;
-      ul {
-        list-style: none;
-        li {
-          margin-left: 2rem;
-        }
+    ul {
+      list-style: disc inside;
+
+      li {
+        margin-left: 0.6rem;
       }
     }
   }
 
   .result-get,
   .result-record {
-    padding-top: 5px;
     a:visited {
       color: $white;
     }
@@ -118,10 +126,63 @@
     font-size: 1.8rem;
     line-height: 1.1;
   }
+
+  .highlight {
+    background-color: $color-highlight;
+  }
+
+  &.use, &.primo {
+    .result-metadata {
+      margin-bottom: 16px;
+    }
+
+    .pub-info {
+      margin-bottom: 4px;
+    }
+
+    ul.contributors {
+      li {
+        font-weight: $fw-normal;
+
+        a {
+          color: $color-text-secondary;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    .inner-heading {
+      font-size: 1.6rem;
+      font-family: $base-font; // Since we're using 16px, override to use body font
+    }
+
+    // Make result buttons present as underlined links
+    a.button {
+      @include underlinedLinks;
+      font-weight: $fw-medium;
+      margin-right: 16px;
+    }
+
+    // Except the first button, which should present as a secondary button
+    a.button:first-child {
+      @include buttonSecondary;
+    }
+
+    .truncate-list li:last-child {margin-bottom: 0;}
+
+  }
 }
 
-/* USE Specific Overrides */
-/* Layout of results and sidebar columns */
+/* Start USE specific overrides */
+
+// ----------------------------
+// Result list and Sidebar
+// ----------------------------
+
 #content-wrapper {
   padding-top: 12px;
   padding-bottom: 44px;
@@ -167,6 +228,7 @@
 
       a {
         @include underlinedLinks;
+        font-weight: $fw-medium;   
       }
     }
 
@@ -205,7 +267,10 @@
 
 }
 
-/* Callouts below results */
+// ----------------------------
+// Result callout boxes
+// ----------------------------
+
 #callout-wrapper {
   display: flex;
   gap: 12px;

app/assets/stylesheets/partials/_typography.scss

@@ -1,7 +1,7 @@
 // Mixing for underlined links
 @mixin underlinedLinks {
   color: inherit;
-  font-weight: $fw-medium;
+  font-weight: inherit;
   text-decoration: underline;
   text-decoration-color: $color-blue-500;
   text-underline-offset: 0.5rem;  

app/assets/stylesheets/partials/_variables.scss

@@ -21,6 +21,9 @@ $color-red-400: #FF3333;
 $color-red-500: #ff0000;
 $color-red-600: #e50000;
 
+// YELLOW
+$color-yellow-500: #FFD700;
+
 // CYAN
 $color-cyan-500: #00C8FF;
 $color-cyan-700: #00A0CC;
@@ -57,6 +60,9 @@ $color-focus-dark: $color-cyan-500;
 $color-suggestion-border: $color-purple-700;
 $color-suggestion-accent-text: $color-purple-700;
 
+// HIGHLIGHT
+$color-highlight: $color-yellow-500;
+
 // ----------------------------
 // #TYPOGRAPHY
 // ----------------------------

app/helpers/search_helper.rb

@@ -22,16 +22,22 @@ def link_to_result(result)
     end
   end
 
-  def link_to_tab(target)
-    if @active_tab == target.downcase
-      link_to target, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: target.downcase)),
-        aria: { current: "page" },
-        class: "active tab-link",
-        data: { turbo_frame: "search-results", turbo_action: "advance" }
+  # Generates a link for a search results tab, marking it as active if it matches the current active tab.
+  # @param target [String] The name of the tab to link to
+  # @param label [String] The display label for the tab (optional)
+  # @return [String] HTML link element for the tab
+  def link_to_tab(target, label = nil)
+    clean_target = target.downcase.gsub(' ', '_').downcase
+    tab_label = label || target
+    if @active_tab == clean_target
+      link_to tab_label, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: clean_target)),
+              aria: { current: 'page' },
+              class: 'active tab-link',
+              data: { turbo_frame: 'search-results', turbo_action: 'advance' }
     else
-      link_to target, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: target.downcase)),
-        class: "tab-link",
-        data: { turbo_frame: "search-results", turbo_action: "advance" }
+      link_to tab_label, results_path(params.permit(:q, :per_page, :booleanType, :tab).merge(tab: clean_target)),
+              class: 'tab-link',
+              data: { turbo_frame: 'search-results', turbo_action: 'advance' }
     end
   end
 

app/views/search/_result.html.erb

@@ -1,25 +1,31 @@
-<li class="result">
+<li class="result use">
   <div class="result-content">
+    <p class="eyebrow">Eyebrow Text</p>
     <h3 class="record-title">
       <span class="sr">Title: </span>
       <%= link_to_result(result) %>
     </h3>
 
-    <p class="pub-info">
-      <span><%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %></span>
-      <span>
-        <% result[:dates]&.each do |date| %>
-          <%= date['value'] if date['kind'] == 'Publication date' %>
-        <% end %>
-      </span>
-    </p>
+    <div class="result-metadata">
 
-    <span class="sr">Contributors: </span>
-    <ul class="list-inline truncate-list contributors">
-      <%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %>
-    </ul>
+      <p class="pub-info">
+        <span><%= result[:content_type]&.each { |type| type['value'] }&.join(' ; ') %></span>
+        <span>
+          <% result[:dates]&.each do |date| %>
+            <%= date['value'] if date['kind'] == 'Publication date' %>
+          <% end %>
+        </span>
+      </p>
 
-    <div class="result-highlights">
+      <% if result[:contributors].present? %>   
+        <span class="sr">Contributors: </span>
+        <ul class="list-inline truncate-list contributors">
+          <%= render partial: 'shared/contributors', locals: { contributors: result[:contributors] } %>
+        </ul>
+      <% end %>
+    </div>
+
+    <div class="result-highlights use">
       <%= render partial: 'search/highlights', locals: { result: result } %>
     </div>
 

app/views/search/_result_primo.html.erb

@@ -1,5 +1,6 @@
-<li class="result">
+<li class="result primo">
   <div class="result-content">
+    <p class="eyebrow">Eyebrow Text</p>
     <h3 class="record-title">
       <span class="sr">Title: </span>
       <% if result[:links]&.find { |link| link['kind'] == 'full record' } %>
@@ -9,30 +10,34 @@
       <% end %>
     </h3>
 
-    <p class="pub-info">
-      <span><%= result[:format] %></span>
-      <span><%= result[:year] %></span>
-    </p>
+    <div class="result-metadata">
 
-    <% if result[:creators].present? %>
-      <span class="sr">Contributors: </span>
-      <ul class="list-inline truncate-list contributors">
-        <% result[:creators].each do |creator| %>
-          <li>
-            <% if creator[:link] %>
-              <%= link_to creator[:value], creator[:link]  %>
-            <% else %>
-              <%= creator[:value] %>
-            <% end %>
-          </li>
-        <% end %>
-      </ul>
-    <% end %>
+      <p class="pub-info">
+        <span><%= result[:format] %></span>
+        <span><%= result[:year] %></span>
+      </p>
+
+      <% if result[:creators].present? %>
+        <span class="sr">Contributors: </span>
+        <ul class="list-inline truncate-list contributors">
+          <% result[:creators].each do |creator| %>
+            <li>
+              <% if creator[:link] %>
+                <%= link_to creator[:value], creator[:link]  %>
+              <% else %>
+                <%= creator[:value] %>
+              <% end %>
+            </li>
+          <% end %>
+        </ul>
+      <% end %>
+
+    </div>
 
     <div class="result-get">
       <% if result[:links].present? %>
         <% result[:links].each do |link| %>
-          <%= link_to link['kind'].titleize, link['url'], class: 'link-button' %>
+          <%= link_to link['kind'].titleize, link['url'], class: 'button' %>
         <% end %>
       <% end %>
     </div>