From fbe22f319ede9c94818f4ee76d3661d999a52d49 Mon Sep 17 00:00:00 2001
From: Sabine Schmaltz <sabineschmaltz@gmail.com>
Date: Wed, 29 Nov 2023 17:53:15 +0100
Subject: [PATCH] buttons from design system, substitute legacy primary by new
 primary, books page

---
 src/ocamlorg_frontend/components/forms.eml    |  4 +-
 src/ocamlorg_frontend/components/header.eml   |  8 ++--
 .../components/learn_components.eml           | 21 ++++++---
 src/ocamlorg_frontend/components/navmap.eml   |  8 ++--
 .../components/pagination.eml                 |  2 +-
 .../css/partials/buttons.css                  | 46 +++++++++++++------
 src/ocamlorg_frontend/css/styles.css          | 12 ++---
 .../layouts/learn_layout.eml                  |  2 +-
 .../layouts/package_layout.eml                |  4 +-
 src/ocamlorg_frontend/pages/about.eml         |  6 +--
 .../pages/academic_users.eml                  | 12 ++---
 src/ocamlorg_frontend/pages/blog.eml          | 10 ++--
 src/ocamlorg_frontend/pages/blog_post.eml     |  4 +-
 src/ocamlorg_frontend/pages/books.eml         | 28 +++++------
 .../pages/changelog_entry.eml                 |  2 +-
 src/ocamlorg_frontend/pages/community.eml     |  8 ++--
 src/ocamlorg_frontend/pages/events.eml        |  2 +-
 src/ocamlorg_frontend/pages/exercises.eml     | 10 ++--
 src/ocamlorg_frontend/pages/governance.eml    |  2 +-
 .../pages/governance_team.eml                 |  4 +-
 src/ocamlorg_frontend/pages/home.eml          | 12 ++---
 .../pages/industrial_users.eml                | 14 +++---
 src/ocamlorg_frontend/pages/install.eml       |  4 +-
 src/ocamlorg_frontend/pages/learn.eml         |  2 +-
 src/ocamlorg_frontend/pages/local_blog.eml    |  2 +-
 src/ocamlorg_frontend/pages/news.eml          |  6 +--
 src/ocamlorg_frontend/pages/news_post.eml     |  2 +-
 src/ocamlorg_frontend/pages/not_found.eml     |  2 +-
 .../pages/package_documentation_not_found.eml |  2 +-
 .../pages/package_overview.eml                | 16 +++----
 src/ocamlorg_frontend/pages/packages.eml      | 18 ++++----
 .../pages/packages_autocomplete_fragment.eml  |  4 +-
 .../pages/packages_search.eml                 |  2 +-
 src/ocamlorg_frontend/pages/papers.eml        |  4 +-
 src/ocamlorg_frontend/pages/platform.eml      | 14 +++---
 src/ocamlorg_frontend/pages/playground.eml    | 10 ++--
 src/ocamlorg_frontend/pages/release.eml       |  2 +-
 src/ocamlorg_frontend/pages/releases.eml      |  8 ++--
 src/ocamlorg_frontend/pages/success_story.eml |  2 +-
 src/ocamlorg_frontend/pages/workshop.eml      | 20 ++++----
 40 files changed, 180 insertions(+), 161 deletions(-)

diff --git a/src/ocamlorg_frontend/components/forms.eml b/src/ocamlorg_frontend/components/forms.eml
index de6ec10b47..1952079626 100644
--- a/src/ocamlorg_frontend/components/forms.eml
+++ b/src/ocamlorg_frontend/components/forms.eml
@@ -10,13 +10,13 @@ let search_input ?button_attrs ?input_attrs ?dropdown_html ~label ~name _class =
         type="search"
         name="<%s name %>"
         placeholder="<%s label %>"
-        class="h-full w-full font-medium focus:border-legacy-primary-600 focus:ring-0 text-gray-800 border-legacy-primary-600 rounded-md rounded-r-none px-3 py-1 placeholder-body-400 appearance-none focus:outline-none"
+        class="h-full w-full font-medium focus:border-primary focus:ring-0 text-gray-800 border-primary rounded-md rounded-r-none px-3 py-1 placeholder-body-400 appearance-none focus:outline-none"
         <%s! Option.value ~default:"" input_attrs %>
     >
     
     <button
         aria-label="search"
-        class="h-full flex items-center justify-center rounded-r-md bg-legacy-primary-600 text-white px-4"
+        class="h-full flex items-center justify-center rounded-r-md bg-primary text-white px-4"
         <%s! Option.value ~default:"" button_attrs %>
     ><%s! Icons.magnifying_glass "w-6 h-6" %></button>
 
diff --git a/src/ocamlorg_frontend/components/header.eml b/src/ocamlorg_frontend/components/header.eml
index 627979a963..8146521b14 100644
--- a/src/ocamlorg_frontend/components/header.eml
+++ b/src/ocamlorg_frontend/components/header.eml
@@ -12,7 +12,7 @@ let menu_link
 ?(_class="")
 ()
 =
-  <a href="<%s href %>" class="font-semibold py-3 mg:py-4 px-1 lg:px-3 <%s _class %> <%s if active then "text-legacy-primary-600 underline" else "text-legacy-lighter" %> hover:text-legacy-primary-600"><%s title %></a>
+  <a href="<%s href %>" class="font-semibold py-3 mg:py-4 px-1 lg:px-3 <%s _class %> <%s if active then "text-primary underline" else "text-legacy-lighter" %> hover:text-primary"><%s title %></a>
 
 
 let render
@@ -22,7 +22,7 @@ let render
 =
 let search_dropdown () =
   <div id="header-search-results" aria-live="polite"></div>
-  <a class="flex py-2 px-2 mx-2 gap-4 hover:bg-legacy-primary-100 font-normal rounded-md text-legacy-primary-600" href="<%s Url.api %>">
+  <a class="flex py-2 px-2 mx-2 gap-4 hover:bg-legacy-primary-100 font-normal rounded-md text-primary" href="<%s Url.api %>">
     Standard Library API
     <%s! Icons.arrow_top_right_on_square "w-6 h-6" %>
   </a>
@@ -64,7 +64,7 @@ in
     </ul>
     <% if show_get_started then (%>
     <ul class="order-3 hidden lg:flex items-center">
-      <li><a href="<%s Url.getting_started %>" class="btn btn-secondary btn-sm">Get Started</a></li>
+      <li><a href="<%s Url.getting_started %>" class="btn btn-ghost h-10 px-4">Get Started</a></li>
     </ul>
     <% ); %>
     <ul class="order-1 lg:hidden flex items-center">
@@ -114,7 +114,7 @@ in
       <li><%s! menu_link ~_class:"block" ~active:(active_top_nav_item=Some Blog) ~href:Url.blog ~title:"Blog" () %></li>
       <li><%s! menu_link ~_class:"block" ~active:(active_top_nav_item=Some Playground) ~href:Url.playground ~title:"Playground" () %></li>
       <li>
-        <a href="<%s Url.api %>" class="flex py-3 px-1 gap-4 font-semibold text-legacy-primary-600">Standard Library API<%s! Icons.arrow_top_right_on_square "w-6 h-6" %></a>
+        <a href="<%s Url.api %>" class="flex py-3 px-1 gap-4 font-semibold text-primary">Standard Library API<%s! Icons.arrow_top_right_on_square "w-6 h-6" %></a>
       </li>
       <li class="mt-3 mb-6">
         <a href="<%s Url.getting_started %>" class="btn w-full">Get started</a>
