From c63a2adf4e869e4ec996b47e01a8e56af7733fd6 Mon Sep 17 00:00:00 2001
From: SSHari <thesshguy@gmail.com>
Date: Sat, 15 Nov 2025 16:40:35 -0600
Subject: [PATCH] feat: update overall theme

---
 app/components/AnimatedName.tsx |   6 +-
 app/components/Header.tsx       |  84 +++++++------
 app/routes/_index.tsx           | 156 +++++++++++++++---------
 app/routes/about.tsx            | 203 +++++++++++++++++++++++---------
 app/tailwind.css                |  76 ++++++++++--
 tailwind.config.js              |  20 ++++
 6 files changed, 372 insertions(+), 173 deletions(-)

diff --git a/app/components/AnimatedName.tsx b/app/components/AnimatedName.tsx
index e2f4344..fc6513e 100644
--- a/app/components/AnimatedName.tsx
+++ b/app/components/AnimatedName.tsx
@@ -31,7 +31,7 @@ export default function AnimatedName(props: AnimatedNameProps) {
       <title id={id}>Sai Hari</title>
       <g
         transform="matrix(0.26458333,0,0,0.26458333,-36.721026,13.30472)"
-        className="stroke-[hsl(var(--color-gray-800))] stroke-[6]"
+        className="stroke-[hsl(var(--color-warm-black))] stroke-[6]"
       >
         {namePaths.map(({ letter, path }, index) => (
           <motion.path
@@ -40,12 +40,12 @@ export default function AnimatedName(props: AnimatedNameProps) {
               hidden: {
                 opacity: 0,
                 pathLength: 0,
-                fill: 'hsl(var(--color-white))',
+                fill: 'hsl(var(--color-cream))',
               },
               visible: {
                 opacity: 1,
                 pathLength: 1,
-                fill: 'hsl(var(--color-gray-700))',
+                fill: 'hsl(var(--color-warm-black))',
               },
             }}
             initial="hidden"
diff --git a/app/components/Header.tsx b/app/components/Header.tsx
index 0fd5715..22982f6 100644
--- a/app/components/Header.tsx
+++ b/app/components/Header.tsx
@@ -1,41 +1,9 @@
-import { Link, NavLink, useMatches, type NavLinkProps } from '@remix-run/react';
+import { Link, NavLink, useMatches } from '@remix-run/react';
 import { motion, useInView } from 'framer-motion';
 import { useRef } from 'react';
 import { cls } from '~/utils/helpers';
 import AnimatedName from './AnimatedName';
 
-type AnimatedLinkProps = NavLinkProps & {
-  delayFactor: number;
-};
-
-function AnimatedLink({ delayFactor, ...props }: AnimatedLinkProps) {
-  return (
-    <motion.div
-      variants={{
-        hidden: { opacity: 0 },
-        visible: { opacity: 1 },
-      }}
-      initial="hidden"
-      animate="visible"
-      transition={{
-        delay: 0.25 * delayFactor,
-        default: { duration: 1.25, ease: 'easeInOut' },
-        opacity: { duration: 0.6, ease: [1, 0, 0.8, 1] },
-      }}
-    >
-      <NavLink
-        {...props}
-        className={({ isActive }) =>
-          cls(
-            'rtl inline-block text-lg font-medium transition-colors duration-200 after:block after:h-[2px] after:w-0 after:bg-gray-950 after:transition-[width] after:duration-200 hover:text-gray-950 hover:after:w-full',
-            { 'text-gray-500': !isActive, 'text-gray-950': isActive },
-          )
-        }
-      />
-    </motion.div>
-  );
-}
-
 export function Header() {
   const match = useMatches();
   const { id } = match[match.length - 1];
@@ -44,24 +12,52 @@ export function Header() {
 
   return (
     <div>
-      <nav
+      <motion.nav
         className={cls(
-          'fixed left-0 right-0 top-0 z-50 flex h-16 items-center justify-between bg-white px-5 py-2 transition-shadow duration-75 ease-in md:px-24 lg:px-48',
+          'fixed left-0 right-0 top-0 z-50 flex h-20 items-center justify-between bg-cream/80 px-6 backdrop-blur-sm transition-all duration-200 md:px-12',
           {
-            'shadow-[0px_24px_48px_rgb(0,0,0,.16)]': !!ref.current && !isInView,
+            'border-b border-warm-gray-200': !!ref.current && !isInView,
           },
         )}
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.6, ease: 'easeOut' }}
       >
-        <Link to="/" className="h-full">
+        <Link to="/" className="h-full py-4">
           {id !== 'routes/_index' && <AnimatedName speed="normal" />}
         </Link>
-        <div className="mt-3 flex gap-2">
-          <AnimatedLink to="/about" delayFactor={1}>
-            About
-          </AnimatedLink>
-        </div>
-      </nav>
-      <div ref={ref} className="h-16 w-full" />
+        <motion.div
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 0.4, duration: 0.6 }}
+        >
+          <NavLink
+            to="/about"
+            className={({ isActive }) =>
+              cls('group relative text-base font-medium transition-colors', {
+                'text-warm-gray-400 hover:text-warm-black': !isActive,
+                'text-warm-black': isActive,
+              })
+            }
+          >
+            {({ isActive }) => (
+              <>
+                About
+                <span
+                  className={cls(
+                    'absolute -bottom-1 left-0 h-px bg-terracotta transition-all duration-300',
+                    {
+                      'w-0 group-hover:w-full': !isActive,
+                      'w-full': isActive,
+                    },
+                  )}
+                />
+              </>
+            )}
+          </NavLink>
+        </motion.div>
+      </motion.nav>
+      <div ref={ref} className="h-20 w-full" />
     </div>
   );
 }
diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index 2a2cb66..a419298 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,7 +1,7 @@
-import { motion } from 'framer-motion';
+import { AnimatePresence, motion } from 'framer-motion';
+import { useEffect, useState } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import AnimatedName from '~/components/AnimatedName';
-import { IconLink } from '~/components/IconLink';
 import { BlogIcon } from '~/icons/BlogIcon';
 import { GitHubIcon } from '~/icons/GitHubIcon';
 import { LinkedInIcon } from '~/icons/LinkedInIcon';
@@ -13,58 +13,104 @@ export const meta = () => {
 
 export default function Index() {
   return (
-    <main className="flex w-screen flex-1 flex-col items-center py-16 md:justify-center">
-      <div className="flex w-full max-w-screen-sm flex-col items-center gap-4 md:max-w-screen-md">
-        <h1 className="w-80 md:w-96 lg:w-[30rem]">
-          <AnimatedName speed="slow" />
-        </h1>
-        <motion.span
-          className="text-center text-xl font-bold text-gray-600 lg:text-2xl"
-          variants={{
-            hidden: { opacity: 0, translateY: '20px' },
-            visible: { opacity: 1, translateY: 0 },
-          }}
-          initial="hidden"
-          animate="visible"
-          transition={{
-            delay: 1,
-            default: { duration: 1.5, ease: 'easeInOut' },
-            opacity: { duration: 1, ease: [1, 0, 0.8, 1] },
-          }}
+    <main className="flex h-screen w-full flex-col items-center justify-center px-6 md:px-12">
+      <div className="flex w-full max-w-2xl flex-col items-center gap-12">
+        {/* Animated Name - Hero */}
+        <motion.div
+          className="w-full"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
         >
-          <ClientOnly>
-            {() => <>{[...tagLines].sort(() => 0.5 - Math.random())[0]}</>}
-          </ClientOnly>
-        </motion.span>
-        <div className="mt-1 flex gap-5">
-          {iconConfigs.map((config, index) => (
-            <motion.div
-              key={config.title}
-              variants={{
-                hidden: { opacity: 0, translateY: `${30 + 5 * index}px` },
-                visible: { opacity: 1, translateY: 0 },
-              }}
-              initial="hidden"
-              animate="visible"
+          <h1 className="mx-auto w-full max-w-sm md:max-w-md lg:max-w-lg">
+            <AnimatedName speed="slow" />
+          </h1>
+        </motion.div>
+
+        {/* Tagline with cycling animation */}
+        <ClientOnly>{() => <CyclingTagline tagLines={tagLines} />}</ClientOnly>
+
+        {/* Social Links */}
+        <motion.nav
+          className="flex items-center gap-8"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1.5, duration: 0.8, ease: 'easeOut' }}
+        >
+          {socialLinks.map((link, index) => (
+            <motion.a
+              key={link.label}
+              href={link.href}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="group relative flex flex-col items-center gap-2"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
               transition={{
-                delay: 1.2 + 0.1 * index,
-                default: { duration: 1.25, ease: 'easeInOut' },
-                opacity: { duration: 1, ease: [1, 0, 0.8, 1] },
+                delay: 1.6 + index * 0.1,
+                duration: 0.5,
+                ease: [0.34, 1.56, 0.64, 1],
               }}
+              aria-label={link.label}
             >
-              <IconLink
-                title={config.title}
-                Component={config.icon}
-                link={config.link}
-              />
-            </motion.div>
+              <div className="relative">
+                <link.icon className="h-6 w-6 stroke-warm-black stroke-[1.5] transition-all duration-300 group-hover:scale-110 group-hover:stroke-terracotta" />
+                <span className="absolute -bottom-2 left-1/2 h-px w-0 -translate-x-1/2 bg-terracotta transition-all duration-300 group-hover:w-full" />
+              </div>
+              <span className="text-xs font-medium text-warm-gray-400 opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                {link.label}
+              </span>
+            </motion.a>
           ))}
-        </div>
+        </motion.nav>
+
+        {/* Footer note */}
+        <motion.p
+          className="mt-6 text-center text-sm text-warm-gray-400"
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 2.2, duration: 1 }}
+        >
+          Developer. Builder. Thinker.
+        </motion.p>
       </div>
     </main>
   );
 }
 
