From 9755085b831b071183434ab6727c670523574095 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Mon, 27 Apr 2026 01:27:41 +0000
Subject: [PATCH] feat: apply dashboard blue styling to all onboarding pages
 and shared pixel components

Agent-Logs-Url: https://github.com/acm-projects/Rolemap/sessions/9838b79e-b2db-453b-bb91-cd947854c2ae

Co-authored-by: OhamjDung <169820292+OhamjDung@users.noreply.github.com>
---
 frontend/app/OnBoarding/Company/page.tsx     | 16 +++----
 frontend/app/OnBoarding/Generate/page.tsx    | 34 +++++++--------
 frontend/app/OnBoarding/Major/page.tsx       | 24 +++++------
 frontend/app/OnBoarding/Preferences/page.tsx | 22 +++++-----
 frontend/app/OnBoarding/Resume/page.tsx      | 44 ++++++++++----------
 frontend/app/components/PixelButton.tsx      |  6 +--
 frontend/app/components/PixelCard.tsx        |  8 ++--
 frontend/app/components/PixelInput.tsx       | 14 +++----
 frontend/app/components/PixelProgress.tsx    | 22 +++++-----
 9 files changed, 95 insertions(+), 95 deletions(-)

diff --git a/frontend/app/OnBoarding/Company/page.tsx b/frontend/app/OnBoarding/Company/page.tsx
index 4f91685d..2a3def27 100644
--- a/frontend/app/OnBoarding/Company/page.tsx
+++ b/frontend/app/OnBoarding/Company/page.tsx
@@ -56,7 +56,7 @@ export default function CompanySelection() {
   }, [canContinue]);
 
   return (
-    <div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
+    <div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
       <div className="scanlines" />
 
       <div className="max-w-5xl mx-auto w-full flex flex-col justify-between flex-1">
@@ -68,7 +68,7 @@ export default function CompanySelection() {
               text="Where do you want to work?"
               speed={30}
               delay={400}
-              className="text-5xl text-[#2d5050] mt-7 block"
+              className="text-5xl text-[#334155] mt-7 block"
             />
           </div>
           <div className="min-h-[7rem]">
@@ -76,7 +76,7 @@ export default function CompanySelection() {
               text="Select your target companies. We'll use this to customize your personalized learning path and interview preparation roadmap."
               speed={10}
               delay={900}
-              className="text-2xl text-[#4e8888] mb-5 max-w-2xl block"
+              className="text-2xl text-[#78ADCF] mb-5 max-w-2xl block"
             />
           </div>
         </div>
@@ -100,19 +100,19 @@ export default function CompanySelection() {
               <PixelCard key={company.id} onClick={() => toggleCompany(company.id)} selected={isSelected}>
                 <div
                   className={`h-full flex flex-col items-center justify-center gap-2 p-3 transition-all duration-100
-                    ${isSelected ? "bg-[#3a6666] translate-y-[4px]" : "bg-transparent translate-y-0"}
+                    ${isSelected ? "bg-[#0080cc] translate-y-[4px]" : "bg-transparent translate-y-0"}
                   `}
                 >
                   <div
                     className={`flex items-center justify-center text-3xl font-jersey transition-colors duration-100
-                      ${isSelected ? "text-white" : "text-[#4e8888]"}
+                      ${isSelected ? "text-white" : "text-[#78ADCF]"}
                     `}
                   >
                     {company.logo}
                   </div>
                   <span
                     className={`text-2xl text-center font-jersey transition-colors duration-100
-                      ${isSelected ? "text-white" : "text-[#2d5050]"}
+                      ${isSelected ? "text-white" : "text-[#334155]"}
                     `}
                   >
                     {company.name}
@@ -132,8 +132,8 @@ export default function CompanySelection() {
               return (
                 <div
                   key={id}
-                  className="flex items-center gap-1.5 bg-[#3a6666] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#2d5050] transition-colors"
-                  style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#4e8888', borderLeftColor: '#4e8888', borderRightColor: '#1e3838', borderBottomColor: '#1e3838' }}
+                  className="flex items-center gap-1.5 bg-[#04A0FF] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#0080cc] transition-colors"
+                  style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#8ED4FF', borderLeftColor: '#8ED4FF', borderRightColor: '#0060aa', borderBottomColor: '#0060aa' }}
                   onClick={() => toggleCompany(id)}
                 >
                   {company.name}
diff --git a/frontend/app/OnBoarding/Generate/page.tsx b/frontend/app/OnBoarding/Generate/page.tsx
index 6a311a67..78a7cd74 100644
--- a/frontend/app/OnBoarding/Generate/page.tsx
+++ b/frontend/app/OnBoarding/Generate/page.tsx
@@ -63,7 +63,7 @@ function MapAnimation({ active, done }: { active: boolean; done: boolean }) {
           return (
             <line key={i}
               x1={na.x} y1={na.y} x2={nb.x} y2={nb.y}
-              stroke={done ? '#4a9696' : '#7ab3b3'}
+              stroke={done ? '#04A0FF' : '#8ED4FF'}
               strokeWidth={4}
               strokeDasharray={`${len} ${len}`}
               strokeDashoffset={0}
@@ -74,9 +74,9 @@ function MapAnimation({ active, done }: { active: boolean; done: boolean }) {
         {MAP_NODES.map((n, i) => {
           if (i >= visibleNodes) return null;
           const isLast = i === MAP_NODES.length - 1;
-          const fill = done && isLast ? '#3d7a7a' : done ? '#eaf4f4' : i === 0 ? '#3d7a7a' : '#ffffff';
-          const stroke = done && isLast ? '#2e6666' : '#7ab3b3';
-          const textColor = (done && isLast) || i === 0 ? '#ffffff' : '#4a7c7c';
+          const fill = done && isLast ? '#0080cc' : done ? '#E1FAFF' : i === 0 ? '#0080cc' : '#ffffff';
+          const stroke = done && isLast ? '#0060aa' : '#8ED4FF';
+          const textColor = (done && isLast) || i === 0 ? '#ffffff' : '#334155';
           return (
             <g key={i} style={{ transformOrigin: `${n.x}px ${n.y}px`, animation: `nodeIn 0.35s cubic-bezier(.34,1.56,.64,1) forwards`, animationDelay: '0ms' }}>
               <rect
@@ -93,14 +93,14 @@ function MapAnimation({ active, done }: { active: boolean; done: boolean }) {
               </text>
               {done && !active && (
                 <circle cx={n.x + NW/2 - 6} cy={n.y - NH/2 + 6} r={5}
-                  fill={isLast ? '#f7d22e' : '#4a9696'}
+                  fill={isLast ? '#F9EC72' : '#04A0FF'}
                   style={isLast ? { animation: 'nodePulse 1.2s ease-in-out infinite' } : undefined} />
               )}
             </g>
           );
         })}
       </svg>
-      <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 9, color: done ? '#3d7a7a' : '#7ab3b3', letterSpacing: 1 }}>
+      <div style={{ fontFamily: "'Press Start 2P', monospace", fontSize: 9, color: done ? '#04A0FF' : '#78ADCF', letterSpacing: 1 }}>
         {done ? '▶ MAP READY' : `BUILDING MAP${'.'.repeat((visibleNodes % 3) + 1)}`}
       </div>
     </div>
@@ -158,21 +158,21 @@ export default function GenerateRoadmap() {
   };
 
   return (
-    <div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
+    <div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
       <div className="scanlines" />
 
       <div className="max-w-5xl mx-auto w-full flex flex-col flex-1">
         <div className="mb-4">
           <PixelProgress value={100} showLabel={true} step={5} totalSteps={5} />
           <div className="min-h-[5rem]">
-            <TypewriterText text="Almost there" speed={20} delay={400} className="text-5xl text-[#2d5050] leading-relaxed block" />
+            <TypewriterText text="Almost there" speed={20} delay={400} className="text-5xl text-[#334155] leading-relaxed block" />
           </div>
           <div className="min-h-[5rem]">
             <TypewriterText
               text="We'll build a personalized career roadmap tailored to your selected role and background."
               speed={10}
               delay={800}
-              className="text-2xl text-[#4e8888] leading-relaxed max-w-2xl block mb-4"
+              className="text-2xl text-[#78ADCF] leading-relaxed max-w-2xl block mb-4"
             />
           </div>
         </div>
@@ -183,10 +183,10 @@ export default function GenerateRoadmap() {
               pixel-border h-full flex flex-col items-center justify-center gap-4 p-6 transition-all duration-100
               ${
                 done
-                  ? "border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#4e8888] border-b-[#4e8888] bg-[#e8f4f4]"
+                  ? "border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#334155] border-b-[#334155] bg-[#BEF8FF]"
                   : generating
-                    ? "border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-white"
-                    : "border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-white"
+                    ? "border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-white"
+                    : "border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-white"
               }
             `}
           >
@@ -194,11 +194,11 @@ export default function GenerateRoadmap() {
               <MapAnimation active={generating} done={done} />
             ) : (
               <>
-                <div className="w-14 h-14 flex items-center justify-center pixel-border text-3xl select-none border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-[#f0f8f8]">
-                  <span className="text-[#4e8888]">✦</span>
+                <div className="w-14 h-14 flex items-center justify-center pixel-border text-3xl select-none border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-[#E1FAFF]">
+                  <span className="text-[#78ADCF]">✦</span>
                 </div>
-                <span className="text-xl text-[#2d5050] font-jersey text-center">Ready to generate?</span>
-                <span className="text-md text-[#4e8888] font-jersey text-center">
+                <span className="text-xl text-[#334155] font-jersey text-center">Ready to generate?</span>
+                <span className="text-md text-[#78ADCF] font-jersey text-center">
                   Based on your profile, we will map out everything you need to land your dream role.
                 </span>
                 <PixelButton variant="primary" onClick={handleGenerate} disabled={generating} size="md">
@@ -209,7 +209,7 @@ export default function GenerateRoadmap() {
             {generating && (
               <div className="w-full max-w-xs">
                 <PixelProgress value={((stepIdx + 1) / PROGRESS_STEPS.length) * 100} showLabel={false} />
-                <p className="text-xs text-[#4e8888] font-jersey text-center mt-2">{PROGRESS_STEPS[stepIdx]}</p>
+                <p className="text-xs text-[#78ADCF] font-jersey text-center mt-2">{PROGRESS_STEPS[stepIdx]}</p>
               </div>
             )}
           </div>
diff --git a/frontend/app/OnBoarding/Major/page.tsx b/frontend/app/OnBoarding/Major/page.tsx
index 97cb998c..e629c7fc 100644
--- a/frontend/app/OnBoarding/Major/page.tsx
+++ b/frontend/app/OnBoarding/Major/page.tsx
@@ -117,7 +117,7 @@ export default function SpecialtyPage() {
   }, [selected]);
 
   return (
-    <div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
+    <div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
       <div className="scanlines" />
 
       <div className="max-w-5xl mx-auto w-full flex flex-col justify-between flex-1">
@@ -128,7 +128,7 @@ export default function SpecialtyPage() {
               text="What is your specialty?"
               speed={20}
               delay={400}
-              className="text-5xl text-[#2d5050] block mt-7"
+              className="text-5xl text-[#334155] block mt-7"
             />
           </div>
           <div className="min-h-[7rem]">
@@ -136,7 +136,7 @@ export default function SpecialtyPage() {
               text="Pick your primary focus area. You can search for a specific role or choose from the categories below."
               speed={10}
               delay={800}
-              className="text-2xl text-[#4e8888] max-w-2xl block mb-5"
+              className="text-2xl text-[#78ADCF] max-w-2xl block mb-5"
             />
           </div>
         </div>
@@ -153,16 +153,16 @@ export default function SpecialtyPage() {
             icon={<Search className="w-4 h-4" />}
           />
           {showDropdown && suggestions.length > 0 && (
-            <div className="absolute top-full left-0 right-0 mt-1 bg-white border-4 border-[#7ab3b3] z-20 shadow-lg">
+            <div className="absolute top-full left-0 right-0 mt-1 bg-white border-4 border-[#8ED4FF] z-20 shadow-lg">
               {suggestions.map((s) => (
                 <div
                   key={s.id}
                   onClick={() => handleSelectSuggestion(s.id, s.label)}
-                  className="flex items-center gap-3 px-4 py-2 hover:bg-[#e8f4f4] cursor-pointer border-b border-[#d4e8e8] last:border-0"
+                  className="flex items-center gap-3 px-4 py-2 hover:bg-[#E1FAFF] cursor-pointer border-b border-[#DEF2FF] last:border-0"
                 >
-                  <span className="text-[#4e8888]">{s.icon}</span>
-                  <span className="text-sm text-[#2d5050] font-jersey">{s.label}</span>
-                  {selected === s.id && <span className="ml-auto text-[#4e8888] text-xs font-jersey">✓</span>}
+                  <span className="text-[#78ADCF]">{s.icon}</span>
+                  <span className="text-sm text-[#334155] font-jersey">{s.label}</span>
+                  {selected === s.id && <span className="ml-auto text-[#78ADCF] text-xs font-jersey">✓</span>}
                 </div>
               ))}
             </div>
@@ -176,19 +176,19 @@ export default function SpecialtyPage() {
               <PixelCard key={s.id} onClick={() => handleCardSelect(s.id, s.label)} selected={isSelected}>
                 <div
                   className={`h-full flex flex-col items-center justify-center gap-3 transition-all duration-100 relative ${
-                    isSelected ? "bg-[#3a6666] translate-y-[4px]" : "bg-transparent translate-y-0"
+                    isSelected ? "bg-[#0080cc] translate-y-[4px]" : "bg-transparent translate-y-0"
                   }`}
                 >
                   <div
                     className={`w-12 h-12 flex items-center justify-center transition-colors duration-100 ${
-                      isSelected ? "text-white" : "text-[#4e8888]"
+                      isSelected ? "text-white" : "text-[#78ADCF]"
                     }`}
                   >
                     {s.image}
                   </div>
                   <span
                     className={`text-xl text-center font-jersey leading-tight transition-colors duration-100 px-1 ${
-                      isSelected ? "text-white" : "text-[#2d5050]"
+                      isSelected ? "text-white" : "text-[#334155]"
                     }`}
                   >
                     {s.label}
@@ -199,7 +199,7 @@ export default function SpecialtyPage() {
           })}
         </div>
 
-        {selectedLabel && <div className="text-sm text-[#4e8888] font-jersey">Selected: {selectedLabel}</div>}
+        {selectedLabel && <div className="text-sm text-[#78ADCF] font-jersey">Selected: {selectedLabel}</div>}
 
         <div className="flex items-center justify-between mt-3">
           <PixelButton variant="ghost" onClick={() => router.push("/")} size="md">
diff --git a/frontend/app/OnBoarding/Preferences/page.tsx b/frontend/app/OnBoarding/Preferences/page.tsx
index df641d79..b2aac550 100644
--- a/frontend/app/OnBoarding/Preferences/page.tsx
+++ b/frontend/app/OnBoarding/Preferences/page.tsx
@@ -43,7 +43,7 @@ export default function LearningPreferences() {
   }, [canContinue]);
 
   return (
-    <div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
+    <div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
       <div className="scanlines" />
 
       <div className="max-w-5xl mx-auto w-full flex flex-col justify-between flex-1">
@@ -54,7 +54,7 @@ export default function LearningPreferences() {
               text="How do you learn best?"
               speed={20}
               delay={400}
-              className="text-5xl text-[#2d5050] leading-relaxed block"
+              className="text-5xl text-[#334155] leading-relaxed block"
             />
           </div>
           <div className="min-h-[5rem]">
@@ -62,7 +62,7 @@ export default function LearningPreferences() {
               text="Select the modalities that help you absorb complex technical concepts most effectively."
               speed={10}
               delay={800}
-              className="text-2xl text-[#4e8888] leading-relaxed max-w-2xl block"
+              className="text-2xl text-[#78ADCF] leading-relaxed max-w-2xl block"
             />
           </div>
         </div>
@@ -74,19 +74,19 @@ export default function LearningPreferences() {
               <PixelCard key={p.id} onClick={() => toggle(p.id)} selected={isSelected}>
                 <div
                   className={`flex justify-center items-center p-3 flex flex-col gap-2 h-full transition-all duration-100 ${
-                    isSelected ? "bg-[#3a6666] translate-y-[4px]" : "bg-transparent translate-y-0"
+                    isSelected ? "bg-[#0080cc] translate-y-[4px]" : "bg-transparent translate-y-0"
                   }`}
                 >
                   <div
                     className={`w-10 h-10 flex items-center justify-center transition-colors duration-100 ${
-                      isSelected ? "text-white" : "text-[#4e8888]"
+                      isSelected ? "text-white" : "text-[#78ADCF]"
                     }`}
                   >
                     {p.icon}
                   </div>
                   <span
                     className={`text-3xl font-jersey transition-colors duration-100 ${
-                      isSelected ? "text-white" : "text-[#2d5050]"
+                      isSelected ? "text-white" : "text-[#334155]"
                     }`}
                   >
                     {p.label}
@@ -106,8 +106,8 @@ export default function LearningPreferences() {
               return (
                 <div
                   key={id}
-                  className="flex items-center gap-1.5 bg-[#3a6666] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#2d5050] transition-colors"
-                  style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#4e8888', borderLeftColor: '#4e8888', borderRightColor: '#1e3838', borderBottomColor: '#1e3838' }}
+                  className="flex items-center gap-1.5 bg-[#04A0FF] text-white text-sm font-jersey px-3 py-1 cursor-pointer hover:bg-[#0080cc] transition-colors"
+                  style={{ borderWidth: 2, borderStyle: 'solid', borderTopColor: '#8ED4FF', borderLeftColor: '#8ED4FF', borderRightColor: '#0060aa', borderBottomColor: '#0060aa' }}
                   onClick={() => toggle(id)}
                 >
                   {pref.label}
@@ -119,15 +119,15 @@ export default function LearningPreferences() {
         )}
 
         <div className="mb-2 flex-1 flex flex-col pt-2">
-          <span className="text-3xl text-[#4e8888] font-jersey uppercase tracking-widest mb-1">
+          <span className="text-3xl text-[#78ADCF] font-jersey uppercase tracking-widest mb-1">
             Other Preferences
           </span>
-          <div className="pixel-border border-[#7ab3b3] bg-white flex-1">
+          <div className="pixel-border border-[#8ED4FF] bg-white flex-1">
             <textarea
               value={otherText}
               onChange={(e) => setOtherText(e.target.value)}
               placeholder="E.g., I prefer focused 2-hour sprints with 15-minute breaks..."
-              className="w-full h-full text-sm text-[#2d5050] placeholder-[#9fc9c9] bg-transparent outline-none resize-none p-3 font-jersey leading-relaxed"
+              className="w-full h-full text-sm text-[#334155] placeholder-[#78ADCF] bg-transparent outline-none resize-none p-3 font-jersey leading-relaxed"
               style={{ fontFamily: "'Press Start 2P', monospace", fontSize: "16px" }}
             />
           </div>
diff --git a/frontend/app/OnBoarding/Resume/page.tsx b/frontend/app/OnBoarding/Resume/page.tsx
index f30e8929..d39c63bb 100644
--- a/frontend/app/OnBoarding/Resume/page.tsx
+++ b/frontend/app/OnBoarding/Resume/page.tsx
@@ -70,7 +70,7 @@ export default function ResumeUpload() {
   }, [canContinue, uploading]);
 
   return (
-    <div className="relative h-screen overflow-hidden w-full bg-[#f0f8f8] p-3 flex flex-col">
+    <div className="relative h-screen overflow-hidden w-full bg-linear-to-b from-[#7EC8E3] to-[#E1FAFF] p-3 flex flex-col">
       <div className="scanlines" />
 
       <div className="max-w-5xl mx-auto w-full flex flex-col justify-between flex-1">
@@ -82,7 +82,7 @@ export default function ResumeUpload() {
               speed={20}
               delay={400}
               startComplete={animationDone}
-              className="text-5xl text-[#2d5050] leading-relaxed block"
+              className="text-5xl text-[#334155] leading-relaxed block"
             />
           </div>
           <div className="min-h-[7rem]">
@@ -91,7 +91,7 @@ export default function ResumeUpload() {
               speed={10}
               delay={animationDone ? 0 : 800}
               startComplete={animationDone}
-              className="text-2xl text-[#4e8888] leading-relaxed max-w-2xl block mb-4"
+              className="text-2xl text-[#78ADCF] leading-relaxed max-w-2xl block mb-4"
             />
           </div>
         </div>
@@ -106,10 +106,10 @@ export default function ResumeUpload() {
             className={`
               pixel-border cursor-pointer flex flex-col items-center justify-center gap-3 p-6 transition-all duration-100
               ${dragging
-                ? "border-[#4e8888] bg-[#e8f4f4]"
+                ? "border-[#04A0FF] bg-[#E1FAFF]"
                 : fileName
-                  ? "border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#4e8888] border-b-[#4e8888] bg-[#e8f4f4]"
-                  : "border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-white hover:bg-[#f0f8f8]"
+                  ? "border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#334155] border-b-[#334155] bg-[#BEF8FF]"
+                  : "border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-white hover:bg-[#E1FAFF]"
               }
             `}
           >
@@ -117,39 +117,39 @@ export default function ResumeUpload() {
             <div
               className={`w-14 h-14 flex items-center justify-center pixel-border ${
                 fileName
-                  ? "border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#4e8888] border-b-[#4e8888] bg-[#e8f4f4] text-[#2d5050]"
-                  : "border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-white text-[#4e8888]"
+                  ? "border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#334155] border-b-[#334155] bg-[#BEF8FF] text-[#334155]"
+                  : "border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-white text-[#78ADCF]"
               }`}
             >
               {fileName ? (
-                <span className="text-2xl font-jersey text-[#4e8888]">✓</span>
+                <span className="text-2xl font-jersey text-[#04A0FF]">✓</span>
               ) : (
-                <Upload size={22} className="text-[#4e8888]" />
+                <Upload size={22} className="text-[#78ADCF]" />
               )}
             </div>
             {fileName ? (
               <>
-                <span className="text-base text-[#2d5050] font-jersey text-center">{fileName}</span>
-                <span className="text-xs text-[#4e8888] font-jersey">{uploading ? 'Uploading...' : 'Click to replace'}</span>
+                <span className="text-base text-[#334155] font-jersey text-center">{fileName}</span>
+                <span className="text-xs text-[#78ADCF] font-jersey">{uploading ? 'Uploading...' : 'Click to replace'}</span>
               </>
             ) : (
               <>
-                <span className="text-xl text-[#2d5050] font-jersey text-center">Upload Resume / CV</span>
-                <span className="text-md text-[#4e8888] font-jersey">PDF or DOCX · up to 5MB</span>
+                <span className="text-xl text-[#334155] font-jersey text-center">Upload Resume / CV</span>
+                <span className="text-md text-[#78ADCF] font-jersey">PDF or DOCX · up to 5MB</span>
               </>
             )}
           </div>
 
           {/* GitHub Connect */}
           {githubVerified ? (
-            <div className="pixel-border flex flex-col items-center justify-center gap-3 p-6 border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#4e8888] border-b-[#4e8888] bg-[#e8f4f4]">
-              <div className="w-14 h-14 flex items-center justify-center pixel-border border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#4e8888] border-b-[#4e8888] bg-[#2d5050]">
+            <div className="pixel-border flex flex-col items-center justify-center gap-3 p-6 border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#334155] border-b-[#334155] bg-[#BEF8FF]">
+              <div className="w-14 h-14 flex items-center justify-center pixel-border border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#334155] border-b-[#334155] bg-[#334155]">
                 <svg viewBox="0 0 24 24" className="w-7 h-7 fill-white" xmlns="http://www.w3.org/2000/svg">
                   <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
                 </svg>
               </div>
-              <span className="text-xl text-[#2d5050] font-jersey text-center">GitHub Connected</span>
-              <div className="flex items-center gap-2 text-[#4e8888]">
+              <span className="text-xl text-[#334155] font-jersey text-center">GitHub Connected</span>
+              <div className="flex items-center gap-2 text-[#78ADCF]">
                 <CheckCircle size={16} />
                 <span className="text-sm font-jersey">
                   {(session?.user as { githubUsername?: string } | undefined)?.githubUsername
@@ -161,16 +161,16 @@ export default function ResumeUpload() {
           ) : (
             <button
               onClick={() => signIn("github", { callbackUrl: "/OnBoarding/Resume" })}
-              className="pixel-border cursor-pointer flex flex-col items-center justify-center gap-3 p-6 transition-all duration-100 border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-white hover:bg-[#f0f8f8]"
+              className="pixel-border cursor-pointer flex flex-col items-center justify-center gap-3 p-6 transition-all duration-100 border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-white hover:bg-[#E1FAFF]"
               disabled={uploading}
             >
-              <div className="w-14 h-14 flex items-center justify-center pixel-border border-t-[#d4e8e8] border-l-[#d4e8e8] border-r-[#7ab3b3] border-b-[#7ab3b3] bg-[#2d5050]">
+              <div className="w-14 h-14 flex items-center justify-center pixel-border border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#334155] border-b-[#334155] bg-[#334155]">
                 <svg viewBox="0 0 24 24" className="w-7 h-7 fill-white" xmlns="http://www.w3.org/2000/svg">
                   <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z" />
                 </svg>
               </div>
-              <span className="text-xl text-[#2d5050] font-jersey text-center">Connect GitHub</span>
-              <span className="text-md text-[#4e8888] font-jersey text-center">Import your commit history and repos</span>
+              <span className="text-xl text-[#334155] font-jersey text-center">Connect GitHub</span>
+              <span className="text-md text-[#78ADCF] font-jersey text-center">Import your commit history and repos</span>
             </button>
           )}
         </div>
diff --git a/frontend/app/components/PixelButton.tsx b/frontend/app/components/PixelButton.tsx
index 52230aab..d7b80935 100644
--- a/frontend/app/components/PixelButton.tsx
+++ b/frontend/app/components/PixelButton.tsx
@@ -18,11 +18,11 @@ export default function PixelButton({
   const getVariantClasses = () => {
     switch (variant) {
       case "primary":
-        return "bg-[#4e8888] hover:bg-[#5e9a9a] active:bg-[#3a6666] text-white border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#2d5050] border-b-[#2d5050]";
+        return "bg-[#04A0FF] hover:bg-[#1aadff] active:bg-[#0080cc] text-white border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#0060aa] border-b-[#0060aa]";
       case "secondary":
-        return "bg-[#d4e8e8] hover:bg-[#c0dede] active:bg-[#b0d0d0] text-[#2d5050] border-t-[#e8f4f4] border-l-[#e8f4f4] border-r-[#9fc9c9] border-b-[#9fc9c9]";
+        return "bg-[#BEF8FF] hover:bg-[#d4fbff] active:bg-[#a0f0ff] text-[#334155] border-t-[#DEF2FF] border-l-[#DEF2FF] border-r-[#78ADCF] border-b-[#78ADCF]";
       case "ghost":
-        return "bg-transparent hover:bg-[#e8f4f4] active:bg-[#d4e8e8] text-[#4e8888] border-transparent";
+        return "bg-transparent hover:bg-[#BEF8FF] active:bg-[#8ED4FF] text-[#04A0FF] border-transparent";
     }
   };
 
diff --git a/frontend/app/components/PixelCard.tsx b/frontend/app/components/PixelCard.tsx
index 913704d4..118c1af2 100644
--- a/frontend/app/components/PixelCard.tsx
+++ b/frontend/app/components/PixelCard.tsx
@@ -17,12 +17,12 @@ export default function PixelCard({
       className={`
         pixel-border
         bg-white
-        border-t-[#d4e8e8] border-l-[#d4e8e8]
-        border-r-[#7ab3b3] border-b-[#7ab3b3]
+        border-t-[#DEF2FF] border-l-[#DEF2FF]
+        border-r-[#334155] border-b-[#334155]
         transition-all duration-100
         ${onClick ? "cursor-pointer" : ""}
-        ${hover && onClick ? "hover:bg-[#f0f8f8] hover:translate-y-[-2px]" : ""}
-        ${selected ? "border-t-[#7ab3b3] border-l-[#7ab3b3] border-r-[#4e8888] border-b-[#4e8888] bg-[#e8f4f4]" : ""}
+        ${hover && onClick ? "hover:bg-[#E1FAFF] hover:translate-y-[-2px]" : ""}
+        ${selected ? "border-t-[#8ED4FF] border-l-[#8ED4FF] border-r-[#334155] border-b-[#334155] bg-[#BEF8FF]" : ""}
         active:translate-y-[1px]
       `}
     >
diff --git a/frontend/app/components/PixelInput.tsx b/frontend/app/components/PixelInput.tsx
index 597436e5..d67724fb 100644
--- a/frontend/app/components/PixelInput.tsx
+++ b/frontend/app/components/PixelInput.tsx
@@ -16,7 +16,7 @@ export default function PixelInput({
   return (
     <div className="relative">
       {icon && (
-        <div className="absolute left-3 top-1/2 -translate-y-1/2 z-10 text-[#4e8888]">
+        <div className="absolute left-3 top-1/2 -translate-y-1/2 z-10 text-[#78ADCF]">
           {icon}
         </div>
       )}
@@ -30,16 +30,16 @@ export default function PixelInput({
           ${icon ? "pl-10 pr-4" : "px-4"}
           py-3
           bg-white
-          text-[#2d5050]
+          text-[#334155]
           text- xl
           font-jersey
-          placeholder:text-[#7ab3b3]
+          placeholder:text-[#78ADCF]
           border-4
-          border-t-[#7ab3b3] border-l-[#7ab3b3]
-          border-r-[#d4e8e8] border-b-[#d4e8e8]
+          border-t-[#8ED4FF] border-l-[#8ED4FF]
+          border-r-[#DEF2FF] border-b-[#DEF2FF]
           focus:outline-none
-          focus:border-t-[#4e8888] focus:border-l-[#4e8888]
-          focus:border-r-[#7ab3b3] focus:border-b-[#7ab3b3]
+          focus:border-t-[#04A0FF] focus:border-l-[#04A0FF]
+          focus:border-r-[#8ED4FF] focus:border-b-[#8ED4FF]
           transition-all duration-100
         `}
         style={{ imageRendering: "pixelated" }}
diff --git a/frontend/app/components/PixelProgress.tsx b/frontend/app/components/PixelProgress.tsx
index beac4017..589100aa 100644
--- a/frontend/app/components/PixelProgress.tsx
+++ b/frontend/app/components/PixelProgress.tsx
@@ -4,8 +4,8 @@ interface PixelProgressProps {
   showLabel?: boolean;
   step?: number;
   totalSteps?: number;
-  trackColor?: string; // background of empty segments (default: #d4e8e8)
-  fillColor?: string;  // color of filled segments (default: #4e8888)
+  trackColor?: string; // background of empty segments (default: #8ED4FF)
+  fillColor?: string;  // color of filled segments (default: #04A0FF)
 }
 export default function PixelProgress({
   value,
@@ -13,8 +13,8 @@ export default function PixelProgress({
   showLabel = true,
   step,
   totalSteps,
-  trackColor = '#d4e8e8',
-  fillColor = '#4e8888',
+  trackColor = '#8ED4FF',
+  fillColor = '#04A0FF',
 }: PixelProgressProps) {
   const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
   const segments = 20;
@@ -23,16 +23,16 @@ export default function PixelProgress({
     <div className="w-full">
       {showLabel && (
         <div className="flex items-center justify-between mb-2">
-          <span className="text-xl text-[#4e8888] font-jersey">
+          <span className="text-xl text-[#78ADCF] font-jersey">
             PROGRESS
           </span>
           <div className="flex items-center gap-4">
             {step !== undefined && totalSteps !== undefined && (
-              <span className="text-xl text-[#4e8888] font-jersey">
+              <span className="text-xl text-[#78ADCF] font-jersey">
                 Step {step} of {totalSteps}
               </span>
             )}
-            <span className="text-xl text-[#4e8888] font-jersey">
+            <span className="text-xl text-[#78ADCF] font-jersey">
               {Math.round(percentage)}%
             </span>
           </div>
@@ -43,9 +43,9 @@ export default function PixelProgress({
         style={{
           borderTopColor: trackColor,
           borderLeftColor: trackColor,
-          borderRightColor: '#d4e8e8',
-          borderBottomColor: '#d4e8e8',
-          backgroundColor: '#f0f8f8',
+          borderRightColor: '#8ED4FF',
+          borderBottomColor: '#8ED4FF',
+          backgroundColor: '#E1FAFF',
         }}
       >
         <div className="flex gap-[2px] h-full">
@@ -54,7 +54,7 @@ export default function PixelProgress({
               key={i}
               className="flex-1 transition-all duration-150"
               style={{
-                backgroundColor: i < filledSegments ? fillColor : '#d4e8e8',
+                backgroundColor: i < filledSegments ? fillColor : trackColor,
                 imageRendering: 'pixelated',
                 ...(i < filledSegments ? {
                   borderTop: '1px solid rgba(255,255,255,0.3)',