diff --git a/app/components/flowbite/card/card.html.erb b/app/components/flowbite/card/card.html.erb
index 82c1702..255ee5b 100644
--- a/app/components/flowbite/card/card.html.erb
+++ b/app/components/flowbite/card/card.html.erb
@@ -1,6 +1,7 @@
 <%= content_tag(:div, card_options) do %>
   <%= title %>
+
   <% if content.present? %>
-    <div class="font-normal text-gray-700 dark:text-gray-400"><%= content %></div>
+    <div class="font-normal text-body"><%= content %></div>
   <% end %>
 <% end %>
diff --git a/demo/app/assets/tailwind/application.css b/demo/app/assets/tailwind/application.css
index 6bc8a9d..b292789 100644
--- a/demo/app/assets/tailwind/application.css
+++ b/demo/app/assets/tailwind/application.css
@@ -1,16 +1,17 @@
 @import "tailwindcss";
 
-/* Load Flowbite */
-@plugin "flowbite/plugin";
-
 /* Load the default theme - or pick another, see https://flowbite.com/docs/customize/theming/ */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
 @import "flowbite/src/themes/default";
 
+/* Load Flowbite */
+@plugin "flowbite/plugin";
+
 /* Include CSS classes used by the components in the final CSS */
 @import "../builds/tailwind/flowbite_components";
 
-@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+@custom-variant dark (&:where(.dark, .dark *));
 
 footer a {
-  @apply font-medium text-blue-600 dark:text-blue-500 hover:underline;
+  @apply font-medium text-brand hover:underline;
 }
diff --git a/demo/app/views/layouts/application.html.erb b/demo/app/views/layouts/application.html.erb
index eb284a8..d90b7fe 100644
--- a/demo/app/views/layouts/application.html.erb
+++ b/demo/app/views/layouts/application.html.erb
@@ -1,17 +1,20 @@
 <!DOCTYPE html>
+
 <html>
   <head>
     <title><%= content_for(:title) || "Flowbite Components for Rails" %></title>
+
     <meta name="viewport" content="width=device-width,initial-scale=1">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="mobile-web-app-capable" content="yes">
+
     <%= csrf_meta_tags %>
     <%= csp_meta_tag %>
 
     <%= yield :head %>
 
     <%# Enable PWA manifest for installable apps (make sure to enable in config/routes.rb too!) %>
-    <%#= tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
+    <%# = tag.link rel: "manifest", href: pwa_manifest_path(format: :json) %>
 
     <link rel="icon" href="/icon.png" type="image/png">
     <link rel="icon" href="/icon.svg" type="image/svg+xml">
@@ -21,38 +24,105 @@
     <%= stylesheet_link_tag :app %>
   </head>
 
-  <body class="bg-white text-gray-800 dark:bg-gray-900 dark:text-gray-400">
+  <body class="bg-neutral-primary text-body">
     <header>
-      <nav class="bg-white border-gray-200 dark:bg-gray-900">
-        <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
+      <nav class="bg-neutral-primary border-gray-200">
+        <div
+          class="
+            max-w-screen-xl flex flex-wrap items-center justify-between
+            mx-auto p-4
+          "
+        >
           <%= link_to(root_path, class: "flex items-center space-x-3 rtl:space-x-reverse") do %>
-            <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">flowbite-components</span>
+            <span
+              class="
+                self-center text-2xl font-semibold whitespace-nowrap
+                text-heading
+              "
+            >
+              flowbite-components
+            </span>
           <% end %>
+
           <% if @menu_toggle_implemented %>
-            <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
-                <span class="sr-only">Open main menu</span>
-                <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
-                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
-                </svg>
+            <button
+              data-collapse-toggle="navbar-default"
+              type="button"
+              class="
+                inline-flex items-center p-2 w-10 h-10 justify-center
+                text-sm text-body rounded-lg md:hidden hover:bg-neutral-primary/10
+                focus:outline-none focus:ring-2 focus:ring-primary/50
+              "
+              aria-controls="navbar-default"
+              aria-expanded="false"
+            >
+              <span class="sr-only">Open main menu</span>
+
+              <svg
+                class="w-5 h-5"
+                aria-hidden="true"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 17 14"
+              >
+                <path
+                  stroke="currentColor"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  stroke-width="2"
+                  d="M1 1h15M1 7h15M1 13h15"
+                />
+              </svg>
             </button>
           <% end %>
+
           <div class="hidden w-full md:block md:w-auto" id="navbar-default">