+function CyclingTagline({ tagLines }: { tagLines: string[] }) {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentIndex((prev) => (prev + 1) % tagLines.length);
+    }, 4000);
+    return () => clearInterval(interval);
+  }, [tagLines.length]);
+
+  return (
+    <motion.div
+      className="relative flex h-12 w-full items-center justify-center overflow-hidden md:h-16"
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ delay: 1.2, duration: 0.8, ease: 'easeOut' }}
+    >
+      <AnimatePresence mode="wait">
+        <motion.p
+          key={currentIndex}
+          className="text-center text-xl font-light tracking-tight text-warm-gray-500 md:text-2xl lg:text-3xl"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          exit={{ opacity: 0, y: -20 }}
+          transition={{ duration: 0.6, ease: 'easeInOut' }}
+        >
+          {tagLines[currentIndex]}
+        </motion.p>
+      </AnimatePresence>
+    </motion.div>
+  );
+}
+
 const tagLines = [
   'Developer of Software',
   'I think, therefore I program.',
@@ -72,25 +118,25 @@ const tagLines = [
   'Fastest Code-Slinger in the West',
 ];
 
-const iconConfigs = [
+const socialLinks = [
   {
-    title: 'twitter',
+    label: 'Twitter',
+    href: 'https://twitter.com/TheSSHGuy',
     icon: TwitterIcon,
-    link: 'https://twitter.com/TheSSHGuy',
   },
   {
-    title: 'linkedin',
-    icon: LinkedInIcon,
-    link: 'https://www.linkedin.com/in/sshari/',
+    label: 'GitHub',
+    href: 'https://github.com/SSHari',
+    icon: GitHubIcon,
   },
   {
-    title: 'github',
-    icon: GitHubIcon,
-    link: 'https://github.com/SSHari',
+    label: 'LinkedIn',
+    href: 'https://www.linkedin.com/in/sshari/',
+    icon: LinkedInIcon,
   },
   {
-    title: 'blog',
+    label: 'Blog',
+    href: 'https://blog.thesshguy.com',
     icon: BlogIcon,
-    link: 'https://blog.thesshguy.com',
   },
 ];
diff --git a/app/routes/about.tsx b/app/routes/about.tsx
index 2237278..bf4b44f 100644
--- a/app/routes/about.tsx
+++ b/app/routes/about.tsx
@@ -1,6 +1,5 @@
+import { Link } from '@remix-run/react';
 import { motion } from 'framer-motion';
-import { ExternalLink } from '~/components/ExternalLink';
-import { ArrowCircleRightIcon } from '~/icons/ArrowCircleRight';
 
 export const meta = () => {
   return [{ title: 'Sai Hari | About' }];
@@ -8,66 +7,154 @@ export const meta = () => {
 
 export default function About() {
   return (
-    <main className="flex flex-col items-center py-16 md:justify-center">
-      <motion.div
-        variants={{
-          hidden: { opacity: 0, translateY: '30px' },
-          visible: { opacity: 1, translateY: 0 },
-        }}
-        initial="hidden"
-        animate="visible"
-        transition={{
-          delay: 0.5,
-          default: { duration: 1.25, ease: 'easeInOut' },
-          opacity: { duration: 0.75, ease: [1, 0, 0.8, 1] },
-        }}
-        className="mx-auto flex w-[90vw] max-w-[800px] flex-col items-center gap-4 rounded-2xl border border-transparent px-8 py-12 pb-12 pt-9 text-gray-500 shadow-[0px_24px_48px_rgb(0,0,0,.16)] md:h-[revert]"
-      >
-        <h1 className="w-full max-w-sm text-xl font-semibold text-gray-700 sm:max-w-md md:max-w-lg">
-          About Me
-        </h1>
+    <main className="flex min-h-screen w-full flex-col items-center justify-center px-6 py-24 md:px-12">
+      <div className="flex w-full max-w-3xl flex-col gap-20">
+        {/* Back link */}
+        <motion.div
+          initial={{ opacity: 0, x: -10 }}
+          animate={{ opacity: 1, x: 0 }}
+          transition={{ duration: 0.6, ease: 'easeOut' }}
+        >
+          <Link
+            to="/"
+            className="group inline-flex items-center gap-2 text-sm font-medium text-warm-gray-400 transition-colors hover:text-terracotta"
+          >
+            <span className="transition-transform group-hover:-translate-x-1">
+              ←
+            </span>
+            <span>Back</span>
+          </Link>
+        </motion.div>
 
-        <p className="max-w-sm text-justify text-lg font-medium sm:max-w-md md:max-w-lg">
-          Hey there! My name is Sai and I like to build things. Usually I'm
-          building for the web, but as long as I'm having fun, the{' '}
-          <span className="italic">where</span> isn't so important.
-        </p>
+        {/* About content */}
+        <motion.article
+          className="flex flex-col gap-12"
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.2, duration: 0.8, ease: 'easeOut' }}
+        >
+          {/* Header */}
+          <div className="flex flex-col gap-2">
+            <h1 className="text-4xl font-semibold tracking-tight text-warm-black md:text-5xl lg:text-6xl">
+              About Me
+            </h1>
+            <div className="h-px w-16 bg-terracotta" />
+          </div>
 
-        <p className="max-w-sm text-justify text-lg font-medium sm:max-w-md md:max-w-lg">
-          Today that building happens at{' '}
-          <ExternalLink href="https://www.dragos.com/" target="_blank">
-            Dragos
-          </ExternalLink>
-          , where our mission is to{' '}
-          <span className="italic">safeguard civilization</span>. My team is
-          pretty small, which is nice, because it means I get to build things
-          that span across our tech stack.
-        </p>
+          {/* Content sections */}
+          <div className="flex flex-col gap-8 text-lg leading-relaxed text-warm-gray-600 md:text-xl">
+            <motion.p
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.4, duration: 0.6 }}
+            >
+              Hey there! My name is Sai and I like to build things. Usually I'm
+              building for the web, but as long as I'm having fun, the{' '}
+              <span className="italic text-warm-black">where</span> isn't so
+              important.
+            </motion.p>
 
-        <p className="max-w-sm text-justify text-lg font-medium sm:max-w-md md:max-w-lg">
-          Here are some of the more recent technologies I've been working with:
-        </p>
+            <motion.p
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ delay: 0.5, duration: 0.6 }}
+            >
+              Today that building happens at{' '}
+              <a
+                href="https://www.dragos.com/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="relative text-warm-black underline decoration-terracotta decoration-2 underline-offset-4 transition-colors hover:text-terracotta"
+              >
+                Dragos
+              </a>
+              , where our mission is to{' '}
+              <span className="italic text-warm-black">
+                safeguard civilization
+              </span>
+              . My team is pretty small, which is nice, because it means I get
+              to build things that span across our tech stack.
+            </motion.p>
+          </div>
 
