diff --git a/apps/web/src/components/BestOfEthereum/BestOfEthereum.tsx b/apps/web/src/components/BestOfEthereum/BestOfEthereum.tsx
index 65af3fe3bf..00e620a98c 100644
--- a/apps/web/src/components/BestOfEthereum/BestOfEthereum.tsx
+++ b/apps/web/src/components/BestOfEthereum/BestOfEthereum.tsx
@@ -14,7 +14,7 @@ export function BestOfEthereum() {
         </p>
       </div>
       <div className="flex w-full max-w-[534px] flex-col space-y-2 lg:basis-1/2">
-        <div className="flex h-[460px] w-full max-w-[534px] flex-col justify-between bg-gray p-8">
+        <div className="flex h-[460px] w-full max-w-[534px] flex-col justify-between bg-gray-10 p-8">
           <h3 className="font-display text-8xl text-white lg:text-9xl">10x</h3>
           <div className="flex flex-col font-sans text-4xl uppercase text-white lg:text-5xl">
             <h3>Cheaper<br />Than<br />Ethereum</h3>
diff --git a/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx b/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx
index fcf5e92757..1e25e39bee 100644
--- a/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx
+++ b/apps/web/src/components/Bootcamp/Faq/FaqSidebar.tsx
@@ -8,7 +8,7 @@ export function FaqSidebar() {
           <p className="font-mono text-3xl uppercase">Frequently Asked Questions</p>
         </div>
 
-        <div className="h-[1px] w-full bg-muted opacity-40" />
+        <div className="h-[1px] w-full bg-gray-60 opacity-40" />
 
         <QuestionAccordion
           question="When will I hear back about my application?"
@@ -74,7 +74,7 @@ export function FaqSidebar() {
           question="What will I be able to do upon graduation?"
           answer="You will learn to deploy smart contracts and connect a web frontend to them – the foundation of building any onchain app."
         />
-        <div className="mb-40 h-[1px] w-full bg-muted opacity-40" />
+        <div className="mb-40 h-[1px] w-full bg-gray-60 opacity-40" />
       </div>
     </div>
   );
diff --git a/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx b/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx
index 6efc5c1541..d2f6b19f11 100644
--- a/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx
+++ b/apps/web/src/components/Bootcamp/Faq/QuestionAccordion.tsx
@@ -11,7 +11,7 @@ export function QuestionAccordion({ question, answer }: QuestionAccordionProps)
   const toggleOpen = useCallback(() => setIsOpen((o) => !o), [setIsOpen]);
 
   return (
-    <div className="flex flex-col gap-6 border-b border-gray pb-6 pt-5">
+    <div className="flex flex-col gap-6 border-b border-gray-10 pb-6 pt-5">
       <button
         type="button"
         className="flex flex-row justify-between py-2 text-base font-medium text-white"
diff --git a/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx b/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx
index a5b69b82b9..e140fc443c 100644
--- a/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx
+++ b/apps/web/src/components/Bootcamp/HowItWorks/HowItWorksCard.tsx
@@ -10,7 +10,7 @@ type FeatureCardProps = {
 
 export function HowItWorksCard({ featureItem: { number, title, description } }: FeatureCardProps) {
   return (
-    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-10   bg-gray p-8 md:w-[330px]">
+    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-10   bg-gray-10 p-8 md:w-[330px]">
       <p className="font-mono text-2xl uppercase text-white">{number}</p>
       <div className="flex flex-col space-y-4">
         {isValidElement(title) ? (
@@ -21,7 +21,7 @@ export function HowItWorksCard({ featureItem: { number, title, description } }:
         {isValidElement(description) ? (
           description
         ) : (
-          <p className="text-muted font-sans text-white">{description}</p>
+          <p className="text-gray-60 font-sans text-white">{description}</p>
         )}
       </div>
     </div>
diff --git a/apps/web/src/components/Commitment/Commitment.tsx b/apps/web/src/components/Commitment/Commitment.tsx
index 14dec1069c..f32a056589 100644
--- a/apps/web/src/components/Commitment/Commitment.tsx
+++ b/apps/web/src/components/Commitment/Commitment.tsx
@@ -24,7 +24,7 @@ export function Commitment() {
           </Link>
         </div>
       </div>
-      <div className="mt-10 flex max-w-[1440px] flex-row justify-between gap-4 self-center bg-gray p-4 lg:p-8">
+      <div className="mt-10 flex max-w-[1440px] flex-row justify-between gap-4 self-center bg-gray-10 p-4 lg:p-8">
         <GradientCircle className="h-[90px] w-[90px] md:h-[100px] md:w-[100px] xl:h-[163px] xl:w-[163px]" />
         <GradientCircle className="hidden h-[90px] w-[90px] md:h-[100px] md:w-[100px] lg:inline-block xl:h-[163px] xl:w-[163px]" />
         <GradientCircle className="hidden h-[90px] w-[90px] md:h-[100px] md:w-[100px] lg:inline-block xl:h-[163px] xl:w-[163px]" />
diff --git a/apps/web/src/components/Ecosystem/Card.tsx b/apps/web/src/components/Ecosystem/Card.tsx
index 7a738125d6..1d1c64eded 100644
--- a/apps/web/src/components/Ecosystem/Card.tsx
+++ b/apps/web/src/components/Ecosystem/Card.tsx
@@ -19,7 +19,7 @@ export function Card({ name, url, description, imageUrl, tags }: Props) {
       href={url}
       rel="noreferrer noopener"
       target="_blank"
-      className="flex w-full flex-col justify-start gap-8 bg-gray p-8 visited:opacity-50 hover:bg-darkgray"
+      className="flex w-full flex-col justify-start gap-8 bg-gray-10 p-8 visited:opacity-50 hover:bg-gray-dark"
     >
       <div className="flex flex-row justify-between">
         <div className="relative h-[80px] w-[80px] overflow-hidden rounded-[3px]">
@@ -32,7 +32,7 @@ export function Card({ name, url, description, imageUrl, tags }: Props) {
       <div className="flex flex-col gap-4">
         <div className="flex flex-col">
           <h3 className="font-mono text-xl uppercase text-white">{name}</h3>
-          <span className="muted truncate font-mono text-muted">
+          <span className="truncate font-mono text-gray-60">
             {getNiceDomainDisplayFromUrl(url)}
           </span>
         </div>
diff --git a/apps/web/src/components/Ecosystem/List.tsx b/apps/web/src/components/Ecosystem/List.tsx
index da0dcb3d80..71b74f88c8 100644
--- a/apps/web/src/components/Ecosystem/List.tsx
+++ b/apps/web/src/components/Ecosystem/List.tsx
@@ -107,7 +107,7 @@ export function List() {
             NO RESULTS FOR &ldquo;{searchText === '' ? selectedTag : searchText}
             &rdquo;
           </span>
-          <span className="font-sans text-muted">Try searching for another term</span>
+          <span className="font-sans text-gray-60">Try searching for another term</span>
         </div>
       )}
 
diff --git a/apps/web/src/components/Ecosystem/SearchBar.tsx b/apps/web/src/components/Ecosystem/SearchBar.tsx
index 124ab26a93..37e24016e8 100644
--- a/apps/web/src/components/Ecosystem/SearchBar.tsx
+++ b/apps/web/src/components/Ecosystem/SearchBar.tsx
@@ -67,7 +67,7 @@ export function SearchBar({ setSearchText }: Props) {
 
   return (
     <div
-      className="flex h-10 flex-row items-center gap-2 rounded-[56px] border border-muted p-2 md:w-full lg:w-80"
+      className="flex h-10 flex-row items-center gap-2 rounded-[56px] border border-gray-60 p-2 md:w-full lg:w-80"
     >
       <SearchIcon />
 
@@ -76,7 +76,7 @@ export function SearchBar({ setSearchText }: Props) {
         id="appsSearchBar"
         value={text}
         onChange={onChange}
-        className="w-full bg-black font-sans text-base text-white placeholder:text-muted focus:outline-none"
+        className="w-full bg-black font-sans text-base text-white placeholder:text-gray-60 focus:outline-none"
         placeholder="Search"
         aria-label='Search for apps and integrations in the Base ecosystem'
       />
diff --git a/apps/web/src/components/Ecosystem/TagChip.tsx b/apps/web/src/components/Ecosystem/TagChip.tsx
index 759478fe58..45318dd9d8 100644
--- a/apps/web/src/components/Ecosystem/TagChip.tsx
+++ b/apps/web/src/components/Ecosystem/TagChip.tsx
@@ -14,8 +14,8 @@ export function TagChip({ tag, isSelected, setSelectedTag }: Props) {
   return (
     <button type="button" onClick={select}>
       <div
-        className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-muted px-8 hover:border-white ${
-          isSelected ? 'bg-muted' : ''
+        className={`flex h-10 shrink-0 cursor-pointer flex-col justify-center rounded-[100px] border border-gray-60 px-8 hover:border-white ${
+          isSelected ? 'bg-gray-60' : ''
         }`}
       >
         <span className="text-center font-mono text-base uppercase text-white">{tag}</span>
diff --git a/apps/web/src/components/Features/FeatureCard.tsx b/apps/web/src/components/Features/FeatureCard.tsx
index ce3571b571..50c26a50b4 100644
--- a/apps/web/src/components/Features/FeatureCard.tsx
+++ b/apps/web/src/components/Features/FeatureCard.tsx
@@ -80,7 +80,7 @@ function Terminal() {
 
 export function FeatureCard({ featureItem: { icon, title, description } }: FeatureCardProps) {
   return (
-    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-16 bg-gray p-8 md:w-[330px]">
+    <div className="flex w-[290px] flex-shrink-0 flex-col space-y-16 bg-gray-10 p-8 md:w-[330px]">
       {
         { ethereum: <Ethereum />, base: <Base />, terminal: <Terminal />, coinbase: <Coinbase /> }[
           icon
diff --git a/apps/web/src/components/Layout/Footer/Footer.tsx b/apps/web/src/components/Layout/Footer/Footer.tsx
index 0e8d545f4a..8ea640462d 100644
--- a/apps/web/src/components/Layout/Footer/Footer.tsx
+++ b/apps/web/src/components/Layout/Footer/Footer.tsx
@@ -14,7 +14,7 @@ export function Footer() {
   const handleCloseModal = useCallback(() => setIsOpen(false), []);
 
   return (
-    <footer className="z-10 mt-auto flex w-full justify-center bg-gray lg:pb-64">
+    <footer className="z-10 mt-auto flex w-full justify-center bg-gray-10 lg:pb-64">
       <div className="flex w-full max-w-[1440px] flex-col justify-between p-8 lg:flex-row">
         <div className="flex flex-col font-display text-sm text-white">
           <div className="bg-blue-300 flex w-32 flex-row items-start justify-start">
diff --git a/apps/web/src/components/Layout/Nav/MobileMenu.tsx b/apps/web/src/components/Layout/Nav/MobileMenu.tsx
index 714e708716..fbdc10e07c 100644
--- a/apps/web/src/components/Layout/Nav/MobileMenu.tsx
+++ b/apps/web/src/components/Layout/Nav/MobileMenu.tsx
@@ -148,7 +148,7 @@ function MobileMenu({ color }: MobileMenuProps) {
       <AnimatePresence>
         {showMobileMenu && (
           <motion.nav
-            className="fixed left-0 top-0 z-30 m-0 h-screen w-screen bg-gray p-8"
+            className="fixed left-0 top-0 z-30 m-0 h-screen w-screen bg-gray-10 p-8"
             initial={mobileMenuInitial}
             animate={mobileMenuAnimation}
             exit={mobileMenuInitial}
diff --git a/apps/web/src/components/Layout/Nav/NftBanner.tsx b/apps/web/src/components/Layout/Nav/NftBanner.tsx
index 3b7fe4a870..7e1165116b 100644
--- a/apps/web/src/components/Layout/Nav/NftBanner.tsx
+++ b/apps/web/src/components/Layout/Nav/NftBanner.tsx
@@ -19,8 +19,8 @@ export function NftBanner() {
   }
 
   return (
-    <div className="z-10 flex w-full flex-row justify-center bg-yellow text-black">
-      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow p-2 pl-8 pr-6">
+    <div className="z-10 flex w-full flex-row justify-center bg-yellow-70 text-black">
+      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-70 p-2 pl-8 pr-6">
         <Link href={href}>
           <span className="text-xs  md:text-base">
             Claim your Base Quest Anniversary NFT today!
diff --git a/apps/web/src/components/Layout/Nav/OcsBanner.tsx b/apps/web/src/components/Layout/Nav/OcsBanner.tsx
index 80833c9a7f..a58262d6fd 100644
--- a/apps/web/src/components/Layout/Nav/OcsBanner.tsx
+++ b/apps/web/src/components/Layout/Nav/OcsBanner.tsx
@@ -19,8 +19,8 @@ export function OcsBanner() {
   }
 
   return (
-    <div className="z-10 flex w-full flex-row justify-center bg-yellow text-black">
-      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow p-2 pl-8 pr-6">
+    <div className="z-10 flex w-full flex-row justify-center bg-yellow-70 text-black">
+      <div className="z-10 flex w-full max-w-[1440px] flex-row items-center justify-between self-center bg-yellow-70 p-2 pl-8 pr-6">
         <Link href={href}>
           <span className="text-xs  md:text-base">Join the Onchain Summer Buildathon!</span>
         </Link>
diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js
index 1f1c50c82b..d5a19396e4 100644
--- a/apps/web/tailwind.config.js
+++ b/apps/web/tailwind.config.js
@@ -12,11 +12,236 @@ module.exports = {
   ],
   theme: {
     colors: {
-      gray: '#1E2025',
-      darkgray: '#0F1012',
       white: '#FFFFFF',
-      muted: '#8A919E',
-      yellow: '#FFD200',
+      black: '#000000',
+      ocsblue: 'rgba(0, 82, 255, 1)',
+      ocspink: '#FF8DCF',
+      ocsyellow: '#FEE002',
+      blue: {
+        0: '#001033',
+        5: '#011D5B',
+        10: '#012A82',
+        15: '#03339A',
+        20: '#053BB1',
+        30: '#0A48CE',
+        40: '#1354E1',
+        50: '#2162EE',
+        60: '#3773F5',
+        70: '#578BFA',
+        80: '#84AAFD',
+        90: '#B9CFFF',
+        100: '#F5F8FF',
+        400: '#688CEC',
+        500: '#0455FF',
+        600: '#0052FF',
+      },
+      gray: {
+        dark: '#0F1012',
+        0: '#0A0B0D',
+        5: '#141519',
+        10: '#1E2025',
+        15: '#282B31',
+        20: '#32353D',
+        30: '#464B55',
+        40: '#5B616E',
+        50: '#727886',
+        60: '#8A919E',
+        70: '#A5AAB6',
+        80: '#C1C6CF',
+        90: '#E0E2E7',
+        100: '#FFFFFF',
+      },
+      green: {
+        0: '#00331E',
+        5: '#003D24',
+        10: '#01472A',
+        15: '#025230',
+        20: '#025C37',
+        30: '#067044',
+        40: '#0B8552',
+        50: '#159962',
+        60: '#27AD75',
+        70: '#44C28D',
+        80: '#6FD6AB',
+        90: '#ABEBD0',
+        100: '#F5FFFB',
+      },
+      indigo: {
+        0: '#080F33',
+        5: '#0E1B5B',
+        10: '#152782',
+        15: '#1B2F9A',
+        20: '#2138B1',
+        30: '#3049CE',
+        40: '#445CE1',
+        50: '#5C71EE',
+        60: '#798AF5',
+        70: '#99A5FA',
+        80: '#BBC2FD',
+        90: '#DBDFFF',
+        100: '#F6F7FF',
+      },
+      orange: {
+        0: '#330D00',
+        5: '#4F1400',
+        10: '#6B1C01',
+        15: '#832402',
+        20: '#9B2C04',
+        30: '#BD3B09',
+        40: '#D54C12',
+        50: '#E66020',
+        60: '#F07836',
+        70: '#F89656',
+        80: '#FCB983',
+        90: '#FEDBB9',
+        100: '#FFFAF5',
+      },
+      pink: {
+        0: '#330A2C',
+        5: '#460E3D',
+        10: '#59134E',
+        15: '#6C185E',
+        20: '#7E1E6F',
+        30: '#9F2C8E',
+        40: '#BB40AA',
+        50: '#D058C1',
+        60: '#E175D6',
+        70: '#ED95E6',
+        80: '#F6B8F3',
+        90: '#FCD9FB',
+        100: '#FFF5FF',
+      },
+      purple: {
+        0: '#190D33',
+        5: '#2E175B',
+        10: '#422282',
+        15: '#502A9A',
+        20: '#5D32B1',
+        30: '#7443CE',
+        40: '#8956E1',
+        50: '#9D6DEE',
+        60: '#B388F5',
+        70: '#C9A4FA',
+        80: '#DDC3FD',
+        90: '#EEDFFF',
+        100: '#FBF7FF',
+      },
+      red: {
+        0: '#330004',
+        5: '#4F0007',
+        10: '#6B010A',
+        15: '#83040E',
+        20: '#9B0713',
+        30: '#BD1321',
+        40: '#D52634',
+        50: '#E6404E',
+        60: '#F0616D',
+        70: '#F88690',
+        80: '#FCAEB5',
+        90: '#FED5D8',
+        100: '#FFF5F6',
+      },
+      teal: {
+        0: '#001426',
+        5: '#00203B',
+        10: '#002D4F',
+        15: '#003A63',
+        20: '#004876',
+        30: '#006399',
+        40: '#007DB6',
+        50: '#0095CD',
+        60: '#00AADF',
+        70: '#06BEEC',
+        80: '#45D9F5',
+        90: '#95EFFB',
+        100: '#F0FEFF',
+      },
+      yellow: {
+        0: '#000000',
+        5: '#160700',
+        10: '#2B0F00',
+        15: '#411B00',
+        20: '#582900',
+        30: '#814900',
+        40: '#A96D00',
+        50: '#CC9200',
+        60: '#E9B300',
+        70: '#FFD200',
+        80: '#FFDF44',
+        90: '#FFED96',
+        100: '#FFFCF1',
+      },
+      elevation: {
+        level: {
+          1: '#D9D9D9',
+          2: '#D9D9D9',
+        }
+      },
+      palette: {
+        background: '#0A0B0D',
+        backgroundAlternate: '#141519',
+        backgroundOverlay: '#0A0B0D',
+        foreground: '#FFFFFF',
+        foregroundMuted: '#8A919E',
+        line: '#8A919E',
+        lineHeavy: '#8A919E',
+        negative: '#F0616D',
+        negativeForeground: '#0A0B0D',
+        positive: '#27AD75',
+        positiveForeground: '#0A0B0D',
+        primary: '#3773F5',
+        primaryForeground: '#0A0B0D',
+        primaryWash: '#001033',
+        secondary: '#32353D',
+        secondaryForeground: '#FFFFFF',
+      },
+      state: {
+        b: {
+          disabled: '#0A0B0D',
+          hovered: '#0F1012',
+          pressed: '#1E1F20',
+        },
+        bA: {
+          disabled: '#0E0F12',
+          hovered: '#191A1E',
+          pressed: '#27282B',
+        },
+        f: {
+          disabled: '#676869',
+          hovered: '#E1E1E1',
+          pressed: '#D2D2D2',
+        },
+        fM: {
+          disabled: '#3B3E44',
+          hovered: '#9299A5',
+          pressed: '#999FAB',
+        },
+        n: {
+          disabled: '#612C31',
+          hovered: '#F06E79',
+          pressed: '#F17780',
+        },
+        p: {
+          disabled: '#1B3365',
+          hovered: '#477EF5',
+          pressed: '#5386F5',
+        },
+        pO: {
+          disabled: '#154935',
+          hovered: '#38B380',
+          pressed: '#45B787',
+        },
+        pW: {
+          disabled: '#060D1B',
+          hovered: '#051537',
+          pressed: '#142343',
+        },
+        s: {
+          disabled: '#191B1F',
+          hovered: '#3A3D45',
+          pressed: '#474950',
+        },
+      },
       translucent: {
         100: 'rgba(255,255,255,0.1)',
         200: 'rgba(255,255,255,0.2)',
@@ -36,15 +261,6 @@ module.exports = {
         blackHover: 'rgba(39, 40, 42, 1)',
         blackActive: 'rgba(80, 85, 96, 1)',
       },
-      black: '#000000',
-      ocsblue: 'rgba(0, 82, 255, 1)',
-      ocspink: '#FF8DCF',
-      ocsyellow: '#FEE002',
-      blue: {
-        400: '#688CEC',
-        500: '#0455FF',
-        600: '#0052FF',
-      },
     },
     borderRadius: {
       DEFAULT: '3px',