diff --git a/src/SIGNUP_SRC/components/Form/TextToggle/Label.tsx b/src/SIGNUP_SRC/components/Form/TextToggle/Label.tsx
index b27a87c7..20e8add9 100644
--- a/src/SIGNUP_SRC/components/Form/TextToggle/Label.tsx
+++ b/src/SIGNUP_SRC/components/Form/TextToggle/Label.tsx
@@ -18,9 +18,7 @@ export function Label({ text, ...props }: LabelProps) {
         props.className
       )}
       style={{
-        color: isLightMode
-          ? "#7c7c7c" // gray-03
-          : "#CECECE", // gray-01
+        color: "var(--fore-subtle)",
       }}
     >
       {text}
diff --git a/src/SIGNUP_SRC/components/Input/InputCheckbox.tsx b/src/SIGNUP_SRC/components/Input/InputCheckbox.tsx
index 553803ca..338cd81d 100644
--- a/src/SIGNUP_SRC/components/Input/InputCheckbox.tsx
+++ b/src/SIGNUP_SRC/components/Input/InputCheckbox.tsx
@@ -39,12 +39,11 @@ export const InputCheckbox = React.forwardRef<HTMLButtonElement, InputCheckboxPr
           onBlur={onBlur}
           id={id}
           className={twMerge(
-            "shrink-0 h-[22px] basis-[22px] grid place-items-center my-0.5 appearance-none rounded bg-neutral-05 border border-gray-02 outline-none focus:outline-1 focus:outline-gray-03 focus:outline-offset-2 data-[state=checked]:bg-secondary-03 data-[state=checked]:border-secondary-03",
-            rest.className,
-            "dark:bg-neutral-05"
+            "shrink-0 h-[22px] basis-[22px] grid place-items-center my-0.5 appearance-none rounded outline-none focus:outline-1 focus:outline-ring-strong focus:outline-offset-2 data-[state=checked]:bg-back-shadow  data-[state=checked]:border-ring-base bg-back-ground border border-ring-base ",
+            rest.className
           )}
         >
-          <Checkbox.Indicator className="text-gray-01">
+          <Checkbox.Indicator className="text-fore-ground-base">
             <CheckIcon size={12} />
           </Checkbox.Indicator>
         </Checkbox.Root>
@@ -52,7 +51,7 @@ export const InputCheckbox = React.forwardRef<HTMLButtonElement, InputCheckboxPr
           className="flex-1 text-sm"
           htmlFor={id}
           style={{
-            color: "#7c7c7c", // gray-03
+            color: "var(--fore-subtle)",
           }}
         >
           {label}