-        <ul className="grid w-full max-w-sm grid-cols-2 gap-2 py-2 text-justify text-lg font-medium sm:max-w-md md:max-w-lg md:grid-cols-3">
-          {[
-            'React',
-            'Node',
-            'TypeScript',
-            'Elasticsearch',
-            'AWS Services',
-            'Terraform',
-            'Docker',
-            'Kubernetes',
-            'Lua',
-            'Neovim',
-          ].map((tech) => (
-            <li key={tech} className="flex items-center gap-2">
-              <ArrowCircleRightIcon className="h-5 w-5 fill-gray-50" />
-              {tech}
-            </li>
-          ))}
-        </ul>
-      </motion.div>
+          {/* Tech stack */}
+          <motion.div
+            className="flex flex-col gap-6"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.6, duration: 0.6 }}
+          >
+            <h2 className="text-base font-medium uppercase tracking-wider text-warm-gray-400">
+              Recent Technologies
+            </h2>
+            <div className="grid grid-cols-2 gap-x-8 gap-y-3 md:grid-cols-3">
+              {technologies.map((tech, index) => (
+                <motion.div
+                  key={tech}
+                  className="group flex items-center gap-3"
+                  initial={{ opacity: 0, x: -10 }}
+                  animate={{ opacity: 1, x: 0 }}
+                  transition={{ delay: 0.7 + index * 0.05, duration: 0.4 }}
+                >
+                  <span className="font-mono text-xs text-terracotta">
+                    {String(index + 1).padStart(2, '0')}
+                  </span>
+                  <span className="text-base font-medium text-warm-black transition-colors group-hover:text-terracotta">
+                    {tech}
+                  </span>
+                </motion.div>
+              ))}
+            </div>
+          </motion.div>
+
+          {/* Optional: Get in touch section */}
+          <motion.div
+            className="mt-8 flex flex-col gap-4 rounded-2xl border border-warm-gray-200 bg-warm-white p-8"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.8, duration: 0.6 }}
+          >
+            <h2 className="text-lg font-semibold text-warm-black">
+              Let's connect
+            </h2>
+            <p className="text-base leading-relaxed text-warm-gray-600">
+              I'm always interested in hearing about new projects and
+              opportunities. Feel free to reach out on{' '}
+              <a
+                href="https://twitter.com/TheSSHGuy"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-warm-black underline decoration-terracotta decoration-2 underline-offset-2 transition-colors hover:text-terracotta"
+              >
+                Twitter
+              </a>{' '}
+              or{' '}
+              <a
+                href="https://www.linkedin.com/in/sshari/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-warm-black underline decoration-terracotta decoration-2 underline-offset-2 transition-colors hover:text-terracotta"
+              >
+                LinkedIn
+              </a>
+              .
+            </p>
+          </motion.div>
+        </motion.article>
+      </div>
     </main>
   );
 }
