diff --git a/src/app/(main)/events/create/steps/ApprovalStep.tsx b/src/app/(main)/events/create/steps/ApprovalStep.tsx
index 5ca2156..2c5a814 100644
--- a/src/app/(main)/events/create/steps/ApprovalStep.tsx
+++ b/src/app/(main)/events/create/steps/ApprovalStep.tsx
@@ -20,6 +20,24 @@ import {
 import { ArrowBack, CheckCircle, Edit, RocketLaunch, Save } from '@mui/icons-material';
 import { EventData } from '../page';
 
+// 디자인 시스템 색상
+const colors = {
+  pink: '#F472B6',
+  purple: '#C084FC',
+  purpleLight: '#E9D5FF',
+  blue: '#60A5FA',
+  mint: '#34D399',
+  orange: '#FB923C',
+  yellow: '#FBBF24',
+  gray: {
+    900: '#1A1A1A',
+    700: '#4A4A4A',
+    500: '#9E9E9E',
+    300: '#D9D9D9',
+    100: '#F5F5F5',
+  },
+};
+
 interface ApprovalStepProps {
   eventData: EventData;
   onApprove: () => void;
diff --git a/src/app/(main)/events/create/steps/ChannelStep.tsx b/src/app/(main)/events/create/steps/ChannelStep.tsx
index 488f541..0f3f1ae 100644
--- a/src/app/(main)/events/create/steps/ChannelStep.tsx
+++ b/src/app/(main)/events/create/steps/ChannelStep.tsx
@@ -17,6 +17,24 @@ import {
 } from '@mui/material';
 import { ArrowBack } from '@mui/icons-material';
 
+// 디자인 시스템 색상
+const colors = {
+  pink: '#F472B6',
+  purple: '#C084FC',
+  purpleLight: '#E9D5FF',
+  blue: '#60A5FA',
+  mint: '#34D399',
+  orange: '#FB923C',
+  yellow: '#FBBF24',
+  gray: {
+    900: '#1A1A1A',
+    700: '#4A4A4A',
+    500: '#9E9E9E',
+    300: '#D9D9D9',
+    100: '#F5F5F5',
+  },
+};
+
 interface Channel {
   id: string;
   name: string;
@@ -111,9 +129,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
           sx={{
             mb: 6,
             borderRadius: 4,
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-            opacity: channels[0].selected ? 1 : 0.6,
-            transition: 'opacity 0.3s',
+            border: channels[0].selected ? 2 : 1,
+            borderColor: channels[0].selected ? colors.purple : 'divider',
+            bgcolor: channels[0].selected ? `${colors.purpleLight}40` : 'background.paper',
+            boxShadow: channels[0].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
+            transition: 'all 0.3s',
           }}
         >
           <CardContent sx={{ p: 6 }}>
@@ -122,9 +142,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
                 <Checkbox
                   checked={channels[0].selected}
                   onChange={() => handleChannelToggle('uriTV')}
+                  sx={{
+                    color: colors.purple,
+                    '&.Mui-checked': {
+                      color: colors.purple,
+                    },
+                  }}
                 />
               }
-              label="우리동네TV"
+              label={
+                <Typography variant="body1" sx={{ fontWeight: channels[0].selected ? 700 : 600, fontSize: '1.125rem' }}>
+                  우리동네TV
+                </Typography>
+              }
               sx={{ mb: channels[0].selected ? 2 : 0 }}
             />
 
@@ -174,9 +204,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
           sx={{
             mb: 6,
             borderRadius: 4,
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-            opacity: channels[1].selected ? 1 : 0.6,
-            transition: 'opacity 0.3s',
+            border: channels[1].selected ? 2 : 1,
+            borderColor: channels[1].selected ? colors.purple : 'divider',
+            bgcolor: channels[1].selected ? `${colors.purpleLight}40` : 'background.paper',
+            boxShadow: channels[1].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
+            transition: 'all 0.3s',
           }}
         >
           <CardContent sx={{ p: 6 }}>
@@ -185,9 +217,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
                 <Checkbox
                   checked={channels[1].selected}
                   onChange={() => handleChannelToggle('ringoBiz')}
+                  sx={{
+                    color: colors.purple,
+                    '&.Mui-checked': {
+                      color: colors.purple,
+                    },
+                  }}
                 />
               }
-              label="링고비즈"
+              label={
+                <Typography variant="body1" sx={{ fontWeight: channels[1].selected ? 700 : 600, fontSize: '1.125rem' }}>
+                  링고비즈
+                </Typography>
+              }
               sx={{ mb: channels[1].selected ? 2 : 0 }}
             />
 
@@ -221,9 +263,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
           sx={{
             mb: 6,
             borderRadius: 4,
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-            opacity: channels[2].selected ? 1 : 0.6,
-            transition: 'opacity 0.3s',
+            border: channels[2].selected ? 2 : 1,
+            borderColor: channels[2].selected ? colors.purple : 'divider',
+            bgcolor: channels[2].selected ? `${colors.purpleLight}40` : 'background.paper',
+            boxShadow: channels[2].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
+            transition: 'all 0.3s',
           }}
         >
           <CardContent sx={{ p: 6 }}>
@@ -232,9 +276,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
                 <Checkbox
                   checked={channels[2].selected}
                   onChange={() => handleChannelToggle('genieTV')}
+                  sx={{
+                    color: colors.purple,
+                    '&.Mui-checked': {
+                      color: colors.purple,
+                    },
+                  }}
                 />
               }
