diff --git a/.vscode/settings.json b/.vscode/settings.json
index 629745e6..5a605532 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -20,7 +20,7 @@
   "tailwindCSS.classFunctions": ["cn"],
   "tailwindCSS.experimental.configFile": {
     "apps/admin/src/styles/main.css": "apps/admin/**",
-    "apps/website/tailwind.config.ts": "apps/website/**",
+    "apps/website/src/styles/main.css": "apps/website/**",
     "apps/show/src/styles/main.css": "apps/show/**",
     "libs/tailwindcss-peekaboo/storybook/styles.css": "libs/tailwindcss-peekaboo/**"
   },
diff --git a/apps/admin/Dockerfile b/apps/admin/Dockerfile
index 3460a502..8adb3409 100644
--- a/apps/admin/Dockerfile
+++ b/apps/admin/Dockerfile
@@ -47,7 +47,6 @@ COPY libs/password/package.json libs/password/
 COPY libs/prisma/package.json libs/prisma/
 COPY libs/react-primitives/package.json libs/react-primitives/
 COPY libs/search-params-io/package.json libs/search-params-io/
-COPY libs/tailwind-animation/package.json libs/tailwind-animation/
 COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/
 COPY libs/zod-utils/package.json libs/zod-utils/
 COPY scripts/package.json scripts/
diff --git a/apps/show/Dockerfile b/apps/show/Dockerfile
index ca95f547..74319b12 100644
--- a/apps/show/Dockerfile
+++ b/apps/show/Dockerfile
@@ -47,7 +47,6 @@ COPY libs/password/package.json libs/password/
 COPY libs/prisma/package.json libs/prisma/
 COPY libs/react-primitives/package.json libs/react-primitives/
 COPY libs/search-params-io/package.json libs/search-params-io/
-COPY libs/tailwind-animation/package.json libs/tailwind-animation/
 COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/
 COPY libs/zod-utils/package.json libs/zod-utils/
 COPY scripts/package.json scripts/
diff --git a/apps/website/Dockerfile b/apps/website/Dockerfile
index bae3f24b..41c18e5e 100644
--- a/apps/website/Dockerfile
+++ b/apps/website/Dockerfile
@@ -47,7 +47,6 @@ COPY libs/password/package.json libs/password/
 COPY libs/prisma/package.json libs/prisma/
 COPY libs/react-primitives/package.json libs/react-primitives/
 COPY libs/search-params-io/package.json libs/search-params-io/
-COPY libs/tailwind-animation/package.json libs/tailwind-animation/
 COPY libs/tailwindcss-peekaboo/package.json libs/tailwindcss-peekaboo/
 COPY libs/zod-utils/package.json libs/zod-utils/
 COPY scripts/package.json scripts/
diff --git a/apps/website/eslint.config.js b/apps/website/eslint.config.js
index c28c06bb..b6765fe1 100644
--- a/apps/website/eslint.config.js
+++ b/apps/website/eslint.config.js
@@ -1 +1,5 @@
-export { default } from "@animeaux/dev-tools/eslint"
+import { createConfig } from "@animeaux/dev-tools/eslint"
+
+export default createConfig({
+  tailwindStylesheet: "./src/styles/main.css",
+})
diff --git a/apps/website/package.json b/apps/website/package.json
index a1212811..36cd3d9f 100644
--- a/apps/website/package.json
+++ b/apps/website/package.json
@@ -39,10 +39,10 @@
     "@remix-run/react": "catalog:",
     "@remix-run/serve": "catalog:",
     "body-scroll-lock": "catalog:",
+    "es-toolkit": "catalog:",
     "focus-trap": "catalog:",
     "history": "catalog:",
     "isbot": "catalog:",
-    "es-toolkit": "catalog:",
     "luxon": "catalog:",
     "react": "catalog:",
     "react-dom": "catalog:",