+
+const technologies = [
+  'React',
+  'Node',
+  'TypeScript',
+  'Elasticsearch',
+  'AWS Services',
+  'Terraform',
+  'Docker',
+  'Kubernetes',
+  'Lua',
+  'Neovim',
+];
diff --git a/app/tailwind.css b/app/tailwind.css
index 68a257c..5db8764 100644
--- a/app/tailwind.css
+++ b/app/tailwind.css
@@ -26,20 +26,39 @@
 
 :root {
   /* Theme CSS Variables */
-  /* COLORS */
-  --color-white: 0 0% 100%;
+  /* COLORS - Warm Minimalist Palette */
+  --color-cream: 40 25% 98%;
+  --color-warm-white: 35 20% 97%;
+  --color-off-white: 30 15% 96%;
+
+  --color-warm-black: 0 0% 10%;
+  --color-charcoal: 0 0% 15%;
+  --color-slate: 0 0% 25%;
+
+  --color-terracotta: 14 70% 58%;
+  --color-terracotta-dark: 14 65% 48%;
+  --color-rust: 18 60% 45%;
+
+  --color-warm-gray-100: 30 8% 92%;
+  --color-warm-gray-200: 30 6% 85%;
+  --color-warm-gray-300: 30 5% 70%;
+  --color-warm-gray-400: 30 4% 55%;
+  --color-warm-gray-500: 30 3% 40%;
+  --color-warm-gray-600: 30 3% 30%;
 
-  --color-gray-50: 210, 20%, 98%;
-  --color-gray-100: 220 14% 96%;
-  --color-gray-200: 220 13% 91%;
-  --color-gray-300: 216 12% 84%;
-  --color-gray-400: 218 11% 65%;
-  --color-gray-500: 220 9% 46%;
-  --color-gray-600: 215 14% 34%;
-  --color-gray-700: 217 19% 27%;
-  --color-gray-800: 215 28% 17%;
-  --color-gray-900: 221 39% 11%;
-  --color-gray-950: 228 84% 4%;
+  /* Legacy gray variables for compatibility */
+  --color-white: 0 0% 100%;
+  --color-gray-50: 30 15% 98%;
+  --color-gray-100: 30 12% 95%;
+  --color-gray-200: 30 8% 90%;
+  --color-gray-300: 30 6% 80%;
+  --color-gray-400: 30 5% 60%;
+  --color-gray-500: 30 4% 45%;
+  --color-gray-600: 30 3% 30%;
+  --color-gray-700: 0 0% 20%;
+  --color-gray-800: 0 0% 15%;
+  --color-gray-900: 0 0% 10%;
+  --color-gray-950: 0 0% 5%;
 }
 
 /* Global Styles */
