JRaviLab · vincerubinetti · Jan 21, 2026 · Jan 14, 2026 · Jan 14, 2026 · Jan 14, 2026
diff --git a/.github/workflows/test-frontend.yaml b/.github/workflows/test-frontend.yaml
@@ -94,6 +94,7 @@ jobs:
         run: bun run test:e2e
 
       - name: Upload test reports
+        if: always()
         uses: actions/upload-artifact@v4
         with:
           name: reports

diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -2,7 +2,8 @@
   "plugins": [
     "@ianvs/prettier-plugin-sort-imports",
     "./node_modules/prettier-plugin-jsdoc/dist/index.js",
-    "prettier-plugin-css-order"
+    "prettier-plugin-css-order",
+    "prettier-plugin-tailwindcss"
   ],
   "importOrder": [
     "^react",

diff --git a/frontend/bun.lock b/frontend/bun.lock
diff --git a/frontend/index.html b/frontend/index.html
@@ -19,15 +19,6 @@
     <meta property="og:title" content="%VITE_TITLE%" />
     <meta property="og:description" content="%VITE_DESCRIPTION%" />
     <meta property="og:image" content="share.jpg" />
-
-    <!-- fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=Poppins:wght@300;400;500&display=swap"
-      rel="stylesheet"
-      crossorigin="anonymous"
-    />
   </head>
 
   <body>

diff --git a/frontend/package.json b/frontend/package.json
@@ -15,11 +15,14 @@
     "clean": "rm -rf node_modules dist bun.lock && bun pm cache rm"
   },
   "dependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource/poppins": "^5.2.7",
     "@headlessui/react": "^2.2.4",
     "@radix-ui/react-popover": "^1.1.14",
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@reactuses/core": "^6.0.5",
+    "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-table": "8.21.3",
     "clsx": "^2.1.1",
@@ -47,6 +50,7 @@
     "react-router": "^7.6.3",
     "react-time-ago": "^7.3.3",
     "seedrandom": "^3.0.5",
