diff --git a/package.json b/package.json
index d556089..639f78c 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
   "packageManager": "pnpm@10.10.0",
   "dependencies": {
     "@fontsource-variable/jetbrains-mono": "^5.2.8",
+    "@fontsource-variable/outfit": "^5.2.8",
     "@tailwindcss/vite": "^4.1.18",
     "animejs": "^4.2.2",
     "astro": "^5.16.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3051be6..a5fc6b3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -11,6 +11,9 @@ importers:
       '@fontsource-variable/jetbrains-mono':
         specifier: ^5.2.8
         version: 5.2.8
+      '@fontsource-variable/outfit':
+        specifier: ^5.2.8
+        version: 5.2.8
       '@tailwindcss/vite':
         specifier: ^4.1.18
         version: 4.1.18(vite@6.4.1(jiti@2.6.1)(lightningcss@1.30.2)(yaml@2.8.2))
@@ -281,6 +284,9 @@ packages:
   '@fontsource-variable/jetbrains-mono@5.2.8':
     resolution: {integrity: sha512-WBA9elru6Jdp5df2mES55wuOO0WIrn3kpXnI4+W2ek5u3ZgLS9XS4gmIlcQhiZOWEKl95meYdvK7xI+ETLCq/Q==}
 
+  '@fontsource-variable/outfit@5.2.8':
+    resolution: {integrity: sha512-4oUDCZx/Tcz6HZP423w/niqEH31Gks5IsqHV2ZZz1qKHaVIZdj2f0/S1IK2n8jl6Xo0o3N+3RjNHlV9R73ozQA==}
+
   '@img/colour@1.0.0':
     resolution: {integrity: sha512-A5P/LfWGFSl6nsckYtjw9da+19jB8hkJ6ACTGcDfEJ0aE+l2n2El7dsVM7UVHZQ9s2lmYMWlrS21YLy2IR1LUw==}
     engines: {node: '>=18'}
@@ -2206,6 +2212,8 @@ snapshots:
 
   '@fontsource-variable/jetbrains-mono@5.2.8': {}
 
+  '@fontsource-variable/outfit@5.2.8': {}
+
   '@img/colour@1.0.0':
     optional: true
 
diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
new file mode 100644
index 0000000..4d42800
Binary files /dev/null and b/public/favicon/android-chrome-192x192.png differ
diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png
new file mode 100644
index 0000000..a937433
Binary files /dev/null and b/public/favicon/android-chrome-512x512.png differ
diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png
new file mode 100644
index 0000000..4746bfc
Binary files /dev/null and b/public/favicon/apple-touch-icon.png differ
diff --git a/public/favicon/favicon-16x16.png b/public/favicon/favicon-16x16.png
new file mode 100644
index 0000000..ff8238d
Binary files /dev/null and b/public/favicon/favicon-16x16.png differ
diff --git a/public/favicon/favicon-32x32.png b/public/favicon/favicon-32x32.png
new file mode 100644
index 0000000..00befa4
Binary files /dev/null and b/public/favicon/favicon-32x32.png differ
diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico
new file mode 100644
index 0000000..5a85f9f
Binary files /dev/null and b/public/favicon/favicon.ico differ
diff --git a/public/favicon/site.webmanifest b/public/favicon/site.webmanifest
new file mode 100644
index 0000000..88a4b40
--- /dev/null
+++ b/public/favicon/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "2026.es.pycon.org",
+    "short_name": "PyConES 2026",
+    "icons": [
+        {
+            "src": "/favicon/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicon/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
\ No newline at end of file
diff --git a/src/components/LanguagePicker.astro b/src/components/LanguagePicker.astro
index dc3fe69..500dd76 100644
--- a/src/components/LanguagePicker.astro
+++ b/src/components/LanguagePicker.astro
@@ -31,7 +31,7 @@ const getPathForLang = (lang) => {
 }
 ---
 
-<ul aria-label={t['alttext']} class="flex gap-6 p-2 pr-6 justify-end text-green-400 font-mono">
+<ul aria-label={t['alttext']} class="flex gap-6 p-2 pr-6 justify-end text-pycon-yellow font-outfit">
   {
     languages.map((lang) => (
       <li>
diff --git a/src/components/index.astro b/src/components/index.astro
index 90971c0..2fd90f7 100644
--- a/src/components/index.astro
+++ b/src/components/index.astro
@@ -16,7 +16,7 @@ const t = texts[lang as keyof typeof texts]
   <main class="min-h-screen flex flex-col justify-center items-center text-center px-4">
     <div class="relative z-10 max-w-3xl">
       <h1
-        class="text-4xl md:text-7xl font-bold text-white font-mono tracking-tighter cursor-default"
+        class="text-4xl md:text-7xl font-bold text-white font-outfit tracking-tighter cursor-default"
         aria-label="PyConES 2026"
       >
         <span aria-hidden="true" data-value="PyConES 2026" id="matrix-text"> PyConES 2026 </span>
@@ -24,7 +24,7 @@ const t = texts[lang as keyof typeof texts]
 
       <h2
         id="subtitle-container"
-        class="mt-4 text-xl md:text-2xl text-green-400 font-mono h-8 flex justify-center items-center gap-2"
+        class="mt-4 text-xl md:text-2xl text-pycon-yellow font-mono h-8 flex justify-center items-center gap-2"
         aria-live="polite"
         aria-busy="true"
       >
@@ -42,7 +42,7 @@ const t = texts[lang as keyof typeof texts]
             id="sponsor-btn"
             type="button"
             aria-describedby="sponsor-hint"
-            class="group relative px-7 py-2 bg-green-500 text-black font-mono font-bold text-lg hover:bg-green-400 transition-all duration-300 shadow-[0_0_15px_rgba(34,197,94,0.5)] hover:shadow-[0_0_25px_rgba(34,197,94,0.8)] cursor-pointer focus:outline-none focus:ring-4 focus:ring-green-300/50 rounded-sm"
+            class="group relative px-7 py-2 bg-pycon-orange text-black font-mono font-bold text-lg hover:bg-pycon-yellow transition-all duration-300 shadow-[0_0_15px_rgba(255,130,0,0.5)] hover:shadow-[0_0_25px_rgba(255,130,0,0.8)] cursor-pointer focus:outline-none focus:ring-4 focus:ring-pycon-orange/50 rounded-sm"
           >
             <span
               class="absolute inset-0 w-full h-full bg-white opacity-0 group-hover:opacity-20 transition-opacity pointer-events-none"
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index b9cdac9..d0b6b6d 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -2,6 +2,7 @@
 import LanguagePicker from '../components/LanguagePicker.astro'
 import '../style/global.css'
 import '@fontsource-variable/jetbrains-mono'
+import '@fontsource-variable/outfit'
 import { ClientRouter } from 'astro:transitions'
 
 interface Props {
@@ -18,7 +19,10 @@ const { title, description = 'PyconES 2026' } = Astro.props
     <meta charset="UTF-8" />
     <meta name="description" content={description} />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="icon" type="image/svg+xml" href="/2026.es.pycon.org/favicon.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
+    <link rel="manifest" href="/favicon/site.webmanifest" />
     <meta name="generator" content={Astro.generator} />
 
     <title>{title}</title>
@@ -26,7 +30,7 @@ const { title, description = 'PyconES 2026' } = Astro.props
     <ClientRouter />
   </head>
 
-  <body class="bg-slate-900 text-white antialiased h-screen bg-linear-to-r from-gray to-blue-900 bg-radial">
+  <body class="bg-pycon-black text-white antialiased h-screen bg-[radial-gradient(ellipse_at_top,var(--tw-gradient-stops))] from-[#2a2a28] via-pycon-black to-pycon-black">
     <nav class="relative z-11">
       <LanguagePicker lang={lang} />
     </nav>
@@ -40,13 +44,8 @@ const { title, description = 'PyconES 2026' } = Astro.props
 <style is:global>
   /* Global CSS styles (Vanilla CSS) */
 
-  :root {
-    /* If you want to define native CSS variables */
-    --accent: 136, 58, 234;
-  }
-
   html {
-    font-family: system-ui, sans-serif;
+    font-family: 'Outfit Variable', sans-serif;
     scroll-behavior: smooth; /* Smooth scroll when navigating by anchors (#) */
   }
 
@@ -55,13 +54,13 @@ const { title, description = 'PyconES 2026' } = Astro.props
     width: 10px;
   }
   ::-webkit-scrollbar-track {
-    background: #0f172a;
+    background: #1d1d1b;
   }
   ::-webkit-scrollbar-thumb {
-    background: #334155;
+    background: #555554;
     border-radius: 5px;
   }
   ::-webkit-scrollbar-thumb:hover {
-    background: #475569;
+    background: #8e8e8d;
   }
 </style>
diff --git a/src/pages/[lang]/sponsors.astro b/src/pages/[lang]/sponsors.astro
index c044616..8ee0ad6 100644
--- a/src/pages/[lang]/sponsors.astro
+++ b/src/pages/[lang]/sponsors.astro
@@ -38,12 +38,12 @@ const {
 
 <Layout title={title}>
   <div
-    class="page-wrapper text-[#e5e5e5] font-sans min-h-screen w-full absolute top-0 left-0 z-10 overflow-x-hidden"
+    class="page-wrapper text-gray-200 min-h-screen w-full absolute top-0 left-0 z-10 overflow-x-hidden"
   >
     <div class="container-custom max-w-[1200px] mx-auto px-4 py-8">
       <!-- Hero -->
       <div class="text-center mb-16 pt-16">
-        <span class="text-green-400 font-mono px-2 py-1 rounded text-md"> {hero.date} </span>
+        <span class="text-pycon-yellow font-mono px-2 py-1 rounded text-md"> {hero.date} </span>
         <h1 class="text-4xl md:text-5xl font-extrabold my-4 leading-tight">
           {hero.title}<br />{hero.subtitle}
         </h1>
@@ -51,7 +51,7 @@ const {
 
       <!-- About -->
       <section class="mb-20">
-        <div class="bg-[#111] p-8 rounded-lg border border-[#333] text-center">
+        <div class="bg-white/5 p-8 rounded-lg border border-white/10 text-center">
           <h2 class="text-2xl font-bold mb-4">{about.title}</h2>
           <p class="text-gray-400 text-lg max-w-[700px] mx-auto">{about.body}</p>
         </div>
@@ -63,9 +63,9 @@ const {
         <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
           {
             stats.items.map((stat) => (
-              <div class="bg-[#111] p-4 rounded-lg border border-[#333] text-center">
+              <div class="bg-white/5 p-4 rounded-lg border border-white/10 text-center">
                 <div class="text-3xl mb-2">{stat.icon}</div>
-                <div class="text-2xl font-bold text-green-400">{stat.value}</div>
+                <div class="text-2xl font-bold text-pycon-yellow">{stat.value}</div>
                 <div class="text-sm text-gray-400">{stat.label}</div>
               </div>
             ))
@@ -79,8 +79,8 @@ const {
         <div class="grid md:grid-cols-3 gap-6">
           {
             objectives.items.map((obj) => (
-              <div class="bg-[#111] p-6 rounded-lg border border-[#333] text-center">
-                <div class="text-xl font-bold text-green-400 mb-2">{obj.title}</div>
+              <div class="bg-white/5 p-6 rounded-lg border border-white/10 text-center">
+                <div class="text-xl font-bold text-pycon-yellow mb-2">{obj.title}</div>
                 <div class="text-gray-400">{obj.desc}</div>
               </div>
             ))
@@ -93,8 +93,8 @@ const {
         <h2 class="text-center text-2xl font-bold mb-8">{location.title}</h2>
 
         <div class="grid md:grid-cols-2 gap-6">
-          <div class="bg-[#111] p-6 rounded-lg border border-[#333]">
-            <h3 class="text-xl font-bold text-green-400 mb-4">📍 {location.where}</h3>
+          <div class="bg-white/5 p-6 rounded-lg border border-white/10">
+            <h3 class="text-xl font-bold text-pycon-yellow mb-4">📍 {location.where}</h3>
             <p class="text-gray-400 mb-4">
               {location.body}
               <strong class="text-white">{location.bodyStrong}</strong>
@@ -105,8 +105,8 @@ const {
             </p>
           </div>
 
-          <div class="bg-[#111] p-6 rounded-lg border border-[#333]">
-            <h3 class="text-xl font-bold text-green-400 mb-4">📅 {when.title}</h3>
+          <div class="bg-white/5 p-6 rounded-lg border border-white/10">
+            <h3 class="text-xl font-bold text-pycon-yellow mb-4">📅 {when.title}</h3>
             <div class="space-y-3 text-gray-400">
               <p>
                 <strong class="text-white">{when.friday}: </strong>{when.fridayStrong}
@@ -128,8 +128,8 @@ const {
       <!-- Qué es PyConES -->
       <section class="mb-20">
         <div class="grid md:grid-cols-2 gap-6">
-          <div class="bg-[#111] p-6 rounded-lg border border-[#333]">
-            <h3 class="text-xl font-bold text-green-400 mb-4">{whatis.title}</h3>
+          <div class="bg-white/5 p-6 rounded-lg border border-white/10">
+            <h3 class="text-xl font-bold text-pycon-yellow mb-4">{whatis.title}</h3>
             <p class="text-gray-400 mb-4">
               {whatis.body1}
             </p>
@@ -138,8 +138,8 @@ const {
             </p>
           </div>
 
-          <div class="bg-[#111] p-6 rounded-lg border border-[#333]">
-            <h3 class="text-xl font-bold text-green-400 mb-4">{whySponsor.title}</h3>
+          <div class="bg-white/5 p-6 rounded-lg border border-white/10">
+            <h3 class="text-xl font-bold text-pycon-yellow mb-4">{whySponsor.title}</h3>
             <div class="space-y-4">
               {
                 whySponsor.items.map((item) => (
@@ -161,7 +161,7 @@ const {
       <section class="mb-20">
         <h2 class="text-center text-2xl font-bold mb-8">{audience.title}</h2>
 
-        <div class="bg-[#111] p-8 rounded-lg border border-[#333] mb-6">
+        <div class="bg-white/5 p-8 rounded-lg border border-white/10 mb-6">
           <h3 class="mb-6 font-mono text-white">{audience.seniority}</h3>
 
           <div
@@ -178,7 +178,7 @@ const {
             </div>
             <div
               style="width: 57%"
-              class="h-full min-w-[2rem] bg-green-400 text-black text-xs font-bold flex items-center justify-center"
+              class="h-full min-w-[2rem] bg-pycon-yellow text-black text-xs font-bold flex items-center justify-center"
             >
               57%
             </div>
@@ -195,7 +195,7 @@ const {
               <span><span aria-hidden="true">🌱</span> JUNIOR 38%</span>
             </div>
             <div class="flex items-center gap-2 text-sm text-gray-300">
-              <div class="w-3 h-3 rounded-sm flex-shrink-0 bg-green-400"></div>
+              <div class="w-3 h-3 rounded-sm flex-shrink-0 bg-pycon-yellow"></div>
               <span><span aria-hidden="true">🚀</span> SENIOR / PRO 57%</span>
             </div>
             <div class="flex items-center gap-2 text-sm text-gray-300">
@@ -212,16 +212,16 @@ const {
         <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
           {
             audience.items.map((item) => (
-              <div class="bg-[#111] p-4 rounded-lg border border-[#333] text-center">
+              <div class="bg-white/5 p-4 rounded-lg border border-white/10 text-center">
                 <div class="text-2xl mb-1">{item.icon}</div>
-                <div class="text-xl font-bold text-green-400">{item.value}</div>
+                <div class="text-xl font-bold text-pycon-yellow">{item.value}</div>
                 <div class="text-xs text-gray-400">{item.label}</div>
               </div>
             ))
           }
         </div>
 
-        <div class="bg-[#111] p-8 rounded-lg border border-[#333]">
+        <div class="bg-white/5 p-8 rounded-lg border border-white/10">
           <h3 class="mb-6 font-mono text-white">{interests.title}</h3>
           {
             (() => {
@@ -271,9 +271,9 @@ const {
         <div class="grid md:grid-cols-2 gap-6">
           {
             testimonials.items.map((t) => (
-              <figure class="bg-[#111] p-6 rounded-lg border border-[#333] border-l-4 border-l-green-400 flex flex-col h-full relative">
+              <figure class="bg-white/5 p-6 rounded-lg border border-white/10 border-l-4 border-l-pycon-yellow flex flex-col h-full relative">
                 <span
-                  class="absolute top-4 left-4 text-5xl text-green-400/20 font-serif leading-none select-none"
+                  class="absolute top-4 left-4 text-5xl text-pycon-yellow/20 font-serif leading-none select-none"
                   aria-hidden="true"
                 >
                   "
@@ -282,7 +282,7 @@ const {
                   <p>{t.quote}</p>
                 </blockquote>
                 <figcaption class="flex items-center gap-3 mt-auto pt-4">
-                  <div class="w-12 h-12 shrink-0 bg-green-400/20 rounded-full overflow-hidden shadow-lg shadow-black/50 flex items-end justify-center">
+                  <div class="w-12 h-12 shrink-0 bg-pycon-yellow/20 rounded-full overflow-hidden shadow-lg shadow-black/50 flex items-end justify-center">
                     {t.photo ? (
                       <img
                         src={t.photo}
@@ -294,7 +294,7 @@ const {
                         class="w-full h-full object-cover"
                       />
                     ) : (
-                      <span class="text-green-400 font-bold" aria-hidden="true">
+                      <span class="text-pycon-yellow font-bold" aria-hidden="true">
                         {t.name[0]}
                       </span>
                     )}
@@ -341,13 +341,13 @@ const {
       <section class="mb-20">
         <h2 class="text-center text-3xl font-bold mb-8">{tiers.title}</h2>
 
-        <div class="table-scroll overflow-x-auto pb-4 mb-8 border border-[#333] rounded-lg bg-[#0a0a0a]">
+        <div class="table-scroll overflow-x-auto pb-4 mb-8 border border-white/10 rounded-lg bg-black/40">
           <table class="pricing-table w-full border-separate border-spacing-0 min-w-[900px]">
             <thead>
               <tr>
                 <th
                   scope="col"
-                  class="w-[200px] p-4 text-center border-b border-white/10 align-bottom pb-6 sticky left-0 bg-[#0a0a0a] border-r border-[#333] z-10"
+                  class="w-[200px] p-4 text-center border-b border-r border-white/10 align-bottom pb-6 sticky left-0 bg-black/40 z-10"
                   >{tiers.column1}</th
                 >
                 {
@@ -384,18 +384,18 @@ const {
                     <tr>
                       <th
                         scope="row"
-                        class="p-4 text-left font-bold text-green-400 bg-[#0f0f0f] border-b border-white/10 sticky left-0 z-10"
+                        class="p-4 text-left font-bold text-pycon-yellow bg-white/5 border-b border-white/10 sticky left-0 z-10"
                         aria-label={category.category}
                       >
                         <span aria-hidden="true">{category.category}</span>
                       </th>
-                      <td colspan="5" class="bg-[#0f0f0f] border-b border-white/10" />
+                      <td colspan="5" class="bg-white/5 border-b border-white/10" />
                     </tr>
                     {category.rows.map((row) => (
                       <tr>
                         <th
                           scope="row"
-                          class="p-4 text-left border-b border-white/10 text-gray-400 sticky left-0 bg-[#0a0a0a] border-r border-[#333] z-10 text-sm font-normal"
+                          class="p-4 text-left border-b border-r border-white/10 text-gray-400 sticky left-0 bg-black/40 z-10 text-sm font-normal"
                         >
                           {row.label}
                         </th>
@@ -404,8 +404,8 @@ const {
                             class:list={[
                               'p-4 text-center border-b border-white/10 text-sm',
                               {
-                                'text-green-400': val === '✅',
-                                'text-red-400/60': val === '🚫',
+                                'text-pycon-yellow': val === '✅',
+                                'text-pycon-red': val === '🚫',
                               },
                             ]}
                           >
@@ -440,8 +440,8 @@ const {
         <div class="grid md:grid-cols-2 gap-4">
           {
             benefitDetails.items.map((detail) => (
-              <div class="bg-[#111] p-4 rounded-lg border border-[#333]">
-                <h4 class="font-bold text-green-400 mb-2">{detail.title}</h4>
+              <div class="bg-white/5 p-4 rounded-lg border border-white/10">
+                <h4 class="font-bold text-pycon-yellow mb-2">{detail.title}</h4>
                 <p class="text-gray-400 text-sm">{detail.desc}</p>
               </div>
             ))
@@ -455,10 +455,10 @@ const {
         <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-4">
           {
             addons.map((addon) => (
-              <div class="bg-[#111] p-5 border border-[#333] rounded-lg">
+              <div class="bg-white/5 p-5 border border-white/10 rounded-lg">
                 <div class="flex justify-between items-start mb-2">
                   <div class="font-bold text-white">{addon.name}</div>
-                  <div class="text-green-400 font-bold">{addon.price}</div>
+                  <div class="text-pycon-yellow font-bold">{addon.price}</div>
                 </div>
                 <div class="text-gray-400 text-sm mb-2">{addon.desc}</div>
                 <div class="text-xs text-gray-500"> {addon.available}</div>
@@ -471,7 +471,7 @@ const {
       <!-- Sobre Python España -->
       <section class="mb-20">
         <h2 class="text-center text-2xl font-bold mb-8">{pythonSpainPoints.title}</h2>
-        <div class="bg-[#111] p-8 rounded-lg border border-[#333] mb-6">
+        <div class="bg-white/5 p-8 rounded-lg border border-white/10 mb-6">
           <p class="text-gray-400 text-center max-w-[800px] mx-auto mb-8">
             {pythonSpainPoints.body}
           </p>
@@ -481,7 +481,7 @@ const {
                 <div class="flex gap-3">
                   <span class="text-2xl">{point.icon}</span>
                   <div>
-                    <strong class="text-green-400">{point.title}</strong>
+                    <strong class="text-pycon-yellow">{point.title}</strong>
                     <p class="text-gray-400 text-sm mt-1">{point.desc}</p>
                   </div>
                 </div>
@@ -493,7 +493,7 @@ const {
 
       <!-- CTA -->
       <section class="text-center mb-20">
-        <div class="bg-linear-to-r from-green-400/10 to-purple-400/10 p-12 rounded-lg border border-[#333]">
+        <div class="bg-linear-to-r from-pycon-yellow/10 to-pycon-red/10 p-12 rounded-lg border border-white/10">
           <h2 class="text-3xl font-bold mb-4">{contact.title}</h2>
           <p class="text-gray-400 max-w-[600px] mx-auto mb-8">
             {contact.body}
@@ -501,7 +501,7 @@ const {
           <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
             <a
               href={`mailto:${SPONSORS_EMAIL}?subject=${encodeURIComponent('Interés de patrocinio para PyConES 2026')}`}
-              class="bg-green-400 text-black font-bold px-8 py-4 no-underline rounded text-lg uppercase inline-block hover:bg-green-300 transition-colors"
+              class="bg-pycon-yellow text-black font-bold px-8 py-4 no-underline rounded text-lg uppercase inline-block hover:bg-pycon-yellow-75 transition-colors"
             >
               {contact.email}
             </a>
@@ -520,7 +520,7 @@ const {
                 href={link.url}
                 target="_blank"
                 rel="noopener noreferrer"
-                class="flex items-center gap-2 bg-[#111] px-4 py-2 rounded border border-[#333] hover:border-green-400 transition-colors text-gray-400 hover:text-green-400"
+                class="flex items-center gap-2 bg-white/5 px-4 py-2 rounded border border-white/10 hover:border-pycon-yellow transition-colors text-gray-400 hover:text-pycon-yellow"
               >
                 <span>{link.icon}</span>
                 <span>{link.label}</span>
diff --git a/src/style/global.css b/src/style/global.css
index d4b5078..ed9f9de 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -1 +1,43 @@
 @import 'tailwindcss';
+
+@theme {
+  /* Fonts */
+  --font-mono: 'JetBrains Mono Variable', monospace;
+  --font-outfit: 'Outfit Variable', sans-serif;
+
+  /* Font Weights */
+  --font-weight-thin: 100;
+  --font-weight-extralight: 200;
+  --font-weight-light: 300;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-weight-black: 900;
+
+  /* Colors */
+  --color-pycon-yellow: #ffc72c;
+  --color-pycon-yellow-100: #ffc72c;
+  --color-pycon-yellow-75: #ffd560;
+  --color-pycon-yellow-50: #ffe395;
+  --color-pycon-yellow-25: #fff1ca;
+
+  --color-pycon-orange: #ff8200;
+  --color-pycon-orange-100: #ff8200;
+  --color-pycon-orange-75: #ffa13f;
+  --color-pycon-orange-50: #ffc07f;
+  --color-pycon-orange-25: #ffdfbf;
+
+  --color-pycon-red: #f9423a;
+  --color-pycon-red-100: #f9423a;
+  --color-pycon-red-75: #fa716b;
+  --color-pycon-red-50: #fca09c;
+  --color-pycon-red-25: #fdcfcd;
+
+  --color-pycon-black: #1d1d1b;
+  --color-pycon-black-100: #1d1d1b;
+  --color-pycon-black-75: #555554;
+  --color-pycon-black-50: #8e8e8d;
+  --color-pycon-black-25: #c6c6c6;
+}
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 55aad95..b9b98ef 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -1,12 +1,5 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
-	theme: {
-		extend: {
-			fontFamily: {
-				mono: ['"JetBrains Mono Variable"', 'monospace'], 
-			},
-		},
-	},
-	plugins: [],
-}
\ No newline at end of file
+  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  plugins: [],
+}