-              label="지니TV 광고"
+              label={
+                <Typography variant="body1" sx={{ fontWeight: channels[2].selected ? 700 : 600, fontSize: '1.125rem' }}>
+                  지니TV 광고
+                </Typography>
+              }
               sx={{ mb: channels[2].selected ? 2 : 0 }}
             />
 
@@ -295,9 +349,11 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
           sx={{
             mb: 10,
             borderRadius: 4,
-            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
-            opacity: channels[3].selected ? 1 : 0.6,
-            transition: 'opacity 0.3s',
+            border: channels[3].selected ? 2 : 1,
+            borderColor: channels[3].selected ? colors.purple : 'divider',
+            bgcolor: channels[3].selected ? `${colors.purpleLight}40` : 'background.paper',
+            boxShadow: channels[3].selected ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
+            transition: 'all 0.3s',
           }}
         >
           <CardContent sx={{ p: 6 }}>
@@ -306,9 +362,19 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
                 <Checkbox
                   checked={channels[3].selected}
                   onChange={() => handleChannelToggle('sns')}
+                  sx={{
+                    color: colors.purple,
+                    '&.Mui-checked': {
+                      color: colors.purple,
+                    },
+                  }}
                 />
               }
-              label="SNS"
+              label={
+                <Typography variant="body1" sx={{ fontWeight: channels[3].selected ? 700 : 600, fontSize: '1.125rem' }}>
+                  SNS
+                </Typography>
+              }
               sx={{ mb: channels[3].selected ? 2 : 0 }}
             />
 
@@ -324,6 +390,12 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
                       onChange={(e) =>
                         handleConfigChange('sns', 'instagram', e.target.checked.toString())
                       }
+                      sx={{
+                        color: colors.purple,
+                        '&.Mui-checked': {
+                          color: colors.purple,
+                        },
+                      }}
                     />
                   }
                   label="Instagram"
@@ -336,6 +408,12 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
                       onChange={(e) =>
                         handleConfigChange('sns', 'naver', e.target.checked.toString())
                       }
+                      sx={{
+                        color: colors.purple,
+                        '&.Mui-checked': {
+                          color: colors.purple,
+                        },
+                      }}
                     />
                   }
                   label="Naver Blog"
@@ -348,6 +426,12 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
                       onChange={(e) =>
                         handleConfigChange('sns', 'kakao', e.target.checked.toString())
                       }
+                      sx={{
+                        color: colors.purple,
+                        '&.Mui-checked': {
+                          color: colors.purple,
+                        },
+                      }}
                     />
                   }
                   label="Kakao Channel"