@@ -57,7 +57,10 @@
   "devDependencies": {
     "@animeaux/dev-tools": "workspace:*",
     "@remix-run/dev": "catalog:",
+    "@tailwindcss/node": "catalog:tailwindcss4",
+    "@tailwindcss/vite": "catalog:tailwindcss4",
     "@types/body-scroll-lock": "catalog:",
+    "@types/culori": "catalog:",
     "@types/luxon": "catalog:",
     "@types/node": "catalog:",
     "@types/react": "catalog:",
@@ -65,14 +68,14 @@
     "@types/react-transition-group": "catalog:",
     "autoprefixer": "catalog:",
     "chokidar": "catalog:",
+    "culori": "catalog:",
     "dotenv-flow": "catalog:",
     "eslint": "catalog:",
     "msw": "catalog:",
     "node-html-parser": "catalog:",
     "npm-run-all": "catalog:",
     "prettier": "catalog:",
-    "prettier-plugin-tailwindcss": "catalog:",
-    "tailwindcss": "catalog:",
+    "tailwindcss": "catalog:tailwindcss4",
     "tsx": "catalog:",
     "typescript": "catalog:",
     "vite": "catalog:",
diff --git a/apps/website/postcss.config.js b/apps/website/postcss.config.js
deleted file mode 100644
index d9bc7d09..00000000
--- a/apps/website/postcss.config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  plugins: {
-    "tailwindcss/nesting": {},
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
diff --git a/apps/website/prettier.config.js b/apps/website/prettier.config.js
index 9bcbf4e4..1a6f250b 100644
--- a/apps/website/prettier.config.js
+++ b/apps/website/prettier.config.js
@@ -1,5 +1 @@
-import { createConfig } from "@animeaux/dev-tools/prettier"
-
-export default createConfig({
-  tailwindConfig: "./tailwind.config.ts",
-})
+export { default } from "@animeaux/dev-tools/prettier"
diff --git a/apps/website/scripts/generate-theme.ts b/apps/website/scripts/generate-theme.ts
index 1bac73e0..ced211a4 100644
--- a/apps/website/scripts/generate-theme.ts
+++ b/apps/website/scripts/generate-theme.ts
@@ -1,28 +1,42 @@
-import { mkdir, writeFile } from "node:fs/promises"
+import { mkdir, readFile, writeFile } from "node:fs/promises"
 import { dirname, resolve } from "node:path"
 import { fileURLToPath } from "node:url"
 
-import { colors, screens } from "../tailwind.config.js"
+import { __unstable__loadDesignSystem as loadDesignSystem } from "@tailwindcss/node"
+import { formatHex } from "culori"
+import { orderBy } from "es-toolkit"
+import type { __unstable__loadDesignSystem as loadDesignSystemBase } from "tailwindcss"
+import invariant from "tiny-invariant"
+
 import { relativeToCwd, safelyReadFile } from "./shared.js"
 
 const FILENAME = fileURLToPath(import.meta.url)
 const DIRNAME = dirname(FILENAME)
 const SCRIPT_NAME = relativeToCwd(FILENAME)
+const STYLES_DIRECTORY = resolve(DIRNAME, "../src/styles")
+const MAIN_STYLE_FILE = resolve(STYLES_DIRECTORY, "main.css")
 const DEST_DIRECTORY = resolve(DIRNAME, "../src/generated")
 const DEST_FILE = resolve(DEST_DIRECTORY, "theme.ts")
 
 console.log("Building...")
 
+const mainCss = await readFile(MAIN_STYLE_FILE, "utf-8")
+
+// The type cast is required because @tailwindcss/node's `loadDesignSystem`
+// types are broken (`design.theme: any`). We use tailwindcss's
+// `loadDesignSystem` types because it's used internally and its types are fine.
+const design = (await loadDesignSystem(mainCss, {
+  base: STYLES_DIRECTORY,
+})) as Awaited<ReturnType<typeof loadDesignSystemBase>>
+
 // Ensure the destination directory exists.
 await mkdir(DEST_DIRECTORY, { recursive: true })
 
-// Add here values we need in code.
-// Only add what is actualy needed to keep a minimal size.
-const theme = { screens, colors }
-
 const content = `// This file is generated by ${SCRIPT_NAME}
-export type ScreenSize = keyof typeof theme.screens
-export const theme = ${JSON.stringify(theme, null, 2)}`
+${getBreakpoints()}
+
+${getColors()}
+`
 
 const currentContent = await safelyReadFile(DEST_FILE)
 if (currentContent === content) {
@@ -35,3 +49,98 @@ if (currentContent === content) {
 
 await writeFile(DEST_FILE, content)
 console.info(`Built theme (${relativeToCwd(DEST_FILE)})`)
+
+function getBreakpoints() {
+  const breakpoints = design.theme.namespace("--breakpoint")
+
+  const sortedEntries = orderBy(
+    Array.from(breakpoints.entries())
+      // `null` is used as key for a property with the namespace's name (e.g.
+      // `--breakpoint: <value>`).
+      // For breakpoints this shouldn't happen.
+      .filter((entry): entry is [string, string] => entry[0] != null)
+      .map(
+        ([breakpoint, length]) =>
+          [breakpoint, getLengthValuePx(length)] as const,
+      ),
+    [([_breakpoint, valuePx]) => valuePx],
+    ["desc"],
+  )
+
+  return `export type Breakpoint = typeof Breakpoint.names[number]
+
+export namespace Breakpoint {
+  /** Breakpoint names sorted by descending value. */
+  export const names = ${JSON.stringify(
+    sortedEntries.map(([breakpoint]) => breakpoint),
+  )} as const
+
+  /** Breakpoint values in pixels. */
+  export const value = ${JSON.stringify(Object.fromEntries(sortedEntries), null, 2)} as const
+}`
+}
+
+function getColors() {
+  const colors = design.theme.namespace("--color")
+
+  const brandBlue = colors.get("brand-blue-800")
+  const gray50 = colors.get("gray-50")
+
+  return `export namespace Color {
+  export const brandBlue = ${JSON.stringify(brandBlue)}
+  export const brandBlueHex = ${JSON.stringify(formatHex(brandBlue))}
+  export const gray50 = ${JSON.stringify(gray50)}
+  export const gray50Hex = ${JSON.stringify(formatHex(gray50))}
+  
+  export const background = Color.gray50
+  export const backgroundHex = Color.gray50Hex
+  export const primary = Color.brandBlue
+  export const primaryHex = Color.brandBlueHex
+}`
+}
+
+/**
+ * Returns the given CSS length in pixels.
+ *
+ * @param length expressed with the `<length>` CSS type.
+ * @returns The value in pixels
+ * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length
+ */
+function getLengthValuePx(length: string) {
+  length = length.trim()
+
+  /**
+   * Matches values for the `<length>` CSS type.
+   * We only support unitless `0`, rem and px.
+   *
+   * @see https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length
+   */
+  const CSS_LENGTH_REGEXP = /(?<value>-?\d*\.?\d+)(?<unit>.*)/
+
+  const match = length.match(CSS_LENGTH_REGEXP)
+
+  invariant(
+    match?.groups?.value != null,
+    `Invalid CSS length from theme: "${length}"`,
+  )
+
+  const value = Number(match.groups.value)
+
+  // The unit is optional when the value is `0`.
+  // See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/length#syntax
+  const unit = match.groups.unit || "px"
+
+  switch (unit) {
+    case "px": {
+      return value
+    }
+
+    case "rem": {
+      return 16 * value
+    }
+
+    default: {
+      throw new Error(`Unsupported length unit: "${unit}" in "${length}"`)
+    }
+  }
+}
diff --git a/apps/website/src/animals/item.tsx b/apps/website/src/animals/item.tsx
index 2d446893..f2c679d7 100644
--- a/apps/website/src/animals/item.tsx
+++ b/apps/website/src/animals/item.tsx
@@ -55,9 +55,9 @@ export function AnimalItem({
         <div className="flex flex-col">
           <p className="flex items-start gap-1">
             <span
-              className={cn("flex h-6 flex-none items-center text-[20px]", {
+              className={cn("flex h-6 flex-none items-center icon-20", {
                 "text-pink-500": animal.gender === Gender.FEMALE,
-                "text-brandBlue": animal.gender === Gender.MALE,
+                "text-brand-blue": animal.gender === Gender.MALE,
               })}
               title={GENDER_TRANSLATION[animal.gender]}
             >
@@ -65,21 +65,18 @@ export function AnimalItem({
             </span>
 
             <span
-              className={cn(
-                "flex-1 transition-colors duration-100 ease-in-out text-title-item",
-                {
-                  "group-hover:text-brandBlue":
-                    !isDisabled && animal.gender === Gender.MALE,
-                  "group-hover:text-pink-500":
-                    !isDisabled && animal.gender === Gender.FEMALE,
-                },
-              )}
+              className={cn("flex-1 text-item-title transition-colors", {
+                "group-hover:text-brand-blue":
+                  !isDisabled && animal.gender === Gender.MALE,
+                "group-hover:text-pink-500":
+                  !isDisabled && animal.gender === Gender.FEMALE,
+              })}
             >
               {animal.name}
             </span>
           </p>
 
-          <p className="flex items-start gap-6 text-gray-500 text-caption-default">
+          <p className="flex items-start gap-6 text-caption text-gray-500">
             <span className="flex-1">{speciesLabels}</span>
             <span className="flex-none">{formatAge(animal.birthdate)}</span>
           </p>
diff --git a/apps/website/src/blog/item.tsx b/apps/website/src/blog/item.tsx
index e3b1c696..584c84c4 100644
--- a/apps/website/src/blog/item.tsx
+++ b/apps/website/src/blog/item.tsx
@@ -30,14 +30,14 @@ export function ArticleItem({
         />
 
         <div className="flex flex-col">
-          <p className="text-gray-500 text-caption-default">
+          <p className="text-caption text-gray-500">
             {DateTime.fromISO(article.publicationDate).toLocaleString(
               DateTime.DATE_MED,
             )}{" "}
             par {article.authorName}
           </p>
 
-          <p className="transition-colors duration-100 ease-in-out text-title-item group-hover:text-brandBlue">
+          <p className="text-item-title transition-colors group-hover:text-brand-blue">
             {article.title}
           </p>
           <p>{article.description}</p>
diff --git a/apps/website/src/core/actions.ts b/apps/website/src/core/actions.ts
index 30471797..8ef7a7b0 100644
--- a/apps/website/src/core/actions.ts
+++ b/apps/website/src/core/actions.ts
@@ -3,17 +3,17 @@ import { cn } from "@animeaux/core"
 type ActionColor = "blue" | "yellow" | "gray"
 
 const STANDALONE_ACTION_COLOR_CLASS_NAME: Record<ActionColor, string> = {
-  blue: "bg-brandBlue text-white hover:bg-brandBlue-lighter",
-  yellow: "bg-brandYellow text-black hover:bg-brandYellow-darker",
-  gray: "bg-gray-100 hover:bg-gray-200",
+  blue: cn("bg-brand-blue text-white hover:bg-brand-blue-lighter"),
+  yellow: cn("bg-brand-yellow text-black hover:bg-brand-yellow-darker"),
+  gray: cn("bg-gray-100 hover:bg-gray-200"),
 }
 
 export const actionClassNames = {
   standalone: ({ color = "blue" }: { color?: ActionColor } = {}) =>
     cn(
-      "flex min-w-max flex-none items-center justify-center px-6 py-2 transition-[background-color,transform] duration-100 ease-in-out rounded-bubble-sm text-body-emphasis active:scale-95",
+      "flex min-w-max flex-none items-center justify-center rounded-bubble-sm px-6 py-2 text-body-emphasis transition-[background-color,scale] active:scale-95",
       STANDALONE_ACTION_COLOR_CLASS_NAME[color],
     ),
   proseInline: () =>
-    "border-b text-body-emphasis border-b-brandBlue hover:border-b-2",
+    cn("border-b border-b-brand-blue text-body-emphasis hover:border-b-2"),
 }
diff --git a/apps/website/src/core/controllers/paginator.tsx b/apps/website/src/core/controllers/paginator.tsx
index f4929719..e34f1846 100644
--- a/apps/website/src/core/controllers/paginator.tsx
+++ b/apps/website/src/core/controllers/paginator.tsx
@@ -77,9 +77,9 @@ function PaginatorItem({
           {
             "w-[40px] rounded-bubble-sm": !isEllipsis,
           },
-          "flex items-center justify-center transition-colors duration-100 ease-in-out text-body-emphasis",
+          "flex items-center justify-center text-body-emphasis transition-colors",
           {
-            "bg-brandBlue text-white": isActive,
+            "bg-brand-blue text-white": isActive,
             "hover:bg-gray-200": !isActive && to != null,
           },
         )}
diff --git a/apps/website/src/core/controllers/searchForm.tsx b/apps/website/src/core/controllers/searchForm.tsx
index 24f9d951..37fcb504 100644
--- a/apps/website/src/core/controllers/searchForm.tsx
+++ b/apps/website/src/core/controllers/searchForm.tsx
@@ -89,7 +89,7 @@ export function SearchForm({
     <div
       className={cn(
         className,
-        "flex gap-2 rounded-bl-[10px] rounded-br-[16px] rounded-tl-[16px] rounded-tr-[10px] bg-white p-1 shadow-base",
+        "flex gap-2 rounded-tl-[16px] rounded-tr-[10px] rounded-br-[16px] rounded-bl-[10px] bg-white p-1 shadow-base",
       )}
     >
       <Select<AnimalSpeciesOption>
@@ -135,7 +135,7 @@ export function SearchForm({
       <BaseLink
         to={getPath(state)}
         title="Rechercher"
-        className="flex flex-none bg-brandBlue p-3 text-white transition-[background-color,transform] duration-100 ease-in-out rounded-bubble-sm active:scale-95 hover:bg-brandBlue-lighter"
+        className="flex flex-none rounded-bubble-sm bg-brand-blue p-3 text-white transition-[background-color,scale] hover:bg-brand-blue-lighter active:scale-95"
       >
         <Icon id="magnifying-glass" />
       </BaseLink>
@@ -161,7 +161,7 @@ function Select<ValueType extends string>({
         onChange(event.target.value as ValueType)
       }}
       className={cn(
-        "min-w-0 flex-1 cursor-pointer appearance-none bg-transparent px-6 py-2 transition-colors duration-100 ease-in-out rounded-bubble-sm hover:bg-gray-50",
+        "min-w-0 flex-1 cursor-pointer appearance-none rounded-bubble-sm bg-transparent px-6 py-2 transition-colors hover:bg-gray-50",
         { "text-gray-500": value == null },
       )}
     >
diff --git a/apps/website/src/core/controllers/tabs.tsx b/apps/website/src/core/controllers/tabs.tsx
index 238d59a2..a33904a7 100644
--- a/apps/website/src/core/controllers/tabs.tsx
+++ b/apps/website/src/core/controllers/tabs.tsx
@@ -21,9 +21,9 @@ export function Tab({
       type="button"
       onClick={onSelect}
       className={cn(
-        "relative flex px-3 py-2 transition-colors duration-150 ease-in-out text-body-emphasis",
+        "relative flex px-3 py-2 text-body-emphasis transition-colors duration-slow",
         {
-          "text-brandBlue": isActive,
+          "text-brand-blue": isActive,
           "text-gray-600 hover:text-black": !isActive,
         },
       )}
@@ -34,7 +34,7 @@ export function Tab({
         {(transitionState) => (
           <LineShapeHorizontal
             className={cn("absolute bottom-0 left-0 block h-1 w-full", {
-              "transition-[stroke-dashoffset] duration-150 ease-in-out":
+              "transition-[stroke-dashoffset] duration-slow":
                 transitionState === "entering" || transitionState === "exiting",
             })}
             style={{
diff --git a/apps/website/src/core/data-display/image.tsx b/apps/website/src/core/data-display/image.tsx
index bfabb6b9..8fd40429 100644
--- a/apps/website/src/core/data-display/image.tsx
+++ b/apps/website/src/core/data-display/image.tsx
@@ -1,11 +1,9 @@
 import { cn } from "@animeaux/core"
-import { orderBy } from "es-toolkit/array"
 import invariant from "tiny-invariant"
 
 import type { IconProps } from "#i/generated/icon.js"
 import { Icon } from "#i/generated/icon.js"
-import type { ScreenSize } from "#i/generated/theme.js"
-import { theme } from "#i/generated/theme.js"
+import { Breakpoint } from "#i/generated/theme.js"
 
 // Ordered by decreasing size.
 const IMAGE_SIZES = ["2048", "1536", "1024", "512", "256", "128"] as const
@@ -17,19 +15,11 @@ export type ImageDescriptor = {
 }
 
 // Larger to smaller.
-const SCREEN_SIZES = orderBy(
-  (Object.entries(theme.screens) as [ScreenSize | "default", string][]).map(
-    ([name, width]) => ({ name, width: Number(width.replace("px", "")) }),
-  ),
-  [({ width }) => width],
-  ["desc"],
-)
-  .map(({ name }) => name)
-  .concat("default")
+const BREAKPOINT_NAMES = [...Breakpoint.names, "default"] as const
 
 export type StaticImageProps = {
   image: ImageDescriptor
-  sizes: Partial<Record<ScreenSize, string>> & {
+  sizes: Partial<Record<Breakpoint, string>> & {
     // `default` is mandatory.
     default: string
   }
@@ -47,14 +37,14 @@ export function StaticImage({
 }: StaticImageProps) {
   invariant(fallbackSize != null, "At least one size should be provided.")
 
-  const sizes = SCREEN_SIZES.reduce<string[]>((sizes, screen) => {
-    const width = sizesProp[screen]
+  const sizes = BREAKPOINT_NAMES.reduce<string[]>((sizes, breakpoint) => {
+    const width = sizesProp[breakpoint]
 
     if (width != null) {
       sizes.push(
-        screen === "default"
+        breakpoint === "default"
           ? width
-          : `(min-width: ${theme.screens[screen]}) ${width}`,
+          : `(min-width: ${Breakpoint.value[breakpoint]}px) ${width}`,
       )
     }
 
@@ -78,8 +68,8 @@ export function StaticImage({
 type ImageBackground = "none" | "gray"
 
 const IMAGE_BACKGROUND_CLASS_NAME: Record<ImageBackground, string> = {
-  gray: "bg-gray-100",
-  none: "",
+  gray: cn("bg-gray-100"),
+  none: cn(),
 }
 
 export function DynamicImage({
diff --git a/apps/website/src/core/data-display/markdown.tsx b/apps/website/src/core/data-display/markdown.tsx
index f72aac42..372f7f22 100644
--- a/apps/website/src/core/data-display/markdown.tsx
+++ b/apps/website/src/core/data-display/markdown.tsx
@@ -91,7 +91,7 @@ export const ARTICLE_COMPONENTS: MarkdownProps["components"] = {
     <blockquote
       className={cn("my-6 flex gap-3 italic first:mt-0 last:mb-0", "md:gap-6")}
     >
-      <LineShapeVertical className="w-2 flex-none text-brandBlue" />
+      <LineShapeVertical className="w-2 flex-none text-brand-blue" />
       <div className="flex-1">{children}</div>
     </blockquote>
   ),
@@ -107,8 +107,8 @@ export const ARTICLE_COMPONENTS: MarkdownProps["components"] = {
   h2: ({ children }) => (
     <h2
       className={cn(
-        "mb-6 mt-12 text-title-section-small first:mt-0 last:mb-0",
-        "md:text-title-section-large",
+        "mt-12 mb-6 text-section-title-small first:mt-0 last:mb-0",
+        "md:text-section-title-large",
       )}
     >
       {children}
diff --git a/apps/website/src/core/data-display/options.tsx b/apps/website/src/core/data-display/options.tsx
index 0dbd675c..3050c9e0 100644
--- a/apps/website/src/core/data-display/options.tsx
+++ b/apps/website/src/core/data-display/options.tsx
@@ -9,7 +9,7 @@ export function OptionList({ children }: { children: React.ReactNode }) {
         // Ensure the list takes the entire viewport width for better overflow
         // indicators.
         "-mx-page w-screen min-w-0",
-        "flex snap-x snap-mandatory items-start gap-3 overflow-x-auto scroll-smooth scrollbars-none",
+        "scrollbars-none flex snap-x snap-mandatory items-start gap-3 overflow-x-auto scroll-smooth",
         // Because of `overflow-x-auto`, we need to ensure card shadows are
         // visible.
         "-my-6 py-6",
@@ -37,7 +37,7 @@ export function OptionCard({ children }: { children: React.ReactNode }) {
         "md:m-0 md:w-auto md:max-w-sm md:flex-1 md:p-0",
       )}
     >
-      <div className="flex w-full flex-col gap-6 bg-white p-6 shadow-base rounded-bubble-lg">
+      <div className="flex w-full flex-col gap-6 rounded-bubble-lg bg-white p-6 shadow-base">
         {children}
       </div>
     </section>
@@ -45,7 +45,7 @@ export function OptionCard({ children }: { children: React.ReactNode }) {
 }
 
 export function OptionTitle({ children }: { children: React.ReactNode }) {
-  return <h3 className="text-title-item">{children}</h3>
+  return <h3 className="text-item-title">{children}</h3>
 }
 
 export function OptionDescription({ children }: { children: React.ReactNode }) {
@@ -63,8 +63,8 @@ export function OptionPrice({
     <p>
       <span
         className={cn(
-          "font-serif text-[32px] font-bold leading-normal",
-          "md:text-[40px] md:leading-[1.2]",
+          "font-serif icon-32 leading-normal font-bold",
+          "md:icon-40 md:leading-[1.2]",
         )}
       >
         {children}
@@ -91,7 +91,7 @@ export function OptionFeature({
       <span className="flex h-6 flex-none items-center">
         <Icon
           id={isIncluded ? "check" : "x-mark"}
-          className={isIncluded ? "text-brandGreen" : "text-brandRed"}
+          className={isIncluded ? "text-brand-green" : "text-brand-red"}
         />
       </span>
 
diff --git a/apps/website/src/core/data-display/timeline.tsx b/apps/website/src/core/data-display/timeline.tsx
index dec3d393..0bccca51 100644
--- a/apps/website/src/core/data-display/timeline.tsx
+++ b/apps/website/src/core/data-display/timeline.tsx
@@ -34,15 +34,15 @@ export function TimelineItem({
 
       <BottomLine
         className={cn(
-          "absolute left-4 top-10 -z-10 h-full w-6 text-gray-300 group-last:hidden group-even:scale-x-[-1]",
-          "md:left-1/2 md:top-[78px] md:-translate-x-1/2",
+          "absolute top-10 left-4 -z-10 h-full w-6 text-gray-300 group-last:hidden group-even:scale-x-[-1]",
+          "md:top-[78px] md:left-1/2 md:-translate-x-1/2",
         )}
       />
 
       <TopLine
         className={cn(
-          "absolute left-4 top-10 -z-10 hidden h-12 w-6 scale-y-[-1] text-gray-300 group-last:block group-odd:scale-x-[-1]",
-          "md:left-1/2 md:top-[78px] md:h-20 md:-translate-x-1/2",
+          "absolute top-10 left-4 -z-10 hidden h-12 w-6 scale-y-[-1] text-gray-300 group-last:block group-odd:scale-x-[-1]",
+          "md:top-[78px] md:left-1/2 md:h-20 md:-translate-x-1/2",
         )}
       />
 
@@ -54,14 +54,14 @@ export function TimelineItem({
         >
           <Icon
             id={icon}
-            className={cn("text-[24px] text-gray-700", "md:text-[60px]")}
+            className={cn("icon-24 text-gray-700", "md:icon-60")}
           />
         </span>
       </span>
 
       <div className="flex flex-1 flex-col gap-3 md:gap-6">
         <div className={cn("flex flex-col", "md:group-odd:text-right")}>
-          <h3 className="text-title-item">{title}</h3>
+          <h3 className="text-item-title">{title}</h3>
           <p>{children}</p>
         </div>
 
diff --git a/apps/website/src/core/layout/bubble-section.tsx b/apps/website/src/core/layout/bubble-section.tsx
index 26ca084f..25780b13 100644
--- a/apps/website/src/core/layout/bubble-section.tsx
+++ b/apps/website/src/core/layout/bubble-section.tsx
@@ -1,13 +1,13 @@
 import { cn } from "@animeaux/core"
 
 export const bubbleSectionClassNames = {
-  root: () => "relative flex",
+  root: () => cn("relative flex"),
   // Wrap the shape because it looks like SVG can only be sized with width and
   // height. But we don't want the width class to be a complexe arbitrary value
-  // with hard coded size in px: `w-[calc(100%_-_16px)]`.
+  // with hard coded size in px: `w-[calc(100%-16px)]`.
   bubbleContainer: () =>
-    cn("absolute bottom-0 left-2 right-2 top-0 -z-10", "md:left-4 md:right-4"),
-  content: () => "w-full",
+    cn("absolute inset-x-2 inset-y-0 -z-10", "md:inset-x-4"),
+  content: () => cn("w-full"),
 }
 
 export function BubbleShape({
@@ -24,8 +24,8 @@ export function BubbleShape({
       // Allow the shape to stretch.
       preserveAspectRatio="none"
       xmlns="http://www.w3.org/2000/svg"
-      className={cn("h-full w-full overflow-visible", {
-        "stroke-brandYellow": isDouble,
+      className={cn("size-full overflow-visible", {
+        "stroke-brand-yellow": isDouble,
         "stroke-gray-300": !isDouble,
       })}
       style={style}
diff --git a/apps/website/src/core/layout/footer.tsx b/apps/website/src/core/layout/footer.tsx
index d39ba8c0..46966785 100644
--- a/apps/website/src/core/layout/footer.tsx
+++ b/apps/website/src/core/layout/footer.tsx
@@ -12,7 +12,7 @@ export function Footer() {
   return (
     <footer
       className={cn(
-        "flex w-full flex-col items-center gap-24 px-page pb-12 pt-18",
+        "flex w-full flex-col items-center gap-24 px-page pt-18 pb-12",
         "md:pt-12",
       )}
     >
@@ -30,8 +30,8 @@ export function Footer() {
           <div className="flex flex-col gap-6">
             <h2
               className={cn(
-                "text-center text-title-section-small",
-                "md:text-left md:text-title-section-large",
+                "text-center text-section-title-small",
+                "md:text-left md:text-section-title-large",
               )}
             >
               Newsletter
@@ -92,14 +92,14 @@ export function Footer() {
           "md:w-full md:flex-row md:items-center md:justify-between md:gap-12 md:text-left",
         )}
       >
-        <p className="text-caption-default">
+        <p className="text-caption">
           <BaseLink to="/mentions-legales" className="hover:text-gray-800">
             Mentions légales
           </BaseLink>{" "}
           • SIRET : 83962717100037 • RNA : W771014759
         </p>
 
-        <p className="text-caption-default">
+        <p className="text-caption">
           Copyright © {new Date().getFullYear()} Ani’Meaux
         </p>
       </section>
@@ -125,7 +125,7 @@ function ContactItem({
         <span className="flex h-6 items-center">
           <Icon
             id={icon}
-            className="text-[14px] text-gray-500 group-hover:text-gray-800"
+            className="icon-14 text-gray-500 group-hover:text-gray-800"
           />
         </span>
 
diff --git a/apps/website/src/core/layout/header.tsx b/apps/website/src/core/layout/header.tsx
index 54959f5c..009fd1d2 100644
--- a/apps/website/src/core/layout/header.tsx
+++ b/apps/website/src/core/layout/header.tsx
@@ -3,7 +3,7 @@ import { DateTime } from "luxon"
 import { LargeNav } from "#i/core/layout/navigation/large-nav.js"
 import { SmallNav } from "#i/core/layout/navigation/small-nav.js"
 
-const SHOW_CLOSING_TIME = DateTime.fromISO("2024-06-09T18:00:00.000+02:00")
+const SHOW_CLOSING_TIME = DateTime.fromISO("2026-06-07T18:00:00.000+02:00")
 
 export function Header() {
   const hasShowEnded = DateTime.now() >= SHOW_CLOSING_TIME
diff --git a/apps/website/src/core/layout/hero-section.tsx b/apps/website/src/core/layout/hero-section.tsx
index c15cb1a3..66d8bfdf 100644
--- a/apps/website/src/core/layout/hero-section.tsx
+++ b/apps/website/src/core/layout/hero-section.tsx
@@ -65,8 +65,8 @@ export function HeroSectionTitle({
   return (
     <TitleComponent
       className={cn("text-center", "md:text-left", {
-        "text-title-hero-small md:text-title-hero-large": isLarge,
-        "text-title-section-small md:text-title-section-large": !isLarge,
+        "text-hero-title-small md:text-hero-title-large": isLarge,
+        "text-section-title-small md:text-section-title-large": !isLarge,
       })}
     >
       {children}
diff --git a/apps/website/src/core/layout/navigation/large-nav.tsx b/apps/website/src/core/layout/navigation/large-nav.tsx
index d946d945..a59bd6fc 100644
--- a/apps/website/src/core/layout/navigation/large-nav.tsx
+++ b/apps/website/src/core/layout/navigation/large-nav.tsx
@@ -168,9 +168,9 @@ function NavGroupButton({
         {(transitionState) => (
           <LineShapeHorizontal
             className={cn(
-              "absolute bottom-0 left-0 block h-1 w-full text-brandBlue",
+              "absolute bottom-0 left-0 block h-1 w-full text-brand-blue",
               {
-                "transition-[stroke-dashoffset] duration-150 ease-in-out":
+                "transition-[stroke-dashoffset] duration-slow":
                   transitionState === "entering" ||
                   transitionState === "exiting",
               },
@@ -220,9 +220,9 @@ function NavLink({
             {(transitionState) => (
               <LineShapeHorizontal
                 className={cn(
-                  "absolute bottom-0 left-0 block h-1 w-full text-brandBlue",
+                  "absolute bottom-0 left-0 block h-1 w-full text-brand-blue",
                   {
-                    "transition-[stroke-dashoffset] duration-150 ease-in-out":
+                    "transition-[stroke-dashoffset] duration-slow":
                       transitionState === "entering" ||
                       transitionState === "exiting",
                   },
@@ -267,11 +267,9 @@ const Dropdown = forwardRef<
           <div
             ref={ref}
             className={cn(
-              "absolute left-0 top-0 -z-10 flex w-full flex-col items-center overflow-hidden bg-white shadow-base rounded-bubble-b-lg",
+              "absolute top-0 left-0 -z-10 flex w-full flex-col items-center overflow-hidden rounded-bubble-b-lg bg-white shadow-base",
               {
-                // Use `ease-in-out` to make sure animation is symetrical between
-                // entering and exiting to avoid a weird progress missmatch.
-                "transition-[height] duration-100 ease-in-out":
+                "transition-[height]":
                   transitionState === "entering" ||
                   transitionState === "exiting" ||
                   // Keep it the transition when visible child changes.
@@ -283,7 +281,7 @@ const Dropdown = forwardRef<
             <div
               ref={childrenRef}
               role="presentation"
-              className="flex w-[600px] flex-col pb-12 pt-safe-[calc(48px+var(--header-height))]"
+              className="flex w-[600px] flex-col pt-safe-[calc(48px+var(--header-height))] pb-12"
               onKeyDown={handleEscape(onClose)}
             >
               {children}
@@ -298,7 +296,7 @@ const Dropdown = forwardRef<
           aria-hidden
           tabIndex={-1}
           onClick={() => onClose()}
-          className="absolute left-0 top-0 -z-20 h-full w-full cursor-pointer"
+          className="absolute top-0 left-0 -z-20 size-full cursor-pointer"
         />
       )}
     </>
diff --git a/apps/website/src/core/layout/navigation/shared.tsx b/apps/website/src/core/layout/navigation/shared.tsx
index 25d04123..191def33 100644
--- a/apps/website/src/core/layout/navigation/shared.tsx
+++ b/apps/website/src/core/layout/navigation/shared.tsx
@@ -26,19 +26,27 @@ export type SubNavComponent = React.FC & {
 type SubNavItemColor = "blue" | "cyan" | "green" | "red" | "yellow"
 
 const subNavItemBgColorClassName: Record<SubNavItemColor, string> = {
-  blue: "bg-brandBlue-lightest",
-  cyan: "bg-brandCyan-lightest",
-  green: "bg-brandGreen-lightest",
-  red: "bg-brandRed-lightest",
-  yellow: "bg-brandYellow-lightest",
+  blue: cn("bg-transparent hover:bg-brand-blue-lightest"),
+  cyan: cn("bg-transparent hover:bg-brand-cyan-lightest"),
+  green: cn("bg-transparent hover:bg-brand-green-lightest"),
+  red: cn("bg-transparent hover:bg-brand-red-lightest"),
+  yellow: cn("bg-transparent hover:bg-brand-yellow-lightest"),
+}
+
+const subNavItemIconBgColorClassName: Record<SubNavItemColor, string> = {
+  blue: cn("bg-brand-blue-lightest"),
+  cyan: cn("bg-brand-cyan-lightest"),
+  green: cn("bg-brand-green-lightest"),
+  red: cn("bg-brand-red-lightest"),
+  yellow: cn("bg-brand-yellow-lightest"),
 }
 
 const subNavItemTextColorClassName: Record<SubNavItemColor, string> = {
-  blue: "text-brandBlue",
-  cyan: "text-brandCyan",
-  green: "text-brandGreen",
-  red: "text-brandRed",
-  yellow: "text-brandYellow-darker",
+  blue: cn("text-brand-blue"),
+  cyan: cn("text-brand-cyan"),
+  green: cn("text-brand-green"),
+  red: cn("text-brand-red"),
+  yellow: cn("text-brand-yellow-darker"),
 }
 
 export const SubNavItem = forwardRef<
@@ -56,7 +64,7 @@ export const SubNavItem = forwardRef<
       ref={ref}
       to={to}
       className={cn(
-        "group flex items-center bg-opacity-0 px-3 py-2 transition-colors duration-100 ease-in-out rounded-bubble-sm hover:bg-opacity-100",
+        "group flex items-center rounded-bubble-sm px-3 py-2 transition-colors",
         subNavItemBgColorClassName[color],
         {
           "flex-col gap-1": isMultiline,
@@ -66,12 +74,12 @@ export const SubNavItem = forwardRef<
     >
       <span
         className={cn(
-          "flex transition-colors duration-100 ease-in-out rounded-bubble-sm",
+          "flex rounded-bubble-sm transition-colors",
           {
-            "p-3 text-[32px]": isMultiline,
-            "p-2 text-[20px]": !isMultiline,
+            "p-3 icon-32": isMultiline,
+            "p-2 icon-20": !isMultiline,
           },
-          subNavItemBgColorClassName[color],
+          subNavItemIconBgColorClassName[color],
           subNavItemTextColorClassName[color],
         )}
       >
@@ -84,7 +92,7 @@ export const SubNavItem = forwardRef<
         <Icon
           id="arrow-right"
           className={cn(
-            "text-[20px] opacity-0 transition-opacity duration-100 ease-in-out group-hover:opacity-100",
+            "icon-20 opacity-0 transition-opacity group-hover:opacity-100",
             subNavItemTextColorClassName[color],
           )}
         />
diff --git a/apps/website/src/core/layout/navigation/show-banner.tsx b/apps/website/src/core/layout/navigation/show-banner.tsx
index c13b4edd..5bbfb27e 100644
--- a/apps/website/src/core/layout/navigation/show-banner.tsx
+++ b/apps/website/src/core/layout/navigation/show-banner.tsx
@@ -9,7 +9,7 @@ export function ShowBanner({ className }: { className?: string }) {
       to={CLIENT_ENV.SHOW_URL}
       className={cn(
         className,
-        "flex items-center gap-3 bg-show-mystic px-page pb-2 text-show-alabaster pt-safe-2 text-show-body-lowercase-emphasis md:gap-6",
+        "flex items-center gap-3 bg-show-mystic px-page pt-safe-2 pb-2 text-show-body-emphasis text-show-alabaster md:gap-6",
       )}
     >
       <ShowLogo />
@@ -18,13 +18,13 @@ export function ShowBanner({ className }: { className?: string }) {
         Salon des Ani’Meaux
         <span className="hidden md:inline">
           {" "}
-          - 8 et 9 juin 2024 - Colisée de Meaux
+          - 6 et 7 juin 2026 - Colisée de Meaux
         </span>
       </p>
 
       <p className="flex items-center gap-3 p-2">
         <span className="hidden md:inline">En savoir plus</span>
-        <Icon id="arrow-right" className="text-[20px]" />
+        <Icon id="arrow-right" className="icon-20" />
       </p>
     </BaseLink>
   )
diff --git a/apps/website/src/core/layout/navigation/small-nav.tsx b/apps/website/src/core/layout/navigation/small-nav.tsx
index d83f81e5..d1decf57 100644
--- a/apps/website/src/core/layout/navigation/small-nav.tsx
+++ b/apps/website/src/core/layout/navigation/small-nav.tsx
@@ -91,10 +91,7 @@ export function SmallNav({
             )
           }
         >
-          <Icon
-            id={state.isOpened ? "x-mark" : "bars"}
-            className="text-[20px]"
-          />
+          <Icon id={state.isOpened ? "x-mark" : "bars"} className="icon-20" />
         </button>
 
         <Transition
@@ -107,16 +104,16 @@ export function SmallNav({
             return (
               <div
                 className={cn(
-                  "absolute left-0 top-0 h-screen w-full bg-white",
+                  "absolute top-0 left-0 h-screen w-full bg-white",
                   // We need to handle safe areas because this element has
                   // absolute positioning.
-                  "pb-safe-2 pt-safe-[calc(8px+var(--header-height))] px-safe-page",
+                  "pt-safe-[calc(8px+var(--header-height))] px-safe-page pb-safe-2",
                   "flex",
                   {
-                    "translate-y-0 opacity-100 transition-[opacity,transform] duration-100 ease-out":
+                    "translate-y-0 opacity-100 transition-[opacity,translate] ease-out":
                       transitionState === "entering",
                     "translate-y-0 opacity-100": transitionState === "entered",
-                    "-translate-y-4 opacity-0 transition-[opacity,transform] duration-100 ease-in":
+                    "-translate-y-4 opacity-0 transition-[opacity,translate] ease-in":
                       transitionState === "exiting",
                     "-translate-y-4 opacity-0": transitionState === "exited",
                   },
@@ -124,7 +121,7 @@ export function SmallNav({
               >
                 <nav
                   ref={navRef}
-                  className="flex h-full min-h-0 w-full flex-col overflow-auto"
+                  className="flex size-full min-h-0 flex-col overflow-auto"
                 >
                   <NavGroupButton
                     isActive={state.openedGroup === "adopt"}
@@ -196,10 +193,10 @@ export function SmallNav({
           {(transitionState) => (
             <SocialLinks
               className={cn("absolute bottom-3 left-1/2 z-10", {
-                "-translate-x-1/2 opacity-100 transition-[opacity,transform] duration-100 ease-out":
+                "-translate-x-1/2 opacity-100 transition-[opacity,translate] ease-out":
                   transitionState === "entering",
                 "-translate-x-1/2 opacity-100": transitionState === "entered",
-                "translate-x-0 opacity-0 transition-[opacity,transform] duration-100 ease-in":
+                "translate-x-0 opacity-0 transition-[opacity,translate] ease-in":
                   transitionState === "exiting",
                 "translate-x-0 opacity-0": transitionState === "exited",
               })}
@@ -281,16 +278,14 @@ function SubNav({
           <div
             ref={containerRef}
             className={cn("flex flex-none flex-col overflow-hidden", {
-              // Use `ease-in-out` to make sure animation is symetrical between
-              // entering and exiting to avoid a weird progress missmatch.
-              "transition-[height] duration-100 ease-in-out":
+              "transition-[height]":
                 transitionState === "entering" || transitionState === "exiting",
             })}
             style={{ height: containerHeight }}
           >
             <div
               ref={childrenRef}
-              className="flex flex-col bg-gray-50 px-2 py-3 rounded-bubble-md"
+              className="flex flex-col rounded-bubble-md bg-gray-50 px-2 py-3"
             >
               {children}
             </div>
diff --git a/apps/website/src/core/layout/navigation/social-links.tsx b/apps/website/src/core/layout/navigation/social-links.tsx
index dca7f988..71222416 100644
--- a/apps/website/src/core/layout/navigation/social-links.tsx
+++ b/apps/website/src/core/layout/navigation/social-links.tsx
@@ -12,28 +12,28 @@ export function SocialLinks({ className }: { className?: string }) {
         to={CLIENT_ENV.FACEBOOK_URL}
         icon="facebook"
         title="Page Facebook"
-        className="hover:bg-facebook hover:text-facebook"
+        className="hover:bg-social-facebook/10 hover:text-social-facebook"
       />
 
       <SocialLink
         to={CLIENT_ENV.INSTAGRAM_URL}
         icon="instagram"
         title="Compte Instagram"
-        className="hover:bg-instagram hover:text-instagram"
+        className="hover:bg-social-instagram/10 hover:text-social-instagram"
       />
 
       <SocialLink
         to={CLIENT_ENV.LINKEDIN_URL}
         icon="linkedin"
         title="Page LinkedIn"
-        className="hover:bg-linkedin hover:text-linkedin"
+        className="hover:bg-social-linkedin/10 hover:text-social-linkedin"
       />
 
       <SocialLink
         to={CLIENT_ENV.TWITTER_URL}
         icon="twitter"
         title="Compte Twitter"
-        className="hover:bg-twitter hover:text-twitter"
+        className="hover:bg-social-twitter/10 hover:text-social-twitter"
       />
     </div>
   )
@@ -56,7 +56,7 @@ function SocialLink({
       title={title}
       className={cn(
         className,
-        "flex items-center bg-opacity-0 p-2 text-gray-700 transition-colors duration-100 ease-in-out rounded-bubble-sm hover:bg-opacity-10",
+        "flex items-center rounded-bubble-sm bg-transparent p-2 text-gray-700 transition-colors",
       )}
     >
       <Icon id={icon} />
diff --git a/apps/website/src/core/layout/related-section.tsx b/apps/website/src/core/layout/related-section.tsx
index e48c6b2b..30879902 100644
--- a/apps/website/src/core/layout/related-section.tsx
+++ b/apps/website/src/core/layout/related-section.tsx
@@ -28,8 +28,8 @@ export function RelatedSectionTitle({
   return (
     <h2
       className={cn(
-        "text-center text-title-section-small",
-        "md:text-left md:text-title-section-large",
+        "text-center text-section-title-small",
+        "md:text-left md:text-section-title-large",
       )}
     >
       {children}
diff --git a/apps/website/src/donation/section.tsx b/apps/website/src/donation/section.tsx
index fedf84be..0973e1cb 100644
--- a/apps/website/src/donation/section.tsx
+++ b/apps/website/src/donation/section.tsx
@@ -24,8 +24,8 @@ export function DonationSection() {
         <div className="flex w-full flex-col gap-6 text-center">
           <h2
             className={cn(
-              "text-title-section-small",
-              "md:text-title-section-large",
+              "text-section-title-small",
+              "md:text-section-title-large",
             )}
           >
             Faîtes un don !
diff --git a/apps/website/src/events/item.tsx b/apps/website/src/events/item.tsx
index ceaaaf7c..49d6ca8f 100644
--- a/apps/website/src/events/item.tsx
+++ b/apps/website/src/events/item.tsx
@@ -55,10 +55,9 @@ export function EventItem({
 
         <div className="flex flex-1 flex-col">
           <p
-            className={cn(
-              "transition-colors duration-100 ease-in-out text-title-item",
-              { "group-hover:text-brandBlue": !isDisabled },
-            )}
+            className={cn("text-item-title transition-colors", {
+              "group-hover:text-brand-blue": !isDisabled,
+            })}
           >
             {event.title}
           </p>
@@ -78,10 +77,9 @@ export function EventItem({
           <Icon
             id="arrow-right"
             className={cn(
-              "hidden self-center text-[32px] text-gray-500",
+              "hidden self-center icon-32 text-gray-500",
               {
-                "transition-transform duration-100 ease-in-out group-hover:scale-110":
-                  !isDisabled,
+                "transition-transform group-hover:scale-110": !isDisabled,
               },
               "sm:block",
             )}
@@ -102,7 +100,7 @@ function DetailsItem({
   return (
     <li className="flex items-start gap-2 text-gray-500">
       <span className="flex h-6 flex-none items-center">
-        <Icon id={icon} className="text-[14px]" />
+        <Icon id={icon} className="icon-14" />
       </span>
 
       <span className="flex-1">{children}</span>
diff --git a/apps/website/src/root.tsx b/apps/website/src/root.tsx
index c98c83c5..dc744f14 100644
--- a/apps/website/src/root.tsx
+++ b/apps/website/src/root.tsx
@@ -1,4 +1,4 @@
-import "#i/tailwind.css"
+import "#i/styles/main.css"
 
 import { cn } from "@animeaux/core"
 import type { LinksFunction, MetaFunction } from "@remix-run/node"
@@ -19,7 +19,7 @@ import { Footer } from "#i/core/layout/footer.js"
 import { Header } from "#i/core/layout/header.js"
 import { createSocialMeta } from "#i/core/meta.js"
 import { getPageTitle, pageDescription } from "#i/core/page-title.js"
-import { theme } from "#i/generated/theme.js"
+import { Color } from "#i/generated/theme.js"
 import appleTouchIcon from "#i/images/apple-touch-icon.png"
 import favicon from "#i/images/favicon.svg"
 import { socialImages } from "#i/images/social.js"
@@ -61,7 +61,7 @@ export const links: LinksFunction = () => {
     },
     {
       rel: "stylesheet",
-      href: "https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600&display=swap",
+      href: "https://fonts.googleapis.com/css2?family=Fira+Sans:wght@500&display=swap",
     },
   ]
 }
@@ -130,10 +130,10 @@ function Document({
   }
 
   return (
-    <html lang="fr" className="bg-gray-50">
+    <html lang="fr" className="bg-background">
       <head>
         <meta charSet="utf-8" />
-        <meta name="theme-color" content={theme.colors.gray[50]} />
+        <meta name="theme-color" content={Color.backgroundHex} />
 
         {/* Use `maximum-scale=1` to prevent browsers to zoom on form elements. */}
         <meta
@@ -165,8 +165,8 @@ function Document({
           "relative",
           "min-h-screen",
           // Safe top padding is handled by the header.
-          "pb-safe-0 px-safe-0",
-          "flex flex-col items-center gap-6 text-gray-800 text-body-default",
+          "px-safe-0 pb-safe-0",
+          "flex flex-col items-center gap-6 text-body text-gray-800",
           "md:gap-12",
         )}
       >
diff --git a/apps/website/src/routes/[manifest.json].tsx b/apps/website/src/routes/[manifest.json].tsx
index 9ba7d908..88ff985c 100644
--- a/apps/website/src/routes/[manifest.json].tsx
+++ b/apps/website/src/routes/[manifest.json].tsx
@@ -2,7 +2,7 @@ import type { LinksFunction } from "@remix-run/node"
 import { json } from "@remix-run/node"
 
 import { getPageTitle } from "#i/core/page-title.js"
-import { theme } from "#i/generated/theme.js"
+import { Color } from "#i/generated/theme.js"
 import googleTouchIcon from "#i/images/google-touch-icon.png"
 
 // Make sure `google-touch-icon.png` is added to the build assets.
@@ -16,8 +16,8 @@ export async function loader() {
   return json({
     name: getPageTitle(),
     short_name: getPageTitle(),
-    background_color: theme.colors.gray[50],
-    theme_color: theme.colors.brandBlue.DEFAULT,
+    background_color: Color.backgroundHex,
+    theme_color: Color.primaryHex,
     display: "standalone",
     scope: "/",
     start_url: "/?source=pwa",
diff --git a/apps/website/src/routes/_index.tsx b/apps/website/src/routes/_index.tsx
index f397efd8..849357f2 100644
--- a/apps/website/src/routes/_index.tsx
+++ b/apps/website/src/routes/_index.tsx
@@ -152,8 +152,8 @@ function WhoWeAreSection() {
       <div className={cn("flex flex-col gap-6 text-center", "md:px-30")}>
         <h2
           className={cn(
-            "text-title-section-small",
-            "md:text-title-section-large",
+            "text-section-title-small",
+            "md:text-section-title-large",
           )}
         >
           Qui sommes-nous ?
@@ -264,14 +264,14 @@ function NumberItem({
 }) {
   return (
     <li className="flex flex-col items-center gap-4 text-center">
-      <Icon id={icon} className="text-[60px] text-gray-700" />
+      <Icon id={icon} className="icon-60 text-gray-700" />
 
       <div className="flex w-full flex-col">
         <h3
-          className={cn("font-serif text-[32px] font-bold leading-normal", {
-            "text-brandGreen": color === "green",
-            "text-brandYellow-darker": color === "yellow",
-            "text-brandRed": color === "red",
+          className={cn("font-serif icon-32 leading-normal font-bold", {
+            "text-brand-green": color === "green",
+            "text-brand-yellow-darker": color === "yellow",
+            "text-brand-red": color === "red",
           })}
         >
           {value}
@@ -293,8 +293,8 @@ function UpcomingEventsSection() {
     <section className="flex flex-col items-center gap-12">
       <h2
         className={cn(
-          "w-full text-center text-title-section-small",
-          "md:px-30 md:text-title-section-large",
+          "w-full text-center text-section-title-small",
+          "md:px-30 md:text-section-title-large",
         )}
       >
         Événements à venir
diff --git a/apps/website/src/routes/abandonner-votre-animal.tsx b/apps/website/src/routes/abandonner-votre-animal.tsx
index 00d22da8..b01a0605 100644
--- a/apps/website/src/routes/abandonner-votre-animal.tsx
+++ b/apps/website/src/routes/abandonner-votre-animal.tsx
@@ -37,7 +37,7 @@ export default function Route() {
       <main className="flex w-full flex-col gap-12 px-article">
         <header className="flex flex-col">
           <h1
-            className={cn("text-title-hero-small", "md:text-title-hero-large")}
+            className={cn("text-hero-title-small", "md:text-hero-title-large")}
           >
             Abandonner votre animal
           </h1>
diff --git a/apps/website/src/routes/adoption.$.tsx b/apps/website/src/routes/adoption.$.tsx
index 43a55faf..8e17e8d2 100644
--- a/apps/website/src/routes/adoption.$.tsx
+++ b/apps/website/src/routes/adoption.$.tsx
@@ -189,8 +189,8 @@ export default function Route() {
       >
         <h1
           className={cn(
-            "text-center text-title-hero-small",
-            "md:flex-1 md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small",
+            "md:flex-1 md:text-left md:text-hero-title-large",
           )}
         >
           À adopter
diff --git a/apps/website/src/routes/animal.$slug.tsx b/apps/website/src/routes/animal.$slug.tsx
index 98f7d829..9d39ad3c 100644
--- a/apps/website/src/routes/animal.$slug.tsx
+++ b/apps/website/src/routes/animal.$slug.tsx
@@ -109,13 +109,13 @@ export default function Route() {
       <header
         className={cn(
           "flex flex-col",
-          "md:grid md:grid-cols-[1fr,auto] md:items-center md:gap-6",
+          "md:grid md:grid-cols-fr-auto md:items-center md:gap-6",
         )}
       >
         <h1
           className={cn(
-            "break-words text-center text-title-hero-small",
-            "md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small wrap-break-word",
+            "md:text-left md:text-hero-title-large",
           )}
         >
           {animal.name}
@@ -196,7 +196,7 @@ function ImageSection({ className }: { className: string }) {
           )
         }}
         className={cn(
-          "flex min-w-0 snap-x snap-mandatory overflow-auto scroll-smooth rounded-bubble-md scrollbars-none",
+          "scrollbars-none flex min-w-0 snap-x snap-mandatory overflow-auto scroll-smooth rounded-bubble-md",
           "sm:rounded-bubble-lg",
           "lg:rounded-bubble-xl",
         )}
@@ -209,7 +209,7 @@ function ImageSection({ className }: { className: string }) {
             sizes={{ lg: "512px", md: "50vw", default: "100vw" }}
             fallbackSize="2048"
             loading="eager"
-            className="aspect-4/3 h-full min-h-0 w-full min-w-0 flex-none snap-center"
+            className="aspect-4/3 size-full min-h-0 min-w-0 flex-none snap-center"
           />
         ))}
       </div>
@@ -237,7 +237,7 @@ function ImageSection({ className }: { className: string }) {
               fallbackSize="512"
               loading="eager"
               className={cn(
-                "aspect-4/3 w-16 transition-opacity duration-100 ease-in-out rounded-bubble-sm",
+                "aspect-4/3 w-16 rounded-bubble-sm transition-opacity",
                 {
                   "opacity-50": visibleIndex !== index,
                   "opacity-100": visibleIndex === index,
@@ -335,12 +335,12 @@ function Item({
     <li className="flex items-start gap-2">
       <Icon
         id={icon}
-        className={cn("flex-none text-[24px]", {
+        className={cn("flex-none icon-24", {
           "text-gray-700": color === "default",
           "text-pink-500": color === "pink",
-          "text-brandBlue": color === "blue",
-          "text-brandRed": color === "red",
-          "text-brandGreen": color === "green",
+          "text-brand-blue": color === "blue",
+          "text-brand-red": color === "red",
+          "text-brand-green": color === "green",
         })}
       />
       <span className="flex-1">{children}</span>
@@ -355,8 +355,8 @@ function AggrementsSection({ className }: { className: string }) {
     <div className={cn(className, "flex flex-col gap-6")}>
       <h2
         className={cn(
-          "text-title-section-small",
-          "md:text-title-section-large",
+          "text-section-title-small",
+          "md:text-section-title-large",
         )}
       >
         Ses ententes
@@ -400,16 +400,16 @@ function Agreement({
   return (
     <li
       className={cn(
-        "flex flex-1 flex-col items-center justify-center gap-2 p-3 rounded-bubble-sm",
+        "flex flex-1 flex-col items-center justify-center gap-2 rounded-bubble-sm p-3",
         {
           "bg-gray-100 text-gray-700": value == null,
-          "bg-brandGreen-lightest text-brandGreen": value === true,
-          "bg-brandRed-lightest text-brandRed": value === false,
+          "bg-brand-green-lightest text-brand-green": value === true,
+          "bg-brand-red-lightest text-brand-red": value === false,
         },
       )}
     >
-      <Icon id={icon} className="text-[32px]" />
-      <span className="font-sans text-[14px] font-semibold leading-none">
+      <Icon id={icon} className="icon-32" />
+      <span className="font-sans icon-14 leading-none font-semibold">
         {value == null ? "Inconnu" : value ? "Oui" : "Non"}
       </span>
     </li>
@@ -424,7 +424,7 @@ const DESCRIPTION_COMPONENTS: MarkdownProps["components"] = {
   ),
   em: ({ children }) => <em>{children}</em>,
   code: ({ children }) => (
-    <code className="inline-flex rounded-sm bg-gray-100 px-1 text-code-default">
+    <code className="inline-flex rounded-xs bg-gray-100 px-1 text-code">
       {children}
     </code>
   ),
@@ -455,8 +455,8 @@ function DescriptionSection({ className }: { className: string }) {
     <section className={cn(className, "flex flex-col gap-6")}>
       <h2
         className={cn(
-          "text-title-section-small",
-          "md:text-title-section-large",
+          "text-section-title-small",
+          "md:text-section-title-large",
         )}
       >
         Son histoire
diff --git a/apps/website/src/routes/articles-de-presse.tsx b/apps/website/src/routes/articles-de-presse.tsx
index 7dee26f1..83dc003b 100644
--- a/apps/website/src/routes/articles-de-presse.tsx
+++ b/apps/website/src/routes/articles-de-presse.tsx
@@ -39,8 +39,8 @@ export default function Route() {
       <header className="flex">
         <h1
           className={cn(
-            "text-center text-title-hero-small",
-            "md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small",
+            "md:text-left md:text-hero-title-large",
           )}
         >
           Articles de presse
@@ -105,12 +105,12 @@ function PressArticleItem({
             alt={pressArticle.title}
             src={pressArticle.image}
             loading="lazy"
-            className="aspect-4/3 w-full flex-none bg-gray-100 object-cover rounded-bubble-md"
+            className="aspect-4/3 w-full flex-none rounded-bubble-md bg-gray-100 object-cover"
           />
         )}
 
         <div className="flex flex-col">
-          <p className="text-gray-500 text-caption-default">
+          <p className="text-caption text-gray-500">
             {DateTime.fromISO(pressArticle.publicationDate).toLocaleString(
               DateTime.DATE_MED,
             )}
@@ -118,7 +118,7 @@ function PressArticleItem({
             {pressArticle.publisherName}
           </p>
 
-          <p className="transition-colors duration-100 ease-in-out text-title-item group-hover:text-brandBlue">
+          <p className="text-item-title transition-colors group-hover:text-brand-blue">
             {pressArticle.title}
           </p>
         </div>
diff --git a/apps/website/src/routes/blog.$slug.tsx b/apps/website/src/routes/blog.$slug.tsx
index bca25ae6..ecdce8b3 100644
--- a/apps/website/src/routes/blog.$slug.tsx
+++ b/apps/website/src/routes/blog.$slug.tsx
@@ -82,7 +82,7 @@ export default function Route() {
       <main className="flex w-full flex-col gap-12 px-article">
         <header className="flex flex-col gap-6">
           <h1
-            className={cn("text-title-hero-small", "md:text-title-hero-large")}
+            className={cn("text-hero-title-small", "md:text-hero-title-large")}
           >
             {article.title}
           </h1>
diff --git a/apps/website/src/routes/blog._index.tsx b/apps/website/src/routes/blog._index.tsx
index a170d1a9..4e5038e7 100644
--- a/apps/website/src/routes/blog._index.tsx
+++ b/apps/website/src/routes/blog._index.tsx
@@ -24,8 +24,8 @@ export default function Route() {
       <header className="flex">
         <h1
           className={cn(
-            "text-center text-title-hero-small",
-            "md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small",
+            "md:text-left md:text-hero-title-large",
           )}
         >
           Blog
diff --git a/apps/website/src/routes/conditions-d-adoption.tsx b/apps/website/src/routes/conditions-d-adoption.tsx
index c034dcda..a669eb09 100644
--- a/apps/website/src/routes/conditions-d-adoption.tsx
+++ b/apps/website/src/routes/conditions-d-adoption.tsx
@@ -95,8 +95,8 @@ function StepsSection() {
     <section className="flex flex-col gap-12">
       <h2
         className={cn(
-          "text-center text-title-section-small",
-          "md:text-title-section-large",
+          "text-center text-section-title-small",
+          "md:text-section-title-large",
         )}
       >
         Les étapes
@@ -177,8 +177,8 @@ function CostsSection() {
     <section className="flex flex-col gap-12">
       <h2
         className={cn(
-          "text-center text-title-section-small",
-          "md:text-title-section-large",
+          "text-center text-section-title-small",
+          "md:text-section-title-large",
         )}
       >
         Frais d’adoption
diff --git a/apps/website/src/routes/conventions-de-sterilisation.tsx b/apps/website/src/routes/conventions-de-sterilisation.tsx
index dcd63202..d0f9df8c 100644
--- a/apps/website/src/routes/conventions-de-sterilisation.tsx
+++ b/apps/website/src/routes/conventions-de-sterilisation.tsx
@@ -77,7 +77,7 @@ function AlertSection() {
           "md:px-30 md:py-[60px]",
         )}
       >
-        <h2 className="text-center text-title-section-small md:text-title-section-large">
+        <h2 className="text-center text-section-title-small md:text-section-title-large">
           Signalements
         </h2>
 
@@ -111,12 +111,12 @@ function LawSection() {
           "md:px-30 md:py-[60px]",
         )}
       >
-        <h2 className="text-center text-title-section-small md:text-title-section-large">
+        <h2 className="text-center text-section-title-small md:text-section-title-large">
           Législation
         </h2>
 
         <div className="flex flex-col">
-          <h3 className="text-center text-title-item">
+          <h3 className="text-center text-item-title">
             Article L211-27 du Code Rural et de la Pêche Maritime
           </h3>
 
@@ -139,7 +139,7 @@ function LawSection() {
 function ErrandsSection() {
   return (
     <section className="flex flex-col gap-6 md:gap-12">
-      <h2 className="text-center text-title-section-small md:text-title-section-large">
+      <h2 className="text-center text-section-title-small md:text-section-title-large">
         Gestion des chats errants
       </h2>
 
@@ -197,7 +197,7 @@ function CitiesSection() {
   return (
     <section className="flex flex-col gap-12">
       <div className="flex flex-col gap-6">
-        <h2 className="text-center text-title-section-small md:text-title-section-large">
+        <h2 className="text-center text-section-title-small md:text-section-title-large">
           Communes
         </h2>
 
@@ -228,10 +228,10 @@ function CitiesSection() {
                 }}
                 fallbackSize="512"
                 background="none"
-                className="aspect-4/3 w-full flex-none border border-gray-200 rounded-bubble-md"
+                className="aspect-4/3 w-full flex-none rounded-bubble-md border border-gray-200"
               />
 
-              <p className="text-center text-gray-500 text-title-item">
+              <p className="text-center text-item-title text-gray-500">
                 {city.name}
               </p>
             </li>
diff --git a/apps/website/src/routes/devenir-benevole.tsx b/apps/website/src/routes/devenir-benevole.tsx
index dc38378b..650f3a68 100644
--- a/apps/website/src/routes/devenir-benevole.tsx
+++ b/apps/website/src/routes/devenir-benevole.tsx
@@ -69,8 +69,8 @@ function OptionsSection() {
     <section className="flex flex-col gap-12">
       <h2
         className={cn(
-          "text-center text-title-section-small",
-          "md:text-title-section-large",
+          "text-center text-section-title-small",
+          "md:text-section-title-large",
         )}
       >
         Options
@@ -120,8 +120,8 @@ function VolunteerSection() {
     <section className="flex flex-col gap-12">
       <h2
         className={cn(
-          "text-center text-title-section-small",
-          "md:text-title-section-large",
+          "text-center text-section-title-small",
+          "md:text-section-title-large",
         )}
       >
         Missions des bénévoles
@@ -209,7 +209,7 @@ function MissionItem({
         sizes={{ default: "128px" }}
         className="aspect-square w-32"
       />
-      <h3 className="text-title-item">{title}</h3>
+      <h3 className="text-item-title">{title}</h3>
       <p>{children}</p>
     </li>
   )
diff --git a/apps/website/src/routes/devenir-famille-d-accueil.tsx b/apps/website/src/routes/devenir-famille-d-accueil.tsx
index da1f270b..2f1f5f25 100644
--- a/apps/website/src/routes/devenir-famille-d-accueil.tsx
+++ b/apps/website/src/routes/devenir-famille-d-accueil.tsx
@@ -49,8 +49,8 @@ export default function Route() {
       <section className="flex flex-col gap-12">
         <h2
           className={cn(
-            "text-center text-title-section-small",
-            "md:text-title-section-large",
+            "text-center text-section-title-small",
+            "md:text-section-title-large",
           )}
         >
           En 3 étapes
diff --git a/apps/website/src/routes/evenements._index.tsx b/apps/website/src/routes/evenements._index.tsx
index bb4c5657..688c5f25 100644
--- a/apps/website/src/routes/evenements._index.tsx
+++ b/apps/website/src/routes/evenements._index.tsx
@@ -67,8 +67,8 @@ export default function Route() {
         <header className="flex flex-col">
           <h1
             className={cn(
-              "text-center text-title-hero-small",
-              "md:flex-1 md:text-left md:text-title-hero-large",
+              "text-center text-hero-title-small",
+              "md:flex-1 md:text-left md:text-hero-title-large",
             )}
           >
             Événements à venir
diff --git a/apps/website/src/routes/evenements.passes.tsx b/apps/website/src/routes/evenements.passes.tsx
index a05dc828..b148494d 100644
--- a/apps/website/src/routes/evenements.passes.tsx
+++ b/apps/website/src/routes/evenements.passes.tsx
@@ -69,8 +69,8 @@ export default function Route() {
       >
         <h1
           className={cn(
-            "text-center text-title-hero-small",
-            "md:flex-1 md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small",
+            "md:flex-1 md:text-left md:text-hero-title-large",
           )}
         >
           Événements passés
diff --git a/apps/website/src/routes/faire-un-don.tsx b/apps/website/src/routes/faire-un-don.tsx
index bed915c5..6605b8bd 100644
--- a/apps/website/src/routes/faire-un-don.tsx
+++ b/apps/website/src/routes/faire-un-don.tsx
@@ -89,8 +89,8 @@ function OtherOptionsSection() {
     <section className="flex flex-col gap-12">
       <h2
         className={cn(
-          "text-center text-title-section-small",
-          "md:text-title-section-large",
+          "text-center text-section-title-small",
+          "md:text-section-title-large",
         )}
       >
         Autres options
@@ -150,7 +150,7 @@ function OtherOption({
   return (
     <li className="flex w-[200px] flex-none flex-col gap-6 text-center">
       {typeof image === "string" ? (
-        <span className="flex aspect-video w-[200px] items-center justify-center text-[80px] text-gray-700">
+        <span className="flex aspect-video w-[200px] items-center justify-center icon-80 text-gray-700">
           <Icon id={image} />
         </span>
       ) : (
@@ -183,8 +183,8 @@ function TaxationSection() {
       >
         <h2
           className={cn(
-            "text-title-section-small",
-            "md:text-title-section-large",
+            "text-section-title-small",
+            "md:text-section-title-large",
           )}
         >
           Déduction fiscale
@@ -201,12 +201,12 @@ function TaxationSection() {
           className={cn("flex flex-col gap-6", "md:flex-row md:items-start")}
         >
           <div className="flex flex-1 flex-col">
-            <h3 className="text-title-item">En passant par Helloasso</h3>
+            <h3 className="text-item-title">En passant par Helloasso</h3>
             <p>Vous recevrez automatiquement votre reçu fiscal par mail.</p>
           </div>
 
           <div className="flex flex-1 flex-col">
-            <h3 className="text-title-item">
+            <h3 className="text-item-title">
               En passant par les autres options
             </h3>
             <p>
diff --git a/apps/website/src/routes/faq.tsx b/apps/website/src/routes/faq.tsx
index 0d38f2e4..98a2e846 100644
--- a/apps/website/src/routes/faq.tsx
+++ b/apps/website/src/routes/faq.tsx
@@ -53,14 +53,14 @@ export default function Route() {
             <li key={faq.question} className="flex flex-col items-start gap-6">
               <span
                 className={cn(
-                  "flex items-center justify-center p-3 text-[40px] rounded-bubble-sm",
+                  "flex items-center justify-center rounded-bubble-sm p-3 icon-40",
                   ICON_COLOR_CLASS_NAME[faq.color],
                 )}
               >
                 <Icon id={faq.icon} />
               </span>
 
-              <h2 className="text-title-item">{faq.question}</h2>
+              <h2 className="text-item-title">{faq.question}</h2>
               <p>{faq.answer}</p>
             </li>
           ))}
@@ -78,11 +78,11 @@ type Faq = {
 }
 
 const ICON_COLOR_CLASS_NAME: Record<Faq["color"], string> = {
-  blue: "bg-brandBlue-lightest text-brandBlue",
-  cyan: "bg-brandCyan-lightest text-brandCyan",
-  green: "bg-brandGreen-lightest text-brandGreen",
-  red: "bg-brandRed-lightest text-brandRed",
-  yellow: "bg-brandYellow-lightest text-brandYellow-darker",
+  blue: cn("bg-brand-blue-lightest text-brand-blue"),
+  cyan: cn("bg-brand-cyan-lightest text-brand-cyan"),
+  green: cn("bg-brand-green-lightest text-brand-green"),
+  red: cn("bg-brand-red-lightest text-brand-red"),
+  yellow: cn("bg-brand-yellow-lightest text-brand-yellow-darker"),
 }
 
 const FAQ: Faq[] = [
diff --git a/apps/website/src/routes/informer-d-un-acte-de-maltraitance.tsx b/apps/website/src/routes/informer-d-un-acte-de-maltraitance.tsx
index 1f177a43..7a3b0f06 100644
--- a/apps/website/src/routes/informer-d-un-acte-de-maltraitance.tsx
+++ b/apps/website/src/routes/informer-d-un-acte-de-maltraitance.tsx
@@ -37,7 +37,7 @@ export default function Route() {
       <main className="flex w-full flex-col gap-12 px-article">
         <header className="flex flex-col">
           <h1
-            className={cn("text-title-hero-small", "md:text-title-hero-large")}
+            className={cn("text-hero-title-small", "md:text-hero-title-large")}
           >
             Informer d’un acte de maltraitance
           </h1>
diff --git a/apps/website/src/routes/mentions-legales.tsx b/apps/website/src/routes/mentions-legales.tsx
index 3a16700d..eae0d587 100644
--- a/apps/website/src/routes/mentions-legales.tsx
+++ b/apps/website/src/routes/mentions-legales.tsx
@@ -13,7 +13,7 @@ export default function Route() {
   return (
     <main className="flex w-full flex-col gap-12 px-article">
       <header className="flex flex-col gap-6">
-        <h1 className={cn("text-title-hero-small", "md:text-title-hero-large")}>
+        <h1 className={cn("text-hero-title-small", "md:text-hero-title-large")}>
           Mentions légales
         </h1>
 
diff --git a/apps/website/src/routes/nommez-votre-animal.tsx b/apps/website/src/routes/nommez-votre-animal.tsx
index d46844a6..49f9aaed 100644
--- a/apps/website/src/routes/nommez-votre-animal.tsx
+++ b/apps/website/src/routes/nommez-votre-animal.tsx
@@ -75,8 +75,8 @@ export default function Route() {
       <header className="flex flex-col gap-6">
         <h1
           className={cn(
-            "text-center text-title-hero-small",
-            "md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small",
+            "md:text-left md:text-hero-title-large",
           )}
         >
           Nommez votre animal
@@ -96,7 +96,7 @@ export default function Route() {
       >
         <section
           className={cn(
-            "flex bg-white p-6 shadow-base rounded-bubble-lg",
+            "flex rounded-bubble-lg bg-white p-6 shadow-base",
             "md:max-w-xs md:flex-1",
           )}
         >
@@ -106,7 +106,7 @@ export default function Route() {
             preventScrollReset
             className="flex w-full flex-col gap-6"
           >
-            <h2 className="text-title-item">Critères</h2>
+            <h2 className="text-item-title">Critères</h2>
 
             <div className="flex flex-col gap-3">
               <div className={formClassNames.field()}>
@@ -180,7 +180,7 @@ export default function Route() {
             <>
               <ul
                 className={cn(
-                  "grid w-full grid-cols-1 grid-rows-[auto] items-start gap-6",
+                  "grid w-full grid-cols-1 grid-rows-auto items-start gap-6",
                   "xs:grid-cols-2",
                   "sm:grid-cols-3",
                   "md:grid-cols-2 md:gap-y-12",
@@ -192,7 +192,7 @@ export default function Route() {
                     key={name.label}
                     className="flex items-center justify-center gap-1"
                   >
-                    <span className="flex items-center text-[20px]">
+                    <span className="flex items-center icon-20">
                       <Icon
                         id="venus"
                         className={cn("text-pink-500", {
@@ -202,13 +202,13 @@ export default function Route() {
 
                       <Icon
                         id="mars"
-                        className={cn("text-brandBlue", {
+                        className={cn("text-brand-blue", {
                           hidden: name.gender === Gender.FEMALE,
                         })}
                       />
                     </span>
 
-                    <span className="text-title-item">{name.label}</span>
+                    <span className="text-item-title">{name.label}</span>
                   </li>
                 ))}
               </ul>
@@ -233,11 +233,13 @@ export default function Route() {
 }
 
 const formClassNames = {
-  field: () => "flex flex-col",
-  label: () => "text-caption-default text-gray-500",
-  checkboxLabel: () => "flex items-center gap-2 cursor-pointer",
+  field: () => cn("flex flex-col"),
+  label: () => cn("text-caption text-gray-500"),
+  checkboxLabel: () => cn("flex cursor-pointer items-center gap-2"),
   checkbox: () =>
-    "appearance-none w-[14px] h-[14px] rounded-full ring-inset ring-gray-400 ring-1 checked:ring-4 checked:ring-brandBlue transition-shadow duration-100 ease-in-out",
+    cn(
+      "size-[14px] appearance-none rounded-full ring-1 ring-gray-400 transition-shadow ring-inset checked:ring-4 checked:ring-brand-blue",
+    ),
 }
 
 function FirstLetterInput({ defaultValue }: { defaultValue: string }) {
@@ -260,7 +262,7 @@ function FirstLetterInput({ defaultValue }: { defaultValue: string }) {
 
         setValue(value)
       }}
-      className="w-full border border-gray-200 px-6 py-2 rounded-bubble-sm"
+      className="w-full rounded-bubble-sm border border-gray-200 px-6 py-2"
     />
   )
 }
diff --git a/apps/website/src/routes/partenaires.tsx b/apps/website/src/routes/partenaires.tsx
index f9d43520..91b21ab2 100644
--- a/apps/website/src/routes/partenaires.tsx
+++ b/apps/website/src/routes/partenaires.tsx
@@ -27,8 +27,8 @@ export default function Route() {
       <header className="flex">
         <h1
           className={cn(
-            "text-center text-title-hero-small",
-            "md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small",
+            "md:text-left md:text-hero-title-large",
           )}
         >
           Partenaires
@@ -82,11 +82,11 @@ function PartnerItem({
           alt={partner.name}
           sizes={{ lg: "300px", md: "30vw", xs: "50vw", default: "100vw" }}
           fallbackSize="512"
-          className="aspect-4/3 w-full flex-none border border-gray-200 bg-white rounded-bubble-md"
+          className="aspect-4/3 w-full flex-none rounded-bubble-md border border-gray-200 bg-white"
         />
 
         <div className="flex flex-col">
-          <p className="transition-colors duration-100 ease-in-out text-title-item group-hover:text-brandBlue">
+          <p className="text-item-title transition-colors group-hover:text-brand-blue">
             {partner.name}
           </p>
           <p>
diff --git a/apps/website/src/routes/resources.subscribe/input.tsx b/apps/website/src/routes/resources.subscribe/input.tsx
index 2f69aea5..bbfb81d5 100644
--- a/apps/website/src/routes/resources.subscribe/input.tsx
+++ b/apps/website/src/routes/resources.subscribe/input.tsx
@@ -59,9 +59,9 @@ export function SubscriptionForm() {
         method="POST"
         action={RESOURCE_PATHNAME}
         className={cn(
-          "flex w-full gap-2 rounded-bl-[10px] rounded-br-[16px] rounded-tl-[16px] rounded-tr-[10px] p-1 shadow-base",
+          "flex w-full gap-2 rounded-tl-[16px] rounded-tr-[10px] rounded-br-[16px] rounded-bl-[10px] p-1 shadow-base",
           {
-            "bg-brandRed-lightest": isError,
+            "bg-brand-red-lightest": isError,
             "bg-white": !isError,
           },
         )}
@@ -72,15 +72,15 @@ export function SubscriptionForm() {
           name={ActionFormData.keys.email}
           aria-label="Email"
           placeholder="jean@email.com"
-          className="min-w-0 flex-1 bg-transparent px-6 py-2 placeholder-gray-500 rounded-bubble-sm"
+          className="min-w-0 flex-1 rounded-bubble-sm bg-transparent px-6 py-2 placeholder-gray-500"
         />
 
         <button
           className={cn(
-            "flex p-3 text-white transition-[background-color,transform] duration-100 ease-in-out rounded-bubble-sm",
+            "flex rounded-bubble-sm p-3 text-white transition-[background-color,scale]",
             {
-              "bg-brandGreen": isSuccess,
-              "bg-brandBlue active:scale-95 hover:bg-brandBlue-lighter":
+              "bg-brand-green": isSuccess,
+              "bg-brand-blue hover:bg-brand-blue-lighter active:scale-95":
                 !isSuccess,
             },
           )}
@@ -90,9 +90,9 @@ export function SubscriptionForm() {
       </fetcher.Form>
 
       {fetcher.data?.type === "error" && (
-        <p className="flex items-center gap-2 text-brandRed">
-          <Icon id="circle-exclamation" className="text-[14px]" />
-          <span className="text-caption-default">
+        <p className="flex items-center gap-2 text-brand-red">
+          <Icon id="circle-exclamation" className="icon-14" />
+          <span className="text-caption">
             {fetcher.data.errors.formErrors.join(". ") ||
               fetcher.data.errors.fieldErrors.email}
           </span>
diff --git a/apps/website/src/routes/sauves.tsx b/apps/website/src/routes/sauves.tsx
index 4a1c3623..f1f3800a 100644
--- a/apps/website/src/routes/sauves.tsx
+++ b/apps/website/src/routes/sauves.tsx
@@ -66,8 +66,8 @@ export default function Route() {
       >
         <h1
           className={cn(
-            "text-center text-title-hero-small",
-            "md:flex-1 md:text-left md:text-title-hero-large",
+            "text-center text-hero-title-small",
+            "md:flex-1 md:text-left md:text-hero-title-large",
           )}
         >
           Animaux sauvés
diff --git a/apps/website/src/routes/signaler-un-animal-errant.tsx b/apps/website/src/routes/signaler-un-animal-errant.tsx
index 4d888579..bbb877b2 100644
--- a/apps/website/src/routes/signaler-un-animal-errant.tsx
+++ b/apps/website/src/routes/signaler-un-animal-errant.tsx
@@ -37,7 +37,7 @@ export default function Route() {
       <main className="flex w-full flex-col gap-12 px-article">
         <header className="flex flex-col">
           <h1
-            className={cn("text-title-hero-small", "md:text-title-hero-large")}
+            className={cn("text-hero-title-small", "md:text-hero-title-large")}
           >
             Signaler un animal errant
           </h1>
diff --git a/apps/website/src/styles/animation.css b/apps/website/src/styles/animation.css
new file mode 100644
index 00000000..1b0db1af
--- /dev/null
+++ b/apps/website/src/styles/animation.css
@@ -0,0 +1,6 @@
+@theme {
+  --transition-duration-normal: 100ms;
+  --transition-duration-slow: 150ms;
+
+  --default-transition-duration: var(--transition-duration-normal);
+}
diff --git a/apps/website/src/styles/border-radius.css b/apps/website/src/styles/border-radius.css
new file mode 100644
index 00000000..ebda5de8
--- /dev/null
+++ b/apps/website/src/styles/border-radius.css
@@ -0,0 +1,16 @@
+@theme inline {
+  --rounded-bubble-sm: --spacing(3);
+  --rounded-bubble-md: --spacing(6);
+  --rounded-bubble-lg: --spacing(12);
+  --rounded-bubble-xl: --spacing(24);
+}
+
+@utility rounded-bubble-* {
+  border-radius: --value(--rounded-bubble-*)
+    calc(--value(--rounded-bubble-*) / 2);
+}
+
+@utility rounded-bubble-b-* {
+  border-bottom-right-radius: --value(--rounded-bubble-*);
+  border-bottom-left-radius: calc(--value(--rounded-bubble-*) / 2);
+}
diff --git a/apps/website/src/styles/custom-scrollbar.css b/apps/website/src/styles/custom-scrollbar.css
new file mode 100644
index 00000000..5d57e7d0
--- /dev/null
+++ b/apps/website/src/styles/custom-scrollbar.css
@@ -0,0 +1,9 @@
+@utility scrollbars-none {
+  &::-webkit-scrollbar {
+    @apply hidden size-0;
+  }
+
+  &::-webkit-scrollbar-track-piece {
+    @apply bg-transparent;
+  }
+}
diff --git a/apps/website/src/styles/global.css b/apps/website/src/styles/global.css
new file mode 100644
index 00000000..6214bdbf
--- /dev/null
+++ b/apps/website/src/styles/global.css
@@ -0,0 +1,56 @@
+@layer base {
+  /*
+   * Make sure focused elements without `:focus-visible` don't have an outline.
+   */
+  :focus:not(:focus-visible) {
+    @apply outline-hidden;
+  }
+
+  /*
+   * Don't show focus outline on touch screens devices.
+   * They usally don't have input mechanism that can hover over elements so we
+   * check that.
+   */
+  @media (hover: none) {
+    :focus {
+      @apply outline-hidden;
+    }
+  }
+
+  *,
+  *::before,
+  *::after {
+    /*
+     * Disable bark background on tap.
+     * See https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
+     */
+    -webkit-tap-highlight-color: transparent;
+
+    /*
+     * Disabling double-tap to zoom removes the need for browsers to delay the
+     * generation of click events when the user taps the screen.
+     * See https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
+     */
+    touch-action: manipulation;
+  }
+
+  body {
+    text-size-adjust: 100%;
+    text-rendering: optimizeLegibility;
+  }
+
+  /*
+   * A label should be linked to an input. Clicking on a label focus its linked
+   * input.
+   */
+  label,
+  /*
+   * An anchor should have an `href` attribute.
+   */
+  a,
+  button:not(:disabled),
+  [role="button"]:not(:disabled),
+  select:not(:disabled) {
+    @apply cursor-pointer;
+  }
+}
diff --git a/apps/website/src/styles/grid.css b/apps/website/src/styles/grid.css
new file mode 100644
index 00000000..d8347e1c
--- /dev/null
+++ b/apps/website/src/styles/grid.css
@@ -0,0 +1,7 @@
+@theme {
+  --grid-template-columns-fr-auto: minmax(0, 1fr) auto;
+}
+
+@theme {
+  --grid-template-rows-auto: auto;
+}
diff --git a/apps/website/src/styles/icon-size.css b/apps/website/src/styles/icon-size.css
new file mode 100644
index 00000000..652cef14
--- /dev/null
+++ b/apps/website/src/styles/icon-size.css
@@ -0,0 +1,17 @@
+@theme {
+  --icon-size-14: 14px;
+  --icon-size-20: 20px;
+  --icon-size-24: 24px;
+  --icon-size-32: 32px;
+  --icon-size-40: 40px;
+  --icon-size-60: 60px;
+  --icon-size-80: 80px;
+}
+
+/*
+ * Alias of `text-[<value>]` for usage in icon component because it feels more
+ * natural to use `icon-<size>` than `text-[<value>]`.
+ */
+@utility icon-* {
+  font-size: --value(--icon-size-*);
+}
diff --git a/apps/website/src/styles/main.css b/apps/website/src/styles/main.css
new file mode 100644
index 00000000..35cad81b
--- /dev/null
+++ b/apps/website/src/styles/main.css
@@ -0,0 +1,11 @@
+@import "tailwindcss";
+
+@import "./animation.css";
+@import "./border-radius.css";
+@import "./custom-scrollbar.css";
+@import "./global.css";
+@import "./grid.css";
+@import "./icon-size.css";
+@import "./safe-area.css";
+@import "./text-style.css";
+@import "./theme.css";
diff --git a/apps/website/src/styles/safe-area.css b/apps/website/src/styles/safe-area.css
new file mode 100644
index 00000000..003bc839
--- /dev/null
+++ b/apps/website/src/styles/safe-area.css
@@ -0,0 +1,63 @@
+@theme {
+  --safe-top: env(safe-area-inset-top, 0px);
+  --safe-right: env(safe-area-inset-right, 0px);
+  --safe-bottom: env(safe-area-inset-bottom, 0px);
+  --safe-left: env(safe-area-inset-left, 0px);
+}
+
+@utility pt-safe-* {
+  padding-top: calc(--spacing(--value(number)) + var(--safe-top));
+  padding-top: calc(--value([length]) + var(--safe-top));
+  padding-top: calc(--value(--spacing-*) + var(--safe-top));
+}
+
+@utility pr-safe-* {
+  padding-right: calc(--spacing(--value(number)) + var(--safe-right));
+  padding-right: calc(--value([length]) + var(--safe-right));
+  padding-right: calc(--value(--spacing-*) + var(--safe-right));
+}
+
+@utility pb-safe-* {
+  padding-bottom: calc(--spacing(--value(number)) + var(--safe-bottom));
+  padding-bottom: calc(--value([length]) + var(--safe-bottom));
+  padding-bottom: calc(--value(--spacing-*) + var(--safe-bottom));
+}
+
+@utility pl-safe-* {
+  padding-left: calc(--spacing(--value(number)) + var(--safe-left));
+  padding-left: calc(--value([length]) + var(--safe-left));
+  padding-left: calc(--value(--spacing-*) + var(--safe-left));
+}
+
+@utility px-safe-* {
+  padding-right: calc(--spacing(--value(number)) + var(--safe-right));
+  padding-right: calc(--value([length]) + var(--safe-right));
+  padding-right: calc(--value(--spacing-*) + var(--safe-right));
+  padding-left: calc(--spacing(--value(number)) + var(--safe-left));
+  padding-left: calc(--value([length]) + var(--safe-left));
+  padding-left: calc(--value(--spacing-*) + var(--safe-left));
+}
+
+@utility py-safe-* {
+  padding-top: calc(--spacing(--value(number)) + var(--safe-top));
+  padding-top: calc(--value([length]) + var(--safe-top));
+  padding-top: calc(--value(--spacing-*) + var(--safe-top));
+  padding-bottom: calc(--spacing(--value(number)) + var(--safe-bottom));
+  padding-bottom: calc(--value([length]) + var(--safe-bottom));
+  padding-bottom: calc(--value(--spacing-*) + var(--safe-bottom));
+}
+
+@utility p-safe-* {
+  padding-top: calc(--spacing(--value(number)) + var(--safe-top));
+  padding-top: calc(--value([length]) + var(--safe-top));
+  padding-top: calc(--value(--spacing-*) + var(--safe-top));
+  padding-right: calc(--spacing(--value(number)) + var(--safe-right));
+  padding-right: calc(--value([length]) + var(--safe-right));
+  padding-right: calc(--value(--spacing-*) + var(--safe-right));
+  padding-bottom: calc(--spacing(--value(number)) + var(--safe-bottom));
+  padding-bottom: calc(--value([length]) + var(--safe-bottom));
+  padding-bottom: calc(--value(--spacing-*) + var(--safe-bottom));
+  padding-left: calc(--spacing(--value(number)) + var(--safe-left));
+  padding-left: calc(--value([length]) + var(--safe-left));
+  padding-left: calc(--value(--spacing-*) + var(--safe-left));
+}
diff --git a/apps/website/src/styles/text-style.css b/apps/website/src/styles/text-style.css
new file mode 100644
index 00000000..786c82fd
--- /dev/null
+++ b/apps/website/src/styles/text-style.css
@@ -0,0 +1,95 @@
+@font-face {
+  font-family: "Fira Sans";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/fonts/fira-sans/fira-sans-medium.ttf") format("truetype");
+}
+
+@theme {
+  /*
+   * Use default font families as fallbacks.
+   * See https://tailwindcss.com/docs/theme#default-theme-variable-reference
+   */
+  --font-sans:
+    Roboto, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-serif:
+    "Open Sans", ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-show: "Fira Sans", Arial;
+
+  /*
+   * In order to preserve a nice vertical rhythm, all text must have a
+   * line-height multiple of this value.
+   */
+  --base-line-height: 24px;
+}
+
+@utility text-hero-title-large {
+  font-family: var(--font-serif);
+  font-size: 60px;
+  font-weight: var(--font-weight-semibold);
+  line-height: calc(var(--base-line-height) * 3);
+}
+
+@utility text-hero-title-small {
+  font-family: var(--font-serif);
+  font-size: 40px;
+  font-weight: var(--font-weight-semibold);
+  line-height: calc(var(--base-line-height) * 2);
+}
+
+@utility text-section-title-large {
+  font-family: var(--font-serif);
+  font-size: 40px;
+  font-weight: var(--font-weight-semibold);
+  line-height: calc(var(--base-line-height) * 2);
+}
+
+@utility text-section-title-small {
+  font-family: var(--font-serif);
+  font-size: 20px;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--base-line-height);
+}
+
+@utility text-item-title {
+  font-family: var(--font-serif);
+  font-size: 16px;
+  font-weight: var(--font-weight-bold);
+  line-height: var(--base-line-height);
+}
+
+@utility text-body {
+  font-family: var(--font-sans);
+  font-size: 16px;
+  font-weight: var(--font-weight-normal);
+  line-height: var(--base-line-height);
+}
+
+@utility text-body-emphasis {
+  @apply text-body;
+
+  font-weight: var(--font-weight-medium);
+}
+
+@utility text-show-body-emphasis {
+  font-family: var(--font-show);
+  font-size: 16px;
+  font-weight: var(--font-weight-medium);
+  line-height: var(--base-line-height);
+}
+
+@utility text-caption {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: var(--font-weight-normal);
+  line-height: var(--base-line-height);
+}
+
+@utility text-code {
+  font-family: var(--font-mono);
+  font-size: 14px;
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--base-line-height);
+}
diff --git a/apps/website/src/styles/theme.css b/apps/website/src/styles/theme.css
new file mode 100644
index 00000000..3365149e
--- /dev/null
+++ b/apps/website/src/styles/theme.css
@@ -0,0 +1,120 @@
+@theme {
+  /*
+   * The values in the formula are defined by:
+   * - A page takes 90% of the width (5% spacing on each side).
+   * - Left and right spacing cannot go under `--spacing(4)` (16px).
+   * - The page should not exceed LG or MD (1024px or 768px).
+   * Wrap the value in a `calc` so tailwind can negate it.
+   */
+  --spacing-page: calc(
+    max(--spacing(4), 5vw, (100% - var(--breakpoint-lg)) / 2)
+  );
+  --spacing-article: calc(
+    max(--spacing(4), 5vw, (100% - var(--breakpoint-md)) / 2)
+  );
+}
+
+@theme {
+  --breakpoint-xs: 30rem;
+}
+
+@theme {
+  /*
+   * Color gradiants generated from Material Design.
+   * See https://material.io/design/color/the-color-system.html#tools-for-picking-colors
+   */
+
+  /* Closest to primary `#0078bf`. */
+  --color-brand-blue: var(--color-brand-blue-800);
+  --color-brand-blue-lighter: var(--color-brand-blue-700);
+  --color-brand-blue-lightest: var(--color-brand-blue-50);
+  --color-brand-blue-50: oklab(0.9581 -0.0168 -0.0176);
+  --color-brand-blue-100: oklab(0.8968 -0.0418 -0.0436);
+  --color-brand-blue-200: oklab(0.8334 -0.0642 -0.0734);
+  --color-brand-blue-300: oklab(0.7775 -0.0812 -0.0976);
+  --color-brand-blue-400: oklab(0.7393 -0.085 -0.1183);
+  --color-brand-blue-500: oklab(0.7047 -0.082 -0.1347);
+  --color-brand-blue-600: oklab(0.6642 -0.0756 -0.133);
+  --color-brand-blue-700: oklab(0.6086 -0.0668 -0.1312);
+  --color-brand-blue-800: oklab(0.5566 -0.0593 -0.1268);
+  --color-brand-blue-900: oklab(0.458 -0.0439 -0.1238);
+
+  /* Closest to primary `#00bfbf`. */
+  --color-brand-cyan: var(--color-brand-cyan-300);
+  --color-brand-cyan-lightest: var(--color-brand-cyan-50);
+  --color-brand-cyan-50: oklab(0.9513 -0.0217 -0.0079);
+  --color-brand-cyan-100: oklab(0.8779 -0.0544 -0.0172);
+  --color-brand-cyan-200: oklab(0.8041 -0.0899 -0.0248);
+  --color-brand-cyan-300: oklab(0.7285 -0.1203 -0.0317);
+  --color-brand-cyan-400: oklab(0.6852 -0.1136 -0.0284);
+  --color-brand-cyan-500: oklab(0.6405 -0.1078 -0.0222);
+  --color-brand-cyan-600: oklab(0.6017 -0.102 -0.019);
+  --color-brand-cyan-700: oklab(0.5501 -0.094 -0.0151);
+  --color-brand-cyan-800: oklab(0.5007 -0.086 -0.0128);
+  --color-brand-cyan-900: oklab(0.4101 -0.073 -0.0037);
+
+  /* Closest to primary `#32b54f`. */
+  --color-brand-green: var(--color-brand-green-500);
+  --color-brand-green-lightest: var(--color-brand-green-50);
+  --color-brand-green-50: oklab(0.9584 -0.0201 0.0119);
+  --color-brand-green-100: oklab(0.8974 -0.0474 0.0293);
+  --color-brand-green-200: oklab(0.8345 -0.0792 0.049);
+  --color-brand-green-300: oklab(0.7724 -0.1121 0.07);
+  --color-brand-green-400: oklab(0.7243 -0.1332 0.0851);
+  --color-brand-green-500: oklab(0.681 -0.1522 0.0998);
+  --color-brand-green-600: oklab(0.6374 -0.1455 0.0952);
+  --color-brand-green-700: oklab(0.5814 -0.1364 0.0888);
+  --color-brand-green-800: oklab(0.5298 -0.1288 0.084);
+  --color-brand-green-900: oklab(0.4346 -0.1108 0.0758);
+
+  /* Closest to primary `#ed2a26`. */
+  --color-brand-red: var(--color-brand-red-600);
+  --color-brand-red-lightest: var(--color-brand-red-50);
+  --color-brand-red-50: oklab(0.9547 0.023 0.0031);
+  --color-brand-red-100: oklab(0.8887 0.0577 0.0135);
+  --color-brand-red-200: oklab(0.7721 0.1054 0.0426);
+  --color-brand-red-300: oklab(0.6884 0.1464 0.0623);
+  --color-brand-red-400: oklab(0.6558 0.188 0.0948);
+  --color-brand-red-500: oklab(0.6428 0.2022 0.1158);
+  --color-brand-red-600: oklab(0.6096 0.2018 0.1069);
+  --color-brand-red-700: oklab(0.5695 0.1953 0.101);
+  --color-brand-red-800: oklab(0.5398 0.1902 0.0982);
+  --color-brand-red-900: oklab(0.5076 0.1827 0.0988);
+
+  /* Closest to primary `#ffc31b`. */
+  --color-brand-yellow: var(--color-brand-yellow-500);
+  --color-brand-yellow-darker: var(--color-brand-yellow-700);
+  --color-brand-yellow-lightest: var(--color-brand-yellow-50);
+  --color-brand-yellow-50: oklab(0.9788 -0.0012 0.0297);
+  --color-brand-yellow-100: oklab(0.9452 -0.0016 0.0733);
+  --color-brand-yellow-200: oklab(0.9154 -0.0038 0.1165);
+  --color-brand-yellow-300: oklab(0.8883 -0.0034 0.151);
+  --color-brand-yellow-400: oklab(0.8645 0.0049 0.165);
+  --color-brand-yellow-500: oklab(0.8465 0.0151 0.1684);
+  --color-brand-yellow-600: oklab(0.8201 0.0354 0.164);
+  --color-brand-yellow-700: oklab(0.7866 0.0612 0.157);
+  --color-brand-yellow-800: oklab(0.7577 0.0868 0.1508);
+  --color-brand-yellow-900: oklab(0.7091 0.1308 0.1406);
+
+  --color-social-facebook: oklab(0.5747 -0.0287 -0.169);
+  --color-social-instagram: oklab(0.5356 0.1569 -0.0273);
+  --color-social-linkedin: oklab(0.5187 -0.0297 -0.1454);
+  --color-social-twitter: oklab(0.6738 -0.0488 -0.1322);
+
+  --color-show-mystic: oklab(0.6262 0.1728 0.0268);
+  --color-show-alabaster: oklab(0.9375 0.0085 0.0096);
+
+  --color-background: var(--color-gray-50);
+}
+
+@theme {
+  /*
+   * These values are not necessary but we define them so they're shown in
+   * autocomplete.
+   */
+  --aspect-4\/3: 4 / 3;
+}
+
+@theme {
+  --shadow-base: 0px 8px 20px rgba(0, 0, 0, 0.06);
+}
diff --git a/apps/website/src/tailwind.css b/apps/website/src/tailwind.css
deleted file mode 100644
index a44cd04f..00000000
--- a/apps/website/src/tailwind.css
+++ /dev/null
@@ -1,17 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
-
-@layer base {
-  /*
-   * Make sure focused elements without focus-visible don't have an outline.
-   */
-  :focus:not(:focus-visible) {
-    @apply outline-none;
-  }
-
-  body {
-    text-size-adjust: 100%;
-    text-rendering: optimizeLegibility;
-  }
-}
diff --git a/apps/website/src/warn/item.tsx b/apps/website/src/warn/item.tsx
index 21766aef..88454209 100644
--- a/apps/website/src/warn/item.tsx
+++ b/apps/website/src/warn/item.tsx
@@ -28,7 +28,7 @@ export function WarnItem({
         />
 
         <div className="flex flex-col">
-          <p className="transition-colors duration-100 ease-in-out text-title-item group-hover:text-brandBlue">
+          <p className="text-item-title transition-colors group-hover:text-brand-blue">
             {title}
           </p>
           <p>{description}</p>
diff --git a/apps/website/tailwind.config.ts b/apps/website/tailwind.config.ts
deleted file mode 100644
index 0404d249..00000000
--- a/apps/website/tailwind.config.ts
+++ /dev/null
@@ -1,353 +0,0 @@
-import type { Config } from "tailwindcss"
-import defaultColors from "tailwindcss/colors.js"
-import defaultTheme from "tailwindcss/defaultTheme.js"
-import plugin from "tailwindcss/plugin.js"
-
-// Color gradiants generated from Material Design.
-// https://material.io/design/color/the-color-system.html#tools-for-picking-colors
-
-const brandBlue = {
-  50: "#e1f5fe",
-  100: "#b3e6fc",
-  200: "#81d5fb",
-  300: "#4fc5f8",
-  400: "#29b8f8",
-  500: "#01abf6",
-  600: "#019de7",
-  700: "#008ad3",
-  // Closest to primary #0078bf.
-  800: "#0079bf",
-  900: "#00599d",
-}
-
-const brandGreen = {
-  50: "#e7f6e9",
-  100: "#c5e8c9",
-  200: "#9fdaa7",
-  300: "#76cc84",
-  400: "#56c069",
-  // Closest to primary #32b54f.
-  500: "#32b54e",
-  600: "#28a645",
-  700: "#1b933a",
-  800: "#0c822f",
-  900: "#00631a",
-}
-
-const brandYellow = {
-  50: "#fff8e2",
-  100: "#ffecb5",
-  200: "#ffe185",
-  300: "#ffd654",
-  400: "#ffcb31",
-  // Closest to primary #ffc31b.
-  500: "#ffc21b",
-  600: "#ffb415",
-  700: "#fea213",
-  800: "#fe9112",
-  900: "#fd720f",
-}
-
-const brandRed = {
-  50: "#ffeaed",
-  100: "#ffcbcf",
-  200: "#f59794",
-  300: "#ed6d6b",
-  400: "#f74a44",
-  500: "#fb3625",
-  // Closest to primary #ed2a26.
-  600: "#ed2926",
-  700: "#db1c20",
-  800: "#ce1019",
-  900: "#c00008",
-}
-
-const brandCyan = {
-  50: "#def4f5",
-  100: "#abe3e4",
-  200: "#6fd2d2",
-  // Closest to primary #00bfbf.
-  300: "#00bfbf",
-  400: "#00b0af",
-  500: "#00a19d",
-  600: "#00948f",
-  700: "#00837d",
-  800: "#00736d",
-  900: "#00574e",
-}
-
-export const screens = {
-  xs: "475px",
-  ...defaultTheme.screens,
-}
-
-export const colors = {
-  gray: defaultColors.gray,
-
-  brandBlue: {
-    lightest: brandBlue[50],
-    lighter: brandBlue[700],
-    DEFAULT: brandBlue[800],
-  },
-  brandGreen: {
-    lightest: brandGreen[50],
-    DEFAULT: brandGreen[500],
-  },
-  brandYellow: {
-    lightest: brandYellow[50],
-    DEFAULT: brandYellow[500],
-    darker: brandYellow[700],
-  },
-  brandRed: {
-    lightest: brandRed[50],
-    DEFAULT: brandRed[600],
-  },
-  brandCyan: {
-    lightest: brandCyan[50],
-    DEFAULT: brandCyan[300],
-  },
-  show: {
-    mystic: "#db5072",
-    alabaster: "#f2e8e3",
-  },
-  facebook: "#3774dc",
-  instagram: "#ad3d7a",
-  linkedin: "#2c66bc",
-  twitter: "#499be9",
-}
-
-const theme: Config = {
-  content: ["./src/**/*.{ts,tsx}"],
-
-  theme: {
-    screens,
-
-    fontFamily: {
-      serif: ['"Open Sans"', ...defaultTheme.fontFamily.serif],
-      sans: ["Roboto", ...defaultTheme.fontFamily.sans],
-      show: ["Fira Sans", ...defaultTheme.fontFamily.sans],
-    },
-
-    extend: {
-      colors,
-
-      boxShadow: {
-        base: "0px 8px 20px rgba(0, 0, 0, 0.06)",
-      },
-
-      spacing: {
-        // We cannot use the `theme` parameter because referencing the `spacing`
-        // values ends in a infinite recursion: `theme("spacing.4")`.
-        // The values in the formula are defined by:
-        // - A page takes 90% of the width, 5% spacing on each side.
-        // - Left and right spacing cannot go under spacing 4 (16px).
-        // - The page should not exceed LG or MD (1024px or 768px).
-        // Wrap the value in a `calc` so tailwind can negate it.
-        page: `calc(max(${defaultTheme.spacing[4]}, 5vw, (100% - ${screens.lg}) / 2))`,
-        article: `calc(max(${defaultTheme.spacing[4]}, 5vw, (100% - ${screens.md}) / 2))`,
-
-        // 72px
-        18: "4.5rem",
-        // 120px
-        30: "7.5rem",
-      },
-
-      aspectRatio: {
-        "4/3": "4 / 3",
-      },
-    },
-  },
-
-  plugins: [
-    pluginBubble(),
-    pluginCustomScrollbar(),
-    pluginHover(),
-    pluginSafePadding(),
-    pluginTextStyles(),
-  ],
-}
-
-export default theme
-
-/**
- * Override hover to make sure it's only applied on supported devices.
- *
- * @see https://tailwindcss.com/docs/hover-focus-and-other-states#using-arbitrary-variants
- */
-function pluginHover() {
-  return plugin(({ addVariant }) => {
-    addVariant("hover", "@media(any-hover:hover){&:hover}")
-    addVariant("group-hover", "@media(any-hover:hover){.group:hover &}")
-  })
-}
-
-/**
- * In order to preserve a nice vertical rhythm, all text must have a size
- * multiple of 24px.
- */
-function pluginTextStyles() {
-  return plugin(({ addUtilities, theme }) => {
-    addUtilities({
-      ".text-body-default": {
-        "font-family": theme("fontFamily.sans"),
-        "font-size": "16px",
-        "line-height": "24px",
-      },
-      ".text-body-emphasis": {
-        "font-family": theme("fontFamily.sans"),
-        "font-weight": theme("fontWeight.medium"),
-        "font-size": "16px",
-        "line-height": "24px",
-      },
-      ".text-show-body-lowercase-emphasis": {
-        "font-family": theme("fontFamily.show"),
-        "font-weight": theme("fontWeight.medium"),
-        "font-size": "16px",
-        "line-height": "24px",
-      },
-      ".text-caption-default": {
-        "font-family": theme("fontFamily.sans"),
-        "font-size": "14px",
-        "line-height": "24px",
-      },
-      ".text-code-default": {
-        "font-family": theme("fontFamily.mono"),
-        "font-size": "14px",
-        "font-weight": theme("fontWeight.semibold"),
-        "line-height": "24px",
-      },
-      ".text-title-item": {
-        "font-family": theme("fontFamily.serif"),
-        "font-weight": theme("fontWeight.bold"),
-        "font-size": "16px",
-        "line-height": "24px",
-      },
-      ".text-title-hero-large": {
-        "font-family": theme("fontFamily.serif"),
-        "font-weight": theme("fontWeight.semibold"),
-        "font-size": "60px",
-        "line-height": "72px",
-      },
-      ".text-title-hero-small": {
-        "font-family": theme("fontFamily.serif"),
-        "font-weight": theme("fontWeight.semibold"),
-        "font-size": "40px",
-        "line-height": "48px",
-      },
-      ".text-title-section-large": {
-        "font-family": theme("fontFamily.serif"),
-        "font-weight": theme("fontWeight.semibold"),
-        "font-size": "40px",
-        "line-height": "48px",
-      },
-      ".text-title-section-small": {
-        "font-family": theme("fontFamily.serif"),
-        "font-weight": theme("fontWeight.bold"),
-        "font-size": "20px",
-        "line-height": "24px",
-      },
-    })
-  })
-}
-
-function pluginSafePadding() {
-  return plugin(({ matchUtilities, theme }) => {
-    matchUtilities(
-      {
-        "p-safe": (value) => ({
-          ...createSafePadding("top", value),
-          ...createSafePadding("right", value),
-          ...createSafePadding("bottom", value),
-          ...createSafePadding("left", value),
-        }),
-        "px-safe": (value) => ({
-          ...createSafePadding("right", value),
-          ...createSafePadding("left", value),
-        }),
-        "py-safe": (value) => ({
-          ...createSafePadding("top", value),
-          ...createSafePadding("bottom", value),
-        }),
-        "pt-safe": (value) => createSafePadding("top", value),
-        "pr-safe": (value) => createSafePadding("right", value),
-        "pb-safe": (value) => createSafePadding("bottom", value),
-        "pl-safe": (value) => createSafePadding("left", value),
-      },
-      { values: theme("spacing") },
-    )
-  })
-}
-
-function pluginBubble() {
-  return plugin(({ matchUtilities, theme }) => {
-    matchUtilities(
-      {
-        "rounded-bubble": (value) => ({
-          borderTopLeftRadius: String(value[0]),
-          borderTopRightRadius: String(value[1]),
-          borderBottomRightRadius: String(value[0]),
-          borderBottomLeftRadius: String(value[1]),
-        }),
-        "rounded-bubble-b": (value) => ({
-          borderBottomRightRadius: String(value[0]),
-          borderBottomLeftRadius: String(value[1]),
-        }),
-      },
-      {
-        values: {
-          sm: [theme("spacing.3"), theme("spacing[1.5]")],
-          md: [theme("spacing.6"), theme("spacing.3")],
-          lg: [theme("spacing.12"), theme("spacing.6")],
-          xl: [theme("spacing.24"), theme("spacing.12")],
-        },
-      },
-    )
-  })
-}
-
-function pluginCustomScrollbar() {
-  return plugin(({ matchUtilities }) => {
-    matchUtilities(
-      {
-        scrollbars: () => ({
-          "&::-webkit-scrollbar": {
-            width: "0",
-            height: "0",
-            display: "none",
-          },
-          "&::-webkit-scrollbar-track-piece": {
-            "background-color": "transparent",
-          },
-        }),
-      },
-      { values: { none: "none" } },
-    )
-  })
-}
-
-function createSafePadding(
-  side: "top" | "right" | "bottom" | "left",
-  value: string,
-) {
-  const name = {
-    top: "paddingTop",
-    right: "paddingRight",
-    bottom: "paddingBottom",
-    left: "paddingLeft",
-  }[side]
-
-  const envVariable = {
-    top: "safe-area-inset-top",
-    right: "safe-area-inset-right",
-    bottom: "safe-area-inset-bottom",
-    left: "safe-area-inset-left",
-  }[side]
-
-  return {
-    [name]: [
-      // Fallback value for browsers that don't support `env`.
-      `${value}`,
-      `calc(${value} + env(${envVariable}, 0))`,
-    ],
-  }
-}
diff --git a/apps/website/vite.config.ts b/apps/website/vite.config.ts
index 1a81694e..328e9530 100644
--- a/apps/website/vite.config.ts
+++ b/apps/website/vite.config.ts
@@ -1,5 +1,6 @@
 import { vitePlugin as remix } from "@remix-run/dev"
 import { installGlobals } from "@remix-run/node"
+import tailwindcss from "@tailwindcss/vite"
 import { defineConfig } from "vite"
 import tsconfigPaths from "vite-tsconfig-paths"
 
@@ -26,6 +27,8 @@ export default defineConfig({
       },
     }),
 
+    tailwindcss(),
+
     // Leverages the `paths` option in tsconfig.json.
     tsconfigPaths(),
   ],
diff --git a/libs/dev-tools/package.json b/libs/dev-tools/package.json
index 51fba830..8b4fe0c2 100644
--- a/libs/dev-tools/package.json
+++ b/libs/dev-tools/package.json
@@ -28,9 +28,6 @@
     "lint-fix:prettier": "prettier --write .",
     "sync-workspace": "# See /docs/decisions/002-workspace-package-injection.md"
   },