diff --git a/src/ocamlorg_frontend/components/learn_components.eml b/src/ocamlorg_frontend/components/learn_components.eml
index ba1fa83119..d52fd3af36 100644
--- a/src/ocamlorg_frontend/components/learn_components.eml
+++ b/src/ocamlorg_frontend/components/learn_components.eml
@@ -85,13 +85,20 @@ let tutorial_block ~icon ~title ~heading ~description ~(tutorial_links: link lis
     <%s see_more.title %>
   </a>
 
-let pricing_tag = 
-  <div class="absolute -mt-3 ml-3 w-16 h-16">
-    <div class="bg-primary rotate-[-10deg] rounded-full w-16 h-16 flex items-center justify-center" style="filter: drop-shadow(-4px -2px 4px rgb(0 0 0 / 0.25));">
-      <div class="text-center text-white text-base font-bold leading-7 tracking-wide">
-        FREE
+let book_cover ~free cover_src = 
+  <div class="relative">
+    <% (if free then %>
+    <div class="absolute -mt-8 ml-3 w-16 h-16">
+      <div class="bg-primary rotate-[-10deg] rounded-full w-16 h-16 flex items-center justify-center" style="filter: drop-shadow(-4px -2px 4px rgb(0 0 0 / 0.25));">
+        <div class="text-center text-white text-base font-bold leading-7 tracking-wide">
+          FREE
+        </div>
       </div>
     </div>
+    <% ); %>
+    <img src="<%s Ocamlorg_static.Media.url cover_src %>"
+      class="w-full border z-10"
+      alt="">
   </div>
 
 let book_recommendation ~(link : link) (book: Data.Book.t) =
@@ -101,8 +108,8 @@ let book_recommendation ~(link : link) (book: Data.Book.t) =
   | Advanced -> advanced_section_icon
   in
   block_container ~icon:(icon_for_difficulty book.difficulty) ~title:"RECOMMENDED BOOK" ~heading:book.title @@
-    <div class="mt-6 grid grid-cols-2 gap-6">
-      <img src="<%s Ocamlorg_static.Media.url book.cover %>" alt="">
+    <div class="mt-6 grid grid-cols-2 gap-6 pt-6">
+      <%s! book_cover ~free:(book.pricing = "free") book.cover %>
       <div class="">
         <%s! skill_tag book.difficulty %>
         <% (match book.recommendation with None -> () | Some recommendation -> %>
diff --git a/src/ocamlorg_frontend/components/navmap.eml b/src/ocamlorg_frontend/components/navmap.eml
index 58c2c3bda4..a3b042fdaf 100644
--- a/src/ocamlorg_frontend/components/navmap.eml
+++ b/src/ocamlorg_frontend/components/navmap.eml
@@ -59,7 +59,7 @@ let rec nested_render ~path (item : toc) =
         <a href="<%s href %>" <%s! htmx_attributes %> class="flex">
         <span class="no-expand"><span class="<%s if item.title = fragment then "" else "opacity-80" %> <%s icon_style item.kind %>"></span></span>
         </a>
-        <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-legacy-primary-600">
+        <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-primary">
           <%s! item.title %>
         </a>
         <% ); %>
@@ -80,12 +80,12 @@ let rec nested_render ~path (item : toc) =
             <span class="<%s if item.title = fragment then "" else "opacity-80" %> <%s icon_style item.kind %>"></span>
           </span>
           <% (match item.href with | None -> %>
-            <span x-on:click="open = ! open" class="<%s title_style %> <%s if item.title = fragment then "white-200" else "gray-900" %>" :class="open ? 'text-legacy-primary-600' : ''">
+            <span x-on:click="open = ! open" class="<%s title_style %> <%s if item.title = fragment then "white-200" else "gray-900" %>" :class="open ? 'text-primary' : ''">
               <%s! item.title %> 
               <span class="arrow-expand absolute right-0.5 px-3" :class="open ? 'open' : ''"><%s! Icons.chevron_down "h-5 w-5" %></span>
             </span>
           <% | Some href -> %>
-          <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-legacy-primary-600" :class="open ? 'text-legacy-primary-600' : ''">
+          <a href="<%s href %>" <%s! htmx_attributes %> class="<%s title_style %> overflow-hidden truncate text-legacy-default transition-colors hover:text-primary" :class="open ? 'text-primary' : ''">
             <%s! item.title %>
           </a>
           <span x-on:click="open = ! open" class="sign-expand mr-2 px-2" :class="open ? 'open' : ''"></span>
@@ -112,7 +112,7 @@ let render
     <% (match maptoc with [] ->  %>
     <span class="block py-2 text-gray-700">Package contains no libraries</span>
     <% | _ -> %>
-      <a class="py-1 font-medium text-legacy-default hover:text-legacy-primary-600 transition-colors" href="<%s Url.Package.documentation package.name ?version %>">
+      <a class="py-1 font-medium text-legacy-default hover:text-primary transition-colors" href="<%s Url.Package.documentation package.name ?version %>">
         package <%s package.name %>
       </a>
     <ul>
diff --git a/src/ocamlorg_frontend/components/pagination.eml b/src/ocamlorg_frontend/components/pagination.eml
index 54c7c8954a..c053e98b0f 100644
--- a/src/ocamlorg_frontend/components/pagination.eml
+++ b/src/ocamlorg_frontend/components/pagination.eml
@@ -7,7 +7,7 @@ let paginated_href ~base_url ~page ~queries =
   queries)
 
 let link ~base_url ~page ~current ~queries =
-  let active_class = "border-2 border-current text-legacy-primary-600" in
+  let active_class = "border-2 border-current text-primary" in
   let non_active_class = "border border-body-100 text-legacy-lighter hover:bg-gray-50 hover:no-underline" in
   <a href="<%s (paginated_href ~base_url ~page ~queries) %>"
     class="w-10 h-10 lg:w-14 lg:h-14 rounded-lg flex items-center justify-center <%s if page = current then active_class else non_active_class %>">
diff --git a/src/ocamlorg_frontend/css/partials/buttons.css b/src/ocamlorg_frontend/css/partials/buttons.css
index 4deb554a3b..2493964fd3 100644
--- a/src/ocamlorg_frontend/css/partials/buttons.css
+++ b/src/ocamlorg_frontend/css/partials/buttons.css
@@ -1,45 +1,61 @@
 @layer components {
   .btn {
-    @apply rounded-lg bg-legacy-primary-600 px-5 h-12 font-semibold text-white whitespace-nowrap transition-colors inline-flex items-center justify-center space-x-3 text-base;
+    @apply rounded bg-primary border border-primary font-normal text-lg text-white whitespace-nowrap transition-colors inline-flex items-center justify-center space-x-3;
   }
 
-  .btn:active {
-    @apply bg-legacy-primary-800;
-  }
-
-  .btn:hover {
-    @apply bg-legacy-primary-700;
+  .btn {
+    @apply px-7 h-11;
   }
 
   .btn-lg {
-    @apply px-10 h-14 space-x-4;
+    @apply px-7 h-16 space-x-4;
   }
 
   .btn-sm {
-    @apply px-4 h-10 text-sm;
+    @apply px-5 h-8 text-sm;
+  }
+
+  .btn:active {
+    @apply bg-primary_dark;
+  }
+
+  .btn:hover {
+    @apply bg-primary_dark border-primary_dark;
   }
 
   .btn-secondary {
-    @apply bg-transparent border-legacy-primary-600 text-legacy-primary-600 border;
+    @apply bg-secondary border-secondary;
   }
 
   .btn-secondary:hover {
-    @apply bg-opacity-5 bg-legacy-primary-600;
+    @apply bg-secondary_bt_hover border-secondary_bt_hover;
   }
 
   .btn-secondary:active {
-    @apply bg-opacity-10 bg-legacy-primary-600;
+    @apply bg-secondary_bt_hover;
   }
 
   .btn-tertiary {
-    @apply bg-transparent border;
+    @apply bg-tertiary border-tertiary;
   }
 
   .btn-tertiary:hover {
-    @apply bg-legacy-default dark:bg-legacy-dark-default bg-opacity-10;
+    @apply bg-tertiary_bt_hover border-tertiary_bt_hover;
   }
 
   .btn-tertiary:active {
-    @apply bg-legacy-default dark:bg-legacy-dark-default bg-opacity-20;
+    @apply bg-tertiary_bt_hover;
+  }
+
+  .btn-ghost {
+    @apply bg-transparent border-primary text-primary border text-base font-semibold;
+  }
+
+  .btn-ghost:hover {
+    @apply text-white bg-primary border-primary;
+  }
+
+  .btn-ghost:active {
+    @apply  text-white bg-primary_dark;
   }
 }
\ No newline at end of file
diff --git a/src/ocamlorg_frontend/css/styles.css b/src/ocamlorg_frontend/css/styles.css
index 1dc2804a21..aef75c002b 100644
--- a/src/ocamlorg_frontend/css/styles.css
+++ b/src/ocamlorg_frontend/css/styles.css
@@ -171,7 +171,7 @@ tt {
 }
 
 .sidebar a.active {
-  @apply text-legacy-primary-600 bg-legacy-primary-100;
+  @apply text-primary bg-legacy-primary-100;
 }
 
 table a:hover {
@@ -179,15 +179,15 @@ table a:hover {
 }
 
 .right-sidebar a:hover {
-  @apply text-legacy-primary-600;
+  @apply text-primary;
 }
 
 .news-stories button:hover {
-  @apply border-legacy-primary-600 text-legacy-primary-600;
+  @apply border-primary text-primary;
 }
 
 .news-stories button:hover i {
-  @apply text-legacy-primary-600;
+  @apply text-primary;
 }
 
 .top-level-container .prose ul li::before {
@@ -195,7 +195,7 @@ table a:hover {
 }
 
 footer a:hover {
-  @apply text-legacy-primary-600;
+  @apply text-primary;
 }
 
 [x-cloak] {
@@ -203,7 +203,7 @@ footer a:hover {
 }
 
 .link-orange {
-  @apply text-legacy-primary-600 hover:underline;
+  @apply text-primary hover:underline;
 }
 
 .page-toc li a {
diff --git a/src/ocamlorg_frontend/layouts/learn_layout.eml b/src/ocamlorg_frontend/layouts/learn_layout.eml
index 14d0dad1bd..de22a68f80 100644
--- a/src/ocamlorg_frontend/layouts/learn_layout.eml
+++ b/src/ocamlorg_frontend/layouts/learn_layout.eml
@@ -81,7 +81,7 @@ let sidebar
 ~(section: section)
 =
   let sidebar_link ~title ~href ~current =
-    <a class="border-l-2 py-2 px-3 rounded-sm leading-6 <%s if current then {|font-bold text-legacy-primary-700 bg-legacy-primary-100 border-legacy-primary-600|} else {|text-legacy-default hover:bg-gray-100 border-transparent|} %>" href="<%s href %>">
+    <a class="border-l-2 py-2 px-3 rounded-sm leading-6 <%s if current then {|font-bold text-legacy-primary-700 bg-legacy-primary-100 border-primary|} else {|text-legacy-default hover:bg-gray-100 border-transparent|} %>" href="<%s href %>">
       <%s title %>
     </a>
   in
diff --git a/src/ocamlorg_frontend/layouts/package_layout.eml b/src/ocamlorg_frontend/layouts/package_layout.eml
index 452273f97b..5781afa237 100644
--- a/src/ocamlorg_frontend/layouts/package_layout.eml
+++ b/src/ocamlorg_frontend/layouts/package_layout.eml
@@ -76,7 +76,7 @@ Layout.base
         <div id="in-package-search" class="relative w-full">
           <div class="flex w-full items-center overflow-hidden">
             <% if Option.is_some search_index_digest then (%>
-              <input id="in-package-search-input" type="search" name="q" class="min-w-0 focus:border-gray-800 text-gray-800 border-legacy-primary-600 h-10 rounded-l-md appearance-none px-4 flex-grow"
+              <input id="in-package-search-input" type="search" name="q" class="min-w-0 focus:border-gray-800 text-gray-800 border-primary h-10 rounded-l-md appearance-none px-4 flex-grow"
                 tabindex="1"
                 autocomplete="off"
                 aria-owns="in-package-search-results"
@@ -87,7 +87,7 @@ Layout.base
                 onfocus="this.select(); this.setAttribute('aria-expanded', true)"
                 onblur="this.setAttribute('aria-expanded', false)"
                 >
-              <div aria-hidden="true" class="h-10 rounded-r-md bg-legacy-primary-600 text-white flex items-center justify-center px-4">
+              <div aria-hidden="true" class="h-10 rounded-r-md bg-primary text-white flex items-center justify-center px-4">
                 <%s! Icons.magnifying_glass "w-6 h-6" %>
               </div>
               <button class="ml-4 btn btn-sm" @click.prevent.stop="search_instructions = !search_instructions" title="show search instructions">
diff --git a/src/ocamlorg_frontend/pages/about.eml b/src/ocamlorg_frontend/pages/about.eml
index 57bb6220fe..8818a1e559 100644
--- a/src/ocamlorg_frontend/pages/about.eml
+++ b/src/ocamlorg_frontend/pages/about.eml
@@ -10,7 +10,7 @@ Layout.render
       <div class="flex items-center justify-center space-x-8 mt-11 lg:space-x-24">
         <div>
           <a
-            class="hover:text-legacy-primary-600 rounded-lg hover:bg-legacy-primary-100 h-28 w-28 inline-block transition-colors"
+            class="hover:text-primary rounded-lg hover:bg-legacy-primary-100 h-28 w-28 inline-block transition-colors"
             href="#strength"
           >
             <%s! Icons.lightning "h-10 w-10 mb-4 m-auto mt-6" %>
@@ -19,7 +19,7 @@ Layout.render
         </div>
         <div>
           <a
-            class="hover:text-legacy-primary-600 h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
+            class="hover:text-primary h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
             href="#history"
           >
             <%s! Icons.clock "h-10 w-10 mb-4 m-auto mt-6" %>
@@ -28,7 +28,7 @@ Layout.render
         </div>
         <div>
           <a
-            class="hover:text-legacy-primary-600 h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
+            class="hover:text-primary h-28 w-28 rounded-lg hover:bg-legacy-primary-100 inline-block transition-colors"
             href="#features"
           >
             <%s! Icons.features "h-10 w-10 mb-4 m-auto mt-6" %>
diff --git a/src/ocamlorg_frontend/pages/academic_users.eml b/src/ocamlorg_frontend/pages/academic_users.eml
index fad92dafa6..a0fc563d2f 100644
--- a/src/ocamlorg_frontend/pages/academic_users.eml
+++ b/src/ocamlorg_frontend/pages/academic_users.eml
@@ -35,7 +35,7 @@ Layout.render
     </div>
     <div :class="continent != 'All' ? 'hidden' : 'grid-logos'">
       <% users |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
@@ -43,7 +43,7 @@ Layout.render
     </div>
     <div :class="continent != 'North America' ? 'hidden' : 'grid-logos'">
       <% users |> List.filter (fun x -> x.Data.Academic_institution.continent = "North America") |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
@@ -51,7 +51,7 @@ Layout.render
     </div>
     <div :class="continent != 'Europe' ? 'hidden' : 'grid-logos'">
       <% users |> List.filter (fun x -> x.Data.Academic_institution.continent = "Europe") |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
@@ -59,7 +59,7 @@ Layout.render
     </div>
     <div :class="continent != 'Asia' ? 'hidden' : 'grid-logos'">
       <% users |> List.filter (fun x -> x.Data.Academic_institution.continent = "Asia") |> List.iter (fun (item : Data.Academic_institution.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
@@ -73,7 +73,7 @@ Layout.render
     <div class="container-fluid">
       <div class=" ">
         <div class="text-center">
-          <h2 class="font-bold text-legacy-primary-600 mb-6">Academic Resources</h2>
+          <h2 class="font-bold text-primary mb-6">Academic Resources</h2>
           <div class="text-lg text-white mb-16">Here are some of the resources that may be helpful to you</div>
         </div>
 
@@ -107,7 +107,7 @@ Layout.render
       </div>
     </div>
   </div>
-  <div class="bg-legacy-primary-600">
+  <div class="bg-primary">
     <div class="container-fluid">
       <div class="text-center text-white lg:p-16 py-10">
         <h3 class="font-bold mb-6">Interested in Learning More?</h3>
diff --git a/src/ocamlorg_frontend/pages/blog.eml b/src/ocamlorg_frontend/pages/blog.eml
index fd71c2ef98..1c15fa2a46 100644
--- a/src/ocamlorg_frontend/pages/blog.eml
+++ b/src/ocamlorg_frontend/pages/blog.eml
@@ -10,7 +10,7 @@ Layout.render
 
         <div class="grid grid-cols-1 md:grid-cols-3 gap-16">
             <div class="col-span-2">
-                <h2 class="text-lg mt-0 font-semibold border-b border-current text-legacy-primary-600 pb-3">The OCaml Planet</h2>
+                <h2 class="text-lg mt-0 font-semibold border-b border-current text-primary pb-3">The OCaml Planet</h2>
 
                 <div class="mt-12 space-y-12">
                     <% featured |> List.iter (fun (item : Data.Planet.Post.t) -> %>
@@ -19,7 +19,7 @@ Layout.render
                       <div class="flex flex-col-reverse lg:flex-row lg:gap-12">
                           <div class="space-y-3 mt-6 lg:mt-0 flex flex-col flex-1">
                               <a href="<%s Option.value ~default:(Url.blog_post item.source.id item.slug) item.url %>"
-                                  class="block text-xl font-semibold hover:text-legacy-primary-600"><%s item.title %></a>
+                                  class="block text-xl font-semibold hover:text-primary"><%s item.title %></a>
                               <a href="<%s Option.value ~default:(Url.blog_post item.source.id item.slug) item.url %>" class="text-legacy-lighter">
                                   <%s Option.value ~default:"" item.description %>
                               </a>
@@ -44,7 +44,7 @@ Layout.render
                     <div class="flex flex-col-reverse lg:flex-row lg:gap-12">
                         <div class="space-y-3 mt-6 lg:mt-0 flex flex-col flex-1">
                             <a href="<%s Option.value ~default:(Url.blog_post item.source.id item.slug) item.url %>"
-                                class="block text-xl font-semibold hover:text-legacy-primary-600"><%s item.title %></a>
+                                class="block text-xl font-semibold hover:text-primary"><%s item.title %></a>
                             <a href="<%s Option.value ~default:(Url.blog_post item.source.id item.slug) item.url %>" class="text-legacy-lighter">
                                 <%s Option.value ~default:"" item.description %>
                             </a>
@@ -68,12 +68,12 @@ Layout.render
                 </div>
             </div>
             <div class="lg:pl-16 space-y-12">
-                <h2 class="text-lg mt-0 font-semibold border-b border-current text-legacy-primary-600 pb-3">News</h2>
+                <h2 class="text-lg mt-0 font-semibold border-b border-current text-primary pb-3">News</h2>
 
                 <% news |> List.iter (fun (item : Data.News.t) -> %>
                 <div class="flex lg:gap-12">
                     <div class="space-y-3 flex flex-col flex-1">
-                        <a href="<%s Url.news_post item.slug %>" class="block font-semibold hover:text-legacy-primary-600">
+                        <a href="<%s Url.news_post item.slug %>" class="block font-semibold hover:text-primary">
                             <%s item.title %>
                         </a>
                         <a href="<%s Url.news_post item.slug %>" class="text-legacy-lighter text-sm">
diff --git a/src/ocamlorg_frontend/pages/blog_post.eml b/src/ocamlorg_frontend/pages/blog_post.eml
index afbb224568..c7fb23ee03 100644
--- a/src/ocamlorg_frontend/pages/blog_post.eml
+++ b/src/ocamlorg_frontend/pages/blog_post.eml
@@ -9,12 +9,12 @@ Layout.render
     <div class="mx-auto max-w-5xl">
       <div class="flex flex-wrap gap-4">
         <a href="<%s Url.blog %>"
-          class="text-legacy-primary-600 hover:underline font-semibold mb-4">
+          class="text-primary hover:underline font-semibold mb-4">
           <div>OCaml Planet</div>
         </a>
         /
         <a href="<%s Url.local_blog blog_post.source.id %>"
-          class="text-legacy-primary-600 hover:underline font-semibold mb-4">
+          class="text-primary hover:underline font-semibold mb-4">
           <div><%s blog_post.source.name %></div>
         </a>
       </div>
diff --git a/src/ocamlorg_frontend/pages/books.eml b/src/ocamlorg_frontend/pages/books.eml
index ef9d274966..772e2fc123 100644
--- a/src/ocamlorg_frontend/pages/books.eml
+++ b/src/ocamlorg_frontend/pages/books.eml
@@ -2,29 +2,25 @@ let render_books books =
     <div class="overflow-x-scroll lg:overflow-hidden mt-5">
         <% books |> List.iter (fun (item : Data.Book.t) -> %>
         <div
-            class="flex space-y-10 pt-6 lg:space-y-0 lg:space-x-16 pb-10 mt-4 flex-col lg:flex-row">
+            class="flex gap-10 pt-6 lg:gap-y-0 lg:gap-x-10 pb-10 mt-4 flex-col lg:flex-row">
             <div class="flex flex-col gap-y-4">
-                <div class="relative w-64 sm:w-72 lg:w-64 max-w-full space-y-5">
-                     <%s! if item.pricing = "free" then Learn_components.pricing_tag else "" %>
-                     <img src="<%s Ocamlorg_static.Media.url item.cover %>"
-                        class="w-full border z-10"
-                        alt="">
-                    <div class="px-3 <%s Learn_components.color_for_difficulty item.difficulty %> rounded-3xl font-semibold text-center text-white tracking-widest">
+                <div class="relative w-64 sm:w-72 lg:w-64 max-w-full">
+                     <%s! Learn_components.book_cover ~free:(item.pricing = "free") item.cover %>
+                    <div class="mt-5 px-3 py-1 <%s Learn_components.color_for_difficulty item.difficulty %> rounded-3xl font-semibold text-center text-white tracking-widest leading-5">
                         <%s Learn_components.string_from_difficulty item.difficulty %>
                     </div>
                 </div>
                 
             </div>
-            <div class="flex-col flex-1">
-                <h4 class="font-bold text-2xl mb-6"><%s item.title %></h4>
-                <div class="font-normal text-base mb-6 uppercase"><%s item.authors |> String.concat ", " %></div>
-                <div class="prose prose-md prose-orange mb-6 md:prose-lg"><%s! item.body_html %></div>
+            <div class="flex-col flex-1 prose prose-lg">
+                <h2 class="font-normal text-2xl mb-6"><%s item.title %></h2>
+                <div class="font-normal text-text_content text-lg mb-6"><%s item.authors |> String.concat ", " %></div>
+                <div class="prose prose-lg prose-orange mb-6"><%s! item.body_html %></div>
                 <div class="flex gap-x-5 gap-y-4 flex-col sm:flex-row">
                     <% item.links |> List.iter (fun (link : Data.Book.link) -> %>
                         <div>
-                            <a class="btn bg-learn-area-orange" href="<%s link.uri %>">
+                            <a class="btn" href="<%s link.uri %>">
                                 <span><%s link.description %></span>
-                                <%s! Icons.chevron_right "h-4 w-4" %>
                             </a>
                         </div>
                     <% ); %>
@@ -44,12 +40,12 @@ Learn_layout.single_column_layout
 ~title:"OCaml Books"
 ~description:"A selection of books to learn the OCaml programming language."
 ~canonical:Url.books
-~active_top_nav_item:Header.Learn 
+~active_top_nav_item:Header.Learn
 ~current:Books @@
 <div class="bg-legacy-default dark:bg-legacy-dark-default">
     <div class="container-fluid pt-10">
-        <div class="prose mb-6">
-            <h1>Books On OCaml (<%s string_of_int (List.length books) %>)</h2>
+        <div class="prose mb-10">
+            <h1 class="font-normal text-4xl">Books On OCaml (<%s string_of_int (List.length books) %>)</h2>
         </div>
         <form action="<%s Url.books %>" method="GET">
             <div class="flex mb-0 flex-col gap-4 sm:flex-row">
diff --git a/src/ocamlorg_frontend/pages/changelog_entry.eml b/src/ocamlorg_frontend/pages/changelog_entry.eml
index 32d001d4e0..2296bb5a19 100644
--- a/src/ocamlorg_frontend/pages/changelog_entry.eml
+++ b/src/ocamlorg_frontend/pages/changelog_entry.eml
@@ -7,7 +7,7 @@ Layout.render
     <div class="mx-auto max-w-5xl">
       <div class="mx-auto max-w-5xl">
         <a href="<%s Url.changelog %>"
-          class="flex justify-start space-x-3 items-center text-legacy-primary-600 hover:underline font-semibold mb-4 h-12">
+          class="flex justify-start space-x-3 items-center text-primary hover:underline font-semibold mb-4 h-12">
           <%s! Icons.arrow_left "h-5 w-5" %>
           <div>View all changes</div>
         </a>
diff --git a/src/ocamlorg_frontend/pages/community.eml b/src/ocamlorg_frontend/pages/community.eml
index 1d0dd73dd6..a1c00ee867 100644
--- a/src/ocamlorg_frontend/pages/community.eml
+++ b/src/ocamlorg_frontend/pages/community.eml
@@ -22,7 +22,7 @@ Layout.render
     <div class="text-center w-full lg:w-2/3 m-auto">
       <h1 class="font-bold mb-6">The OCaml Community</h1>
       <p>Looking to interact with people who are also interested in OCaml? Find out about upcoming events, read up on blogs from the community, sign up for OCaml mailing lists, and discover even more places to engage with people from the community!</p>
-      <a href="https://discuss.ocaml.org/" class="btn btn-lg btn-secondary mt-8">Go to Discuss Forums</a>
+      <a href="https://discuss.ocaml.org/" class="btn btn-lg btn-ghost mt-8">Go to Discuss Forums</a>
     </div>
   </div>
 </div>
@@ -91,7 +91,7 @@ Layout.render
   <div class="container-fluid">
       <div class=" ">
           <div class="text-center">
-              <h2 class="font-bold text-legacy-primary-600 mb-6" id="workshops" >Workshops</h2>
+              <h2 class="font-bold text-primary mb-6" id="workshops" >Workshops</h2>
               <div class="text-lg text-white mb-16">Here are some of the workshops we have had up until now</div>
           </div>
           <% (match upcoming_workshops with
@@ -198,7 +198,7 @@ Layout.render
       </div>
     </div>
 <% ); %>
-<div class="bg-legacy-primary-600">
+<div class="bg-primary">
   <div class="container-fluid">
     <div class="text-center text-white lg:p-16 py-10">
       <h3 class="font-bold mb-6">OCaml Jobs</h3>
@@ -219,7 +219,7 @@ Layout.render
       <h3 class="font-bold mb-6">OCaml Outreachy Internships</h3>
       <div class="text-lg mb-8 lg:px-28">This is a record of all past OCaml Community Outreachy Internship Projects.</div>
       <div class="space-x-0 md:space-x-5 space-y-5 md:space-y-0">
-        <a class="btn btn-lg btn-secondary" href="<%s Url.outreachy %>">
+        <a class="btn btn-lg btn-ghost" href="<%s Url.outreachy %>">
           <span>View Outreachy Projects</span>
           <%s! Icons.chevron_right "h-5 w-5" %>
         </a>
diff --git a/src/ocamlorg_frontend/pages/events.eml b/src/ocamlorg_frontend/pages/events.eml
index c6d4128c08..d74085c94f 100644
--- a/src/ocamlorg_frontend/pages/events.eml
+++ b/src/ocamlorg_frontend/pages/events.eml
@@ -29,7 +29,7 @@ world. See past events and upcoming ones on this page."
     <div class="container-fluid">
         <div class=" ">
             <div class="text-center">
-                <h2 class="font-bold text-legacy-primary-600 mb-6">Workshops</h2>
+                <h2 class="font-bold text-primary mb-6">Workshops</h2>
                 <div class="text-lg text-white mb-16">Here are some of the workshops we have had up until now</div>
             </div>
             <% (match upcoming_workshops with
diff --git a/src/ocamlorg_frontend/pages/exercises.eml b/src/ocamlorg_frontend/pages/exercises.eml
index 06c1ea4137..bb584f1640 100644
--- a/src/ocamlorg_frontend/pages/exercises.eml
+++ b/src/ocamlorg_frontend/pages/exercises.eml
@@ -4,11 +4,11 @@ let exercises_sidebar_link
 ~current =
   match current with
   | true ->
-    <a class="block text-legacy-primary-600 bg-legacy-primary-100 border-l-2 border-legacy-primary-600 py-3 px-5 font-semibold text-sm rounded-sm" href="<%s href %>">
+    <a class="block text-primary bg-legacy-primary-100 border-l-2 border-primary py-3 px-5 font-semibold text-sm rounded-sm" href="<%s href %>">
       <%s title %>
     </a>
   | false ->
-    <a class="block hover:text-legacy-primary-600 hover:bg-legacy-primary-100 border-l-2 border-transparent hover:border-legacy-primary-600 py-3 px-5 font-medium text-sm rounded-sm" href="<%s href %>">
+    <a class="block hover:text-primary hover:bg-legacy-primary-100 border-l-2 border-transparent hover:border-primary py-3 px-5 font-medium text-sm rounded-sm" href="<%s href %>">
       <%s title %>
     </a>
 
@@ -18,7 +18,7 @@ title
 link_html
 =
    <details class="flex flex-col">
-      <summary class="flex gap-4 justify-between text-sm font-semibold py-4 uppercase focus:text-legacy-primary-600 active:text-legacy-primary-600 hover:text-legacy-primary-300">
+      <summary class="flex gap-4 justify-between text-sm font-semibold py-4 uppercase focus:text-primary active:text-primary hover:text-legacy-primary-300">
         <%s title %>
         <%s! Icons.chevron_down "h-6 w-6" %>
       </summary>
@@ -125,7 +125,7 @@ Learn_layout.three_column_layout
           <button
             class="px-3.5 h-9 font-medium flex space-x-2 items-center rounded-lg"
             x-on:click="statement = true"
-            :class="statement ? 'bg-legacy-default dark:bg-legacy-dark-default text-legacy-primary-600': 'text-legacy-lighter' "
+            :class="statement ? 'bg-legacy-default dark:bg-legacy-dark-default text-primary': 'text-legacy-lighter' "
           >
             <%s! Icons.exercise_statement "h-5 w-5" %>
             <span :class="statement ? 'text-legacy-default' : 'text-legacy-lighter'">Statement</span>
@@ -133,7 +133,7 @@ Learn_layout.three_column_layout
           <button
             class="px-3.5 h-9 font-medium flex space-x-2 items-center rounded-lg"
             x-on:click="statement = false"
-            :class="statement ? 'text-legacy-lighter': 'bg-legacy-default dark:bg-legacy-dark-default text-legacy-primary-600' "
+            :class="statement ? 'text-legacy-lighter': 'bg-legacy-default dark:bg-legacy-dark-default text-primary' "
           >
             <%s! Icons.exercise_solution "h-5 w-5" %>
             <span :class="statement ? 'text-legacy-lighter' : 'text-legacy-default'">Solution</span>
diff --git a/src/ocamlorg_frontend/pages/governance.eml b/src/ocamlorg_frontend/pages/governance.eml
index 84427f85bc..f4448f855d 100644
--- a/src/ocamlorg_frontend/pages/governance.eml
+++ b/src/ocamlorg_frontend/pages/governance.eml
@@ -86,7 +86,7 @@ and what makes it unique." @@
         The <a href="<%s Url.governance_policy %>">OCaml Governance Policy</a> does not apply to them. Participation is welcome and encouraged.</div>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-20 mt-16">
         <% working_groups |> List.iter (fun (wg : Data.Governance.team) -> %>
-        <%s! render_team_card wg "organiser(s)" "btn-secondary" %>
+        <%s! render_team_card wg "organiser(s)" "btn-ghost" %>
         <% ); %>
       </div>
     </div>
diff --git a/src/ocamlorg_frontend/pages/governance_team.eml b/src/ocamlorg_frontend/pages/governance_team.eml
index adde889bf4..8439ac5899 100644
--- a/src/ocamlorg_frontend/pages/governance_team.eml
+++ b/src/ocamlorg_frontend/pages/governance_team.eml
@@ -73,7 +73,7 @@ Layout.render
       <div class="">
         <div class="sm:text-center lg:col-span-8 lg:text-left">
           <div
-            class="flex justify-start gap-x-3 items-center text-legacy-primary-600 hover:underline font-semibold mb-4 h-12">
+            class="flex justify-start gap-x-3 items-center text-primary hover:underline font-semibold mb-4 h-12">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
               stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18">
@@ -87,7 +87,7 @@ Layout.render
           </div>
           <div class="flex flex-wrap gap-x-4">
             <% t.contacts |> List.iter (fun (contact : Data.Governance.contact) -> %>
-            <a class="btn btn-secondary btn-lg mt-6 gap-2" href="<%s contact.link %>" target="_blank">
+            <a class="btn btn-ghost btn-lg mt-6 gap-2" href="<%s contact.link %>" target="_blank">
               <%s! contact_icon contact.kind "w-6 h-6" %>
               <%s contact.name %>
             </a>
diff --git a/src/ocamlorg_frontend/pages/home.eml b/src/ocamlorg_frontend/pages/home.eml
index c8c7030fc9..1392319d41 100644
--- a/src/ocamlorg_frontend/pages/home.eml
+++ b/src/ocamlorg_frontend/pages/home.eml
@@ -34,15 +34,15 @@ Layout.render
         </p>
         <div class="space-x-0 lg:space-x-6">
           <a class="btn btn-lg mb-4 lg:mb-0" href="<%s Url.install %>">Install</a>
-          <a class="btn btn-lg btn-secondary" href="<%s Url.about %>">
+          <a class="btn btn-lg btn-ghost" href="<%s Url.about %>">
             About OCaml
           </a>
         </div>
         <div class="mt-6">
-          <a class="text-2xl text-legacy-primary-600 font-semibold" href="<%s Url.release latest_release.version %>">Latest release: <%s latest_release.version %></a>
+          <a class="text-2xl text-primary font-semibold" href="<%s Url.release latest_release.version %>">Latest release: <%s latest_release.version %></a>
         </div>
         <div class="mt-2">
-          <a class="text-2xl text-legacy-primary-600 font-semibold" href="<%s Url.release lts_release.version %>">Long Term Support release: <%s lts_release.version %></a>
+          <a class="text-2xl text-primary font-semibold" href="<%s Url.release lts_release.version %>">Long Term Support release: <%s lts_release.version %></a>
         </div>
       </div>
       <div class="lg:flex-1 flex justify-center">
@@ -268,14 +268,14 @@ Layout.render
     <h3 class="font-bold">Releases</h3>
     <div class="bg-pattern p-6 mt-8 rounded-xl w-full lg:w-2/3 text-white">
       <a href="<%s Url.release latest_release.version %>">
-        <div class="text-legacy-primary-600 text-sm mb-4 uppercase">Recent Release</div>
+        <div class="text-primary text-sm mb-4 uppercase">Recent Release</div>
         <h3 class="font-bold mb-6">
           <%s latest_release.version %> <span class="text-sm font-medium">(<%s latest_release.date %>)</span>
         </h3>
       </a>
       <div class="prose prose-sm text-white"><%s! latest_release.highlights_html %></div>
     </div>
-    <a href="<%s Url.releases %>" class="btn btn-lg btn-secondary mt-8">
+    <a href="<%s Url.releases %>" class="btn btn-lg btn-ghost mt-8">
       <span>See all Releases</span>
       <%s! Icons.chevron_right "h-5 w-5" %>
     </a>
@@ -392,7 +392,7 @@ Layout.render
   <div class="container-fluid">
     <div class="">
       <div class="text-center">
-        <h2 class="font-bold text-legacy-primary-600 mb-6">Curated Resources</h2>
+        <h2 class="font-bold text-primary mb-6">Curated Resources</h2>
         <div class="text-lg text-white mb-16">
           Get up to speed quickly to enjoy the benefits of the OCaml programming language across your projects.
         </div>
diff --git a/src/ocamlorg_frontend/pages/industrial_users.eml b/src/ocamlorg_frontend/pages/industrial_users.eml
index d472092ac1..f89d63ee19 100644
--- a/src/ocamlorg_frontend/pages/industrial_users.eml
+++ b/src/ocamlorg_frontend/pages/industrial_users.eml
@@ -11,11 +11,11 @@ the community and learn more about how they use OCaml."
   <div class="container-fluid space-y-24 lg:space-y-32">
       <div class="flex flex-col lg:flex-row  justify-between space-x-0 lg:space-x-10">
           <div class="lg:flex-1 lg:mt-16 my-12">
-              <h1 class="font-bold">What Our Users Say About <span class="text-legacy-primary-600">OCaml</span></h1>
+              <h1 class="font-bold">What Our Users Say About <span class="text-primary">OCaml</span></h1>
               <div class="text-legacy-lighter mt-6 mb-8">Read our success stories to learn how OCaml helped our users
                   achieve their goals.</div>
               <div class="space-x-6">
-                  <a href="<%s Url.academic_users %>" class="btn btn-lg btn-secondary">In Academia</a>
+                  <a href="<%s Url.academic_users %>" class="btn btn-lg btn-ghost">In Academia</a>
               </div>
           </div>
           <div class="lg:flex-1 cursor-pointer relative rounded-2xl overflow-hidden border-4 border-legacy-primary-100 video-shadow"
@@ -37,7 +37,7 @@ the community and learn more about how they use OCaml."
                       </div>
                   </div>
               </div>
-              <div class="rounded-full bg-legacy-primary-600 text-white w-16 h-16 right-10 bottom-10 absolute flex items-center z-10 justify-center"
+              <div class="rounded-full bg-primary text-white w-16 h-16 right-10 bottom-10 absolute flex items-center z-10 justify-center"
                   x-show="!isPlaying"
                   @click="
                       isPlaying = !isPlaying;
@@ -132,10 +132,10 @@ the community and learn more about how they use OCaml."
         <div class="text-legacy-lighter">Read What Some Industry Users Say About OCaml.</div>
       </div>
       <div class="flex justify-between items-center space-x-4 m-auto mt-10 mb-5 md:mb-0">
-        <button aria-label="Previous" class="text-legacy-primary-600 rounded-full py-4 px-4 hover:bg-legacy-primary-100 transition duration-300" @click="swiper.slidePrev()">
+        <button aria-label="Previous" class="text-primary rounded-full py-4 px-4 hover:bg-legacy-primary-100 transition duration-300" @click="swiper.slidePrev()">
             <%s! Icons.chevron_left "h-5 w-5" %>
         </button>
-        <button aria-label="Next" class="text-legacy-primary-600 rounded-full py-4 px-4 hover:bg-legacy-primary-100 transition duration-300" @click="swiper.slideNext()">
+        <button aria-label="Next" class="text-primary rounded-full py-4 px-4 hover:bg-legacy-primary-100 transition duration-300" @click="swiper.slideNext()">
             <%s! Icons.chevron_right "h-5 w-5" %>
         </button>
       </div>
@@ -198,7 +198,7 @@ the community and learn more about how they use OCaml."
     </div>
     <div class="grid-logos bg-legacy-default dark:bg-legacy-dark-default mt-20">
       <% users |> List.iter (fun (item : Data.Industrial_user.t) -> let logo = match item.logo with | Some x -> Ocamlorg_static.Media.url x | None -> "" in %>
-      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-legacy-primary-600 flex items-center flex-col">
+      <a href="<%s item.url %>" target="_blank" class="p-12 hover:text-primary flex items-center flex-col">
         <img src="<%s logo %>" class="m-auto" alt="<%s item.name %> logo">
         <div class="font-bold mt-8"><%s item.name %></div>
       </a>
@@ -213,7 +213,7 @@ the community and learn more about how they use OCaml."
   <div class="container-fluid">
     <div>
       <div class="text-center">
-        <h2 class="font-bold text-legacy-primary-600 mb-6">Industrial Resources</h2>
+        <h2 class="font-bold text-primary mb-6">Industrial Resources</h2>
         <div class="text-lg text-white mb-16">Here are some of the resources that may be helpful to you</div>
       </div>
       <div class="grid lg:grid-cols-3 gap-8 lg:gap-16">
diff --git a/src/ocamlorg_frontend/pages/install.eml b/src/ocamlorg_frontend/pages/install.eml
index fdfd853398..dab045768a 100644
--- a/src/ocamlorg_frontend/pages/install.eml
+++ b/src/ocamlorg_frontend/pages/install.eml
@@ -11,8 +11,8 @@ Layout.render
         Install OCaml
       </h1>
       <div class="flex gap-2">
-        <button class="btn flex gap-2" :class='operating_system == "linux_mac_bsd"? "": "btn-secondary"' @click="operating_system = 'linux_mac_bsd'"> Linux, macOS or *BSD</button>
-        <button class="btn flex gap-2" :class='operating_system == "win"? "": "btn-secondary"' @click="operating_system = 'win'"><%s! Icons.microsoft_windows "w-6 h-6" %> Windows</button>
+        <button class="btn flex gap-2" :class='operating_system == "linux_mac_bsd"? "": "btn-ghost"' @click="operating_system = 'linux_mac_bsd'"> Linux, macOS or *BSD</button>
+        <button class="btn flex gap-2" :class='operating_system == "win"? "": "btn-ghost"' @click="operating_system = 'win'"><%s! Icons.microsoft_windows "w-6 h-6" %> Windows</button>
       </div>
     </div>
 
diff --git a/src/ocamlorg_frontend/pages/learn.eml b/src/ocamlorg_frontend/pages/learn.eml
index faf11ea3dd..33780fb3f3 100644
--- a/src/ocamlorg_frontend/pages/learn.eml
+++ b/src/ocamlorg_frontend/pages/learn.eml
@@ -210,7 +210,7 @@ Learn_layout.single_column_layout
         </a>
         <% ); %>
       </div>
-      <a href="<%s Url.papers %>" class="btn btn-lg btn-secondary mt-8">
+      <a href="<%s Url.papers %>" class="btn btn-lg btn-ghost mt-8">
         <span>View all papers</span>
         <%s! Icons.chevron_right "h-5 w-5" %>
       </a>
diff --git a/src/ocamlorg_frontend/pages/local_blog.eml b/src/ocamlorg_frontend/pages/local_blog.eml
index a8a15c6479..57eca50ea7 100644
--- a/src/ocamlorg_frontend/pages/local_blog.eml
+++ b/src/ocamlorg_frontend/pages/local_blog.eml
@@ -23,7 +23,7 @@ Layout.render
                 <div class="flex flex-col-reverse lg:flex-row lg:gap-12">
                     <div class="space-y-3 mt-6 lg:mt-0 flex flex-col flex-1">
                         <a href="<%s Option.value ~default:(Url.blog_post item.source.id item.slug) item.url %>"
-                            class="block text-xl font-semibold hover:text-legacy-primary-600"><%s item.title %></a>
+                            class="block text-xl font-semibold hover:text-primary"><%s item.title %></a>
                         <a href="<%s Option.value ~default:(Url.blog_post item.source.id item.slug) item.url %>" class="text-legacy-lighter">
                             <%s Option.value ~default:"" item.description %>
                         </a>
diff --git a/src/ocamlorg_frontend/pages/news.eml b/src/ocamlorg_frontend/pages/news.eml
index 4bfed75c5b..ac8ff0f955 100644
--- a/src/ocamlorg_frontend/pages/news.eml
+++ b/src/ocamlorg_frontend/pages/news.eml
@@ -8,7 +8,7 @@ Layout.render
   <div class="container-fluid">
     <div>
       <a href="<%s Url.blog %>"
-        class="flex justify-start space-x-3 items-center text-legacy-primary-600 hover:underline font-semibold mb-4 h-12">
+        class="flex justify-start space-x-3 items-center text-primary hover:underline font-semibold mb-4 h-12">
         <%s! Icons.arrow_left "h-5 w-5" %>
         <div>Back to Blog</div>
       </a>
@@ -23,7 +23,7 @@ Layout.render
           <div class="space-y-3 mt-6 lg:mt-0 flex flex-col flex-1">
               <div class="space-y-2">
                   <a href="<%s Url.news_post item.slug %>"
-                      class="block text-xl font-semibold hover:text-legacy-primary-600"><%s item.title %></a>
+                      class="block text-xl font-semibold hover:text-primary"><%s item.title %></a>
               </div>
               <a href="<%s Url.news_post item.slug %>" class="text-legacy-lighter">
                   <%s item.description %>
@@ -43,7 +43,7 @@ Layout.render
           <% (for i = 1 to (pages_number - 1) do
                 if i = page then ( %>
           <a href="<%s Url.news %>?p=<%i i %>"
-              class="w-10 h-10 lg:w-14 lg:h-14  border-2 border-current rounded-lg flex items-center justify-center text-legacy-primary-600">
+              class="w-10 h-10 lg:w-14 lg:h-14  border-2 border-current rounded-lg flex items-center justify-center text-primary">
               <%i i %>
           </a>
           <% ) else ( %>
diff --git a/src/ocamlorg_frontend/pages/news_post.eml b/src/ocamlorg_frontend/pages/news_post.eml
index 97b59df6a3..fbc04f326f 100644
--- a/src/ocamlorg_frontend/pages/news_post.eml
+++ b/src/ocamlorg_frontend/pages/news_post.eml
@@ -8,7 +8,7 @@ Layout.render
   <div class="container-fluid">
     <div class="mx-auto max-w-5xl">
       <a href="<%s Url.blog %>"
-        class="flex justify-start space-x-3 items-center text-legacy-primary-600 hover:underline font-semibold mb-4 h-12">
+        class="flex justify-start space-x-3 items-center text-primary hover:underline font-semibold mb-4 h-12">
         <%s! Icons.arrow_left "h-5 w-5" %>
         <div>Back to Blog</div>
       </a>
diff --git a/src/ocamlorg_frontend/pages/not_found.eml b/src/ocamlorg_frontend/pages/not_found.eml
index 205f7e83e5..f370bc8d0b 100644
--- a/src/ocamlorg_frontend/pages/not_found.eml
+++ b/src/ocamlorg_frontend/pages/not_found.eml
@@ -4,7 +4,7 @@ Layout.render
 ~description:"This page does not exist." @@
 <div class="bg-legacy-default dark:bg-legacy-dark-default px-4 py-16 sm:px-6 sm:py-24 md:grid md:place-items-center lg:px-8">
   <div class="sm:flex max-w-max mx-auto">
-    <p class="text-4xl font-extrabold text-legacy-primary-600 sm:text-5xl">404</p>
+    <p class="text-4xl font-extrabold text-primary sm:text-5xl">404</p>
     <div class="sm:ml-6">
       <div class="sm:border-l sm:border-gray-200 sm:pl-6">
         <h1 class="text-4xl font-extrabold text-legacy-default tracking-tight sm:text-5xl">Page not found</h1>
diff --git a/src/ocamlorg_frontend/pages/package_documentation_not_found.eml b/src/ocamlorg_frontend/pages/package_documentation_not_found.eml
index c68aeb5aa9..899b54e50e 100644
--- a/src/ocamlorg_frontend/pages/package_documentation_not_found.eml
+++ b/src/ocamlorg_frontend/pages/package_documentation_not_found.eml
@@ -15,7 +15,7 @@ Package_layout.render
 ~right_sidebar_html:"" @@
   let version = Package.url_version package in
   <div class="sm:flex max-w-max mx-auto">
-    <p class="text-4xl font-extrabold text-legacy-primary-600 sm:text-5xl">404</p>
+    <p class="text-4xl font-extrabold text-primary sm:text-5xl">404</p>
     <div class="sm:ml-6">
       <div class="sm:border-l sm:border-gray-200 sm:pl-6">
         <h1 class="text-4xl font-extrabold text-legacy-default tracking-tight sm:text-5xl">Page not found</h1>
diff --git a/src/ocamlorg_frontend/pages/package_overview.eml b/src/ocamlorg_frontend/pages/package_overview.eml
index c90e89a5c8..f75b6c1618 100644
--- a/src/ocamlorg_frontend/pages/package_overview.eml
+++ b/src/ocamlorg_frontend/pages/package_overview.eml
@@ -1,5 +1,5 @@
 let side_box_link ~href ~title ~icon_html =
-    <a href="<%s href %>" class="flex items-center py-2 px-4 hover:text-legacy-primary-600">
+    <a href="<%s href %>" class="flex items-center py-2 px-4 hover:text-primary">
         <%s! icon_html %>
         <%s title %>
     </a>
@@ -50,7 +50,7 @@ in
   </div>
 
   <h2 class="inline-flex items-center text-lg font-medium text-legacy-default">
-      <%s! Icons.command_line "mr-4 h-6 w-6 text-legacy-primary-600" %>
+      <%s! Icons.command_line "mr-4 h-6 w-6 text-primary" %>
       Install
   </h2>
 
@@ -83,13 +83,13 @@ in
   | Some (uri, checksums) -> %>
   <h2 class="font-semibold mt-8 mb-3 text-base text-legacy-lighter">Sources</h2>
   <div class="flex flex-col space-y-2 text-sm">
-    <a class="flex font-mono items-center gap-4 text-legacy-default hover:text-legacy-primary-600 overflow-hidden rounded"
+    <a class="flex font-mono items-center gap-4 text-legacy-default hover:text-primary overflow-hidden rounded"
         href="<%s uri %>">
       <span class="flex-grow">
         <%s Filename.basename uri %>
       </span>
 
-      <div class="p-1 bg-legacy-primary-600 text-white rounded">
+      <div class="p-1 bg-primary text-white rounded">
           <%s! Icons.download "h-6 w-6" %>
       </div>
     </a>
@@ -101,10 +101,10 @@ in
 
       <button
         @click="$clipboard('<%s checksum %>'); copied = true; setTimeout(() => copied = false, 2000)"
-        x-show="!copied" title="copy checksum to clipboard" class="p-1 text-legacy-primary-600 rounded">
+        x-show="!copied" title="copy checksum to clipboard" class="p-1 text-primary rounded">
           <%s! Icons.copy "h-6 w-6" %>
       </button>
-      <button x-show="copied" title="checksum copied to clipboard" class="p-1 text-legacy-primary-600 rounded">
+      <button x-show="copied" title="checksum copied to clipboard" class="p-1 text-primary rounded">
           <%s! Icons.copied_to_clipboard "h-6 w-6" %>
       </button>
     </div>
@@ -141,7 +141,7 @@ let render
 (package : Package.package) =
 let render_dependency ~name ~cstr ~version =
   <li class="flex m-0 space-x-3 py-2 pr-4 hover:bg-gray-100 border-b border-gray-200">
-    <a href="<%s Url.Package.overview name ?version %>" class="text-legacy-primary-600 hover:underline">
+    <a href="<%s Url.Package.overview name ?version %>" class="text-primary hover:underline">
       <%s name %>
     </a>
     <% match cstr with None -> () | Some cstr -> %>
@@ -202,7 +202,7 @@ Package_layout.render
           <h2 class="text-base font-semibold text-legacy-lighter">Tags</h2>
           <% package.tags |> List.iter (fun tag -> %>
           <a href="<%s Url.packages_search %>?q=tag%3A%22<%s Dream.to_percent_encoded tag %>%22"
-            class="hover:underline px-2 text-legacy-primary-700 border border-legacy-primary-600 font-medium bg-legacy-primary-100 rounded">
+            class="hover:underline px-2 text-legacy-primary-700 border border-primary font-medium bg-legacy-primary-100 rounded">
             <%s tag %>
           </a>
           <% ); %>
diff --git a/src/ocamlorg_frontend/pages/packages.eml b/src/ocamlorg_frontend/pages/packages.eml
index cf5ef14134..c8cab0a213 100644
--- a/src/ocamlorg_frontend/pages/packages.eml
+++ b/src/ocamlorg_frontend/pages/packages.eml
@@ -9,7 +9,7 @@ Layout.render
 
 let search_dropdown () =
   <div id="packages-search-results" aria-live="polite" ></div>
-  <a class="flex py-2 px-2 mx-2 gap-4 hover:bg-legacy-primary-100 font-normal rounded-md text-legacy-primary-600" href="<%s Url.api %>">
+  <a class="flex py-2 px-2 mx-2 gap-4 hover:bg-legacy-primary-100 font-normal rounded-md text-primary" href="<%s Url.api %>">
     Standard Library API
     <%s! Icons.arrow_top_right_on_square "w-6 h-6"%>
   </a>
@@ -42,14 +42,14 @@ in
     <div class="container-fluid">
         <div class=" ">
             <div class="text-center">
-                <h2 class="font-bold text-legacy-primary-600 mb-6">Opam: The OCaml Package Manager</h2>
+                <h2 class="font-bold text-primary mb-6">Opam: The OCaml Package Manager</h2>
                 <div class="text-lg text-white lg:px-44">Opam is a source-based package manager for OCaml. It supports
                     multiple simultaneous compiler installations, flexible package constraints, and a Git-friendly
                     development workflow.</div>
             </div>
 % let render_number_stat ?(first=false) label number =
     <div class="flex items-center flex-col md:px-12 <%s if first then "" else "md:border-l border-gray-200" %>">
-      <div class="font-bold text-4xl text-legacy-primary-600"><%d number %></div>
+      <div class="font-bold text-4xl text-primary"><%d number %></div>
       <div class="text-sm text-legacy-default text-center"><%s label %></div>
     </div>
 % in
@@ -66,7 +66,7 @@ in
         </div>
     </div>
 </div>
-<div class="bg-legacy-primary-600 ">
+<div class="bg-primary ">
     <div class="container-fluid">
         <div class="text-center text-white lg:py-32 md:py-20 py-10">
             <h3 class="font-bold mb-6">Featured Packages</h3>
@@ -145,7 +145,7 @@ in
         <div class="border border-gray-200 mt-16 mb-16"></div>
 
         <div class="flex flex-col text-center">
-            <div class="text-legacy-primary-600 mb-4 font-bold">STABLE ECOSYSTEM</div>
+            <div class="text-primary mb-4 font-bold">STABLE ECOSYSTEM</div>
             <h3 class="font-bold mb-8">Focus on Your Code, and opam Takes Care of Distributing It.</h3>
             <div class="text-lg text-legacy-lighter">Our users have the highest standards for the OCaml ecosystem to run
                 mission-critical applications across a variety of operating systems, and they expect that a package that
@@ -153,7 +153,7 @@ in
         </div>
         <div class="flex justify-between space-y-12 lg:space-x-20 mt-20 flex-col lg:flex-row lg:space-y-0">
             <div class="text-center flex-col max-w-full lg:max-w-sm ">
-                <div class="mb-4 rounded-2xl bg-legacy-primary-600 w-16 h-16 items-center m-auto flex justify-center">
+                <div class="mb-4 rounded-2xl bg-primary w-16 h-16 items-center m-auto flex justify-center">
                     <%s! Icons.beaker "h-6 w-6 text-white" %>
                 </div>
                 <div class="text-lg font-semibold mb-4">Continuous Integration</div>
@@ -162,7 +162,7 @@ in
                     never break the rest of the ecosystem.</div>
             </div>
             <div class="text-center flex-col max-w-full lg:max-w-sm">
-                <div class="mb-4 rounded-2xl bg-legacy-primary-600 w-16 h-16 items-center m-auto flex justify-center">
+                <div class="mb-4 rounded-2xl bg-primary w-16 h-16 items-center m-auto flex justify-center">
                     <%s! Icons.refresh "h-6 w-6 text-white" %>
                 </div>
                 <div class="text-lg font-semibold mb-4">State of the Art</div>
@@ -172,7 +172,7 @@ in
                     metadata format, and an easy access to the package manager logic via OCaml libraries.</div>
             </div>
             <div class="text-center flex-col max-w-full lg:max-w-sm">
-                <div class="mb-4 rounded-2xl bg-legacy-primary-600 w-16 h-16 items-center m-auto flex justify-center">
+                <div class="mb-4 rounded-2xl bg-primary w-16 h-16 items-center m-auto flex justify-center">
                     <%s! Icons.shield_check "h-6 w-6 text-white" %>
                 </div>
                 <div class="text-lg font-semibold mb-4">Stability</div>
@@ -188,7 +188,7 @@ in
   <div class=" bg-legacy-default prose max-w-none p-10 lg:p-8">
    If you want to learn about the OCaml packages, check out the <a href="https://github.com/ocaml/ocaml.org/blob/main/CONTRIBUTING.md#content-package" target="_blank">Contributing Guide</a> on GitHub.
 </div> 
-<div class="bg-legacy-primary-600 ">
+<div class="bg-primary ">
     <div class="container-fluid">
         <div class="text-center text-white lg:p-16 py-10">
             <h3 class="font-bold mb-6">Start Contributing</h3>
diff --git a/src/ocamlorg_frontend/pages/packages_autocomplete_fragment.eml b/src/ocamlorg_frontend/pages/packages_autocomplete_fragment.eml
index 34f494747c..90c5c73ea8 100644
--- a/src/ocamlorg_frontend/pages/packages_autocomplete_fragment.eml
+++ b/src/ocamlorg_frontend/pages/packages_autocomplete_fragment.eml
@@ -43,7 +43,7 @@ let render
 
   <ol class="flex flex-col" x-init="row = null; col = 0; total = <%s string_of_int total %>">
   <% packages |> List.iteri (fun i (package : Package.package) -> %>
-    <li class="flex flex-row text-legacy-primary-600">
+    <li class="flex flex-row text-primary">
       <a
         x-init="max=<%s string_of_int i %>"
         id="package-autocomplete-<%s string_of_int i %>-0"
@@ -67,7 +67,7 @@ let render
   <% ); %>
   </ol>
   <% if total > 5 then ( %>
-  <a class="text-legacy-primary-600 italic font-normal hover:bg-legacy-primary-100 px-2 py-2 flex text-right rounded-md" href="<%s Url.packages_search %>?q=<%s Dream.to_percent_encoded search %>">see more...</a>
+  <a class="text-primary italic font-normal hover:bg-legacy-primary-100 px-2 py-2 flex text-right rounded-md" href="<%s Url.packages_search %>?q=<%s Dream.to_percent_encoded search %>">see more...</a>
   <% ); %>
   <hr class="mb-2 mt-3">
   <span class="pl-2 font-normal">Or go to</span>
diff --git a/src/ocamlorg_frontend/pages/packages_search.eml b/src/ocamlorg_frontend/pages/packages_search.eml
index c49d273433..064e72054b 100644
--- a/src/ocamlorg_frontend/pages/packages_search.eml
+++ b/src/ocamlorg_frontend/pages/packages_search.eml
@@ -73,7 +73,7 @@ let render ~total ~search ~page ~number_of_pages (packages : Package.package lis
                 <% package.tags |> List.iter (fun (tag : string) -> %>
                 <a
                   href="<%s Url.packages_search %>?q=tag%3A%22<%s Dream.to_percent_encoded tag %>%22"
-                  class="px-2 whitespace-nowrap py-0.5 text-legacy-primary-700 font-medium bg-legacy-primary-100 border border-legacy-primary-600 rounded hover:underline"
+                  class="px-2 whitespace-nowrap py-0.5 text-legacy-primary-700 font-medium bg-legacy-primary-100 border border-primary rounded hover:underline"
                 >
                   <%s! Search.highlight_search_terms ~class_:"bg-legacy-search-term-highlight" ~search tag %>
                 </a>
diff --git a/src/ocamlorg_frontend/pages/papers.eml b/src/ocamlorg_frontend/pages/papers.eml
index e8c5efdc06..5e90a041b7 100644
--- a/src/ocamlorg_frontend/pages/papers.eml
+++ b/src/ocamlorg_frontend/pages/papers.eml
@@ -19,7 +19,7 @@ Layout.render
     <div class="container-fluid">
         <div class=" ">
             <div class="text-center">
-                <h2 class="font-bold text-legacy-primary-600 mb-16">Recommended Papers</h2>
+                <h2 class="font-bold text-primary mb-16">Recommended Papers</h2>
             </div>
             <div class="grid grid-cols-1 lg:grid-cols-3 gap-10">
                 <% recommended_papers |> List.iter (fun (paper : Data.Paper.t) -> %>
@@ -111,7 +111,7 @@ Layout.render
                                 </td>
                                 <td class="py-4 px-6 align-top">
                                     <% paper.links |> List.iter (fun (link : Data.Paper.link) -> %>
-                                        <a href="<%s link.uri %>" class="text-legacy-primary-600 font-medium block whitespace-nowrap">
+                                        <a href="<%s link.uri %>" class="text-primary font-medium block whitespace-nowrap">
                                             <%s link.description %>
                                         </a>
                                         <% ); %>
diff --git a/src/ocamlorg_frontend/pages/platform.eml b/src/ocamlorg_frontend/pages/platform.eml
index 8ea9785ccd..235e96486c 100644
--- a/src/ocamlorg_frontend/pages/platform.eml
+++ b/src/ocamlorg_frontend/pages/platform.eml
@@ -8,16 +8,16 @@ let render_sidebar
   </div>
 
 let render_package_cards ~(item: Data.Tool.t) =
-  <a href="<%s item.source %>" class="flex flex-col gap-1 border-2 rounded-md p-4 hover:border-legacy-primary-600 hover:ring-4 hover:ring-primary-200">
+  <a href="<%s item.source %>" class="flex flex-col gap-1 border-2 rounded-md p-4 hover:border-primary hover:ring-4 hover:ring-primary-200">
     <div class="flex gap-4 items-center">
-      <%s! Icons.tools "h-5 w-5 text-legacy-primary-600" %>
-      <div class="text-legacy-primary-600 text-lg font-bold"><%s item.name %></div>
+      <%s! Icons.tools "h-5 w-5 text-primary" %>
+      <div class="text-primary text-lg font-bold"><%s item.name %></div>
     </div>
     <div class="flex gap-4 items-center mb-2">
       <div class="w-5"></div>
       <div class="text-legacy-lighter h-10 w-10/12"><%s item.synopsis %></div>
     </div>
-    <%s! Icons.arrow_small_right "h-5 w-5 text-legacy-primary-600 rotate-45 place-self-end" %>
+    <%s! Icons.arrow_small_right "h-5 w-5 text-primary rotate-45 place-self-end" %>
   </a>
 
 let render
@@ -41,11 +41,11 @@ Learn_layout.three_column_layout
     </p>
     <p>
       Detailed instructions to install OCaml and the
-      Platform tools are available in <a class="text-legacy-primary-600"
+      Platform tools are available in <a class="text-primary"
       href="<%s Url.installing_ocaml %>">"Installing OCaml"</a>.
 
       If you want to use the simpler, but experimental way to install the
-      Platform, you can use the <a class="text-legacy-primary-600"
+      Platform, you can use the <a class="text-primary"
       href="https://github.com/tarides/ocaml-platform-installer"> OCaml
       Platform Installer</a>. To download it, run:
     </p>
@@ -95,7 +95,7 @@ Learn_layout.three_column_layout
       </div>
     </div>
     <div
-      class="rounded-full bg-legacy-primary-600 text-white w-16 h-16 right-0 left-0 m-auto bottom-5 md:left-auto md:right-10 md:bottom-10 absolute flex items-center z-10 justify-center"
+      class="rounded-full bg-primary text-white w-16 h-16 right-0 left-0 m-auto bottom-5 md:left-auto md:right-10 md:bottom-10 absolute flex items-center z-10 justify-center"
       x-show="!isPlaying"
     >
       <%s! Icons.play "h-9 w-9" %>
diff --git a/src/ocamlorg_frontend/pages/playground.eml b/src/ocamlorg_frontend/pages/playground.eml
index ed1656f0fe..a29fe5fc49 100644
--- a/src/ocamlorg_frontend/pages/playground.eml
+++ b/src/ocamlorg_frontend/pages/playground.eml
@@ -62,12 +62,12 @@ let render ~default_code =
             <div class="flex gap-7 w-full justify-end items-center px-4">
               <button
                 id="share"
-                class="flex gap-2 hover:bg-legacy-default dark:bg-legacy-dark-default hover:bg-opacity-10 active:bg-legacy-primary-100 active:text-legacy-primary-600 p-2 rounded-md text-legacy-lighter"
+                class="flex gap-2 hover:bg-legacy-default dark:bg-legacy-dark-default hover:bg-opacity-10 active:bg-legacy-primary-100 active:text-primary p-2 rounded-md text-legacy-lighter"
                 >
                 <%s! Icons.playground_share "h-6 w-6 stroke-current" %>
                 Share
               </button>
-              <button id="run" class="btn btn-md btn-secondary">
+              <button id="run" class="btn btn-md btn-ghost">
                 <span>Run</span>
                 <span>⌘⏎</span>
               </button>
@@ -92,13 +92,13 @@ let render ~default_code =
             <div class="flex justify-between text-white shadow-[inset_0px_1px_0px_rgba(255,255,255,0.1)]">
               <button
                 class="md:hidden border-b-2 border-transparent p-4"
-                :class="editor && mobile ? 'text-legacy-primary-600 border-b-2 border-legacy-primary-600' : ''"
+                :class="editor && mobile ? 'text-primary border-b-2 border-primary' : ''"
                 @click="editor = true; mobile=true; output = false;"
                 >
                 Editor
               </button>
               <button
-                :class="output && !mobile ? 'text-legacy-primary-600 border-b-2 border-legacy-primary-600' : ''"
+                :class="output && !mobile ? 'text-primary border-b-2 border-primary' : ''"
                 @click="output = true; mobile = false; editor = false;"
                 class="border-b-2 border-transparent p-4"
                 >
@@ -106,7 +106,7 @@ let render ~default_code =
               </button>
 
               <button 
-                class="text-white h-8 m-4 border-white btn btn-secondary btn-sm"
+                class="text-white h-8 m-4 border-white btn btn-ghost btn-sm"
                 id="clear-output"> 
                   Clear output
                   <%s! Icons.close_x "h-4 w-4" %>
diff --git a/src/ocamlorg_frontend/pages/release.eml b/src/ocamlorg_frontend/pages/release.eml
index a773dfe874..2d67b7017b 100644
--- a/src/ocamlorg_frontend/pages/release.eml
+++ b/src/ocamlorg_frontend/pages/release.eml
@@ -8,7 +8,7 @@ Layout.render
         <div class="flex md:flex-row md:px-10 lg:p-6 pb-20 items-center md:space-x-36 flex-col-reverse">
             <div class="text-left md:mt-10 lg:mt-0 mt-0 lg:pl-24">
                 <a href="<%s Url.releases %>"
-                    class="flex justify-start space-x-3 items-center text-legacy-primary-600 hover:underline font-semibold mb-4 h-12">
+                    class="flex justify-start space-x-3 items-center text-primary hover:underline font-semibold mb-4 h-12">
                     <%s! Icons.arrow_left "h-5 w-5 inline-block" %>
                     <div>All Releases</div>
                 </a>
diff --git a/src/ocamlorg_frontend/pages/releases.eml b/src/ocamlorg_frontend/pages/releases.eml
index e6ccb756ac..cc1d972280 100644
--- a/src/ocamlorg_frontend/pages/releases.eml
+++ b/src/ocamlorg_frontend/pages/releases.eml
@@ -62,16 +62,16 @@ Layout.render
                                 <%s release.date %>
                             </div>
                             <div class="py-4 px-6 align-top lg:w-1/2 w-full">
-                                <a href="<%s Url.release release.version %>" class="text-legacy-primary-600 font-medium block">
+                                <a href="<%s Url.release release.version %>" class="text-primary font-medium block">
                                     Release Notes
                                 </a>
-                                <a href="<%s Url.Package.overview "ocaml" ~version:release.version %>" class="text-legacy-primary-600 font-medium block">
+                                <a href="<%s Url.Package.overview "ocaml" ~version:release.version %>" class="text-primary font-medium block">
                                     OCaml Package
                                 </a>
-                                <a href="<%s Url.manual_with_version release.version %>" class="text-legacy-primary-600 font-medium block">
+                                <a href="<%s Url.manual_with_version release.version %>" class="text-primary font-medium block">
                                     Language Manual
                                 </a>
-                                <a href="<%s Url.api_with_version release.version %>" class="text-legacy-primary-600 font-medium block">
+                                <a href="<%s Url.api_with_version release.version %>" class="text-primary font-medium block">
                                     Standard Library API
                                 </a>
                             </div>
diff --git a/src/ocamlorg_frontend/pages/success_story.eml b/src/ocamlorg_frontend/pages/success_story.eml
index 50e1678376..cb9494955e 100644
--- a/src/ocamlorg_frontend/pages/success_story.eml
+++ b/src/ocamlorg_frontend/pages/success_story.eml
@@ -8,7 +8,7 @@ Layout.render
     <div class="mx-auto px-4 sm:px-6">
       <div class="lg:grid lg:grid-cols-12 lg:gap-8">
         <div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-8 lg:text-left">
-          <div class="flex justify-start space-x-3 items-center text-legacy-primary-600 hover:underline font-semibold mb-4 h-12">
+          <div class="flex justify-start space-x-3 items-center text-primary hover:underline font-semibold mb-4 h-12">
             <%s! Icons.arrow_left "h-5 w-5" %>
             <a href="<%s Url.industrial_users %>" class="hover:underline">Back to Success Stories</a>
           </div>
diff --git a/src/ocamlorg_frontend/pages/workshop.eml b/src/ocamlorg_frontend/pages/workshop.eml
index 5fb783fc67..42fde3ab31 100644
--- a/src/ocamlorg_frontend/pages/workshop.eml
+++ b/src/ocamlorg_frontend/pages/workshop.eml
@@ -21,9 +21,9 @@ Layout.render
         | true when not !seen_upcoming -> (
         seen_upcoming := true; %>
         <div class="flex items-center space-x-10">
-          <div class="text-legacy-primary-600 font-semibold w-10 lg:w-20 text-right"><%s Utils.human_date date.date %></div>
-          <div class="bg-legacy-primary-600 h-5 w-5 rounded-full"></div>
-          <div class="bg-legacy-primary-600 flex-1 rounded-xl text-white px-4 py-2 flex items-center">
+          <div class="text-primary font-semibold w-10 lg:w-20 text-right"><%s Utils.human_date date.date %></div>
+          <div class="bg-primary h-5 w-5 rounded-full"></div>
+          <div class="bg-primary flex-1 rounded-xl text-white px-4 py-2 flex items-center">
             <div>
               <div class="text-xs font-semibold">UPCOMING</div>
               <div><%s date.info %></div>
@@ -32,8 +32,8 @@ Layout.render
         </div>
         <% ) | _ -> %>
         <div class="flex items-center space-x-10">
-          <div class="text-legacy-primary-600 font-semibold w-10 lg:w-20 text-right"><%s Utils.human_date date.date %></div>
-          <div class="bg-legacy-primary-600 h-5 w-5 rounded-full"></div>
+          <div class="text-primary font-semibold w-10 lg:w-20 text-right"><%s Utils.human_date date.date %></div>
+          <div class="bg-primary h-5 w-5 rounded-full"></div>
           <div class="bg-legacy-default dark:bg-legacy-dark-default flex-1 rounded-xl text-legacy-default px-4 py-3 items-center flex">
             <span><%s date.info %></span>
           </div>
@@ -68,15 +68,15 @@ Layout.render
                 <td class="py-4 px-6 font-medium"><%s Fmt.(str "%a" (list ~sep:comma string) presentation.authors) %></td>
                 <td class="py-4 px-6">
                   <% (match presentation.link with None -> () | Some link -> %>
-                  <a href="<%s link %>" class="text-legacy-primary-600 font-medium block">Link</a>
+                  <a href="<%s link %>" class="text-primary font-medium block">Link</a>
                   <% ); %>
 
                   <% (match presentation.video with None -> () | Some link -> %>
-                  <a href="<%s link %>" class="text-legacy-primary-600 font-medium block">Video</a>
+                  <a href="<%s link %>" class="text-primary font-medium block">Video</a>
                   <% ); %>
 
                   <% (match presentation.slides with None -> () | Some link -> %>
-                  <a href="<%s link %>" class="text-legacy-primary-600 font-medium block">Slides</a>
+                  <a href="<%s link %>" class="text-primary font-medium block">Slides</a>
                   <% ); %>
                 </td>
               </tr>
@@ -92,7 +92,7 @@ Layout.render
 <div class="bg-pattern lg:py-32 py-24">
   <div class="container-fluid">
     <div class="text-center text-white">
-      <h2 class="font-bold text-legacy-primary-600 mb-16">Workshop Details</h2>
+      <h2 class="font-bold text-primary mb-16">Workshop Details</h2>
       <div>
         <% (match List.length workshop.organising_committee with | 0 -> () | _ -> %>
         <h5 class="font-bold text-white mb-12">Organising Committee</h5>
@@ -159,7 +159,7 @@ workshop.presentations in (match List.length videos with | 0 -> () | _ -> %>
       <% ); %>
     </div>
     <div class="flex justify-end mt-12">
-      <a href="https://watch.ocaml.org" target="_blank" class="btn btn-secondary">
+      <a href="https://watch.ocaml.org" target="_blank" class="btn btn-ghost">
         More videos at watch.ocaml.org
         <%s! Icons.chevron_right "h-5 w-5 inline-block" %>
       </a>