-            <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
+            <ul
+              class="
+                font-medium flex flex-col p-4 md:p-0 mt-4 border
+                border-light rounded-lg bg-neutral-secondary md:flex-row
+                md:space-x-8 rtl:space-x-reverse md:mt-0 md:border-0
+                md:bg-neutral-primary
+              "
+            >
               <li>
-                <%= link_to("Home", root_url, class: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent") %>
+                <%= link_to("Home", root_url, class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
               </li>
+
               <li>
-                <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components", class: "block py-2 px-3 text-gray-900 rounded-sm hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent") %>
+                <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components", class: "block py-2 px-3 text-heading rounded-sm hover:bg-neutral-tertiary md:hover:bg-transparent md:border-0 md:hover:text-brand md:p-0 md:dark:hover:text-fg-brand dark:hover:text-white md:dark:hover:bg-transparent") %>
               </li>
+
               <li>
                 <button data-theme-toggle="dark" class="dark:hidden">
-                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-6">
-                    <path fill-rule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clip-rule="evenodd" />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    viewBox="0 0 24 24"
+                    fill="currentColor"
+                    class="size-6"
+                  >
+                    <path
+                      fill-rule="evenodd"
+                      d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z"
+                      clip-rule="evenodd"
+                    />
                   </svg>
                 </button>
+
                 <button data-theme-toggle="light" class="hidden dark:block">
-                  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18" />
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    class="size-6"
+                  >
+                    <path
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                      d="M12 18v-5.25m0 0a6.01 6.01 0 0 0 1.5-.189m-1.5.189a6.01 6.01 0 0 1-1.5-.189m3.75 7.478a12.06 12.06 0 0 1-4.5 0m3.75 2.383a14.406 14.406 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"
+                    />
                   </svg>
                 </button>
               </li>
@@ -63,12 +133,10 @@
     </header>
 
     <main class="container mx-auto mt-28 px-5 flex">
-      <article>
-        <%= yield %>
-      </article>
+      <article><%= yield %></article>
     </main>
 
-    <footer class="mt-28 px-5 py-5 flex border-t-2 border-gray-200 dark:border-gray-700">
+    <footer class="mt-28 px-5 py-5 flex border-t-2 border-default">
       <div class="space-y-5">
         <div class="flex space-x-5">
           <%= link_to("GitHub", "https://github.com/substancelab/flowbite-components") %>
@@ -77,19 +145,29 @@
         </div>
 
         <div>
-          Licensed under the <%= link_to("MIT License", "https://github.com/substancelab/flowbite-components/blob/main/LICENSE") %>, except where otherwise stated
+          Licensed under the
+          <%= link_to("MIT License", "https://github.com/substancelab/flowbite-components/blob/main/LICENSE") %>,
+          except where otherwise stated
         </div>
 
         <div>
-          The Flowbite name and logos are trademarks of <%= link_to("Bergside Inc", "https://flowbite.com/brand/") %>.
-          The Tailwind name and logos are trademarks of <%= link_to("Tailwind Labs Inc", "https://tailwindcss.com/brand") %>.
+          The Flowbite name and logos are trademarks of
+          <%= link_to("Bergside Inc", "https://flowbite.com/brand/") %>. The
+          Tailwind name and logos are trademarks of
+          <%= link_to("Tailwind Labs Inc", "https://tailwindcss.com/brand") %>.
         </div>
       </div>
     </footer>
 
     <script>
       function setTheme(theme) {
-        document.documentElement.setAttribute('data-theme', theme);
+        if (theme == "dark") {
+          document.documentElement.classList.add('dark');
+          document.documentElement.classList.remove('light');
+        } else {
+          document.documentElement.classList.add('light');
+          document.documentElement.classList.remove('dark');
+        }
         localStorage.setItem("theme", theme);
       }
       setTheme(localStorage.getItem('theme') || 'light');
diff --git a/demo/app/views/pages/index.html.erb b/demo/app/views/pages/index.html.erb
index a52be2e..a4547b6 100644
--- a/demo/app/views/pages/index.html.erb
+++ b/demo/app/views/pages/index.html.erb
@@ -1,16 +1,46 @@
-<section class="bg-white dark:bg-gray-900">
+<section class="text-heading">
   <div class="py-8 px-4 mx-auto max-w-screen-xl text-center lg:py-16">
-    <h1 class="mb-4 text-4xl font-extrabold tracking-tight leading-none text-gray-900 md:text-5xl lg:text-6xl dark:text-white">Rails meets Flowbite</h1>
-    <p class="mb-8 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48 dark:text-gray-400">UI component library for Rails, built using ViewComponents, Flowbite, and Tailwind CSS.</p>
-    <div class="flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-x-4 sm:space-y-0">
+    <h1
+      class="
+        mb-6 text-4xl font-bold tracking-tighter text-heading md:text-5xl
+        lg:text-6xl
+      "
+    >
+      Rails meets Flowbite
+    </h1>
+
+    <p class="mb-8 text-base font-normal text-body md:text-xl sm:px-16 lg:px-48">
+      UI component library for Rails, built using ViewComponents, Flowbite, and
+      Tailwind CSS.
+    </p>
+
+    <div
+      class="
+        flex flex-col space-y-4 sm:flex-row sm:justify-center sm:space-x-4
+        sm:space-y-0
+      "
+    >
       <%= link_to("https://github.com/substancelab/flowbite-components?tab=readme-ov-file#installation", class: Flowbite::Button.classes(size: :lg) + ["inline-flex", "justify-center", "items-center"]) do %>
-          Get started
-        <svg class="w-3.5 h-3.5 ms-2 rtl:rotate-180" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
+        Get started
+        <svg
+          class="w-3.5 h-3.5 ms-2 rtl:rotate-180"
+          aria-hidden="true"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 14 10"
+        >
+          <path
+            stroke="currentColor"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M1 5h12m0 0L9 1m4 4L9 9"
+          />
         </svg>
       <% end %>
-      <%= link_to(lookbook_path, class: Flowbite::Button.classes(size: :lg, style: :alternative)) do %>
-          View components
+
+      <%= link_to(lookbook_path, class: Flowbite::Button.classes(size: :lg, style: :secondary)) do %>
+        View components
       <% end %>
     </div>
   </div>
@@ -18,50 +48,142 @@
 
 <div class="flex flex-col gap-6 sm:flex-row">
   <%= render(Flowbite::Card.new(:class => "sm:flex-1")) do %>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-7 text-gray-500 dark:text-gray-400 mb-3">
-      <path fill-rule="evenodd" d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z" clip-rule="evenodd" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      class="size-7 text-body mb-3"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M20.599 1.5c-.376 0-.743.111-1.055.32l-5.08 3.385a18.747 18.747 0 0 0-3.471 2.987 10.04 10.04 0 0 1 4.815 4.815 18.748 18.748 0 0 0 2.987-3.472l3.386-5.079A1.902 1.902 0 0 0 20.599 1.5Zm-8.3 14.025a18.76 18.76 0 0 0 1.896-1.207 8.026 8.026 0 0 0-4.513-4.513A18.75 18.75 0 0 0 8.475 11.7l-.278.5a5.26 5.26 0 0 1 3.601 3.602l.502-.278ZM6.75 13.5A3.75 3.75 0 0 0 3 17.25a1.5 1.5 0 0 1-1.601 1.497.75.75 0 0 0-.7 1.123 5.25 5.25 0 0 0 9.8-2.62 3.75 3.75 0 0 0-3.75-3.75Z"
+        clip-rule="evenodd"
+      />
     </svg>
+
     <%= link_to("https://flowbite.com/") do %>
-      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Designed by Flowbite</h2>
+      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-heading">
+        Designed by Flowbite
+      </h2>
     <% end %>
-    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Open-source library of over 600+ UI components, sections, and pages.</p>
-    <%= link_to("https://flowbite.com/", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %>
+
+    <p class="mb-3 font-normal text-body">
+      Open-source library of over 600+ UI components, sections, and pages.
+    </p>
+
+    <%= link_to("https://flowbite.com/", class: "inline-flex font-medium items-center text-fg-brand hover:underline") do %>
       Flowbite documentation
-      <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/></svg>
+      <svg
+        class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 18 18"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+        />
+      </svg>
     <% end %>
   <% end %>
 
   <%= render(Flowbite::Card.new(:class => "sm:flex-1")) do %>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-7 text-gray-500 dark:text-gray-400 mb-3">
-      <path d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      class="size-7 text-body mb-3"
+    >
+      <path
+        d="m11.645 20.91-.007-.003-.022-.012a15.247 15.247 0 0 1-.383-.218 25.18 25.18 0 0 1-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0 1 12 5.052 5.5 5.5 0 0 1 16.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 0 1-4.244 3.17 15.247 15.247 0 0 1-.383.219l-.022.012-.007.004-.003.001a.752.752 0 0 1-.704 0l-.003-.001Z"
+      />
     </svg>
+
     <%= link_to("https://tailwindcss.com") do %>
-      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Powered by Tailwind CSS</h2>
+      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-heading">
+        Powered by Tailwind CSS
+      </h2>
     <% end %>
-    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Utility-first CSS framework that can be composed to build any design, directly in your markup.</p>
-    <%= link_to("https://tailwindcss.com", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %>
+
+    <p class="mb-3 font-normal text-body">
+      Utility-first CSS framework that can be composed to build any design,
+      directly in your markup.
+    </p>
+
+    <%= link_to("https://tailwindcss.com", class: "inline-flex font-medium items-center text-fg-brand hover:underline") do %>
       Tailwind CSS documentation
-      <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
+      <svg
+        class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 18 18"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+        />
       </svg>
     <% end %>
   <% end %>
 
   <%= render(Flowbite::Card.new(:class => "sm:flex-1")) do %>
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-7 text-gray-500 dark:text-gray-400 mb-3">
-      <path fill-rule="evenodd" d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z" clip-rule="evenodd" />
-      <path d="m10.076 8.64-2.201-2.2V4.874a.75.75 0 0 0-.364-.643l-3.75-2.25a.75.75 0 0 0-.916.113l-.75.75a.75.75 0 0 0-.113.916l2.25 3.75a.75.75 0 0 0 .643.364h1.564l2.062 2.062 1.575-1.297Z" />
-      <path fill-rule="evenodd" d="m12.556 17.329 4.183 4.182a3.375 3.375 0 0 0 4.773-4.773l-3.306-3.305a6.803 6.803 0 0 1-1.53.043c-.394-.034-.682-.006-.867.042a.589.589 0 0 0-.167.063l-3.086 3.748Zm3.414-1.36a.75.75 0 0 1 1.06 0l1.875 1.876a.75.75 0 1 1-1.06 1.06L15.97 17.03a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      class="size-7 text-body mb-3"
+    >
+      <path
+        fill-rule="evenodd"
+        d="M12 6.75a5.25 5.25 0 0 1 6.775-5.025.75.75 0 0 1 .313 1.248l-3.32 3.319c.063.475.276.934.641 1.299.365.365.824.578 1.3.64l3.318-3.319a.75.75 0 0 1 1.248.313 5.25 5.25 0 0 1-5.472 6.756c-1.018-.086-1.87.1-2.309.634L7.344 21.3A3.298 3.298 0 1 1 2.7 16.657l8.684-7.151c.533-.44.72-1.291.634-2.309A5.342 5.342 0 0 1 12 6.75ZM4.117 19.125a.75.75 0 0 1 .75-.75h.008a.75.75 0 0 1 .75.75v.008a.75.75 0 0 1-.75.75h-.008a.75.75 0 0 1-.75-.75v-.008Z"
+        clip-rule="evenodd"
+      />
+
+      <path
+        d="m10.076 8.64-2.201-2.2V4.874a.75.75 0 0 0-.364-.643l-3.75-2.25a.75.75 0 0 0-.916.113l-.75.75a.75.75 0 0 0-.113.916l2.25 3.75a.75.75 0 0 0 .643.364h1.564l2.062 2.062 1.575-1.297Z"
+      />
+
+      <path
+        fill-rule="evenodd"
+        d="m12.556 17.329 4.183 4.182a3.375 3.375 0 0 0 4.773-4.773l-3.306-3.305a6.803 6.803 0 0 1-1.53.043c-.394-.034-.682-.006-.867.042a.589.589 0 0 0-.167.063l-3.086 3.748Zm3.414-1.36a.75.75 0 0 1 1.06 0l1.875 1.876a.75.75 0 1 1-1.06 1.06L15.97 17.03a.75.75 0 0 1 0-1.06Z"
+        clip-rule="evenodd"
+      />
     </svg>
+
     <%= link_to("https://viewcomponent.org") do %>
-      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Built on ViewComponent</h2>
+      <h2 class="mb-2 text-2xl font-semibold tracking-tight text-heading">
+        Built on ViewComponent
+      </h2>
     <% end %>
-    <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Reusable, testable & encapsulated view components for Ruby on Rails.</p>
-    <%= link_to("https://viewcomponent.org", class: "inline-flex font-medium items-center text-blue-600 hover:underline") do %>
+
+    <p class="mb-3 font-normal text-body">
+      Reusable, testable & encapsulated view components for Ruby on Rails.
+    </p>
+
+    <%= link_to("https://viewcomponent.org", class: "inline-flex font-medium items-center text-fg-brand hover:underline") do %>
       ViewComponent documentation
-      <svg class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 18 18">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"/>
+      <svg
+        class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
+        aria-hidden="true"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="none"
+        viewBox="0 0 18 18"
+      >
+        <path
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
+        />
       </svg>
     <% end %>
   <% end %>