-  "optionalDependencies": {
-    "prettier-plugin-tailwindcss": "catalog:"
-  },
   "dependencies": {
     "@total-typescript/ts-reset": "catalog:",
     "eslint": "catalog:",
diff --git a/libs/dev-tools/prettier.config.js b/libs/dev-tools/prettier.config.js
index cb0c7258..5fc45bdf 100644
--- a/libs/dev-tools/prettier.config.js
+++ b/libs/dev-tools/prettier.config.js
@@ -1,68 +1,32 @@
-export default createConfig()
+/** @type {import("prettier").Config} */
+const config = {
+  // We prefer automatic text wrapping in markdown because:
+  //
+  // - It eliminates the need to babysit linebreaks.
+  // - It improves source readability.
+  // - It follows markdown specs, which our tools also adhere to.
+  //
+  // https://prettier.io/docs/options#prose-wrap
+  proseWrap: "always",
 
-/**
- * Returns a Prettier configuration object.
- *
- * @param {Object} [options={}] Optional configuration overrides.
- * @param {string} [options.tailwindConfig] URL or path to the Tailwind CSS
- *   configuration. `prettier-plugin-tailwindcss` plugin will only be used if
- *   `tailwindConfig` or `tailwindStylesheet` is provided.
- * @param {string} [options.tailwindStylesheet] URL or path to the Tailwind CSS
- *   stylesheet. `prettier-plugin-tailwindcss` plugin will only be used if
- *   `tailwindConfig` or `tailwindStylesheet` is provided.
- * @returns {import("prettier").Config} The configuration object.
- */
-export function createConfig({ tailwindConfig, tailwindStylesheet } = {}) {
-  return {
-    // We prefer automatic text wrapping in markdown because:
-    //
-    // - It eliminates the need to babysit linebreaks.
-    // - It improves source readability.
-    // - It follows markdown specs, which our tools also adhere to.
-    //
-    // https://prettier.io/docs/options#prose-wrap
-    proseWrap: "always",
+  // We prefer omitting semicolons because:
+  //
+  // - It makes refactoring easier by avoiding semicolons babysitting.
+  // - ESLint's `no-unexpected-multiline` rule prevents issues with confusing
+  //   line chaining.
+  // - Our build tools automatically inserts semicolons for us.
+  //
+  // https://prettier.io/docs/options#semicolons
+  // https://github.com/epicweb-dev/config/blob/main/docs/decisions/007-no-semi.md
+  semi: false,
 
-    // We prefer omitting semicolons because:
-    //
-    // - It makes refactoring easier by avoiding semicolons babysitting.
-    // - ESLint's `no-unexpected-multiline` rule prevents issues with confusing
-    //   line chaining.
-    // - Our build tools automatically inserts semicolons for us.
-    //
-    // https://prettier.io/docs/options#semicolons
-    // https://github.com/epicweb-dev/config/blob/main/docs/decisions/007-no-semi.md
-    semi: false,
-
-    // We prefer double quotes for strings because:
-    //
-    // - They're the standard in most programming languages.
-    // - Single quotes are more commonly used in written text.
-    //
-    // https://prettier.io/docs/en/options#quotes
-    singleQuote: false,
-
-    ...(tailwindConfig != null || tailwindStylesheet != null
-      ? {
-          plugins: [
-            // Sort Tailwind classes.
-            //
-            // /!\ Must come last.
-            //
-            // https://github.com/tailwindlabs/prettier-plugin-tailwindcss
-            // https://github.com/tailwindlabs/prettier-plugin-tailwindcss/tree/main#compatibility-with-other-prettier-plugins
-            "prettier-plugin-tailwindcss",
-          ],
-
-          // https://github.com/tailwindlabs/prettier-plugin-tailwindcss/tree/main#options
-          tailwindFunctions: ["cn"],
-
-          // https://github.com/tailwindlabs/prettier-plugin-tailwindcss/tree/main#specifying-your-tailwind-javascript-config-path-tailwind-css-v3
-          tailwindConfig,
-
-          // https://github.com/tailwindlabs/prettier-plugin-tailwindcss/tree/main#specifying-your-tailwind-stylesheet-path-tailwind-css-v4
-          tailwindStylesheet,
-        }
-      : null),
-  }
+  // We prefer double quotes for strings because:
+  //
+  // - They're the standard in most programming languages.
+  // - Single quotes are more commonly used in written text.
+  //
+  // https://prettier.io/docs/en/options#quotes
+  singleQuote: false,
 }
+
+export default config
diff --git a/libs/tailwind-animation/.gitignore b/libs/tailwind-animation/.gitignore
deleted file mode 100644
index 7652daf0..00000000
--- a/libs/tailwind-animation/.gitignore
+++ /dev/null
@@ -1,5 +0,0 @@
-# Compiled code by tsc.
-/build/
-
-# Dependencies installed by pnpm.
-/node_modules/
diff --git a/libs/tailwind-animation/.prettierignore b/libs/tailwind-animation/.prettierignore
deleted file mode 100644
index 813a96ce..00000000
--- a/libs/tailwind-animation/.prettierignore
+++ /dev/null
@@ -1,2 +0,0 @@
-# Compiled code by Vite.
-/build/
diff --git a/libs/tailwind-animation/eslint.config.js b/libs/tailwind-animation/eslint.config.js
deleted file mode 100644
index c28c06bb..00000000
--- a/libs/tailwind-animation/eslint.config.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "@animeaux/dev-tools/eslint"
diff --git a/libs/tailwind-animation/package.json b/libs/tailwind-animation/package.json
deleted file mode 100644
index 5d2288e6..00000000
--- a/libs/tailwind-animation/package.json
+++ /dev/null
@@ -1,48 +0,0 @@
-{
-  "name": "@animeaux/tailwind-animation",
-  "version": "1.0.0",
-  "private": true,
-  "sideEffects": false,
-  "type": "module",
-  "files": [
-    "build"
-  ],
-  "exports": {
-    ".": {
-      "types": "./build/src/index.d.ts",
-      "default": "./build/src/index.js"
-    }
-  },
-  "scripts": {
-    "prebuild": "pnpm clean",
-    "build": "run-s --print-label build:src build:paths",
-    "build:paths": "tsc-alias -p ./tsconfig.build.json",
-    "build:src": "tsc -p ./tsconfig.build.json",
-    "postbuild": "pnpm sync-workspace",
-    "clean": "rm -rf ./build",
-    "dev": "run-p --continue-on-error --print-label dev:*",
-    "dev:paths": "pnpm build:paths --watch",
-    "dev:src": "pnpm build:src --watch",
-    "dev:sync-workspace": "chokidar ./build --debounce --silent -c 'pnpm sync-workspace'",
-    "lint": "run-p --continue-on-error --print-label lint:*",
-    "lint:eslint": "eslint --cache --cache-location ./node_modules/.cache/eslint --max-warnings 0 .",
-    "lint:prettier": "prettier --list-different .",
-    "lint:tsc": "tsc --noEmit",
-    "lint-fix": "run-s --print-label lint-fix:eslint lint-fix:prettier",
-    "lint-fix:eslint": "eslint --cache --cache-location ./node_modules/.cache/eslint --fix .",
-    "lint-fix:prettier": "prettier --write .",
-    "sync-workspace": "# See /docs/decisions/002-workspace-package-injection.md"
-  },
-  "dependencies": {
-    "tailwindcss": "catalog:"
-  },
-  "devDependencies": {
-    "@animeaux/dev-tools": "workspace:*",
-    "chokidar-cli": "catalog:",
-    "eslint": "catalog:",
-    "npm-run-all": "catalog:",
-    "prettier": "catalog:",
-    "tsc-alias": "catalog:",
-    "typescript": "catalog:"
-  }
-}
diff --git a/libs/tailwind-animation/prettier.config.js b/libs/tailwind-animation/prettier.config.js
deleted file mode 100644
index 1a6f250b..00000000
--- a/libs/tailwind-animation/prettier.config.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "@animeaux/dev-tools/prettier"
diff --git a/libs/tailwind-animation/src/index.ts b/libs/tailwind-animation/src/index.ts
deleted file mode 100644
index 3ed652f1..00000000
--- a/libs/tailwind-animation/src/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "#i/tailwind-animation.js"
diff --git a/libs/tailwind-animation/src/tailwind-animation.ts b/libs/tailwind-animation/src/tailwind-animation.ts
deleted file mode 100644
index a34104a7..00000000
--- a/libs/tailwind-animation/src/tailwind-animation.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-import plugin from "tailwindcss/plugin.js"
-
-export const tailwindAnimation = plugin(
-  ({ matchUtilities, addUtilities, theme }) => {
-    // So we can get the opacity using a custom property.
-    matchUtilities(
-      { opacity: (value) => ({ "--tw-opacity": value }) },
-      { values: theme("opacity") },
-    )
-
-    matchUtilities(
-      { "animation-opacity": (value) => ({ "--tw-animation-opacity": value }) },
-      { values: theme("opacity") },
-    )
-
-    matchUtilities(
-      { "animation-duration": (value) => ({ animationDuration: value }) },
-      { values: theme("transitionDuration") },
-    )
-
-    matchUtilities(
-      {
-        "animation-translate-y": (value) => ({
-          "--tw-animation-translate-y": value,
-        }),
-      },
-      {
-        values: theme("translate"),
-        supportsNegativeValues: true,
-      },
-    )
-
-    // Somehow required for our custom keyframes to be found.
-    addUtilities({
-      "@keyframes enter": theme("keyframes.enter"),
-      "@keyframes exit": theme("keyframes.exit"),
-    })
-
-    addUtilities({
-      ".animation-enter": {
-        animationName: "enter",
-        animationTimingFunction: theme("transitionTimingFunction.out"),
-      },
-      ".animation-exit": {
-        animationName: "exit",
-        animationTimingFunction: theme("transitionTimingFunction.in"),
-      },
-    })
-  },
-  {
-    theme: {
-      extend: {
-        // If an `--tw-animation-*` is not defined, fallback to the current
-        // value to make sure the animation is a NOP.
-        keyframes: {
-          enter: {
-            from: {
-              opacity: "var(--tw-animation-opacity, var(--tw-opacity, 1))",
-              transform:
-                "translate(var(--tw-translate-x), var(--tw-animation-translate-y, var(--tw-translate-y))) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",
-            },
-          },
-          exit: {
-            to: {
-              opacity: "var(--tw-animation-opacity, var(--tw-opacity, 1))",
-              transform:
-                "translate(var(--tw-translate-x), var(--tw-animation-translate-y, var(--tw-translate-y))) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))",
-            },
-          },
-        },
-      },
-    },
-  },
-)
diff --git a/libs/tailwind-animation/tsconfig.build.json b/libs/tailwind-animation/tsconfig.build.json
deleted file mode 100644
index 49ad09e1..00000000
--- a/libs/tailwind-animation/tsconfig.build.json
+++ /dev/null
@@ -1,6 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-
-  // Only build files under these folders.
-  "include": ["./src/**/*"]
-}
diff --git a/libs/tailwind-animation/tsconfig.json b/libs/tailwind-animation/tsconfig.json
deleted file mode 100644
index 2036e51d..00000000
--- a/libs/tailwind-animation/tsconfig.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "extends": "@animeaux/dev-tools/tsconfig.lib",
-
-  "include": ["./**/*.ts"],
-  "exclude": ["./node_modules", "./build"],
-
-  "compilerOptions": {
-    "rootDir": "./",
-    "outDir": "./build",
-    "paths": { "#i/*": ["./src/*"] },
-
-    "types": ["@animeaux/dev-tools/reset"]
-  }
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1684371f..5c5f5030 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -298,9 +298,6 @@ catalogs:
     prettier:
       specifier: ^3.8.2
       version: 3.8.2
-    prettier-plugin-tailwindcss:
-      specifier: ^0.7.2
-      version: 0.7.2
     prisma:
       specifier: ^7.4.0
       version: 7.5.0
@@ -349,9 +346,6 @@ catalogs:
     storybook:
       specifier: ^10.3.5
       version: 10.3.5
-    tailwindcss:
-      specifier: ^3.3.3
-      version: 3.4.3
     tiny-invariant:
       specifier: ^1.3.1
       version: 1.3.3
@@ -930,13 +924,22 @@ importers:
     devDependencies:
       '@animeaux/dev-tools':
         specifier: workspace:*
-        version: file:libs/dev-tools(@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(@typescript-eslint/utils@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(jiti@2.6.1)(tailwindcss@3.4.3)(typescript@5.7.3)
+        version: file:libs/dev-tools(@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(@typescript-eslint/utils@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(jiti@2.6.1)(tailwindcss@4.2.4)(typescript@5.7.3)
       '@remix-run/dev':
         specifier: 'catalog:'
         version: 2.9.2(@remix-run/react@2.9.2(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(typescript@5.7.3))(@remix-run/serve@2.9.2(typescript@5.7.3))(@types/node@22.8.7)(typescript@5.7.3)(vite@5.2.12(@types/node@22.8.7)(lightningcss@1.32.0))
+      '@tailwindcss/node':
+        specifier: catalog:tailwindcss4
+        version: 4.2.4
+      '@tailwindcss/vite':
+        specifier: catalog:tailwindcss4
+        version: 4.2.4(vite@5.2.12(@types/node@22.8.7)(lightningcss@1.32.0))
       '@types/body-scroll-lock':
         specifier: 'catalog:'
         version: 3.1.2
+      '@types/culori':
+        specifier: 'catalog:'
+        version: 4.0.1
       '@types/luxon':
         specifier: 'catalog:'
         version: 3.7.1
@@ -958,6 +961,9 @@ importers:
       chokidar:
         specifier: 'catalog:'
         version: 3.6.0
+      culori:
+        specifier: 'catalog:'
+        version: 4.0.2
       dotenv-flow:
         specifier: 'catalog:'
         version: 4.1.0
@@ -976,12 +982,9 @@ importers:
       prettier:
         specifier: 'catalog:'
         version: 3.8.2
-      prettier-plugin-tailwindcss:
-        specifier: 'catalog:'
-        version: 0.7.2(prettier@3.8.2)
       tailwindcss:
-        specifier: 'catalog:'
-        version: 3.4.3
+        specifier: catalog:tailwindcss4
+        version: 4.2.4
       tsx:
         specifier: 'catalog:'
         version: 4.21.0
@@ -1095,10 +1098,6 @@ importers:
       npm-run-all:
         specifier: 'catalog:'
         version: 4.1.5
-    optionalDependencies:
-      prettier-plugin-tailwindcss:
-        specifier: 'catalog:'
-        version: 0.7.2(prettier@3.8.2)
 
   libs/file-storage:
     dependencies:
@@ -1407,34 +1406,6 @@ importers:
         specifier: 'catalog:'
         version: 5.7.3
 
-  libs/tailwind-animation:
-    dependencies:
-      tailwindcss:
-        specifier: 'catalog:'
-        version: 3.4.3
-    devDependencies:
-      '@animeaux/dev-tools':
-        specifier: workspace:*
-        version: file:libs/dev-tools(@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(@typescript-eslint/utils@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(jiti@2.6.1)(tailwindcss@3.4.3)(typescript@5.7.3)
-      chokidar-cli:
-        specifier: 'catalog:'
-        version: 3.0.0
-      eslint:
-        specifier: 'catalog:'
-        version: 9.39.3(jiti@2.6.1)
-      npm-run-all:
-        specifier: 'catalog:'
-        version: 4.1.5
-      prettier:
-        specifier: 'catalog:'
-        version: 3.8.2
-      tsc-alias:
-        specifier: 'catalog:'
-        version: 1.8.16
-      typescript:
-        specifier: 'catalog:'
-        version: 5.7.3
-
   libs/tailwindcss-peekaboo:
     dependencies:
       tailwindcss:
@@ -1616,10 +1587,6 @@ packages:
   '@adobe/css-tools@4.4.4':
     resolution: {integrity: sha512-Elp+iwUx5rN5+Y8xLt5/GRoG20WGoDCQ/1Fb+1LiGtvwbDavuSk0jhD/eZdckHAuzcDzccnkv+rEjyWfRx18gg==}
 
-  '@alloc/quick-lru@5.2.0':
-    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
-    engines: {node: '>=10'}
-
   '@ampproject/remapping@2.2.0':
     resolution: {integrity: sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==}
     engines: {node: '>=6.0.0'}
@@ -3530,95 +3497,111 @@ packages:
 
   '@react-email/body@0.0.10':
     resolution: {integrity: sha512-dMJyL9aU25ieatdPtVjCyQ/WHZYHwNc+Hy/XpF8Cc18gu21cUynVEeYQzFSeigDRMeBQ3PGAyjVDPIob7YlGwA==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/button@0.0.18':
     resolution: {integrity: sha512-uNUnpeDzz1o9HAky47JSTsUN/Ih0A3Az165AAOgAy8XOVzQJPrltUBRzHkScSVJTwRqKLASkie1yZbtNGIcRdA==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/code-block@0.0.10':
     resolution: {integrity: sha512-xx4m5Ir1cSFbz1bhyZfETUW34iQg+WRLTItW7Qv2arnFr6Ec0u8AWi4lUUqkpmbXzeuY8U8lV+2awDerwRpW6g==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/code-inline@0.0.4':
     resolution: {integrity: sha512-zj3oMQiiUCZbddSNt3k0zNfIBFK0ZNDIzzDyBaJKy6ZASTtWfB+1WFX0cpTX8q0gUiYK+A94rk5Qp68L6YXjXQ==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/column@0.0.12':
     resolution: {integrity: sha512-Rsl7iSdDaeHZO938xb+0wR5ud0Z3MVfdtPbNKJNojZi2hApwLAQXmDrnn/AcPDM5Lpl331ZljJS8vHTWxxkvKw==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/components@0.0.28':
     resolution: {integrity: sha512-90ayLWy1g2uqlZVcwonfq1oKUlAnQBUJ4iUnGXg0UuBPAeoqxSG1BFrVDmLSX0u5MG/wtmFPFPxhq+v8roq+sA==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/container@0.0.14':
     resolution: {integrity: sha512-NgoaJJd9tTtsrveL86Ocr/AYLkGyN3prdXKd/zm5fQpfDhy/NXezyT3iF6VlwAOEUIu64ErHpAJd+P6ygR+vjg==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/font@0.0.8':
     resolution: {integrity: sha512-fSBEqYyVPAyyACBBHcs3wEYzNknpHMuwcSAAKE8fOoDfGqURr/vSxKPdh4tOa9z7G4hlcEfgGrCYEa2iPT22cw==}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/head@0.0.11':
     resolution: {integrity: sha512-skw5FUgyamIMK+LN+fZQ5WIKQYf0dPiRAvsUAUR2eYoZp9oRsfkIpFHr0GWPkKAYjFEj+uJjaxQ/0VzQH7svVg==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/heading@0.0.14':
     resolution: {integrity: sha512-jZM7IVuZOXa0G110ES8OkxajPTypIKlzlO1K1RIe1auk76ukQRiCg1IRV4HZlWk1GGUbec5hNxsvZa2kU8cb9w==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/hr@0.0.10':
     resolution: {integrity: sha512-3AA4Yjgl3zEid/KVx6uf6TuLJHVZvUc2cG9Wm9ZpWeAX4ODA+8g9HyuC0tfnjbRsVMhMcCGiECuWWXINi+60vA==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/html@0.0.10':
     resolution: {integrity: sha512-06uiuSKJBWQJfhCKv4MPupELei4Lepyz9Sth7Yq7Fq29CAeB1ejLgKkGqn1I+FZ72hQxPLdYF4iq4yloKv3JCg==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/img@0.0.10':
     resolution: {integrity: sha512-pJ8glJjDNaJ53qoM95pvX9SK05yh0bNQY/oyBKmxlBDdUII6ixuMc3SCwYXPMl+tgkQUyDgwEBpSTrLAnjL3hA==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/link@0.0.11':
     resolution: {integrity: sha512-o1/BgPn2Fi+bN4Nh+P64t4tulaOyPhkBNSpNmiYL1Ar+ilw8q0BmUAqM+lvHy8Qr/4K7BjkgFoc4GoYkoEjOig==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/markdown@0.0.12':
     resolution: {integrity: sha512-wsuvj1XAb6O63aizCLNEeqVgKR3oFjAwt9vjfg2y2oh4G1dZeo8zonZM2x1fmkEkBZhzwSHraNi70jSXhA3A9w==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/preview@0.0.11':
     resolution: {integrity: sha512-7O/CT4b16YlSGrj18htTPx3Vbhu2suCGv/cSe5c+fuSrIM/nMiBSZ3Js16Vj0XJbAmmmlVmYFZw9L20wXJ+LjQ==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
@@ -3639,24 +3622,28 @@ packages:
   '@react-email/row@0.0.11':
     resolution: {integrity: sha512-ra09h7BMoGa14ds3vh7KVuj1N3astTstEC1YbMdCiHcx/nxylglNaT7qJXU74ZTzyHiGabyiNuyabTS+HLoMCA==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/section@0.0.15':
     resolution: {integrity: sha512-xfM3Qy5eU7fbkwvktlTeQgad7uo+1Z7YVh1aowSZaRBvKbkEXgoH/XssRYQmQL8ZrZGXbEJMujwtf4fsQL6vrg==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/tailwind@1.0.2':
     resolution: {integrity: sha512-P106AouxGQCCvapE5/HJT5rmNma+UJwG3A0MF6+4me7Usf+VNyJ5Jk0eSdsZ1zEfY3AbUSs+F7ql3oWztCg9nw==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
   '@react-email/text@0.0.10':
     resolution: {integrity: sha512-wNAnxeEAiFs6N+SxS0y6wTJWfewEzUETuyS2aZmT00xk50VijwyFRuhm4sYSjusMyshevomFwz5jNISCxRsGWw==}
     engines: {node: '>=18.0.0'}
+    deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
     peerDependencies:
       react: ^18.0 || ^19.0 || ^19.0.0-rc
 
@@ -3781,46 +3768,55 @@ packages:
     resolution: {integrity: sha512-C/zbRYRXFjWvz9Z4haRxcTdnkPt1BtCkz+7RtBSuNmKzMzp3ZxdM28Mpccn6pt28/UWUCTXa+b0Mx1k3g6NOMA==}
     cpu: [arm]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.18.0':
     resolution: {integrity: sha512-l3m9ewPgjQSXrUMHg93vt0hYCGnrMOcUpTz6FLtbwljo2HluS4zTXFy2571YQbisTnfTKPZ01u/ukJdQTLGh9A==}
     cpu: [arm]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.18.0':
     resolution: {integrity: sha512-rJ5D47d8WD7J+7STKdCUAgmQk49xuFrRi9pZkWoRD1UeSMakbcepWXPF8ycChBoAqs1pb2wzvbY6Q33WmN2ftw==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.18.0':
     resolution: {integrity: sha512-be6Yx37b24ZwxQ+wOQXXLZqpq4jTckJhtGlWGZs68TgdKXJgw54lUUoFYrg6Zs/kjzAQwEwYbp8JxZVzZLRepQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.18.0':
     resolution: {integrity: sha512-hNVMQK+qrA9Todu9+wqrXOHxFiD5YmdEi3paj6vP02Kx1hjd2LLYR2eaN7DsEshg09+9uzWi2W18MJDlG0cxJA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.18.0':
     resolution: {integrity: sha512-ROCM7i+m1NfdrsmvwSzoxp9HFtmKGHEqu5NNDiZWQtXLA8S5HBCkVvKAxJ8U+CVctHwV2Gb5VUaK7UAkzhDjlg==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.18.0':
     resolution: {integrity: sha512-0UyyRHyDN42QL+NbqevXIIUnKA47A+45WyasO+y2bGJ1mhQrfrtXUpTxCOrfxCR4esV3/RLYyucGVPiUsO8xjg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.18.0':
     resolution: {integrity: sha512-xuglR2rBVHA5UsI8h8UbX4VJ470PtGCf5Vpswh7p2ukaqBGFTnsfzxUBetoWBWymHMxbIG0Cmx7Y9qDZzr648w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.18.0':
     resolution: {integrity: sha512-LKaqQL9osY/ir2geuLVvRRs+utWUNilzdE90TpyoX0eNqPzWjRm14oMEE+YLve4k/NAqCdPkGYDaDF5Sw+xBfg==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.18.0':
     resolution: {integrity: sha512-7J6TkZQFGo9qBKH0pk2cEVSRhJbL6MtfWxth7Y5YmZs57Pi+4x6c2dStAUvaQkHQLnEQv1jzBUW43GvZW8OFqA==}
@@ -4047,24 +4043,28 @@ packages:
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-arm64-musl@4.2.4':
     resolution: {integrity: sha512-bBADEGAbo4ASnppIziaQJelekCxdMaxisrk+fB7Thit72IBnALp9K6ffA2G4ruj90G9XRS2VQ6q2bCKbfFV82g==}
     engines: {node: '>= 20'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-linux-x64-gnu@4.2.4':
     resolution: {integrity: sha512-7Mx25E4WTfnht0TVRTyC00j3i0M+EeFe7wguMDTlX4mRxafznw0CA8WJkFjWYH5BlgELd1kSjuU2JiPnNZbJDA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@tailwindcss/oxide-linux-x64-musl@4.2.4':
     resolution: {integrity: sha512-2wwJRF7nyhOR0hhHoChc04xngV3iS+akccHTGtz965FwF0up4b2lOdo6kI1EbDaEXKgvcrFBYcYQQ/rrnWFVfA==}
     engines: {node: '>= 20'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@tailwindcss/oxide-wasm32-wasi@4.2.4':
     resolution: {integrity: sha512-FQsqApeor8Fo6gUEklzmaa9994orJZZDBAlQpK2Mq+DslRKFJeD6AjHpBQ0kZFQohVr8o85PPh8eOy86VlSCmw==}
@@ -4411,6 +4411,7 @@ packages:
 
   '@ungap/structured-clone@1.2.0':
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
+    deprecated: Potential CWE-502 - Update to 1.3.1 or higher
 
   '@unpic/pixels@1.3.0':
     resolution: {integrity: sha512-Xe3J4KU9m2NWCDZ9iwIIRYFe7VwkWEqGCy4yoKMEkjoxpcQ7TPxD+QmdTphv3yiTmrDMMIWYEEH+j4mT6dILTA==}
@@ -4457,41 +4458,49 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -4653,9 +4662,6 @@ packages:
     resolution: {integrity: sha512-BRrU0Bo1X9dFGw6KgGz6hWrqQuOlVEDOzkb0QSLZY9sXHqA7pNj7yHPVJRz7y/rj4EOJ3d/D5uxH+ee9leYgsg==}
     engines: {node: '>=10'}
 
-  any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-
   anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
     engines: {node: '>= 8'}
@@ -4930,10 +4936,6 @@ packages:
     resolution: {integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==}
     engines: {node: '>=6'}
 
-  camelcase-css@2.0.1:
-    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
-    engines: {node: '>= 6'}
-
   camelcase@5.3.1:
     resolution: {integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==}
     engines: {node: '>=6'}
@@ -5084,10 +5086,6 @@ packages:
   commander@2.15.1:
     resolution: {integrity: sha512-VlfT9F3V0v+jr4yxPc5gg9s62/fIVWsd2Bk2iD435um1NlGMYdVCq+MjcXnhYq2icNOizHr1kK+5TI6H0Hy0ag==}
 
-  commander@4.1.1:
-    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
-    engines: {node: '>= 6'}
-
   commander@7.2.0:
     resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==}
     engines: {node: '>= 10'}
@@ -5402,9 +5400,6 @@ packages:
   devlop@1.1.0:
     resolution: {integrity: sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==}
 
-  didyoumean@1.2.2:
-    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
-
   diff@5.1.0:
     resolution: {integrity: sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==}
     engines: {node: '>=0.3.1'}
@@ -5413,9 +5408,6 @@ packages:
     resolution: {integrity: sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==}
     engines: {node: '>=8'}
 
-  dlv@1.1.3:
-    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
-
   dnd-core@16.0.1:
     resolution: {integrity: sha512-HK294sl7tbw6F6IeuK16YSBUoorvHpY8RHO+9yFfaJyCDVb6n7PRcezrOEOa2SBCqiYpemh5Jx20ZcjKdFAVng==}
 
@@ -6665,10 +6657,6 @@ packages:
   javascript-stringify@2.1.0:
     resolution: {integrity: sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==}
 
-  jiti@1.21.0:
-    resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
-    hasBin: true
-
   jiti@2.6.1:
     resolution: {integrity: sha512-ekilCSN1jwRvIbgeg/57YFh8qQDNbwDb9xT/qu2DAHbFFZUicIl4ygVaAvzveMhMVr3LnpSKTNnwt8PoOfmKhQ==}
     hasBin: true
@@ -6832,24 +6820,28 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.32.0:
     resolution: {integrity: sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.32.0:
     resolution: {integrity: sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.32.0:
     resolution: {integrity: sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
+    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.32.0:
     resolution: {integrity: sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw==}
@@ -6875,9 +6867,6 @@ packages:
     resolution: {integrity: sha512-O18pf7nyvHTckunPWCV1XUNXU1piu01y2b7ATJ0ppkUkk8ocqVWBrYjJBCwHDjD/ZWcfyrA0P4gKhzWGi5EINQ==}
     engines: {node: '>=14'}
 
-  lines-and-columns@1.2.4:
-    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-
   load-json-file@4.0.0:
     resolution: {integrity: sha512-Kx8hMakjX03tiGTLAIdJ+lL0htKnXjEZN6hk/tozf/WOuYGdZBJrZ+rCJRbVCugsjB3jMLn9746NsQIf5VjBMw==}
     engines: {node: '>=4'}
@@ -7463,9 +7452,6 @@ packages:
     resolution: {integrity: sha512-FBrGau0IXmuqg4haEZRBfHNWB5mUARw6hNwPDXXGg0XzVJ50mr/9hb267lvpVMnhZ1FON3qNd4Xfcez1rbFwSg==}
     engines: {node: '>= 8.0'}
 
-  mz@2.7.0:
-    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
-
   named-placeholders@1.1.6:
     resolution: {integrity: sha512-Tz09sEL2EEuv5fFowm419c1+a/jSMiBjI9gHxVLrVdbUkkNUUfjsVYs9pVZu5oCon/kmRh9TfLEObFtkVxmY0w==}
     engines: {node: '>=8.0.0'}
@@ -7606,10 +7592,6 @@ packages:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
 
-  object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-
   object-inspect@1.13.3:
     resolution: {integrity: sha512-kDCGIbxkDSXE3euJZZXzc6to7fCrKHNI/hSRQnRuQ+BWjFNzZwiFF8fj/6o2t2G9/jTj8PSIYTfCLelLZEeRpA==}
     engines: {node: '>= 0.4'}
@@ -7922,18 +7904,10 @@ packages:
     resolution: {integrity: sha512-g0VU+y08pKw5M8EZ2rIGiEBaB8wrQMjYGFfW2QVIfyT8V+fq8YFLkvlz4bz5ljvFDJYNFCWT3PWqcRr2FKO81w==}
     engines: {node: '>=10'}
 
-  pify@2.3.0:
-    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
-    engines: {node: '>=0.10.0'}
-
   pify@3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
     engines: {node: '>=4'}
 
-  pirates@4.0.6:
-    resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
-    engines: {node: '>= 6'}
-
   pkg-types@1.0.2:
     resolution: {integrity: sha512-hM58GKXOcj8WTqUXnsQyJYXdeAPbythQgEF3nTcEo+nkD49chjQ9IKm/QJy9xf6JakXptz86h7ecP2024rrLaQ==}
 
@@ -7981,18 +7955,6 @@ packages:
     peerDependencies:
       postcss: ^8.2.15
 
-  postcss-import@15.1.0:
-    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
-    engines: {node: '>=14.0.0'}
-    peerDependencies:
-      postcss: ^8.0.0
-
-  postcss-js@4.0.1:
-    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
-    engines: {node: ^12 || ^14 || >= 16}
-    peerDependencies:
-      postcss: ^8.4.21
-
   postcss-load-config@4.0.2:
     resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
     engines: {node: '>= 14'}
@@ -8034,12 +7996,6 @@ packages:
     peerDependencies:
       postcss: ^8.0.0
 
-  postcss-nested@6.0.1:
-    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
-    engines: {node: '>=12.0'}
-    peerDependencies:
-      postcss: ^8.2.14
-
   postcss-selector-parser@6.1.0:
     resolution: {integrity: sha512-UMz42UD0UY0EApS0ZL9o1XnLhSTtvvvLe5Dc2H2O56fvRZi+KulDyf5ctDhhtYJBGKStV2FL1fy6253cmLgqVQ==}
     engines: {node: '>=4'}
@@ -8094,61 +8050,6 @@ packages:
     resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
     engines: {node: '>= 0.8.0'}
 
-  prettier-plugin-tailwindcss@0.7.2:
-    resolution: {integrity: sha512-LkphyK3Fw+q2HdMOoiEHWf93fNtYJwfamoKPl7UwtjFQdei/iIBoX11G6j706FzN3ymX9mPVi97qIY8328vdnA==}
-    engines: {node: '>=20.19'}
-    peerDependencies:
-      '@ianvs/prettier-plugin-sort-imports': '*'
-      '@prettier/plugin-hermes': '*'
-      '@prettier/plugin-oxc': '*'
-      '@prettier/plugin-pug': '*'
-      '@shopify/prettier-plugin-liquid': '*'
-      '@trivago/prettier-plugin-sort-imports': '*'
-      '@zackad/prettier-plugin-twig': '*'
-      prettier: ^3.0
-      prettier-plugin-astro: '*'
-      prettier-plugin-css-order: '*'
-      prettier-plugin-jsdoc: '*'
-      prettier-plugin-marko: '*'
-      prettier-plugin-multiline-arrays: '*'
-      prettier-plugin-organize-attributes: '*'
-      prettier-plugin-organize-imports: '*'
-      prettier-plugin-sort-imports: '*'
-      prettier-plugin-svelte: '*'
-    peerDependenciesMeta:
-      '@ianvs/prettier-plugin-sort-imports':
-        optional: true
-      '@prettier/plugin-hermes':
-        optional: true
-      '@prettier/plugin-oxc':
-        optional: true
-      '@prettier/plugin-pug':
-        optional: true
-      '@shopify/prettier-plugin-liquid':
-        optional: true
-      '@trivago/prettier-plugin-sort-imports':
-        optional: true
-      '@zackad/prettier-plugin-twig':
-        optional: true
-      prettier-plugin-astro:
-        optional: true
-      prettier-plugin-css-order:
-        optional: true
-      prettier-plugin-jsdoc:
-        optional: true
-      prettier-plugin-marko:
-        optional: true
-      prettier-plugin-multiline-arrays:
-        optional: true
-      prettier-plugin-organize-attributes:
-        optional: true
-      prettier-plugin-organize-imports:
-        optional: true
-      prettier-plugin-sort-imports:
-        optional: true
-      prettier-plugin-svelte:
-        optional: true
-
   prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
     engines: {node: '>=10.13.0'}
@@ -8389,9 +8290,6 @@ packages:
     resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==}
     engines: {node: '>=0.10.0'}
 
-  read-cache@1.0.0:
-    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
-
   read-pkg@3.0.0:
     resolution: {integrity: sha512-BLq/cCO9two+lBgiTYNqD6GdtK8s4NpaWrl6/rCO9w0TUS8oJl7cmToOZfRYllKTISY6nt1U7jQ53brmKqY6BA==}
     engines: {node: '>=4'}
@@ -8955,11 +8853,6 @@ packages:
   style-to-object@1.0.6:
     resolution: {integrity: sha512-khxq+Qm3xEyZfKd/y9L3oIWQimxuc4STrQKtQn8aSDRHb8mFgpukgX1hdzfrMEW6JCjyJ8p89x+IUMVnCBI1PA==}
 
-  sucrase@3.35.0:
-    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
-    engines: {node: '>=16 || 14 >=14.17'}
-    hasBin: true
-
   supports-color@5.5.0:
     resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
     engines: {node: '>=4'}
@@ -9001,11 +8894,6 @@ packages:
       '@eslint/css':
         optional: true
 
-  tailwindcss@3.4.3:
-    resolution: {integrity: sha512-U7sxQk/n397Bmx4JHbJx/iSOOv5G+II3f1kpLpY2QeUv5DcPdcTsYLlusZfq1NthHS1c1cZoyFmmkex1rzke0A==}
-    engines: {node: '>=14.0.0'}
-    hasBin: true
-
   tailwindcss@4.2.4:
     resolution: {integrity: sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA==}
 
@@ -9029,13 +8917,6 @@ packages:
     resolution: {integrity: sha512-tOG/7GyXpFevhXVh8jOPJrmtRpOTsYqUIkVdVooZYJS/z8WhfQUX8RJILmeuJNinGAMSu1veBr4asSHFt5/hng==}
     engines: {node: '>=18'}
 
-  thenify-all@1.6.0:
-    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
-    engines: {node: '>=0.8'}
-
-  thenify@3.3.1:
-    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
-
   through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
 
@@ -9116,9 +8997,6 @@ packages:
     resolution: {integrity: sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==}
     engines: {node: '>=6.10'}
 
-  ts-interface-checker@0.1.13:
-    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
-
   tsc-alias@1.8.16:
     resolution: {integrity: sha512-QjCyu55NFyRSBAl6+MTFwplpFcnm2Pq01rR/uxfqJoLMm6X3O14KEGtaSDZpJYaE1bJBGDjD0eSuiIWPe2T58g==}
     engines: {node: '>=16.20.2'}
@@ -9380,6 +9258,7 @@ packages:
 
   uuid@9.0.1:
     resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
+    deprecated: uuid@10 and below is no longer supported.  For ESM codebases, update to uuid@latest.  For CommonJS codebases, use uuid@11 (but be aware this version will likely be deprecated in 2028).
     hasBin: true
 
   uvu@0.5.6:
@@ -9734,8 +9613,6 @@ snapshots:
 
   '@adobe/css-tools@4.4.4': {}
 
-  '@alloc/quick-lru@5.2.0': {}
-
   '@ampproject/remapping@2.2.0':
     dependencies:
       '@jridgewell/gen-mapping': 0.1.1
@@ -9758,49 +9635,6 @@ snapshots:
       - react-dom
       - typescript
 
-  '@animeaux/dev-tools@file:libs/dev-tools(@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(@typescript-eslint/utils@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(jiti@2.6.1)(tailwindcss@3.4.3)(typescript@5.7.3)':
-    dependencies:
-      '@total-typescript/ts-reset': 0.6.1
-      eslint: 9.39.3(jiti@2.6.1)
-      eslint-plugin-better-tailwindcss: 4.5.0(eslint@9.39.3(jiti@2.6.1))(tailwindcss@3.4.3)(typescript@5.7.3)
-      eslint-plugin-import-x: 4.16.1(@typescript-eslint/utils@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))
-      eslint-plugin-jsx-a11y: 6.10.2(eslint@9.39.3(jiti@2.6.1))
-      eslint-plugin-react: 7.37.5(eslint@9.39.3(jiti@2.6.1))
-      eslint-plugin-react-hooks: 5.2.0(eslint@9.39.3(jiti@2.6.1))
-      eslint-plugin-simple-import-sort: 12.1.1(eslint@9.39.3(jiti@2.6.1))
-      eslint-plugin-unused-imports: 4.4.1(@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))
-      globals: 15.15.0
-      prettier: 3.8.2
-      typescript-eslint: 8.56.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3)
-    optionalDependencies:
-      prettier-plugin-tailwindcss: 0.7.2(prettier@3.8.2)
-    transitivePeerDependencies:
-      - '@eslint/css'
-      - '@ianvs/prettier-plugin-sort-imports'
-      - '@prettier/plugin-hermes'
-      - '@prettier/plugin-oxc'
-      - '@prettier/plugin-pug'
-      - '@shopify/prettier-plugin-liquid'
-      - '@trivago/prettier-plugin-sort-imports'
-      - '@typescript-eslint/eslint-plugin'
-      - '@typescript-eslint/utils'
-      - '@zackad/prettier-plugin-twig'
-      - eslint-import-resolver-node
-      - jiti
-      - oxlint
-      - prettier-plugin-astro
-      - prettier-plugin-css-order
-      - prettier-plugin-jsdoc
-      - prettier-plugin-marko
-      - prettier-plugin-multiline-arrays
-      - prettier-plugin-organize-attributes
-      - prettier-plugin-organize-imports
-      - prettier-plugin-sort-imports
-      - prettier-plugin-svelte
-      - supports-color
-      - tailwindcss
-      - typescript
-
   '@animeaux/dev-tools@file:libs/dev-tools(@typescript-eslint/eslint-plugin@8.58.1(@typescript-eslint/parser@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(@typescript-eslint/utils@8.58.1(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3))(jiti@2.6.1)(tailwindcss@4.2.4)(typescript@5.7.3)':
     dependencies:
       '@total-typescript/ts-reset': 0.6.1
@@ -9815,31 +9649,13 @@ snapshots:
       globals: 15.15.0
       prettier: 3.8.2
       typescript-eslint: 8.56.0(eslint@9.39.3(jiti@2.6.1))(typescript@5.7.3)
-    optionalDependencies:
-      prettier-plugin-tailwindcss: 0.7.2(prettier@3.8.2)
     transitivePeerDependencies:
       - '@eslint/css'
-      - '@ianvs/prettier-plugin-sort-imports'
-      - '@prettier/plugin-hermes'
-      - '@prettier/plugin-oxc'
-      - '@prettier/plugin-pug'
-      - '@shopify/prettier-plugin-liquid'
-      - '@trivago/prettier-plugin-sort-imports'
       - '@typescript-eslint/eslint-plugin'
       - '@typescript-eslint/utils'
-      - '@zackad/prettier-plugin-twig'
       - eslint-import-resolver-node
       - jiti
       - oxlint
-      - prettier-plugin-astro
-      - prettier-plugin-css-order
-      - prettier-plugin-jsdoc
-      - prettier-plugin-marko
-      - prettier-plugin-multiline-arrays
-      - prettier-plugin-organize-attributes
-      - prettier-plugin-organize-imports
-      - prettier-plugin-sort-imports
-      - prettier-plugin-svelte
       - supports-color
       - tailwindcss
       - typescript
@@ -13189,8 +13005,6 @@ snapshots:
 
   ansis@4.0.0-node10: {}
 
-  any-promise@1.3.0: {}
-
   anymatch@3.1.3:
     dependencies:
       normalize-path: 3.0.0
@@ -13512,8 +13326,6 @@ snapshots:
 
   callsites@3.1.0: {}
 
-  camelcase-css@2.0.1: {}
-
   camelcase@5.3.1: {}
 
   caniuse-lite@1.0.30001680: {}
@@ -13677,8 +13489,6 @@ snapshots:
 
   commander@2.15.1: {}
 
-  commander@4.1.1: {}
-
   commander@7.2.0: {}
 
   commander@9.5.0: {}
@@ -13951,16 +13761,12 @@ snapshots:
     dependencies:
       dequal: 2.0.3
 
-  didyoumean@1.2.2: {}
-
   diff@5.1.0: {}
 
   dir-glob@3.0.1:
     dependencies:
       path-type: 4.0.0
 
-  dlv@1.1.3: {}
-
   dnd-core@16.0.1:
     dependencies:
       '@react-dnd/asap': 5.0.2
@@ -14398,23 +14204,6 @@ snapshots:
     optionalDependencies:
       unrs-resolver: 1.11.1
 
-  eslint-plugin-better-tailwindcss@4.5.0(eslint@9.39.3(jiti@2.6.1))(tailwindcss@3.4.3)(typescript@5.7.3):
-    dependencies:
-      '@eslint/css-tree': 4.0.3
-      '@valibot/to-json-schema': 1.7.0(valibot@1.4.0(typescript@5.7.3))
-      enhanced-resolve: 5.20.1
-      jiti: 2.6.1
-      synckit: 0.11.12
-      tailwind-csstree: 0.3.1
-      tailwindcss: 3.4.3
-      tsconfig-paths-webpack-plugin: 4.2.0
-      valibot: 1.4.0(typescript@5.7.3)
-    optionalDependencies:
-      eslint: 9.39.3(jiti@2.6.1)
-    transitivePeerDependencies:
-      - '@eslint/css'
-      - typescript
-
   eslint-plugin-better-tailwindcss@4.5.0(eslint@9.39.3(jiti@2.6.1))(tailwindcss@4.2.4)(typescript@5.7.3):
     dependencies:
       '@eslint/css-tree': 4.0.3
@@ -15585,8 +15374,6 @@ snapshots:
 
   javascript-stringify@2.1.0: {}
 
-  jiti@1.21.0: {}
-
   jiti@2.6.1: {}
 
   jpeg-js@0.4.4: {}
@@ -15778,8 +15565,6 @@ snapshots:
 
   lilconfig@3.1.1: {}
 
-  lines-and-columns@1.2.4: {}
-
   load-json-file@4.0.0:
     dependencies:
       graceful-fs: 4.2.11
@@ -16795,12 +16580,6 @@ snapshots:
       seq-queue: 0.0.5
       sqlstring: 2.3.3
 
-  mz@2.7.0:
-    dependencies:
-      any-promise: 1.3.0
-      object-assign: 4.1.1
-      thenify-all: 1.6.0
-
   named-placeholders@1.1.6:
     dependencies:
       lru.min: 1.1.4
@@ -16948,8 +16727,6 @@ snapshots:
 
   object-assign@4.1.1: {}
 
-  object-hash@3.0.0: {}
-
   object-inspect@1.13.3: {}
 
   object-inspect@1.13.4: {}
@@ -17295,12 +17072,8 @@ snapshots:
     dependencies:
       safe-buffer: 5.2.1
 
-  pify@2.3.0: {}
-
   pify@3.0.0: {}
 
-  pirates@4.0.6: {}
-
   pkg-types@1.0.2:
     dependencies:
       jsonc-parser: 3.2.0
@@ -17398,18 +17171,6 @@ snapshots:
     dependencies:
       postcss: 8.4.38
 
-  postcss-import@15.1.0(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-value-parser: 4.2.0
-      read-cache: 1.0.0
-      resolve: 1.22.8
-
-  postcss-js@4.0.1(postcss@8.4.38):
-    dependencies:
-      camelcase-css: 2.0.1
-      postcss: 8.4.38
-
   postcss-load-config@4.0.2(postcss@8.4.38):
     dependencies:
       lilconfig: 3.1.1
@@ -17450,11 +17211,6 @@ snapshots:
       postcss-modules-values: 4.0.0(postcss@8.4.38)
       string-hash: 1.1.3
 
-  postcss-nested@6.0.1(postcss@8.4.38):
-    dependencies:
-      postcss: 8.4.38
-      postcss-selector-parser: 6.1.0
-
   postcss-selector-parser@6.1.0:
     dependencies:
       cssesc: 3.0.0
@@ -17494,10 +17250,6 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-tailwindcss@0.7.2(prettier@3.8.2):
-    dependencies:
-      prettier: 3.8.2
-
   prettier@2.8.8: {}
 
   prettier@3.8.2: {}
@@ -17760,10 +17512,6 @@ snapshots:
     dependencies:
       loose-envify: 1.4.0
 
-  read-cache@1.0.0:
-    dependencies:
-      pify: 2.3.0
-
   read-pkg@3.0.0:
     dependencies:
       load-json-file: 4.0.0
@@ -18442,16 +18190,6 @@ snapshots:
     dependencies:
       inline-style-parser: 0.2.3
 
-  sucrase@3.35.0:
-    dependencies:
-      '@jridgewell/gen-mapping': 0.3.5
-      commander: 4.1.1
-      glob: 10.4.5
-      lines-and-columns: 1.2.4
-      mz: 2.7.0
-      pirates: 4.0.6
-      ts-interface-checker: 0.1.13
-
   supports-color@5.5.0:
     dependencies:
       has-flag: 3.0.0
@@ -18477,33 +18215,6 @@ snapshots:
 
   tailwind-csstree@0.3.1: {}
 
-  tailwindcss@3.4.3:
-    dependencies:
-      '@alloc/quick-lru': 5.2.0
-      arg: 5.0.2
-      chokidar: 3.6.0
-      didyoumean: 1.2.2
-      dlv: 1.1.3
-      fast-glob: 3.3.0
-      glob-parent: 6.0.2
-      is-glob: 4.0.3
-      jiti: 1.21.0
-      lilconfig: 2.1.0
-      micromatch: 4.0.7
-      normalize-path: 3.0.0
-      object-hash: 3.0.0
-      picocolors: 1.0.1
-      postcss: 8.4.38
-      postcss-import: 15.1.0(postcss@8.4.38)
-      postcss-js: 4.0.1(postcss@8.4.38)
-      postcss-load-config: 4.0.2(postcss@8.4.38)
-      postcss-nested: 6.0.1(postcss@8.4.38)
-      postcss-selector-parser: 6.1.0
-      resolve: 1.22.8
-      sucrase: 3.35.0
-    transitivePeerDependencies:
-      - ts-node
-
   tailwindcss@4.2.4: {}
 
   tapable@2.3.2: {}
@@ -18540,14 +18251,6 @@ snapshots:
       minizlib: 3.1.0
       yallist: 5.0.0
 
-  thenify-all@1.6.0:
-    dependencies:
-      thenify: 3.3.1
-
-  thenify@3.3.1:
-    dependencies:
-      any-promise: 1.3.0
-
   through2@2.0.5:
     dependencies:
       readable-stream: 2.3.8
@@ -18608,8 +18311,6 @@ snapshots:
 
   ts-dedent@2.2.0: {}
 
-  ts-interface-checker@0.1.13: {}
-
   tsc-alias@1.8.16:
     dependencies:
       chokidar: 3.6.0
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 50984ee7..6cf71eb0 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -127,7 +127,6 @@ catalog:
   pg-copy-streams: ^6.0.6
   pm2: ^6.0.14
   prettier: ^3.8.2
-  prettier-plugin-tailwindcss: ^0.7.2
   prisma: ^7.4.0
   react: ^18.2.0
   react-dnd: ^16.0.1
@@ -144,7 +143,6 @@ catalog:
   scroll-into-view-if-needed: ^3.1.0
   source-map-support: ^0.5.21
   storybook: ^10.3.5
-  tailwindcss: ^3.3.3
   tiny-invariant: ^1.3.1
   tsc-alias: ^1.8.16
   tsx: ^4.21.0