@@ -400,7 +484,7 @@ export default function ChannelStep({ onNext, onBack }: ChannelStepProps) {
               <Typography variant="h6" sx={{ fontSize: '1.25rem' }}>
                 총 예상 노출
               </Typography>
-              <Typography variant="h6" color="primary.main" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
+              <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.25rem', color: colors.purple }}>
                 {totalExposure > 0 ? `${totalExposure.toLocaleString()}명+` : '0명'}
               </Typography>
             </Box>
diff --git a/src/app/(main)/events/create/steps/ContentEditStep.tsx b/src/app/(main)/events/create/steps/ContentEditStep.tsx
index db9fe91..40d02af 100644
--- a/src/app/(main)/events/create/steps/ContentEditStep.tsx
+++ b/src/app/(main)/events/create/steps/ContentEditStep.tsx
@@ -12,6 +12,24 @@ import {
 } from '@mui/material';
 import { ArrowBack, Edit } from '@mui/icons-material';
 
+// 디자인 시스템 색상
+const colors = {
+  pink: '#F472B6',
+  purple: '#C084FC',
+  purpleLight: '#E9D5FF',
+  blue: '#60A5FA',
+  mint: '#34D399',
+  orange: '#FB923C',
+  yellow: '#FBBF24',
+  gray: {
+    900: '#1A1A1A',
+    700: '#4A4A4A',
+    500: '#9E9E9E',
+    300: '#D9D9D9',
+    100: '#F5F5F5',
+  },
+};
+
 interface ContentEditStepProps {
   initialTitle: string;
   initialPrize: string;
diff --git a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx b/src/app/(main)/events/create/steps/ContentPreviewStep.tsx
index d1a3707..2459ce2 100644
--- a/src/app/(main)/events/create/steps/ContentPreviewStep.tsx
+++ b/src/app/(main)/events/create/steps/ContentPreviewStep.tsx
@@ -14,6 +14,24 @@ import {
 } from '@mui/material';
 import { ArrowBack, ZoomIn, Psychology } from '@mui/icons-material';
 
+// 디자인 시스템 색상
+const colors = {
+  pink: '#F472B6',
+  purple: '#C084FC',
+  purpleLight: '#E9D5FF',
+  blue: '#60A5FA',
+  mint: '#34D399',
+  orange: '#FB923C',
+  yellow: '#FBBF24',
+  gray: {
+    900: '#1A1A1A',
+    700: '#4A4A4A',
+    500: '#9E9E9E',
+    300: '#D9D9D9',
+    100: '#F5F5F5',
+  },
+};
+
 interface ImageStyle {
   id: string;
   name: string;
diff --git a/src/app/(main)/events/create/steps/ObjectiveStep.tsx b/src/app/(main)/events/create/steps/ObjectiveStep.tsx
index 0e98adb..284cb3f 100644
--- a/src/app/(main)/events/create/steps/ObjectiveStep.tsx
+++ b/src/app/(main)/events/create/steps/ObjectiveStep.tsx
@@ -14,6 +14,24 @@ import {
 import { AutoAwesome, TrendingUp, Replay, Store, Campaign } from '@mui/icons-material';
 import { EventObjective } from '../page';
 
+// 디자인 시스템 색상
+const colors = {
+  pink: '#F472B6',
+  purple: '#C084FC',
+  purpleLight: '#E9D5FF',
+  blue: '#60A5FA',
+  mint: '#34D399',
+  orange: '#FB923C',
+  yellow: '#FBBF24',
+  gray: {
+    900: '#1A1A1A',
+    700: '#4A4A4A',
+    500: '#9E9E9E',
+    300: '#D9D9D9',
+    100: '#F5F5F5',
+  },
+};
+
 interface ObjectiveOption {
   id: EventObjective;
   icon: React.ReactNode;
@@ -66,7 +84,7 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
       <Container maxWidth="md" sx={{ pt: 8, pb: 8, px: { xs: 6, sm: 6, md: 8 } }}>
         {/* Title Section */}
         <Box sx={{ mb: 10, textAlign: 'center' }}>
-          <AutoAwesome sx={{ fontSize: 80, color: 'primary.main', mb: 4 }} />
+          <AutoAwesome sx={{ fontSize: 80, color: colors.purple, mb: 4 }} />
           <Typography variant="h4" sx={{ fontWeight: 700, mb: 4, fontSize: '2rem' }}>
             이벤트 목적을 선택해주세요
           </Typography>
@@ -86,12 +104,12 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
                     cursor: 'pointer',
                     borderRadius: 4,
                     border: selected === objective.id ? 2 : 1,
-                    borderColor: selected === objective.id ? 'primary.main' : 'divider',
-                    bgcolor: selected === objective.id ? 'action.selected' : 'background.paper',
+                    borderColor: selected === objective.id ? colors.purple : 'divider',
+                    bgcolor: selected === objective.id ? `${colors.purpleLight}40` : 'background.paper',
                     transition: 'all 0.2s',
                     boxShadow: selected === objective.id ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
                     '&:hover': {
-                      borderColor: 'primary.main',
+                      borderColor: colors.purple,
                       boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                       transform: 'translateY(-2px)',
                     },
@@ -100,7 +118,7 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
                 >
                   <CardContent sx={{ p: 6 }}>
                     <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 3, mb: 3 }}>
-                      <Box sx={{ color: 'primary.main' }}>{objective.icon}</Box>
+                      <Box sx={{ color: colors.purple }}>{objective.icon}</Box>
                       <Box sx={{ flex: 1 }}>
                         <Typography variant="h6" sx={{ fontWeight: 700, mb: 2, fontSize: '1.25rem' }}>
                           {objective.title}
@@ -111,7 +129,7 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
                       </Box>
                       <FormControlLabel
                         value={objective.id}
-                        control={<Radio />}
+                        control={<Radio sx={{ color: selected === objective.id ? colors.purple : undefined }} />}
                         label=""
                         sx={{ m: 0 }}
                       />
@@ -128,14 +146,14 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
           elevation={0}
           sx={{
             mb: 10,
-            bgcolor: 'primary.light',
+            background: `linear-gradient(135deg, ${colors.purpleLight} 0%, ${colors.blue}20 100%)`,
             borderRadius: 4,
             boxShadow: '0 2px 8px rgba(0, 0, 0, 0.08)',
           }}
         >
           <CardContent sx={{ display: 'flex', gap: 3, p: 6 }}>
-            <AutoAwesome sx={{ color: 'primary.main', fontSize: 28 }} />
-            <Typography variant="body2" color="text.secondary" sx={{ fontSize: '1rem', lineHeight: 1.8 }}>
+            <AutoAwesome sx={{ color: colors.purple, fontSize: 28 }} />
+            <Typography variant="body2" sx={{ fontSize: '1rem', lineHeight: 1.8, color: colors.gray[700] }}>
               선택하신 목적에 따라 AI가 업종, 지역, 계절 트렌드를 분석하여 가장 효과적인 이벤트를 추천합니다.
             </Typography>
           </CardContent>
@@ -154,6 +172,14 @@ export default function ObjectiveStep({ onNext }: ObjectiveStepProps) {
               borderRadius: 3,
               fontSize: '1rem',
               fontWeight: 700,
+              background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+              '&:hover': {
+                background: `linear-gradient(135deg, ${colors.purple} 0%, ${colors.pink} 100%)`,
+                opacity: 0.9,
+              },
+              '&:disabled': {
+                background: colors.gray[300],
+              },
             }}
           >
             다음
diff --git a/src/app/(main)/events/create/steps/RecommendationStep.tsx b/src/app/(main)/events/create/steps/RecommendationStep.tsx
index c173ad7..f6c5111 100644
--- a/src/app/(main)/events/create/steps/RecommendationStep.tsx
+++ b/src/app/(main)/events/create/steps/RecommendationStep.tsx
@@ -19,6 +19,24 @@ import {
 import { ArrowBack, Edit, Insights } from '@mui/icons-material';
 import { EventObjective, BudgetLevel, EventMethod } from '../page';
 
+// 디자인 시스템 색상
+const colors = {
+  pink: '#F472B6',
+  purple: '#C084FC',
+  purpleLight: '#E9D5FF',
+  blue: '#60A5FA',
+  mint: '#34D399',
+  orange: '#FB923C',
+  yellow: '#FBBF24',
+  gray: {
+    900: '#1A1A1A',
+    700: '#4A4A4A',
+    500: '#9E9E9E',
+    300: '#D9D9D9',
+    100: '#F5F5F5',
+  },
+};
+
 interface Recommendation {
   id: string;
   budget: BudgetLevel;
@@ -167,7 +185,7 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
         >
           <CardContent sx={{ p: 8 }}>
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 2, mb: 6 }}>
-              <Insights color="primary" sx={{ fontSize: 32 }} />
+              <Insights sx={{ fontSize: 32, color: colors.purple }} />
               <Typography variant="h6" sx={{ fontWeight: 700, fontSize: '1.25rem' }}>
                 AI 트렌드 분석
               </Typography>
@@ -244,12 +262,12 @@ export default function RecommendationStep({ onNext, onBack }: RecommendationSte
                     cursor: 'pointer',
                     borderRadius: 4,
                     border: selected === rec.id ? 2 : 1,
-                    borderColor: selected === rec.id ? 'primary.main' : 'divider',
-                    bgcolor: selected === rec.id ? 'action.selected' : 'background.paper',
+                    borderColor: selected === rec.id ? colors.purple : 'divider',
+                    bgcolor: selected === rec.id ? `${colors.purpleLight}40` : 'background.paper',
                     transition: 'all 0.2s',
                     boxShadow: selected === rec.id ? '0 4px 12px rgba(0, 0, 0, 0.15)' : '0 2px 8px rgba(0, 0, 0, 0.08)',
                     '&:hover': {
-                      borderColor: 'primary.main',
+                      borderColor: colors.purple,
                       boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                       transform: 'translateY(-2px)',
                     },