diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 510bb5de6..d056ed59b 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -28,11 +28,11 @@ export const parameters = {
   },
   backgrounds: {
     default: 'darker',
-    dark: { name: 'darker', value: colors.black100 },
+    dark: { name: 'darker', value: colors.gray900 },
   },
   darkMode: {
     current: 'dark',
-    dark: { ...themes.dark, appBg: colors.black80 },
+    dark: { ...themes.dark, appBg: colors.gray800 },
     light: { ...themes.normal, appBg: '#fff' },
   },
   nextRouter: {
diff --git a/package.json b/package.json
index 747261104..f40267782 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "@radix-ui/react-slot": "^1.0.1",
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.5",
-    "@sopt-makers/colors": "^1.0.0",
+    "@sopt-makers/colors": "^2.2.0",
     "@tanstack/react-query": "^4.27.0",
     "await-to-js": "^3.0.0",
     "axios": "^0.27.2",
diff --git a/src/components/auth/identityProvider/apple/AppleAuthButton.tsx b/src/components/auth/identityProvider/apple/AppleAuthButton.tsx
index 7b3336075..bc02ccb92 100644
--- a/src/components/auth/identityProvider/apple/AppleAuthButton.tsx
+++ b/src/components/auth/identityProvider/apple/AppleAuthButton.tsx
@@ -32,7 +32,7 @@ const StyledAppleAuthButton = styled.button`
   background-color: ${colors.white};
   cursor: pointer;
   height: 48px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_M}
 
diff --git a/src/components/auth/identityProvider/facebook/FacebookButton.tsx b/src/components/auth/identityProvider/facebook/FacebookButton.tsx
index 9bd7f4c64..bb392f633 100644
--- a/src/components/auth/identityProvider/facebook/FacebookButton.tsx
+++ b/src/components/auth/identityProvider/facebook/FacebookButton.tsx
@@ -38,7 +38,7 @@ const StyledFacebookButton = styled.button`
   background-color: #1877f2;
   cursor: pointer;
   height: 48px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M}
 
diff --git a/src/components/auth/identityProvider/google/GoogleAuthButton.tsx b/src/components/auth/identityProvider/google/GoogleAuthButton.tsx
index 4e3ed603d..c5ddb8a8a 100644
--- a/src/components/auth/identityProvider/google/GoogleAuthButton.tsx
+++ b/src/components/auth/identityProvider/google/GoogleAuthButton.tsx
@@ -34,7 +34,7 @@ const StyledGoogleAuthButton = styled(SquareLink)`
   background-color: ${colors.white};
   cursor: pointer;
   height: 48px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_M}
 
diff --git a/src/components/auth/register/Stepper.tsx b/src/components/auth/register/Stepper.tsx
index f8768c506..6c5ec3e84 100644
--- a/src/components/auth/register/Stepper.tsx
+++ b/src/components/auth/register/Stepper.tsx
@@ -99,13 +99,13 @@ const Stepper: FC<StepperProps> = ({ step, className }) => {
             variants={{
               future: {
                 scale: 1,
-                backgroundColor: colors.black40,
-                color: colors.gray100,
+                backgroundColor: colors.gray600,
+                color: colors.gray500,
               },
               current: {
                 scale: [1, 1, 1.2, 1],
-                backgroundColor: [colors.black40, colors.black40, colors.blue50, colors.blue50],
-                color: [colors.gray100, colors.gray100, colors.white100, colors.white100],
+                backgroundColor: [colors.gray600, colors.gray600, colors.success, colors.success],
+                color: [colors.gray500, colors.gray500, colors.gray10, colors.gray10],
                 transition: {
                   times: [0, 0.7, 0.9, 1],
                   duration: 2,
@@ -119,10 +119,10 @@ const Stepper: FC<StepperProps> = ({ step, className }) => {
             isActive={step >= 2}
             variants={{
               future: {
-                color: colors.gray100,
+                color: colors.gray500,
               },
               current: {
-                color: [colors.gray100, colors.gray100, colors.white100],
+                color: [colors.gray500, colors.gray500, colors.gray10],
                 transition: {
                   times: [0, 0.7, 1],
                   duration: 2,
@@ -156,7 +156,7 @@ const LineArea = styled.div`
 const Line = styled(m.div)`
   position: relative;
   margin: 13px 35px 0;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   height: 2px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -167,7 +167,7 @@ const Line = styled(m.div)`
 const LineFilled = styled(m.div)`
   position: absolute;
   left: 0;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   width: 50%;
   height: 100%;
 `;
@@ -202,7 +202,7 @@ const Circle = styled(m.div)`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   width: 28px;
   height: 28px;
   white-space: nowrap;
diff --git a/src/components/auth/register/verify/HelpCard.tsx b/src/components/auth/register/verify/HelpCard.tsx
index 6e6de958e..0890bb29e 100644
--- a/src/components/auth/register/verify/HelpCard.tsx
+++ b/src/components/auth/register/verify/HelpCard.tsx
@@ -35,12 +35,12 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>`
   gap: 10px;
   transition: background-color 0.3s, box-shadow 0.3s;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 19px 15px 18px;
 
   &:hover {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -68,7 +68,7 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>`
 const Content = styled.div`
   line-height: 140%;
   white-space: pre-line;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_M}
 `;
diff --git a/src/components/auth/register/verify/VerifyFrame.tsx b/src/components/auth/register/verify/VerifyFrame.tsx
index 05aacaf13..1b0f7ff89 100644
--- a/src/components/auth/register/verify/VerifyFrame.tsx
+++ b/src/components/auth/register/verify/VerifyFrame.tsx
@@ -56,7 +56,7 @@ const Title = styled.h2`
 const Description = styled.p`
   margin-top: 12px;
   text-align: center;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M}
 
diff --git a/src/components/auth/register/verify/VerifySubmitButton.tsx b/src/components/auth/register/verify/VerifySubmitButton.tsx
index 042c0a30b..729715123 100644
--- a/src/components/auth/register/verify/VerifySubmitButton.tsx
+++ b/src/components/auth/register/verify/VerifySubmitButton.tsx
@@ -23,14 +23,14 @@ const VerifySubmitButton = styled.button`
   ${(props) =>
     props.disabled
       ? css`
-          background-color: ${colors.black80};
+          background-color: ${colors.gray800};
           cursor: default;
-          color: ${colors.gray60};
+          color: ${colors.gray300};
         `
       : css`
-          background-color: ${colors.white100};
+          background-color: ${colors.gray10};
           cursor: pointer;
-          color: ${colors.black100};
+          color: ${colors.gray900};
         `}
 `;
 export default VerifySubmitButton;
diff --git a/src/components/auth/register/verify/view/ByPhoneView.tsx b/src/components/auth/register/verify/view/ByPhoneView.tsx
index 0f2b2d21f..738b25ade 100644
--- a/src/components/auth/register/verify/view/ByPhoneView.tsx
+++ b/src/components/auth/register/verify/view/ByPhoneView.tsx
@@ -136,7 +136,7 @@ const StyledByEmail = styled.div`
 const Label = styled.label`
   display: block;
   margin-bottom: 18px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${textStyles.SUIT_16_M};
 
diff --git a/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx b/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx
index d82308eb5..f176b6af2 100644
--- a/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx
+++ b/src/components/common/Banner/AppJamBanner/AppJamBanner.tsx
@@ -59,7 +59,7 @@ const StyledBanner = styled.div`
   position: relative;
   align-items: center;
   justify-content: center;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   padding: 20px 0;
   width: 100%;
   height: 96px;
diff --git a/src/components/common/Banner/RecruitingBanner/index.tsx b/src/components/common/Banner/RecruitingBanner/index.tsx
index d2b9b9b8d..0c748406c 100644
--- a/src/components/common/Banner/RecruitingBanner/index.tsx
+++ b/src/components/common/Banner/RecruitingBanner/index.tsx
@@ -112,7 +112,7 @@ const Logo = styled(MakersLogoWhite)`
 const Arrow = styled.div`
   display: none;
   grid-area: arrow;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_20_B}
 
diff --git a/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx b/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx
index 35384eaec..3c05f0c8d 100644
--- a/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx
+++ b/src/components/common/Banner/RecruitingBanner/legacy/RecruitingSessionBanner.tsx
@@ -84,7 +84,7 @@ const ContentArea = styled.div`
 
 const Title = styled.div`
   grid-area: title;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_26_B}
 
@@ -95,7 +95,7 @@ const Title = styled.div`
 
 const SubTitle = styled.div`
   grid-area: subtitle;
-  color: ${colors.black80};
+  color: ${colors.gray800};
 
   ${textStyles.SUIT_16_M};
 
@@ -119,7 +119,7 @@ const Logo = styled(MakersLogoDark)`
 const Arrow = styled.div`
   display: none;
   grid-area: arrow;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_20_B}
 
diff --git a/src/components/common/Banner/WelcomeBanner/index.tsx b/src/components/common/Banner/WelcomeBanner/index.tsx
index 46bbcc609..3beb00e86 100644
--- a/src/components/common/Banner/WelcomeBanner/index.tsx
+++ b/src/components/common/Banner/WelcomeBanner/index.tsx
@@ -65,13 +65,13 @@ const ContentWrapper = styled.div`
 
 const Title = styled.div`
   margin-top: 8px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
   ${textStyles.SUIT_18_B};
 `;
 
 const SubTitle = styled.div`
   margin-top: 4px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   ${textStyles.SUIT_12_M};
 `;
 
diff --git a/src/components/common/Button/style.ts b/src/components/common/Button/style.ts
index 7632d929c..b4d0ec788 100644
--- a/src/components/common/Button/style.ts
+++ b/src/components/common/Button/style.ts
@@ -7,15 +7,15 @@ export type ButtonSize = 'fill' | 'small' | 'medium' | 'large';
 export const buttonStyles: Record<ButtonStyle, SerializedStyles> = {
   default: css`
     background-color: #212121;
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   `,
   primary: css`
-    background-color: ${colors.white100};
-    color: ${colors.black100};
+    background-color: ${colors.gray10};
+    color: ${colors.gray900};
   `,
   danger: css`
-    background-color: ${colors.red100};
-    color: ${colors.gray40};
+    background-color: ${colors.error};
+    color: ${colors.gray200};
   `,
 };
 
diff --git a/src/components/common/Carousel/index.tsx b/src/components/common/Carousel/index.tsx
index 2ddc67dad..d26d492dc 100644
--- a/src/components/common/Carousel/index.tsx
+++ b/src/components/common/Carousel/index.tsx
@@ -98,12 +98,12 @@ const Container = styled.div`
 const Control = styled.button`
   align-self: center;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 40px;
   height: 40px;
 
   &:hover {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 `;
 
@@ -130,7 +130,7 @@ const Indicators = styled.div`
 
 const Indicator = styled.div<{ isActive?: boolean }>`
   border-radius: 50%;
-  background-color: ${({ isActive }) => (isActive ? colors.white100 : colors.black40)};
+  background-color: ${({ isActive }) => (isActive ? colors.gray10 : colors.gray600)};
   cursor: ${({ isActive }) => (isActive ? 'default' : 'pointer')};
   width: 8px;
   height: 8px;
diff --git a/src/components/common/Checkbox/index.tsx b/src/components/common/Checkbox/index.tsx
index 40b1fd047..00969b035 100644
--- a/src/components/common/Checkbox/index.tsx
+++ b/src/components/common/Checkbox/index.tsx
@@ -40,7 +40,7 @@ const StyledCheckbox = styled.span<CheckboxProps>`
   align-items: center;
   justify-content: center;
   transition: 0.2s background-color;
-  border: 1px solid ${colors.gray100};
+  border: 1px solid ${colors.gray500};
   border-radius: 4px;
   background-color: transparent;
   width: 22.5px;
@@ -48,14 +48,14 @@ const StyledCheckbox = styled.span<CheckboxProps>`
   ${({ checked }) =>
     checked &&
     css`
-      border: 1px solid ${colors.blue40};
-      background-color: ${colors.blue50};
+      border: 1px solid ${colors.blue300};
+      background-color: ${colors.success};
     `}
 
   & > svg {
     width: 14px;
     height: 9px;
-    color: ${colors.white100};
+    color: ${colors.gray10};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/common/Divider/Divider.tsx b/src/components/common/Divider/Divider.tsx
index ec3261de5..97fce8d9b 100644
--- a/src/components/common/Divider/Divider.tsx
+++ b/src/components/common/Divider/Divider.tsx
@@ -6,7 +6,7 @@ interface DividerProps {
   className?: string;
   color?: string;
 }
-const Divider: FC<DividerProps> = ({ color = colors.black60, className }) => {
+const Divider: FC<DividerProps> = ({ color = colors.gray700, className }) => {
   return <StyledDivider className={className} color={color} />;
 };
 
diff --git a/src/components/common/EditableSelect.tsx b/src/components/common/EditableSelect.tsx
index 3ac03ad0a..38adfdbb8 100644
--- a/src/components/common/EditableSelect.tsx
+++ b/src/components/common/EditableSelect.tsx
@@ -77,7 +77,7 @@ const StyledInput = styled.input`
   padding: 11.5px;
   width: calc(100% - 40px);
   height: 100%;
-  color: ${colors.gray30};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_16_M}
 
diff --git a/src/components/common/Footer/index.tsx b/src/components/common/Footer/index.tsx
index 2a36ec113..8aafca60a 100644
--- a/src/components/common/Footer/index.tsx
+++ b/src/components/common/Footer/index.tsx
@@ -44,8 +44,8 @@ const StyledFooter = styled.div<{ hide: boolean }>`
   bottom: 0;
   transition: transform 0.3s;
   z-index: 99999;
-  border-top: 1px solid ${colors.black40};
-  background-color: ${colors.black80};
+  border-top: 1px solid ${colors.gray600};
+  background-color: ${colors.gray800};
   padding: 0 0 0 38px;
   width: 100%;
 
@@ -70,6 +70,6 @@ const FooterLink = styled.a<{ highlight?: boolean }>`
           color: ${colors.white};
         `
       : css`
-          color: ${colors.gray40};
+          color: ${colors.gray200};
         `}
 `;
diff --git a/src/components/common/Header/SwitchableHeader.tsx b/src/components/common/Header/SwitchableHeader.tsx
index b537c9896..24041d085 100644
--- a/src/components/common/Header/SwitchableHeader.tsx
+++ b/src/components/common/Header/SwitchableHeader.tsx
@@ -36,7 +36,7 @@ const NotLoggedInHeader = styled.div`
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin: 0;
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
     height: 60px;
   }
 `;
diff --git a/src/components/common/Header/desktop/DesktopHeader.tsx b/src/components/common/Header/desktop/DesktopHeader.tsx
index f343e8aac..36c3aad29 100644
--- a/src/components/common/Header/desktop/DesktopHeader.tsx
+++ b/src/components/common/Header/desktop/DesktopHeader.tsx
@@ -66,9 +66,9 @@ export default DesktopHeader;
 
 const Container = styled.header`
   display: flex;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   height: 80px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const StyledBrandLink = styled.div`
@@ -95,7 +95,7 @@ const NavItem = styled.div<{ isActive: boolean }>`
   align-items: center;
   padding: 0 8px;
   height: 100%;