+    "tailwindcss": "^4.1.18",
     "ua-parser-js": "^2.0.4"
   },
   "devDependencies": {
@@ -81,6 +85,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-jsdoc": "^1.3.3",
+    "prettier-plugin-tailwindcss": "^0.7.2",
     "type-fest": "^4.41.0",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.1",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,8 +1,8 @@
-import "@/global/theme.css";
-import "@/global/styles.css";
-import "@/global/text.css";
-import "@/global/layout.css";
-import "@/global/effects.css";
+import "@/styles.css";
+import "@fontsource/poppins/300.css";
+import "@fontsource/poppins/500.css";
+import "@fontsource/poppins/600.css";
+import "@fontsource-variable/jetbrains-mono";
 import { IconContext } from "react-icons";
 import {
   createBrowserRouter,

diff --git a/frontend/src/components/Alert.module.css b/frontend/src/components/Alert.module.css
diff --git a/frontend/src/components/Alert.tsx b/frontend/src/components/Alert.tsx
@@ -1,11 +1,21 @@
 import type { ComponentProps } from "react";
 import clsx from "clsx";
 import Mark from "@/components/Mark";
-import classes from "./Alert.module.css";
 
 /** static box of certain type with icon and text contents */
-const Alert = ({ className, ...props }: ComponentProps<typeof Mark>) => {
-  return <Mark className={clsx(className, classes.alert)} {...props}></Mark>;
+const Alert = ({
+  className,
+  children,
+  ...props
+}: ComponentProps<typeof Mark>) => {
+  return (
+    <Mark
+      className={clsx("max-w-full rounded bg-current/10 p-4", className)}
+      {...props}
+    >
+      <p className="text-black">{children}</p>
+    </Mark>
+  );
 };
 
 export default Alert;
diff --git a/frontend/src/components/AnalysisCard.module.css b/frontend/src/components/AnalysisCard.module.css
diff --git a/frontend/src/components/AnalysisCard.tsx b/frontend/src/components/AnalysisCard.tsx
@@ -1,9 +1,8 @@
-import clsx from "clsx";
 import type { Analysis } from "@/api/types";
 import Ago from "@/components/Ago";
 import Link from "@/components/Link";
-import Mark, { type Type } from "@/components/Mark";
-import classes from "./AnalysisCard.module.css";
+import Mark from "@/components/Mark";
+import type { Type } from "@/components/Mark";
 
 type Props = {
   analysis: Analysis;
@@ -23,13 +22,13 @@ const AnalysisCard = ({
   return (
     <Link
       to={`/analysis/${id}`}
-      className={clsx("card", classes.card)}
+      className="hover:border-accent border-off-white flex flex-col items-start gap-2 rounded border-2 bg-white p-4"
       showArrow={false}
     >
-      <div className="bold">{name}</div>
-      <div className="secondary">{type}</div>
-      {info && <div className="secondary">{info}</div>}
-      {started && <Ago className="secondary" date={started} />}
+      <div className="font-bold">{name}</div>
+      <div className="text-dark-gray">{type}</div>
+      {info && <div className="text-dark-gray">{info}</div>}
+      {started && <Ago className="text-dark-gray" date={started} />}
       {status && <Mark type={statusToMark[status.type]}>{status.info}</Mark>}
     </Link>
   );

diff --git a/frontend/src/components/Asterisk.module.css b/frontend/src/components/Asterisk.module.css
diff --git a/frontend/src/components/Asterisk.tsx b/frontend/src/components/Asterisk.tsx
@@ -1,13 +1,12 @@
 import { FaAsterisk } from "react-icons/fa6";
 import Tooltip from "@/components/Tooltip";
-import classes from "./Asterisk.module.css";
 
 /** asterisk for things like required form fields */
 const Asterisk = () => (
   <Tooltip content="Required">
     {/* https://github.com/react-icons/react-icons/issues/336 */}
     <span aria-hidden>
-      <FaAsterisk className={classes.asterisk} />
+      <FaAsterisk className="text-error relative -ml-1 -translate-y-2 scale-75" />
     </span>
   </Tooltip>
 );

diff --git a/frontend/src/components/Badge.module.css b/frontend/src/components/Badge.module.css
diff --git a/frontend/src/components/Badge.tsx b/frontend/src/components/Badge.tsx
@@ -1,6 +1,5 @@
 import type { ReactNode } from "react";
 import clsx from "clsx";
-import classes from "./Badge.module.css";
 
 type Props = {
   /** class on badge */
@@ -14,7 +13,13 @@ type Props = {
  * directly.
  */
 const Badge = ({ className, children }: Props) => (
-  <span className={clsx(className, classes.badge)} aria-hidden="true">
+  <span
+    className={clsx(
+      "bg-pale text-deep grid size-[1.5em] place-items-center rounded-full text-[1rem] font-bold",
+      className,
+    )}
+    aria-hidden="true"
+  >
     {children}
   </span>
 );

diff --git a/frontend/src/components/Button.module.css b/frontend/src/components/Button.module.css
diff --git a/frontend/src/components/Button.tsx b/frontend/src/components/Button.tsx
@@ -3,7 +3,6 @@ import clsx from "clsx";
 import { useForm } from "@/components/Form";
 import Link from "@/components/Link";
 import Tooltip from "@/components/Tooltip";
-import classes from "./Button.module.css";
 
 type Props = Base & Description & (_Link | _Button);
 
@@ -14,6 +13,8 @@ type Base = {
   flip?: boolean;
   /** look */
   design?: "normal" | "hollow" | "critical";
+  /** sizing */
+  size?: "compact" | "normal";
   /** class on button */
   className?: string;
 };
@@ -49,6 +50,7 @@ const Button = ({
   icon,
   flip = false,
   design = "normal",
+  size = "normal",
   className,
   tooltip,
   ...props
@@ -67,9 +69,15 @@ const Button = ({
   );
 
   /** class name string */
-  const _class = clsx(className, classes.button, classes[design], {
-    [classes.square!]: !text && !!icon,
-  });
+  const _class = clsx(
+    "gap-2",
+    size === "compact" ? "p-1" : "p-3",
+    !!icon && !text ? "rounded-full" : "rounded",
+    design === "hollow" && "text-accent hover:text-deep",
+    design === "normal" && "bg-accent text-white hover:bg-deep outline-accent",
+    design === "critical" && "bg-black text-white hover:bg-deep outline-black",
+    className,
+  );
 
   /** link to parent form component */
   const form = useForm();

diff --git a/frontend/src/components/Chart.module.css b/frontend/src/components/Chart.module.css