diff --git a/src/components/primitives/Button.tsx b/src/components/primitives/Button.tsx
index d39b2512..859c58b5 100644
--- a/src/components/primitives/Button.tsx
+++ b/src/components/primitives/Button.tsx
@@ -29,7 +29,7 @@ export const buttonStyles = tv(
       size: "md",
     },
   },
-  { twMerge: false }
+  { twMerge: false },
 );
 
 type ButtonStyleProps = VariantProps<typeof buttonStyles>;
@@ -70,13 +70,7 @@ export default function Button({
         target="_blank"
         rel="noopener noreferrer"
         onClick={() => window.open(to, "_blank", "noopener noreferrer")}
-        className={mergeClass(
-          styleProps,
-          styleBold,
-          className,
-          disabled && "disabled"
-        )}
-      >
+        className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}>
         {children}
       </a>
     );
@@ -87,17 +81,11 @@ export default function Button({
         <Link
           prefetch="intent"
           to={to}
-          className={mergeClass(
-            styleProps,
-            styleBold,
-            className,
-            disabled && "disabled"
-          )}
+          className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}
           {...(external && {
             target: "_blank",
             rel: "noopener noreferrer",
-          })}
-        >
+          })}>
           {children}
         </Link>
       </EventBlocker>
@@ -107,16 +95,10 @@ export default function Button({
   return (
     <button
       style={themeVars}
-      className={mergeClass(
-        styleProps,
-        styleBold,
-        className,
-        disabled && "disabled"
-      )}
+      className={mergeClass(styleProps, styleBold, className, disabled && "disabled")}
       type="button"
       disabled={disabled}
-      {...props}
-    >
+      {...props}>
       {children}
     </button>
   );
diff --git a/src/components/primitives/Text.tsx b/src/components/primitives/Text.tsx
index 367e8684..ec98cab6 100644
--- a/src/components/primitives/Text.tsx
+++ b/src/components/primitives/Text.tsx
@@ -19,8 +19,7 @@ export const textStyles = tv(
         md: "text-base",
         lg: "text-lg",
         xl: "text-xl",
-        display1:
-          "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
+        display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
         1: "font-title font-bold italic leading-none !text-[clamp(44px,4.333vw+1.125rem,96px)]",
         2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
         3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
@@ -39,8 +38,7 @@ export const textStyles = tv(
       md: "text-base",
       lg: "text-lg",
       xl: "text-xl",
-      display1:
-        "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
+      display1: "font-title font-bold leading-tight italic uppercase !text-[clamp(44px,5vw+0.875rem,104px)]",
       1: "font-title !text-3xl",
       2: "font-title font-bold leading-none italic !text-[clamp(38px,0.667vw+2.125rem,46px)]",
       3: "font-title font-bold leading-none italic !text-[clamp(26px,0.667vw+1.375rem,34px)]",
@@ -53,32 +51,12 @@ export const textStyles = tv(
       false: "",
     },
   },
-  { twMerge: false }
+  { twMerge: false },
 );
 
-export type TextProps = Component<
-  Styled<typeof textStyles> & { bold?: boolean },
-  HTMLParagraphElement
->;
+export type TextProps = Component<Styled<typeof textStyles> & { bold?: boolean }, HTMLParagraphElement>;
 
-export default function Text({
-  look,
-  size,
-  style,
-  bold,
-  interactable,
-  className,
-  ...props
-}: TextProps) {
+export default function Text({ look, size, style, bold, interactable, className, ...props }: TextProps) {
   const styleBold = bold ? "font-bold" : "";
-  return (
-    <p
-      className={mergeClass(
-        textStyles({ look, size, interactable }),
-        styleBold,
-        className
-      )}
-      {...props}
-    />
-  );
+  return <p className={mergeClass(textStyles({ look, size, interactable }), styleBold, className)} {...props} />;
 }
diff --git a/src/components/primitives/Title.tsx b/src/components/primitives/Title.tsx
index 51d13117..a1573aa3 100644
--- a/src/components/primitives/Title.tsx
+++ b/src/components/primitives/Title.tsx
@@ -1,4 +1,3 @@
-import clsx from "clsx";
 import { forwardRef } from "react";
 import { tv } from "tailwind-variants";
 import type { Component, Styled } from "../../utils/types";
@@ -35,21 +34,56 @@ export type TitleProps = Component<
 
 const Title = forwardRef<HTMLHeadingElement, TitleProps>(function Title(
   { look, h, size: _size, className, ...props }: TitleProps,
-  ref,
+  ref
 ) {
   const size = _size ?? h;
 
   switch (h) {
     case 1:
-      return <h1 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h1
+          ref={ref}
+          className={mergeClass(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 2:
-      return <h2 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h2
+          ref={ref}
+          className={mergeClass(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 3:
-      return <h3 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h3
+          ref={ref}
+          className={mergeClass(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 4:
-      return <h4 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h4
+          ref={ref}
+          className={mergeClass(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     case 5:
-      return <h5 ref={ref} className={clsx(titleStyles({ look, size }), className)} children={" "} {...props} />;
+      return (
+        <h5
+          ref={ref}
+          className={mergeClass(titleStyles({ look, size }), className)}
+          children={" "}
+          {...props}
+        />
+      );
     default:
       break;
   }
diff --git a/src/theming/coloring.ts b/src/theming/coloring.ts
index 9db09c35..3cee8b4f 100644
--- a/src/theming/coloring.ts
+++ b/src/theming/coloring.ts
@@ -56,17 +56,17 @@ export function extractColorScale(theme: Coloring) {
   const extract = ({ accentScale: accent, grayScale: main, background }: typeof darkOutput | typeof lightOutput) => {
     // Convert background color to RGB components
     const getRGB = (color: string) => {
-      const hex = color.replace('#', '');
-      const r = parseInt(hex.substring(0, 2), 16);
-      const g = parseInt(hex.substring(2, 4), 16);
-      const b = parseInt(hex.substring(4, 6), 16);
+      const hex = color.replace("#", "");
+      const r = Number.parseInt(hex.substring(0, 2), 16);
+      const g = Number.parseInt(hex.substring(2, 4), 16);
+      const b = Number.parseInt(hex.substring(4, 6), 16);
       return `${r} ${g} ${b}`;
     };
 
     return {
       accent,
       main,
-      background: getRGB(background)
+      background: getRGB(background),
     };
   };