-  color: ${(props) => (props.isActive ? colors.white100 : colors.gray30)};
+  color: ${(props) => (props.isActive ? colors.gray10 : colors.gray500)};
 
   ${(props) =>
     props.isActive
diff --git a/src/components/common/Header/desktop/ProfileButton.tsx b/src/components/common/Header/desktop/ProfileButton.tsx
index 0548d159e..e23385e83 100644
--- a/src/components/common/Header/desktop/ProfileButton.tsx
+++ b/src/components/common/Header/desktop/ProfileButton.tsx
@@ -30,10 +30,10 @@ const StyledProfileButton = styled.button`
   display: flex;
   align-items: center;
   border-radius: 19px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   cursor: pointer;
   height: 38px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const ImageSlot = styled.div`
@@ -42,7 +42,7 @@ const ImageSlot = styled.div`
   justify-content: center;
   margin-left: 3px;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 32px;
   height: 32px;
   overflow: hidden;
diff --git a/src/components/common/Header/desktop/ProfileDropdown.tsx b/src/components/common/Header/desktop/ProfileDropdown.tsx
index 67d2267a0..67f9ec88d 100644
--- a/src/components/common/Header/desktop/ProfileDropdown.tsx
+++ b/src/components/common/Header/desktop/ProfileDropdown.tsx
@@ -48,11 +48,11 @@ const ContentBox = styled.div`
   flex-direction: column;
   border-radius: 14px;
   box-shadow: 0 10px 38px -10px rgb(22 23 24 / 35%), 0 10px 20px -15px rgb(22 23 24 / 20%);
-  background: ${colors.black60};
+  background: ${colors.gray700};
   padding: 12px 0;
   min-width: 176px;
   animation: slide-up-and-fade 0.4s cubic-bezier(0.16, 1, 0.3, 1);
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   & > * {
     cursor: pointer;
@@ -62,7 +62,7 @@ const ContentBox = styled.div`
 
     &:focus, &:focus-visible, &:hover {
       outline: none;
-      background-color: ${colors.black40};
+      background-color: ${colors.gray600};
     }
   }
 
diff --git a/src/components/common/Header/mobile/MobileHeader.tsx b/src/components/common/Header/mobile/MobileHeader.tsx
index f8ffa63d5..606d28be1 100644
--- a/src/components/common/Header/mobile/MobileHeader.tsx
+++ b/src/components/common/Header/mobile/MobileHeader.tsx
@@ -48,10 +48,10 @@ export default MobileHeader;
 
 const Container = styled.header`
   display: flex;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   padding: 0 16px;
   height: 56px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const NavButton = styled.button`
diff --git a/src/components/common/Header/mobile/MobileSideBar.tsx b/src/components/common/Header/mobile/MobileSideBar.tsx
index 4d95f0e58..bff242e40 100644
--- a/src/components/common/Header/mobile/MobileSideBar.tsx
+++ b/src/components/common/Header/mobile/MobileSideBar.tsx
@@ -160,12 +160,12 @@ const Content = styled.div`
   left: 0;
   flex-direction: column;
   z-index: 100001;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   width: 212px;
   height: 100vh;
   overflow-y: auto;
   animation: content-show 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   @keyframes content-show {
     from {
@@ -193,7 +193,7 @@ const ProfileImageSlot = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 14px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 42px;
   height: 42px;
   overflow: hidden;
@@ -225,7 +225,7 @@ const NavItem = styled('div')<{
   isActive?: boolean;
 }>`
   padding: 10px var(--x-gap);
-  color: ${(props) => (props.isActive ? colors.white100 : colors.gray30)};
+  color: ${(props) => (props.isActive ? colors.gray10 : colors.gray500)};
 
   ${textStyles.SUIT_18_M};
 `;
@@ -233,13 +233,13 @@ const NavItem = styled('div')<{
 const NavLinkSmall = styled.div<{ isActive?: boolean }>`
   cursor: pointer;
   padding: 8px var(--x-gap);
-  color: ${(props) => (props.isActive ? colors.white100 : colors.gray30)};
+  color: ${(props) => (props.isActive ? colors.gray10 : colors.gray500)};
 
   ${textStyles.SUIT_14_M};
 `;
 
 const Divider = styled.div`
   margin: 26px var(--x-gap);
-  border-top: 1px solid ${colors.black60};
-  color: ${colors.black60};
+  border-top: 1px solid ${colors.gray700};
+  color: ${colors.gray700};
 `;
diff --git a/src/components/common/ImageUploader/Legacy.tsx b/src/components/common/ImageUploader/Legacy.tsx
index 69862db63..5bc319922 100644
--- a/src/components/common/ImageUploader/Legacy.tsx
+++ b/src/components/common/ImageUploader/Legacy.tsx
@@ -78,7 +78,7 @@ const Container = styled.div<Pick<ImageUploaderProps, 'width' | 'height' | 'erro
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   width: ${({ width }) => (typeof width === 'string' ? width : `${width}px`)};
   height: ${({ height }) => (typeof height === 'string' ? height : `${height}px`)};
@@ -86,7 +86,7 @@ const Container = styled.div<Pick<ImageUploaderProps, 'width' | 'height' | 'erro
   ${({ error }) =>
     error &&
     css`
-      border: 1px solid ${colors.red100};
+      border: 1px solid ${colors.error};
     `}
 `;
 
diff --git a/src/components/common/ImageUploader/index.tsx b/src/components/common/ImageUploader/index.tsx
index 5732d5113..e16bd5dfb 100644
--- a/src/components/common/ImageUploader/index.tsx
+++ b/src/components/common/ImageUploader/index.tsx
@@ -153,7 +153,7 @@ const Container = styled.div<Pick<ImageUploaderProps, 'width' | 'height'> & { er
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   width: ${({ width }) => (typeof width === 'string' ? width : `${width}px`)};
   height: ${({ height }) => (typeof height === 'string' ? height : `${height}px`)};
@@ -161,7 +161,7 @@ const Container = styled.div<Pick<ImageUploaderProps, 'width' | 'height'> & { er
   ${({ error }) =>
     error &&
     css`
-      border: 1px solid ${colors.red100};
+      border: 1px solid ${colors.error};
     `}
 `;
 
@@ -184,7 +184,7 @@ const StyledSelectorControlButton = styled.button`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   cursor: pointer;
   width: 22px;
   height: 22px;
@@ -200,7 +200,7 @@ const StyledSelector = styled.div<{ isOpen: boolean }>`
 const editButtonStyle = css`
   display: flex;
   gap: 4px;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   padding: 10px 12px;
   line-height: 100%;
   letter-spacing: -0.01em;
@@ -220,7 +220,7 @@ const StyledEditButton = styled.button`
     position: absolute;
     top: 10px;
     right: 0;
-    background-color: ${colors.gray100};
+    background-color: ${colors.gray500};
     width: 1px;
     height: 14px;
     content: '';
diff --git a/src/components/common/Input/ErrorMessage.tsx b/src/components/common/Input/ErrorMessage.tsx
index 3d63b4974..5d7478d6c 100644
--- a/src/components/common/Input/ErrorMessage.tsx
+++ b/src/components/common/Input/ErrorMessage.tsx
@@ -38,7 +38,7 @@ const StyledErrorWrapper = styled.div`
 
 const StyledErrorMessage = styled(Text)`
   white-space: pre-line;
-  color: ${colors.red100};
+  color: ${colors.error};
 
   ${textStyles.SUIT_12_M}
 `;
diff --git a/src/components/common/Input/index.tsx b/src/components/common/Input/index.tsx
index eba831b7b..854d9147f 100644
--- a/src/components/common/Input/index.tsx
+++ b/src/components/common/Input/index.tsx
@@ -68,7 +68,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             <div>
               {count && (
                 <StyledCountValue>
-                  <Text color={colors.gray100} typography='SUIT_12_M'>
+                  <Text color={colors.gray500} typography='SUIT_12_M'>
                     {`${value?.length ?? 0}/${maxCount}`}
                   </Text>
                 </StyledCountValue>
@@ -86,31 +86,31 @@ export default Input;
 const StyledInput = styled.input<InputProps>`
   box-sizing: border-box;
   transition: all 0.2s;
-  border: 1.5px solid ${colors.black60};
+  border: 1.5px solid ${colors.gray700};
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 14px 20px;
   width: ${(props) => props.width};
-  color: ${colors.white100};
+  color: ${colors.gray10};
   ${textStyles.SUIT_16_M};
 
   &::placeholder {
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   }
 
   &:focus {
     outline: none;
-    border-color: ${colors.gray40};
-    background-color: ${colors.black80};
+    border-color: ${colors.gray200};
+    background-color: ${colors.gray800};
   }
 
   ${({ error }) =>
     error &&
     css`
-      border-color: ${colors.red100};
+      border-color: ${colors.error};
 
       :focus {
-        border-color: ${colors.red100};
+        border-color: ${colors.error};
       }
     `}
 `;
diff --git a/src/components/common/Loading/index.tsx b/src/components/common/Loading/index.tsx
index ae8694532..15fe03985 100644
--- a/src/components/common/Loading/index.tsx
+++ b/src/components/common/Loading/index.tsx
@@ -78,7 +78,7 @@ const StyledLoading = styled.div`
 
 const LoadingDot = styled(m.span)<{ color: LoadingColor }>`
   border-radius: 100%;
-  background-color: ${({ color }) => (color === 'default' ? colors.gray20 : colors.white100)};
+  background-color: ${({ color }) => (color === 'default' ? colors.gray50 : colors.gray10)};
   width: 12px;
   height: 12px;
 `;
diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx
index 2ac9b358a..24ef10860 100644
--- a/src/components/common/Modal/index.tsx
+++ b/src/components/common/Modal/index.tsx
@@ -85,9 +85,9 @@ const StyledModal = styled.div<{ width?: number }>`
   position: relative;
   z-index: 101;
   border-radius: 22.94px;
-  background: ${colors.black80};
+  background: ${colors.gray800};
   width: ${({ width }) => width ?? 450}px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const StyledCloseButton = styled.button`
@@ -126,7 +126,7 @@ const StyledTitle = styled.h1`
 
 const StyledContent = styled.div`
   margin-top: 18px;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_18_M};
 `;
diff --git a/src/components/common/MonthPicker.tsx b/src/components/common/MonthPicker.tsx
index 109d54319..92db3585c 100644
--- a/src/components/common/MonthPicker.tsx
+++ b/src/components/common/MonthPicker.tsx
@@ -28,21 +28,21 @@ export default function MonthPicker({ onChange, value, placeholder }: MonthPicke
 const StyledDatePicker = styled(DatePicker)`
   box-sizing: border-box;
   transition: all 0.2s;
-  border: 1.5px solid ${colors.black60};
+  border: 1.5px solid ${colors.gray700};
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 14px 20px;
   width: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
   ${textStyles.SUIT_16_M};
 
   &::placeholder {
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   }
 
   &:focus {
     outline: none;
-    border-color: ${colors.gray40};
-    background-color: ${colors.black80};
+    border-color: ${colors.gray200};
+    background-color: ${colors.gray800};
   }
 `;
diff --git a/src/components/common/Select/index.tsx b/src/components/common/Select/index.tsx
index c80317e96..3dc7f965c 100644
--- a/src/components/common/Select/index.tsx
+++ b/src/components/common/Select/index.tsx
@@ -30,24 +30,24 @@ const StyledSelect = styled.select<Pick<SelectProps, 'width' | 'error'>>`
   transition: all 0.2s;
   border: 1px solid transparent;
   border-radius: 6px;
-  background: top 12px right 14px ${colors.black60} no-repeat
+  background: top 12px right 14px ${colors.gray700} no-repeat
     url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.42387 11.6742C9.18956 11.9086 8.80966 11.9086 8.57535 11.6742L3.70034 6.79924C3.46603 6.56492 3.46603 6.18503 3.70034 5.95071C3.93466 5.7164 4.31456 5.7164 4.54887 5.95071L8.99961 10.4014L13.4503 5.95071C13.6847 5.7164 14.0646 5.7164 14.2989 5.95071C14.5332 6.18503 14.5332 6.56492 14.2989 6.79924L9.42387 11.6742Z' fill='%23646464'/%3E%3C/svg%3E%0A");
   padding: 14px 34px 14px 20px;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
   ${textStyles.SUIT_16_M};
   ${({ width }) => `width: ${width}${typeof width === 'number' ? 'px' : ''};`}
 
   &:focus {
-    border-color: ${colors.gray40};
+    border-color: ${colors.gray200};
   }
 
   ${({ error }) =>
     error &&
     css`
-      border-color: ${colors.red100};
+      border-color: ${colors.error};
 
       :focus {
-        border-color: ${colors.red100};
+        border-color: ${colors.error};
       }
     `}
 `;
diff --git a/src/components/common/SquareLink/style.ts b/src/components/common/SquareLink/style.ts
index e07f57478..a11b6904e 100644
--- a/src/components/common/SquareLink/style.ts
+++ b/src/components/common/SquareLink/style.ts
@@ -7,16 +7,16 @@ export type ButtonSize = 'small' | 'medium' | 'large';
 export const buttonStyles: Record<ButtonStyle, SerializedStyles> = {
   default: css`
     background-color: #212121;
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   `,
   primary: css`
     transition: background-color 0.3s;
-    background-color: ${colors.white100};
-    color: ${colors.black100};
+    background-color: ${colors.gray10};
+    color: ${colors.gray900};
 
     &:hover,
     &:focus {
-      background-color: ${colors.gray20};
+      background-color: ${colors.gray50};
     }
   `,
 };
diff --git a/src/components/common/Switch/index.tsx b/src/components/common/Switch/index.tsx
index 898fbc1ae..d00d829d2 100644
--- a/src/components/common/Switch/index.tsx
+++ b/src/components/common/Switch/index.tsx
@@ -44,7 +44,7 @@ const StyledInput = styled.input<{ translateX: string }>`
   height: 0;
 
   &:checked + .slider {
-    background: ${colors.blue50};
+    background: ${colors.success};
   }
 
   &:checked + .slider::before {
@@ -64,7 +64,7 @@ const StyledSlider = styled.span<{ width: string; height: string }>`
   left: 0;
   transition: 0.2s;
   border-radius: 1000px;
-  background-color: ${colors.gray80};
+  background-color: ${colors.gray400};
   cursor: pointer;
 
   &::before {
@@ -74,7 +74,7 @@ const StyledSlider = styled.span<{ width: string; height: string }>`
     transform: translateY(-50%);
     transition: 0.2s;
     border-radius: 50%;
-    background-color: ${colors.white100};
+    background-color: ${colors.gray10};
     width: ${(props) => props.width};
     height: ${(props) => props.height};
     content: '';
diff --git a/src/components/common/Text/index.tsx b/src/components/common/Text/index.tsx
index 706c10ab5..0c386efe8 100644
--- a/src/components/common/Text/index.tsx
+++ b/src/components/common/Text/index.tsx
@@ -44,7 +44,7 @@ const StyledText = styled.span<TextProps>`
     css`
       ${textStyles.SUIT_12_M}
 
-      color: ${colors.red100};
+      color: ${colors.error};
     `}
   ${space}
 `;
diff --git a/src/components/common/TextArea/index.tsx b/src/components/common/TextArea/index.tsx
index 9f7b3b1eb..907b5d49c 100644
--- a/src/components/common/TextArea/index.tsx
+++ b/src/components/common/TextArea/index.tsx
@@ -28,7 +28,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
         />
         {count && (
           <StyledCountValue>
-            <Text color={colors.gray100} typography='SUIT_12_M'>
+            <Text color={colors.gray500} typography='SUIT_12_M'>
               {`${value.length}/${maxCount}`}
             </Text>
           </StyledCountValue>
@@ -42,32 +42,32 @@ export default TextArea;
 
 const StyledTextArea = styled.textarea<TextAreaProps>`
   transition: all 0.2s;
-  border: 1.5px solid ${colors.black60};
+  border: 1.5px solid ${colors.gray700};
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 14px 20px;
   width: 100%;
   resize: none;
-  color: ${colors.white100};
+  color: ${colors.gray10};
   ${textStyles.SUIT_16_M}
 
   &::placeholder {
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   }
 
   &:focus {
     outline: none;
-    border-color: ${colors.gray40};
-    background-color: ${colors.black80};
+    border-color: ${colors.gray200};
+    background-color: ${colors.gray800};
   }
 
   ${({ error }) =>
     error &&
     css`
-      border-color: ${colors.red100};
+      border-color: ${colors.error};
 
       :focus {
-        border-color: ${colors.red100};
+        border-color: ${colors.error};
       }
     `}
 `;
diff --git a/src/components/common/Toast/ToastEntry.tsx b/src/components/common/Toast/ToastEntry.tsx
index 050d6fcc2..f93b9bfe2 100644
--- a/src/components/common/Toast/ToastEntry.tsx
+++ b/src/components/common/Toast/ToastEntry.tsx
@@ -32,7 +32,7 @@ const TOAST_CONTAINER_LEFT = 36;
 const StyledToastEntry = styled.div`
   display: flex;
   border-radius: 18px;
-  background: ${colors.black60};
+  background: ${colors.gray700};
   padding: 16px;
   width: fit-content;
 
@@ -49,7 +49,7 @@ const HeaderBox = styled.div`
 
 const Title = styled.h2`
   margin-bottom: 7px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_20_B};
 `;
@@ -68,5 +68,5 @@ const IconBox = styled.div`
 `;
 
 const ContentBox = styled.div`
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 `;
diff --git a/src/components/common/form/FormCollapsible.tsx b/src/components/common/form/FormCollapsible.tsx
index cf81c8252..caa2a041c 100644
--- a/src/components/common/form/FormCollapsible.tsx
+++ b/src/components/common/form/FormCollapsible.tsx
@@ -24,7 +24,7 @@ const FormAccordion: FC<PropsWithChildren<FormAccordionProps>> = ({ description,
         </StyledTitleWrapper>
         <StyledTrigger>{open ? '- 접기' : '+ 펼치기'}</StyledTrigger>
       </StyledHeader>
-      <Text mt={8} typography='SUIT_14_M' color={colors.gray80}>
+      <Text mt={8} typography='SUIT_14_M' color={colors.gray400}>
         {description}
       </Text>
       <StyledDivder />
@@ -63,7 +63,7 @@ const StyledHeader = styled.div`
 
 const StyledDivder = styled.div`
   margin-top: 16px;
-  border: 0.5px solid ${colors.black60};
+  border: 0.5px solid ${colors.gray700};
 `;
 
 const StyledTitleWrapper = styled.div`
@@ -73,13 +73,13 @@ const StyledTitleWrapper = styled.div`
 
 const Essential = styled(Text)`
   margin: 0 0 0 4px;
-  color: ${colors.orange100};
+  color: ${colors.secondary};
   ${textStyles.SUIT_16_M};
 `;
 
 const StyledTrigger = styled(Collapsible.Trigger)`
   cursor: pointer;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   ${textStyles.SUIT_15_SB};
 `;
 
diff --git a/src/components/common/form/FormItem.tsx b/src/components/common/form/FormItem.tsx
index 0643fb3c2..607670827 100644
--- a/src/components/common/form/FormItem.tsx
+++ b/src/components/common/form/FormItem.tsx
@@ -42,6 +42,6 @@ const StyledErrorWrapper = styled.div`
 `;
 
 const StyledErrorMessage = styled(Text)`
-  color: ${colors.red100};
+  color: ${colors.error};
   ${textStyles.SUIT_12_M}
 `;
diff --git a/src/components/common/form/FormProgress.tsx b/src/components/common/form/FormProgress.tsx
index f30bb7421..7716beaf2 100644
--- a/src/components/common/form/FormProgress.tsx
+++ b/src/components/common/form/FormProgress.tsx
@@ -32,13 +32,13 @@ const FormProgress: FC<FormProgressProps> = ({ className, title, progressLabel,
       <StyledHeader>
         <FormTitle typography='SUIT_24_SB'>{title}</FormTitle>
         <ProgressNumber>
-          <Text typography='SUIT_12_M' color={colors.blue50}>
+          <Text typography='SUIT_12_M' color={colors.success}>
             {`${activeItems.length}/${items.length}`}
           </Text>
         </ProgressNumber>
       </StyledHeader>
       <Divider />
-      <Text typography='SUIT_16_M' color={colors.gray100}>
+      <Text typography='SUIT_16_M' color={colors.gray500}>
         {progressLabel}
       </Text>
       <StyledProgressRoot value={progressPercentage}>
@@ -67,7 +67,7 @@ export default FormProgress;
 
 const StyledFormProgress = styled.div`
   border-radius: 12px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 47px 40px;
   width: 278px;
   height: fit-content;
@@ -85,7 +85,7 @@ const ProgressNumber = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 50px;
   height: 24px;
 `;
@@ -95,7 +95,7 @@ const StyledProgressRoot = styled(Progress.Root)`
   transform: translateZ(0);
   margin: 17px 0 0;
   border-radius: 100px;
-  background-color: ${colors.gray100};
+  background-color: ${colors.gray500};
   width: 100%;
   height: 6px;
   overflow: hidden;
@@ -103,7 +103,7 @@ const StyledProgressRoot = styled(Progress.Root)`
 
 const StyledProgressIndicator = styled(Progress.Indicator)`
   transition: transform 0.3s;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   width: 100%;
   height: 100%;
 `;
@@ -111,7 +111,7 @@ const StyledProgressIndicator = styled(Progress.Indicator)`
 const StatusList = styled.ul`
   margin: 29px 0 0;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 11px 0;
   list-style: none;
 `;
@@ -122,7 +122,7 @@ const ListItem = styled.li<{ isDirty?: boolean }>`
   justify-content: space-between;
   transition: color 0.2s;
   padding: 14px 20px;
-  color: ${({ isDirty }) => (isDirty ? colors.white100 : colors.gray100)};
+  color: ${({ isDirty }) => (isDirty ? colors.gray10 : colors.gray500)};
   ${textStyles.SUIT_16_M};
 `;
 
@@ -138,7 +138,7 @@ const Checked = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   width: 14px;
   height: 14px;
 `;
@@ -146,7 +146,7 @@ const Checked = styled.div`
 const Divider = styled.hr`
   margin: 36px 0 28px;
   border: none;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 100%;
   height: 1.5px;
 `;
diff --git a/src/components/common/form/FormTitle.tsx b/src/components/common/form/FormTitle.tsx
index e079b917f..a929d8e90 100644
--- a/src/components/common/form/FormTitle.tsx
+++ b/src/components/common/form/FormTitle.tsx
@@ -35,12 +35,12 @@ const StyledTitle = styled.div`
 
 const Essential = styled(Text)`
   margin: 0 0 0 4px;
-  color: ${colors.orange100};
+  color: ${colors.secondary};
   ${textStyles.SUIT_16_M};
 `;
 
 const Description = styled(Text)`
   align-self: center;
   margin: 0 0 0 10px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
diff --git a/src/components/debug/Panel.tsx b/src/components/debug/Panel.tsx
index 658e55119..045869d10 100644
--- a/src/components/debug/Panel.tsx
+++ b/src/components/debug/Panel.tsx
@@ -37,11 +37,11 @@ const disclosureButtonStyle = css`
   justify-content: space-between;
   margin-bottom: 15px;
   border-radius: 5px;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   cursor: pointer;
   padding: 8px 16px;
   width: 100%;
-  color: ${colors.gray20};
+  color: ${colors.gray50};
 `;
 
 const collapsibleContentStyle = css`
diff --git a/src/components/debug/SideToggleButton.tsx b/src/components/debug/SideToggleButton.tsx
index 3c4940647..83b8b8935 100644
--- a/src/components/debug/SideToggleButton.tsx
+++ b/src/components/debug/SideToggleButton.tsx
@@ -24,14 +24,14 @@ const StyledSideToggleButton = styled.button`
   bottom: 2px;
   z-index: 100009;
   border-radius: 7px;
-  background-color: ${colors.blue50};
+  background-color: ${colors.success};
   cursor: pointer;
   padding: 5px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_14_B}
 
   &:hover {
-    background-color: ${colors.blue40};
+    background-color: ${colors.blue300};
   }
 `;
diff --git a/src/components/debug/panels/AccessTokenPanel.tsx b/src/components/debug/panels/AccessTokenPanel.tsx
index 27a890223..a609efeba 100644
--- a/src/components/debug/panels/AccessTokenPanel.tsx
+++ b/src/components/debug/panels/AccessTokenPanel.tsx
@@ -67,7 +67,7 @@ const AccessTokenPanel: FC = () => {
             <ActionButton
               variant='primary'
               onClick={() => dispatchEdit({ type: 'end' })}
-              css={{ backgroundColor: colors.gray100, marginLeft: '5px' }}
+              css={{ backgroundColor: colors.gray500, marginLeft: '5px' }}
             >
               취소
             </ActionButton>
diff --git a/src/components/intro/sections/CatchPhrase/index.tsx b/src/components/intro/sections/CatchPhrase/index.tsx
index 72d1bdb75..6c3232da0 100644
--- a/src/components/intro/sections/CatchPhrase/index.tsx
+++ b/src/components/intro/sections/CatchPhrase/index.tsx
@@ -189,7 +189,7 @@ const SiteLink = styled(Link)`
   display: flex;
   align-items: center;
   transition: color 0.3s;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   &:hover {
     color: ${colors.white};
diff --git a/src/components/intro/sections/Footer.tsx b/src/components/intro/sections/Footer.tsx
index 5a2f8641b..f5e2b0aff 100644
--- a/src/components/intro/sections/Footer.tsx
+++ b/src/components/intro/sections/Footer.tsx
@@ -33,7 +33,7 @@ const Container = styled.div`
 `;
 
 const HLine = styled.div`
-  border-top: 1px solid ${colors.black40};
+  border-top: 1px solid ${colors.gray600};
   width: 100%;
 `;
 
diff --git a/src/components/intro/sections/Login.tsx b/src/components/intro/sections/Login.tsx
index 16ee21dd9..ddc383468 100644
--- a/src/components/intro/sections/Login.tsx
+++ b/src/components/intro/sections/Login.tsx
@@ -66,9 +66,9 @@ const LoginButton = styled(Link)`
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background: ${colors.white100};
+  background: ${colors.gray10};
   padding: 6px 10px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_M};
 
@@ -83,9 +83,9 @@ const RegisterButton = styled(Link)`
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid ${colors.black40};
+  border: 1px solid ${colors.gray600};
   border-radius: 6px;
-  background: ${colors.black80};
+  background: ${colors.gray800};
   padding: 6px 10px;
 
   ${textStyles.SUIT_16_M};
diff --git a/src/components/intro/sections/ValueSection/ValueCard.tsx b/src/components/intro/sections/ValueSection/ValueCard.tsx
index da8cce7a4..48201ee41 100644
--- a/src/components/intro/sections/ValueSection/ValueCard.tsx
+++ b/src/components/intro/sections/ValueSection/ValueCard.tsx
@@ -96,7 +96,7 @@ export default ValueCard;
 
 const Container = styled.div`
   transform: translateZ(0);
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
 `;
 
 const Card = styled(m.div, {
@@ -109,7 +109,7 @@ const Card = styled(m.div, {
   transform: translateZ(0);
   transition: border 0.3s;
   outline: 1px solid transparent;
-  border: 1px solid ${colors.gray80};
+  border: 1px solid ${colors.gray400};
   border-radius: 20px;
   overflow: hidden;
   will-change: transform;
diff --git a/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx b/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx
index 7fcef7d22..53015b265 100644
--- a/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx
+++ b/src/components/intro/sections/ValueSection/valueContents/ValueBase.tsx
@@ -46,7 +46,7 @@ const ValueBase: FC<ValueBaseProps> = ({ image, message, reverse }) => {
 };
 
 const Highlight = styled.span`
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 export default Object.assign(ValueBase, {
@@ -96,9 +96,9 @@ const ImageBox = styled(m.div)`
   align-self: flex-end;
   justify-content: center;
   transform: translateZ(0);
-  border: 1px solid var(--black40, ${colors.black40});
+  border: 1px solid var(--gray600, ${colors.gray600});
   border-radius: 16px 16px 0 0;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   width: 630px;
   height: 370px;
   overflow: hidden;
@@ -120,7 +120,7 @@ const ImageBox = styled(m.div)`
 const TextBox = styled.div`
   max-width: 500px;
   word-break: keep-all;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_30_SB};
 
diff --git a/src/components/makers/MakersMembers.tsx b/src/components/makers/MakersMembers.tsx
index daef2ec06..4778c14fc 100644
--- a/src/components/makers/MakersMembers.tsx
+++ b/src/components/makers/MakersMembers.tsx
@@ -105,11 +105,11 @@ const TabButton = styled.a`
   cursor: pointer;
   padding: 12px 24px;
   min-width: max-content;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   &[data-state='active'] {
-    border-bottom: 2px solid ${colors.white100};
-    color: ${colors.white100};
+    border-bottom: 2px solid ${colors.gray10};
+    color: ${colors.gray10};
   }
 
   ${textStyles.SUIT_20_B};
@@ -136,9 +136,9 @@ const TabBottomLine = styled.div`
 const GenerationMessage = styled.div`
   margin-top: 50px;
   border-radius: 16px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 32px;
-  color: ${colors.gray30};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_18_M}
 
diff --git a/src/components/makers/Notifier.tsx b/src/components/makers/Notifier.tsx
index b92b582d9..dd5af6619 100644
--- a/src/components/makers/Notifier.tsx
+++ b/src/components/makers/Notifier.tsx
@@ -39,7 +39,7 @@ export default Notifier;
 
 const StyledJoinNotifier = styled.div`
   border-radius: 16px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 32px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -57,7 +57,7 @@ const Title = styled.h2`
 
 const SubTitle = styled.h3`
   margin-top: 4px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M};
 
@@ -80,8 +80,8 @@ const ButtonGroup = styled.div`
 //   align-items: center;
 //   justify-content: center;
 //   border-radius: 6px;
-//   background-color: ${colors.white100};
-//   color: ${colors.black100};
+//   background-color: ${colors.gray10};
+//   color: ${colors.gray900};
 //   cursor: pointer;
 //   padding: 14px 20px;
 
@@ -92,7 +92,7 @@ const ExpiredButton = styled.a`
   display: flex;
   align-items: center;
   justify-content: center;
-  border: 1px solid ${colors.gray80};
+  border: 1px solid ${colors.gray400};
   border-radius: 6px;
   cursor: pointer;
   padding: 14px 20px;
diff --git a/src/components/makers/PersonBlock.tsx b/src/components/makers/PersonBlock.tsx
index d990411b0..7769ed520 100644
--- a/src/components/makers/PersonBlock.tsx
+++ b/src/components/makers/PersonBlock.tsx
@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 import { FC, useState } from 'react';
 
 import ResizedImage from '@/components/common/ResizedImage';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -132,7 +132,7 @@ const Position = styled.p`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_M};
 
diff --git a/src/components/makers/TeamBlock.tsx b/src/components/makers/TeamBlock.tsx
index 1bf4b849b..91be893da 100644
--- a/src/components/makers/TeamBlock.tsx
+++ b/src/components/makers/TeamBlock.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { FC, ReactNode } from 'react';
 
 import IconLinkOutgoing from '@/public/icons/icon-link-outgoing.svg';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -56,7 +56,7 @@ const TitleBox = styled.a`
 
 const Description = styled.p`
   margin-top: 4px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M};
 
diff --git a/src/components/members/common/MemberBlock.tsx b/src/components/members/common/MemberBlock.tsx
index 5b6915bb8..035383a30 100644
--- a/src/components/members/common/MemberBlock.tsx
+++ b/src/components/members/common/MemberBlock.tsx
@@ -1,9 +1,9 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { FC, useState } from 'react';
 
 import ResizedImage from '@/components/common/ResizedImage';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -144,7 +144,7 @@ const Name = styled.h3`
 `;
 
 const Po = styled.span`
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_16_M};
 
@@ -162,9 +162,9 @@ const BadgeContainer = styled.div`
 const Badge = styled.div`
   margin-right: 4px;
   border-radius: 3px;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   padding: 2px 6px;
-  color: ${colors.gray20};
+  color: ${colors.gray50};
 
   ${textStyles.SUIT_14_M};
 
diff --git a/src/components/members/common/select/OrderBySelect.tsx b/src/components/members/common/select/OrderBySelect.tsx
index 7e5fe8df6..1f7257187 100644
--- a/src/components/members/common/select/OrderBySelect.tsx
+++ b/src/components/members/common/select/OrderBySelect.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 import * as Select from '@radix-ui/react-select';
+import { colors } from '@sopt-makers/colors';
 import dynamic from 'next/dynamic';
 import React, { FC, PropsWithChildren, ReactNode, useEffect, useState } from 'react';
 
@@ -7,7 +8,6 @@ import Text from '@/components/common/Text';
 import { SelectContext, useSelectContext } from '@/components/members/common/select/context';
 import { Overlay } from '@/components/members/common/select/Overlay';
 import IconArrowUpDown from '@/public/icons/icon-arrow-up-down.svg';
-import { colors } from '@sopt-makers/colors';
 import { textStyles } from '@/styles/typography';
 
 const SelectPortal = dynamic<Select.SelectPortalProps>(
@@ -58,7 +58,7 @@ const SelectComp: FC<PropsWithChildren<SelectCompProps>> = ({ onChange, children
       <Select.Root onValueChange={onChange} {...props} open={open} onOpenChange={onOpenChange}>
         <StyledTrigger>
           <IconArrowUpDown />
-          <Text typography='SUIT_18_M' color={colors.gray80}>
+          <Text typography='SUIT_18_M' color={colors.gray400}>
             {label}
           </Text>
         </StyledTrigger>
@@ -86,7 +86,7 @@ const StyledTrigger = styled(Select.Trigger)`
 const StyledContent = styled(Select.Content)`
   margin-top: 4px;
   border-radius: 12px;
-  background: ${colors.black60};
+  background: ${colors.gray700};
   padding: 7px;
   width: var(--radix-select-trigger-width);
   max-height: 262px;
@@ -125,12 +125,12 @@ const StyledItem = styled(Select.Item)`
   cursor: pointer;
   padding: 5px 10px;
   width: 100%;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   &[data-highlighted] {
     outline: none;
-    background-color: ${colors.black40};
-    color: ${colors.white100};
+    background-color: ${colors.gray600};
+    color: ${colors.gray10};
   }
 
   /* &[data-disabled] {
diff --git a/src/components/members/common/select/Select.tsx b/src/components/members/common/select/Select.tsx
index f89a51310..e1775e638 100644
--- a/src/components/members/common/select/Select.tsx
+++ b/src/components/members/common/select/Select.tsx
@@ -126,20 +126,20 @@ const StyledTrigger = styled.div<Pick<SelectProps, 'error'>>`
   justify-content: space-between;
   border: 1px solid transparent;
   border-radius: 12px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 14px 20px;
   width: 100%;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${({ error }) =>
     error &&
     css`
-      border-color: ${colors.red100};
+      border-color: ${colors.error};
 
       &:focus {
         outline: none;
-        border-color: ${colors.red100};
+        border-color: ${colors.error};
       }
     `};
 
@@ -161,7 +161,7 @@ const StyledTrigger = styled.div<Pick<SelectProps, 'error'>>`
 const StyledContent = styled(Select.Content)`
   margin-top: 4px;
   border-radius: 12px;
-  background: ${colors.black60};
+  background: ${colors.gray700};
   padding: 7px;
   width: var(--radix-select-trigger-width);
   max-height: 262px;
@@ -217,7 +217,7 @@ const StyledThumb = styled(ScrollArea.Thumb)`
   right: 8px;
   flex: 1;
   border-radius: 4px;
-  background-color: ${colors.gray80};
+  background-color: ${colors.gray400};
 
   &::before {
     position: absolute;
@@ -259,12 +259,12 @@ const StyledItem = styled(Select.Item)`
   cursor: pointer;
   padding: 5px 10px;
   width: 100%;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   &[data-highlighted] {
     outline: none;
-    background-color: ${colors.black40};
-    color: ${colors.white100};
+    background-color: ${colors.gray600};
+    color: ${colors.gray10};
   }
 
   /* &[data-disabled] {
diff --git a/src/components/members/detail/ActivityBadge.tsx b/src/components/members/detail/ActivityBadge.tsx
index 8650091bb..4050a5bff 100644
--- a/src/components/members/detail/ActivityBadge.tsx
+++ b/src/components/members/detail/ActivityBadge.tsx
@@ -19,16 +19,16 @@ const Container = styled.div`
   align-items: center;
   transition: background-color 0.2s;
   border-radius: 13px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 6px 14px;
   line-height: 100%;
   letter-spacing: -0.01em;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_14_M}
 
   &:hover {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/members/detail/CareerSection/CareerItem.tsx b/src/components/members/detail/CareerSection/CareerItem.tsx
index 38cdb4b80..f9420f1eb 100644
--- a/src/components/members/detail/CareerSection/CareerItem.tsx
+++ b/src/components/members/detail/CareerSection/CareerItem.tsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import dayjs from 'dayjs';
 import { FC } from 'react';
 
 import { Career } from '@/components/members/detail/types';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -31,7 +31,7 @@ const SubContent = styled.div`
   gap: 12px;
   align-items: center;
   line-height: 14px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_M};
 
@@ -46,7 +46,7 @@ const SubContent = styled.div`
 `;
 
 const Divider = styled.div`
-  background-color: ${colors.gray100};
+  background-color: ${colors.gray500};
   width: 1px;
   height: 14px;
 
@@ -58,7 +58,7 @@ const Divider = styled.div`
 const CompanyName = styled.div`
   margin-bottom: 10px;
   line-height: 18px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_18_M};
 
diff --git a/src/components/members/detail/CareerSection/index.tsx b/src/components/members/detail/CareerSection/index.tsx
index 721923e62..a850f10bd 100644
--- a/src/components/members/detail/CareerSection/index.tsx
+++ b/src/components/members/detail/CareerSection/index.tsx
@@ -107,7 +107,7 @@ const CareerItemDecoration = styled.div<{ isCurrent: boolean; isEnd: boolean }>`
   & > .circle {
     margin-top: 6px;
     border-radius: 50%;
-    background-color: ${({ isCurrent }) => (isCurrent ? '#CDF47C' : colors.gray60)};
+    background-color: ${({ isCurrent }) => (isCurrent ? '#CDF47C' : colors.gray300)};
     width: 6px;
     height: 6px;
   }
@@ -117,7 +117,7 @@ const CareerItemDecoration = styled.div<{ isCurrent: boolean; isEnd: boolean }>`
     top: 16px;
     left: 2.5px;
     border-radius: 1px;
-    background-color: ${colors.gray60};
+    background-color: ${colors.gray300};
     width: 1px;
     height: 52px;
 
diff --git a/src/components/members/detail/EmptyProfile.tsx b/src/components/members/detail/EmptyProfile.tsx
index 176afb965..0b1bd1a35 100644
--- a/src/components/members/detail/EmptyProfile.tsx
+++ b/src/components/members/detail/EmptyProfile.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import ProfileIcon from 'public/icons/icon-profile.svg';
 
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 export default function EmptyProfile() {
@@ -51,7 +51,7 @@ const EmptyProfileImage = styled.div`
 const Description = styled.div`
   margin-top: 24px;
   line-height: 30px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
   font-size: 24px;
   font-weight: 400;
 
diff --git a/src/components/members/detail/InterestSection/index.tsx b/src/components/members/detail/InterestSection/index.tsx
index b1c66e768..e26288dbe 100644
--- a/src/components/members/detail/InterestSection/index.tsx
+++ b/src/components/members/detail/InterestSection/index.tsx
@@ -178,10 +178,10 @@ const BalanceGameWrapper = styled.div`
 
 const BalanceGameItem = styled.div`
   border-radius: 13px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 6px 14px;
   line-height: 16px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_14_M};
 `;
diff --git a/src/components/members/detail/MemberDetail.tsx b/src/components/members/detail/MemberDetail.tsx
index 03899a93a..5cff09db8 100644
--- a/src/components/members/detail/MemberDetail.tsx
+++ b/src/components/members/detail/MemberDetail.tsx
@@ -320,7 +320,7 @@ const EmptyProfileImage = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 36px;
-  background: ${colors.black60};
+  background: ${colors.gray700};
   width: 171px;
   height: 171px;
 `;
@@ -466,10 +466,10 @@ const StyledAddressBadgeWrapper = styled.div`
 
 const AddressBadge = styled.div`
   border-radius: 13px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 6px 14px;
   line-height: 16px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_14_M};
 `;
@@ -524,7 +524,7 @@ const ProjectUploadNudge = styled.div`
   justify-content: center;
   margin-top: 60px;
   border-radius: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   height: 317px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -551,9 +551,9 @@ const ProjectUploadButton = styled(Link)`
   z-index: 1;
   margin-top: 24px;
   border-radius: 14px;
-  background-color: ${colors.white100};
+  background-color: ${colors.gray10};
   padding: 14px 48px;
-  color: ${colors.black80};
+  color: ${colors.gray800};
 
   ${textStyles.SUIT_15_SB};
 
diff --git a/src/components/members/detail/MemberProjectCard.tsx b/src/components/members/detail/MemberProjectCard.tsx
index 41193284e..e293cb5b4 100644
--- a/src/components/members/detail/MemberProjectCard.tsx
+++ b/src/components/members/detail/MemberProjectCard.tsx
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 import { FC } from 'react';
 
 import { MemberProject } from '@/api/endpoint_LEGACY/members/type';
 import { PROJECT_CATEGORY_LABEL } from '@/components/members/detail/constants';
 import { playgroundLink } from '@/constants/links';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -55,7 +55,7 @@ const StyledCard = styled.a`
   position: relative;
   flex-direction: column;
   border-radius: 24px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   cursor: pointer;
   width: 381px;
   height: 317px;
@@ -160,7 +160,7 @@ const Title = styled.div`
 const Generation = styled.div`
   line-height: 100%;
   letter-spacing: -0.01em;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   font-size: 12px;
   font-weight: 500;
   @media ${MOBILE_MEDIA_QUERY} {
@@ -172,7 +172,7 @@ const Summary = styled.div`
   margin-top: 14px;
   line-height: 100%;
   letter-spacing: -0.01em;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
   font-size: 14px;
   font-weight: 500;
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/members/detail/MessageSection/MessageModal.tsx b/src/components/members/detail/MessageSection/MessageModal.tsx
index dcdfbc018..4dae40799 100644
--- a/src/components/members/detail/MessageSection/MessageModal.tsx
+++ b/src/components/members/detail/MessageSection/MessageModal.tsx
@@ -141,7 +141,7 @@ const MessageModal: FC<MessageModalProps> = ({
         <Text mt={30} typography='SUIT_26_B'>
           {name}님에게 쪽지 보내기
         </Text>
-        <Text mt={14} typography='SUIT_14_M' color={colors.gray60}>
+        <Text mt={14} typography='SUIT_14_M' color={colors.gray300}>
           쪽지는 상대방의 이메일로 전달됩니다:)
         </Text>
         <StyledCategory>
@@ -152,14 +152,14 @@ const MessageModal: FC<MessageModalProps> = ({
               isSelected={category.value === (selectedCategory as MessageCategory | null)}
             >
               <StyledIcon src={category.icon} alt={category.value} />
-              <Text typography='SUIT_15_SB' color={colors.gray40}>
+              <Text typography='SUIT_15_SB' color={colors.gray200}>
                 {category.value}
               </Text>
             </StyledCategoryItem>
           ))}
         </StyledCategory>
         <TextWrapper>
-          <Text mt={46} color={colors.gray40} typography='SUIT_14_M'>
+          <Text mt={46} color={colors.gray200} typography='SUIT_14_M'>
             회신 받을 본인 이메일
           </Text>
         </TextWrapper>
@@ -183,7 +183,7 @@ const MessageModal: FC<MessageModalProps> = ({
           {isLoading ? (
             <Loading color='white' />
           ) : (
-            <Text typography='SUIT_15_SB' color={isValid ? colors.black100 : colors.gray80}>
+            <Text typography='SUIT_15_SB' color={isValid ? colors.gray900 : colors.gray400}>
               쪽지 보내기
             </Text>
           )}
@@ -224,7 +224,7 @@ const EmptyProfileImage = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 36px;
-  background: ${colors.black60};
+  background: ${colors.gray700};
   width: 171px;
   height: 171px;
 `;
@@ -246,9 +246,9 @@ const StyledCategoryItem = styled.div<{ isSelected: boolean }>`
   justify-content: center;
   transition: border all 0.2s;
   opacity: ${({ isSelected }) => (isSelected ? 1 : 0.2)};
-  border: 1px solid ${({ isSelected }) => (isSelected ? colors.white : colors.black60)};
+  border: 1px solid ${({ isSelected }) => (isSelected ? colors.white : colors.gray700)};
   border-radius: 20px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 6px 16px 6px 10px;
 `;
@@ -279,7 +279,7 @@ const StyledButton = styled.button<{ isDisabled: boolean }>`
   transition: background-color 0.2s;
   margin-top: 36px;
   border-radius: 12px;
-  background-color: ${({ isDisabled }) => (isDisabled ? colors.black60 : colors.white100)};
+  background-color: ${({ isDisabled }) => (isDisabled ? colors.gray700 : colors.gray10)};
   cursor: pointer;
   padding: 14px 28px;
 `;
diff --git a/src/components/members/detail/MessageSection/Modal.tsx b/src/components/members/detail/MessageSection/Modal.tsx
index e031dc890..2141270d9 100644
--- a/src/components/members/detail/MessageSection/Modal.tsx
+++ b/src/components/members/detail/MessageSection/Modal.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import FocusTrap from 'focus-trap-react';
 import { FC, HTMLAttributes, PropsWithChildren, ReactNode, useEffect, useRef } from 'react';
 import { RemoveScroll } from 'react-remove-scroll';
@@ -7,7 +8,6 @@ import Portal from '@/components/common/Portal';
 import useOnClickOutside from '@/hooks/useOnClickOutside';
 import IconModalCheck from '@/public/icons/icon-modal-check.svg';
 import IconModalClose from '@/public/icons/icon-modal-close.svg';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -88,9 +88,9 @@ const StyledModal = styled.div<{ width?: number }>`
   position: relative;
   z-index: 101;
   border-radius: 22.94px;
-  background: ${colors.black80};
+  background: ${colors.gray800};
   width: ${({ width }) => width ?? 450}px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const StyledCloseButton = styled.button`
@@ -133,7 +133,7 @@ const StyledTitle = styled.h1`
 
 const StyledContent = styled.div`
   margin-top: 18px;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_18_M};
 `;
diff --git a/src/components/members/detail/MessageSection/index.tsx b/src/components/members/detail/MessageSection/index.tsx
index 2c97e83f1..19f01e457 100644
--- a/src/components/members/detail/MessageSection/index.tsx
+++ b/src/components/members/detail/MessageSection/index.tsx
@@ -91,7 +91,7 @@ const Title = styled.div`
 
 const Subtitle = styled.div`
   margin-top: 12px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   ${textStyles.SUIT_16_M}
   @media ${MOBILE_MEDIA_QUERY} {
     ${textStyles.SUIT_14_M}
@@ -100,14 +100,14 @@ const Subtitle = styled.div`
 
 const MessageButton = styled.div<{ disabled: boolean }>`
   border-radius: 14px;
-  background-color: ${({ disabled }) => (disabled ? colors.black80 : colors.white100)};
+  background-color: ${({ disabled }) => (disabled ? colors.gray800 : colors.gray10)};
   cursor: pointer;
   padding: 15px 36px;
-  color: ${({ disabled }) => (disabled ? colors.gray80 : colors.black100)};
+  color: ${({ disabled }) => (disabled ? colors.gray400 : colors.gray900)};
 
   &:hover {
-    background-color: ${colors.gray20};
-    color: ${colors.black100};
+    background-color: ${colors.gray50};
+    color: ${colors.gray900};
   }
 
   ${textStyles.SUIT_15_SB}
diff --git a/src/components/members/detail/PartItem.tsx b/src/components/members/detail/PartItem.tsx
index a941d11d6..52344c899 100644
--- a/src/components/members/detail/PartItem.tsx
+++ b/src/components/members/detail/PartItem.tsx
@@ -96,7 +96,7 @@ const Generation = styled.div`
 
 const BelongArea = styled.div`
   grid-area: belongs;
-  color: ${colors.gray30};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_18_M}
 
diff --git a/src/components/members/main/MemberCard/MessageButton.tsx b/src/components/members/main/MemberCard/MessageButton.tsx
index f102e3ed9..d53704dd9 100644
--- a/src/components/members/main/MemberCard/MessageButton.tsx
+++ b/src/components/members/main/MemberCard/MessageButton.tsx
@@ -42,16 +42,16 @@ const Button = styled.div`
   justify-content: center;
   transition: background-color 0.2s;
   border-radius: 50%;
-  background-color: ${colors.gray100};
+  background-color: ${colors.gray500};
   width: 32px;
   height: 32px;
 
   &:hover {
-    background-color: ${colors.gray80};
+    background-color: ${colors.gray400};
   }
 
   & svg {
-    fill: ${colors.gray30};
+    fill: ${colors.gray500};
     width: 16px;
     height: 16px;
   }
@@ -60,7 +60,7 @@ const Button = styled.div`
 const TooltipContent = styled(Tooltip.Content)`
   border-radius: 4px;
   box-shadow: hsl(206deg 22% 7% / 35%) 0 10px 38px -10px, hsl(206deg 22% 7% / 20%) 0 10px 20px -15px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 17px 26px;
   animation-duration: 400ms;
   animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
@@ -108,5 +108,5 @@ const TooltipContent = styled(Tooltip.Content)`
 `;
 
 const TooltipArrow = styled(Tooltip.Arrow)`
-  fill: ${colors.black60};
+  fill: ${colors.gray700};
 `;
diff --git a/src/components/members/main/MemberCard/index.tsx b/src/components/members/main/MemberCard/index.tsx
index 667980e37..bc51c272a 100644
--- a/src/components/members/main/MemberCard/index.tsx
+++ b/src/components/members/main/MemberCard/index.tsx
@@ -79,7 +79,7 @@ const MotionMemberCard = styled(m.div)`
   align-items: center;
   transition: box-shadow 0.3s;
   border-radius: 16px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 24px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -103,7 +103,7 @@ const StyledAspectRatio = styled(AspectRatio.Root)`
 const StyledImageArea = styled.div`
   transform: translateZ(0);
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 100%;
   height: 100%;
   overflow: hidden;
@@ -143,7 +143,7 @@ const TitleBox = styled(m.div)`
 
 const Name = styled.h3`
   flex-shrink: 0;
-  color: ${colors.gray10};
+  color: ${colors.gray30};
 
   ${textStyles.SUIT_18_B}
 `;
@@ -154,7 +154,7 @@ const Belongs = styled.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_12_M}
 `;
@@ -175,11 +175,11 @@ const DimShadow = styled.span`
   top: 0;
   right: 0;
   bottom: 0;
-  background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.black80} 100%);
+  background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.gray800} 100%);
   width: 20px;
 
   @media ${MOBILE_MEDIA_QUERY} {
-    background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.black100} 100%);
+    background: linear-gradient(90deg, rgb(0 0 0 / 0%) 0%, ${colors.gray900} 100%);
   }
 `;
 
@@ -190,16 +190,16 @@ const Badge = styled.div`
   gap: 6px;
   align-items: center;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 6px 8px;
-  color: ${colors.gray30};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_11_M};
 
   @media ${MOBILE_MEDIA_QUERY} {
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
     padding: 4px 6px;
-    color: ${colors.gray30};
+    color: ${colors.gray500};
 
     ${textStyles.SUIT_11_M};
   }
@@ -217,7 +217,7 @@ const Intro = styled.p`
   margin-top: 16px;
   width: 100%;
   overflow: hidden;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 
@@ -225,7 +225,7 @@ const Intro = styled.p`
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 8px;
-    color: ${colors.gray100};
+    color: ${colors.gray500};
     -webkit-line-clamp: 1;
   }
 `;
diff --git a/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx b/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx
index 2722450c9..053df2763 100644
--- a/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx
+++ b/src/components/members/main/MemberList/MemberRoleMenu/MemberRoleMenu.tsx
@@ -40,7 +40,7 @@ const StyledMenu = styled.ul`
   flex-direction: column;
   gap: 13px;
   border-radius: 6px;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   width: 235px;
 `;
 
@@ -70,18 +70,18 @@ const StyledMenuItem = styled.li<{ isSelected?: boolean }>`
   justify-content: space-between;
   transition: background-color 0.3s;
   border-radius: 16px;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   cursor: pointer;
   padding: 20px 21px;
 
   ${({ isSelected }) =>
     isSelected &&
     css`
-      background-color: ${colors.black80};
+      background-color: ${colors.gray800};
     `}
 
   &:hover {
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/members/main/MemberList/MemberSearch.tsx b/src/components/members/main/MemberList/MemberSearch.tsx
index db4e111fb..3c96c8ca5 100644
--- a/src/components/members/main/MemberList/MemberSearch.tsx
+++ b/src/components/members/main/MemberList/MemberSearch.tsx
@@ -46,22 +46,22 @@ const StyledInput = styled.input`
   transition: all 0.2s;
   border: 1px solid transparent;
   border-radius: 10px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 18px 45px 18px 24px;
   width: 100%;
   min-width: 60px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M};
 
   &::placeholder {
-    color: ${colors.gray60};
+    color: ${colors.gray300};
   }
 
   &:focus {
     outline: none;
-    border-color: ${colors.gray40};
-    background-color: ${colors.black80};
+    border-color: ${colors.gray200};
+    background-color: ${colors.gray800};
   }
 `;
 
diff --git a/src/components/members/main/MemberList/OnBoardingBanner.tsx b/src/components/members/main/MemberList/OnBoardingBanner.tsx
index b72308c22..2742e7274 100644
--- a/src/components/members/main/MemberList/OnBoardingBanner.tsx
+++ b/src/components/members/main/MemberList/OnBoardingBanner.tsx
@@ -56,7 +56,7 @@ const IntroducePanel = styled.section`
   align-items: center;
   justify-content: space-between;
   border-radius: 42px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 59px 64px;
   width: 100%;
   height: 208px;
@@ -70,7 +70,7 @@ const IntroducePanel = styled.section`
 
   @media ${MOBILE_MEDIA_QUERY} {
     display: block;
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
     padding: 0;
     height: auto;
   }
@@ -133,13 +133,13 @@ const buttonStyle = css`
 const UploadButton = styled.a`
   ${buttonStyle}
 
-  background-color: ${colors.black60};
-  color: ${colors.gray30};
+  background-color: ${colors.gray700};
+  color: ${colors.gray500};
 `;
 
 const ProfileButton = styled.a`
   ${buttonStyle}
 
-  background-color: ${colors.white100};
-  color: ${colors.black100};
+  background-color: ${colors.gray10};
+  color: ${colors.gray900};
 `;
diff --git a/src/components/members/main/MemberList/filters/MemberListFilter.tsx b/src/components/members/main/MemberList/filters/MemberListFilter.tsx
index 321c4affb..b82821f3c 100644
--- a/src/components/members/main/MemberList/filters/MemberListFilter.tsx
+++ b/src/components/members/main/MemberList/filters/MemberListFilter.tsx
@@ -53,8 +53,8 @@ const StyledSelect = styled(Select)<{ selected: boolean }>`
   ${({ selected }) =>
     selected &&
     css`
-      border-color: ${colors.gray80};
-      background-color: ${colors.black80};
+      border-color: ${colors.gray400};
+      background-color: ${colors.gray800};
       color: ${colors.white};
     `};
 
@@ -69,5 +69,5 @@ const StyledSelect = styled(Select)<{ selected: boolean }>`
 `;
 
 const StyledSelectItem = styled(Select.Item)`
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 `;
diff --git a/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx b/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx
index e74e6783f..daaf93e41 100644
--- a/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx
+++ b/src/components/members/main/MemberList/filters/MemberListFilterSheet.tsx
@@ -71,13 +71,13 @@ const MemberListFilterSheet: FC<PropsWithChildren<MemberListFilterSheetProps>> =
 
 const CustomSheet = styled(ReactModalSheet)`
   .react-modal-sheet-container {
-    background-color: ${colors.black60} !important;
+    background-color: ${colors.gray700} !important;
   }
 
   .react-modal-sheet-header {
     border-top-left-radius: 8px;
     border-top-right-radius: 8px;
-    background-color: ${colors.black60};
+    background-color: ${colors.gray700};
   }
 
   .react-modal-sheet-drag-indicator {
@@ -85,7 +85,7 @@ const CustomSheet = styled(ReactModalSheet)`
   }
 
   .react-modal-sheet-content {
-    background-color: ${colors.black60};
+    background-color: ${colors.gray700};
     padding: 16px 16px 24px 24px;
   }
 `;
diff --git a/src/components/members/main/MemberList/index.tsx b/src/components/members/main/MemberList/index.tsx
index e3a82467b..a3e902ae6 100644
--- a/src/components/members/main/MemberList/index.tsx
+++ b/src/components/members/main/MemberList/index.tsx
@@ -265,7 +265,7 @@ const MemberList: FC<MemberListProps> = ({ banner }) => {
                     `}
                   >
                     <IconArrowUpDown />
-                    <Text typography='SUIT_12_M' color={colors.gray80}>
+                    <Text typography='SUIT_12_M' color={colors.gray400}>
                       {placeholder}
                     </Text>
                   </div>
@@ -513,11 +513,11 @@ const StyledMakersLink = styled.div`
   border-radius: 6px;
   cursor: pointer;
   padding: 5px 10px;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   &:hover {
     outline: none;
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
     color: ${colors.white};
   }
 `;
@@ -601,7 +601,7 @@ const EmptyTitle = styled.span`
 `;
 
 const EmptyDescription = styled.span`
-  color: ${colors.gray80};
+  color: ${colors.gray400};
   ${textStyles.SUIT_16_M};
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -612,7 +612,7 @@ const EmptyDescription = styled.span`
 const HLine = styled.hr`
   margin: 0;
   border: 0;
-  border-bottom: 1px solid ${colors.black80};
+  border-bottom: 1px solid ${colors.gray800};
   padding: 0;
 `;
 
@@ -632,16 +632,16 @@ const MobileFilterTrigger = styled.button<{ selected?: boolean }>`
   justify-content: space-between;
   border: 1px solid transparent;
   border-radius: 20.5px;
-  background: ${colors.black80};
+  background: ${colors.gray800};
   padding: 8px 12px;
   min-width: 76px;
   height: 32px;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${({ selected }) =>
     selected &&
     css`
-      border-color: ${colors.gray80};
+      border-color: ${colors.gray400};
     `}
 
   ${textStyles.SUIT_13_M};
diff --git a/src/components/members/upload/AddableItem.tsx b/src/components/members/upload/AddableItem.tsx
index c2e74a76a..7cc8cb00a 100644
--- a/src/components/members/upload/AddableItem.tsx
+++ b/src/components/members/upload/AddableItem.tsx
@@ -76,7 +76,7 @@ const MobileDeleteButton = styled.button<{ isVisible: boolean }>`
   align-self: flex-end;
   margin-top: 20px;
   margin-right: 5px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   font-size: 15px;
   font-weight: 600;
 
diff --git a/src/components/members/upload/AddableWrapper.tsx b/src/components/members/upload/AddableWrapper.tsx
index b190061b3..740f883bb 100644
--- a/src/components/members/upload/AddableWrapper.tsx
+++ b/src/components/members/upload/AddableWrapper.tsx
@@ -17,11 +17,11 @@ export default function MemberAddableWrapper({ onAppend, children, className }:
     <StyledContainer>
       <StyledAddableItems className={className}>{children}</StyledAddableItems>
       <StyledAddButton onClick={onAppend} className='pc-only'>
-        <IconPlus stroke={colors.white100} />
+        <IconPlus stroke={colors.gray10} />
         <div>추가</div>
       </StyledAddButton>
       <MobileAddButton onClick={onAppend}>
-        <IconPlus stroke={colors.gray20} />
+        <IconPlus stroke={colors.gray50} />
         <div>추가</div>
       </MobileAddButton>
     </StyledContainer>
@@ -42,7 +42,7 @@ const StyledAddButton = styled.button`
   gap: 11px;
   align-items: center;
   margin-top: 23px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_SB}
 `;
@@ -56,11 +56,11 @@ const MobileAddButton = styled.button`
     align-items: center;
     justify-content: center;
     margin-top: 20px;
-    border: 1px solid ${colors.gray20};
+    border: 1px solid ${colors.gray50};
     border-radius: 12px;
     padding: 16px 0;
     width: 100%;
-    color: ${colors.gray20};
+    color: ${colors.gray50};
   }
 `;
 
diff --git a/src/components/members/upload/FormSection/Basic/index.tsx b/src/components/members/upload/FormSection/Basic/index.tsx
index a0ff81852..bd59f23f8 100644
--- a/src/components/members/upload/FormSection/Basic/index.tsx
+++ b/src/components/members/upload/FormSection/Basic/index.tsx
@@ -142,7 +142,7 @@ const StyledImageUploader = styled(ImageUploader)`
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 16px;
     border-radius: 21.4783px;
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
     width: 114px;
     height: 114px;
   }
diff --git a/src/components/members/upload/FormSection/Career.tsx b/src/components/members/upload/FormSection/Career.tsx
index 608ea1afc..f12cdd8cf 100644
--- a/src/components/members/upload/FormSection/Career.tsx
+++ b/src/components/members/upload/FormSection/Career.tsx
@@ -343,7 +343,7 @@ const StyledEditableSelect = styled(EditableSelect)`
   @media ${MOBILE_MEDIA_QUERY} {
     position: relative;
     border-radius: 12px;
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
     padding: 0;
 
     select {
diff --git a/src/components/members/upload/FormSection/PublicQuestion.tsx b/src/components/members/upload/FormSection/PublicQuestion.tsx
index df668b8cc..1293d2407 100644
--- a/src/components/members/upload/FormSection/PublicQuestion.tsx
+++ b/src/components/members/upload/FormSection/PublicQuestion.tsx
@@ -25,12 +25,12 @@ const StyledSection = styled.section`
   display: grid;
   grid-template-columns: auto 40px;
   border-radius: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 40px;
   width: 790px;
 
   .question {
-    color: ${colors.white100};
+    color: ${colors.gray10};
 
     ${textStyles.SUIT_24_B};
 
@@ -55,7 +55,7 @@ const StyledSection = styled.section`
 
   .info {
     margin-top: 20px;
-    color: ${colors.gray80};
+    color: ${colors.gray400};
 
     @media ${MOBILE_MEDIA_QUERY} {
       margin-top: 12px;
diff --git a/src/components/members/upload/FormSection/SoptActivity.tsx b/src/components/members/upload/FormSection/SoptActivity.tsx
index 0681adf61..fc647c2b7 100644
--- a/src/components/members/upload/FormSection/SoptActivity.tsx
+++ b/src/components/members/upload/FormSection/SoptActivity.tsx
@@ -156,13 +156,13 @@ const StyledSelect = styled(Select)`
   border-radius: 14px;
   padding: 16px 34px 16px 20px;
   width: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M};
 
   @media ${MOBILE_MEDIA_QUERY} {
     border-radius: 12px;
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
     width: 100%;
   }
 `;
diff --git a/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx b/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx
index 44d727003..585bff8c0 100644
--- a/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx
+++ b/src/components/members/upload/FormSection/Tmi/FavorToggle.tsx
@@ -43,11 +43,11 @@ const Container = styled.div`
 
 const Button = styled.button<{ isSelected: boolean }>`
   border-radius: 13px;
-  background-color: ${({ isSelected }) => (isSelected ? colors.white100 : colors.black60)};
+  background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.gray700)};
   cursor: pointer;
   padding: 14px 0;
   width: 122px;
-  color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.white100)};
+  color: ${({ isSelected }) => (isSelected ? colors.gray900 : colors.gray10)};
 
   ${textStyles.SUIT_16_SB}
 
@@ -55,8 +55,8 @@ const Button = styled.button<{ isSelected: boolean }>`
     isSelected &&
     css`
       &:hover {
-        background-color: ${colors.gray20};
-        color: ${colors.black100};
+        background-color: ${colors.gray50};
+        color: ${colors.gray900};
       }
     `}
   
@@ -69,7 +69,7 @@ const Button = styled.button<{ isSelected: boolean }>`
 const Versus = styled.div`
   width: 28px;
   text-align: center;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_SB};
 `;
diff --git a/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx b/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx
index 36ceaab37..308178dd2 100644
--- a/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx
+++ b/src/components/members/upload/FormSection/Tmi/MbtiToggle.tsx
@@ -38,11 +38,11 @@ const Container = styled.div`
 `;
 
 const Button = styled.button<{ isSelected: boolean }>`
-  background-color: ${({ isSelected }) => (isSelected ? colors.white100 : colors.black60)};
+  background-color: ${({ isSelected }) => (isSelected ? colors.gray10 : colors.gray700)};
   cursor: pointer;
   padding: 14px 0;
   width: 76px;
-  color: ${({ isSelected }) => (isSelected ? colors.black100 : colors.white100)};
+  color: ${({ isSelected }) => (isSelected ? colors.gray900 : colors.gray10)};
 
   ${textStyles.SUIT_16_SB}
 
@@ -50,8 +50,8 @@ const Button = styled.button<{ isSelected: boolean }>`
     isSelected &&
     css`
       &:hover {
-        background-color: ${colors.gray20};
-        color: ${colors.black100};
+        background-color: ${colors.gray50};
+        color: ${colors.gray900};
       }
     `}
 
diff --git a/src/components/members/upload/FormSection/Tmi/index.tsx b/src/components/members/upload/FormSection/Tmi/index.tsx
index bef537714..48885dba0 100644
--- a/src/components/members/upload/FormSection/Tmi/index.tsx
+++ b/src/components/members/upload/FormSection/Tmi/index.tsx
@@ -219,7 +219,7 @@ const StyledSelect = styled(Select)`
   width: 130px;
 
   @media ${MOBILE_MEDIA_QUERY} {
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
   }
 `;
 
diff --git a/src/components/members/upload/forms/CountableInput.tsx b/src/components/members/upload/forms/CountableInput.tsx
index e9a2924a7..9fc21239a 100644
--- a/src/components/members/upload/forms/CountableInput.tsx
+++ b/src/components/members/upload/forms/CountableInput.tsx
@@ -28,7 +28,7 @@ export const MemberCountableInput = forwardRef<HTMLInputElement, MemberCountable
           placeholder={placeholder}
         />
         <StyledCountValue>
-          <Text color={colors.gray100} typography='SUIT_12_M'>
+          <Text color={colors.gray500} typography='SUIT_12_M'>
             {`${value?.length ?? 0}/${maxCount}`}
           </Text>
         </StyledCountValue>
@@ -47,31 +47,31 @@ const StyledContainer = styled.div`
 const StyledInput = styled.input<Omit<MemberCountableInputProps, 'maxCount'>>`
   box-sizing: border-box;
   transition: all 0.2s;
-  border: 1.5px solid ${colors.black60};
+  border: 1.5px solid ${colors.gray700};
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 14px 20px;
   width: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
   ${textStyles.SUIT_16_M};
 
   &::placeholder {
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   }
 
   &:focus {
     outline: none;
-    border-color: ${colors.gray40};
-    background-color: ${colors.black80};
+    border-color: ${colors.gray200};
+    background-color: ${colors.gray800};
   }
 
   ${({ error }) =>
     error &&
     css`
-      border-color: ${colors.red100};
+      border-color: ${colors.error};
 
       :focus {
-        border-color: ${colors.red100};
+        border-color: ${colors.error};
       }
     `}
 `;
diff --git a/src/components/members/upload/forms/CountableTextArea.tsx b/src/components/members/upload/forms/CountableTextArea.tsx
index 62edfe94c..90090d97f 100644
--- a/src/components/members/upload/forms/CountableTextArea.tsx
+++ b/src/components/members/upload/forms/CountableTextArea.tsx
@@ -31,7 +31,7 @@ export const MemberCountableTextArea = forwardRef<HTMLTextAreaElement, MemberCou
           className={className}
         />
         <StyledCountValue>
-          <Text color={colors.gray100} typography='SUIT_12_M'>
+          <Text color={colors.gray500} typography='SUIT_12_M'>
             {`${value?.length ?? 0}/${maxCount}`}
           </Text>
         </StyledCountValue>
@@ -50,33 +50,33 @@ const StyledContainer = styled.div<{ customStyle?: SerializedStyles }>`
 
 const StyledTextArea = styled.textarea<MemberCountableTextAreaProps>`
   transition: all 0.2s;
-  border: 1.5px solid ${colors.black60};
+  border: 1.5px solid ${colors.gray700};
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 14px 20px;
   width: 100%;
   height: 100%;
   resize: none;
-  color: ${colors.white100};
+  color: ${colors.gray10};
   ${textStyles.SUIT_16_M}
 
   &::placeholder {
-    color: ${colors.gray100};
+    color: ${colors.gray500};
   }
 
   &:focus {
     outline: none;
-    border-color: ${colors.gray40};
-    background-color: ${colors.black80};
+    border-color: ${colors.gray200};
+    background-color: ${colors.gray800};
   }
 
   ${({ error }) =>
     error &&
     css`
-      border-color: ${colors.red100};
+      border-color: ${colors.error};
 
       :focus {
-        border-color: ${colors.red100};
+        border-color: ${colors.error};
       }
     `}
 `;
diff --git a/src/components/members/upload/forms/Form.tsx b/src/components/members/upload/forms/Form.tsx
index bd4280d43..8d7f61a1f 100644
--- a/src/components/members/upload/forms/Form.tsx
+++ b/src/components/members/upload/forms/Form.tsx
@@ -68,7 +68,7 @@ const StyledHeader = styled.header`
 
   .description {
     margin-top: 16px;
-    color: ${colors.gray100};
+    color: ${colors.gray500};
     font-size: 16px;
     font-weight: 500;
 
@@ -109,18 +109,18 @@ const SubmitButton = styled.button<{ isDisabled: boolean }>`
   width: 163px;
   height: 42px;
   line-height: 120%;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${({ isDisabled }) =>
     isDisabled &&
     css`
-      background-color: ${colors.black80};
-      color: ${colors.gray80};
+      background-color: ${colors.gray800};
+      color: ${colors.gray400};
     `}
 
   &:hover {
-    background-color: ${colors.gray20};
-    color: ${colors.black100};
+    background-color: ${colors.gray50};
+    color: ${colors.gray900};
   }
 
   ${textStyles.SUIT_14_M}
diff --git a/src/components/members/upload/forms/FormHeader.tsx b/src/components/members/upload/forms/FormHeader.tsx
index daed7e70c..c1c3fa68b 100644
--- a/src/components/members/upload/forms/FormHeader.tsx
+++ b/src/components/members/upload/forms/FormHeader.tsx
@@ -24,7 +24,7 @@ export default function MemberFormHeader({ title, required, description }: Membe
 
 const StyledTitle = styled.h2`
   display: inline;
-  color: ${colors.gray10};
+  color: ${colors.gray30};
 
   ${textStyles.SUIT_24_B};
 
@@ -37,13 +37,13 @@ const StyledLine = styled.hr`
   margin-top: 20px;
   margin-bottom: 0;
   border: none;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 100%;
   height: 1.5px;
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 16px;
-    background-color: ${colors.black60};
+    background-color: ${colors.gray700};
     height: 1px;
   }
 `;
@@ -54,7 +54,7 @@ const StyledRequired = styled(Text)`
   margin-bottom: 20px;
   margin-left: 4px;
   line-height: 8px;
-  color: ${colors.orange100};
+  color: ${colors.secondary};
   font-size: 16px;
   font-weight: 500;
 `;
@@ -62,7 +62,7 @@ const StyledRequired = styled(Text)`
 const Description = styled(Text)`
   display: block;
   margin-top: 10px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 8px;
diff --git a/src/components/members/upload/forms/FormItem.tsx b/src/components/members/upload/forms/FormItem.tsx
index 949ef9327..2bb93cceb 100644
--- a/src/components/members/upload/forms/FormItem.tsx
+++ b/src/components/members/upload/forms/FormItem.tsx
@@ -54,14 +54,14 @@ const StyledTitle = styled(Text)`
 
 const StyledEssential = styled(Text)`
   margin: 0 0 0 4px;
-  color: ${colors.orange100};
+  color: ${colors.secondary};
   ${textStyles.SUIT_16_M};
 `;
 
 const StyledDescription = styled(Text)`
   display: block;
   margin-top: 10px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 8px;
diff --git a/src/components/members/upload/forms/FormSection.ts b/src/components/members/upload/forms/FormSection.ts
index e9e90ca50..0ae3c3720 100644
--- a/src/components/members/upload/forms/FormSection.ts
+++ b/src/components/members/upload/forms/FormSection.ts
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
-
 import { colors } from '@sopt-makers/colors';
+
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
 export const MemberFormSection = styled.section`
   border-radius: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 40px 40px 60px;
 
   input {
@@ -14,13 +14,13 @@ export const MemberFormSection = styled.section`
     padding: 14.5px 20px;
 
     &::placeholder {
-      color: ${colors.gray80};
+      color: ${colors.gray400};
     }
 
     @media ${MOBILE_MEDIA_QUERY} {
       border-radius: 12px;
-      border-color: ${colors.black80};
-      background-color: ${colors.black80};
+      border-color: ${colors.gray800};
+      background-color: ${colors.gray800};
     }
   }
 
@@ -28,13 +28,13 @@ export const MemberFormSection = styled.section`
     ${textStyles.SUIT_16_M}
 
     &::placeholder {
-      color: ${colors.gray80};
+      color: ${colors.gray400};
     }
 
     @media ${MOBILE_MEDIA_QUERY} {
       border-radius: 12px;
-      border-color: ${colors.black80};
-      background-color: ${colors.black80};
+      border-color: ${colors.gray800};
+      background-color: ${colors.gray800};
     }
   }
 
diff --git a/src/components/mentoring/MentoringCard/index.tsx b/src/components/mentoring/MentoringCard/index.tsx
index 1cb6de728..248348d0f 100644
--- a/src/components/mentoring/MentoringCard/index.tsx
+++ b/src/components/mentoring/MentoringCard/index.tsx
@@ -54,7 +54,7 @@ const Container = styled.div`
   column-gap: 37px;
   align-content: center;
   border-radius: 16px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 35px 40px 36px 45px;
   width: 424px;
   min-width: 424px;
@@ -77,7 +77,7 @@ const Container = styled.div`
   @media ${MOBILE_MEDIA_QUERY} {
     align-items: center;
     border-radius: 10px;
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
     padding: 16px;
     width: 233px;
     min-width: 233px;
@@ -120,7 +120,7 @@ const EmptyProfileImage = styled.div`
   align-self: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 68px;
   height: 68px;
 
@@ -142,7 +142,7 @@ const EmptyProfileImage = styled.div`
 
 const KeywordBox = styled.span`
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 6px;
   height: fit-content;
 `;
@@ -152,7 +152,7 @@ const KeywordContent = styled.div`
   overflow: hidden;
   text-overflow: ellipsis;
   line-height: 14px;
-  color: ${colors.gray30};
+  color: ${colors.gray500};
   -webkit-line-clamp: 1;
   -webkit-box-orient: vertical;
 
@@ -168,7 +168,7 @@ const Title = styled.div`
   text-overflow: ellipsis;
   line-height: 22px;
   white-space: pre-line;
-  color: ${colors.gray10};
+  color: ${colors.gray30};
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 
@@ -191,7 +191,7 @@ const Title = styled.div`
 const Mentor = styled.div`
   grid-area: mentor;
   line-height: 120%;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_M};
 
@@ -212,7 +212,7 @@ const Closed = styled.div<{ isActive: boolean }>`
   justify-content: center;
   opacity: 0.8;
   border-radius: 16px;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   width: 424px;
   height: 224px;
   line-height: 20px;
diff --git a/src/components/mentoring/MentoringDetail/InfoItem.tsx b/src/components/mentoring/MentoringDetail/InfoItem.tsx
index e6c6c675e..bf0bf6d53 100644
--- a/src/components/mentoring/MentoringDetail/InfoItem.tsx
+++ b/src/components/mentoring/MentoringDetail/InfoItem.tsx
@@ -31,7 +31,7 @@ const Container = styled.div`
 
 const Label = styled.div`
   line-height: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_24_B};
 
diff --git a/src/components/mentoring/MentoringDetail/index.tsx b/src/components/mentoring/MentoringDetail/index.tsx
index 43e91ae03..4bf064d6d 100644
--- a/src/components/mentoring/MentoringDetail/index.tsx
+++ b/src/components/mentoring/MentoringDetail/index.tsx
@@ -192,7 +192,7 @@ const Section = styled.section`
   flex-direction: column;
   gap: 80px;
   border-radius: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 48px 39px;
   width: 790px;
 
@@ -236,7 +236,7 @@ const EmptyProfileImage = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 60px;
   height: 60px;
 
@@ -258,12 +258,12 @@ const EmptyProfileImage = styled.div`
 
 const MentorName = styled.div`
   line-height: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_20_SB};
 
   @media ${MOBILE_MEDIA_QUERY} {
-    color: ${colors.gray40};
+    color: ${colors.gray200};
 
     ${textStyles.SUIT_14_M};
   }
@@ -277,16 +277,16 @@ const MessageButton = styled.button`
   justify-content: center;
   justify-self: end;
   border-radius: 6px;
-  background-color: ${colors.white100};
+  background-color: ${colors.gray10};
   width: 180px;
   height: 48px;
   line-height: 135%;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_14_B}
 
   & > svg {
-    fill: ${colors.black100};
+    fill: ${colors.gray900};
     width: 16px;
     height: 16px;
   }
@@ -306,12 +306,12 @@ const ClosedMessageButton = styled.button`
   justify-content: center;
   justify-self: end;
   border-radius: 6px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   cursor: default;
   width: 249px;
   height: 48px;
   line-height: 135%;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${textStyles.SUIT_14_B}
 
@@ -345,28 +345,28 @@ const KeywordList = styled.div`
 
 const Keyword = styled.div`
   border-radius: 16px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 8px 15px;
   line-height: 120%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_14_M};
 
   @media ${MOBILE_MEDIA_QUERY} {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 `;
 
 const Content = styled.div`
   line-height: 150%;
   white-space: pre-line;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_18_M}
 
   @media ${MOBILE_MEDIA_QUERY} {
     line-height: 120%;
-    color: ${colors.gray40};
+    color: ${colors.gray200};
 
     ${textStyles.SUIT_14_M};
   }
@@ -423,7 +423,7 @@ const Career = {
 
     @media ${MOBILE_MEDIA_QUERY} {
       gap: 4px;
-      color: ${colors.gray80};
+      color: ${colors.gray400};
 
       ${textStyles.SUIT_12_M}
 
@@ -432,7 +432,7 @@ const Career = {
         height: 12px;
 
         & > path {
-          fill: ${colors.gray80};
+          fill: ${colors.gray400};
         }
       }
     }
diff --git a/src/components/mentoring/MentoringList/index.tsx b/src/components/mentoring/MentoringList/index.tsx
index 267144d8d..08647de2a 100644
--- a/src/components/mentoring/MentoringList/index.tsx
+++ b/src/components/mentoring/MentoringList/index.tsx
@@ -244,7 +244,7 @@ const Container = styled.div`
 const Title = styled.div`
   text-align: start;
   line-height: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_24_B}
 
@@ -300,7 +300,7 @@ const MentorApplicationButton = styled.a`
   gap: 6px;
   align-items: center;
   line-height: 100%;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${textStyles.SUIT_18_M}
 
@@ -309,7 +309,7 @@ const MentorApplicationButton = styled.a`
     height: 20px;
 
     & > path {
-      fill: ${colors.gray80};
+      fill: ${colors.gray400};
     }
   }
 
diff --git a/src/components/projects/main/ProjectCard.tsx b/src/components/projects/main/ProjectCard.tsx
index 7c5670cee..c5d279c3d 100644
--- a/src/components/projects/main/ProjectCard.tsx
+++ b/src/components/projects/main/ProjectCard.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 import { FC } from 'react';
 
@@ -8,7 +9,6 @@ import Text from '@/components/common/Text';
 import useEventLogger from '@/components/eventLogger/hooks/useEventLogger';
 import { categoryLabel } from '@/components/projects/constants';
 import { playgroundLink } from '@/constants/links';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -41,11 +41,11 @@ const ProjectCard: FC<ProjectDetail> = ({
       <StyledContent>
         <StyledTitleWrapper>
           <Text typography='SUIT_18_B'>{name}</Text>
-          <Text typography='SUIT_12_SB' color={colors.gray100}>
+          <Text typography='SUIT_12_SB' color={colors.gray500}>
             {generation ? `${generation}기 ${categoryLabel[category]}` : categoryLabel[category]}
           </Text>
         </StyledTitleWrapper>
-        <Text typography='SUIT_14_M' color={colors.gray60}>
+        <Text typography='SUIT_14_M' color={colors.gray300}>
           {summary}
         </Text>
       </StyledContent>
@@ -60,7 +60,7 @@ const StyledCard = styled(Link)`
   position: relative;
   flex-direction: column;
   border-radius: 10px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   cursor: pointer;
   padding: 6px;
   width: 380px;
@@ -104,7 +104,7 @@ const StyledServiceType = styled.div`
   background-color: rgb(252 252 252 / 70%);
   width: 54px;
   height: 23px;
-  color: ${colors.black40};
+  color: ${colors.gray600};
   ${textStyles.SUIT_12_B};
 `;
 
diff --git a/src/components/projects/main/ProjectDetail.tsx b/src/components/projects/main/ProjectDetail.tsx
index 6841cba56..de1d6fbc1 100644
--- a/src/components/projects/main/ProjectDetail.tsx
+++ b/src/components/projects/main/ProjectDetail.tsx
@@ -10,11 +10,11 @@ import { deleteProject } from '@/api/endpoint_LEGACY/projects';
 import ConfirmModal from '@/components/common/Modal/Confirm';
 import MemberBlock from '@/components/members/common/MemberBlock';
 import WithMemberMetadata from '@/components/members/common/WithMemberMetadata';
-import ProjectImageSlider from '@/components/projects/main/ProjectImageSlider';
 import { getLinkInfo } from '@/components/projects/constants';
+import { MemberRoleInfo } from '@/components/projects/constants';
+import ProjectImageSlider from '@/components/projects/main/ProjectImageSlider';
 import useGetProjectListQuery from '@/components/projects/upload/hooks/useGetProjectListQuery';
 import useGetProjectQuery from '@/components/projects/upload/hooks/useGetProjectQuery';
-import { MemberRoleInfo } from '@/components/projects/constants';
 import { playgroundLink } from '@/constants/links';
 import IconTrashcan from '@/public/icons/icon-trashcan.svg';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
@@ -225,7 +225,7 @@ const ServiceType = styled.div`
   box-shadow: 0 2px 4px 0 rgb(0 0 0 / 15%);
   background-color: white;
   padding: 6px 12px;
-  color: ${colors.black40};
+  color: ${colors.gray600};
   ${textStyles.SUIT_12_B};
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -276,7 +276,7 @@ const ControlWrapper = styled.div`
     align-items: center;
     justify-content: center;
     border-radius: 12px;
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
     cursor: pointer;
     height: 48px;
 
@@ -327,7 +327,7 @@ const StartEndAtWrapper = styled.div`
 const StartEndAt = styled.span`
   display: inline-block;
   line-height: 100%;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   font-size: 18px;
   font-weight: 500;
 
@@ -388,7 +388,7 @@ const ProjectDetailContainer = styled.section`
 `;
 const DetailContainer = styled.div`
   border-radius: 12px;
-  background: ${colors.black80};
+  background: ${colors.gray800};
   padding: 48px;
   width: 100%;
 
@@ -444,7 +444,7 @@ const LinkBox = styled.a`
   align-items: center;
   cursor: pointer;
   line-height: 160%;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   font-size: 14px;
   font-weight: 500;
 
@@ -455,7 +455,7 @@ const LinkBox = styled.a`
 
 const LinkIcon = styled.img`
   border-radius: 100%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 72px;
   height: 72px;
 
@@ -469,7 +469,7 @@ const UserWrapper = styled.div`
   flex-direction: column;
   flex-shrink: 0;
   border-radius: 12px;
-  background: ${colors.black80};
+  background: ${colors.gray800};
   padding: 48px 28px;
   height: fit-content;
 
diff --git a/src/components/projects/main/ProjectImageSlider.tsx b/src/components/projects/main/ProjectImageSlider.tsx
index 1ad7aba05..352295dc7 100644
--- a/src/components/projects/main/ProjectImageSlider.tsx
+++ b/src/components/projects/main/ProjectImageSlider.tsx
@@ -95,7 +95,7 @@ const StyledSwiper = styled(Swiper)`
 
   & .swiper-button-prev,
   .swiper-button-next {
-    color: ${colors.gray10};
+    color: ${colors.gray30};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/projects/main/ProjectList.tsx b/src/components/projects/main/ProjectList.tsx
index 64963cb5e..ad9d21363 100644
--- a/src/components/projects/main/ProjectList.tsx
+++ b/src/components/projects/main/ProjectList.tsx
@@ -132,12 +132,12 @@ const ProjectUploadButton = styled(Link)`
   gap: 12px;
   align-items: center;
   border-radius: 10px;
-  background-color: ${colors.white100};
+  background-color: ${colors.gray10};
   padding: 18px 24px 18px 20px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   &:hover {
-    background-color: ${colors.gray20};
+    background-color: ${colors.gray50};
   }
 `;
 
@@ -189,7 +189,7 @@ const StyledGridContainer = styled.div`
 
 const StyledNoData = styled.div`
   margin-top: 120px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
   ${textStyles.SUIT_16_M}
   @media ${MOBILE_MEDIA_QUERY} {
     ${textStyles.SUIT_14_M}
diff --git a/src/components/projects/upload/form/ListImageUploader.tsx b/src/components/projects/upload/form/ListImageUploader.tsx
index a395a6cb5..a04b186b0 100644
--- a/src/components/projects/upload/form/ListImageUploader.tsx
+++ b/src/components/projects/upload/form/ListImageUploader.tsx
@@ -1,12 +1,12 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { FC, ReactNode, useEffect, useRef, useState } from 'react';
 
 import { getPresignedUrl, putPresignedUrl } from '@/api/endpoint/common/image';
 import ErrorMessage from '@/components/common/Input/ErrorMessage';
 import IconCancel from '@/public/icons/icon-cancel.svg';
 import IconPencil from '@/public/icons/icon-pencil.svg';
-import { colors } from '@sopt-makers/colors';
 import { textStyles } from '@/styles/typography';
 import { buildCSSWithLength, CSSValueWithLength } from '@/utils';
 
@@ -154,7 +154,7 @@ const ImageUploader = styled.div<Pick<ImageUploaderProps, 'width' | 'height'> &
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
 
   ${({ width }) => buildCSSWithLength('width', width)};
@@ -162,7 +162,7 @@ const ImageUploader = styled.div<Pick<ImageUploaderProps, 'width' | 'height'> &
   ${({ error }) =>
     error &&
     css`
-      border: 1px solid ${colors.red100};
+      border: 1px solid ${colors.error};
     `}
 `;
 
@@ -187,7 +187,7 @@ const StyledSelector = styled.div`
 const editButtonStyle = css`
   display: flex;
   gap: 4px;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   padding: 10px 12px;
   line-height: 100%;
   letter-spacing: -0.01em;
@@ -207,7 +207,7 @@ const StyledEditButton = styled.button`
     position: absolute;
     top: 10px;
     right: 0;
-    background-color: ${colors.gray100};
+    background-color: ${colors.gray500};
     width: 1px;
     height: 14px;
     content: '';
diff --git a/src/components/projects/upload/form/ProjectForm.tsx b/src/components/projects/upload/form/ProjectForm.tsx
index b986a2070..61d9fafdb 100644
--- a/src/components/projects/upload/form/ProjectForm.tsx
+++ b/src/components/projects/upload/form/ProjectForm.tsx
@@ -100,12 +100,12 @@ const ProjectForm: FC<ProjectFormProps> = ({
         <StyledTitle>
           <Text typography='SUIT_24_B'>프로젝트</Text>
           <Responsive only='desktop'>
-            <Text typography='SUIT_16_M' color={colors.gray100}>
+            <Text typography='SUIT_16_M' color={colors.gray500}>
               프로젝트가 등록되면 SOPT 공식홈페이지에도 업로드 되기 때문에 꼼꼼하게 작성해주세요!
             </Text>
           </Responsive>
           <Responsive only='mobile'>
-            <Text typography='SUIT_14_M' color={colors.gray100}>
+            <Text typography='SUIT_14_M' color={colors.gray500}>
               프로젝트가 등록되면 SOPT 공식홈페이지에도 <br />
               업로드 되기 때문에 꼼꼼하게 작성해주세요!
             </Text>
@@ -391,7 +391,7 @@ const StyledForm = styled.form`
   flex-grow: 1;
   gap: 60px;
   border-radius: 12px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 47px 40px;
   width: 892px;
 
@@ -401,7 +401,7 @@ const StyledForm = styled.form`
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
     padding: 38px 24px 107px;
   }
 `;
@@ -433,15 +433,15 @@ const StyledAddButton = styled.button`
   justify-content: center;
   margin: 14px 0 0 20px;
   cursor: pointer;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_16_M};
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin: 12px 0 0;
-    border: 1px solid ${colors.black40};
+    border: 1px solid ${colors.gray600};
     border-radius: 6px;
-    background-color: ${colors.black60};
+    background-color: ${colors.gray700};
     padding: 14px 16px;
     width: 100%;
     ${textStyles.SUIT_14_M};
diff --git a/src/components/projects/upload/form/fields/GenerationField.tsx b/src/components/projects/upload/form/fields/GenerationField.tsx
index ecbeaa961..58287c44e 100644
--- a/src/components/projects/upload/form/fields/GenerationField.tsx
+++ b/src/components/projects/upload/form/fields/GenerationField.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import React, { FC } from 'react';
 
 import Checkbox from '@/components/common/Checkbox';
@@ -6,7 +7,6 @@ import ErrorMessage from '@/components/common/Input/ErrorMessage';
 import Select from '@/components/common/Select';
 import Text from '@/components/common/Text';
 import { GENERATIONS } from '@/constants/generation';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -44,7 +44,7 @@ const GenerationField: FC<GenerationFieldProps> = ({ value, defaultValue, onChan
       </StyledSelect>
       <StyledCheckboxWrapper>
         <Checkbox checked={value === null} onChange={handleCheckboxChange} />
-        <Text typography='SUIT_12_M' color={colors.gray100}>
+        <Text typography='SUIT_12_M' color={colors.gray500}>
           특정 기수 활동으로 진행하지 않았어요
         </Text>
       </StyledCheckboxWrapper>
diff --git a/src/components/projects/upload/form/fields/LinkField.tsx b/src/components/projects/upload/form/fields/LinkField.tsx
index 520198b68..545ab7e79 100644
--- a/src/components/projects/upload/form/fields/LinkField.tsx
+++ b/src/components/projects/upload/form/fields/LinkField.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { isEmpty } from 'lodash-es';
 import React, { FC, useMemo, useState } from 'react';
 
@@ -8,7 +9,6 @@ import Select from '@/components/common/Select';
 import useToast from '@/components/common/Toast/useToast';
 import { linkTitles, LinkType } from '@/components/projects/upload/form/constants';
 import IconTrash from '@/public/icons/icon-trash.svg';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -131,7 +131,7 @@ const StyledLinkEditView = styled.div<{ isError?: boolean }>`
   column-gap: 10px;
   align-items: ${({ isError }) => (isError ? 'flex-start' : 'center')};
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 10px;
   width: 100%;
 
@@ -154,13 +154,13 @@ const StyledLinkView = styled.div`
   display: flex;
   gap: 42px;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 14px 30px;
   width: 100%;
   min-height: 42px;
   white-space: nowrap;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_14_M};
 
@@ -174,7 +174,7 @@ const StyledLinkView = styled.div`
 `;
 
 const StyledSelect = styled(Select)`
-  border: 1px solid ${colors.black40};
+  border: 1px solid ${colors.gray600};
   border-radius: 6px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -188,7 +188,7 @@ const StyledInput = styled(Input)`
   border-radius: 6px;
 
   & > input {
-    border: 1px solid ${colors.black40};
+    border: 1px solid ${colors.gray600};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -198,10 +198,10 @@ const StyledInput = styled(Input)`
 
 const StyledEditCompleteButton = styled.button`
   border-radius: 4px;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   padding: 16px 36px;
   white-space: nowrap;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_14_M};
 
diff --git a/src/components/projects/upload/form/fields/MemberField.tsx b/src/components/projects/upload/form/fields/MemberField.tsx
index 3c57cd48f..9390e1ccb 100644
--- a/src/components/projects/upload/form/fields/MemberField.tsx
+++ b/src/components/projects/upload/form/fields/MemberField.tsx
@@ -1,4 +1,5 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { isEmpty } from 'lodash-es';
 import { FC, useMemo, useState } from 'react';
 
@@ -8,11 +9,10 @@ import Input from '@/components/common/Input';
 import ErrorMessage from '@/components/common/Input/ErrorMessage';
 import Select from '@/components/common/Select';
 import useToast from '@/components/common/Toast/useToast';
+import { MemberRoleInfo } from '@/components/projects/constants';
 import MemberSearch from '@/components/projects/upload/form/fields/member/MemberSearch';
 import { Member, MemberSearchContext } from '@/components/projects/upload/form/fields/member/MemberSearchContext';
-import { MemberRoleInfo } from '@/components/projects/constants';
 import IconTrash from '@/public/icons/icon-trash.svg';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -187,7 +187,7 @@ const StyledMemberEditView = styled.div<{ isError: boolean }>`
   column-gap: 10px;
   align-items: ${({ isError }) => (isError ? 'flex-start' : 'center')};
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 10px;
   width: 100%;
 
@@ -206,13 +206,13 @@ const StyledMemberView = styled.div`
   display: flex;
   gap: 42px;
   border-radius: 6px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 14px 30px;
   width: 100%;
   min-height: 42px;
   white-space: nowrap;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_14_M};
 
@@ -237,7 +237,7 @@ const StyledMemberSearch = styled(MemberSearch)`
 `;
 
 const StyledSelect = styled(Select)`
-  border: 1px solid ${colors.black40};
+  border: 1px solid ${colors.gray600};
   border-radius: 6px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -251,7 +251,7 @@ const StyledInput = styled(Input)`
   border-radius: 6px;
 
   & > input {
-    border: 1px solid ${colors.black40};
+    border: 1px solid ${colors.gray600};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -261,10 +261,10 @@ const StyledInput = styled(Input)`
 
 const StyledEditCompleteButton = styled.button`
   border-radius: 4px;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   padding: 16px 36px;
   white-space: nowrap;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
 
   ${textStyles.SUIT_14_M};
 
diff --git a/src/components/projects/upload/form/fields/PeriodField.tsx b/src/components/projects/upload/form/fields/PeriodField.tsx
index eb865d3f7..c410a7b9c 100644
--- a/src/components/projects/upload/form/fields/PeriodField.tsx
+++ b/src/components/projects/upload/form/fields/PeriodField.tsx
@@ -1,11 +1,11 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { FC } from 'react';
 
 import Checkbox from '@/components/common/Checkbox';
 import Input from '@/components/common/Input';
 import ErrorMessage from '@/components/common/Input/ErrorMessage';
 import Text from '@/components/common/Text';
-import { colors } from '@sopt-makers/colors';
 import { textStyles } from '@/styles/typography';
 
 interface PeriodFieldProps {
@@ -56,7 +56,7 @@ const PeriodField: FC<PeriodFieldProps> = ({ value, onChange, errorMessage, isSt
       </InputGroup>
       <CheckboxContainer>
         <Checkbox checked={value.endAt === null} onChange={(e) => handleOngoingChange(e.target.checked)} />
-        <Text typography='SUIT_12_M' color={colors.gray100}>
+        <Text typography='SUIT_12_M' color={colors.gray500}>
           진행중
         </Text>
       </CheckboxContainer>
@@ -85,7 +85,7 @@ const StyledErrorMessage = styled(ErrorMessage)`
 
 const Separator = styled.span`
   margin: 0 11px;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
   ${textStyles.SUIT_16_M};
 `;
 
diff --git a/src/components/projects/upload/form/fields/ServiceTypeField.tsx b/src/components/projects/upload/form/fields/ServiceTypeField.tsx
index f3771d402..f3d0b41f9 100644
--- a/src/components/projects/upload/form/fields/ServiceTypeField.tsx
+++ b/src/components/projects/upload/form/fields/ServiceTypeField.tsx
@@ -64,18 +64,18 @@ const StyledLabel = styled.label<{ checked?: boolean }>`
   justify-content: center;
   transition: background-color 0.2s, color 0.2s;
   border-radius: 100px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 14px 0;
   width: 163px;
   height: 42px;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
 
   ${({ checked }) =>
     checked &&
     css`
-      background-color: ${colors.white100};
-      color: ${colors.black100};
+      background-color: ${colors.gray10};
+      color: ${colors.gray900};
     `}
   ${textStyles.SUIT_14_M};
 
diff --git a/src/components/projects/upload/form/fields/StatusField.tsx b/src/components/projects/upload/form/fields/StatusField.tsx
index 7d0853abd..2cc5776c9 100644
--- a/src/components/projects/upload/form/fields/StatusField.tsx
+++ b/src/components/projects/upload/form/fields/StatusField.tsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { ChangeEvent, FC } from 'react';
 
 import Switch from '@/components/common/Switch';
 import Text from '@/components/common/Text';
-import { colors } from '@sopt-makers/colors';
 import { textStyles } from '@/styles/typography';
 
 type Status = {
@@ -48,7 +48,7 @@ const StyledStatusField = styled.div`
 `;
 
 const StyledSubTitle = styled(Text)`
-  color: ${colors.gray100};
+  color: ${colors.gray500};
   ${textStyles.SUIT_14_M};
 `;
 
diff --git a/src/components/projects/upload/form/fields/member/MemberSearch.tsx b/src/components/projects/upload/form/fields/member/MemberSearch.tsx
index 5b8727b8e..f2755e70a 100644
--- a/src/components/projects/upload/form/fields/member/MemberSearch.tsx
+++ b/src/components/projects/upload/form/fields/member/MemberSearch.tsx
@@ -106,25 +106,25 @@ const StyledSearch = styled(Command)`
 
 const StyledInput = styled(Command.Input)<{ isError?: boolean }>`
   transition: all 0.2s;
-  border: 1px solid ${colors.black40};
+  border: 1px solid ${colors.gray600};
   border-radius: 6px;
-  background: ${colors.black60};
+  background: ${colors.gray700};
   padding: 14px 20px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   &:focus {
     outline: none;
-    border-color: ${colors.gray40};
-    background-color: ${colors.black80};
+    border-color: ${colors.gray200};
+    background-color: ${colors.gray800};
   }
 
   ${({ isError }) =>
     isError &&
     css`
-      border-color: ${colors.red100};
+      border-color: ${colors.error};
       /* stylelint-disable-next-line no-duplicate-selectors */
       &:focus {
-        border-color: ${colors.red100};
+        border-color: ${colors.error};
       }
     `}
 `;
@@ -140,7 +140,7 @@ const StyledLabel = styled.label`
   width: 100%;
 
   ${textStyles.SUIT_16_SB};
-  ${colors.gray10};
+  ${colors.gray30};
 
   &:hover {
     svg {
@@ -169,14 +169,14 @@ const StyledList = styled(Command.List)`
   flex-direction: column;
   gap: 8px;
   border-radius: 6px;
-  background: ${colors.black60};
+  background: ${colors.gray700};
   padding: 8px 0;
   width: 100%;
 
   @media ${MOBILE_MEDIA_QUERY} {
     position: absolute;
     top: 49px;
-    border: 1px solid ${colors.black40};
+    border: 1px solid ${colors.gray600};
   }
 `;
 
@@ -184,13 +184,13 @@ const StyledItem = styled(Command.Item)`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 10px 16px;
-  color: ${colors.gray100};
+  color: ${colors.gray500};
 
   &:hover {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/projects/upload/form/presenter/FormEntry.tsx b/src/components/projects/upload/form/presenter/FormEntry.tsx
index 7f625501f..941ca15c5 100644
--- a/src/components/projects/upload/form/presenter/FormEntry.tsx
+++ b/src/components/projects/upload/form/presenter/FormEntry.tsx
@@ -43,18 +43,18 @@ const TitleSlot = styled.div`
 
 const Description = styled.div`
   margin-bottom: 18px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
   ${textStyles.SUIT_14_M};
 `;
 
 const Essential = styled(Text)`
   margin: 0 0 0 4px;
-  color: ${colors.orange100};
+  color: ${colors.secondary};
   ${textStyles.SUIT_16_M};
 `;
 
 const Comment = styled(Text)`
   align-self: center;
   margin: 0 0 0 10px;
-  color: ${colors.orange100};
+  color: ${colors.secondary};
 `;
diff --git a/src/components/sopticle/HelpCard.tsx b/src/components/sopticle/HelpCard.tsx
index 7646e3f38..b3ffe643c 100644
--- a/src/components/sopticle/HelpCard.tsx
+++ b/src/components/sopticle/HelpCard.tsx
@@ -34,13 +34,13 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>`
   transition: background-color 0.3s, box-shadow 0.3s;
   margin-top: 35px;
   border-radius: 10px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 19px 15px 18px;
   animation: 1.5s ease-out infinite alternate both running glow;
 
   &:hover {
-    background-color: ${colors.black40};
+    background-color: ${colors.gray600};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -61,7 +61,7 @@ const StyledHelpCard = styled.a<{ highlight?: boolean }>`
 const Content = styled.div`
   line-height: 140%;
   white-space: pre-line;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_M}
 `;
diff --git a/src/components/sopticle/Success.tsx b/src/components/sopticle/Success.tsx
index d00ee4550..908488311 100644
--- a/src/components/sopticle/Success.tsx
+++ b/src/components/sopticle/Success.tsx
@@ -32,7 +32,7 @@ const checkSvg = (
   <m.svg width={26} height={21} fill='none' initial='inactive' animate='active'>
     <m.path
       d='M1.929 11.938l8.303 6.92L24.072 2.25'
-      stroke={colors.black100}
+      stroke={colors.gray900}
       strokeWidth={3}
       strokeMiterlimit={10}
       strokeLinecap='round'
@@ -68,14 +68,14 @@ const CheckCircle = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 100%;
-  background-color: ${colors.white100};
+  background-color: ${colors.gray10};
   width: 62px;
   height: 62px;
 `;
 
 const Title = styled.h1`
   margin-top: 24px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_32_SB};
 
@@ -87,7 +87,7 @@ const Title = styled.h1`
 const SubTitle = styled.h2`
   margin-top: 12px;
   text-align: center;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M};
 
@@ -116,10 +116,10 @@ const ViewButton = styled.a`
   align-items: center;
   justify-content: center;
   border-radius: 10px;
-  background-color: ${colors.white100};
+  background-color: ${colors.gray10};
   cursor: pointer;
   padding: 16px 0;
-  color: ${colors.black100};
+  color: ${colors.gray900};
   ${textStyles.SUIT_16_M};
 
   & svg {
@@ -144,7 +144,7 @@ const UploadMoreButton = styled(Link)`
   align-items: center;
   justify-content: center;
   border-radius: 10px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   cursor: pointer;
   padding: 16px 0;
 
@@ -171,7 +171,7 @@ const goSvg = (
   <svg fill='none' viewBox='0 0 16 16'>
     <path
       d='M12.68 3.502a.542.542 0 00-.082-.103.532.532 0 00-.388-.155H4.667a.533.533 0 000 1.067h6.268L3.4 11.845a.533.533 0 10.754.754l7.534-7.534v6.268a.533.533 0 101.067 0V3.778c0-.101-.028-.195-.077-.276z'
-      fill={colors.black100}
+      fill={colors.gray900}
     />
   </svg>
 );
diff --git a/src/components/sopticle/UploadSopticle.tsx b/src/components/sopticle/UploadSopticle.tsx
index e55441716..f56470d80 100644
--- a/src/components/sopticle/UploadSopticle.tsx
+++ b/src/components/sopticle/UploadSopticle.tsx
@@ -84,7 +84,7 @@ const TitleBox = styled.div`
 `;
 
 const Title = styled.h1`
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_32_SB};
 
@@ -95,7 +95,7 @@ const Title = styled.h1`
 
 const SubTitle = styled.h2`
   margin-top: 12px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M};
 
@@ -117,7 +117,7 @@ const Form = styled.form`
 
 const Label = styled.label`
   margin-bottom: 16px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${textStyles.SUIT_16_M};
 
@@ -144,9 +144,9 @@ const MotionErrorMessageHolder = styled(m.div)`
 const Button = styled.button`
   margin-top: 16px;
   border-radius: 10px;
-  background-color: ${colors.white100};
+  background-color: ${colors.gray10};
   padding: 16px 0;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_M};
 
diff --git a/src/components/soulmate/view/EntryCard.tsx b/src/components/soulmate/view/EntryCard.tsx
index ef32f7cdc..93409ef4c 100644
--- a/src/components/soulmate/view/EntryCard.tsx
+++ b/src/components/soulmate/view/EntryCard.tsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import Link from 'next/link';
 import { FC } from 'react';
 
 import SoulmateIcon from '@/components/soulmate/icons/SoulmateIcon';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -51,7 +51,7 @@ const StyledEntryCard = styled.div`
     / auto auto;
   justify-content: space-between;
   border-radius: 16px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 45px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -118,7 +118,7 @@ const EntryLink = styled(Link)`
     flex-shrink: 0;
     justify-content: center;
     border-radius: 12px;
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
     padding: 13px 12px;
     line-height: 100%;
     letter-spacing: -0.16px;
@@ -146,7 +146,7 @@ const HintArea = styled.div`
 
 const HintChip = styled.div`
   border-radius: 8px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 12px 20px;
   line-height: 120%;
   letter-spacing: -0.16px;
diff --git a/src/components/soulmate/view/chat/ChatRule.tsx b/src/components/soulmate/view/chat/ChatRule.tsx
index 2f3b28fb0..671860149 100644
--- a/src/components/soulmate/view/chat/ChatRule.tsx
+++ b/src/components/soulmate/view/chat/ChatRule.tsx
@@ -1,10 +1,10 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { AnimatePresence, m } from 'framer-motion';
 import { FC, useState } from 'react';
 
 import { cardStyle } from '@/components/soulmate/view/common/commonStyles';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -72,7 +72,7 @@ const ToggleButton = styled.button<{ isOpen: boolean }>`
   cursor: pointer;
   text-decoration: underline;
   text-decoration-thickness: 1;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_16_M};
 
@@ -102,7 +102,7 @@ const ToggleButton = styled.button<{ isOpen: boolean }>`
 const Rules = styled(m.p)`
   padding-top: 30px;
   white-space: pre-wrap;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_16_M};
 
diff --git a/src/components/soulmate/view/chat/Feedback.tsx b/src/components/soulmate/view/chat/Feedback.tsx
index 20624a213..0f0831609 100644
--- a/src/components/soulmate/view/chat/Feedback.tsx
+++ b/src/components/soulmate/view/chat/Feedback.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { FC } from 'react';
 
 import SoulmateIconHeart from '@/components/soulmate/icons/SoulmateIconHeart';
-import { colors } from '@sopt-makers/colors';
 import { textStyles } from '@/styles/typography';
 
 interface FeedbackProps {}
@@ -35,7 +35,7 @@ const Title = styled.div`
 
 const Description = styled.div`
   margin-top: 12px;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_16_M};
 `;
@@ -52,6 +52,6 @@ const FeedbackButton = styled.a`
   justify-content: center;
   margin-top: 28px;
   border-radius: 10px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 20px;
 `;
diff --git a/src/components/soulmate/view/chat/Menu.tsx b/src/components/soulmate/view/chat/Menu.tsx
index b14619f00..57bc2ca8c 100644
--- a/src/components/soulmate/view/chat/Menu.tsx
+++ b/src/components/soulmate/view/chat/Menu.tsx
@@ -1,11 +1,11 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { FC, ReactNode, useState } from 'react';
 
 import SoulmateIconFlag from '@/components/soulmate/icons/SoulmateIconFlag';
 import SoulmateIconHeart from '@/components/soulmate/icons/SoulmateIconHeart';
 import SoulmateModal from '@/components/soulmate/view/common/SoulmateModal';
-import { colors } from '@sopt-makers/colors';
 import { textStyles } from '@/styles/typography';
 
 interface MenuProps {
@@ -45,7 +45,7 @@ const buttonStyle = css`
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   cursor: pointer;
   padding: 6px 10px;
 
diff --git a/src/components/soulmate/view/chat/MissionProgress.tsx b/src/components/soulmate/view/chat/MissionProgress.tsx
index b60d3f0a0..d37f86a9a 100644
--- a/src/components/soulmate/view/chat/MissionProgress.tsx
+++ b/src/components/soulmate/view/chat/MissionProgress.tsx
@@ -66,18 +66,18 @@ const ProgressCell = styled.div<{ status: MissionStatus['status'] }>`
   ${(props) =>
     props.status === 'completed' &&
     css`
-      background-color: ${colors.black60};
+      background-color: ${colors.gray700};
     `}
   ${(props) =>
     props.status === 'running' &&
     css`
-      background-color: ${colors.blue50};
+      background-color: ${colors.success};
     `}
     ${(props) =>
     props.status === 'waiting' &&
     css`
-      background-color: ${colors.black80};
-      color: ${colors.gray80};
+      background-color: ${colors.gray800};
+      color: ${colors.gray400};
     `}
 
     @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/soulmate/view/chat/SoulmateChat.tsx b/src/components/soulmate/view/chat/SoulmateChat.tsx
index 73916043a..c52c5692c 100644
--- a/src/components/soulmate/view/chat/SoulmateChat.tsx
+++ b/src/components/soulmate/view/chat/SoulmateChat.tsx
@@ -103,13 +103,13 @@ const Scrollbar = styled(ScrollArea.Scrollbar)`
   display: flex;
   transition: background-color 160ms ease-out;
   margin-top: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 2;
   user-select: none;
   touch-action: none;
 
   &:hover {
-    background-color: ${colors.black60};
+    background-color: ${colors.gray700};
   }
 
   &[data-orientation='vertical'] {
@@ -130,7 +130,7 @@ const ScrollbarThumb = styled(ScrollArea.Thumb)`
   position: relative;
   flex: 1;
   border-radius: 5px;
-  background-color: ${colors.gray80};
+  background-color: ${colors.gray400};
 
   &::before {
     position: absolute;
@@ -146,13 +146,13 @@ const ScrollbarThumb = styled(ScrollArea.Thumb)`
 `;
 
 const ScrollbarCorner = styled.div`
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
 `;
 
 const SubmitArea = styled.form`
   display: flex;
   border-radius: 14px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
 `;
 
 const Input = styled.textarea`
diff --git a/src/components/soulmate/view/common/SoulmateModal.tsx b/src/components/soulmate/view/common/SoulmateModal.tsx
index 9a7515043..893e385aa 100644
--- a/src/components/soulmate/view/common/SoulmateModal.tsx
+++ b/src/components/soulmate/view/common/SoulmateModal.tsx
@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
 import * as Dialog from '@radix-ui/react-dialog';
+import { colors } from '@sopt-makers/colors';
 import dynamic from 'next/dynamic';
 import { FC, ReactNode } from 'react';
 
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 const DialogPortal = dynamic(() => import('@radix-ui/react-dialog').then((res) => res.Portal), {
@@ -55,7 +55,7 @@ const DialogContent = styled(Dialog.Content)`
   left: 50%;
   transform: translate(-50%, -50%);
   border-radius: 16px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 30px 26px;
   width: calc(100vw - 72px);
   max-width: 360px;
diff --git a/src/components/soulmate/view/common/commonStyles.ts b/src/components/soulmate/view/common/commonStyles.ts
index 97423912c..bd551830d 100644
--- a/src/components/soulmate/view/common/commonStyles.ts
+++ b/src/components/soulmate/view/common/commonStyles.ts
@@ -5,7 +5,7 @@ import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 
 export const cardStyle = css`
   border-radius: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
 
   @media ${MOBILE_MEDIA_QUERY} {
     border-radius: 12px;
diff --git a/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx b/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx
index 57036a893..3da425502 100644
--- a/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx
+++ b/src/components/soulmate/view/lobby/ExitSoulmateLink.tsx
@@ -1,8 +1,8 @@
 import styled from '@emotion/styled';
+import { colors } from '@sopt-makers/colors';
 import { FC } from 'react';
 
 import SoulmateModal from '@/components/soulmate/view/common/SoulmateModal';
-import { colors } from '@sopt-makers/colors';
 import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery';
 import { textStyles } from '@/styles/typography';
 
@@ -39,7 +39,7 @@ const Container = styled.div`
 const StopSoulmateLink = styled.button`
   text-decoration: underline;
   line-height: 100%;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_16_M};
 
@@ -63,7 +63,7 @@ const Description = styled.div`
   text-align: center;
   line-height: 130%;
   letter-spacing: -0.12px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_M};
 
@@ -80,9 +80,9 @@ const ButtonArea = styled.div`
 
 const StopButton = styled.button`
   border-radius: 10px;
-  background-color: ${colors.gray10};
+  background-color: ${colors.gray30};
   padding: 14px 20px;
-  color: ${colors.black80};
+  color: ${colors.gray800};
 
   ${textStyles.SUIT_16_M};
 
@@ -95,11 +95,11 @@ const StopButton = styled.button`
 
 const KeepButton = styled.button`
   border-radius: 10px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 14px 20px;
   line-height: 100%;
   letter-spacing: -0.14px;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M};
 
diff --git a/src/components/soulmate/view/lobby/MatchingStatus.tsx b/src/components/soulmate/view/lobby/MatchingStatus.tsx
index e9142f215..529dedc30 100644
--- a/src/components/soulmate/view/lobby/MatchingStatus.tsx
+++ b/src/components/soulmate/view/lobby/MatchingStatus.tsx
@@ -76,10 +76,10 @@ const Button = styled(Link)`
   align-items: center;
   justify-content: center;
   border-radius: 6px;
-  background-color: ${colors.white100};
+  background-color: ${colors.gray10};
   padding: 14px 20px;
   width: 180px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_SB};
 
diff --git a/src/components/soulmate/view/lobby/Register.tsx b/src/components/soulmate/view/lobby/Register.tsx
index 9309d7730..1414eeb47 100644
--- a/src/components/soulmate/view/lobby/Register.tsx
+++ b/src/components/soulmate/view/lobby/Register.tsx
@@ -103,7 +103,7 @@ const Card = styled.div`
   gap: 50px;
   margin-top: 50px;
   border-radius: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 48px 39px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -144,7 +144,7 @@ const AgreeArea = styled.div`
   gap: 12px;
   align-items: center;
   margin-top: 40px;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   ${textStyles.SUIT_16_M};
 
@@ -163,19 +163,19 @@ const ApplyButton = styled.button`
   transition: background-color 0.3s;
   margin-top: 60px;
   border-radius: 6px;
-  background: ${colors.white100};
+  background: ${colors.gray10};
   cursor: pointer;
   padding: 14px 20px;
-  color: ${colors.black100};
+  color: ${colors.gray900};
 
   ${textStyles.SUIT_16_SB};
 
   ${(props) =>
     props.disabled &&
     css`
-      background: ${colors.black60};
+      background: ${colors.gray700};
       cursor: default;
-      color: ${colors.gray80};
+      color: ${colors.gray400};
     `}
 
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx b/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx
index 7a8a7a3fd..bedeae412 100644
--- a/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx
+++ b/src/components/wordchain/WordchainChatting/StartWordChatMessage/index.tsx
@@ -46,7 +46,7 @@ const Makers = {
   `,
   Title: styled.div`
     line-height: 100%;
-    color: ${colors.white100};
+    color: ${colors.gray10};
 
     ${textStyles.SUIT_20_SB}
 
@@ -69,11 +69,11 @@ const StartWord = styled.div`
   position: relative;
   margin-left: 76px;
   border-radius: 20px;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   padding: 16px 20px;
   width: fit-content;
   line-height: 120%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M}
 
@@ -91,7 +91,7 @@ const Triangle = styled.div`
   top: -9px;
   left: 12px;
   border-right: 32px solid transparent;
-  border-bottom: 27px solid ${colors.black100};
+  border-bottom: 27px solid ${colors.gray900};
   border-left: 0 solid transparent;
   width: 0;
   height: 0;
diff --git a/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx b/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx
index 4148b47d1..237af7bb6 100644
--- a/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx
+++ b/src/components/wordchain/WordchainChatting/WordChatMessage/index.tsx
@@ -52,7 +52,7 @@ const MessageBox = styled.div`
   gap: 8px;
   align-items: center;
   border-radius: 20px 20px 0;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   padding: 16px 20px;
   width: fit-content;
 
@@ -64,7 +64,7 @@ const MessageBox = styled.div`
 
 const Word = styled.div`
   line-height: 120%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M}
 
@@ -75,14 +75,14 @@ const Word = styled.div`
 
 const Divider = styled.div`
   line-height: 120%;
-  color: ${colors.black40};
+  color: ${colors.gray600};
 
   ${textStyles.SUIT_16_M}
 `;
 
 const Name = styled.div`
   line-height: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_14_SB}
 
@@ -108,7 +108,7 @@ const EmptyProfileImage = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 40px;
   height: 40px;
 
diff --git a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx
index a1b17517c..adea5fbf5 100644
--- a/src/components/wordchain/WordchainChatting/Wordchain/index.tsx
+++ b/src/components/wordchain/WordchainChatting/Wordchain/index.tsx
@@ -106,11 +106,11 @@ const Container = styled.div`
 const InitMessage = styled.div`
   margin-bottom: 16px;
   border-radius: 20px;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   padding: 4px 8px;
   width: fit-content;
   line-height: 120%;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_13_M}
 
@@ -137,7 +137,7 @@ const WordChatMessageList = styled.div`
 const GiveUpButton = styled.button`
   margin-top: 40px;
   text-decoration-line: underline;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_16_M}
 
@@ -156,7 +156,7 @@ const WinnerMessage = styled.div`
   margin-top: 12px;
   margin-right: 54px;
   line-height: 100%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M}
 
@@ -172,7 +172,7 @@ const TrophyIconWrapper = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.orange100};
+  background-color: ${colors.secondary};
   width: 20px;
   height: 20px;
 
diff --git a/src/components/wordchain/WordchainChatting/index.tsx b/src/components/wordchain/WordchainChatting/index.tsx
index a375ab887..34441caa1 100644
--- a/src/components/wordchain/WordchainChatting/index.tsx
+++ b/src/components/wordchain/WordchainChatting/index.tsx
@@ -181,7 +181,7 @@ export default function WordchainChatting({ className }: WordchainChattingProps)
 
 const ContainerBase = styled.div`
   border-radius: 30px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   width: 790px;
   height: 100%;
 
@@ -218,7 +218,7 @@ const WordchainList = styled.div`
     position: absolute;
     bottom: -34px;
     left: 0;
-    background-color: ${colors.black60};
+    background-color: ${colors.gray700};
     width: 100%;
     height: 1px;
     content: '';
@@ -248,21 +248,21 @@ const Form = styled.form`
 
 const StyledInput = styled.input<{ isError: boolean }>`
   transition: border-color 0.5s ease-in;
-  border: 1px solid ${({ isError }) => (isError ? colors.red100 : colors.black80)};
+  border: 1px solid ${({ isError }) => (isError ? colors.error : colors.gray800)};
   border-radius: 14px;
-  background-color: ${colors.black100};
+  background-color: ${colors.gray900};
   padding: 24px 20px;
   width: 100%;
   line-height: 120%;
-  color: ${colors.gray10};
+  color: ${colors.gray30};
 
   &::placeholder {
-    color: ${colors.gray80};
+    color: ${colors.gray400};
   }
 
   &:focus {
     outline: none;
-    border-color: ${({ isError }) => (isError ? colors.red100 : colors.gray40)};
+    border-color: ${({ isError }) => (isError ? colors.error : colors.gray200)};
   }
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -300,11 +300,11 @@ const ErrorMessage = styled.div<{ isVisible: boolean }>`
   transition: opacity 0.5s ease-in;
   opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
   border-radius: 10px;
-  background-color: ${colors.red100};
+  background-color: ${colors.error};
   padding: 10px;
   width: fit-content;
   line-height: 130%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_14_M}
 `;
@@ -316,7 +316,7 @@ const Triangle = styled.div<{ isVisible: boolean }>`
   transition: opacity 0.5s ease-in;
   opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};
   border-right: 8px solid transparent;
-  border-bottom: calc(8px * 1.6) solid ${colors.red100};
+  border-bottom: calc(8px * 1.6) solid ${colors.error};
   border-left: 8px solid transparent;
   width: 0;
   height: 0;
diff --git a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx
index 72c314318..0f28a1c51 100644
--- a/src/components/wordchain/WordchainEntry/WordChainEntry.tsx
+++ b/src/components/wordchain/WordchainEntry/WordChainEntry.tsx
@@ -136,7 +136,7 @@ const Container = styled(Link)`
   display: flex;
   justify-content: space-between;
   border-radius: 16px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 39px 45px 39px 70px;
   width: 100%;
   height: 100%;
@@ -146,7 +146,7 @@ const Container = styled(Link)`
     align-items: center;
     justify-content: center;
     border-radius: 0;
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
     padding: 0 20px;
     width: 100%;
   }
@@ -194,7 +194,7 @@ const WordchainText = styled(Text)`
     align-items: center;
     justify-content: center;
     border-radius: 12px;
-    background-color: ${colors.black80};
+    background-color: ${colors.gray800};
     padding: 14px 0;
     width: 100%;
 
@@ -231,7 +231,7 @@ const GotoWordChainWrapper = styled.aside`
   align-items: center;
   justify-content: space-between;
   border-radius: 12px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 16px;
 `;
 
@@ -251,5 +251,5 @@ const GotoWordChainSub = styled.div`
 `;
 
 const LastWord = styled.span`
-  color: ${colors.orange100};
+  color: ${colors.secondary};
 `;
diff --git a/src/components/wordchain/WordchainEntry/WordchainMessage.tsx b/src/components/wordchain/WordchainEntry/WordchainMessage.tsx
index 9a1762629..912bf3674 100644
--- a/src/components/wordchain/WordchainEntry/WordchainMessage.tsx
+++ b/src/components/wordchain/WordchainEntry/WordchainMessage.tsx
@@ -74,7 +74,7 @@ const MessageBox = styled.div`
   gap: 8px;
   align-items: center;
   border-radius: 20px 20px 0;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 16px 20px;
 
   @media ${MOBILE_MEDIA_QUERY} {
@@ -86,7 +86,7 @@ const MessageBox = styled.div`
 
 const Word = styled.div`
   line-height: 120%;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_M}
 
@@ -97,7 +97,7 @@ const Word = styled.div`
 
 const Divider = styled.div`
   line-height: 120%;
-  color: ${colors.black40};
+  color: ${colors.gray600};
 
   ${textStyles.SUIT_16_M}
 
@@ -110,7 +110,7 @@ const Divider = styled.div`
 
 const Name = styled.div`
   line-height: 100%;
-  color: ${colors.gray60};
+  color: ${colors.gray300};
 
   ${textStyles.SUIT_14_SB}
 
@@ -136,7 +136,7 @@ const EmptyProfileImage = styled.div`
   align-items: center;
   justify-content: center;
   border-radius: 50%;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 40px;
   height: 40px;
 
diff --git a/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx b/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx
index e37079b5c..c74ec5492 100644
--- a/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx
+++ b/src/components/wordchain/WordchainWinners/WordchainWinner/index.tsx
@@ -44,11 +44,11 @@ const WordChainWinnerContainer = styled(Link)<{ isRecent: boolean }>`
     isRecent
       ? css`
           margin-top: 16px;
-          background-color: ${colors.white100};
+          background-color: ${colors.gray10};
         `
       : css`
           margin-top: 12px;
-          background-color: ${colors.black60};
+          background-color: ${colors.gray700};
         `}
 
   white-space: nowrap;
@@ -76,13 +76,13 @@ const WinRound = styled.div<{ isRecent: boolean }>`
   ${({ isRecent }) =>
     isRecent &&
     css`
-      color: ${colors.black100};
+      color: ${colors.gray900};
     `}
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 2px;
     height: 12px;
-    color: ${colors.gray60};
+    color: ${colors.gray300};
     ${textStyles.SUIT_10_M}
 
     ::after {
@@ -112,7 +112,7 @@ const WinnerImageBox = styled.div`
   justify-content: center;
   margin-right: 6px;
   border-radius: 50%;
-  background-color: ${colors.black40};
+  background-color: ${colors.gray600};
   width: 20px;
   height: 20px;
   overflow: hidden;
@@ -145,7 +145,7 @@ const WinnerName = styled.p<{ isRecent: boolean }>`
   ${({ isRecent }) =>
     isRecent &&
     css`
-      color: ${colors.black100};
+      color: ${colors.gray900};
     `}
 
   @media ${MOBILE_MEDIA_QUERY} {
diff --git a/src/components/wordchain/WordchainWinners/index.tsx b/src/components/wordchain/WordchainWinners/index.tsx
index 1d9eb53eb..fbb5ef590 100644
--- a/src/components/wordchain/WordchainWinners/index.tsx
+++ b/src/components/wordchain/WordchainWinners/index.tsx
@@ -58,7 +58,7 @@ const WinnerBoard = styled.aside`
   flex-direction: column;
   align-items: center;
   border-radius: 20px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 28px;
   width: 324px;
   height: 382px;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 8013949fc..80fa66302 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -26,7 +26,7 @@ const queryClient = new QueryClient({
   defaultOptions: { queries: { cacheTime: 300000, refetchOnWindowFocus: false, staleTime: 300000, retry: 1 } },
 });
 
-const progress = new ProgressBar({ color: colors.blue50, size: 3 });
+const progress = new ProgressBar({ color: colors.success, size: 3 });
 Router.events.on('routeChangeStart', () => progress.start());
 Router.events.on('routeChangeComplete', () => progress.finish());
 Router.events.on('routeChangeError', () => progress.finish());
@@ -54,7 +54,7 @@ function MyApp({ Component, pageProps }: AppProps) {
         }}
       />
       <Head>
-        <meta name='theme-color' media='(prefers-color-scheme: dark)' content={colors.gray80} />
+        <meta name='theme-color' media='(prefers-color-scheme: dark)' content={colors.gray400} />
       </Head>
       <GoogleTagManagerScript />
       <RecoilRoot>
diff --git a/src/pages/auth/login.tsx b/src/pages/auth/login.tsx
index b09092167..4f4e1b4c2 100644
--- a/src/pages/auth/login.tsx
+++ b/src/pages/auth/login.tsx
@@ -162,7 +162,7 @@ const LoginPrefix = styled.span`
 export const LoginDescription = styled.p`
   margin-top: 12px;
   text-align: center;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${textStyles.SUIT_16_M};
 
@@ -226,7 +226,7 @@ const ResetLoginAction = styled.div`
 
 const RegisterInfo = styled.div`
   margin-top: 30px;
-  color: ${colors.gray80};
+  color: ${colors.gray400};
 
   ${textStyles.SUIT_16_M};
 
@@ -239,7 +239,7 @@ const RegisterInfo = styled.div`
 
 const LastLogin = styled(m.div)`
   margin-top: 25px;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 
   ${textStyles.SUIT_16_SB}
 `;
@@ -247,7 +247,7 @@ const LastLogin = styled(m.div)`
 const RegisterLink = styled(Link)`
   transition: 0.2s color;
   text-decoration: underline;
-  color: ${colors.white100};
+  color: ${colors.gray10};
 `;
 
 const MotionMakersContainer = styled(m.div)`
@@ -270,10 +270,10 @@ const MotionTooltip = styled(m.div)`
 
 const TooltipRect = styled.div`
   border-radius: 12px;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   padding: 18px 16px;
   white-space: nowrap;
-  color: ${colors.gray10};
+  color: ${colors.gray30};
 
   ${textStyles.SUIT_16_M}
 
@@ -286,7 +286,7 @@ const TooltipRect = styled.div`
 
 const TooltipArrow = styled.div`
   border: 10px solid transparent;
-  border-top: 12px solid ${colors.black60};
+  border-top: 12px solid ${colors.gray700};
   border-bottom: 0;
   width: 0;
   height: 0;
diff --git a/src/pages/wordchain/index.tsx b/src/pages/wordchain/index.tsx
index d9de19f8d..4da0d0039 100644
--- a/src/pages/wordchain/index.tsx
+++ b/src/pages/wordchain/index.tsx
@@ -130,7 +130,7 @@ const RuleWrapper = styled.div`
   flex-direction: column;
   row-gap: 16px;
   border-radius: 20px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 30px 38px;
 `;
 
@@ -139,7 +139,7 @@ const RuleTrigger = styled.div`
   column-gap: 8px;
   align-items: center;
   text-decoration: underline;
-  color: ${colors.gray40};
+  color: ${colors.gray200};
 
   @media ${MOBILE_MEDIA_QUERY} {
     margin-top: 10px;
@@ -149,14 +149,14 @@ const RuleTrigger = styled.div`
 const Winners = styled.div`
   position: relative;
   border-radius: 20px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   padding: 28px;
   height: 100%;
   max-height: 380px;
 
   @media ${MOBILE_MEDIA_QUERY} {
     border-radius: 0;
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
     padding: 20px;
     height: 59.5px;
   }
@@ -171,13 +171,13 @@ const DimmedWinners = styled.div`
   justify-content: center;
   opacity: 0.9;
   border-radius: 20px;
-  background-color: ${colors.black80};
+  background-color: ${colors.gray800};
   width: 100%;
   height: 100%;
 
   @media ${MOBILE_MEDIA_QUERY} {
     border-radius: 0;
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
     padding: 20px;
     height: auto;
   }
@@ -192,7 +192,7 @@ const MobileResponsive = styled(Responsive)`
 const Divider = styled.hr`
   margin: 24px 0 0;
   border: none;
-  background-color: ${colors.black60};
+  background-color: ${colors.gray700};
   width: 100%;
   height: 1.5px;
 `;
diff --git a/src/styles/global.ts b/src/styles/global.ts
index ca11c60fe..973c80ef5 100644
--- a/src/styles/global.ts
+++ b/src/styles/global.ts
@@ -15,7 +15,7 @@ export const global = css`
 
   html,
   body {
-    background-color: ${colors.black100};
+    background-color: ${colors.gray900};
 
     .pc-only {
       @media ${MOBILE_MEDIA_QUERY} {
@@ -31,7 +31,7 @@ export const global = css`
     }
 
     & :focus-visible {
-      outline: 1px solid ${colors.gray40};
+      outline: 1px solid ${colors.gray200};
     }
 
     /* Remove Arrows/Spinners Chrome, Safari, Edge, Opera */
@@ -57,8 +57,8 @@ export const global = css`
     select:-webkit-autofill:hover,
     select:-webkit-autofill:focus {
       transition: background-color 5000s ease-in-out 0s;
-      box-shadow: 0 0 0 1000px ${colors.black80} inset;
-      -webkit-text-fill-color: ${colors.white100};
+      box-shadow: 0 0 0 1000px ${colors.gray800} inset;
+      -webkit-text-fill-color: ${colors.gray10};
     }
   }
 
diff --git a/src/styles/reset.ts b/src/styles/reset.ts
index 975023d7a..bd75a3e85 100644
--- a/src/styles/reset.ts
+++ b/src/styles/reset.ts
@@ -6,7 +6,7 @@ export const reset = css`
   html,
   body {
     background: #fff;
-    color: ${colors.white100};
+    color: ${colors.gray10};
     font-family: SUIT, sans-serif;
     -webkit-font-smoothing: antialiased;
     -webkit-overflow-scrolling: touch;
@@ -112,7 +112,7 @@ export const reset = css`
   a {
     outline: none;
     text-decoration: none;
-    color: ${colors.white100};
+    color: ${colors.gray10};
   }
 
   a:hover,
@@ -248,7 +248,7 @@ export const reset = css`
   [type='reset'],
   [type='submit'] {
     appearance: button;
-    color: ${colors.white100};
+    color: ${colors.gray10};
   }
 
   /**
diff --git a/yarn.lock b/yarn.lock
index e0462ebe1..a769ffd5d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4951,10 +4951,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sopt-makers/colors@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@sopt-makers/colors@npm:1.0.0"
-  checksum: 4b5ee37a6d67f51289d9f14ff40e833670054694d31ff73329b8c0b857e75b7838ccd2ee0bdcc8caabd000ca5f9b44a808ea919536673cfc8674fde4c96d61bd
+"@sopt-makers/colors@npm:^2.2.0":
+  version: 2.2.0
+  resolution: "@sopt-makers/colors@npm:2.2.0"
+  checksum: 29146fa24433fa947c53ba6dd52433bc681d0857ae0690100f5dfb6e12471d0561991a6b2f121502f480f2887c34ccb04b531b76f8e3afdd5cdd68284fe3d1a1
   languageName: node
   linkType: hard
 
@@ -17709,7 +17709,7 @@ __metadata:
     "@radix-ui/react-slot": ^1.0.1
     "@radix-ui/react-tabs": ^1.0.2
     "@radix-ui/react-tooltip": ^1.0.5
-    "@sopt-makers/colors": ^1.0.0
+    "@sopt-makers/colors": ^2.2.0
     "@storybook/addon-actions": ^7.0.23
     "@storybook/addon-docs": ^7.0.23
     "@storybook/addon-essentials": ^7.0.23