diff --git a/src/SIGNUP_SRC/components/Input/InputErrorMessage.tsx b/src/SIGNUP_SRC/components/Input/InputErrorMessage.tsx
index 0096c1cd..6c36af6b 100644
--- a/src/SIGNUP_SRC/components/Input/InputErrorMessage.tsx
+++ b/src/SIGNUP_SRC/components/Input/InputErrorMessage.tsx
@@ -28,7 +28,7 @@ export function InputErrorMessage({
           className={twMerge(
             "mt-2 relative text-sm border border-primary-01 text-primary-02 font-medium p-2 rounded-lg",
             rest.className,
-            "dark:bg-primary-01 dark:border-none font-normal"
+            "dark:bg-error dark:border-none font-normal"
           )}
           style={{
             color: "#E43D3D", // primary-02
diff --git a/src/SIGNUP_SRC/components/Input/InputLabel.tsx b/src/SIGNUP_SRC/components/Input/InputLabel.tsx
index 6010c189..f76c4471 100644
--- a/src/SIGNUP_SRC/components/Input/InputLabel.tsx
+++ b/src/SIGNUP_SRC/components/Input/InputLabel.tsx
@@ -14,9 +14,10 @@ export function InputLabel({ required, disabled, label, ...rest }: InputLabelPro
       data-disabled={disabled}
       data-required={required}
       className={twMerge(
-        "relative mb-1 text-sm text-gray-03 data-[disabled=true]:text-gray-02 data-[disabled=true]:cursor-not-allowed w-fit data-[required=true]:after:text-primary-03 data-[required=true]:after:content-['*'] data-[required=true]:after:font-bold data-[required=true]:after:absolute data-[required=true]:after:-right-2.5",
+        "relative mb-1 text-sm text-gray-03 data-[disabled=true]:cursor-not-allowed w-fit data-[required=true]:after:text-primary-03 data-[required=true]:after:content-['*'] data-[required=true]:after:font-bold data-[required=true]:after:absolute data-[required=true]:after:-right-2.5",
         rest.className
       )}
+      style={{ color: "var(--fore-accent)" }}
     >
       {label}
     </label>
diff --git a/src/SIGNUP_SRC/components/Input/InputSkeleton.tsx b/src/SIGNUP_SRC/components/Input/InputSkeleton.tsx
index 714bffe3..ce5bf8d4 100644
--- a/src/SIGNUP_SRC/components/Input/InputSkeleton.tsx
+++ b/src/SIGNUP_SRC/components/Input/InputSkeleton.tsx
@@ -21,7 +21,7 @@ export function InputSkeleton({ children, animation, ...rest }: InputSkeletonPro
         <p
           className={twMerge("text-sm", rest.textClasses, "leading-6")}
           style={{
-            color: "#7c7c7c", // gray-03
+            color: "var(--fore-subtle)",
           }}
         >
           {children ?? "Carregando..."}
diff --git a/src/SIGNUP_SRC/components/Input/InputStringAction.tsx b/src/SIGNUP_SRC/components/Input/InputStringAction.tsx
index 8f4f235d..502c337f 100644
--- a/src/SIGNUP_SRC/components/Input/InputStringAction.tsx
+++ b/src/SIGNUP_SRC/components/Input/InputStringAction.tsx
@@ -58,15 +58,15 @@ export const InputStringAction = React.forwardRef<
           type={type}
           id={inputId}
           className={twMerge(
-            "placeholder:text-gray-03 outline-none grow min-w-0 text-secondary-03 bg-transparent",
+            "placeholder:text-fore-subtle outline-none grow min-w-0 text-fore-ground-base bg-transparent",
             rest.className
           )}
           ref={asChild ? null : ref}
         >
           {children}
         </Component>
-        <div className="basis-6 h-6 rounded-lg hover:bg-gray-01 grid place-items-center cursor-pointer">
-          <ActionIcon onClick={onAction} className="text-gray-03 w-5 h-5" />
+        <div className="basis-6 h-6 rounded-lg hover:bg-back-shadow grid place-items-center cursor-pointer">
+          <ActionIcon onClick={onAction} className="text-symbol w-5 h-5" />
         </div>
       </div>
       <Input.Error errorMessage={errorMessage} />
diff --git a/src/SIGNUP_SRC/components/SelectControlled/Select.tsx b/src/SIGNUP_SRC/components/SelectControlled/Select.tsx
index 1758530e..39346174 100644
--- a/src/SIGNUP_SRC/components/SelectControlled/Select.tsx
+++ b/src/SIGNUP_SRC/components/SelectControlled/Select.tsx
@@ -46,9 +46,6 @@ export const Select = React.forwardRef<HTMLDivElement, ISelect>(function SelectC
   const showingOptions = options?.filter((opt) => !value.includes(opt)) ?? null;
   const hasSelectedAll = showingOptions?.length === 0;
 
-  const { theme } = useTheme();
-  const isLightMode = theme === "light";
-
   const handleClickSelect = () => {
     if (!hasSelectedAll) setIsShowingOptionsModal((isOpen) => !isOpen);
   };
@@ -76,11 +73,7 @@ export const Select = React.forwardRef<HTMLDivElement, ISelect>(function SelectC
   }
 
   return (
-    <div
-      className="relative font-normal text-secondary-03 focus:outline-red-500"
-      onBlur={onBlur}
-      ref={SelectRef}
-    >
+    <div className="relative font-normal" onBlur={onBlur} ref={SelectRef}>
       <input type="hidden" ref={fieldRef} />
       <SelectInput
         className={twMerge("", rest.className)}
@@ -93,37 +86,35 @@ export const Select = React.forwardRef<HTMLDivElement, ISelect>(function SelectC
           value.map((selectedOption) => (
             <SelectedOption
               key={selectedOption}
-              className="py-[5px] px-4 bg-gray-01 text-xs"
+              className="py-[5px] px-4 bg-middle-ground text-xs"
             >
               <span className="select-none">{selectedOption}</span>
               <ButtonRemoveSelectedOption
                 onClick={handleRemoveTag(selectedOption)}
-                className="hover:bg-gray-02"
+                className="hover:bg-middle-shadow"
               >
-                <IconX size={12} className="text-secondary-03" />
+                <IconX size={12} className="text-symbol" />
               </ButtonRemoveSelectedOption>
             </SelectedOption>
           ))
         ) : (
           <TextPlaceholderSelect
             className="leading-none"
-            style={{
-              color: isLightMode ? "#7C7C7C" : "#7C7C7C", // gray-03
-            }}
+            style={{ color: "var(--fore-subtle)" }}
           >
             Selecione uma especialização
           </TextPlaceholderSelect>
         )}
         <ButtonClearAllOptions
           onClick={handleClearAllOptions}
-          className="hover:bg-gray-01"
+          className="hover:bg-back-shadow"
           tabIndex={tabIndex + 1}
         >
-          <IconTrash size={18} className="text-secondary-03" />
+          <IconTrash size={18} className="text-symbol" />
         </ButtonClearAllOptions>
       </SelectInput>
       {isShowingOptionsModal ? (
-        <ModalSelectOptions className="p-4 bg-neutral-05 border border-gray-02 border-t-0 z-10">
+        <ModalSelectOptions className="p-4 bg-back-ground border border-ring-base border-t-0 z-10">
           <div className="max-h-[11rem] overflow-y-auto flex flex-col">
             <SelectModalContent
               handleChooseOption={handleChooseOption}
diff --git a/src/SIGNUP_SRC/components/SelectControlled/SelectModalContent.tsx b/src/SIGNUP_SRC/components/SelectControlled/SelectModalContent.tsx
index 6e1ad71d..d283e95b 100644
--- a/src/SIGNUP_SRC/components/SelectControlled/SelectModalContent.tsx
+++ b/src/SIGNUP_SRC/components/SelectControlled/SelectModalContent.tsx
@@ -17,7 +17,7 @@ export default function SelectModalContent(props: SelectModalContentProps) {
     return (
       <ModalTextAllOptionsSelected
         className="pr-2 pl-4 italic text-sm"
-        style={{ color: "#CECECE" }} // gray-01
+        style={{ color: "var(--fore-subtle)" }} // gray-01
       >
         Carregando...
       </ModalTextAllOptionsSelected>
@@ -28,7 +28,7 @@ export default function SelectModalContent(props: SelectModalContentProps) {
     return (
       <ModalTextAllOptionsSelected
         className="pr-2 pl-4 italic text-sm"
-        style={{ color: "#CECECE" }} // gray-01
+        style={{ color: "var(--fore-subtle)" }} // gray-01
       >
         {props.textAllOptionsSelected ?? "Todas opções foram selecionadas."}
       </ModalTextAllOptionsSelected>
@@ -42,8 +42,7 @@ export default function SelectModalContent(props: SelectModalContentProps) {
           key={option}
           onClick={props.handleChooseOption(option)}
           className={twMerge(
-            "py-2 px-4 hover:bg-gray-01 rounded-lg",
-            "dark:hover:bg-gray-03"
+            "py-2 px-4 hover:bg-back-shadow rounded-lg text-fore-ground-base"
           )}
         >
           <span className="select-none">{option}</span>
diff --git a/src/SIGNUP_SRC/components/sign/ButtonSecondary.tsx b/src/SIGNUP_SRC/components/sign/ButtonSecondary.tsx
index 047ac9af..b651967e 100644
--- a/src/SIGNUP_SRC/components/sign/ButtonSecondary.tsx
+++ b/src/SIGNUP_SRC/components/sign/ButtonSecondary.tsx
@@ -12,7 +12,8 @@ export function ButtonSecondary(props: ButtonSecondaryProps) {
     <Form.Button
       {...props}
       className={twMerge(
-        "sm:order-none order-1 focus:outline-gray-02 bg-neutral-05 border border-gray-02 hover:border-primary-01 transition-colors duration-100 hover:text-primary-02 text-secondary-03",
+        "sm:order-none order-1 focus:outline-ring-strong bg-back-block border border-ring-strong hover:border-primary-01 transition-colors duration-100 hover:text-primary-02 text-fore-ground-base",
+        "hover:border-ring-strong hover:text-fore-ground-base hover:bg-back-shadow",
         props.className
       )}
       tabIndex={props.tabIndex ?? 30}
diff --git a/src/SIGNUP_SRC/steps/components/FormSelect/component.tsx b/src/SIGNUP_SRC/steps/components/FormSelect/component.tsx
index 6dcef897..97cf9196 100644
--- a/src/SIGNUP_SRC/steps/components/FormSelect/component.tsx
+++ b/src/SIGNUP_SRC/steps/components/FormSelect/component.tsx
@@ -28,14 +28,11 @@ export function FormSelect<T extends FieldPath<IFormValues>>(props: IFormSelect<
   // falsy ativa o placeholder, string vazia não é falsy
   const value = hasValidValue ? selectValue : null;
 
-  if (props.isLoading) {
-    return <Input.Skeleton />;
-  }
-
   return (
     <Select
       id={props.id}
       options={props.options ?? []}
+      isLoading={props.isLoading}
       autoFocus
       unstyled
       tabIndex={props.tabIndex}
@@ -72,16 +69,13 @@ export function FormSelect<T extends FieldPath<IFormValues>>(props: IFormSelect<
         container: ({ isDisabled }) =>
           twMerge(
             stSignInput,
-            `focus-within:outline-1 focus-within:outline-gray-03 focus-within:outline-offset-2`,
-            isDisabled ? "bg-gray-01 dark:bg-gray-03" : ""
+            `focus-within:outline-1 focus-within:outline-ring-strong focus-within:outline-offset-2`,
+            isDisabled ? "bg-back-block" : ""
           ),
         menu: () => stSignInput,
         option: () =>
-          twMerge(
-            "py-2 px-4 hover:bg-gray-01 rounded-lg hover:cursor-pointer",
-            "dark:hover:bg-gray-03"
-          ),
-        placeholder: () => "text-gray-03",
+          twMerge("py-2 px-4 hover:bg-back-shadow rounded-lg hover:cursor-pointer"),
+        placeholder: () => "text-fore-subtle",
       }}
     />
   );
diff --git a/src/SIGNUP_SRC/steps/components/default-animations/Skeleton.ts b/src/SIGNUP_SRC/steps/components/default-animations/Skeleton.ts
index 7994efbc..03f0a120 100644
--- a/src/SIGNUP_SRC/steps/components/default-animations/Skeleton.ts
+++ b/src/SIGNUP_SRC/steps/components/default-animations/Skeleton.ts
@@ -5,10 +5,7 @@ export const skeletonDefaultAnimation = (props?: { duration: number }): MotionPr
 
   return {
     animate: {
-      backgroundColor: [
-        "#171818", // secondary 03
-        "#343434", // secondary 01
-      ],
+      backgroundColor: ["var(--back-ground)", "var(--back-shadow)"],
     },
     transition: {
       repeat: Infinity,
diff --git a/src/components/_Layout/PlanPage.tsx b/src/components/_Layout/PlanPage.tsx
index 5589525f..87075f0a 100644
--- a/src/components/_Layout/PlanPage.tsx
+++ b/src/components/_Layout/PlanPage.tsx
@@ -1,4 +1,5 @@
 import Button from "@components/Button";
+import { CenteredContainer } from "@components/CenteredContainer";
 import ProfileCardToggle from "@components/ProfileCardToggle";
 import { Form } from "SIGNUP_SRC/components/Form";
 import { Sign } from "SIGNUP_SRC/components/sign";
@@ -14,7 +15,7 @@ export const PlanPage = () => {
   };
 
   return (
-    <main className=" min-h-screen flex flex-col items-center">
+    <CenteredContainer className="min-h-screen flex flex-col items-center px-8">
       <section className="max-w-2xl mt-20">
         <div>
           <h1 className="text-primary-05 dark:text-neutral-01 text-2xl sm:text-5xl text-center">
@@ -27,13 +28,13 @@ export const PlanPage = () => {
         <div className="mb-32">
           <ProfileCardToggle />
         </div>
-        <Form.MultipleInRow className="mb-32">
+        <Form.MultipleInRow className="is-form mb-32">
           <Sign.ButtonSecondary asChild>
             <Link href="/signin">Voltar</Link>
           </Sign.ButtonSecondary>
           <Sign.ButtonPrimary onClick={handleNext} text="Próximo" />
         </Form.MultipleInRow>
       </section>
-    </main>
+    </CenteredContainer>
   );
 };
diff --git a/src/components/_Layout/RegisterPage.tsx b/src/components/_Layout/RegisterPage.tsx
index 6d6df053..d619f245 100644
--- a/src/components/_Layout/RegisterPage.tsx
+++ b/src/components/_Layout/RegisterPage.tsx
@@ -130,7 +130,7 @@ export const RegisterPage = () => {
           </aside>
           <form
             onSubmit={handleSubmit(submitHandler)}
-            className="relative w-full m-auto pt-12 lg:m-0 mb-24 max-w-[43rem]"
+            className="is-form relative form w-full m-auto pt-12 lg:m-0 mb-24 max-w-[43rem]"
           >
             <Controller
               name="isMentor"
@@ -140,30 +140,19 @@ export const RegisterPage = () => {
                   <input type="hidden" ref={ref} />
                   <TextToggle.Label
                     className={twMerge(
-                      "bg-neutral-05 text-gray-03 border border-gray-03 whitespace-nowrap",
-                      "dark:bg-gray-03 dark:text-gray-01 dark:border-gray-03"
+                      "bg-back-ground text-fore-subtle border border-ring-base whitespace-nowrap"
+                      // "dark:bg-gray-03 dark:text-gray-01 dark:border-gray-03"
                     )}
-                    color={isLightMode ? "#7c7c7c" : "#CECECE"}
                     text="Deseja participar como"
                   />
                   <TextToggle.OptionsContainer
                     className={twMerge(
-                      "text-secondary-02 bg-neutral-05 border border-gray-03 flex-col xs:flex-row rounded-xl xs:rounded-full",
-                      "dark:border-gray-02 dark:text-secondary-01"
+                      "bg-back-ground border border-ring-base flex-col xs:flex-row rounded-xl xs:rounded-full"
+                      // "dark:border-gray-02 dark:text-secondary-01"
                     )}
-                    optionsColor={
-                      isLightMode
-                        ? "#212324" // secondary-02
-                        : "#CECECE" // gray-01
-                    }
-                    optionsHoverBackgroundColor={
-                      isLightMode
-                        ? "#cecece" //gray-01
-                        : "#343434" // secondary-01
-                    }
-                    optionSelected={
-                      isLightMode ? "#bcbcbc" : "#3E3E3E" // gray-05
-                    }
+                    optionsColor="var(--fore-accent)"
+                    optionsHoverBackgroundColor="var(--back-shadow)"
+                    optionSelected="var(--middle-ground)"
                   >
                     <TextToggle.Option
                       {...field}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index eace59a6..f14fdfd5 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -29,97 +29,6 @@ a {
   label {
     @apply text-primary-05 dark:text-neutral-01;
   }
-
-  :root {
-    --background: var(--neutral-03);
-
-    --primary-05: #580505;
-    --primary-04: #790404;
-    --primary-03: #ba0000;
-    --primary-02: #e43d3d;
-    --primary-01: #f36b6b;
-
-    --secondary-05: #0b0c0d;
-    --secondary-04: #0c0e0f;
-    --secondary-03: #171818;
-    --secondary-02: #212324;
-    --secondary-01: #343434;
-
-    --gray-05: #3e3e3e;
-    --gray-04: #535353;
-    --gray-03: #7c7c7c;
-    --gray-02: #989898;
-    --gray-01: #cecece;
-
-    --neutral-05: #e4e4e4;
-    --neutral-04: #f3eeee;
-    --neutral-03: #f3f3f3;
-    --neutral-02: #f8f8f8;
-    --neutral-01: #fefefe;
-
-    --success-01: #237c00;
-    --success-02: #3eb80e;
-    --success-03: #e4f9da;
-
-    --danger-01: #ea172e;
-    --danger-02: #ee4b4b;
-    --danger-03: #fcd2d2;
-
-    --info-01: #1f62a5;
-    --info-02: #61aee7;
-    --info-03: #c7deef;
-
-    --waiting-01: #f8ba1b;
-    --waiting-02: #ffd234;
-
-    --link-01: #3201be;
-    --link-02: #2420f9;
-  }
-  .dark {
-    --background: var(--secondary-02);
-
-    --primary-05: #580505;
-    --primary-04: #790404;
-    --primary-03: #ba0000;
-    --primary-02: #e43d3d;
-    --primary-01: #f36b6b;
-
-    --secondary-05: #0b0c0d;
-    --secondary-04: #0c0e0f;
-    --secondary-03: #171818;
-    --secondary-02: #212324;
-    --secondary-01: #343434;
-
-    --gray-05: #3e3e3e;
-    --gray-04: #535353;
-    --gray-03: #7c7c7c;
-    --gray-02: #989898;
-    --gray-01: #cecece;
-
-    --neutral-05: #e4e4e4;
-    --neutral-04: #f3eeee;
-    --neutral-03: #f3f3f3;
-    --neutral-02: #f8f8f8;
-    --neutral-01: #fefefe;
-
-    --success-01: #237c00;
-    --success-02: #3eb80e;
-    --success-03: #e4f9da;
-
-    --danger-01: #ea172e;
-    --danger-02: #ee4b4b;
-    --danger-03: #fcd2d2;
-
-    --info-01: #1f62a5;
-    --info-02: #61aee7;
-    --info-03: #c7deef;
-
-    --waiting-01: #f8ba1b;
-    --waiting-02: #ffd234;
-
-    --link-01: #3201be;
-    --link-02: #2420f9;
-  }
 }
 
 @layer components {
@@ -171,3 +80,91 @@ a {
   border-radius: 14px;
   border: none;
 }
+
+:root {
+  --background: var(--neutral-03);
+
+  --primary-05: #580505;
+  --primary-04: #790404;
+  --primary-03: #ba0000;
+  --primary-02: #e43d3d;
+  --primary-01: #f36b6b;
+
+  --secondary-05: #0b0c0d;
+  --secondary-04: #0c0e0f;
+  --secondary-03: #171818;
+  --secondary-02: #212324;
+  --secondary-01: #343434;
+
+  --gray-05: #3e3e3e;
+  --gray-04: #535353;
+  --gray-03: #7c7c7c;
+  --gray-02: #989898;
+  --gray-01: #cecece;
+
+  --neutral-05: #e4e4e4;
+  --neutral-04: #f3eeee;
+  --neutral-03: #f3f3f3;
+  --neutral-02: #f8f8f8;
+  --neutral-01: #fefefe;
+
+  --success-01: #237c00;
+  --success-02: #3eb80e;
+  --success-03: #e4f9da;
+
+  --danger-01: #ea172e;
+  --danger-02: #ee4b4b;
+  --danger-03: #fcd2d2;
+
+  --info-01: #1f62a5;
+  --info-02: #61aee7;
+  --info-03: #c7deef;
+
+  --waiting-01: #f8ba1b;
+  --waiting-02: #ffd234;
+
+  --link-01: #3201be;
+  --link-02: #2420f9;
+}
+
+.is-form {
+  --back-ground: rgb(249, 249, 249);
+  --back-block: rgb(227, 227, 227);
+  --back-shadow: rgb(238, 238, 238);
+  --middle-ground: rgb(227, 227, 227);
+  --middle-shadow: rgb(207, 207, 207);
+  --fore-ground-base: var(--gray-05);
+  --fore-ground-dark: var(--secondary-01);
+  --fore-shadow-base: var(--waiting-01);
+  --fore-shadow-dark: var(--waiting-02);
+  --fore-subtle: var(--gray-03);
+  --fore-accent: var(--gray-05);
+  --ring-base: var(--gray-01);
+  --ring-strong: var(--gray-02);
+  --symbol: var(--gray-03);
+
+  --error: rgb(66 15 15);
+
+  --shadow-opacity: 0.07;
+  --shadow-input: 0 10px 15px -3px rgba(0 0 0 / var(--shadow-opacity)),
+    0 4px 6px -4px rgba(0 0 0 / var(--shadow-opacity));
+}
+
+.dark .is-form {
+  --back-ground: var(--secondary-04);
+  --back-block: var(--secondary-02);
+  --back-shadow: var(--secondary-01);
+  --middle-ground: var(--gray-05);
+  --middle-shadow: var(--gray-04);
+  --fore-ground-base: var(--neutral-02);
+  --fore-ground-dark: var(--gray-02);
+  --fore-shadow-base: var(--gray-02);
+  --fore-shadow-dark: var(--gray-03);
+  --fore-subtle: var(--gray-02);
+  --fore-accent: var(--neutral-05);
+  --ring-base: var(--gray-05);
+  --ring-strong: var(--gray-05);
+  --symbol: var(--gray-02);
+
+  --error: rgb(66 15 15);
+}
diff --git a/src/styles/input-sign.ts b/src/styles/input-sign.ts
index 469111a4..4dc752e8 100644
--- a/src/styles/input-sign.ts
+++ b/src/styles/input-sign.ts
@@ -1,12 +1,14 @@
 import { twMerge } from "tailwind-merge";
 
-export const stSignGround = "text-secondary-03 bg-neutral-05";
+export const stSignGround = "text-fore-ground-base bg-back-ground";
+export const stShadow = "shadow-input";
 
 export const stSignBase =
-  "min-h-[3rem] rounded-lg outline-none focus:outline-1 focus:outline-gray-03 focus:outline-offset-2 border border-gray-02";
+  "min-h-[3rem] rounded-lg outline-none focus:outline-1 focus:outline-ring-strong focus:outline-offset-2 border border-ring-base";
 
 export const stSignInput = twMerge(
+  stShadow,
   stSignGround,
   stSignBase,
-  "p-3 placeholder:text-gray-03"
+  "p-3 placeholder:text-fore-subtle"
 );
diff --git a/tailwind.config.js b/tailwind.config.js
index d2e2c91a..1a1a80a7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -105,6 +105,36 @@ module.exports = {
         ...violet,
         ...green,
         ...blackA,
+        error: "var(--error)",
+        back: {
+          ground: "var(--back-ground)",
+          block: "var(--back-block)",
+          shadow: "var(--back-shadow)",
+        },
+        middle: {
+          ground: "var(--middle-ground)",
+          shadow: "var(--middle-shadow)",
+        },
+        fore: {
+          ground: {
+            base: "var(--fore-ground-base)",
+            dark: "var(--fore-ground-dark)",
+          },
+          shadow: {
+            base: "var(--fore-shadow-base)",
+            dark: "var(--fore-shadow-dark)",
+          },
+          subtle: "var(--fore-subtle)",
+          accent: "var(--fore-accent)",
+        },
+        ring: {
+          base: "var(--ring-base)",
+          strong: "var(--ring-strong)",
+        },
+        symbol: "var(--symbol)",
+      },
+      boxShadow: {
+        input: "var(--shadow-input)",
       },
       keyframes: {
         slideDown: {