diff --git a/package-lock.json b/package-lock.json
index 3039706..5a0ba13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "name": "chess-scribe-website",
       "dependencies": {
+        "@fontsource-variable/inter": "^5.2.8",
         "@socialgouv/matomo-next": "^1.13.1",
         "@tailwindcss/vite": "^4.1.18",
         "@tanstack/react-devtools": "latest",
@@ -760,6 +761,15 @@
         }
       }
     },
+    "node_modules/@fontsource-variable/inter": {
+      "version": "5.2.8",
+      "resolved": "https://registry.npmjs.org/@fontsource-variable/inter/-/inter-5.2.8.tgz",
+      "integrity": "sha512-kOfP2D+ykbcX/P3IFnokOhVRNoTozo5/JxhAIVYLpea/UBmCQ/YWPBfWIDuBImXX/15KH+eKh4xpEUyS2sQQGQ==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@img/colour": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@img/colour/-/colour-1.1.0.tgz",
diff --git a/package.json b/package.json
index 3576fa8..93af9d2 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "check": "biome check"
   },
   "dependencies": {
+    "@fontsource-variable/inter": "^5.2.8",
     "@socialgouv/matomo-next": "^1.13.1",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-devtools": "latest",
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index c0c3822..353988c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -6,7 +6,7 @@ import logo from "@/assets/images/logo.svg?url";
 export default function Header() {
 	return (
 		<header>
-			<nav className="w-full max-w-screen-2xl place-self-center p-8 text-neutral">
+			<nav className="w-full max-w-screen-2xl place-self-center p-8">
 				<div className="container mx-auto flex items-center justify-between">
 					<div className="flex items-center">
 						<Link to="/" className="flex flex-row items-center justify-center">
@@ -17,7 +17,7 @@ export default function Header() {
 								height={50}
 								className="mr-4"
 							/>
-							<span className="hidden text-2xl font-extrabold text-primary sm:block">
+							<span className="nav-title hidden text-2xl font-extrabold sm:block">
 								ChessScribe
 							</span>
 						</Link>
@@ -26,19 +26,13 @@ export default function Header() {
 					<div>
 						<ul className="flex flex-1 items-center gap-14 font-semibold">
 							<li>
-								<Link
-									to="/chessboard"
-									className="decoration-2 underline-offset-8 hover:text-primary hover:underline"
-								>
+								<Link to="/chessboard" className="nav-item">
 									Chessboard
 								</Link>
 							</li>
 
 							<li>
-								<Link
-									to="/contact"
-									className="decoration-2 underline-offset-8 hover:text-primary hover:underline"
-								>
+								<Link to="/contact" className="nav-item">
 									Contact
 								</Link>
 							</li>
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index c74314a..30d322a 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -18,7 +18,7 @@ export const Route = createRootRoute({
 				content: "width=device-width, initial-scale=1",
 			},
 			{
-				title: "TanStack Start Starter",
+				title: "ChessScribe",
 			},
 		],
 		links: [
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index f732d82..89b1eb0 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,87 +1,87 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { createFileRoute } from "@tanstack/react-router";
 
-export const Route = createFileRoute('/')({ component: App })
+export const Route = createFileRoute("/")({ component: App });
 
 function App() {
-  return (
-    <main className="page-wrap px-4 pb-8 pt-14">
-      <section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">
-        <div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />
-        <div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />
-        <p className="island-kicker mb-3">TanStack Start Base Template</p>
-        <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">
-          Start simple, ship quickly.
-        </h1>
-        <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">
-          This base starter intentionally keeps things light: two routes, clean
-          structure, and the essentials you need to build from scratch.
-        </p>
-        <div className="flex flex-wrap gap-3">
-          <a
-            href="/about"
-            className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"
-          >
-            About This Starter
-          </a>
-          <a
-            href="https://tanstack.com/router"
-            target="_blank"
-            rel="noopener noreferrer"
-            className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"
-          >
-            Router Guide
-          </a>
-        </div>
-      </section>
+	return (
+		<main className="page-wrap px-4 pb-8 pt-14">
+			{/*<section className="island-shell rise-in relative overflow-hidden rounded-[2rem] px-6 py-10 sm:px-10 sm:py-14">*/}
+			{/*  <div className="pointer-events-none absolute -left-20 -top-24 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(79,184,178,0.32),transparent_66%)]" />*/}
+			{/*  <div className="pointer-events-none absolute -bottom-20 -right-20 h-56 w-56 rounded-full bg-[radial-gradient(circle,rgba(47,106,74,0.18),transparent_66%)]" />*/}
+			{/*  <p className="island-kicker mb-3">TanStack Start Base Template</p>*/}
+			{/*  <h1 className="display-title mb-5 max-w-3xl text-4xl leading-[1.02] font-bold tracking-tight text-[var(--sea-ink)] sm:text-6xl">*/}
+			{/*    Start simple, ship quickly.*/}
+			{/*  </h1>*/}
+			{/*  <p className="mb-8 max-w-2xl text-base text-[var(--sea-ink-soft)] sm:text-lg">*/}
+			{/*    This base starter intentionally keeps things light: two routes, clean*/}
+			{/*    structure, and the essentials you need to build from scratch.*/}
+			{/*  </p>*/}
+			{/*  <div className="flex flex-wrap gap-3">*/}
+			{/*    <a*/}
+			{/*      href="/about"*/}
+			{/*      className="rounded-full border border-[rgba(50,143,151,0.3)] bg-[rgba(79,184,178,0.14)] px-5 py-2.5 text-sm font-semibold text-[var(--lagoon-deep)] no-underline transition hover:-translate-y-0.5 hover:bg-[rgba(79,184,178,0.24)]"*/}
+			{/*    >*/}
+			{/*      About This Starter*/}
+			{/*    </a>*/}
+			{/*    <a*/}
+			{/*      href="https://tanstack.com/router"*/}
+			{/*      target="_blank"*/}
+			{/*      rel="noopener noreferrer"*/}
+			{/*      className="rounded-full border border-[rgba(23,58,64,0.2)] bg-white/50 px-5 py-2.5 text-sm font-semibold text-[var(--sea-ink)] no-underline transition hover:-translate-y-0.5 hover:border-[rgba(23,58,64,0.35)]"*/}
+			{/*    >*/}
+			{/*      Router Guide*/}
+			{/*    </a>*/}
+			{/*  </div>*/}
+			{/*</section>*/}
 
-      <section className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
-        {[
-          [
-            'Type-Safe Routing',
-            'Routes and links stay in sync across every page.',
-          ],
-          [
-            'Server Functions',
-            'Call server code from your UI without creating API boilerplate.',
-          ],
-          [
-            'Streaming by Default',
-            'Ship progressively rendered responses for faster experiences.',
-          ],
-          [
-            'Tailwind Native',
-            'Design quickly with utility-first styling and reusable tokens.',
-          ],
-        ].map(([title, desc], index) => (
-          <article
-            key={title}
-            className="island-shell feature-card rise-in rounded-2xl p-5"
-            style={{ animationDelay: `${index * 90 + 80}ms` }}
-          >
-            <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">
-              {title}
-            </h2>
-            <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>
-          </article>
-        ))}
-      </section>
+			{/*<section className="mt-8 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">*/}
+			{/*  {[*/}
+			{/*    [*/}
+			{/*      'Type-Safe Routing',*/}
+			{/*      'Routes and links stay in sync across every page.',*/}
+			{/*    ],*/}
+			{/*    [*/}
+			{/*      'Server Functions',*/}
+			{/*      'Call server code from your UI without creating API boilerplate.',*/}
+			{/*    ],*/}
+			{/*    [*/}
+			{/*      'Streaming by Default',*/}
+			{/*      'Ship progressively rendered responses for faster experiences.',*/}
+			{/*    ],*/}
+			{/*    [*/}
+			{/*      'Tailwind Native',*/}
+			{/*      'Design quickly with utility-first styling and reusable tokens.',*/}
+			{/*    ],*/}
+			{/*  ].map(([title, desc], index) => (*/}
+			{/*    <article*/}
+			{/*      key={title}*/}
+			{/*      className="island-shell feature-card rise-in rounded-2xl p-5"*/}
+			{/*      style={{ animationDelay: `${index * 90 + 80}ms` }}*/}
+			{/*    >*/}
+			{/*      <h2 className="mb-2 text-base font-semibold text-[var(--sea-ink)]">*/}
+			{/*        {title}*/}
+			{/*      </h2>*/}
+			{/*      <p className="m-0 text-sm text-[var(--sea-ink-soft)]">{desc}</p>*/}
+			{/*    </article>*/}
+			{/*  ))}*/}
+			{/*</section>*/}
 
-      <section className="island-shell mt-8 rounded-2xl p-6">
-        <p className="island-kicker mb-2">Quick Start</p>
-        <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">
-          <li>
-            Edit <code>src/routes/index.tsx</code> to customize the home page.
-          </li>
-          <li>
-            Update <code>src/components/Header.tsx</code> and{' '}
-            <code>src/components/Footer.tsx</code> for brand links.
-          </li>
-          <li>
-            Add routes in <code>src/routes</code> and tweak visual tokens in{' '}
-            <code>src/styles.css</code>.
-          </li>
-        </ul>
-      </section>
-    </main>
-  )
+			{/*<section className="island-shell mt-8 rounded-2xl p-6">*/}
+			{/*  <p className="island-kicker mb-2">Quick Start</p>*/}
+			{/*  <ul className="m-0 list-disc space-y-2 pl-5 text-sm text-[var(--sea-ink-soft)]">*/}
+			{/*    <li>*/}
+			{/*      Edit <code>src/routes/index.tsx</code> to customize the home page.*/}
+			{/*    </li>*/}
+			{/*    <li>*/}
+			{/*      Update <code>src/components/Header.tsx</code> and{' '}*/}
+			{/*      <code>src/components/Footer.tsx</code> for brand links.*/}
+			{/*    </li>*/}
+			{/*    <li>*/}
+			{/*      Add routes in <code>src/routes</code> and tweak visual tokens in{' '}*/}
+			{/*      <code>src/styles.css</code>.*/}
+			{/*    </li>*/}
+			{/*  </ul>*/}
+			{/*</section>*/}
+		</main>
+	);
 }
diff --git a/src/styles.css b/src/styles.css
index 94738a5..e3af7ea 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -1,33 +1,26 @@
-@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Manrope:wght@400;500;600;700;800&display=swap");
 @import "tailwindcss";
 @plugin "@tailwindcss/typography";
 
+/* inter-latin-wght-normal */
+@font-face {
+  font-family: 'Inter Variable';
+  font-style: normal;
+  font-display: swap;
+  font-weight: 100 900;
+  src: url('@fontsource-variable/inter/files/inter-latin-wght-normal.woff2') format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
 @theme {
-  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
+  --font-sans: "Inter Variable", sans-serif;
 }
 
 :root {
-  --primary: #6f884d;
+  --base-content: #1f2937;
+  --neutral-content: #4b5563;
+  --accent: #6f884d;
   --bg-base: #e7f3ec;
   --header-bg: rgba(251, 255, 248, 0.84);
-
-  --sea-ink: #173a40;
-  --sea-ink-soft: #416166;
-  --lagoon: #4fb8b2;
-  --lagoon-deep: #328f97;
-  --palm: #2f6a4a;
-  --sand: #e7f0e8;
-  --foam: #f3faf5;
-  --surface: rgba(255, 255, 255, 0.74);
-  --surface-strong: rgba(255, 255, 255, 0.9);
-  --line: rgba(23, 58, 64, 0.14);
-  --inset-glint: rgba(255, 255, 255, 0.82);
-  --kicker: rgba(47, 106, 74, 0.9);
-  --chip-bg: rgba(255, 255, 255, 0.8);
-  --chip-line: rgba(47, 106, 74, 0.18);
-  --link-bg-hover: rgba(255, 255, 255, 0.9);
-  --hero-a: rgba(79, 184, 178, 0.36);
-  --hero-b: rgba(47, 106, 74, 0.2);
 }
 
 * {
@@ -42,130 +35,53 @@ body,
 
 body {
   margin: 0;
-  color: var(--sea-ink);
-  font-family: var(--font-sans);
+  font-family: var(--font-sans), sans-serif;
   background-color: var(--bg-base);
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-a {
-  color: var(--lagoon-deep);
-  text-decoration-color: rgba(50, 143, 151, 0.4);
-  text-decoration-thickness: 1px;
-  text-underline-offset: 2px;
+.nav-title {
+  color: var(--accent);
 }
 
-a:hover {
-  color: #246f76;
-}
+.nav-item {
+  color: var(--neutral-content);
 
-code {
-  font-size: 0.9em;
-  border: 1px solid var(--line);
-  background: color-mix(in oklab, var(--surface-strong) 82%, white 18%);
-  border-radius: 7px;
-  padding: 2px 7px;
-}
-
-pre code {
-  border: 0;
-  background: transparent;
-  padding: 0;
-  border-radius: 0;
-  font-size: inherit;
-  color: inherit;
-}
-
-.page-wrap {
-  width: min(1080px, calc(100% - 2rem));
-  margin-inline: auto;
-}
-
-.display-title {
-  font-family: "Fraunces", Georgia, serif;
-}
-
-.island-shell {
-  border: 1px solid var(--line);
-  background: linear-gradient(165deg, var(--surface-strong), var(--surface));
-  box-shadow:
-    0 1px 0 var(--inset-glint) inset,
-    0 22px 44px rgba(30, 90, 72, 0.1),
-    0 6px 18px rgba(23, 58, 64, 0.08);
-  backdrop-filter: blur(4px);
-}
-
-.feature-card {
-  background: linear-gradient(165deg, color-mix(in oklab, var(--surface-strong) 93%, white 7%), var(--surface));
-  box-shadow:
-    0 1px 0 var(--inset-glint) inset,
-    0 18px 34px rgba(30, 90, 72, 0.1),
-    0 4px 14px rgba(23, 58, 64, 0.06);
-}
-
-.feature-card:hover {
-  transform: translateY(-2px);
-  border-color: color-mix(in oklab, var(--lagoon-deep) 35%, var(--line));
-}
-
-button,
-.island-shell,
-a {
-  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,
-    transform 180ms ease;
-}
-
-.island-kicker {
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
-  font-weight: 700;
-  font-size: 0.69rem;
-  color: var(--kicker);
-}
-
-.nav-link {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  text-decoration: none;
-  color: var(--sea-ink-soft);
-}
-
-.nav-link::after {
-  content: "";
-  position: absolute;
-  left: 0;
-  bottom: -6px;
-  width: 100%;
-  height: 2px;
-  transform: scaleX(0);
-  transform-origin: left;
-  background: linear-gradient(90deg, var(--lagoon), #7ed3bf);
-  transition: transform 170ms ease;
-}
-
-.nav-link:hover,
-.nav-link.is-active {
-  color: var(--sea-ink);
-}
-
-.nav-link:hover::after,
-.nav-link.is-active::after {
-  transform: scaleX(1);
-}
-
-@media (max-width: 640px) {
-  .nav-link::after {
-    bottom: -4px;
+  &:hover {
+    color: var(--accent);
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 8px;
   }
 }
 
-.site-footer {
-  border-top: 1px solid var(--line);
-  background: color-mix(in oklab, var(--header-bg) 84%, transparent 16%);
-}
+/*a {*/
+/*  text-decoration-thickness: 1px;*/
+/*  text-underline-offset: 2px;*/
+/*}*/
+
+/*a:hover {*/
+/*  color: #246f76;*/
+/*}*/
+
+/*.page-wrap {*/
+/*  width: min(1080px, calc(100% - 2rem));*/
+/*  margin-inline: auto;*/
+/*}*/
+
+/*button,*/
+/*a {*/
+/*  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease,*/
+/*    transform 180ms ease;*/
+/*}*/
+
+/*@media (max-width: 640px) {*/
+/*  .nav-link::after {*/
+/*    bottom: -4px;*/
+/*  }*/
+/*}*/
 
 .rise-in {
   animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both;