@@ -65,6 +84,37 @@ body,
   margin: 0;
 }
 
+body {
+  background-color: hsl(var(--color-cream));
+  color: hsl(var(--color-warm-black));
+  position: relative;
+}
+
+/* Subtle grain texture overlay */
+body::before {
+  content: '';
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.03;
+  z-index: 9999;
+  pointer-events: none;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
+}
+
 .rtl {
   direction: rtl;
 }
+
+/* Smooth scroll behavior */
+html {
+  scroll-behavior: smooth;
+}
+
+/* Selection color */
+::selection {
+  background-color: hsl(var(--color-terracotta) / 0.2);
+  color: hsl(var(--color-warm-black));
+}
diff --git a/tailwind.config.js b/tailwind.config.js
index ce5c7aa..e12f657 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,6 +8,25 @@ module.exports = {
       transparent: 'transparent',
       current: 'currentColor',
       white: 'hsl(var(--color-white))',
+      cream: 'hsl(var(--color-cream))',
+      'warm-white': 'hsl(var(--color-warm-white))',
+      'off-white': 'hsl(var(--color-off-white))',
+      'warm-black': 'hsl(var(--color-warm-black))',
+      charcoal: 'hsl(var(--color-charcoal))',
+      slate: 'hsl(var(--color-slate))',
+      terracotta: {
+        DEFAULT: 'hsl(var(--color-terracotta))',
+        dark: 'hsl(var(--color-terracotta-dark))',
+      },
+      rust: 'hsl(var(--color-rust))',
+      'warm-gray': {
+        100: 'hsl(var(--color-warm-gray-100))',
+        200: 'hsl(var(--color-warm-gray-200))',
+        300: 'hsl(var(--color-warm-gray-300))',
+        400: 'hsl(var(--color-warm-gray-400))',
+        500: 'hsl(var(--color-warm-gray-500))',
+        600: 'hsl(var(--color-warm-gray-600))',
+      },
       gray: {
         50: 'hsl(var(--color-gray-50))',
         100: 'hsl(var(--color-gray-100))',
@@ -25,6 +44,7 @@ module.exports = {
     extend: {
       fontFamily: {
         sans: ['Satoshi-Variable', ...defaultTheme.fontFamily.sans],
+        mono: ['JetBrains Mono', ...defaultTheme.fontFamily.mono],
       },
     },
   },