From e5529cd547fb00c7a580e5119a09940b582b33af Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=94=B3=E6=B0=B8=E8=8C=83?= <youngbeomshin@163.com>
Date: Wed, 9 Oct 2024 17:00:04 +0800
Subject: [PATCH] Csghub  replace color design token (#702)

* add color extent to tailwind config, and replace gray/brancd/error color with design tokens

* update success & error & warning color

* replace rest color into color tokens

* remove empty line
---
 .../stylesheets/element-plus/_variables.css   |  2 +-
 frontend/src/components/OnPremiseFooter.vue   |  4 +-
 .../application_spaces/AppPayMode.vue         |  2 +-
 .../ApplicationSpaceDetail.vue                |  6 +-
 .../ApplicationSpaceItem.vue                  | 10 +--
 .../ApplicationSpaceSettings.vue              | 62 +++++++--------
 .../application_spaces/BuildAndErrorPage.vue  |  6 +-
 .../application_spaces/BuildStatus.vue        |  4 +-
 .../application_spaces/ErrorStatus.vue        |  4 +-
 .../GradioInitializeGuide.vue                 | 20 ++---
 .../NewApplicationSpace.vue                   | 16 ++--
 .../application_spaces/SpaceRelationsCard.vue |  8 +-
 .../application_spaces/StoppedPage.vue        |  8 +-
 .../StreamlitInitializeGuide.vue              | 20 ++---
 .../application_spaces/SuccessStatus.vue      |  4 +-
 .../application_spaces/WarningStatus.vue      |  4 +-
 .../components/codes/CodeRelationsCard.vue    |  6 +-
 .../src/components/codes/CodeSettings.vue     | 42 +++++-----
 frontend/src/components/codes/NewCode.vue     |  8 +-
 .../collections/AddToCollections.vue          | 10 +--
 .../collections/CollectionCards.vue           |  6 +-
 .../collections/CollectionIndex.vue           | 12 +--
 .../collections/CollectionsAddRepo.vue        | 12 +--
 .../collections/CollectionsDetail.vue         |  6 +-
 .../collections/CollectionsRepoList.vue       | 16 ++--
 .../collections/CollectionsSettings.vue       | 42 +++++-----
 .../components/collections/NewCollection.vue  | 18 ++---
 .../src/components/comment/CommentItem.vue    | 10 +--
 .../src/components/comment/CreateComment.vue  |  8 +-
 .../community/CommunityMDTextarea.vue         |  6 +-
 .../community/CommunityTimeLine.vue           |  4 +-
 .../components/community/DiscussionCard.vue   | 10 +--
 .../components/community/DiscussionCards.vue  |  4 +-
 .../community/DiscussionDetails.vue           | 12 +--
 .../components/community/EmptyCommunity.vue   |  8 +-
 .../community/NewCommunityDiscussion.vue      |  2 +-
 .../datasets/DatasetRelationsCard.vue         |  6 +-
 .../components/datasets/DatasetSettings.vue   | 54 ++++++-------
 .../src/components/datasets/NewDataset.vue    |  8 +-
 .../src/components/datasets/ParquetViewer.vue | 10 +--
 .../components/endpoints/EndpointDetail.vue   |  2 +-
 .../src/components/endpoints/EndpointItem.vue | 10 +--
 .../src/components/endpoints/EndpointPage.vue | 36 ++++-----
 .../endpoints/EndpointPlayground.vue          | 28 +++----
 .../components/endpoints/EndpointSettings.vue | 48 ++++++------
 .../src/components/endpoints/NewEndpoint.vue  | 10 +--
 .../endpoints/playground/ApiExample.vue       | 26 +++----
 .../endpoints/playground/TestEndpoint.vue     | 20 ++---
 frontend/src/components/error/LoginFailed.vue |  4 +-
 .../src/components/error/Unauthorized.vue     |  2 +-
 .../components/finetune/FinetuneDetail.vue    | 12 +--
 .../components/finetune/FinetuneSettings.vue  | 48 ++++++------
 .../src/components/finetune/NewFinetune.vue   | 14 ++--
 .../src/components/form/sub/FormLabel.vue     |  2 +-
 .../components/models/ModelRelationsCard.vue  |  6 +-
 .../src/components/models/ModelSettings.vue   | 54 ++++++-------
 frontend/src/components/models/NewModel.vue   |  8 +-
 .../models/widgets/QuestionAnswer.vue         | 14 ++--
 frontend/src/components/navbar/TheNavbar.vue  |  2 +-
 .../src/components/new_admin/AdminNavbar.vue  |  6 +-
 .../system_configs/AdminSystemConfig.vue      |  2 +-
 .../components/organizations/InviteMember.vue | 10 +--
 .../src/components/organizations/Menu.vue     | 12 +--
 .../organizations/NewOrganization.vue         | 10 +--
 .../organizations/OrgMemberRoleEditDialog.vue |  6 +-
 .../organizations/OrganizationDetail.vue      | 32 ++++----
 .../organizations/OrganizationEdit.vue        |  4 +-
 .../organizations/OrganizationMembers.vue     | 24 +++---
 .../src/components/popup/UpdateUsername.vue   |  2 +-
 .../resource_console/ResourceConsoleIndex.vue |  6 +-
 .../src/components/shared/BillingDetail.vue   | 16 ++--
 frontend/src/components/shared/Blob.vue       | 28 +++----
 frontend/src/components/shared/EditFile.vue   |  8 +-
 frontend/src/components/shared/FileList.vue   | 30 ++++----
 .../src/components/shared/FinetuneItem.vue    |  6 +-
 frontend/src/components/shared/HeaderTags.vue | 24 +++---
 frontend/src/components/shared/MoreTags.vue   |  2 +-
 frontend/src/components/shared/NewFile.vue    |  8 +-
 .../src/components/shared/ProfileRepoList.vue | 10 +--
 frontend/src/components/shared/RepoCards.vue  |  4 +-
 frontend/src/components/shared/RepoClone.vue  | 34 ++++----
 frontend/src/components/shared/RepoCommit.vue |  8 +-
 .../src/components/shared/RepoCommits.vue     | 10 +--
 frontend/src/components/shared/RepoDetail.vue |  2 +-
 frontend/src/components/shared/RepoHeader.vue | 32 ++++----
 frontend/src/components/shared/RepoItem.vue   |  8 +-
 .../src/components/shared/RepoSummary.vue     |  8 +-
 frontend/src/components/shared/UploadFile.vue |  6 +-
 frontend/src/components/shared/ViewMore.vue   |  2 +-
 .../form/PublicAndPrivateRadioGroup.vue       |  4 +-
 .../shared/viewers/MarkdownViewer.vue         |  2 +-
 frontend/src/components/tags/TagItem.vue      |  4 +-
 frontend/src/components/tags/TagSidebar.vue   | 24 +++---
 .../user_settings/AccessTokenSettings.vue     | 10 +--
 .../src/components/user_settings/Menu.vue     | 20 ++---
 .../src/components/user_settings/Profile.vue  | 18 ++---
 .../components/user_settings/ProfileEdit.vue  |  6 +-
 .../components/user_settings/SshKeyCard.vue   |  6 +-
 .../user_settings/SshKeySettings.vue          | 10 +--
 .../user_settings/StarshipAccessTokenCard.vue |  6 +-
 .../StarshipAccessTokenSettings.vue           |  6 +-
 .../user_settings/SyncAccessTokenSettings.vue | 10 +--
 frontend/src/views/layouts/navbar.html        |  2 +-
 frontend/tailwind.config.js                   | 77 ++++++++++++++++++-
 104 files changed, 744 insertions(+), 667 deletions(-)

diff --git a/frontend/src/assets/stylesheets/element-plus/_variables.css b/frontend/src/assets/stylesheets/element-plus/_variables.css
index f1f4456b7..179d4643e 100644
--- a/frontend/src/assets/stylesheets/element-plus/_variables.css
+++ b/frontend/src/assets/stylesheets/element-plus/_variables.css
@@ -1,5 +1,5 @@
 :root {
-  --Base-White: #FFF;
+  --Base-White: #FFFFFF;
 
   --Gray-25: #FCFCFD;
   --Gray-50: #F9FAFB;
diff --git a/frontend/src/components/OnPremiseFooter.vue b/frontend/src/components/OnPremiseFooter.vue
index ea8105914..072b702fe 100644
--- a/frontend/src/components/OnPremiseFooter.vue
+++ b/frontend/src/components/OnPremiseFooter.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="border-t border-[#DCDFE6]">
+  <div class="border-t border-gray-200">
     <div class="max-w-[1280px] m-auto py-4 mb-4 flex justify-between items-center w-full xl:px-5 sm:justify-center sm:gap-4 sm:text-[10px] sm:flex-col">
-      <p class="text-[#667085] text-base font-light">© 2024 OpenCSG. All rights reserved.</p>
+      <p class="text-gray-700 text-base font-light">© 2024 OpenCSG. All rights reserved.</p>
       <div class="flex items-center gap-6">
         <a href="https://twitter.com/OpenCsg" target="_blank">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
diff --git a/frontend/src/components/application_spaces/AppPayMode.vue b/frontend/src/components/application_spaces/AppPayMode.vue
index 20cb47f52..469444b63 100644
--- a/frontend/src/components/application_spaces/AppPayMode.vue
+++ b/frontend/src/components/application_spaces/AppPayMode.vue
@@ -1,6 +1,6 @@
 <template>
   <span
-    class="px-[8px] py-[2px] flex items-center justify-center border rounded-md text-[#344054] text-[12px] leading-[18px]"
+    class="px-[8px] py-[2px] flex items-center justify-center border rounded-md text-gray-700 text-[12px] leading-[18px]"
     >{{ thePayMode }}
   </span>
 </template>
diff --git a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
index f4733b227..1cb039011 100644
--- a/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
+++ b/frontend/src/components/application_spaces/ApplicationSpaceDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-[#FCFCFD] pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto max-w-[1280px]">
       <repo-header
         :private="applicationSpace.private"
@@ -59,12 +59,12 @@
             <p class="font-[600] text-[16px] text-black">{{ $t('application_spaces.errorPage.log') }}</p>
           </div>
           <div class="flex gap-4 items-center">
-            <span class="text-[14px] text-[#667085] cursor-pointer"
+            <span class="text-[14px] text-gray-500 cursor-pointer"
                   data-value="build"
                   @click="toggleActiveTab"
                   :class="isBuildLogTab ? 'active-tab' : ''"
             >{{ $t('application_spaces.errorPage.build') }}</span>
-            <span class="text-[14px] text-[#667085] cursor-pointer"
+            <span class="text-[14px] text-gray-500 cursor-pointer"
                   data-value="container"
                   @click="toggleActiveTab"
                   :class="isBuildLogTab ? '' : 'active-tab'"
diff --git a/frontend/src/components/application_spaces/ApplicationSpaceItem.vue b/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
index 558e37f11..6a5525df2 100644
--- a/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
+++ b/frontend/src/components/application_spaces/ApplicationSpaceItem.vue
@@ -1,18 +1,18 @@
 <template>
   <a
     :href="`/spaces/${repo.path}`"
-    class="xl:w-full focus:outline focus:outline-4 focus:outline-[#EAECF0] hover:shadow-md border border-gray-200 rounded-lg p-4 mlg:!w-full"
+    class="xl:w-full focus:outline focus:outline-4 focus:outline-gray-200 hover:shadow-md border border-gray-200 rounded-lg p-4 mlg:!w-full"
     :style="`width: ${itemWidth};`"
   >
     <div class="flex justify-between items-center mb-1">
       <div class="w-full flex items-center justify-between">
-        <h3 class="flex-1 text-[#344054] text-md font-normal leading-6 truncate mr-[8px]">
+        <h3 class="flex-1 text-gray-700 text-md font-normal leading-6 truncate mr-[8px]">
           {{ getComputed.path }}
         </h3>
         <div class="flex gap-2">
           <span
             v-if="getComputed.visibility"
-            class="px-[8px] py-[3px] flex items-center justify-center border rounded-md text-[#344054] text-[12px]"
+            class="px-[8px] py-[3px] flex items-center justify-center border rounded-md text-gray-700 text-[12px]"
             >{{ getComputed.visibility }}</span
           >
           <AppStatus
@@ -23,7 +23,7 @@
         </div>
       </div>
     </div>
-    <div class="text-sm leading-snug text-[#667085] flex justify-between">
+    <div class="text-sm leading-snug text-gray-500 flex justify-between">
       <p>
         <span class="mr-2">{{ repo.path.split('/')[0] }}</span>
         <span class="mr-2">·</span>
@@ -54,7 +54,7 @@
       >
         <template #reference>
           <p
-            class="max-w-full h-[36px] text-[#606266] text-sm overflow-hidden text-ellipsis line-clamp-2"
+            class="max-w-full h-[36px] text-gray-500 text-sm overflow-hidden text-ellipsis line-clamp-2"
           >
             {{ repo.description }}
           </p>
diff --git a/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue b/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue
index e6633867f..25367ab44 100644
--- a/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue
+++ b/frontend/src/components/application_spaces/ApplicationSpaceSettings.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="deployFailed"
-    class="flex gap-[8px] mt-[32px] mb-[24px] p-[16px] border border-[#D0D5DD] rounded-[12px] shadow-xs">
+    class="flex gap-[8px] mt-[32px] mb-[24px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
     <svg
       xmlns="http://www.w3.org/2000/svg"
       width="20"
@@ -26,14 +26,14 @@
       </defs>
     </svg>
     <div>
-      <h3 class="text-[#475467] text-[14px] font-[500]">
+      <h3 class="text-gray-600 text-[14px] font-[500]">
         {{ $t('application_spaces.errorPage.errorAlert') }}
       </h3>
-      <p class="text-[#475467] text-[14px]">
+      <p class="text-gray-600 text-[14px]">
         {{ $t('application_spaces.errorPage.errorAlertDesc') }}
       </p>
       <p
-        class="text-[#223B99] font-[400] text-[12px] mt-[12px] cursor-pointer"
+        class="text-brand-700 font-[400] text-[12px] mt-[12px] cursor-pointer"
         @click="showErrorLogs">
         {{ $t('application_spaces.errorPage.showErrorLogs') }}
       </p>
@@ -41,19 +41,19 @@
   </div>
 
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
     <!-- cloud resource -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.cloudResource') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.cloudResourceDesc') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.edit.currentCloudResource') }}
         </p>
         <el-select
@@ -78,7 +78,7 @@
     <!-- 暂停 Space -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.stopSpace') }}
         </div>
       </div>
@@ -106,7 +106,7 @@
     <!-- 重启 Space -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.restartSpace') }}
         </div>
       </div>
@@ -125,19 +125,19 @@
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.name') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.nameTips') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.namespaceName') }}
         </p>
         <div
-          class="w-[512px] sm:w-full rounded-[8px] bg-[#F9FAFB] px-[14px] py-[10px] border">
+          class="w-[512px] sm:w-full rounded-[8px] bg-gray-50 px-[14px] py-[10px] border">
           {{ applicationSpacePath }}
         </div>
       </div>
@@ -148,10 +148,10 @@
     <!-- 更新应用空间别名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.nickname') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.tips') }}
         </div>
       </div>
@@ -174,10 +174,10 @@
     <!-- 更新应用空间简介 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.desc') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.tips2') }}
         </div>
       </div>
@@ -201,10 +201,10 @@
     <!-- 修改可见性 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#0a0d12] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.changeVisibility') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.statusText') }}
           <span class="text-black font-semibold"
             >[{{
@@ -219,7 +219,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.edit.visibility') }}
         </p>
         <el-select
@@ -242,7 +242,7 @@
     <!-- cover image -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.replaceCoverImage') }}
         </div>
       </div>
@@ -286,24 +286,24 @@
     <!-- 删除应用空间 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('application_spaces.edit.del') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.delTips') }}
           <span class="text-black font-medium">{{ $t('application_spaces.edit.canNot') }}</span>
           {{ $t('application_spaces.edit.delTips2') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('application_spaces.edit.delTips3') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('application_spaces.edit.enterPls') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('application_spaces.edit.sureDel') }}
         </div>
       </div>
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('application_spaces.namespaceName') }}
         </p>
         <el-input
@@ -315,11 +315,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === applicationSpacePath
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave">
@@ -676,14 +676,14 @@
         if (this.delDesc !== '') {
           document
             .getElementById('confirmDelete')
-            .classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+            .classList.replace('bg-error-600', 'bg-error-700')
         }
       },
 
       handleMouseLeave() {
         document
           .getElementById('confirmDelete')
-          .classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+          .classList.replace('bg-error-700', 'bg-error-600')
       },
 
       showErrorLogs() {
diff --git a/frontend/src/components/application_spaces/BuildAndErrorPage.vue b/frontend/src/components/application_spaces/BuildAndErrorPage.vue
index 03b3bd765..18f0417bf 100644
--- a/frontend/src/components/application_spaces/BuildAndErrorPage.vue
+++ b/frontend/src/components/application_spaces/BuildAndErrorPage.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="h-[50vh] py-[32px] flex flex-col items-center justify-center sm:px-[20px]">
     <p v-if="['Building','Deploying','Startup'].includes(appStatus)"
-       class="text-[#6B7280] text-[16px]"
+       class="text-gray-700 text-[16px]"
     >
        {{ $t('application_spaces.buildDesc') }}
     </p>
 
     <p v-if="['DeployFailed','BuildingFailed','RuntimeError'].includes(appStatus)"
-       class="text-[#6B7280] text-[16px]"
+       class="text-gray-700 text-[16px]"
     >
        {{ $t('application_spaces.errorDesc') }}
        <p v-if="canWrite"
-          class="text-[#223B99] font-[400] text-[12px] mt-[12px] cursor-pointer"
+          class="text-brand-700 font-[400] text-[12px] mt-[12px] cursor-pointer"
           @click="showLogs"
        >
          {{ $t('application_spaces.errorPage.showErrorLogs') }}
diff --git a/frontend/src/components/application_spaces/BuildStatus.vue b/frontend/src/components/application_spaces/BuildStatus.vue
index b3c7c90ce..223cf6d5c 100644
--- a/frontend/src/components/application_spaces/BuildStatus.vue
+++ b/frontend/src/components/application_spaces/BuildStatus.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-[#99AFFF] bg-[#CED8FF] rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-brand-200 bg-brand-50 rounded-[6px] py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#4D6AD6"/>
     </svg>
-    <p class="text-[12px] text-[#223B99] font-[400] leading-[18px]"> {{ statusName }} </p>
+    <p class="text-[12px] text-brand-700 font-[400] leading-[18px]"> {{ statusName }} </p>
   </div>
 </template>
 
diff --git a/frontend/src/components/application_spaces/ErrorStatus.vue b/frontend/src/components/application_spaces/ErrorStatus.vue
index a119093d0..e37dfc243 100644
--- a/frontend/src/components/application_spaces/ErrorStatus.vue
+++ b/frontend/src/components/application_spaces/ErrorStatus.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-[#FECDCA] bg-[#FEF3F2] rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-error-200 bg-error-50] rounded-[6px] py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#F04438"/>
     </svg>
-    <p class="text-[12px] text-[#B42318] font-[400] leading-[18px]"> {{ statusName }} </p>
+    <p class="text-[12px] text-error-700 font-[400] leading-[18px]"> {{ statusName }} </p>
   </div>
 </template>
 
diff --git a/frontend/src/components/application_spaces/GradioInitializeGuide.vue b/frontend/src/components/application_spaces/GradioInitializeGuide.vue
index b53c848f7..f1cd86c67 100644
--- a/frontend/src/components/application_spaces/GradioInitializeGuide.vue
+++ b/frontend/src/components/application_spaces/GradioInitializeGuide.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="sm:px-[20px]">
-    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-[#D0D5DD] rounded-[12px] shadow-xs">
+    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
       <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
         <g clip-path="url(#clip0_8790_36855)">
           <path d="M6.24984 9.99984L8.74984 12.4998L13.7498 7.49984M18.3332 9.99984C18.3332 14.6022 14.6022 18.3332 9.99984 18.3332C5.39746 18.3332 1.6665 14.6022 1.6665 9.99984C1.6665 5.39746 5.39746 1.6665 9.99984 1.6665C14.6022 1.6665 18.3332 5.39746 18.3332 9.99984Z" stroke="#079455" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
@@ -12,11 +12,11 @@
         </defs>
       </svg>
       <div>
-        <h3 class="text-[#475467] text-[14px] font-[500]">{{ $t('application_spaces.gradioGuide.notice') }}</h3>
-        <p class="text-[#A07731] text-[14px]">{{ $t('application_spaces.gradioGuide.noticeDesc') }}</p>
+        <h3 class="text-gray-600 text-[14px] font-[500]">{{ $t('application_spaces.gradioGuide.notice') }}</h3>
+        <p class="text-gray-600 text-[14px]">{{ $t('application_spaces.gradioGuide.noticeDesc') }}</p>
       </div>
     </div>
-    <h3 class="my-[24px] text-[#475467] font-[500]">1. {{ $t('application_spaces.gradioGuide.cloneTitle') }}</h3>
+    <h3 class="my-[24px] text-gray-600 font-[500]">1. {{ $t('application_spaces.gradioGuide.cloneTitle') }}</h3>
     <div>
       <p class="">
         <span class="px-[12px] py-[8px] cursor-pointer"
@@ -46,21 +46,21 @@
         <markdown-viewer :content="sshCloneCodeMarkdown"></markdown-viewer>
       </div>
     </div>
-    <h3 class="my-[24px] text-[#475467] font-[500]">2. {{ $t('application_spaces.gradioGuide.createTitle') }}</h3>
+    <h3 class="my-[24px] text-gray-600 font-[500]">2. {{ $t('application_spaces.gradioGuide.createTitle') }}</h3>
     <markdown-viewer :content="appPyCodeMarkdown"></markdown-viewer>
-    <h3 class="my-[24px] text-[#475467] font-[500]">3. {{ $t('application_spaces.gradioGuide.submitTitle') }}</h3>
+    <h3 class="my-[24px] text-gray-600 font-[500]">3. {{ $t('application_spaces.gradioGuide.submitTitle') }}</h3>
     <markdown-viewer :content="pushCodeMarkdown"></markdown-viewer>
-    <p class="text-[#667085] text-[16px] font-[400] my-[24px]">{{ $t('application_spaces.gradioGuide.successNotes') }}</p>
-    <div class="text-[16px] text-[#667085] border border-[#D0D5DD] rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
+    <p class="text-gray-500 text-[16px] font-[400] my-[24px]">{{ $t('application_spaces.gradioGuide.successNotes') }}</p>
+    <div class="text-[16px] text-gray-500 border border-gray-300 rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
       <div>
-        <h3 class="text-[#101828]"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
+        <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes1') }}</p>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes2') }}</p>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes3') }}</p>
       </div>
       <br />
       <div>
-        <h3 class="text-[#101828]"> {{ $t('application_spaces.gradioGuide.docNotesTitle') }} </h3>
+        <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.docNotesTitle') }} </h3>
         <a href="https://opencsg.com/docs/Space/space_intro" target="_blank">{{ $t('application_spaces.gradioGuide.docNotes1') }}</a>
       </div>
     </div>
diff --git a/frontend/src/components/application_spaces/NewApplicationSpace.vue b/frontend/src/components/application_spaces/NewApplicationSpace.vue
index c8b8481f8..fc70c96af 100644
--- a/frontend/src/components/application_spaces/NewApplicationSpace.vue
+++ b/frontend/src/components/application_spaces/NewApplicationSpace.vue
@@ -7,13 +7,13 @@
         height="36"
       />
     </div>
-    <h3 class="text-[#303133] text-xl font-semibold mt-6 mb-3">
+    <h3 class="text-gray-700 text-xl font-semibold mt-6 mb-3">
       {{ t('application_spaces.new.title') }}
     </h3>
-    <p class="text-[#606266] text-base font-medium md:text-center">
+    <p class="text-gray-500 text-base font-medium md:text-center">
       {{ t('application_spaces.new.subTitle1') }}
     </p>
-    <p class="text-[#606266] text-base font-medium md:text-center">
+    <p class="text-gray-500 text-base font-medium md:text-center">
       {{ $t('application_spaces.new.subTitle2') }}
     </p>
     <div class="mt-9">
@@ -178,7 +178,7 @@
           :label="$t('application_spaces.new.sdk')"
           prop="sdk"
         >
-          <p class="text-[#475467] mb-[24px] font-light">
+          <p class="text-gray-600 mb-[24px] font-light">
             {{ $t('application_spaces.new.sdkDesc') }}
           </p>
           <el-radio-group
@@ -296,10 +296,10 @@
               :disabled="!item.is_available"
             />
           </el-select>
-          <p class="text-[#475467] mt-[8px] font-light">
+          <p class="text-gray-600 mt-[8px] font-light">
             {{ $t('application_spaces.new.cloudResourceDesc1') }}
           </p>
-          <p class="text-[#475467] font-light">
+          <p class="text-gray-600 font-light">
             {{ $t('application_spaces.new.cloudResourceDesc2') }}
           </p>
         </el-form-item>
@@ -312,7 +312,7 @@
           /> 
         </el-form-item>
         <p
-          class="mb-[18px] rounded bg-[#F0F3FF] text-[#4D6AD6] text-[13px] py-[9px] px-4"
+          class="mb-[18px] rounded bg-brand-25] text-brand-500 text-[13px] py-[9px] px-4"
         >
           {{ t('application_spaces.new.notes') }}
         </p>
@@ -320,7 +320,7 @@
           <el-form-item>
             <el-button
               :loading="loading"
-              class="!text-center !h-9 !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]"
+              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
               @click="handleSubmit"
             >
               {{ t('application_spaces.new.create') }}
diff --git a/frontend/src/components/application_spaces/SpaceRelationsCard.vue b/frontend/src/components/application_spaces/SpaceRelationsCard.vue
index d75095ca0..a0ca7f489 100644
--- a/frontend/src/components/application_spaces/SpaceRelationsCard.vue
+++ b/frontend/src/components/application_spaces/SpaceRelationsCard.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="p-[16px] border-t border-[#EBEEF5]">
+  <div class="p-[16px] border-t border-gray-200">
     <h3 class="flex items-center gap-[8px]">
       <SvgIcon name="spaces" width="18px" height="18px" />
-      <span class="font-[500] text-[#344054] text-[16px] leading-[24px]"> {{ $t('spaces.using') }} </span>
-      <span class="text-[#344054]"> {{ namespacePath }} </span>
-      <span class="text-[#667085]"> {{ spaces.length }} </span>
+      <span class="font-[500] text-gray-700 text-[16px] leading-[24px]"> {{ $t('spaces.using') }} </span>
+      <span class="text-gray-700"> {{ namespacePath }} </span>
+      <span class="text-gray-500"> {{ spaces.length }} </span>
     </h3>
     <div class="mt-[16px] flex gap-[12px]">
       <a v-for="space in spaces" :href="`/spaces/${space.path}`">
diff --git a/frontend/src/components/application_spaces/StoppedPage.vue b/frontend/src/components/application_spaces/StoppedPage.vue
index fbfce7150..96f8eb067 100644
--- a/frontend/src/components/application_spaces/StoppedPage.vue
+++ b/frontend/src/components/application_spaces/StoppedPage.vue
@@ -1,26 +1,26 @@
 <template>
   <div class="h-[50vh] py-[32px] flex flex-col items-center justify-center sm:px-[20px]">
     <p v-if="appStatus === 'Stopped'"
-       class="text-[#6B7280] text-[16px]"
+       class="text-gray-700 text-[16px]"
     >
        {{ $t('application_spaces.stoppedDesc') }}
    </p>
 
     <p v-if="appStatus === 'Sleeping'"
-       class="text-[#6B7280] text-[16px]"
+       class="text-gray-700 text-[16px]"
     >
        {{ $t('application_spaces.sleepingDesc') }}
     </p>
 
     <button v-if="isStopped && canWrite"
-            class="border border-[#3250BD] bg-[#3250BD] rounded-[8px] shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
+            class="border border-brand-600 bg-brand-600 rounded-[8px] shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
             @click="startSpace"
     >
       {{ $t('application_spaces.restart') }}
     </button>
 
     <button v-if="isSleeping"
-            class="border border-[#3250BD] bg-[#3250BD] rounded-[8px] shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
+            class="border border-brand-600 bg-brand-600 rounded-[8px] shadow-xs px-[16px] py-[10px] text-white font-[500] text-[16px] leading-[24px] mt-[24px]"
             @click="wakeupSpace"
     >
       {{ $t('application_spaces.wakeup') }}
diff --git a/frontend/src/components/application_spaces/StreamlitInitializeGuide.vue b/frontend/src/components/application_spaces/StreamlitInitializeGuide.vue
index 43c391a10..b35c6ee5c 100644
--- a/frontend/src/components/application_spaces/StreamlitInitializeGuide.vue
+++ b/frontend/src/components/application_spaces/StreamlitInitializeGuide.vue
@@ -1,17 +1,17 @@
 <template>
   <div class="sm:px-[20px]">
-    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-[#D0D5DD] rounded-[12px] shadow-xs">
+    <div class="flex gap-[8px] mt-[32px] p-[16px] border border-gray-300 rounded-[12px] shadow-xs">
       <SvgIcon name="spaces"/>
       <div>
-        <h3 class="text-[#475467] text-[14px] font-[500]">
+        <h3 class="text-gray-600 text-[14px] font-[500]">
           {{ $t('application_spaces.streamlitGuide.notice') }}
         </h3>
-        <p class="text-[#A07731] text-[14px]">
+        <p class="text-gray-600 text-[14px]">
           {{ $t('application_spaces.gradioGuide.noticeDesc') }}
         </p>
       </div>
     </div>
-    <h3 class="my-[24px] text-[#475467] font-[500]">
+    <h3 class="my-[24px] text-gray-600 font-[500]">
       1. {{ $t('application_spaces.gradioGuide.cloneTitle') }}
     </h3>
     <div>
@@ -44,27 +44,27 @@
         <MarkdownViewer :content="sshCloneCodeMarkdown"></MarkdownViewer>
       </div>
     </div>
-    <h3 class="my-[24px] text-[#475467] font-[500]">
+    <h3 class="my-[24px] text-gray-600 font-[500]">
       2. {{ $t('application_spaces.streamlitGuide.createTitle') }}
     </h3>
     <MarkdownViewer :content="appPyCodeMarkdown"></MarkdownViewer>
-    <h3 class="my-[24px] text-[#475467] font-[500]">
+    <h3 class="my-[24px] text-gray-600 font-[500]">
       3. {{ $t('application_spaces.gradioGuide.submitTitle') }}
     </h3>
     <MarkdownViewer :content="pushCodeMarkdown"></MarkdownViewer>
-    <p class="text-[#667085] text-[16px] font-[400] my-[24px]">
+    <p class="text-gray-500 text-[16px] font-[400] my-[24px]">
       {{ $t('application_spaces.gradioGuide.successNotes') }}
     </p>
-    <div class="text-[16px] text-[#667085] border border-[#D0D5DD] rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
+    <div class="text-[16px] text-gray-500 border border-gray-300 rounded-[8px] shadow-xs py-[12px] px-[14px] mb-[32px]">
       <div>
-        <h3 class="text-[#101828]"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
+        <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.dependencyNotesTitle') }} </h3>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes1') }}</p>
         <p>{{ $t('application_spaces.gradioGuide.dependencyNotes2') }}</p>
         <p>{{ $t('application_spaces.streamlitGuide.dependencyNotes3') }}</p>
       </div>
       <br />
       <div>
-        <h3 class="text-[#101828]"> {{ $t('application_spaces.gradioGuide.docNotesTitle') }} </h3>
+        <h3 class="text-gray-900"> {{ $t('application_spaces.gradioGuide.docNotesTitle') }} </h3>
         <a href="https://opencsg.com/docs/Space/space_intro" target="_blank">
           {{ $t('application_spaces.streamlitGuide.docNotes1') }}
         </a>
diff --git a/frontend/src/components/application_spaces/SuccessStatus.vue b/frontend/src/components/application_spaces/SuccessStatus.vue
index 4075d041f..a579f122b 100644
--- a/frontend/src/components/application_spaces/SuccessStatus.vue
+++ b/frontend/src/components/application_spaces/SuccessStatus.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-[#ABEFC6] bg-[#ECFDF3] rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-success-200 bg-success-100 rounded-[6px] py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#17B26A"/>
     </svg>
-    <p class="text-[12px] text-[#067647] font-[400] leading-[18px]"> {{ statusName }} </p>
+    <p class="text-[12px] text-success-700 font-[400] leading-[18px]"> {{ statusName }} </p>
   </div>
 </template>
 
diff --git a/frontend/src/components/application_spaces/WarningStatus.vue b/frontend/src/components/application_spaces/WarningStatus.vue
index aec7998db..000457221 100644
--- a/frontend/src/components/application_spaces/WarningStatus.vue
+++ b/frontend/src/components/application_spaces/WarningStatus.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="flex items-center gap-[6px] border border-[#FEDF89] bg-[#FFFAEB] rounded-[6px] py-[2px] px-[8px]">
+  <div class="flex items-center gap-[6px] border border-warning-200 bg-warning-50 rounded-[6px] py-[2px] px-[8px]">
     <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" viewBox="0 0 8 8" fill="none">
       <circle cx="4" cy="4" r="3" fill="#F79009"/>
     </svg>
-    <p class="text-[12px] text-[#B54708] font-[400] leading-[18px]"> {{ statusName }} </p>
+    <p class="text-[12px] text-warning-700 font-[400] leading-[18px]"> {{ statusName }} </p>
   </div>
 </template>
 
diff --git a/frontend/src/components/codes/CodeRelationsCard.vue b/frontend/src/components/codes/CodeRelationsCard.vue
index 86bb85196..4fd840fe0 100644
--- a/frontend/src/components/codes/CodeRelationsCard.vue
+++ b/frontend/src/components/codes/CodeRelationsCard.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="p-[16px] border-t border-[#EBEEF5]">
+  <div class="p-[16px] border-t border-gray-200">
     <h3 class="flex items-center gap-[8px]">
       <SvgIcon name="codes" width="18px" height="18px" />
-      <span class="font-[500] text-[#344054] text-[16px] leading-[24px]"> {{ $t('codes.codesUsedToTrain') }} </span>
-      <span class="text-[#344054]"> {{ namespacePath }} </span>
+      <span class="font-[500] text-gray-700 text-[16px] leading-[24px]"> {{ $t('codes.codesUsedToTrain') }} </span>
+      <span class="text-gray-700"> {{ namespacePath }} </span>
     </h3>
     <div class="mt-[16px] flex flex-col gap-[12px]">
       <RepoItem v-for="code in codes" :repo="code" repoType="code" cardType="relations" />
diff --git a/frontend/src/components/codes/CodeSettings.vue b/frontend/src/components/codes/CodeSettings.vue
index 1aa458ec8..4f5ed0e48 100644
--- a/frontend/src/components/codes/CodeSettings.vue
+++ b/frontend/src/components/codes/CodeSettings.vue
@@ -1,22 +1,22 @@
 <template>
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('codes.codeName') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('codes.codeNameTips') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('codes.namespaceCodeName') }}
         </p>
         <div
-          class="w-[512px] sm:w-full rounded-[8px] bg-[#F9FAFB] px-[14px] py-[10px] border">
+          class="w-[512px] sm:w-full rounded-[8px] bg-gray-50 px-[14px] py-[10px] border">
           {{ codePath }}
         </div>
       </div>
@@ -27,10 +27,10 @@
     <!-- 更新别名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('codes.codeNickName') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('codes.edit.tips') }}
         </div>
       </div>
@@ -53,10 +53,10 @@
     <!-- 更新简介 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('codes.codeDesc') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('codes.edit.tips2') }}
         </div>
       </div>
@@ -80,10 +80,10 @@
     <!-- 修改可见性 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('codes.edit.changeVisibility') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('codes.edit.statusText') }}
           <span class="text-black font-semibold"
             >[{{
@@ -98,7 +98,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('codes.edit.codeVisibility') }}
         </p>
         <el-select
@@ -121,24 +121,24 @@
     <!-- 删除 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('codes.edit.delCode') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('codes.edit.delTips') }}
           <span class="text-black font-medium">{{ $t('codes.edit.canNot') }}</span>
           {{ $t('codes.edit.delTips2') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('codes.edit.delTips3') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('codes.edit.enterPls') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('codes.edit.sureDel') }}
         </div>
       </div>
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[#344054] text-[14px]">{{ $t('codes.codeName') }}</p>
+        <p class="text-gray-700 text-[14px]">{{ $t('codes.codeName') }}</p>
         <el-input
           v-model="delDesc"
           clearable
@@ -148,11 +148,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === codePath
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave">
@@ -327,13 +327,13 @@
         if (this.delDesc !== '') {
           document
             .getElementById('confirmDelete')
-            .classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+            .classList.replace('bg-error-600', 'bg-error-700')
         }
       },
       handleMouseLeave() {
         document
           .getElementById('confirmDelete')
-          .classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+          .classList.replace('bg-error-700', 'bg-error-600')
       }
     }
   }
diff --git a/frontend/src/components/codes/NewCode.vue b/frontend/src/components/codes/NewCode.vue
index 4bc8c25f4..70030bfba 100644
--- a/frontend/src/components/codes/NewCode.vue
+++ b/frontend/src/components/codes/NewCode.vue
@@ -7,10 +7,10 @@
         width="37"
       />
     </div>
-    <h3 class="text-[#303133] text-xl font-semibold mt-6 mb-3">
+    <h3 class="text-gray-700 text-xl font-semibold mt-6 mb-3">
       {{ t('codes.newCode.title') }}
     </h3>
-    <p class="text-[#606266] text-base font-medium md:text-center">
+    <p class="text-gray-500 text-base font-medium md:text-center">
       {{ t('codes.newCode.titleDesc') }}
     </p>
     <div class="mt-9">
@@ -133,7 +133,7 @@
           />
         </el-form-item>
         <p
-          class="mb-[18px] rounded bg-[#F0F3FF] text-[#4D6AD6] text-[13px] py-[9px] px-4"
+          class="mb-[18px] rounded bg-brand-25] text-brand-500 text-[13px] py-[9px] px-4"
         >
           {{ t('codes.newCode.tips') }}
         </p>
@@ -141,7 +141,7 @@
           <el-form-item>
             <el-button
               :loading="loading"
-              class="!text-center !h-9 !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]"
+              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
               @click="handleSubmit"
             >
               {{ t('codes.newCode.createCode') }}
diff --git a/frontend/src/components/collections/AddToCollections.vue b/frontend/src/components/collections/AddToCollections.vue
index b7b47d612..b2c880ff6 100644
--- a/frontend/src/components/collections/AddToCollections.vue
+++ b/frontend/src/components/collections/AddToCollections.vue
@@ -4,7 +4,7 @@
   >
     <div
       @click="openAddCollections"
-      class="flex max-w-[max-content] px-3 py-[5px] text-[14px] leading-[20px] bg-white border border-[#D0D5DD] justify-center items-center gap-[6px] rounded-lg shadow-sm hover:bg-slate-50 cursor-pointer"
+      class="flex max-w-[max-content] px-3 py-[5px] text-[14px] leading-[20px] bg-white border border-gray-300 justify-center items-center gap-[6px] rounded-lg shadow-sm hover:bg-slate-50 cursor-pointer"
     >
       <SvgIcon
         name="collections"
@@ -23,7 +23,7 @@
       <template #header="{ close }">
         <div class="flex justify-between">
           <div
-            class="rounded-full px-[12px] py-[12px] rounded-[10px] border-[2px] bg-[#DCFAE6] border-[8px] border-[#ECFDF3]"
+            class="rounded-full px-[12px] py-[12px] rounded-[10px] border-[2px] bg-success-100 border-[8px] border-success-50"
           >
             <SvgIcon name="check_circle" />
           </div>
@@ -37,7 +37,7 @@
         <div class="mt-[20px]">
           <div>
             <div class="mb-[20px]">
-              <p class="text-[#344054] text-[14px] mb-[6px]">
+              <p class="text-gray-700 text-[14px] mb-[6px]">
                 {{ $t('collections.edit.addCollection') }}
               </p>
               <el-select
@@ -61,13 +61,13 @@
       <template #footer>
         <span class="flex justify-between gap-3 px-5">
           <div
-            class="w-[50%] active:outline active:outline-4 active:outline-[#EAECF0] hover:bg-[#F0F2F5] text-center py-[10px] px-4 border border-[#D0D5DD] cursor-pointer shadow-xs rounded-[8px]"
+            class="w-[50%] active:outline active:outline-4 active:outline-gray-200 hover:bg-gray-500 text-center py-[10px] px-4 border border-gray-300 cursor-pointer shadow-xs rounded-[8px]"
             @click="cancelAddCollections"
           >
             {{ $t('all.cancel') }}
           </div>
           <div
-            class="w-[50%] hover:bg-[#223B99] hover:border-[#223B99] active:outline active:outline-4 active:outline-[#D4DbF5] text-[#ffffff] text-center py-[10px] px-4 border border-[#3250BD] bg-[#3250BD] cursor-pointer shadow-xs rounded-[8px]"
+            class="w-[50%] hover:bg-brand-700 hover:border-brand-700 active:outline active:outline-4 active:outline-brand-600 text-white text-center py-[10px] px-4 border border-brand-600 bg-brand-600 cursor-pointer shadow-xs rounded-[8px]"
             @click="confirmAddCollections"
           >
             {{ $t('all.confirm') }}
diff --git a/frontend/src/components/collections/CollectionCards.vue b/frontend/src/components/collections/CollectionCards.vue
index 24459bf7e..f645cb993 100644
--- a/frontend/src/components/collections/CollectionCards.vue
+++ b/frontend/src/components/collections/CollectionCards.vue
@@ -7,18 +7,18 @@
       :style="generateGradientStyle(collection.theme)"
     >
       <div
-        class="active:outline active:outline-4 active:outline-[#EAECF0] hover:shadow-md px-4 pt-4 pb-2 w-full rounded-[12px] border border-[#EAECF0] cursor-pointer"
+        class="active:outline active:outline-4 active:outline-gray-200 hover:shadow-md px-4 pt-4 pb-2 w-full rounded-[12px] border border-gray-200 cursor-pointer"
         @click="goCollectionDetails(collection.id)"
       >
         <div class="flex justify-between">
-          <div class="text-[14px] leading-[20px] text-[#344054] text-ellipsis overflow-hidden whitespace-nowrap">
+          <div class="text-[14px] leading-[20px] text-gray-700 text-ellipsis overflow-hidden whitespace-nowrap">
             {{ collection.nickname || collection.name }}
           </div>
           <SvgIcon name="chevron_right" />
         </div>
         <div
           :title="collection.description"
-          class="overflow-hidden text-ellipsis line-clamp-2 text-[14px] leading-[20px] font-light text-[#475467] mb-2"
+          class="overflow-hidden text-ellipsis line-clamp-2 text-[14px] leading-[20px] font-light text-gray-600 mb-2"
         >
           {{ collection.description }}
         </div>
diff --git a/frontend/src/components/collections/CollectionIndex.vue b/frontend/src/components/collections/CollectionIndex.vue
index cda9d499a..735efce4f 100644
--- a/frontend/src/components/collections/CollectionIndex.vue
+++ b/frontend/src/components/collections/CollectionIndex.vue
@@ -13,7 +13,7 @@
           />
           <span> {{ $t('collections.collection') }} </span>
         </div>
-        <div class="text-[16px] leading-[24px] text-[#667085]">{{ $t('collections.title') }}</div>
+        <div class="text-[16px] leading-[24px] text-gray-500">{{ $t('collections.title') }}</div>
       </div>
       <div class="xl:mt-[16px]">
         <ElInput
@@ -41,7 +41,7 @@
       </div>
     </div>
     <div
-      class="flex gap-1 max-w-[max-content] px-2 rounded-[16px] border border-[#D5D9EB] text-[14px] leading-[20px] bg-[#F8F9FC] text-[#363F72]"
+      class="flex gap-1 max-w-[max-content] px-2 rounded-[16px] border border-gray-300 text-[14px] leading-[20px] bg-gray-25 text-brand-900"
     >
       <SvgIcon width="12px" height="12px" name="star" />
       {{ $t('collections.hot') }}
@@ -63,25 +63,25 @@
         />
       </div>
       <div class="flex flex-col justify-center items-center relative pt-[220px] md:pt-5">
-        <div class="border border-[#EAECF0] rounded-[10px] p-3 max-w-[max-content] mb-4">
+        <div class="border border-gray-200 rounded-[10px] p-3 max-w-[max-content] mb-4">
           <SvgIcon name="search" />
         </div>
         <div class="test-[16px] leading-[24px]">{{ $t('collections.noData') }}</div>
         <div
-          class="max-w-[300px] text-[#475467] text-[14px] text-center leading-[20px] font-light mb-6"
+          class="max-w-[300px] text-gray-600 text-[14px] text-center leading-[20px] font-light mb-6"
         >
           {{ $t('collections.noDataDesc') }}
         </div>
         <div class="flex gap-3">
           <div
-            class="flex px-4 py-[10px] border border-[#D0D5DD] justify-center items-center gap-1 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] cursor-pointer"
+            class="flex px-4 py-[10px] border border-gray-300 justify-center items-center gap-1 rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] cursor-pointer"
             @click="resetInput"
           >
             {{ $t('collections.cleanSearch') }}
           </div>
           <a
             href="/collections/new"
-            class="flex px-4 py-[10px] text-[#FFFFFF] border border-[#3250BD] justify-center items-center gap-[6px] rounded-lg bg-[#3250BD] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] cursor-pointer"
+            class="flex px-4 py-[10px] text-white border border-brand-600 justify-center items-center gap-[6px] rounded-lg bg-brand-600 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] cursor-pointer"
           >
             <SvgIcon name="plus" />
             {{ $t('collections.newCollection.title') }}
diff --git a/frontend/src/components/collections/CollectionsAddRepo.vue b/frontend/src/components/collections/CollectionsAddRepo.vue
index bbd410c1a..5a3b82983 100644
--- a/frontend/src/components/collections/CollectionsAddRepo.vue
+++ b/frontend/src/components/collections/CollectionsAddRepo.vue
@@ -3,7 +3,7 @@
     <div
       v-if="canManage"
       @click="dialogVisible = true"
-      class="flex px-4 py-[5px] text-[#FFFFFF] border border-[#3250BD] justify-center items-center gap-[6px] rounded-lg bg-[#3250BD] shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] cursor-pointer"
+      class="flex px-4 py-[5px] text-white border border-brand-600 justify-center items-center gap-[6px] rounded-lg bg-brand-600 shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] cursor-pointer"
     >
       <SvgIcon name="plus" />
       {{ $t('collections.edit.add') }}
@@ -18,7 +18,7 @@
       <template #header="{ close }">
         <div class="flex justify-between">
           <div
-            class="px-[12px] py-[12px] rounded-[10px] border-[2px] border-[#EAECF0]"
+            class="px-[12px] py-[12px] rounded-[10px] border-[2px] border-gray-200"
           >
             <SvgIcon name="collections" />
           </div>
@@ -32,7 +32,7 @@
         <div class="mt-[20px]">
           <div>
             <div class="mb-[20px]">
-              <p class="text-[#344054] text-[14px] mb-[6px]">
+              <p class="text-gray-700 text-[14px] mb-[6px]">
                 {{ $t('collections.edit.type') }}
               </p>
               <el-select
@@ -50,7 +50,7 @@
                 />
               </el-select>
             </div>
-            <p class="text-[#344054] text-[14px] mb-[6px]">
+            <p class="text-gray-700 text-[14px] mb-[6px]">
               {{ $t('collections.edit.name') }}
             </p>
             <el-select
@@ -75,13 +75,13 @@
       <template #footer>
         <span class="flex justify-between gap-3 px-5">
           <div
-            class="w-[50%] active:outline active:outline-4 active:outline-[#EAECF0] hover:bg-[#F0F2F5] text-center py-[10px] px-4 border border-[#D0D5DD] cursor-pointer shadow-xs rounded-[8px]"
+            class="w-[50%] active:outline active:outline-4 active:outline-gray-200 hover:bg-gray-500 text-center py-[10px] px-4 border border-gray-300 cursor-pointer shadow-xs rounded-[8px]"
             @click="dialogVisible = false"
           >
             {{ $t('all.cancel') }}
           </div>
           <div
-            class="w-[50%] hover:bg-[#223B99] hover:border-[#223B99] active:outline active:outline-4 active:outline-[#D4DbF5] text-[#ffffff] text-center py-[10px] px-4 border border-[#3250BD] bg-[#3250BD] cursor-pointer shadow-xs rounded-[8px]"
+            class="w-[50%] hover:bg-brand-700 hover:border-brand-700 active:outline active:outline-4 active:outline-brand-600 text-white text-center py-[10px] px-4 border border-brand-600 bg-brand-600 cursor-pointer shadow-xs rounded-[8px]"
             @click="confirmAddRepo"
           >
             {{ $t('all.confirm') }}
diff --git a/frontend/src/components/collections/CollectionsDetail.vue b/frontend/src/components/collections/CollectionsDetail.vue
index ad37610a0..bfb2602a4 100644
--- a/frontend/src/components/collections/CollectionsDetail.vue
+++ b/frontend/src/components/collections/CollectionsDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full bg-[#FCFCFD] pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
+    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto"
   >
     <div class="mx-auto max-w-[1280px]">
       <repo-header
@@ -52,7 +52,7 @@
               class="flex flex-col justify-center items-center relative pt-[220px] md:pt-5"
             >
               <div
-                class="border border-[#EAECF0] rounded-[10px] p-3 max-w-[max-content] mb-4"
+                class="border border-gray-200 rounded-[10px] p-3 max-w-[max-content] mb-4"
               >
                 <SvgIcon
                   name="collections"
@@ -63,7 +63,7 @@
                 {{ $t('collections.details.emptyCollection') }}
               </div>
               <div
-                class="max-w-[300px] text-[#475467] text-[14px] text-center leading-[20px] font-light mb-6"
+                class="max-w-[300px] text-gray-600 text-[14px] text-center leading-[20px] font-light mb-6"
                 :class="canManage ? '' : 'hidden'"
               >
                 {{ $t('collections.details.tips') }}
diff --git a/frontend/src/components/collections/CollectionsRepoList.vue b/frontend/src/components/collections/CollectionsRepoList.vue
index 42a854f76..281a253c2 100644
--- a/frontend/src/components/collections/CollectionsRepoList.vue
+++ b/frontend/src/components/collections/CollectionsRepoList.vue
@@ -2,14 +2,14 @@
   <div class="sm:w-[100%] sm:mt-[36px] pt-4 pb-8 px-2">
     <!-- models -->
     <div>
-      <h3 class="text-[20px] text-[#303133] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon
           name="models"
           width="18"
           height="18"
         />
         <span>{{ $t('organization.model') }}</span>
-        <span class="text-[#98A2B3] text-[16px] leading-[24px]">{{ models.length }}</span>
+        <span class="text-gray-400 text-[16px] leading-[24px]">{{ models.length }}</span>
       </h3>
       <div
         v-if="hasModels"
@@ -35,14 +35,14 @@
 
     <!-- datasets -->
     <div class="mt-[32px]">
-      <h3 class="text-[20px] text-[#303133] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon
           name="datasets"
           width="18"
           height="18"
         />
         <span>{{ $t('organization.dataset') }}</span>
-        <span class="text-[#98A2B3] text-[16px] leading-[24px]">{{ datasets.length }}</span>
+        <span class="text-gray-400 text-[16px] leading-[24px]">{{ datasets.length }}</span>
       </h3>
       <div
         v-if="hasDatasets"
@@ -68,14 +68,14 @@
 
     <!-- code repo -->
     <div class="mt-[32px]">
-      <h3 class="text-[20px] text-[#303133] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon
           name="codes"
           width="18"
           height="18"
         />
         <span>{{ $t('organization.code') }}</span>
-        <span class="text-[#98A2B3] text-[16px] leading-[24px]">{{ codes.length }}</span>
+        <span class="text-gray-400 text-[16px] leading-[24px]">{{ codes.length }}</span>
       </h3>
       <div
         v-if="hasCodes"
@@ -101,14 +101,14 @@
 
     <!-- spaces -->
     <div class="mt-[32px]">
-      <h3 class="text-[20px] text-[#303133] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon
           name="spaces"
           width="18"
           height="18"
         />
         <span>{{ $t('organization.space') }}</span>
-        <span class="text-[#98A2B3] text-[16px] leading-[24px]">{{ spaces.length }}</span>
+        <span class="text-gray-400 text-[16px] leading-[24px]">{{ spaces.length }}</span>
       </h3>
       <div
         v-if="hasSpaces"
diff --git a/frontend/src/components/collections/CollectionsSettings.vue b/frontend/src/components/collections/CollectionsSettings.vue
index 7751830b8..717378b2b 100644
--- a/frontend/src/components/collections/CollectionsSettings.vue
+++ b/frontend/src/components/collections/CollectionsSettings.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]"
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]"
   >
     <!-- collection name -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('collections.edit.cnName') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('collections.edit.cnNameTips') }}
         </div>
       </div>
@@ -31,10 +31,10 @@
     <!-- collection desc -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('collections.edit.desc') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('collections.edit.descTips') }}
         </div>
       </div>
@@ -57,10 +57,10 @@
     <!-- theme -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('collections.edit.theme') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('collections.edit.upDateTheme') }}
         </div>
       </div>
@@ -86,8 +86,8 @@
     <!-- add project -->
     <!-- <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">增加项目</div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">增加更多项目到集合</div>
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">增加项目</div>
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">增加更多项目到集合</div>
       </div>
       <div class="flex flex-col gap-[6px]">
         <el-select
@@ -111,10 +111,10 @@
     <!-- Change Visibility -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('collections.edit.changeVisibility') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('collections.edit.statusText') }}
           <span class="text-black font-semibold"
             >[{{ visibility ? $t('all.private') : $t('all.public') }}]</span
@@ -125,7 +125,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">{{ $t('collections.edit.collectionVisibility') }}</p>
+        <p class="text-gray-700 text-[14px]">{{ $t('collections.edit.collectionVisibility') }}</p>
         <el-select
           v-model="visibility"
           @change="changeVisibility"
@@ -147,11 +147,11 @@
     <!-- 删除应用空间 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('collections.edit.delCollection') }}
         </div>
         
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('collections.edit.delTips') }}
           <span class="text-black font-medium">{{ $t('collections.edit.canNot') }}</span>
           {{ $t('collections.edit.delTips2') }}
@@ -159,7 +159,7 @@
           {{ $t('collections.edit.delTips3') }}
         </div>
 
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('all.enterPls') }}
           <span class="text-black font-medium break-words">
             {{ `${collection.username}/${collection.name}` }}
@@ -168,7 +168,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[#344054] text-[14px]">{{ $t('collections.collectionName') }}</p>
+        <p class="text-gray-700 text-[14px]">{{ $t('collections.collectionName') }}</p>
         <el-input
           v-model="delDesc"
           clearable
@@ -179,11 +179,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === `${collection.username}/${collection.name}`
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave"
@@ -284,12 +284,12 @@
 
   const handleMouseOver = () => {
     if (delDesc.value !== '') {
-      document.getElementById('confirmDelete').classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+      document.getElementById('confirmDelete').classList.replace('bg-error-600', 'bg-error-700')
     }
   }
 
   const handleMouseLeave = () => {
-    document.getElementById('confirmDelete').classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+    document.getElementById('confirmDelete').classList.replace('bg-error-700', 'bg-error-600')
   }
 
   const clickDelete = () => {
diff --git a/frontend/src/components/collections/NewCollection.vue b/frontend/src/components/collections/NewCollection.vue
index c7e4f0d4f..9d1044605 100644
--- a/frontend/src/components/collections/NewCollection.vue
+++ b/frontend/src/components/collections/NewCollection.vue
@@ -3,10 +3,10 @@
     <div>
       <SvgIcon name="new_collection" />
     </div>
-    <h3 class="text-[#303133] text-xl font-medium mt-6 mb-2">
+    <h3 class="text-gray-700 text-xl font-medium mt-6 mb-2">
       {{ $t('collections.newCollection.title') }}
     </h3>
-    <p class="text-[#606266] text-base font-normal md:text-center">
+    <p class="text-gray-500 text-base font-normal md:text-center">
       {{ $t('collections.newCollection.titleDesc') }}
     </p>
     <div class="mt-9">
@@ -20,7 +20,7 @@
         <!-- First row -->
         <div class="w-full flex sm:flex-col gap-2 mb-9 md:gap-9">
           <div>
-            <p class="text-[#303133] text-sm mb-2">{{ $t('collections.newCollection.owner') }}</p>
+            <p class="text-gray-700 text-sm mb-2">{{ $t('collections.newCollection.owner') }}</p>
             <el-form-item prop="owner">
               <el-select
                 v-model="dataForm.owner"
@@ -39,10 +39,10 @@
           </div>
           <div class="md:hidden">
             <p class="h-8"></p>
-            <p class="text-[#909399] text-xl font-light">/</p>
+            <p class="text-gray-500 text-xl font-light">/</p>
           </div>
           <div class="flex-1">
-            <p class="text-[#303133] text-sm mb-2">
+            <p class="text-gray-700 text-sm mb-2">
               {{ $t('collections.newCollection.collectionName') }}
             </p>
             <el-form-item prop="title">
@@ -61,7 +61,7 @@
         <!-- Second row -->
         <div class="w-full flex sm:flex-col gap-2 mb-9 md:gap-9">
           <div class="flex-1">
-            <p class="text-[#303133] text-sm mb-2">
+            <p class="text-gray-700 text-sm mb-2">
               {{ $t('collections.newCollection.collectionNickName') }}
             </p>
             <el-form-item prop="collectionNickName">
@@ -73,7 +73,7 @@
             </el-form-item>
           </div>
           <div class="">
-            <p class="text-[#303133] text-sm mb-2">
+            <p class="text-gray-700 text-sm mb-2">
               {{ $t('collections.newCollection.selectTheme') }}
             </p>
             <el-form-item prop="colorName">
@@ -102,7 +102,7 @@
         <!-- Third row -->
         <div class="w-full flex sm:flex-col mb-9">
           <div class="flex-1">
-            <p class="text-[#303133] text-sm mb-2">
+            <p class="text-gray-700 text-sm mb-2">
               {{ $t('collections.newCollection.collectionDesc') }}
             </p>
             <el-form-item prop="collectionDesc">
@@ -129,7 +129,7 @@
       <div class="flex justify-end w-full">
         <el-form-item>
           <button
-            class="bg-[#3250BD] w-[118px] h-9 rounded-lg text-white flex items-center justify-center border disabled:text-[#98A2B3] disabled:bg-[#F2F4F7] disabled:border-[#EAECF0]"
+            class="bg-brand-600 w-[118px] h-9 rounded-lg text-white flex items-center justify-center border disabled:text-gray-400 disabled:bg-gray-100 disabled:border-gray-200"
             @click="createCollection"
           >
             {{ $t('collections.newCollection.createCollection') }}
diff --git a/frontend/src/components/comment/CommentItem.vue b/frontend/src/components/comment/CommentItem.vue
index 25ff69c7b..56b92ff34 100644
--- a/frontend/src/components/comment/CommentItem.vue
+++ b/frontend/src/components/comment/CommentItem.vue
@@ -1,17 +1,17 @@
 <template>
-  <div v-if="comment" class="flex border-b border-[#DCDCDE] last-of-type:border-0 pb-[18px] mb-[18px]">
+  <div v-if="comment" class="flex border-b border-gray-200 last-of-type:border-0 pb-[18px] mb-[18px]">
     <div class="mr-2">
       <el-avatar :size="32" :src="comment.user.avatar"></el-avatar>
     </div>
     <div class="w-full">
       <div class="text-[14px] leading-[22px] flex">
-        <div class="text-[#303133] font-medium mr-4">{{ comment.user.name }}</div>
-        <div class="text-[#909399] flex-1">{{ comment.time }}</div>
-        <button v-if="current_user_id === comment.user.id.toString()" @click="confirmDelete(comment.id)" class="p-1 hover:bg-[#F0F2F5] rounded-[4px]">
+        <div class="text-gray-700 font-medium mr-4">{{ comment.user.name }}</div>
+        <div class="text-gray-500 flex-1">{{ comment.time }}</div>
+        <button v-if="current_user_id === comment.user.id.toString()" @click="confirmDelete(comment.id)" class="p-1 hover:bg-gray-500 rounded-[4px]">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.66665 3.33301L3.05928 10.0077C3.1084 10.8428 3.13296 11.2604 3.21784 11.61C3.591 13.1471 4.83483 14.3199 6.39113 14.6021C6.74514 14.6663 7.16342 14.6663 7.99998 14.6663V14.6663C8.83653 14.6663 9.25481 14.6663 9.60883 14.6021C11.1651 14.3199 12.409 13.1471 12.7821 11.61C12.867 11.2604 12.8916 10.8428 12.9407 10.0077L13.3333 3.33301M2.66665 3.33301L1.33331 3.33301M2.66665 3.33301L13.3333 3.33301M13.3333 3.33301L14.6666 3.33301M10.6666 3.33301L10.547 2.97406C10.3503 2.38395 10.2519 2.08889 10.0695 1.87075C9.90842 1.67811 9.70154 1.529 9.46785 1.43709C9.20321 1.33301 8.89219 1.33301 8.27016 1.33301L7.7298 1.33301C7.10777 1.33301 6.79675 1.33301 6.53211 1.43709C6.29842 1.529 6.09154 1.67811 5.93045 1.87074C5.74802 2.08889 5.64967 2.38395 5.45296 2.97406L5.33331 3.33301M6.66665 6.66634L6.66664 11.333M9.33331 6.66634L9.33331 9.33301" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
         </button>
       </div>
-      <div class="text-[14px] leading-[23px] text-[#606266]">{{ comment.content }}</div>
+      <div class="text-[14px] leading-[23px] text-gray-500">{{ comment.content }}</div>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/comment/CreateComment.vue b/frontend/src/components/comment/CreateComment.vue
index b7c7685b4..500550af1 100644
--- a/frontend/src/components/comment/CreateComment.vue
+++ b/frontend/src/components/comment/CreateComment.vue
@@ -1,10 +1,12 @@
 <template>
   <div class="p-[14px] flex items-center justify-between rounded-[8px] border border-gray-300 mb-6">
-    <textarea rows="1" :placeholder="$t('comment.createComment')" v-model="newCommentContent" class="flex-1 outline-none mr-4 text-sm text-[#606266] h-[40px]"></textarea>
+    <textarea rows="1" :placeholder="$t('comment.createComment')" v-model="newCommentContent" class="flex-1 outline-none mr-4 text-sm text-gray-500 h-[40px]"></textarea>
     <button
       :disabled="newCommentContent.trim().length === 0"
-      :class="{ 'bg-[#409EFF]': newCommentContent.trim().length > 0, 'bg-[#9FCEFF]': newCommentContent.trim().length === 0 }"
-      class="flex justify-center items-center rounded-[4px] w-[88px] h-[32px] text-white text-sm font-medium"
+      :class="[
+        'flex justify-center items-center rounded-[4px] w-[88px] h-[32px] text-sm font-medium',
+        newCommentContent.trim().length > 0 ? 'bg-brand-600 text-white' : 'bg-gray-100'
+      ]"
       @click="createComment">
       {{ $t('comment.createComment') }}
     </button>
diff --git a/frontend/src/components/community/CommunityMDTextarea.vue b/frontend/src/components/community/CommunityMDTextarea.vue
index 2e9c9c1ce..9aa7a84c1 100644
--- a/frontend/src/components/community/CommunityMDTextarea.vue
+++ b/frontend/src/components/community/CommunityMDTextarea.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border border-[#DCDFE6] rounded-[4px] bg-[#F5F7FA]">
+  <div class="border border-gray-200 rounded-[4px] bg-gray-100">
     <div class="flex text-[14px] leading-[22px]">
       <div
         class="px-[20px] py-[9px] whitespace-nowrap border-r"
@@ -28,10 +28,10 @@
                 cols="10"
                 @input="handleInput"
                 v-model="theDesc"
-                class="w-full text-[#606266] mb-[10px] p-[8px] border border-gray-300 shadow-xs rounded-md focus:outline-none focus:ring-0.5 focus:border-blue-300"
+                class="w-full text-gray-500 mb-[10px] p-[8px] border border-gray-300 shadow-xs rounded-md focus:outline-none focus:ring-0.5 focus:border-blue-300"
                 :placeholder="placeholder==='留下评论' ? $t('community.MD.default'): placeholder"
       ></textarea>
-      <div class="flex items-center gap-[8px] text-[#909399] text-[14px] leading-[22px]">
+      <div class="flex items-center gap-[8px] text-gray-500 text-[14px] leading-[22px]">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.99992 11.9997L4.51355 9.48605C5.03457 8.96503 5.29507 8.70452 5.59611 8.60523C5.86095 8.51788 6.14652 8.51577 6.41263 8.5992C6.7151 8.69403 6.97943 8.95066 7.50809 9.46393L9.65733 11.5506M14.3333 11.7913L13.3834 10.8415C12.8554 10.3135 12.5914 10.0495 12.2869 9.95055C12.0192 9.86354 11.7307 9.86354 11.4629 9.95055C11.1585 10.0495 10.8943 10.3136 10.3661 10.8418C9.96312 11.2448 9.65733 11.5506 9.65733 11.5506M12.3333 14.2265L9.65733 11.5506M11.9999 5.33301C11.9999 6.06939 11.403 6.66634 10.6666 6.66634C9.93021 6.66634 9.33325 6.06939 9.33325 5.33301C9.33325 4.59663 9.93021 3.99967 10.6666 3.99967C11.403 3.99967 11.9999 4.59663 11.9999 5.33301ZM7.73325 14.6663H8.26658C10.5068 14.6663 11.6269 14.6663 12.4825 14.2304C13.2352 13.8469 13.8471 13.235 14.2306 12.4823C14.6666 11.6267 14.6666 10.5066 14.6666 8.26634V7.73301C14.6666 5.4928 14.6666 4.37269 14.2306 3.51705C13.8471 2.7644 13.2352 2.15248 12.4825 1.76898C11.6269 1.33301 10.5068 1.33301 8.26659 1.33301H7.73325C5.49304 1.33301 4.37294 1.33301 3.51729 1.76898C2.76464 2.15248 2.15272 2.7644 1.76923 3.51705C1.33325 4.37269 1.33325 5.4928 1.33325 7.73301V8.26634C1.33325 10.5066 1.33325 11.6267 1.76923 12.4823C2.15272 13.235 2.76464 13.8469 3.51729 14.2304C4.37294 14.6663 5.49304 14.6663 7.73325 14.6663Z" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/></svg>
         <label for="fileInput" class="cursor-pointer">
           {{ $t('community.MD.desc') }}
diff --git a/frontend/src/components/community/CommunityTimeLine.vue b/frontend/src/components/community/CommunityTimeLine.vue
index 778dab632..501fa544d 100644
--- a/frontend/src/components/community/CommunityTimeLine.vue
+++ b/frontend/src/components/community/CommunityTimeLine.vue
@@ -8,8 +8,8 @@
         <span>{{item.type=='change status'?'changed discussion status to '+ item.state:item.type=='change title'?'changed discussion title from '+ item.title_from +' to ' + item.title_to:''}}</span>
         <span>{{formatDate(item.date,'zh_CN')}}</span>
       </div>
-      <div v-else class="border border-[#EBEEF5] border-b-[2px] rounded-[4px]">
-        <div class="flex justify-between gap-[4px] border-b border-[#EBEEF5] items-center px-[12px] py-[9px] bg-[#F5F7FA]">
+      <div v-else class="border border-gray-200 border-b-[2px] rounded-[4px]">
+        <div class="flex justify-between gap-[4px] border-b border-gray-200 items-center px-[12px] py-[9px] bg-gray-100">
           <div class="flex items-center gap-[8px]">
             <el-avatar :size="24" :src="avatar"></el-avatar>
             Username {{formatDate(item.date,'zh_CN')}}
diff --git a/frontend/src/components/community/DiscussionCard.vue b/frontend/src/components/community/DiscussionCard.vue
index 208022126..89adcc0c1 100644
--- a/frontend/src/components/community/DiscussionCard.vue
+++ b/frontend/src/components/community/DiscussionCard.vue
@@ -1,15 +1,15 @@
 <template>
-  <div class="flex border border-[#E4E7ED] rounded-[4px] cursor-pointer">
-    <div class="px-[12px] py-[12px] bg-[#F0F3FF]"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path opacity="0.12" d="M13.5 19.8C13.5 18.1198 13.5 17.2798 13.827 16.638C14.1146 16.0735 14.5735 15.6146 15.138 15.327C15.7798 15 16.6198 15 18.3 15H28.2C29.8802 15 30.7202 15 31.362 15.327C31.9265 15.6146 32.3854 16.0735 32.673 16.638C33 17.2798 33 18.1198 33 19.8V30.5455C33 32.0355 31.2154 32.8004 30.1364 31.7727C29.0859 30.7723 27.6909 30.2143 26.2403 30.2143H18.3C16.6198 30.2143 15.7798 30.2143 15.138 29.8873C14.5735 29.5997 14.1146 29.1407 13.827 28.5763C13.5 27.9345 13.5 27.0944 13.5 25.4143V19.8Z" fill="#4D6AD6"/><path d="M13.5 21H10.875C10.5043 21 10.3189 21 10.1384 21.0146C9.4133 21.073 8.71316 21.3064 8.09799 21.6947C7.94487 21.7914 7.79658 21.9026 7.5 22.125V22.125C6.73286 22.7004 6.34929 22.988 6.05674 23.1004C4.82225 23.5746 3.44701 22.8869 3.08564 21.6148C3 21.3134 3 20.8339 3 19.875V10.2C3 7.67976 3 6.41965 3.49047 5.45704C3.9219 4.61031 4.61031 3.9219 5.45704 3.49047C6.41965 3 7.67976 3 10.2 3H19.8C22.3202 3 23.5804 3 24.543 3.49047C25.3897 3.9219 26.0781 4.61031 26.5095 5.45704C27 6.41965 27 7.67976 27 10.2V10.5V11.25M30.1364 31.7727V31.7727C31.2154 32.8004 33 32.0355 33 30.5455V19.8C33 18.1198 33 17.2798 32.673 16.638C32.3854 16.0735 31.9265 15.6146 31.362 15.327C30.7202 15 29.8802 15 28.2 15H18.3C16.6198 15 15.7798 15 15.138 15.327C14.5735 15.6146 14.1146 16.0735 13.827 16.638C13.5 17.2798 13.5 18.1198 13.5 19.8V25.4143C13.5 27.0944 13.5 27.9345 13.827 28.5763C14.1146 29.1407 14.5735 29.5997 15.138 29.8873C15.7798 30.2143 16.6198 30.2143 18.3 30.2143H26.2403C27.6909 30.2143 29.0859 30.7723 30.1364 31.7727Z" stroke="#4D6AD6" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+  <div class="flex border border-gray-200 rounded-[4px] cursor-pointer">
+    <div class="px-[12px] py-[12px] bg-brand-25]"><svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36" fill="none"><path opacity="0.12" d="M13.5 19.8C13.5 18.1198 13.5 17.2798 13.827 16.638C14.1146 16.0735 14.5735 15.6146 15.138 15.327C15.7798 15 16.6198 15 18.3 15H28.2C29.8802 15 30.7202 15 31.362 15.327C31.9265 15.6146 32.3854 16.0735 32.673 16.638C33 17.2798 33 18.1198 33 19.8V30.5455C33 32.0355 31.2154 32.8004 30.1364 31.7727C29.0859 30.7723 27.6909 30.2143 26.2403 30.2143H18.3C16.6198 30.2143 15.7798 30.2143 15.138 29.8873C14.5735 29.5997 14.1146 29.1407 13.827 28.5763C13.5 27.9345 13.5 27.0944 13.5 25.4143V19.8Z" fill="#4D6AD6"/><path d="M13.5 21H10.875C10.5043 21 10.3189 21 10.1384 21.0146C9.4133 21.073 8.71316 21.3064 8.09799 21.6947C7.94487 21.7914 7.79658 21.9026 7.5 22.125V22.125C6.73286 22.7004 6.34929 22.988 6.05674 23.1004C4.82225 23.5746 3.44701 22.8869 3.08564 21.6148C3 21.3134 3 20.8339 3 19.875V10.2C3 7.67976 3 6.41965 3.49047 5.45704C3.9219 4.61031 4.61031 3.9219 5.45704 3.49047C6.41965 3 7.67976 3 10.2 3H19.8C22.3202 3 23.5804 3 24.543 3.49047C25.3897 3.9219 26.0781 4.61031 26.5095 5.45704C27 6.41965 27 7.67976 27 10.2V10.5V11.25M30.1364 31.7727V31.7727C31.2154 32.8004 33 32.0355 33 30.5455V19.8C33 18.1198 33 17.2798 32.673 16.638C32.3854 16.0735 31.9265 15.6146 31.362 15.327C30.7202 15 29.8802 15 28.2 15H18.3C16.6198 15 15.7798 15 15.138 15.327C14.5735 15.6146 14.1146 16.0735 13.827 16.638C13.5 17.2798 13.5 18.1198 13.5 19.8V25.4143C13.5 27.0944 13.5 27.9345 13.827 28.5763C14.1146 29.1407 14.5735 29.5997 15.138 29.8873C15.7798 30.2143 16.6198 30.2143 18.3 30.2143H26.2403C27.6909 30.2143 29.0859 30.7723 30.1364 31.7727Z" stroke="#4D6AD6" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
     <div class="px-[16px] py-[5px] w-full">
-      <div class="flex justify-between items-center text-[#303133] text-[16px] leading-[24px] font-semibold">
+      <div class="flex justify-between items-center text-gray-700 text-[16px] leading-[24px] font-semibold">
         <div class="hover:underline">{{title}}</div>
-        <div class="flex items-center gap-[4px] text-[#606266] text-[14px] leading-[22px] font-normal" v-show="commentNum >=0">
+        <div class="flex items-center gap-[4px] text-gray-500 text-[14px] leading-[22px] font-normal" v-show="commentNum >=0">
           <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M1.33325 6.66634C1.33325 4.7995 1.33325 3.86608 1.69656 3.15304C2.01614 2.52583 2.52608 2.0159 3.15328 1.69632C3.86632 1.33301 4.79974 1.33301 6.66659 1.33301H9.33325C11.2001 1.33301 12.1335 1.33301 12.8466 1.69632C13.4738 2.0159 13.9837 2.52583 14.3033 3.15304C14.6666 3.86608 14.6666 4.7995 14.6666 6.66634V12.7802C14.6666 13.4643 14.6666 13.8063 14.5581 14.0198C14.376 14.3781 13.9972 14.5926 13.5964 14.5643C13.3575 14.5475 13.0642 14.3716 12.4776 14.0196V14.0196C12.1277 13.8097 11.9528 13.7047 11.7694 13.6228C11.4648 13.4867 11.1414 13.3972 10.8102 13.3571C10.6108 13.333 10.4068 13.333 9.99876 13.333H6.66659C4.79974 13.333 3.86632 13.333 3.15328 12.9697C2.52608 12.6501 2.01614 12.1402 1.69656 11.513C1.33325 10.7999 1.33325 9.86652 1.33325 7.99967V6.66634Z" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/></svg>
           {{commentNum}}
         </div>
       </div>
-      <div class="flex gap-[8px] text-[#606266] text-[14px] leading-[22px]">
+      <div class="flex gap-[8px] text-gray-500 text-[14px] leading-[22px]">
         <div>#{{num}}</div>
         <div>{{time}}</div>
         <div>by {{user}}</div>
diff --git a/frontend/src/components/community/DiscussionCards.vue b/frontend/src/components/community/DiscussionCards.vue
index 82e7b9bed..8ee740dbf 100644
--- a/frontend/src/components/community/DiscussionCards.vue
+++ b/frontend/src/components/community/DiscussionCards.vue
@@ -1,10 +1,10 @@
 <template>
   <div class="flex flex-col gap-[16px]">
     <div class="flex justify-between">
-        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="px-[16px] py-[5px] border bg-[#FAFCFF] rounded-[4px] hover:bg-[#EBEDF0] text-[#606266] text-[14px] leading-[22px] cursor-pointer ">
+        <div @click="showDetail?showDetail=!showDetail:changeFlag('new')" class="px-[16px] py-[5px] border bg-gray-25 rounded-[4px] hover:bg-gray-100 text-gray-500 text-[14px] leading-[22px] cursor-pointer ">
           {{ showDetail? $t('community.discussion.back'):$t('community.discussion.new') }}
         </div>
-        <!-- <div class="hover:bg-[#F5F7FA] cursor-pointer flex items-center gap-[8px] px-[16px] py-[5px] rounded-[4px] text-[#606266] text-[14px] leading-[22px]">
+        <!-- <div class="hover:bg-gray-100 cursor-pointer flex items-center gap-[8px] px-[16px] py-[5px] rounded-[4px] text-gray-500 text-[14px] leading-[22px]">
           <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none"><path d="M5.54175 7.87533L7.00008 6.41699M7.00008 6.41699L8.45841 4.95866M7.00008 6.41699L5.54175 4.95866M7.00008 6.41699L8.45841 7.87533M10.918 12.2678V12.2678C11.761 12.7735 12.8334 12.1663 12.8334 11.1833V7.00032C12.8334 5.29289 12.8334 4.43917 12.577 3.75799C12.1713 2.67993 11.3205 1.82912 10.2424 1.42337C9.56124 1.16699 8.70752 1.16699 7.00008 1.16699H6.41675C5.25451 1.16699 4.6734 1.16699 4.19483 1.28687C2.76313 1.64549 1.64525 2.76337 1.28662 4.19507C1.16675 4.67364 1.16675 5.25476 1.16675 6.41699V6.41699C1.16675 7.57923 1.16675 8.16034 1.28662 8.63891C1.64525 10.0706 2.76313 11.1885 4.19483 11.5471C4.6734 11.667 5.25451 11.667 6.41675 11.667H8.74907C9.51314 11.667 10.2628 11.8746 10.918 12.2678Z" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/></svg>
           View closed（1）
         </div> -->
diff --git a/frontend/src/components/community/DiscussionDetails.vue b/frontend/src/components/community/DiscussionDetails.vue
index ac5bd5653..a5f104cec 100644
--- a/frontend/src/components/community/DiscussionDetails.vue
+++ b/frontend/src/components/community/DiscussionDetails.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="flex flex-col gap-[16px]">
     <div class="flex gap-[8px] items-center">
-      <div class="px-[8px] py-[8px] bg-[#F0F3FF] rounded-[8px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path opacity="0.12" d="M9 13.2C9 12.0799 9 11.5198 9.21799 11.092C9.40973 10.7157 9.71569 10.4097 10.092 10.218C10.5198 10 11.0799 10 12.2 10H18.8C19.9201 10 20.4802 10 20.908 10.218C21.2843 10.4097 21.5903 10.7157 21.782 11.092C22 11.5198 22 12.0799 22 13.2V20.3636C22 21.357 20.8103 21.8669 20.0909 21.1818C19.3906 20.5149 18.4606 20.1429 17.4935 20.1429H12.2C11.0799 20.1429 10.5198 20.1429 10.092 19.9249C9.71569 19.7331 9.40973 19.4272 9.21799 19.0508C9 18.623 9 18.063 9 16.9429V13.2Z" fill="#4D6AD6"/><path d="M9 14H7.25C7.00285 14 6.87928 14 6.75895 14.0097C6.27553 14.0487 5.80877 14.2043 5.39866 14.4631C5.29658 14.5276 5.19772 14.6017 5 14.75V14.75C4.48857 15.1336 4.23286 15.3254 4.03782 15.4003C3.21483 15.7164 2.29801 15.258 2.05709 14.4099C2 14.2089 2 13.8893 2 13.25V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H13.2C14.8802 2 15.7202 2 16.362 2.32698C16.9265 2.6146 17.3854 3.07354 17.673 3.63803C18 4.27976 18 5.11984 18 6.8V7V7.5M20.0909 21.1818V21.1818C20.8103 21.8669 22 21.357 22 20.3636V13.2C22 12.0799 22 11.5198 21.782 11.092C21.5903 10.7157 21.2843 10.4097 20.908 10.218C20.4802 10 19.9201 10 18.8 10H12.2C11.0799 10 10.5198 10 10.092 10.218C9.71569 10.4097 9.40973 10.7157 9.21799 11.092C9 11.5198 9 12.0799 9 13.2V16.9429C9 18.063 9 18.623 9.21799 19.0508C9.40973 19.4272 9.71569 19.7331 10.092 19.9249C10.5198 20.1429 11.0799 20.1429 12.2 20.1429H17.4935C18.4606 20.1429 19.3906 20.5149 20.0909 21.1818Z" stroke="#4D6AD6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
+      <div class="px-[8px] py-[8px] bg-brand-25] rounded-[8px]"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"><path opacity="0.12" d="M9 13.2C9 12.0799 9 11.5198 9.21799 11.092C9.40973 10.7157 9.71569 10.4097 10.092 10.218C10.5198 10 11.0799 10 12.2 10H18.8C19.9201 10 20.4802 10 20.908 10.218C21.2843 10.4097 21.5903 10.7157 21.782 11.092C22 11.5198 22 12.0799 22 13.2V20.3636C22 21.357 20.8103 21.8669 20.0909 21.1818C19.3906 20.5149 18.4606 20.1429 17.4935 20.1429H12.2C11.0799 20.1429 10.5198 20.1429 10.092 19.9249C9.71569 19.7331 9.40973 19.4272 9.21799 19.0508C9 18.623 9 18.063 9 16.9429V13.2Z" fill="#4D6AD6"/><path d="M9 14H7.25C7.00285 14 6.87928 14 6.75895 14.0097C6.27553 14.0487 5.80877 14.2043 5.39866 14.4631C5.29658 14.5276 5.19772 14.6017 5 14.75V14.75C4.48857 15.1336 4.23286 15.3254 4.03782 15.4003C3.21483 15.7164 2.29801 15.258 2.05709 14.4099C2 14.2089 2 13.8893 2 13.25V6.8C2 5.11984 2 4.27976 2.32698 3.63803C2.6146 3.07354 3.07354 2.6146 3.63803 2.32698C4.27976 2 5.11984 2 6.8 2H13.2C14.8802 2 15.7202 2 16.362 2.32698C16.9265 2.6146 17.3854 3.07354 17.673 3.63803C18 4.27976 18 5.11984 18 6.8V7V7.5M20.0909 21.1818V21.1818C20.8103 21.8669 22 21.357 22 20.3636V13.2C22 12.0799 22 11.5198 21.782 11.092C21.5903 10.7157 21.2843 10.4097 20.908 10.218C20.4802 10 19.9201 10 18.8 10H12.2C11.0799 10 10.5198 10 10.092 10.218C9.71569 10.4097 9.40973 10.7157 9.21799 11.092C9 11.5198 9 12.0799 9 13.2V16.9429C9 18.063 9 18.623 9.21799 19.0508C9.40973 19.4272 9.71569 19.7331 10.092 19.9249C10.5198 20.1429 11.0799 20.1429 12.2 20.1429H17.4935C18.4606 20.1429 19.3906 20.5149 20.0909 21.1818Z" stroke="#4D6AD6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
       <div>
-        <div v-show="!isEdit" class="text-[#303133] text-[16px] leading-[24px] font-semibold flex items-center gap-[8px]">
+        <div v-show="!isEdit" class="text-gray-700 text-[16px] leading-[24px] font-semibold flex items-center gap-[8px]">
           {{theTitle}}
           <span @click="editTitle"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M13.3332 13.9997H2.6665M10.6665 2.66634C10.4998 3.83301 11.4998 4.83301 12.6665 4.66634M4.6665 10.6663L5.04654 9.1462C5.15323 8.71945 5.20657 8.50608 5.29235 8.30714C5.36851 8.13052 5.46355 7.96266 5.57582 7.80649C5.70227 7.63058 5.8578 7.47505 6.16884 7.16401L10.9999 2.333C11.053 2.27991 11.0796 2.25337 11.1031 2.23201C11.6116 1.76973 12.3882 1.76974 12.8968 2.23203C12.9203 2.2534 12.9468 2.27994 12.9999 2.33303V2.33303C13.053 2.38611 13.0795 2.41265 13.1009 2.43615C13.5631 2.9447 13.5631 3.7213 13.1009 4.22984C13.0795 4.25334 13.053 4.27988 12.9999 4.33297L8.16883 9.16402C7.85779 9.47506 7.70227 9.63058 7.52636 9.75703C7.37019 9.8693 7.20233 9.96434 7.02571 10.0405C6.82677 10.1263 6.6134 10.1796 6.18666 10.2863L4.6665 10.6663Z" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
         </div>
-        <div v-show="isEdit"  class="text-[#303133] text-[16px] leading-[24px] font-semibold flex items-center gap-[8px]">
+        <div v-show="isEdit"  class="text-gray-700 text-[16px] leading-[24px] font-semibold flex items-center gap-[8px]">
           <input type="text"
                  ref="inputTitle"
                  v-model="theTitle"
                  @change="saveTitle"
                  @blur="isEdit=false">
         </div>
-        <div class="text-[#606266] flex gap-[8px] text-[14px] leading-[22px]">
+        <div class="text-gray-500 flex gap-[8px] text-[14px] leading-[22px]">
           <div>{{userName}}</div>
           <div>·</div>
           <div>{{time}}</div>
@@ -23,8 +23,8 @@
         </div>
       </div>
     </div>
-    <div class="border border-[#EBEEF5] border-b-[2px] rounded-[4px]" v-for="comment in commentData" :key="comment.id">
-      <div class="flex justify-between gap-[4px] border-b border-[#EBEEF5] items-center px-[12px] py-[9px] bg-[#F5F7FA]">
+    <div class="border border-gray-200 border-b-[2px] rounded-[4px]" v-for="comment in commentData" :key="comment.id">
+      <div class="flex justify-between gap-[4px] border-b border-gray-200 items-center px-[12px] py-[9px] bg-gray-100">
         <div class="flex items-center gap-[8px]">
           <el-avatar :size="24" :src="comment.user.avatar"></el-avatar>
           {{comment.user.name}} {{comment.time}}
diff --git a/frontend/src/components/community/EmptyCommunity.vue b/frontend/src/components/community/EmptyCommunity.vue
index b71bc2bcb..96db8c6d4 100644
--- a/frontend/src/components/community/EmptyCommunity.vue
+++ b/frontend/src/components/community/EmptyCommunity.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="py-[60px] border border-[#EBEEF5] bg-[#FAFCFF] flex flex-col justify-center gap-[24px]">
+  <div class="py-[60px] border border-gray-200 bg-gray-25 flex flex-col justify-center gap-[24px]">
     <div class="flex justify-center">
       <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32" fill="none"><path opacity="0.12" d="M12 17.5997C12 16.1062 12 15.3595 12.2906 14.789C12.5463 14.2873 12.9543 13.8793 13.456 13.6237C14.0265 13.333 14.7732 13.333 16.2667 13.333H25.0667C26.5601 13.333 27.3069 13.333 27.8773 13.6237C28.3791 13.8793 28.787 14.2873 29.0427 14.789C29.3333 15.3595 29.3333 16.1062 29.3333 17.5997V27.1512C29.3333 28.4757 27.747 29.1555 26.7879 28.2421C25.8541 27.3528 24.6141 26.8568 23.3247 26.8568H16.2667C14.7732 26.8568 14.0265 26.8568 13.456 26.5662C12.9543 26.3105 12.5463 25.9026 12.2906 25.4008C12 24.8304 12 24.0836 12 22.5902V17.5997Z" fill="#4D6AD6"/><path d="M12 18.667H9.66663C9.3371 18.667 9.17233 18.667 9.01189 18.6799C8.36734 18.7319 7.74499 18.9393 7.19818 19.2845C7.06206 19.3704 6.93025 19.4693 6.66663 19.667V19.667C5.98472 20.1784 5.64377 20.4341 5.38373 20.534C4.2864 20.9555 3.06397 20.3443 2.74275 19.2135C2.66663 18.9456 2.66663 18.5194 2.66663 17.667V9.06699C2.66663 6.82678 2.66663 5.70668 3.1026 4.85103C3.48609 4.09838 4.09802 3.48646 4.85066 3.10297C5.70631 2.66699 6.82642 2.66699 9.06663 2.66699H17.6C19.8402 2.66699 20.9603 2.66699 21.8159 3.10297C22.5686 3.48646 23.1805 4.09838 23.564 4.85103C24 5.70668 24 6.82678 24 9.06699V9.33366V10.0003M26.7878 28.2427V28.2427C27.747 29.1562 29.3333 28.4763 29.3333 27.1518V17.6003C29.3333 16.1069 29.3333 15.3601 29.0426 14.7897C28.787 14.2879 28.379 13.88 27.8773 13.6243C27.3068 13.3337 26.5601 13.3337 25.0666 13.3337H16.2666C14.7732 13.3337 14.0264 13.3337 13.456 13.6243C12.9542 13.88 12.5463 14.2879 12.2906 14.7897C12 15.3601 12 16.1069 12 17.6003V22.5908C12 24.0843 12 24.831 12.2906 25.4014C12.5463 25.9032 12.9542 26.3112 13.456 26.5668C14.0264 26.8575 14.7732 26.8575 16.2666 26.8575H23.3246C24.6141 26.8575 25.8541 27.3535 26.7878 28.2427Z" stroke="#4D6AD6" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
     </div>
-    <div class="flex justify-center text-[20px] text-[#303133] leading-[28px] font-semibold">{{ $t('community.empty.welcome') }}</div>
-    <div class="flex justify-center text-[14px] text-[#303133] leading-[22px]">
+    <div class="flex justify-center text-[20px] text-gray-700 leading-[28px] font-semibold">{{ $t('community.empty.welcome') }}</div>
+    <div class="flex justify-center text-[14px] text-gray-700 leading-[22px]">
       <span class="max-w-[320px] text-center">
         {{ $t('community.empty.desc') }}
       </span>
     </div>
     <div class="flex justify-center">
-      <div class="cursor-pointer flex items-center gap-[8px] bg-[#4D6AD6] px-[20px] py-[9px] text-[14px] text-[#FFF] font-medium leading-[22px]" @click="creatDiscussion">
+      <div class="cursor-pointer flex items-center gap-[8px] bg-brand-500 px-[20px] py-[9px] text-[14px] text-white font-medium leading-[22px]" @click="creatDiscussion">
         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3.33337 7.99967H8.00004M12.6667 7.99967H8.00004M8.00004 7.99967V3.33301M8.00004 7.99967V12.6663" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
         {{ $t('community.empty.new') }}
       </div>
diff --git a/frontend/src/components/community/NewCommunityDiscussion.vue b/frontend/src/components/community/NewCommunityDiscussion.vue
index 7f27aa931..92d44e10b 100644
--- a/frontend/src/components/community/NewCommunityDiscussion.vue
+++ b/frontend/src/components/community/NewCommunityDiscussion.vue
@@ -14,7 +14,7 @@
         show-word-limit
         clearable
         :placeholder="$t('community.newDiscussion.create')"
-        class="w-full h-[40px] text-[#606266]">
+        class="w-full h-[40px] text-gray-500">
         <template #suffix>
           <span>{{ title.length }} / 200</span>
         </template>
diff --git a/frontend/src/components/datasets/DatasetRelationsCard.vue b/frontend/src/components/datasets/DatasetRelationsCard.vue
index d849fae4b..73d6afe9f 100644
--- a/frontend/src/components/datasets/DatasetRelationsCard.vue
+++ b/frontend/src/components/datasets/DatasetRelationsCard.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="p-[16px] border-t border-[#EBEEF5]">
+  <div class="p-[16px] border-t border-gray-200">
     <h3 class="flex items-center gap-[8px]">
       <SvgIcon name="datasets" width="18px" height="18px" />
-      <span class="font-[500] text-[#344054] text-[16px] leading-[24px]">
+      <span class="font-[500] text-gray-700 text-[16px] leading-[24px]">
         {{ $t('datasets.datasetsUsedToTrain') }}
       </span>
-      <span class="text-[#344054]"> {{ namespacePath }} </span>
+      <span class="text-gray-700"> {{ namespacePath }} </span>
     </h3>
     <div class="mt-[16px] flex flex-col gap-[12px]">
       <RepoItem
diff --git a/frontend/src/components/datasets/DatasetSettings.vue b/frontend/src/components/datasets/DatasetSettings.vue
index aa3046a69..05f5f195f 100644
--- a/frontend/src/components/datasets/DatasetSettings.vue
+++ b/frontend/src/components/datasets/DatasetSettings.vue
@@ -1,22 +1,22 @@
 <template>
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('datasets.datasetName') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.datasetNameTips') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[14px] text-[#475467]">
+        <p class="text-[14px] text-gray-600">
           {{ $t('datasets.namespaceDatasetName') }}
         </p>
         <div
-          class="w-[512px] sm:w-full rounded-[8px] bg-[#F9FAFB] px-[14px] py-[10px] border">
+          class="w-[512px] sm:w-full rounded-[8px] bg-gray-50 px-[14px] py-[10px] border">
           {{ datasetPath }}
         </div>
       </div>
@@ -27,10 +27,10 @@
     <!-- 更新数据集别名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('datasets.datasetNickName') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.edit.tips') }}
         </div>
       </div>
@@ -53,10 +53,10 @@
     <!-- 更新数据集简介 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('datasets.datasetDesc') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.edit.tips2') }}
         </div>
       </div>
@@ -80,17 +80,17 @@
     <!-- 数据集标签 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('datasets.datasetTag') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.edit.tips3') }}
         </div>
       </div>
       <div
         class="flex flex-col gap-[6px]"
         ref="tagListContainer">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('datasets.datasetTag') }}
         </p>
         <div class="flex flex-col gap-[6px] w-[512px] md:w-full">
@@ -140,17 +140,17 @@
     <!-- 行业标签 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('datasets.datasetIndustryTag') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.edit.tips4') }}
         </div>
       </div>
       <div
         class="flex flex-col gap-[6px]"
         ref="IndustryTagListContainer">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('datasets.datasetIndustryTag') }}
         </p>
         <div class="flex flex-col gap-[6px] w-[512px] md:w-full">
@@ -204,10 +204,10 @@
     <!-- 修改可见性 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('datasets.edit.changeVisibility') }}
         </div>
-        <div class="max-w-[864px] text-[14px] text-[#475467] leading-[20px]">
+        <div class="max-w-[864px] text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.edit.statusText') }}
           <span class="text-black font-medium"
             >[{{
@@ -222,7 +222,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[14px] text-[#475467]">
+        <p class="text-[14px] text-gray-600">
           {{ $t('datasets.edit.datasetVisibility') }}
         </p>
         <el-select
@@ -246,17 +246,17 @@
     <!-- 数据集删除 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('datasets.edit.delDataset') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.edit.delTips') }}
           <span class="text-black font-medium">{{ $t('datasets.edit.canNot') }}</span>
           {{ $t('datasets.edit.delTips2') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('datasets.edit.delTips3') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('datasets.edit.enterPls') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('datasets.edit.sureDel') }}
@@ -264,7 +264,7 @@
       </div>
 
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[14px] text-[#475467]">
+        <p class="text-[14px] text-gray-600">
           {{ $t('datasets.datasetName') }}
         </p>
         <el-input
@@ -276,11 +276,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === datasetPath
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave">
@@ -663,14 +663,14 @@
         if (this.delDesc !== '') {
           document
             .getElementById('confirmDelete')
-            .classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+            .classList.replace('bg-error-600', 'bg-error-700')
         }
       },
 
       handleMouseLeave() {
         document
           .getElementById('confirmDelete')
-          .classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+          .classList.replace('bg-error-700', 'bg-error-600')
       }
     }
   }
diff --git a/frontend/src/components/datasets/NewDataset.vue b/frontend/src/components/datasets/NewDataset.vue
index 496eb0839..695ba70f4 100644
--- a/frontend/src/components/datasets/NewDataset.vue
+++ b/frontend/src/components/datasets/NewDataset.vue
@@ -7,10 +7,10 @@
         width="37"
       />
     </div>
-    <h3 class="text-[#303133] text-xl font-semibold mt-6 mb-3">
+    <h3 class="text-gray-700 text-xl font-semibold mt-6 mb-3">
       {{ t('datasets.newDataset.title') }}
     </h3>
-    <p class="text-[#606266] text-base font-medium md:text-center">
+    <p class="text-gray-500 text-base font-medium md:text-center">
       {{ t('datasets.newDataset.titleDesc') }}
     </p>
     <div class="mt-9">
@@ -139,7 +139,7 @@
           />
         </el-form-item>
         <p
-          class="mb-[18px] rounded bg-[#F0F3FF] text-[#4D6AD6] text-[13px] py-[9px] px-4"
+          class="mb-[18px] rounded bg-brand-25] text-brand-500 text-[13px] py-[9px] px-4"
         >
           {{ t('datasets.newDataset.tips') }}
         </p>
@@ -147,7 +147,7 @@
           <el-form-item>
             <el-button
               :loading="loading"
-              class="!text-center !h-9 !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]"
+              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
               @click="handleSubmit"
             >
               {{ t('datasets.newDataset.createDataset') }}
diff --git a/frontend/src/components/datasets/ParquetViewer.vue b/frontend/src/components/datasets/ParquetViewer.vue
index ed5d7a444..a8cd06484 100644
--- a/frontend/src/components/datasets/ParquetViewer.vue
+++ b/frontend/src/components/datasets/ParquetViewer.vue
@@ -7,7 +7,7 @@
           width="13px"
           height="13px"
         />
-        <p class="ml-[8px] text-[#101828] text-[18px] leading-[28px]">{{ $t('all.parquet') }}</p>
+        <p class="ml-[8px] text-gray-900 text-[18px] leading-[28px]">{{ $t('all.parquet') }}</p>
       </div>
       <!-- <div class="flex items-center justify-center">
         <SvgIcon
@@ -16,7 +16,7 @@
           height="10px"
           class="cursor-pointer"
         />
-        <p class="ml-[8px] text-[#667085] text-[14px] leading-[20px]">Auto-converted to Parquet</p>
+        <p class="ml-[8px] text-gray-500 text-[14px] leading-[20px]">Auto-converted to Parquet</p>
       </div>
       <div class="flex items-center justify-center cursor-pointer px-[12px] py-[2px] border rounded-[4px]">
         <SvgIcon
@@ -24,7 +24,7 @@
           width="10px"
           height="6px"
         />
-        <p class="ml-[8px] text-[12px] leading-[18px] text-[#667085]">
+        <p class="ml-[8px] text-[12px] leading-[18px] text-gray-500">
           API
         </p>
       </div>
@@ -34,12 +34,12 @@
           width="10px"
           height="6px"
         />
-        <p class="ml-[8px] text-[12px] leading-[18px] text-[#667085]">
+        <p class="ml-[8px] text-[12px] leading-[18px] text-gray-500">
           Go to dataset viewer
         </p>
       </div> -->
     </div>
-    <div class="flex justify-between gap-[16px] text-[#344054] text-[14px] leading-[20px]">
+    <div class="flex justify-between gap-[16px] text-gray-700 text-[14px] leading-[20px]">
       <div class="flex flex-col gap-[8px]">
         <p>Subset</p>
         <el-select
diff --git a/frontend/src/components/endpoints/EndpointDetail.vue b/frontend/src/components/endpoints/EndpointDetail.vue
index 56d75e7db..a21e6c80e 100644
--- a/frontend/src/components/endpoints/EndpointDetail.vue
+++ b/frontend/src/components/endpoints/EndpointDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-[#FCFCFD] pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto max-w-[1280px]">
       <repo-header
         :private="endpoint.private"
diff --git a/frontend/src/components/endpoints/EndpointItem.vue b/frontend/src/components/endpoints/EndpointItem.vue
index b5a1f3fba..9a886c091 100644
--- a/frontend/src/components/endpoints/EndpointItem.vue
+++ b/frontend/src/components/endpoints/EndpointItem.vue
@@ -1,11 +1,11 @@
 <template>
   <a
     :href="`/endpoints/${endpoint.model_id}/${endpoint.deploy_id}`"
-    class="focus:outline focus:outline-4 focus:outline-[#EAECF0] hover:shadow-md border border-gray-200 rounded-xl pt-4 w-full"
+    class="focus:outline focus:outline-4 focus:outline-gray-200 hover:shadow-md border border-gray-200 rounded-xl pt-4 w-full"
   >
     <div class="flex justify-between items-center mb-2 px-4">
       <div class="w-full flex items-center justify-between">
-        <h3 class="flex-1 text-[#344054] text-md font-normal leading-6 truncate mr-[8px]">
+        <h3 class="flex-1 text-gray-700 text-md font-normal leading-6 truncate mr-[8px]">
           {{ endpoint.deploy_name }}
         </h3>
         <div class="flex gap-2">
@@ -14,16 +14,16 @@
         </div>
       </div>
     </div>
-    <div class="flex  gap-2 text-sm leading-snug text-[#606266] mb-3 px-4">
+    <div class="flex  gap-2 text-sm leading-snug text-gray-500 mb-3 px-4">
       <span>image segmentation</span>
       <span>·</span>
       <span>{{ endpoint.provider }}</span>
       <span>·</span>
       <span>8x Intel Sanpppp</span>
     </div>
-    <div class="rounded-b-xl border-t text-sm leading-snug text-[#667085] bg-[#F9FBFA] flex justify-between">
+    <div class="rounded-b-xl border-t text-sm leading-snug text-gray-500 bg-gray-50 flex justify-between">
       <div class="px-4 py-2">{{ theEndpoint }}</div>
-      <div @click="copyUrl" v-if="endpoint.status === 'Running'" class="bg-[#ffffff] border-l rounded-br-xl p-2">
+      <div @click="copyUrl" v-if="endpoint.status === 'Running'" class="bg-white border-l rounded-br-xl p-2">
         <SvgIcon name="copy" />
       </div>
     </div>
diff --git a/frontend/src/components/endpoints/EndpointPage.vue b/frontend/src/components/endpoints/EndpointPage.vue
index 1d3d05a6d..18494b756 100644
--- a/frontend/src/components/endpoints/EndpointPage.vue
+++ b/frontend/src/components/endpoints/EndpointPage.vue
@@ -1,27 +1,27 @@
 <template>
   <div class="grid grid-cols-2 md:grid-cols-1 gap-[10px] mt-[20px] md:px-[20px]">
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-[#EAECF0] p-4 mlg:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 mlg:w-full border border-gray-200 rounded-xl">
+      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
         {{ $t('endpoints.detail.endpointUrl') }}
       </p>
-      <p class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-[#909399] text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+      <p class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
         {{ appEndpoint }}
       </p>
     </div>
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-[#EAECF0] p-4 mlg:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 mlg:w-full border border-gray-200 rounded-xl">
+      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
         {{ $t('endpoints.detail.modelId') }}
       </p>
-      <p class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-[#909399] text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+      <p class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
         {{ modelId }}
       </p>
     </div>
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-[#EAECF0] p-4 mlg:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 mlg:w-full border border-gray-200 rounded-xl">
+      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
         {{ $t('endpoints.detail.parameters') }}
       </p>
-      <p class="flex items-center gap-[8px] w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-[#909399] text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
-        <div v-if="private" class="border border-[#D0D5DD] bg-white px-3 py-[2px] text-center text-xs text-[#344054] font-medium rounded">
+      <p class="flex items-center gap-[8px] w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+        <div v-if="private" class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded">
           {{ $t("all.private") }}
         </div>
         <div class="flex gap-[4px]">
@@ -31,23 +31,23 @@
         </div>
       </p>
     </div>
-    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-[#EAECF0] p-4 mlg:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 mlg:w-full border border-gray-200 rounded-xl">
+      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
         <span>{{ $t('endpoints.detail.cloudResource')}}</span>
       </p>
-      <p class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-[#909399] text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
+      <p class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] text-gray-500 text-xs overflow-hidden text-ellipsis line-clamp-2 text-left">
         {{ hardware }}
       </p>
     </div>
 
-    <div v-if="replicaList?.length" class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-[#EAECF0] p-4 mlg:w-full border border-gray-200 rounded-xl">
-      <p class="text-sm text-[#303133] font-medium text-ellipsis overflow-hidden whitespace-nowrap">
+    <div v-if="replicaList?.length" class="flex flex-col gap-[8px] focus:outline focus:outline-4 focus:outline-gray-200 p-4 mlg:w-full border border-gray-200 rounded-xl">
+      <p class="text-sm text-gray-700 font-medium text-ellipsis overflow-hidden whitespace-nowrap">
         {{ $t('endpoints.detail.endpointStatus') }}
       </p>
-      <p class="w-[420px] lg:w-[370px] mlg:w-full leading-[18px] text-[#909399] text-xs text-left">
+      <p class="w-[420px] lg:w-[370px] mlg:w-full leading-[18px] text-gray-500 text-xs text-left">
         <p v-for="(replica, index) in replicaList" :key="index">
-          <span class="text-[#303133] font-medium mr-2">{{ replica.name }}:</span>
-          <span class="text-[#909399] font-medium">{{ replica.status }}</span>
+          <span class="text-gray-700 font-medium mr-2">{{ replica.name }}:</span>
+          <span class="text-gray-500 font-medium">{{ replica.status }}</span>
         </p>
       </p>
     </div>
diff --git a/frontend/src/components/endpoints/EndpointPlayground.vue b/frontend/src/components/endpoints/EndpointPlayground.vue
index 33989778d..444af5e42 100644
--- a/frontend/src/components/endpoints/EndpointPlayground.vue
+++ b/frontend/src/components/endpoints/EndpointPlayground.vue
@@ -1,29 +1,29 @@
 <template>
-  <div class="flex rounded-2xl border border-[#EAECF0] my-6 md:m-5 md:flex-col">
-    <div class="border-r border-[#EAECF0] w-[320px] md:w-full md:border-none">
+  <div class="flex rounded-2xl border border-gray-200 my-6 md:m-5 md:flex-col">
+    <div class="border-r border-gray-200 w-[320px] md:w-full md:border-none">
       <div
-        class="p-4 flex items-center justify-between border-b border-[#EAECF0]"
+        class="p-4 flex items-center justify-between border-b border-gray-200"
       >
         <div
-          class="flex items-center gap-2 text-base text-[#344054] font-medium"
+          class="flex items-center gap-2 text-base text-gray-700 font-medium"
         >
           <SvgIcon name="playground" />
           {{ $t('endpoints.playground.title') }}
         </div>
         <div
-          class="h-11 p-1 bg-[#f8f9fb] rounded-[10px] border border-[#eaecf0] items-center gap-1 inline-flex"
+          class="h-11 p-1 bg-gray-50 rounded-[10px] border border-gray-200 items-center gap-1 inline-flex"
         >
           <div
             class="px-3 py-2 rounded-md justify-center items-center gap-2 flex cursor-pointer hover:bg-white"
             :class="
-              playgroundMode === 'test' ? 'bg-white shadow' : 'bg-[#f8f9fb]'
+              playgroundMode === 'test' ? 'bg-white shadow' : 'bg-gray-50'
             "
             @click="changePlaygroundMode('test')"
           >
             <div
-              class="text-[#344053] text-sm font-medium"
+              class="text-gray-700 text-sm font-medium"
               :class="
-                playgroundMode === 'test' ? 'text-[#344053]' : 'text-[#667084]'
+                playgroundMode === 'test' ? 'text-gray-700' : 'text-gray-500'
               "
             >
               Test
@@ -32,14 +32,14 @@
           <div
             class="px-3 py-2 rounded-md justify-center items-center gap-2 flex cursor-pointer hover:bg-white"
             :class="
-              playgroundMode === 'api' ? 'bg-white shadow' : 'bg-[#f8f9fb]'
+              playgroundMode === 'api' ? 'bg-white shadow' : 'bg-gray-50'
             "
             @click="changePlaygroundMode('api')"
           >
             <div
-              class="text-[#667084] text-sm font-medium"
+              class="text-gray-500 text-sm font-medium"
               :class="
-                playgroundMode === 'api' ? 'text-[#344053]' : 'text-[#667084]'
+                playgroundMode === 'api' ? 'text-gray-700' : 'text-gray-500'
               "
             >
               API
@@ -49,7 +49,7 @@
       </div>
 
       <div class="p-4">
-        <div class="text-[#344053] text-base font-medium leading-normal mb-4">
+        <div class="text-gray-700 text-base font-medium leading-normal mb-4">
           {{ $t('endpoints.playground.parameters') }}
         </div>
         <el-form
@@ -143,7 +143,7 @@
       <div class="px-4 mb-4 flex justify-between items-center">
         <div class="items-center gap-1.5 flex cursor-not-allowed">
           <SvgIcon name="json" />
-          <div class="text-[#98a1b2] text-xs leading-[18px]">
+          <div class="text-gray-400 text-xs leading-[18px]">
             {{ $t('endpoints.playground.json') }}
           </div>
         </div>
@@ -152,7 +152,7 @@
           @click="dialogVisible = true"
         >
           <SvgIcon name="fullscreen" />
-          <div class="text-[#475466] text-xs leading-[18px]">
+          <div class="text-gray-700 text-xs leading-[18px]">
             {{ $t('endpoints.playground.maximum') }}
           </div>
         </div>
diff --git a/frontend/src/components/endpoints/EndpointSettings.vue b/frontend/src/components/endpoints/EndpointSettings.vue
index 6a5da0da0..7b30b8973 100644
--- a/frontend/src/components/endpoints/EndpointSettings.vue
+++ b/frontend/src/components/endpoints/EndpointSettings.vue
@@ -1,11 +1,11 @@
 <template>
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]"
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]"
   >
     <!-- 暂停 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.stopEndpoint') }}
         </div>
       </div>
@@ -27,7 +27,7 @@
     <!-- 重启 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.restartEndpoint') }}
         </div>
       </div>
@@ -47,15 +47,15 @@
     <!-- cloud resource -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.resource') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('endpoints.settings.resourceTip') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('endpoints.settings.currentCloudResource') }}
         </p>
         <el-select
@@ -82,12 +82,12 @@
     <!-- framework -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.framework') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('endpoints.settings.currentFramework') }}
         </p>
         <el-select
@@ -113,12 +113,12 @@
     <!-- max replica -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.maxReplica') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('endpoints.settings.currentMaxReplica') }}
         </p>
         <el-select
@@ -144,12 +144,12 @@
     <!-- min replica -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.minReplica') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('endpoints.settings.currentMinReplica') }}
         </p>
         <el-select
@@ -175,10 +175,10 @@
     <!-- 修改可见性 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.changeVisibility') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('endpoints.settings.statusText') }}
           <span class="text-black font-semibold"
             >【{{
@@ -193,7 +193,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('endpoints.settings.visibility') }}
         </p>
         <el-select
@@ -219,10 +219,10 @@
     <!-- 删除 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.deleteEndpoint') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('endpoints.settings.delTips') }}
           <span class="text-black font-medium">{{ $t('all.canNot') }}</span>
           {{ $t('endpoints.settings.delTips2') }}
@@ -231,7 +231,7 @@
           }}</span>
           {{ $t('endpoints.settings.delTips3') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('all.enterPls') }}
           <span class="text-black font-medium break-words">
             {{ `${endpointName}/${endpointId}` }}
@@ -240,7 +240,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('endpoints.settings.namespaceName') }}
         </p>
         <el-input
@@ -253,11 +253,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === `${endpointName}/${endpointId}`
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave"
@@ -531,14 +531,14 @@
     if (delDesc.value !== '') {
       document
         .getElementById('confirmDelete')
-        .classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+        .classList.replace('bg-error-600', 'bg-error-700')
     }
   }
 
   const handleMouseLeave = () => {
     document
       .getElementById('confirmDelete')
-      .classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+      .classList.replace('bg-error-700', 'bg-error-600')
   }
 
   const clickDelete = () => {
diff --git a/frontend/src/components/endpoints/NewEndpoint.vue b/frontend/src/components/endpoints/NewEndpoint.vue
index 7c5cd0c85..c8410d41a 100644
--- a/frontend/src/components/endpoints/NewEndpoint.vue
+++ b/frontend/src/components/endpoints/NewEndpoint.vue
@@ -6,10 +6,10 @@
         width="36"
         height="36" />
     </div>
-    <h3 class="text-[#303133] text-xl font-semibold mt-6 mb-3">
+    <h3 class="text-gray-700 text-xl font-semibold mt-6 mb-3">
       {{ t('endpoints.new.title') }}
     </h3>
-    <p class="text-[#606266] text-base font-medium md:text-center">
+    <p class="text-gray-500 text-base font-medium md:text-center">
       {{ t('endpoints.new.desc') }}
     </p>
     <div class="mt-9">
@@ -145,10 +145,10 @@
               :value="item.id"
               :disabled="!item.is_available" />
           </el-select>
-          <p class="text-[#475467] mt-2 font-light">
+          <p class="text-gray-600 mt-2 font-light">
             {{ t('endpoints.new.resourceTip1') }}
           </p>
-          <p class="text-[#475467] font-light">
+          <p class="text-gray-600 font-light">
             {{ t('endpoints.new.resourceTip2') }}
           </p>
         </el-form-item>
@@ -184,7 +184,7 @@
           <el-form-item>
             <el-button
               :loading="loading"
-              class="!text-center !h-9 !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]"
+              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
               @click="handleSubmit">
               {{ t('endpoints.new.createEndpoint') }}
             </el-button>
diff --git a/frontend/src/components/endpoints/playground/ApiExample.vue b/frontend/src/components/endpoints/playground/ApiExample.vue
index 048b7d1e1..4a5122d4e 100644
--- a/frontend/src/components/endpoints/playground/ApiExample.vue
+++ b/frontend/src/components/endpoints/playground/ApiExample.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="h-[77px] w-full p-4 bg-white border-b border-[#eaecf0] items-center gap-2 inline-flex rounded-tr-2xl"
+    class="h-[77px] w-full p-4 bg-white border-b border-gray-200 items-center gap-2 inline-flex rounded-tr-2xl"
   >
     <SvgIcon name="playground_api" />
-    <div class="text-[#344053] text-base font-medium leading-normal">
+    <div class="text-gray-700 text-base font-medium leading-normal">
       {{ $t('endpoints.playground.api') }}
     </div>
   </div>
@@ -12,11 +12,11 @@
     <div class="h-[34px] w-full justify-between items-center inline-flex">
       <div class="justify-start items-center gap-4 flex">
         <div
-          class="text-center text-xs font-normal leading-[18px] flex items-center gap-1 px-2 py-[3px] border border-[#cfd4dc] rounded cursor-pointer"
+          class="text-center text-xs font-normal leading-[18px] flex items-center gap-1 px-2 py-[3px] border  border-gray-300 rounded cursor-pointer"
           :class="
             codeExtension === 'py'
-              ? 'bg-[#0f1728] text-white'
-              : 'bg-[#fff] text-[#344053]'
+              ? 'bg-gray-900 text-white'
+              : 'bg-white text-gray-700'
           "
           @click="changeLanguage('py')"
         >
@@ -24,11 +24,11 @@
           Python
         </div>
         <div
-          class="text-center text-xs font-normal leading-[18px] flex items-center gap-1 px-2 py-[3px] border border-[#cfd4dc] rounded cursor-pointer"
+          class="text-center text-xs font-normal leading-[18px] flex items-center gap-1 px-2 py-[3px] border  border-gray-300 rounded cursor-pointer"
           :class="
             codeExtension === 'js'
-              ? 'bg-[#0f1728] text-white'
-              : 'bg-[#fff] text-[#344053]'
+              ? 'bg-gray-900 text-white'
+              : 'bg-white text-gray-700'
           "
           @click="changeLanguage('js')"
         >
@@ -36,11 +36,11 @@
           JavaScript
         </div>
         <div
-          class="text-center text-xs font-normal leading-[18px] flex items-center gap-1 px-2 py-[3px] border border-[#cfd4dc] rounded cursor-pointer"
+          class="text-center text-xs font-normal leading-[18px] flex items-center gap-1 px-2 py-[3px] border  border-gray-300 rounded cursor-pointer"
           :class="
             codeExtension === 'bash'
-              ? 'bg-[#0f1728] text-white'
-              : 'bg-[#fff] text-[#344053]'
+              ? 'bg-gray-900 text-white'
+              : 'bg-white text-gray-700'
           "
           @click="changeLanguage('bash')"
         >
@@ -55,14 +55,14 @@
       />
     </div>
     <div
-      class="rounded-xl border border-[#eaecf0] px-4 py-6 mt-4 relative group"
+      class="rounded-xl border border-gray-200 px-4 py-6 mt-4 relative group"
     >
       <CodeViewer
         :content="codeContent"
         :extension="codeExtension"
       />
       <div
-        class="absolute bg-white text-xs text-[#344053] right-6 top-6 px-[16px] py-[8px] border rounded-lg shadow cursor-pointer items-center gap-1 hidden group-hover:flex"
+        class="absolute bg-white text-xs text-gray-700 right-6 top-6 px-[16px] py-[8px] border rounded-lg shadow cursor-pointer items-center gap-1 hidden group-hover:flex"
         @click="copyCode"
       >
         <SvgIcon name="copy" />
diff --git a/frontend/src/components/endpoints/playground/TestEndpoint.vue b/frontend/src/components/endpoints/playground/TestEndpoint.vue
index 57794ad42..58a0d4eb6 100644
--- a/frontend/src/components/endpoints/playground/TestEndpoint.vue
+++ b/frontend/src/components/endpoints/playground/TestEndpoint.vue
@@ -1,22 +1,22 @@
 <template>
   <div
-    class="h-[77px] w-full p-4 bg-white border-b border-[#eaecf0] items-center gap-2 inline-flex rounded-tr-2xl"
+    class="h-[77px] w-full p-4 bg-white border-b border-gray-200 items-center gap-2 inline-flex rounded-tr-2xl"
   >
     <SvgIcon name="playground_test" />
-    <div class="text-[#344053] text-base font-medium leading-normal">
+    <div class="text-gray-700 text-base font-medium leading-normal">
       {{ $t('endpoints.playground.test') }}
     </div>
   </div>
 
   <div class="p-4">
     <div
-      class="text-[#344053] text-sm font-medium leading-tight mb-4 flex items-center gap-2"
+      class="text-gray-700 text-sm font-medium leading-tight mb-4 flex items-center gap-2"
     >
       <SvgIcon name="text_generation" />
       {{ $t('endpoints.playground.generation') }}
     </div>
     <div
-      class="min-h-[180px] px-3.5 py-3 bg-white rounded-lg shadow border border-[#cfd4dc] text-[#0f1728] text-base font-light leading-normal mb-4 overflow-auto"
+      class="min-h-[180px] px-3.5 py-3 bg-white rounded-lg shadow border  border-gray-300 text-gray-700 text-base font-light leading-normal mb-4 overflow-auto"
     >
       <MarkdownViewer :content="anwserContent" />
     </div>
@@ -24,8 +24,8 @@
       class="flex items-center justify-between p-3 gap-2 rounded-lg shadow border relative"
       :class="
         inputFocus
-          ? 'border-[#6483f8] [box-shadow:rgba(16,_24,_40,_0.05)_0px_1px_2px,_rgba(77,_106,_214,_0.24)_0px_0px_0px_4px]'
-          : 'border-[#cfd4dc]'
+          ? 'border-brand-300 [box-shadow:rgba(16,_24,_40,_0.05)_0px_1px_2px,_rgba(77,_106,_214,_0.24)_0px_0px_0px_4px]'
+          : ' border-gray-300'
       "
       v-loading="loading"
     >
@@ -40,17 +40,17 @@
       ></el-input>
 
       <div
-        class="h-[34px] px-3 py-2 rounded-lg shadow border border-[#eaecf0] justify-center items-center gap-1 inline-flex flex-shrink-0"
+        class="h-[34px] px-3 py-2 rounded-lg shadow border border-gray-200 justify-center items-center gap-1 inline-flex flex-shrink-0"
         :class="
           canSendMessage
-            ? 'bg-[#3250bd] cursor-pointer'
+            ? 'bg-brand-600 cursor-pointer'
             : 'bg-[#f2f3f6] cursor-not-allowed'
         "
         @click="handleSendMessage"
       >
         <div
           class="text-xs font-normal flex items-center justify-center gap-1"
-          :class="canSendMessage ? 'text-[#fff]' : 'text-[#98a1b2]'"
+          :class="canSendMessage ? 'text-white' : 'text-gray-400'"
         >
           <SvgIcon name="send_message" />
           {{ $t('endpoints.playground.send') }}
@@ -60,7 +60,7 @@
 
     <div class="flex mt-[8px]"> 
       <SvgIcon name="exclamation_point" class="place-self-start" /> 
-      <p class="ml-[4px] text-[12px] leading-[18px] text-[#667085]">{{ $t('widgets.liabilityExemption') }}</p>
+      <p class="ml-[4px] text-[12px] leading-[18px] text-gray-500">{{ $t('widgets.liabilityExemption') }}</p>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/error/LoginFailed.vue b/frontend/src/components/error/LoginFailed.vue
index e513b79a8..11bfc210c 100644
--- a/frontend/src/components/error/LoginFailed.vue
+++ b/frontend/src/components/error/LoginFailed.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="error_page_bg h-[calc(100vh-80px)] min-h-[500px] flex items-center justify-center m-auto">
     <div class="flex flex-col items-center">
-      <div class="flex flex-col gap-[24px] items-center text-center mt-[24px] px-[16px] text-[#303133]">
+      <div class="flex flex-col gap-[24px] items-center text-center mt-[24px] px-[16px] text-gray-700">
         <div class="rounded-lg border border-gray-200 bg-white shadow-xs p-[14px]">
           <svg-icon name="login_failed"></svg-icon>
         </div>
@@ -14,7 +14,7 @@
             </button>
           </a>
           <a href="/login">
-            <button class="text-[18px] text-white flex px-[22px] py-[16px] items-center justify-center gap-[8px] rounded border border-gray-400 bg-[#3250BD] shadow-sm">
+            <button class="text-[18px] text-white flex px-[22px] py-[16px] items-center justify-center gap-[8px] rounded border border-gray-400 bg-brand-600 shadow-sm">
               {{ $t('errors_page.login_failed.relogin') }}
             </button>
           </a>
diff --git a/frontend/src/components/error/Unauthorized.vue b/frontend/src/components/error/Unauthorized.vue
index c098b3157..474837741 100644
--- a/frontend/src/components/error/Unauthorized.vue
+++ b/frontend/src/components/error/Unauthorized.vue
@@ -4,7 +4,7 @@
 
     <div class="h-[calc(100vh-80px)] min-h-[500px] flex items-center justify-center m-auto">
       <div class="flex flex-col items-center" style="position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; padding: 40px;">
-        <div class="Badge h-14 px-3.5 py-3.5 bg-white rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] border border-[#EAECF0] justify-start items-center gap-1.5 inline-flex">
+        <div class="Badge h-14 px-3.5 py-3.5 bg-white rounded-lg shadow-[0px_1px_2px_0px_rgba(16,24,40,0.05)] border border-gray-200 justify-start items-center gap-1.5 inline-flex">
           <div class="flex items-center justify-center w-7 h-7">
             <img src="/images/icons/lock-01.svg" alt="Lock" />
           </div>
diff --git a/frontend/src/components/finetune/FinetuneDetail.vue b/frontend/src/components/finetune/FinetuneDetail.vue
index 8111c6e56..1b14aaaec 100644
--- a/frontend/src/components/finetune/FinetuneDetail.vue
+++ b/frontend/src/components/finetune/FinetuneDetail.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full bg-[#FCFCFD] pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
+  <div class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto">
     <div class="mx-auto max-w-[1280px]">
       <repo-header
         :name="finetune.deploy_name"
@@ -20,7 +20,7 @@
       v-show="activeName == 'page' && finetune.endpoint"
       color="#3250BD"
       style="border-radius: 8px !important"
-      class="absolute top-0 right-0 z-10 cursor-pointer text-[#fff]"
+      class="absolute top-0 right-0 z-10 cursor-pointer text-white"
       @click="toNotebookPage"
       >{{ $t('finetune.detail.notebook') }}</el-button
     >
@@ -46,9 +46,9 @@
           </iframe>
           <div
             v-else
-            class="flex items-center justify-start border border-[#D0D5DD] p-[16px] rounded-xl shadow-sm"
+            class="flex items-center justify-start border border-gray-300 p-[16px] rounded-xl shadow-sm"
           >
-            <div class="border border-[#D0D5DD] p-[10px] rounded-lg">
+            <div class="border border-gray-300 p-[10px] rounded-lg">
               <SvgIcon
                 name="finetune_tip"
                 width="20"
@@ -56,10 +56,10 @@
               />
             </div>
             <div class="ml-[16px]">
-              <p class="text-[#344054] text-sm font-medium mb-[4px]">
+              <p class="text-gray-700 text-sm font-medium mb-[4px]">
                 {{ $t('finetune.detail.noDataTip1') }}
               </p>
-              <p class="text-[#475467] text-sm font-light">
+              <p class="text-gray-600 text-sm font-light">
                 {{ $t('finetune.detail.noDataTip2') }}
               </p>
             </div>
diff --git a/frontend/src/components/finetune/FinetuneSettings.vue b/frontend/src/components/finetune/FinetuneSettings.vue
index 77814618f..ac0163531 100644
--- a/frontend/src/components/finetune/FinetuneSettings.vue
+++ b/frontend/src/components/finetune/FinetuneSettings.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]"
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]"
   >
     <!-- 英文名称 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('finetune.detail.settings.enName') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('finetune.detail.settings.enNameTip1') }}
         </div>
       </div>
@@ -27,10 +27,10 @@
     <!-- 别名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('finetune.detail.settings.cnName') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('finetune.detail.settings.cnNameTip1') }}
         </div>
       </div>
@@ -49,7 +49,7 @@
     <!-- 暂停 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.stopEndpoint') }}
         </div>
       </div>
@@ -70,7 +70,7 @@
     <!-- 重启 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('endpoints.settings.restartEndpoint') }}
         </div>
       </div>
@@ -90,18 +90,18 @@
     <!-- 区域 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('finetune.detail.settings.region') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('finetune.detail.settings.regionTip1') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('finetune.detail.settings.regionTip2') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('finetune.detail.settings.regionTip3') }}
         </p>
         <el-select
@@ -125,18 +125,18 @@
     <!-- 空间云资源 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('finetune.detail.settings.resources') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('finetune.detail.settings.resourcesTip1') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('finetune.detail.settings.resourcesTip2') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('finetune.detail.settings.resourcesTip3') }}
         </p>
         <el-select
@@ -162,17 +162,17 @@
     <!-- 删除 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('finetune.detail.settings.delete') }}
         </div>
-        <div class="text-[14px] text-[#475467] font-light leading-[20px]">
+        <div class="text-[14px] text-gray-600 font-light leading-[20px]">
           {{ $t('finetune.detail.settings.deleteTip1') }}
           <span class="text-black font-medium break-words">{{
             props.modelId
           }}</span>
           {{ $t('finetune.detail.settings.deleteTip2') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('all.enterPls') }}
           <span class="text-black font-medium break-words">
             {{ `${finetuneName}/${finetuneId}` }}
@@ -181,7 +181,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('finetune.detail.settings.finetuneName') }}
         </p>
         <el-input
@@ -194,11 +194,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === `${finetuneName}/${finetuneId}`
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave"
@@ -375,14 +375,14 @@
     if (delDesc.value !== '') {
       document
         .getElementById('confirmDelete')
-        .classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+        .classList.replace('bg-error-600', 'bg-error-700')
     }
   }
 
   const handleMouseLeave = () => {
     document
       .getElementById('confirmDelete')
-      .classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+      .classList.replace('bg-error-700', 'bg-error-600')
   }
 
   const clickDelete = () => {
diff --git a/frontend/src/components/finetune/NewFinetune.vue b/frontend/src/components/finetune/NewFinetune.vue
index 366d8f66e..a2469decf 100644
--- a/frontend/src/components/finetune/NewFinetune.vue
+++ b/frontend/src/components/finetune/NewFinetune.vue
@@ -6,10 +6,10 @@
         width="36"
         height="36" />
     </div>
-    <h3 class="text-[#303133] text-xl font-semibold mt-6 mb-3">
+    <h3 class="text-gray-700 text-xl font-semibold mt-6 mb-3">
       {{ t('finetune.new.title') }}
     </h3>
-    <p class="text-[#606266] text-base font-medium md:text-center">
+    <p class="text-gray-500 text-base font-medium md:text-center">
       {{ t('finetune.new.desc') }}
     </p>
     <div class="mt-9 w-full">
@@ -85,10 +85,10 @@
               :value="item.cluster_id" />
           </el-select>
           <div class="flex flex-col">
-            <p class="text-[#475467] mt-2 font-light">
+            <p class="text-gray-600 mt-2 font-light">
               {{ $t('finetune.new.clusterDec1') }}
             </p>
-            <p class="text-[#475467] font-light">
+            <p class="text-gray-600 font-light">
               {{ $t('finetune.new.clusterDec2') }}
             </p>
           </div>
@@ -113,10 +113,10 @@
               :disabled="!item.is_available" />
           </el-select>
           <div class="flex flex-col">
-            <p class="text-[#475467] mt-2 font-light">
+            <p class="text-gray-600 mt-2 font-light">
               {{ t('finetune.new.resourceDec1') }}
             </p>
-            <p class="text-[#475467] font-light">
+            <p class="text-gray-600 font-light">
               {{ t('finetune.new.resourceDec2') }}
             </p>
           </div>
@@ -145,7 +145,7 @@
           <el-form-item>
             <el-button
               :loading="loading"
-              class="!text-center !h-9 !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]"
+              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
               @click="handleSubmit">
               {{ t('finetune.new.createFinetune') }}
             </el-button>
diff --git a/frontend/src/components/form/sub/FormLabel.vue b/frontend/src/components/form/sub/FormLabel.vue
index 20b6e64f8..f79194f4c 100644
--- a/frontend/src/components/form/sub/FormLabel.vue
+++ b/frontend/src/components/form/sub/FormLabel.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center gap-x-[4px] mb-[8px]">
-    <label class="text-[#303133] text-[14px]">{{ labelName }}</label>
+    <label class="text-gray-700 text-[14px]">{{ labelName }}</label>
     <svg v-if="required" xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewBox="0 0 6 6" fill="none">
       <path
           d="M2.21714 5.2179L3.35474 3.8499L4.49234 5.2179L5.12594 4.7571L4.20434 3.2595L5.77394 2.6115L5.52914 1.8771L3.88754 2.2659L3.74354 0.537903H2.96594L2.82194 2.2803L1.18034 1.8771L0.921143 2.6115L2.49074 3.2595L1.58354 4.7571L2.21714 5.2179Z"
diff --git a/frontend/src/components/models/ModelRelationsCard.vue b/frontend/src/components/models/ModelRelationsCard.vue
index f0d9fdfd7..2eaa27f6f 100644
--- a/frontend/src/components/models/ModelRelationsCard.vue
+++ b/frontend/src/components/models/ModelRelationsCard.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="p-[16px] border-t border-[#EBEEF5]">
+  <div class="p-[16px] border-t border-gray-200">
     <h3 class="flex items-center gap-[8px]">
       <SvgIcon name="models" width="18px" height="18px" />
-      <span class="font-[500] text-[#344054] text-[16px] leading-[24px]"> {{ $t('models.modelsUsedToTrain') }} </span>
-      <span class="text-[#344054]"> {{ namespacePath }} </span>
+      <span class="font-[500] text-gray-700 text-[16px] leading-[24px]"> {{ $t('models.modelsUsedToTrain') }} </span>
+      <span class="text-gray-700"> {{ namespacePath }} </span>
     </h3>
     <div class="mt-[16px] flex flex-col gap-[12px]">
       <RepoItem v-for="model in models" :repo="model" repoType="model" cardType="relations" />
diff --git a/frontend/src/components/models/ModelSettings.vue b/frontend/src/components/models/ModelSettings.vue
index d10528ee0..e6a9d3af9 100644
--- a/frontend/src/components/models/ModelSettings.vue
+++ b/frontend/src/components/models/ModelSettings.vue
@@ -1,22 +1,22 @@
 <template>
   <div
-    class="border border-[#DCDFE6] rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
+    class="border border-gray-200 rounded-[8px] my-[32px] md:my-0 md:border-none px-[24px] py-[24px]">
     <!-- 展示英文名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('models.modelName') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('models.modelNameTips') }}
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('models.namespaceModelName') }}
         </p>
         <div
-          class="w-[512px] sm:w-full rounded-[8px] bg-[#F9FAFB] px-[14px] py-[10px] border">
+          class="w-[512px] sm:w-full rounded-[8px] bg-gray-50 px-[14px] py-[10px] border">
           {{ modelPath }}
         </div>
       </div>
@@ -27,10 +27,10 @@
     <!-- 更新模型别名 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('models.modelNickName') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('models.edit.tips') }}
         </div>
       </div>
@@ -53,10 +53,10 @@
     <!-- 更新模型简介 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('models.modelDesc') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('models.edit.tips2') }}
         </div>
       </div>
@@ -80,17 +80,17 @@
     <!-- 模型标签 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('models.modelTag') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('models.edit.tips3') }}
         </div>
       </div>
       <div
         class="flex flex-col gap-[6px]"
         ref="tagListContainer">
-        <p class="text-[#344054] text-[14px]">{{ $t('models.modelTag') }}</p>
+        <p class="text-gray-700 text-[14px]">{{ $t('models.modelTag') }}</p>
         <div class="flex flex-col gap-[6px] w-[512px] md:w-full">
           <div
             class="flex gap-[4px] flex-wrap items-center w-full border rounded-[4px] border-gray-300 min-h-[40px] p-[6px]">
@@ -138,17 +138,17 @@
     <!-- 行业标签 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('models.modelIndustryTag') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('models.edit.tips3') }}
         </div>
       </div>
       <div
         class="flex flex-col gap-[6px]"
         ref="IndustryTagListContainer">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('models.modelIndustryTag') }}
         </p>
         <div class="flex flex-col gap-[6px] w-[512px] md:w-full">
@@ -202,10 +202,10 @@
     <!-- 修改可见性 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('models.edit.changeVisibility') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('models.edit.statusText') }}
           <span class="text-black font-semibold"
             >[{{
@@ -220,7 +220,7 @@
         </div>
       </div>
       <div class="flex flex-col gap-[6px]">
-        <p class="text-[#344054] text-[14px]">
+        <p class="text-gray-700 text-[14px]">
           {{ $t('models.edit.modelVisibility') }}
         </p>
         <el-select
@@ -243,24 +243,24 @@
     <!-- 删除模型 -->
     <div class="flex xl:flex-col gap-[32px]">
       <div class="w-[380px] sm:w-full flex flex-col gap-[6px]">
-        <div class="text-[14px] text-[#344054] leading-[20px] font-medium">
+        <div class="text-[14px] text-gray-700 leading-[20px] font-medium">
           {{ $t('models.edit.delModel') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('models.edit.delTips') }}
           <span class="text-black font-medium">{{ $t('models.edit.canNot') }}</span>
           {{ $t('models.edit.delTips2') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('models.edit.delTips3') }}
         </div>
-        <div class="text-[14px] text-[#475467] leading-[20px]">
+        <div class="text-[14px] text-gray-600 leading-[20px]">
           {{ $t('all.enterPls') }}
           <span class="text-black font-medium break-words">{{ path }}</span>
           {{ $t('all.sureDel') }}
         </div>
       </div>
       <div class="flex flex-col gap-[8px]">
-        <p class="text-[#344054] text-[14px]">{{ $t('models.modelName') }}</p>
+        <p class="text-gray-700 text-[14px]">{{ $t('models.modelName') }}</p>
         <el-input
           v-model="delDesc"
           clearable
@@ -270,11 +270,11 @@
           <div
             id="confirmDelete"
             @click="clickDelete"
-            class="text-[#98A2B3] py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
+            class="text-gray-400 py-[8px] px-[12px] text-[14px] leading-[20px] rounded-[8px]"
             :class="
               delDesc === modelPath
-                ? 'bg-[#D92D20] text-[#FFFFFF] cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-[#D92D20] hover:text-white'
-                : 'bg-[#F2F4F7]'
+                ? 'bg-error-600 text-white cursor-pointer active:shadow-box active:space-y-0 active:space-x-0 active:ring-4 active:ring-red-400 active:ring-opacity-25 active:bg-error-600 hover:text-white'
+                : 'bg-gray-100'
             "
             @mouseover="handleMouseOver"
             @mouseleave="handleMouseLeave">
@@ -656,13 +656,13 @@
         if (this.delDesc !== '') {
           document
             .getElementById('confirmDelete')
-            .classList.replace('bg-[#D92D20]', 'bg-[#B42318]')
+            .classList.replace('bg-error-600', 'bg-error-700')
         }
       },
       handleMouseLeave() {
         document
           .getElementById('confirmDelete')
-          .classList.replace('bg-[#B42318]', 'bg-[#D92D20]')
+          .classList.replace('bg-error-700', 'bg-error-600')
       }
     }
   }
diff --git a/frontend/src/components/models/NewModel.vue b/frontend/src/components/models/NewModel.vue
index add9179ea..c18c6e9d7 100644
--- a/frontend/src/components/models/NewModel.vue
+++ b/frontend/src/components/models/NewModel.vue
@@ -7,10 +7,10 @@
         width="37"
       />
     </div>
-    <h3 class="text-[#303133] text-xl font-semibold mt-6 mb-3">
+    <h3 class="text-gray-700 text-xl font-semibold mt-6 mb-3">
       {{ t('models.newModel.title') }}
     </h3>
-    <p class="text-[#606266] text-base font-medium md:text-center">
+    <p class="text-gray-500 text-base font-medium md:text-center">
       {{ t('models.newModel.titleDesc') }}
     </p>
     <div class="mt-9">
@@ -137,7 +137,7 @@
           />
         </el-form-item>
         <p
-          class="mb-[18px] rounded bg-[#F0F3FF] text-[#4D6AD6] text-[13px] py-[9px] px-4"
+          class="mb-[18px] rounded bg-brand-25] text-brand-500 text-[13px] py-[9px] px-4"
         >
           {{ t('models.newModel.tips') }}
         </p>
@@ -145,7 +145,7 @@
           <el-form-item>
             <el-button
               :loading="loading"
-              class="!text-center !h-9 !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]"
+              class="!text-center !h-9 !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
               @click="handleSubmit"
             >
               {{ t('models.newModel.createModel') }}
diff --git a/frontend/src/components/models/widgets/QuestionAnswer.vue b/frontend/src/components/models/widgets/QuestionAnswer.vue
index cf51e940f..ac602da9c 100644
--- a/frontend/src/components/models/widgets/QuestionAnswer.vue
+++ b/frontend/src/components/models/widgets/QuestionAnswer.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="border-t border-[#EBEEF5] p-[16px]">
-    <h3 class="text-[16px] text-[#344054] font-[500] mb-[16px]">{{ $t('widgets.onlineDemo') }}</h3>
-    <p class="text-[#344054] text-[14px] mb-[6px]">{{ $t('widgets.testInput') }}</p>
+  <div class="border-t border-gray-200 p-[16px]">
+    <h3 class="text-[16px] text-gray-700 font-[500] mb-[16px]">{{ $t('widgets.onlineDemo') }}</h3>
+    <p class="text-gray-700 text-[14px] mb-[6px]">{{ $t('widgets.testInput') }}</p>
     <el-input
       v-model="textInput"
       :rows="3"
@@ -17,7 +17,7 @@
         <span class="text-[14px]">参数调整</span>
       </div>
       <div class="flex justify-center items-center gap-[8px]">
-        <p class="text-[16px] text-[#667085]"> {{ `${$t('widgets.testInput')}: ${textInputLength}` }} / 1000 </p>
+        <p class="text-[16px] text-gray-500"> {{ `${$t('widgets.testInput')}: ${textInputLength}` }} / 1000 </p>
         <button v-if="loading"
                 class="flex px-[12px] py-[8px] justify-center items-center gap-[4px] rounded-lg border border-gray-300 bg-gray-300 shadow-sm text-white text-[14px] font-[500]"
                 @click="sendInferenceTest"
@@ -33,15 +33,15 @@
         </button>
       </div>
     </div>
-    <p class="text-[#344054] text-[14px] mb-[6px]">{{ $t('widgets.testOutput') }}</p>
+    <p class="text-gray-700 text-[14px] mb-[6px]">{{ $t('widgets.testOutput') }}</p>
     <div class="h-[130px] p-[10px] border markdown-body rounded-md border-gray-300 bg-white shadow-xs overflow-scroll"
          v-loading="loading"
          v-html="renderMarkdown(textOutput)"
     ></div>
-    <p v-if="timeSpend != 0" class="text-[#667085] text-[14px] mt-[16px]">{{ `${$t('widgets.timeCost')}: ${timeSpend}` }} ms</p>
+    <p v-if="timeSpend != 0" class="text-gray-500 text-[14px] mt-[16px]">{{ `${$t('widgets.timeCost')}: ${timeSpend}` }} ms</p>
     <div> 
       <SvgIcon name="exclamation_point" /> 
-      <p class="ml-[4px] text-[12px] leading-[18px] text-[#667085]">{{ $t('widgets.liabilityExemption') }}</p>
+      <p class="ml-[4px] text-[12px] leading-[18px] text-gray-500">{{ $t('widgets.liabilityExemption') }}</p>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/navbar/TheNavbar.vue b/frontend/src/components/navbar/TheNavbar.vue
index 23ee3be3a..73e17152c 100644
--- a/frontend/src/components/navbar/TheNavbar.vue
+++ b/frontend/src/components/navbar/TheNavbar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="bg-white sticky top-0 z-[999]">
     <div
-      class="flex text-[#303133] justify-between items-center max-w-[1320px] px-[20px] m-auto h-[80px] sm:h-[60px] gap-[40px]">
+      class="flex text-gray-700 justify-between items-center max-w-[1320px] px-[20px] m-auto h-[80px] sm:h-[60px] gap-[40px]">
       <!-- pc logo -->
       <div class="flex">
         <a href="/">
diff --git a/frontend/src/components/new_admin/AdminNavbar.vue b/frontend/src/components/new_admin/AdminNavbar.vue
index 3cadc7e2d..8e93cfd66 100644
--- a/frontend/src/components/new_admin/AdminNavbar.vue
+++ b/frontend/src/components/new_admin/AdminNavbar.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="w-full h-[60px] bg-[#1C7A6C]">
     <div class="max-w-[1280px] m-auto h-full flex justify-between items-center">
-      <p class="font-[700] text-[#D1DDD0]"> OpenCSG Admin Panel </p>
-      <a href="/" target="_blank" class="font-[500] text-[#D1DDD0] underline"> Open Site </a>
-      <p class="text-[#D1DDD0]">{{ userName }} ( {{ userRoles }} )</p>
+      <p class="font-[700] text-white"> OpenCSG Admin Pannel </p>
+      <a href="/" target="_blank" class="font-[500] text-white underline"> Open Site </a>
+      <p class="text-white">{{ userName }} ( {{ userRoles }} )</p>
     </div>
   </div>
 </template>
diff --git a/frontend/src/components/new_admin/system_configs/AdminSystemConfig.vue b/frontend/src/components/new_admin/system_configs/AdminSystemConfig.vue
index b0cfe8ee4..f2f46633b 100644
--- a/frontend/src/components/new_admin/system_configs/AdminSystemConfig.vue
+++ b/frontend/src/components/new_admin/system_configs/AdminSystemConfig.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-[30px]">
     <h3 class="text-[18px] font-[500] mb-[8px]">Application ENV</h3>
-    <p class="text-[#606266]">{{ systemConfigs.application_env }}</p>
+    <p class="text-gray-500">{{ systemConfigs.application_env }}</p>
   </div>
 </template>
 
diff --git a/frontend/src/components/organizations/InviteMember.vue b/frontend/src/components/organizations/InviteMember.vue
index f241c4843..65255ac33 100644
--- a/frontend/src/components/organizations/InviteMember.vue
+++ b/frontend/src/components/organizations/InviteMember.vue
@@ -20,7 +20,7 @@
       <template #header>
         <div class="flex justify-between">
           <div
-            class="px-[12px] py-[12px] rounded-[10px] border-[2px] border-[#EAECF0]"
+            class="px-[12px] py-[12px] rounded-[10px] border-[2px] border-gray-200"
           >
             <SvgIcon name="invite_org_member" />
           </div>
@@ -32,17 +32,17 @@
       </template>
       <!-- dialog content -->
       <div class="relative">
-        <div class="text-[18px] leading-[28px] text-[#101828]">
+        <div class="text-[18px] leading-[28px] text-gray-900">
           {{ $t('organization.invite.inviteNew') }}
         </div>
-        <span class="text-[14px] leading-[20px] text-[#475467] font-light"
+        <span class="text-[14px] leading-[20px] text-gray-600 font-light"
           >{{ $t('organization.invite.inviteDesc') }}
           <span class="font-bold">{{ orgName }}</span></span
         >
         <div class="mt-[20px]">
           <div>
             <div class="mb-[20px]">
-              <p class="text-[#344054] text-[14px] mb-[6px]">
+              <p class="text-gray-700 text-[14px] mb-[6px]">
                 {{ $t('all.role') }}
               </p>
               <el-select
@@ -59,7 +59,7 @@
                 />
               </el-select>
             </div>
-            <p class="text-[#344054] text-[14px] mb-[6px]">
+            <p class="text-gray-700 text-[14px] mb-[6px]">
               {{ $t('all.userName') }}
             </p>
             <div
diff --git a/frontend/src/components/organizations/Menu.vue b/frontend/src/components/organizations/Menu.vue
index dc9e675cf..28c7aaa6f 100644
--- a/frontend/src/components/organizations/Menu.vue
+++ b/frontend/src/components/organizations/Menu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="border-r border-[#EAECF0]">
+  <div class="border-r border-gray-200">
     <div class="w-[294px] rounded-[8px] mx-[24px] py-[24px]">
       <div class="flex p-[16px] pt-[16px]">
         <el-avatar
@@ -17,20 +17,20 @@
             </a>
           </div>
           <div
-            class="max-w-[190px] text-ellipsis overflow-hidden whitespace-nowrap text-[16px] text-[#909399] leading-[24px]"
+            class="max-w-[190px] text-ellipsis overflow-hidden whitespace-nowrap text-[16px] text-gray-500 leading-[24px]"
             :title="homepage"
           >
             {{ homepage }}
           </div>
         </div>
       </div>
-      <div class="p-[16px] text-[20px] leading-[30px] text-[#344054]">
+      <div class="p-[16px] text-[20px] leading-[30px] text-gray-700">
         {{ $t('organization.orgSetting') }}
       </div>
       <div class="flex flex-col">
         <a
           :href="`/organizations/${this.name}/edit`"
-          class="py-[8px] px-[12px] hover:bg-[#FAFAFA] text-[16px] text-[#667085] leading-[24px] cursor-pointer"
+          class="py-[8px] px-[12px] hover:bg-gray-50 text-[16px] text-gray-500 leading-[24px] cursor-pointer"
           :class="menuClass(`/organizations/${this.name}/edit`)"
         >
           {{ $t('organization.orgInfo') }}
@@ -40,7 +40,7 @@
       <div class="flex flex-col">
         <a
           :href="`/organizations/${this.name}/members`"
-          class="py-[8px] px-[12px] hover:bg-[#FAFAFA] text-[16px] text-[#667085] leading-[24px] cursor-pointer"
+          class="py-[8px] px-[12px] hover:bg-gray-50 text-[16px] text-gray-500 leading-[24px] cursor-pointer"
           :class="menuClass(`/organizations/${this.name}/members`)"
         >
           {{ $t('organization.orgMembers') }}
@@ -64,7 +64,7 @@
     methods: {
       menuClass(menuPath) {
         if (menuPath === window.location.pathname) {
-          return 'text-[#303133] font-semibold bg-[#FAFAFA] rounded-[6px]'
+          return 'text-gray-700 font-semibold bg-gray-50 rounded-[6px]'
         } else {
           return ''
         }
diff --git a/frontend/src/components/organizations/NewOrganization.vue b/frontend/src/components/organizations/NewOrganization.vue
index 5673fadda..abbecc083 100644
--- a/frontend/src/components/organizations/NewOrganization.vue
+++ b/frontend/src/components/organizations/NewOrganization.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="rounded-[16px] bg-white p-[36px] w-[655px] md:w-full border border-[1px] border-[#EAECF0] shadow-sm">
-    <h3 class="text-[#303133] text-[20px] font-[600]">{{ $t('organization.newOrganization.title') }}</h3>
+  <div class="rounded-[16px] bg-white p-[36px] w-[655px] md:w-full border border-[1px] border-gray-200 shadow-sm">
+    <h3 class="text-gray-700 text-[20px] font-[600]">{{ $t('organization.newOrganization.title') }}</h3>
     <el-form
       ref="dataFormRef"
       :model="dataForm"
@@ -15,7 +15,7 @@
           <template #prepend>{{getDomain()}}</template>
         </el-input>
         <div class="mt-[6px]">
-          <p class="text-[#475467] text-[14px] font-[300] leading-[20px]">{{ $t('organization.orgSpaceTips') }}</p>
+          <p class="text-gray-600 text-[14px] font-[300] leading-[20px]">{{ $t('organization.orgSpaceTips') }}</p>
         </div>
       </el-form-item>
 
@@ -74,7 +74,7 @@
           <div>
             <div class="el-upload__text">
               <p>
-                <span class="text-[#223B99] font-[500]">
+                <span class="text-brand-700 font-[500]">
                   {{ $t('components.upload.click_to_upload') }}
                 </span>
                 {{ $t('components.upload.or_drag_file') }}
@@ -88,7 +88,7 @@
 
       <el-form-item>
         <el-button
-          class="w-full !text-center !h-[48px] !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]"
+          class="w-full !text-center !h-[48px] !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600"
           @click="handleSubmit"
           :disabled="submitting"
         >
diff --git a/frontend/src/components/organizations/OrgMemberRoleEditDialog.vue b/frontend/src/components/organizations/OrgMemberRoleEditDialog.vue
index a631db9e0..d2c36b17e 100644
--- a/frontend/src/components/organizations/OrgMemberRoleEditDialog.vue
+++ b/frontend/src/components/organizations/OrgMemberRoleEditDialog.vue
@@ -8,15 +8,15 @@
   >
     <template #header="{ close }">
       <div class="flex justify-between">
-        <div class="px-[12px] py-[12px] rounded-full bg-[#ACBDFF] border-[8px] border-[#CED8FF]">
+        <div class="px-[12px] py-[12px] rounded-full bg-brand-100 border-[8px] border-brand-50">
           <SvgIcon name="edit_org_member_role" />
         </div>
         <img src="/images/invite_bg.png" class="w-[200px] absolute top-1 left-1" />
       </div>
     </template>
     <div class="flex justify-center flex-col m-auto w-full relative">
-      <div class="text-[18px] leading-[28px] text-[#101828]">{{ $t('organization.edit.role') }}</div>
-      <div class="text-[14px] leading-[20px] text-[#475467] font-light mb-5">{{ $t('organization.edit.roleTips') }}</div>
+      <div class="text-[18px] leading-[28px] text-gray-900">{{ $t('organization.edit.role') }}</div>
+      <div class="text-[14px] leading-[20px] text-gray-600 font-light mb-5">{{ $t('organization.edit.roleTips') }}</div>
       <el-form
       :model="dataForm"
       :rules="rules"
diff --git a/frontend/src/components/organizations/OrganizationDetail.vue b/frontend/src/components/organizations/OrganizationDetail.vue
index af1856b55..f130b04a2 100644
--- a/frontend/src/components/organizations/OrganizationDetail.vue
+++ b/frontend/src/components/organizations/OrganizationDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="py-[16px] bg-[#FAFCFF]">
+    <div class="py-[16px] bg-gray-25">
       <div class="max-w-[1280px] m-auto flex md:flex-col md:gap-4 items-center justify-between py-[16px] xl:px-[16px]">
         <div class="flex gap-[10px]">
           <span v-if="organizationData.verified" class="relative">
@@ -11,7 +11,7 @@
             <img :src="organizationData.avatar ? organizationData.avatar : '/images/default_org.png'" class="h-[60px] w-[60px] rounded-[50%]" />
           </span>
           <div>
-            <h3 class="text-[24px] text-[#303133] font-[600]"> {{ (organizationData.nickname && organizationData.nickname.trim()) || organizationData.name }}</h3>
+            <h3 class="text-[24px] text-gray-700 font-[600]"> {{ (organizationData.nickname && organizationData.nickname.trim()) || organizationData.name }}</h3>
             <p class="text-[16px]"> @{{ organizationData.name }} </p>
           </div>
         </div>
@@ -24,38 +24,38 @@
               </div>
             </template>
             <div>
-              <a :href="`/models/new?orgName=${organizationData.name}`" class="hover:bg-[#F9FAFB] cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
-                <div class="px-2 py-2 bg-[#F9F1F0]">
+              <a :href="`/models/new?orgName=${organizationData.name}`" class="hover:bg-gray-50 cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
+                <div class="px-2 py-2 bg-gray-50">
                   <SvgIcon name="models" />
                 </div>
-                <div class="text-[14px] leading-[20px] text-[#344054]">
+                <div class="text-[14px] leading-[20px] text-gray-700">
                   <div>{{ $t('models.title') }}</div>
                   <div class="font-light">{{ $t('models.tips') }}</div>
                 </div>
               </a>
-              <a :href="`/datasets/new?orgName=${organizationData.name}`" class="hover:bg-[#F9FAFB] cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
-                <div class="px-2 py-2 bg-[#E7EFF7]">
+              <a :href="`/datasets/new?orgName=${organizationData.name}`" class="hover:bg-gray-50 cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
+                <div class="px-2 py-2 bg-gray-50">
                   <SvgIcon name="datasets" />
                 </div>
-                <div class="text-[14px] leading-[20px] text-[#344054]">
+                <div class="text-[14px] leading-[20px] text-gray-700">
                   <div>{{ $t('datasets.title') }}</div>
                   <div class="font-light">{{ $t('datasets.tips') }}</div>
                 </div>
               </a>
-              <a :href="`/spaces/new?orgName=${organizationData.name}`" class="hover:bg-[#F9FAFB] cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
-                <div class="px-2 py-2 bg-[#F5F2FB]">
+              <a :href="`/spaces/new?orgName=${organizationData.name}`" class="hover:bg-gray-50 cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
+                <div class="px-2 py-2 bg-gray-50">
                   <SvgIcon name="spaces" />
                 </div>
-                <div class="text-[14px] leading-[20px] text-[#344054]">
+                <div class="text-[14px] leading-[20px] text-gray-700">
                   <div>{{ $t('spaces.title') }}</div>
                   <div class="font-light">{{ $t('spaces.tips') }}</div>
                 </div>
               </a>
-              <a  :href="`/codes/new?orgName=${organizationData.name}`" class="hover:bg-[#F9FAFB] cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
-                <div class="px-2 py-2 bg-[#F3F4F6]">
+              <a  :href="`/codes/new?orgName=${organizationData.name}`" class="hover:bg-gray-50 cursor-pointer flex gap-2 items-center py-[9px] px-[10px]">
+                <div class="px-2 py-2 bg-gray-50">
                   <SvgIcon name="codes" />
                 </div>
-                <div class="text-[14px] leading-[20px] text-[#344054]">
+                <div class="text-[14px] leading-[20px] text-gray-700">
                   <div>{{ $t('codes.title') }}</div>
                   <div class="font-light">{{ $t('codes.tips')}}</div>
                 </div>
@@ -70,12 +70,12 @@
       </div>
     </div>
 
-    <div class="bg-[#fff]">
+    <div class="bg-white">
       <div class="flex justify-center lg:flex-col rounded-[8px] max-w-[1280px] m-auto bg-white">
         <div class="max-w-[320px] lg:max-w-none pl-[16px] pr-[32px] pt-[36px]">
           <h3 class="flex items-center gap-[8px]">
             <SvgIcon name="team_org"/>
-            <span class="text-[#303133] text-[20px]">{{ $t('organization.orgTeam') }} <span class="text-[#A8ABB2] text-[20px]">{{ membersList.length }} </span></span>
+            <span class="text-gray-700 text-[20px]">{{ $t('organization.orgTeam') }} <span class="text-gray-500 text-[20px]">{{ membersList.length }} </span></span>
           </h3>
 
           <InviteMember :orgName="organizationData.name"
diff --git a/frontend/src/components/organizations/OrganizationEdit.vue b/frontend/src/components/organizations/OrganizationEdit.vue
index 365aff356..bc95c2fa4 100644
--- a/frontend/src/components/organizations/OrganizationEdit.vue
+++ b/frontend/src/components/organizations/OrganizationEdit.vue
@@ -63,7 +63,7 @@
           <div>
             <div class="el-upload__text">
               <p>
-                <span class="text-[#223B99] font-[500]">
+                <span class="text-brand-700 font-[500]">
                   {{ $t('components.upload.click_to_upload') }}
                 </span>
                 {{ $t('components.upload.or_drag_file') }}
@@ -76,7 +76,7 @@
       </el-form-item>
 
       <el-form-item>
-        <el-button class="!text-center !h-[48px] !text-[16px] !text-white !bg-[#3250BD] !rounded-[8px] !border-[1px] !border-[#3250BD]" @click="handleSubmit">{{ $t('all.saveSetting') }}</el-button>
+        <el-button class="!text-center !h-[48px] !text-[16px] !text-white !bg-brand-600 !rounded-[8px] !border-[1px] !border-brand-600" @click="handleSubmit">{{ $t('all.saveSetting') }}</el-button>
       </el-form-item>
     </el-form>
   </div>
diff --git a/frontend/src/components/organizations/OrganizationMembers.vue b/frontend/src/components/organizations/OrganizationMembers.vue
index fdb9b1695..5346229f0 100644
--- a/frontend/src/components/organizations/OrganizationMembers.vue
+++ b/frontend/src/components/organizations/OrganizationMembers.vue
@@ -1,20 +1,20 @@
 <template>
   <div class="flex flex-col gap-[32px] p-[16px] pt-[24px]">
-    <div class="text-[20px] text-[#344054] font-[500] leading-[30px]">
+    <div class="text-[20px] text-gray-700 font-[500] leading-[30px]">
       <div class="py-[16px]">
         {{ $t('organization.orgMembers') }}
       </div>
       <div
-        class="flex flex-col items-start rounded-[12px] border border-[1px] border-[#EAECF0] shadow-sm"
+        class="flex flex-col items-start rounded-[12px] border border-[1px] border-gray-200 shadow-sm"
       >
         <div
-          class="px-[24px] py-[20px] w-full flex justify-between border-b border-[#EAECF0]"
+          class="px-[24px] py-[20px] w-full flex justify-between border-b border-gray-200"
         >
           <div class="flex flex-col gap-[4px]">
-            <div class="text-[18px] font-[500] leading-[28px] text-[#101828]">
+            <div class="text-[18px] font-[500] leading-[28px] text-gray-900">
               {{ $t('organization.members.title') }}
             </div>
-            <div class="text-[14px] font-[300] leading-[20px] text-[#475467]">
+            <div class="text-[14px] font-[300] leading-[20px] text-gray-600">
               {{ $t('organization.members.description') }}
             </div>
           </div>
@@ -35,7 +35,7 @@
           >
             <el-table-column
               :label="$t('organization.members.username')"
-              label-class-name="indent-3 text-[12px] font-[400] leading-[18px] text-[#475467]"
+              label-class-name="indent-3 text-[12px] font-[400] leading-[18px] text-gray-600"
             >
               <template #default="scope">
                 <div class="flex gap-[12px] items-center pl-3">
@@ -45,13 +45,13 @@
                   ></el-avatar>
                   <div class="flex flex-col">
                     <div
-                      class="text-[14px] font-[400] leading-[20px] text-[#101828]"
+                      class="text-[14px] font-[400] leading-[20px] text-gray-900"
                       v-if="!!scope.row.nickname"
                     >
                       {{ scope.row.nickname }}
                     </div>
                     <div
-                      class="text-[14px] font-[300] leading-[20px] text-[#475467]"
+                      class="text-[14px] font-[300] leading-[20px] text-gray-600"
                       v-if="!!scope.row.name"
                     >
                       @{{ scope.row.name }}
@@ -62,11 +62,11 @@
             </el-table-column>
             <el-table-column
               :label="$t('organization.members.role')"
-              label-class-name="text-[12px] font-[400] leading-[18px] text-[#475467]"
+              label-class-name="text-[12px] font-[400] leading-[18px] text-gray-600"
             >
               <template #default="scope">
                 <div
-                  class="text-[14px] font-[400] leading-[20px] text-[#101828]"
+                  class="text-[14px] font-[400] leading-[20px] text-gray-900"
                 >
                   {{ scope.row.role }}
                 </div>
@@ -75,11 +75,11 @@
             <!-- 上次登录时间 -->
             <el-table-column
               :label="$t('organization.members.last_login_at')"
-              label-class-name="text-[12px] font-[400] leading-[18px] text-[#475467]"
+              label-class-name="text-[12px] font-[400] leading-[18px] text-gray-600"
             >
               <template #default="scope">
                 <div
-                  class="text-[14px] font-[400] leading-[20px] text-[#101828]"
+                  class="text-[14px] font-[400] leading-[20px] text-gray-900"
                 >
                   {{ formatDate(scope.row.last_login_at) }}
                 </div>
diff --git a/frontend/src/components/popup/UpdateUsername.vue b/frontend/src/components/popup/UpdateUsername.vue
index 5417eca1b..08e547bbb 100644
--- a/frontend/src/components/popup/UpdateUsername.vue
+++ b/frontend/src/components/popup/UpdateUsername.vue
@@ -17,7 +17,7 @@
             {{ $t('profile.edit.confirmUpdateMessage')}}
           </p>
         </div>
-        <p class="text-[#303133] text-[14px] mb-[8px] mt-[8px]">
+        <p class="text-gray-700 text-[14px] mb-[8px] mt-[8px]">
           {{ $t('profile.edit.internalUsername') }}
           <span class="text-red-400">*</span>
         </p>
diff --git a/frontend/src/components/resource_console/ResourceConsoleIndex.vue b/frontend/src/components/resource_console/ResourceConsoleIndex.vue
index 23158034f..b91d40306 100644
--- a/frontend/src/components/resource_console/ResourceConsoleIndex.vue
+++ b/frontend/src/components/resource_console/ResourceConsoleIndex.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="w-full sm:mt-[36px] py-9 text-[#101828]">
+  <div class="w-full sm:mt-[36px] py-9 text-gray-900">
     <div class="text-[30px] leading-[38px mb-6">
       {{ $t("resourceConsole.title") }}
     </div>
     <!-- finetunes -->
     <h3 class="text-[18px] flex justify-between gap-[8px]">
       <span>{{ $t("finetune.title") }}</span>
-      <a href="/finetune/new" class="cursor-pointer mx-[6px] flex gap-1 items-center py-2 px-3 text-[14px] leading-[20px] text-[#FFF] bg-[#3250BD] border border-[#3250BD] rounded-[8px]">
+      <a href="/finetune/new" class="cursor-pointer mx-[6px] flex gap-1 items-center py-2 px-3 text-[14px] leading-[20px] text-white bg-brand-600 border border-brand-600 rounded-[8px]">
         <SvgIcon name="plus" />
         {{ $t('resourceConsole.new') }}
       </a>
@@ -24,7 +24,7 @@
     <!-- endpoints -->
     <h3 class="text-[18px] flex justify-between gap-[8px]">
       <span>{{ $t("endpoints.title") }}</span>
-      <a  href="/endpoints/new" class="cursor-pointer mx-[6px] flex gap-1 items-center py-2 px-3 text-[14px] leading-[20px] text-[#FFF] bg-[#3250BD] border border-[#3250BD] rounded-[8px]">
+      <a  href="/endpoints/new" class="cursor-pointer mx-[6px] flex gap-1 items-center py-2 px-3 text-[14px] leading-[20px] text-white bg-brand-600 border border-brand-600 rounded-[8px]">
         <SvgIcon name="plus" />
         {{ $t('resourceConsole.new') }}
       </a>
diff --git a/frontend/src/components/shared/BillingDetail.vue b/frontend/src/components/shared/BillingDetail.vue
index c966b4676..d54bcd5cb 100644
--- a/frontend/src/components/shared/BillingDetail.vue
+++ b/frontend/src/components/shared/BillingDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full mt-8 mb-8 rounded-t-lg pt-9 xl:px-10 md:px-0 md:h-auto border border-[#EBEEF5]">
+    class="w-full mt-8 mb-8 rounded-t-lg pt-9 xl:px-10 md:px-0 md:h-auto border border-gray-200">
     <div class="flex justify-between px-6 mb-5">
       <div class="text-[18px] leading-[28px]">
         {{ $t('billing.instanceBilling') }}
@@ -15,7 +15,7 @@
           style="width: 120px" />
         <el-button
           :loading="billingLoading"
-          class="flex gap-1 border border-[#D0D5DD] rounded-[8px] py-1 px-2 cursor-pointer"
+          class="flex gap-1 border border-gray-300 rounded-[8px] py-1 px-2 cursor-pointer"
           @click="fetchDetails(1)">
           {{ $t('billing.refresh') }}
         </el-button>
@@ -35,13 +35,13 @@
         <!-- instance ID -->
         <el-table-column
           :label="$t('billing.instanceID')"
-          label-class-name="indent-3 text-[12px] justify-center font-[400] leading-[18px] text-[#475467]"
+          label-class-name="indent-3 text-[12px] justify-center font-[400] leading-[18px] text-gray-600"
           align="center">
           <template #default="scope">
             <div class="flex justify-center gap-[12px] items-center pl-3">
               <div class="flex flex-col">
                 <div
-                  class="text-[14px] font-[300] leading-[20px] text-[#475467]"
+                  class="text-[14px] font-[300] leading-[20px] text-gray-600"
                   v-if="!!scope.row.customer_id">
                   #{{ scope.row.customer_id }}
                 </div>
@@ -53,10 +53,10 @@
         <!-- usage time -->
         <el-table-column
           :label="$t('billing.usageTime')"
-          label-class-name="text-[12px] font-[400] leading-[18px] text-[#475467]"
+          label-class-name="text-[12px] font-[400] leading-[18px] text-gray-600"
           align="center">
           <template #default="scope">
-            <div class="text-[14px] font-[400] leading-[20px] text-[#475467]">
+            <div class="text-[14px] font-[400] leading-[20px] text-gray-600">
               {{ scope.row.value }}
             </div>
           </template>
@@ -65,10 +65,10 @@
         <!-- created_at -->
         <el-table-column
           :label="$t('billing.createTime')"
-          label-class-name="text-[12px] font-[400] leading-[18px] text-[#475467]"
+          label-class-name="text-[12px] font-[400] leading-[18px] text-gray-600"
           align="center">
           <template #default="scope">
-            <div class="text-[14px] font-[400] leading-[20px] text-[#475467]">
+            <div class="text-[14px] font-[400] leading-[20px] text-gray-600">
               {{ formatDateTime(scope.row.created_at) }}
             </div>
           </template>
diff --git a/frontend/src/components/shared/Blob.vue b/frontend/src/components/shared/Blob.vue
index 8d6cbb3d9..93c11160e 100644
--- a/frontend/src/components/shared/Blob.vue
+++ b/frontend/src/components/shared/Blob.vue
@@ -27,7 +27,7 @@
           </el-breadcrumb-item>
         </el-breadcrumb>
       </div>
-      <div class="flex items-center text-sm text-[#606266]">
+      <div class="flex items-center text-sm text-gray-500">
         <div class="flex items-center py-[1px] md:hidden">
           <el-avatar
             :size="24"
@@ -39,7 +39,7 @@
         <!-- Todo 暂时先隐藏 -->
         <a
           href="#"
-          class="ml-4 items-center px-4 py-[5px] border border-[#DCDFE6] rounded-[100px] hidden"
+          class="ml-4 items-center px-4 py-[5px] border border-gray-200 rounded-[100px] hidden"
         >
           <SvgIcon
             name="commits"
@@ -51,7 +51,7 @@
     </div>
     <div
       v-if="lastCommit"
-      class="flex items-center justify-between mt-4 px-3 py-2 border border-[#DCDFE6] bg-[#F5F7FA] rounded-t-[4px]"
+      class="flex items-center justify-between mt-4 px-3 py-2 border border-gray-200 bg-gray-100 rounded-t-[4px]"
     >
       <div class="flex items-center text-sm overflow-hidden mr-2">
         <div class="flex items-center mr-2">
@@ -62,24 +62,24 @@
           />
           <a
             href="#"
-            class="text-[#303133] hover:underline"
+            class="text-gray-700 hover:underline"
             >{{ lastCommit.author_name }}</a
           >
         </div>
         <a
           href="#"
-          class="mr-2 text-[#606266] truncate hover:underline"
+          class="mr-2 text-gray-500 truncate hover:underline"
           >{{ lastCommit.message }}</a
         >
         <a
           href="#"
-          class="rounded border border-[#DCDFE6] text-xs text-[#606266] px-3 py-[2px] hover:underline"
+          class="rounded border border-gray-200 text-xs text-gray-500 px-3 py-[2px] hover:underline"
         >
           {{ lastCommit.id?.substring(0, 7) }}
         </a>
       </div>
       <div
-        class="text-[#909399] text-sm cursor-pointer flex-shrink-0 md:hidden"
+        class="text-gray-500 text-sm cursor-pointer flex-shrink-0 md:hidden"
       >
         <el-popover
           width="158"
@@ -96,14 +96,14 @@
     </div>
     <div
       v-if="!lfs"
-      class="border border-t-0 border-[#DCDFE6] rounded-b"
+      class="border border-t-0 border-gray-200 rounded-b"
     >
       <div
-        class="text-xs text-[#303133] px-4 py-2 flex items-center justify-between border-b border-[#DCDFE6]"
+        class="text-xs text-gray-700 px-4 py-2 flex items-center justify-between border-b border-gray-200"
       >
         <div class="flex items-center gap-4">
           <div
-            class="bg-[#F0F2F5] px-3 py-[2px] flex items-center justify-center rounded"
+            class="bg-gray-500 px-3 py-[2px] flex items-center justify-center rounded"
           >
             {{ $t('shared.preview') }}
           </div>
@@ -134,15 +134,15 @@
     </div>
     <div
       v-else
-      class="border border-t-0 border-[#DCDFE6] rounded-b"
+      class="border border-t-0 border-gray-200 rounded-b"
     >
       <div
-        class="text-xs text-[#303133] px-4 py-2 flex items-center justify-end border-b border-[#DCDFE6]"
+        class="text-xs text-gray-700 px-4 py-2 flex items-center justify-end border-b border-gray-200"
       >
         <div>{{ formatBytes(size) }}</div>
       </div>
       <div
-        class="flex items-center justify-center px-4 py-10 border-b border-[#DCDFE6] font-medium text-[#667085] text-[14px] whitespace-pre-wrap"
+        class="flex items-center justify-center px-4 py-10 border-b border-gray-200 font-medium text-gray-500 text-[14px] whitespace-pre-wrap"
       >
         <p>
           {{ $t('shared.lfs1') }}
@@ -189,7 +189,7 @@
           >
         </div>
         <div
-          class="flex items-center mt-[4px] text-[#667085] text-[12px] font-light"
+          class="flex items-center mt-[4px] text-gray-500 text-[12px] font-light"
         >
           <p>{{ $t('shared.lfs10') }}</p>
           <a
diff --git a/frontend/src/components/shared/EditFile.vue b/frontend/src/components/shared/EditFile.vue
index 9fd8d33a3..64cbe3112 100644
--- a/frontend/src/components/shared/EditFile.vue
+++ b/frontend/src/components/shared/EditFile.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-4 my-[30px] md:px-5">
     <div class="flex items-center gap-[10px]">
       <div class="whitespace-nowrap">{{ repoName }}</div>
-      <div class="text-[#909399]">/</div>
+      <div class="text-gray-500">/</div>
       <el-input
         v-model="fileName"
         :maxLength="200"
@@ -10,7 +10,7 @@
         clearable
         :placeholder="$t('repo.edit.fileName')"
         @input="handleFileNameChange"
-        class="w-full h-[40px] text-[#606266]"
+        class="w-full h-[40px] text-gray-500"
       />
     </div>
     <code-editor
@@ -20,7 +20,7 @@
     />
     <el-radio-group
       v-model="new_branch"
-      class="my-4 py-4 border border-[#DCDFE6] border-l-0 border-r-0"
+      class="my-4 py-4 border border-gray-200 border-l-0 border-r-0"
     >
       <el-radio
         label="main"
@@ -36,7 +36,7 @@
         show-word-limit
         clearable
         :placeholder="commitTitlePlaceholder"
-        class="w-full h-[40px] text-[#606266]"
+        class="w-full h-[40px] text-gray-500"
       />
     </div>
     <CommunityMDTextarea
diff --git a/frontend/src/components/shared/FileList.vue b/frontend/src/components/shared/FileList.vue
index 9b484f8af..3c38d9db4 100644
--- a/frontend/src/components/shared/FileList.vue
+++ b/frontend/src/components/shared/FileList.vue
@@ -14,13 +14,13 @@
           </el-breadcrumb-item>
         </el-breadcrumb>
       </div>
-      <div v-if="lastCommit" class="flex items-center text-sm text-[#606266]">
+      <div v-if="lastCommit" class="flex items-center text-sm text-gray-500">
         <div class="flex items-center mr-4 py-[1px] md:hidden">
           <el-avatar :size="24" class="mr-1" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
           1 {{ $t('all.contributors') }}
         </div>
         <a :href="`/${prefixPath}/${namespacePath}/commits`"
-           class="ml-4 flex items-center px-4 py-[5px] border border-[#DCDFE6] rounded-[100px]">
+           class="ml-4 flex items-center px-4 py-[5px] border border-gray-200 rounded-[100px]">
           <SvgIcon name="commits" class="mr-2" />
           {{ $t('all.commits') }}
         </a>
@@ -43,18 +43,18 @@
       </div>
     </div>
 
-    <div v-if="!loading" class="flex items-center justify-between min-h-[36px] mt-4 px-3 py-2 border border-[#DCDFE6] bg-[#F5F7FA] rounded-t-[4px]">
+    <div v-if="!loading" class="flex items-center justify-between min-h-[36px] mt-4 px-3 py-2 border border-gray-200 bg-gray-100 rounded-t-[4px]">
       <div v-if="lastCommit" class="flex items-center text-sm overflow-hidden mr-2">
         <div class="flex items-center mr-2">
           <el-avatar :size="24" class="mr-2" :src="lastCommitAvatar" />
-          <a href="#" class="text-[#303133] hover:underline">{{ lastCommit.author_name }}</a>
+          <a href="#" class="text-gray-700 hover:underline">{{ lastCommit.author_name }}</a>
         </div>
-        <a :href="`/${prefixPath}/${namespacePath}/commit/${lastCommit.id}`" class="mr-2 text-[#606266] truncate md:hidden hover:underline">{{ lastCommit.message }}</a>
-        <a :href="`/${prefixPath}/${namespacePath}/commit/${lastCommit.id}`" class="rounded border border-[#DCDFE6] text-xs text-[#606266] px-3 py-[2px] hover:underline">
+        <a :href="`/${prefixPath}/${namespacePath}/commit/${lastCommit.id}`" class="mr-2 text-gray-500 truncate md:hidden hover:underline">{{ lastCommit.message }}</a>
+        <a :href="`/${prefixPath}/${namespacePath}/commit/${lastCommit.id}`" class="rounded border border-gray-200 text-xs text-gray-500 px-3 py-[2px] hover:underline">
           {{ lastCommit.id && lastCommit.id.substring(0, 7) }}
         </a>
       </div>
-      <div v-if="lastCommit" class="text-[#909399] text-sm cursor-pointer flex-shrink-0">
+      <div v-if="lastCommit" class="text-gray-500 text-sm cursor-pointer flex-shrink-0">
         <el-popover
           width="158"
           placement="top"
@@ -69,7 +69,7 @@
       </div>
     </div>
 
-    <div v-if="files" v-for="file in files" class="flex items-center justify-between px-3 py-2 border border-t-0 border-[#DCDFE6] last-of-type:rounded-b-[4px]">
+    <div v-if="files" v-for="file in files" class="flex items-center justify-between px-3 py-2 border border-t-0 border-gray-200 last-of-type:rounded-b-[4px]">
       <div class="flex items-center w-[31%]" :title="file.name">
         <svg class="flex-shrink-0" v-if="file.type === 'dir'" xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
           <path d="M3.52949 1.229C2.5494 1.229 2.05935 1.229 1.68501 1.41974C1.35573 1.58752 1.08801 1.85524 0.920231 2.18452C0.729492 2.55887 0.729492 3.04891 0.729492 4.02901V10.0373C0.729492 11.3441 0.729492 11.9975 0.98381 12.4966C1.20751 12.9357 1.56447 13.2926 2.00351 13.5164C2.50264 13.7707 3.15604 13.7707 4.46283 13.7707H9.53783C10.8446 13.7707 11.498 13.7707 11.9971 13.5164C12.4362 13.2926 12.7931 12.9357 13.0168 12.4966C13.2712 11.9975 13.2712 11.3441 13.2712 10.0373V7.29567C13.2712 5.98888 13.2712 5.33549 13.0168 4.83636C12.7931 4.39731 12.4362 4.04036 11.9971 3.81666C11.498 3.56234 10.8446 3.56234 9.53783 3.56234H8.89755C8.58581 3.56234 8.42993 3.56234 8.2892 3.52677C8.05664 3.46799 7.84784 3.33894 7.69126 3.15722C7.59651 3.04725 7.5268 2.90784 7.38738 2.629V2.629C7.17826 2.21076 7.0737 2.00163 6.93157 1.83668C6.6967 1.56409 6.3835 1.37053 6.03465 1.28236C5.82356 1.229 5.58975 1.229 5.12213 1.229H3.52949Z" fill="#8AA2FF"/>
@@ -77,10 +77,10 @@
         <svg class="flex-shrink-0" v-else xmlns="http://www.w3.org/2000/svg" width="14" height="15" viewBox="0 0 14 15" fill="none">
           <path d="M8.16634 1.95817V1.95817C8.16634 3.08384 8.16634 3.64668 8.38433 4.0745C8.57608 4.45083 8.88204 4.75679 9.25836 4.94853C9.68618 5.16652 10.249 5.16652 11.3747 5.16652V5.16652M11.6663 5.90865V10.1332C11.6663 11.2533 11.6663 11.8133 11.4484 12.2412C11.2566 12.6175 10.9506 12.9234 10.5743 13.1152C10.1465 13.3332 9.58645 13.3332 8.46634 13.3332H5.53301C4.4129 13.3332 3.85285 13.3332 3.42503 13.1152C3.0487 12.9234 2.74274 12.6175 2.55099 12.2412C2.33301 11.8133 2.33301 11.2533 2.33301 10.1332V4.86651C2.33301 3.7464 2.33301 3.18635 2.55099 2.75852C2.74274 2.3822 3.0487 2.07624 3.42503 1.88449C3.85285 1.6665 4.4129 1.6665 5.53301 1.6665H7.42419C7.91337 1.6665 8.15796 1.6665 8.38814 1.72176C8.59221 1.77076 8.7873 1.85157 8.96624 1.96122C9.16808 2.08491 9.34103 2.25786 9.68693 2.60376L10.7291 3.64591C11.075 3.99182 11.2479 4.16477 11.3716 4.3666C11.4813 4.54555 11.5621 4.74063 11.6111 4.94471C11.6663 5.17488 11.6663 5.41947 11.6663 5.90865Z" stroke="#606266" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
-        <a v-if="file.type === 'dir'" :href="`/${prefixPath}/${namespacePath}/files/${currentBranch}/${file.path}`" class="ml-2 text-sm text-[#303133] hover:underline whitespace-nowrap text-ellipsis overflow-hidden">
+        <a v-if="file.type === 'dir'" :href="`/${prefixPath}/${namespacePath}/files/${currentBranch}/${file.path}`" class="ml-2 text-sm text-gray-700 hover:underline whitespace-nowrap text-ellipsis overflow-hidden">
           {{ file.name }}
         </a>
-        <a v-else-if="canPreview(file)" :href="`/${prefixPath}/${namespacePath}/blob/${currentBranch}/${file.path}`" class="ml-2 text-sm text-[#303133] hover:underline whitespace-nowrap text-ellipsis overflow-hidden">
+        <a v-else-if="canPreview(file)" :href="`/${prefixPath}/${namespacePath}/blob/${currentBranch}/${file.path}`" class="ml-2 text-sm text-gray-700 hover:underline whitespace-nowrap text-ellipsis overflow-hidden">
           {{ file.name }}
         </a>
         <el-popover
@@ -92,13 +92,13 @@
           :content="!!lastCommit ? $t('all.notSupportPreview') : $t('all.syncNotSupportPreview')"
         >
           <template #reference>
-            <div class="ml-2 text-sm text-[#303133] hover:underline text-ellipsis overflow-hidden max-w-[280px]">{{ file.name }}</div>
+            <div class="ml-2 text-sm text-gray-700 hover:underline text-ellipsis overflow-hidden max-w-[280px]">{{ file.name }}</div>
           </template>
         </el-popover>
       </div>
-      <div class="flex items-center justify-end pr-3 text-sm text-[#606266] flex-shrink-0 text-right w-[20%] md:w-auto md:pr-0">
+      <div class="flex items-center justify-end pr-3 text-sm text-gray-500 flex-shrink-0 text-right w-[20%] md:w-auto md:pr-0">
         <span v-if="file.type === 'file'">{{ formatBytes(file.size) }}</span>
-        <span v-if="file.lfs" class="flex items-center gap-1 text-xs text-[#344054] ml-2 rounded px-1 border border-[#909399]">
+        <span v-if="file.lfs" class="flex items-center gap-1 text-xs text-gray-700 ml-2 rounded px-1 border border-gray-500">
           <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
             <path opacity="0.12" d="M11 6.0001V3.64101C11 3.55359 10.9541 3.47258 10.8792 3.4276C10.7998 3.37995 10.7005 3.38034 10.6214 3.42859L8.3853 4.79381C7.58955 5.27964 7.19167 5.52255 6.77093 5.63443C6.26575 5.76876 5.73425 5.76876 5.22907 5.63443C4.80833 5.52255 4.41045 5.27964 3.61469 4.79381L1.37857 3.42859C1.29953 3.38034 1.20024 3.37995 1.12083 3.4276C1.04587 3.47258 1 3.55359 1 3.64101V6.0001C1 6.77867 1 7.16795 1.0882 7.5236C1.22 8.05511 1.49477 8.5404 1.88271 8.92687C2.14231 9.18548 2.47612 9.38577 3.14373 9.78634L3.53042 10.0183C4.42832 10.5571 4.87727 10.8265 5.35653 10.9317C5.78046 11.0248 6.21954 11.0248 6.64346 10.9317C7.12273 10.8265 7.57168 10.5571 8.46958 10.0183L8.85627 9.78634L8.85627 9.78633C9.52389 9.38577 9.85769 9.18548 10.1173 8.92687C10.5052 8.5404 10.78 8.05511 10.9118 7.5236C11 7.16795 11 6.77867 11 6.0001Z" fill="#2F384C"/>
             <path d="M3.74994 4.75L8.24998 2M6 6.25L10.5 3.5M6 6.25L1.5 3.5M6 6.25V11.25M1 4.4059V7.5941C1 7.92444 1 8.08961 1.0474 8.23802C1.08934 8.36936 1.15799 8.49061 1.24903 8.59414C1.35191 8.71114 1.49354 8.79612 1.77681 8.96608L5.17681 11.0061C5.47611 11.1857 5.62576 11.2755 5.78551 11.3105C5.92682 11.3416 6.07318 11.3416 6.21449 11.3105C6.37424 11.2755 6.52389 11.1857 6.82319 11.0061L10.2232 8.96608C10.5065 8.79612 10.6481 8.71114 10.751 8.59414C10.842 8.49061 10.9107 8.36936 10.9526 8.23802C11 8.08961 11 7.92444 11 7.5941V4.4059C11 4.07556 11 3.91039 10.9526 3.76198C10.9107 3.63064 10.842 3.50939 10.751 3.40586C10.6481 3.28886 10.5065 3.20388 10.2232 3.03392L6.82319 0.993916C6.52389 0.814336 6.37424 0.724546 6.21449 0.689464C6.07318 0.658433 5.92682 0.658433 5.78551 0.689464C5.62576 0.724546 5.47611 0.814336 5.17681 0.993916L1.77681 3.03392C1.49354 3.20388 1.35191 3.28886 1.24903 3.40586C1.15799 3.50939 1.08934 3.63064 1.0474 3.76198C1 3.91039 1 4.07556 1 4.4059Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/>
@@ -111,10 +111,10 @@
           </svg>
         </span>
       </div>
-      <a :href="`/${prefixPath}/${namespacePath}/commit/${file.last_commit_sha}`" class="text-[#606266] w-[34%] pl-3 text-sm truncate md:hidden hover:underline">
+      <a :href="`/${prefixPath}/${namespacePath}/commit/${file.last_commit_sha}`" class="text-gray-500 w-[34%] pl-3 text-sm truncate md:hidden hover:underline">
         {{ file.commit.message }}
       </a>
-      <div class="text-[#909399] w-[15%] text-sm text-right cursor-pointer md:hidden">
+      <div class="text-gray-500 w-[15%] text-sm text-right cursor-pointer md:hidden">
         <el-popover
           width="158"
           placement="top"
diff --git a/frontend/src/components/shared/FinetuneItem.vue b/frontend/src/components/shared/FinetuneItem.vue
index fb3da97b1..2272d4e6d 100644
--- a/frontend/src/components/shared/FinetuneItem.vue
+++ b/frontend/src/components/shared/FinetuneItem.vue
@@ -2,12 +2,12 @@
   <a
     :href="detailLink"
     :class="`${repoType}-card  hover:active-${repoType}-card `"
-    class="focus:outline focus:outline-4 focus:outline-[#EAECF0] hover:shadow-md p-4 mlg:w-full border border-gray-200 rounded-xl"
+    class="focus:outline focus:outline-4 focus:outline-gray-200 hover:shadow-md p-4 mlg:w-full border border-gray-200 rounded-xl"
   >
     <div class="flex items-center justify-between mb-1">
       <div
         :class="`${repoType}-path`"
-        class="text-md text-[#344054] font-normal text-ellipsis overflow-hidden whitespace-nowrap"
+        class="text-md text-gray-700 font-normal text-ellipsis overflow-hidden whitespace-nowrap"
       >
         {{ repo.deploy_name }}
       </div>
@@ -21,7 +21,7 @@
     </div>
 
     <div
-      class="flex flex-nowrap overflow-hidden text-ellipsis items-center gap-[8px] text-xs text-[#909399]"
+      class="flex flex-nowrap overflow-hidden text-ellipsis items-center gap-[8px] text-xs text-gray-500"
     >
       <div class="overflow-hidden text-ellipsis whitespace-nowrap">
         {{ repo.model_id }} {{ repo.updated_at.substring(0, 10) }}
diff --git a/frontend/src/components/shared/HeaderTags.vue b/frontend/src/components/shared/HeaderTags.vue
index 3aa699465..d7fc3d743 100644
--- a/frontend/src/components/shared/HeaderTags.vue
+++ b/frontend/src/components/shared/HeaderTags.vue
@@ -3,7 +3,7 @@
     <!-- Task -->
     <div
       v-if="taskTags.length"
-      class="text-[#344054] text-[14px] text-medium"
+      class="text-gray-700 text-[14px] text-medium"
     >
       {{ $t('all.tasks') }}:
     </div>
@@ -21,14 +21,14 @@
     <!-- Framework -->
     <div
       v-if="frameworkTags.length"
-      class="text-sm text-[#909399]"
+      class="text-sm text-gray-500"
     >
       {{ $t('all.framework') }}:
     </div>
     <a
       v-for="tag in theFrameworkTags.theTags"
       :href="`/${prefix}?tag=${tag.name}&tag_type=Framework`"
-      class="text-[#344054]"
+      class="text-gray-700"
     >
       <PyTorch v-if="tag.name.toLowerCase() === 'pytorch'" />
       <TensorFlow v-if="tag.name.toLowerCase() === 'tensorflow'" />
@@ -48,7 +48,7 @@
     <!-- Language -->
     <div
       v-if="languageTags.length"
-      class="flex items-center text-sm text-[#909399]"
+      class="flex items-center text-sm text-gray-500"
     >
       {{ $t('all.languages') }}:
     </div>
@@ -56,7 +56,7 @@
       v-for="tag in theLanguageTags.theTags"
       :href="`/${prefix}?tag=${tag.label}&tag_type=Language`"
       :style="`color: ${tag.color}`"
-      class="text-sm text-[#087443] px-[8px] py-[4px] rounded cursor-pointer flex items-center gap-1 bg-[#F6FEF9]"
+      class="text-sm text-success-700 px-[8px] py-[4px] rounded cursor-pointer flex items-center gap-1 bg-success-25"
     >
       <SvgIcon name="language_tag" />
       {{ locale === 'zh' ? tag.show_name || tag.name : tag.name }}
@@ -70,13 +70,13 @@
     <!-- industryTags -->
     <div
       v-if="industryTags.length"
-      class="text-sm text-[#909399]"
+      class="text-sm text-gray-500"
     >
       {{ $t('all.industry') }}:
     </div>
     <div
       v-for="tag in theIndustryTags.theTags"
-      class="text-sm text-[#303133] px-[8px] py-[4px] rounded flex items-center border gap-1"
+      class="text-sm text-gray-700 px-[8px] py-[4px] rounded flex items-center border gap-1"
     >
       {{ locale === 'zh' ? tag.show_name || tag.name : tag.name }}
     </div>
@@ -89,13 +89,13 @@
     <!-- Other -->
     <div
       v-if="otherTags.length"
-      class="text-sm text-[#909399]"
+      class="text-sm text-gray-500"
     >
       {{ $t('all.others') }}:
     </div>
     <div
       v-for="tag in theOtherTags.theTags"
-      class="bg-white text-sm text-[#303133] px-[8px] py-[4px] rounded flex items-center border gap-1"
+      class="bg-white text-sm text-gray-700 px-[8px] py-[4px] rounded flex items-center border gap-1"
     >
       {{ tag.name }}
     </div>
@@ -108,18 +108,18 @@
     <!-- License -->
     <div
       v-if="licenseTags.length"
-      class="text-sm text-[#909399]"
+      class="text-sm text-gray-500"
     >
       License:
     </div>
     <a
       v-for="tag in theLicenseTags.theTags"
       :href="`/${prefix}?tag=${tag.name}&tag_type=License`"
-      class="text-[14px] text-[#909399] px-[8px] py-[3px] rounded-[6px] cursor-pointer flex items-center border border-[#D0D5DD] gap-1"
+      class="text-[14px] text-gray-500 px-[8px] py-[3px] rounded-[6px] cursor-pointer flex items-center border border-gray-300 gap-1"
     >
       <SvgIcon name="repo_header_license_icon" />
       License: 
-      <p class="text-[#344054]">{{ tag.name }}</p>
+      <p class="text-gray-700">{{ tag.name }}</p>
     </a>
     <MoreTags
       v-if="theLicenseTags.moreTags"
diff --git a/frontend/src/components/shared/MoreTags.vue b/frontend/src/components/shared/MoreTags.vue
index 72f033676..1fd58c45e 100644
--- a/frontend/src/components/shared/MoreTags.vue
+++ b/frontend/src/components/shared/MoreTags.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="text-sm text-[#303133] px-[8px] py-[4px] rounded flex items-center cursor-pointer border gap-1"
+    class="text-sm text-gray-700 px-[8px] py-[4px] rounded flex items-center cursor-pointer border gap-1"
     @click="viewMore"
   >
     + {{ num }} {{ $t('all.more') }}
diff --git a/frontend/src/components/shared/NewFile.vue b/frontend/src/components/shared/NewFile.vue
index d2addf8fc..677e34064 100644
--- a/frontend/src/components/shared/NewFile.vue
+++ b/frontend/src/components/shared/NewFile.vue
@@ -2,7 +2,7 @@
   <div class="flex flex-col gap-4 my-[30px] md:px-5">
     <div class="flex items-center gap-[10px]">
       <div class="whitespace-nowrap">{{ repoName }}</div>
-      <div class="text-[#909399]">/</div>
+      <div class="text-gray-500">/</div>
       <el-input
         v-model="fileName"
         :maxLength="200"
@@ -10,7 +10,7 @@
         clearable
         :placeholder="$t('all.fileName')"
         @input="handleFileNameChange"
-        class="w-full h-[40px] text-[#606266]"
+        class="w-full h-[40px] text-gray-500"
       />
     </div>
     <CodeEditor
@@ -20,7 +20,7 @@
     />
     <el-radio-group
       v-model="new_branch"
-      class="my-4 py-4 border border-[#DCDFE6] border-l-0 border-r-0"
+      class="my-4 py-4 border border-gray-200 border-l-0 border-r-0"
     >
       <el-radio
         label="main"
@@ -36,7 +36,7 @@
         show-word-limit
         clearable
         :placeholder="commitTitlePlaceholder"
-        class="w-full h-[40px] text-[#606266]"
+        class="w-full h-[40px] text-gray-500"
       />
     </div>
     <CommunityMDTextarea
diff --git a/frontend/src/components/shared/ProfileRepoList.vue b/frontend/src/components/shared/ProfileRepoList.vue
index 4c58f2471..5e5af27ae 100644
--- a/frontend/src/components/shared/ProfileRepoList.vue
+++ b/frontend/src/components/shared/ProfileRepoList.vue
@@ -2,7 +2,7 @@
   <div class="sm:w-[100%] sm:mt-[36px]">
     <!-- collections -->
     <div>
-      <h3 class="text-[20px] text-[#303133] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon name="collections" width="18" height="18" />
         <span>{{ $t("collections.collection") }}</span>
       </h3>
@@ -21,7 +21,7 @@
 
     <!-- models -->
     <div>
-      <h3 class="text-[20px] text-[#344054] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon name="models" width="18" height="18" />
         <span>{{ $t("organization.model") }}</span>
       </h3>
@@ -37,7 +37,7 @@
 
     <!-- datasets -->
     <div class="mt-[32px]">
-      <h3 class="text-[20px] text-[#344054] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon name="datasets" width="18" height="18" />
         <span>{{ $t("organization.dataset") }}</span>
       </h3>
@@ -57,7 +57,7 @@
 
     <!-- code repo -->
     <div class="mt-[32px]">
-      <h3 class="text-[20px] text-[#344054] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon name="codes" width="18" height="18" />
         <span>{{ $t("organization.code") }}</span>
       </h3>
@@ -73,7 +73,7 @@
 
     <!-- spaces -->
     <div class="mt-[32px]">
-      <h3 class="text-[20px] text-[#344054] flex items-center gap-[8px]">
+      <h3 class="text-[20px] text-gray-700 flex items-center gap-[8px]">
         <SvgIcon name="spaces" width="18" height="18" />
         <span>{{ $t("organization.space") }}</span>
       </h3>
diff --git a/frontend/src/components/shared/RepoCards.vue b/frontend/src/components/shared/RepoCards.vue
index 9f005c010..cdf16ca84 100644
--- a/frontend/src/components/shared/RepoCards.vue
+++ b/frontend/src/components/shared/RepoCards.vue
@@ -2,7 +2,7 @@
   <div class="flex gap-[24px] max-w-[1280px] m-auto min-h-[calc(100vh-153px)] md:min-h-0">
     <div
       v-if="repoType !== 'space'"
-      class="w-[30%] min-w-[360px] border-r border-[#EAECF0] pr-6 xl:pl-[20px] mlg:hidden"
+      class="w-[30%] min-w-[360px] border-r border-gray-200 pr-6 xl:pl-[20px] mlg:hidden"
     >
       <TagSidebar
         :taskTags="taskTags"
@@ -19,7 +19,7 @@
       <div
         :class="`flex xl:flex-col justify-between ${repoType === 'space' ? 'xl:pl-[20px] mlg:pl-0' : ''}`"
       >
-        <h3 class="text-lg font-normal text-[#101828] flex items-center gap-2">
+        <h3 class="text-lg font-normal text-gray-900 flex items-center gap-2">
           <SvgIcon
             v-if="repoType === 'model'"
             name="models"
diff --git a/frontend/src/components/shared/RepoClone.vue b/frontend/src/components/shared/RepoClone.vue
index 01ea7e88c..21cf4f585 100644
--- a/frontend/src/components/shared/RepoClone.vue
+++ b/frontend/src/components/shared/RepoClone.vue
@@ -37,7 +37,7 @@
 
     <!-- finetune deploy button -->
     <div
-      class="flex px-[12px] py-[5px] justify-center items-center gap-1 rounded-lg bg-[#FFF] border border-[#D0D5DD] shadow-sm hover:bg-slate-50 cursor-pointer"
+      class="flex px-[12px] py-[5px] justify-center items-center gap-1 rounded-lg bg-white border border-gray-300 shadow-sm hover:bg-slate-50 cursor-pointer"
       v-if="repoType === 'model' && enableFinetune && !!httpCloneUrl"
       @click="handleButtonClick"
     >
@@ -51,14 +51,14 @@
     <!-- repo download clone button -->
     <div
       v-if="!!httpCloneUrl"
-      class="flex px-[12px] py-[5px] justify-center items-center gap-1 rounded-lg bg-[#3250BD] shadow-sm hover:bg-blue-800 cursor-pointer"
+      class="flex px-[12px] py-[5px] justify-center items-center gap-1 rounded-lg bg-brand-600 shadow-sm hover:bg-blue-800 cursor-pointer"
       @click="cloneRepositoryVisible = true"
     >
       <SvgIcon
         name="download"
         class="mr-0"
       />
-      <div class="text-[#fff] text-sm">{{ $t(downloadButtonKey) }}</div>
+      <div class="text-white text-sm">{{ $t(downloadButtonKey) }}</div>
     </div>
 
     <!-- clone dialog -->
@@ -67,8 +67,8 @@
       title=""
       class="md:!w-[80%]"
     >
-      <div class="rounded-t border-t border-x border-[#EBEEF5] mt-4">
-        <div class="flex items-center px-3 py-2 bg-[#F5F7FA] text-[#303133]">
+      <div class="rounded-t border-t border-x border-gray-200 mt-4">
+        <div class="flex items-center px-3 py-2 bg-gray-100 text-gray-700">
           <SvgIcon
             name="clone"
             class="mr-1"
@@ -78,16 +78,16 @@
       </div>
       <el-tabs
         v-model="activeCloneType"
-        class="border border-[#EBEEF5] mb-8 clone-tabs"
+        class="border border-gray-200 mb-8 clone-tabs"
       >
         <el-tab-pane
           label="HTTPS"
           name="https"
         >
           <div
-            class="flex flex-col gap-1 px-3 py-2 border-t border-[#EBEEF5] bg-[#ffffff] text-[#303133] break-all"
+            class="flex flex-col gap-1 px-3 py-2 border-t border-gray-200 bg-white text-gray-700 break-all"
           >
-            <div class="flex gap-[8px] text-[14px] leading-[20px] text-[#667085]">
+            <div class="flex gap-[8px] text-[14px] leading-[20px] text-gray-500">
               <SvgIcon name="exclamation_point" width="13" height="13" class="cursor-pointer" />
               Use
               <a href="/settings/access-token" target="_blank" class="underline">access token</a>
@@ -103,7 +103,7 @@
                 size="large"
               />
             </div>
-            <div class="text-[#909399]"># {{ $t('all.lfsTips') }}</div>
+            <div class="text-gray-500"># {{ $t('all.lfsTips') }}</div>
             <markdown-viewer
               v-if="useToken"
               :content="httpsCloneCodeWithTokenMarkdown"
@@ -112,7 +112,7 @@
               v-else
               :content="httpsCloneCodeMarkdown"
             ></markdown-viewer>
-            <div class="text-[#909399]"># {{ $t('all.lfsTips2') }}</div>
+            <div class="text-gray-500"># {{ $t('all.lfsTips2') }}</div>
             <markdown-viewer
               :content="getMarkdownCode('GIT_LFS_SKIP_SMUDGE=1', 'bash')"
             ></markdown-viewer>
@@ -123,16 +123,16 @@
           name="ssh"
         >
           <div
-            class="flex flex-col gap-1 px-3 py-2 border-t border-[#EBEEF5] bg-[#ffffff] text-[#303133] break-all"
+            class="flex flex-col gap-1 px-3 py-2 border-t border-gray-200 bg-white text-gray-700 break-all"
           >
-            <div class="flex gap-[8px] text-[14px] leading-[20px] text-[#667085] mb-[8px]">
+            <div class="flex gap-[8px] text-[14px] leading-[20px] text-gray-500 mb-[8px]">
               <SvgIcon name="exclamation_point" width="13" height="13" class="cursor-pointer" />
               <a href="/settings/ssh-keys" target="_blank" class="underline">Add your SSH public key</a>
               to clone private repos
             </div>
-            <div class="text-[#909399]"># {{ $t('all.lfsTips') }}</div>
+            <div class="text-gray-500"># {{ $t('all.lfsTips') }}</div>
             <markdown-viewer :content="sshCloneCodeMarkdown"></markdown-viewer>
-            <div class="text-[#909399]"># {{ $t('all.lfsTips2') }}</div>
+            <div class="text-gray-500"># {{ $t('all.lfsTips2') }}</div>
             <markdown-viewer
               :setDefaultText="true"
               :content="getMarkdownCode('GIT_LFS_SKIP_SMUDGE=1', 'bash')"
@@ -145,15 +145,15 @@
           name="sdk"
         >
           <div
-            class="flex flex-col gap-1 px-3 py-2 border-t border-[#EBEEF5] bg-[#ffffff] text-[#303133] break-all"
+            class="flex flex-col gap-1 px-3 py-2 border-t border-gray-200 bg-white text-gray-700 break-all"
           >
-          <div class="flex gap-[8px] text-[14px] leading-[20px] text-[#667085]">
+          <div class="flex gap-[8px] text-[14px] leading-[20px] text-gray-500">
             <SvgIcon name="exclamation_point" width="13" height="13" class="cursor-pointer" />
             Use
             <a href="https://github.com/OpenCSGs/csghub-sdk" target="_blank" class="underline"> SDK </a>
             to download
             </div>
-            <div class="text-[#909399] mt-[8px]"># {{ $t('all.sdkTips') }}</div>
+            <div class="text-gray-500 mt-[8px]"># {{ $t('all.sdkTips') }}</div>
             <markdown-viewer
               :content="cmdCloneCodeMarkdown"
             ></markdown-viewer>
diff --git a/frontend/src/components/shared/RepoCommit.vue b/frontend/src/components/shared/RepoCommit.vue
index 7be3bcb3a..d0d579b2f 100644
--- a/frontend/src/components/shared/RepoCommit.vue
+++ b/frontend/src/components/shared/RepoCommit.vue
@@ -1,21 +1,21 @@
 <template>
   <div class="min-h-[300px] py-8 md:px-5">
-    <div class="rounded-lg border border-[#e5e7eb] min-h-[100px] mb-4">
+    <div class="rounded-lg border border-gray-200 min-h-[100px] mb-4">
       <div
-        class="flex justify-between gap-[4px] border-b border-[#e5e7eb] items-center px-[12px] py-[9px] bg-[#F5F7FA] rounded-t-lg"
+        class="flex justify-between gap-[4px] border-b border-gray-200 items-center px-[12px] py-[9px] bg-gray-100 rounded-t-lg"
       >
         <div class="flex items-center">
           <div class="flex items-center mr-2">
             <el-avatar :icon="UserFilled" :size="24" class="mr-2" />
             <span>{{ commit.committer_name }}</span>
           </div>
-          <div class="text-[#606266] text-sm">
+          <div class="text-gray-500 text-sm">
             {{
               format(beiJingTimeParser(commit.committer_date), locale == "en" ? "en_US" : "zh_CN")
             }}
           </div>
         </div>
-        <div class="flex items-center text-sm text-[#344054]" v-if="commit.id">
+        <div class="flex items-center text-sm text-gray-700" v-if="commit.id">
           <el-button-group class="ml-2 min-w-[107px]">
             <el-button type="default" size="small">
               {{ commit.id.slice(0, 7) }}
diff --git a/frontend/src/components/shared/RepoCommits.vue b/frontend/src/components/shared/RepoCommits.vue
index f4e23976e..fb64a7254 100644
--- a/frontend/src/components/shared/RepoCommits.vue
+++ b/frontend/src/components/shared/RepoCommits.vue
@@ -17,18 +17,18 @@
     <div class="flex items-center gap-2 my-4">
       <SvgIcon name="commits" />
       {{ t('all.commits') }}
-      <div class="flex-1 border-b border-[#DCDFE6]"></div>
+      <div class="flex-1 border-b border-gray-200"></div>
     </div>
-    <div class="rounded border border-[#EBEEF5] px-4">
+    <div class="rounded border border-gray-200 px-4">
       <div v-for="commit in commits"
            :key="commit.id"
-           class="py-4 border-b border-[#DCDFE6] last-of-type:border-none text-[#344054]">
+           class="py-4 border-b border-gray-200 last-of-type:border-none text-gray-700">
         <div class="mb-2 flex items-center">
           <a :href="`/${repoType}s/${namespacePath}/commit/${commit.id}`" class="truncate" :title="commit.message">
             {{ commit.message }}
           </a>
           <el-button-group class="ml-2 min-w-[107px]">
-            <el-button plain type="default" size="small" class="!cursor-default hover:!text-[#344054] hover:!border-[#dcdfe6]">
+            <el-button plain type="default" size="small" class="!cursor-default hover:!text-gray-700 hover:!border-gray-200">
               {{ commit.id.slice(0, 7) }}
             </el-button>
             <el-button type="default" size="small" @click="copyCommitId(commit.id)">
@@ -41,7 +41,7 @@
             <el-avatar :icon="UserFilled" :size="24" class="mr-2" />
             <span>{{ commit.committer_name }}</span>
           </div>
-          <div class="text-[#606266] text-sm">
+          <div class="text-gray-500 text-sm">
             {{ format(beiJingTimeParser(commit.committer_date), locale == 'en' ? 'en_US' : 'zh_CN') }}
           </div>
         </div>
diff --git a/frontend/src/components/shared/RepoDetail.vue b/frontend/src/components/shared/RepoDetail.vue
index c8b535f5a..6846da246 100644
--- a/frontend/src/components/shared/RepoDetail.vue
+++ b/frontend/src/components/shared/RepoDetail.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="repo"
-    class="w-full bg-[#FCFCFD] pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto border-b border-[#EBEEF5]"
+    class="w-full bg-gray-25 pt-9 pb-[60px] xl:px-10 md:px-0 md:pb-6 md:h-auto border-b border-gray-200"
   >
     <div class="mx-auto max-w-[1280px]">
       <repo-header
diff --git a/frontend/src/components/shared/RepoHeader.vue b/frontend/src/components/shared/RepoHeader.vue
index 574186e1b..50b298766 100644
--- a/frontend/src/components/shared/RepoHeader.vue
+++ b/frontend/src/components/shared/RepoHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="flex flex-col gap-[16px] flex-wrap mb-[16px] text-lg text-[#606266] font-semibold md:px-5"
+    class="flex flex-col gap-[16px] flex-wrap mb-[16px] text-lg text-gray-500 font-semibold md:px-5"
   >
     <!-- dataset repo -->
     <div
@@ -12,7 +12,7 @@
         width="16"
         height="16"
       />
-      <span class="text-[#A8ABB2] text-[18px] font-medium"
+      <span class="text-gray-500 text-[18px] font-medium"
         >Dataset:</span
       >
       <el-avatar
@@ -20,17 +20,17 @@
         :src="avatar"
         class="flex-shrink-0"
       ></el-avatar>
-      <span class="max-w-full break-words text-[#344053] font-medium">{{
+      <span class="max-w-full break-words text-gray-700 font-medium">{{
         nickname.trim() === '' ? name : nickname
       }}</span>
       <div
         v-if="repoDetailStore.isPrivate"
-        class="border border-[#D0D5DD] bg-white px-3 py-[2px] text-center text-xs text-[#344054] font-medium rounded"
+        class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded"
       >
         {{ $t('all.private') }}
       </div>
       <div
-        class="flex cursor-pointer gap-[4px] border border-[#DCDFE6] pl-3 pr-1 py-[2px] text-center text-xs text-[#606266] font-medium rounded hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
+        class="flex cursor-pointer gap-[4px] border border-gray-200 pl-3 pr-1 py-[2px] text-center text-xs text-gray-500 font-medium rounded hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
         :class="userLiked === true ? 'text-gray-400 border-gray-200' : ''"
         @click="clickLike"
       >
@@ -51,12 +51,12 @@
         :src="avatar"
         class="flex-shrink-0"
       ></el-avatar>
-      <span class="max-w-full break-words text-[#344053] font-medium">{{
+      <span class="max-w-full break-words text-gray-700 font-medium">{{
         nickname.trim() === '' ? name : nickname
       }}</span>
       <div
         v-if="repoDetailStore.isPrivate"
-        class="border border-[#D0D5DD] bg-white px-3 py-[2px] text-center text-xs text-[#344054] font-medium rounded"
+        class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded"
       >
         {{ $t('all.private') }}
       </div>
@@ -78,7 +78,7 @@
         height="16"
         class="flex-shrink-0"
       />
-      <span class="max-w-full break-words text-[#344053] font-medium">{{
+      <span class="max-w-full break-words text-gray-700 font-medium">{{
         nickname.trim() === '' ? name : nickname
       }}</span>
       <AppStatus
@@ -98,17 +98,17 @@
         :src="avatar"
         class="flex-shrink-0"
       ></el-avatar>
-      <span class="max-w-full break-words text-[#344053] font-medium">{{
+      <span class="max-w-full break-words text-gray-700 font-medium">{{
         nickname.trim() === '' ? name : nickname
       }}</span>
       <div
         v-if="repoDetailStore.isPrivate"
-        class="border border-[#D0D5DD] bg-white px-3 py-[2px] text-center text-xs text-[#344054] font-medium rounded"
+        class="border border-gray-300 bg-white px-3 py-[2px] text-center text-xs text-gray-700 font-medium rounded"
       >
         {{ $t('all.private') }}
       </div>
       <div
-        class="flex cursor-pointer gap-[4px] border border-[#DCDFE6] pl-3 pr-1 py-[2px] text-center text-xs text-[#606266] font-medium rounded hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
+        class="flex cursor-pointer gap-[4px] border border-gray-200 pl-3 pr-1 py-[2px] text-center text-xs text-gray-500 font-medium rounded hover:bg-gray-50 active:ring-4 active:ring-gray-400 active:ring-opacity-25 active:bg-white"
         :class="userLiked === true ? 'text-gray-400 border-gray-200' : ''"
         @click="clickLike"
       >
@@ -140,14 +140,14 @@
       v-if="repoType !== 'finetune'"
     >
       <a
-        class="md:ml-0 hover:text-[#223B99] text-[#667084] font-normal"
+        class="md:ml-0 hover:text-brand-700 text-gray-500 font-normal"
         :href="ownerUrl"
       >
         {{ path?.split('/')[0] }}
       </a>
       <div>/</div>
       <a
-        class="max-w-full break-words hover:text-[#223B99] text-[#344053] font-normal"
+        class="max-w-full break-words hover:text-brand-700 text-gray-700 font-normal"
         href="#"
       >
         {{ repoType === 'endpoint' ? name : path?.split('/')[1] }}
@@ -173,7 +173,7 @@
         height="16"
         class="flex-shrink-0"
       />
-      <a :href="`/models/${props.path}`" class="md:ml-0 text-[#344054] font-normal hover:text-[#223B99]">
+      <a :href="`/models/${props.path}`" class="md:ml-0 text-gray-700 font-normal hover:text-brand-700">
         {{ path }}
       </a>
       <SvgIcon
@@ -182,10 +182,10 @@
         height="16"
         class="flex-shrink-0 ml-6 md:ml-0"
       />
-      <span class="text-[#344054] font-normal">{{ resourceName }}</span>
+      <span class="text-gray-700 font-normal">{{ resourceName }}</span>
     </div>
   </div>
-  <div class="leading-[24px] pb-[16px] text-[#344054] md:px-5">{{ desc }}</div>
+  <div class="leading-[24px] pb-[16px] text-gray-700 md:px-5">{{ desc }}</div>
 
   <!-- repo tags -->
   <header-tags
diff --git a/frontend/src/components/shared/RepoItem.vue b/frontend/src/components/shared/RepoItem.vue
index d00edcb35..dad13f327 100644
--- a/frontend/src/components/shared/RepoItem.vue
+++ b/frontend/src/components/shared/RepoItem.vue
@@ -1,12 +1,12 @@
 <template>
   <a :href="detailLink"
      :class="`${repoType}-card`"
-     class="focus:outline focus:outline-4 focus:outline-[#EAECF0] hover:shadow-md p-4 mlg:w-full border border-[#EAECF0] rounded-lg flex-grow xl:basis-full min-w-[250px] xl:max-w-full"
+     class="focus:outline focus:outline-4 focus:outline-gray-200 hover:shadow-md p-4 mlg:w-full border border-gray-200 rounded-lg flex-grow xl:basis-full min-w-[250px] xl:max-w-full"
      :style="isCollection ? 'width:100%' : ''"
   >
     <div class="flex items-center justify-between mb-1 w-[399px] lg:w-full">
       <div :class="`${repoType}-path`"
-           class="text-md text-[#344054] font-normal text-ellipsis overflow-hidden whitespace-nowrap"
+           class="text-md text-gray-700 font-normal text-ellipsis overflow-hidden whitespace-nowrap"
       >
         {{ getComputed.path }}
       </div>
@@ -29,13 +29,13 @@
     </div>
 
     <p v-if="getComputed.showDescription"
-      class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] mb-1 text-[#667085] text-sm overflow-hidden text-ellipsis line-clamp-2 text-left"
+      class="w-[390px] lg:w-[370px] mlg:w-full h-[35px] leading-[18px] mb-1 text-gray-500 text-sm overflow-hidden text-ellipsis line-clamp-2 text-left"
       :class="isCollection ? 'hidden' : ''"
      >
       {{ repo.description }}
     </p>
 
-    <div class="flex flex-nowrap overflow-hidden text-ellipsis items-center gap-[8px] text-xs text-[#667085]">
+    <div class="flex flex-nowrap overflow-hidden text-ellipsis items-center gap-[8px] text-xs text-gray-500">
       <span v-if="getComputed.taskTag"
             class="max-w-[80px] xl:max-w-full overflow-hidden text-ellipsis whitespace-nowrap"
       >
diff --git a/frontend/src/components/shared/RepoSummary.vue b/frontend/src/components/shared/RepoSummary.vue
index ca8265b47..d85ba8e62 100644
--- a/frontend/src/components/shared/RepoSummary.vue
+++ b/frontend/src/components/shared/RepoSummary.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex md:px-5 md:flex-col-reverse min-h-[calc(100vh-341px)]">
-    <div class="max-w-[60%] sm:max-w-[100%] pt-4 pb-10 pr-5 sm:pr-0 break-words flex-1 border-t border-[#EBEEF5] md:border-t-0">
+    <div class="max-w-[60%] sm:max-w-[100%] pt-4 pb-10 pr-5 sm:pr-0 break-words flex-1 border-t border-gray-200 md:border-t-0">
       <el-skeleton v-if="loading" class="mt-4" :rows="5" animated />
       <ParquetViewer v-if="datasetInfo" :datasetInfo="datasetInfo" :namespacePath="namespacePath" />
       <markdown-viewer
@@ -10,10 +10,10 @@
       >
       </markdown-viewer>
     </div>
-    <div class="w-[40%] sm:w-[100%] border-l border-[#EBEEF5] md:border-l-0 md:border-b md:w-full md:pl-0">
+    <div class="w-[40%] sm:w-[100%] border-l border-gray-200 md:border-l-0 md:border-b md:w-full md:pl-0">
       <div class="p-[16px]">
-        <div class="text-[#606266] text-base font-medium leading-[22px] md:pl-0">{{ $t('all.downloadCount') }}</div>
-        <div class="text-[#303133] text-base font-semibold leading-6 mt-1 md:pl-0">{{ downloadCount }}</div>
+        <div class="text-gray-500 text-base font-medium leading-[22px] md:pl-0">{{ $t('all.downloadCount') }}</div>
+        <div class="text-gray-700 text-base font-semibold leading-6 mt-1 md:pl-0">{{ downloadCount }}</div>
       </div>
 
       <TestEndpoint
diff --git a/frontend/src/components/shared/UploadFile.vue b/frontend/src/components/shared/UploadFile.vue
index 5fa0b6a35..a1ad1b789 100644
--- a/frontend/src/components/shared/UploadFile.vue
+++ b/frontend/src/components/shared/UploadFile.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="flex flex-col gap-[16px] min-h-[300px] py-[32px] md:px-5">
     <div class="test-[14px]"><p>{{ repoName }}/</p></div>
-    <div class="border border-[#DCDFE6] rounded-[4px] bg-[#F5F7FA]">
-      <div class="flex text-[14px] text-[#4D6AD6] leading-[22px]">
+    <div class="border border-gray-200 rounded-[4px] bg-gray-100">
+      <div class="flex text-[14px] text-brand-500 leading-[22px]">
         <div class="px-[20px] py-[9px] border-r bg-white w-[140px]">
           {{ $t('all.uploadFile') }}
         </div>
@@ -40,7 +40,7 @@
       </div>
     </div>
 
-    <el-radio-group v-model="new_branch" class="my-4 py-4 border border-[#DCDFE6] border-l-0 border-r-0">
+    <el-radio-group v-model="new_branch" class="my-4 py-4 border border-gray-200 border-l-0 border-r-0">
       <el-radio label="main" size="large">{{ $t('shared.commitToMain') }}</el-radio>
     </el-radio-group>
 
diff --git a/frontend/src/components/shared/ViewMore.vue b/frontend/src/components/shared/ViewMore.vue
index 395d549a0..22a0dca89 100644
--- a/frontend/src/components/shared/ViewMore.vue
+++ b/frontend/src/components/shared/ViewMore.vue
@@ -8,7 +8,7 @@
       <svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg">
         <path d="M1 1.5L6 6.5L11 1.5" stroke="#475467" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
       </svg>
-      <div class="text-[14px] leading-[20px] text-[#475467] font-medium ml-2">展示更多</div>
+      <div class="text-[14px] leading-[20px] text-gray-600 font-medium ml-2">展示更多</div>
     </div>
     <div class="flex-1 border-b"></div>
   </div>
diff --git a/frontend/src/components/shared/form/PublicAndPrivateRadioGroup.vue b/frontend/src/components/shared/form/PublicAndPrivateRadioGroup.vue
index 2e4eb33ba..d813f075e 100644
--- a/frontend/src/components/shared/form/PublicAndPrivateRadioGroup.vue
+++ b/frontend/src/components/shared/form/PublicAndPrivateRadioGroup.vue
@@ -11,7 +11,7 @@
       border
     >
       {{ t('all.public') }}
-      <p class="whitespace-normal text-[#475467] font-light">
+      <p class="whitespace-normal text-gray-600 font-light">
         {{ props.publicDesc }}
       </p>
     </el-radio>
@@ -22,7 +22,7 @@
       border
     >
       {{ t('all.private') }}
-      <p class="whitespace-normal text-[#475467] font-light">
+      <p class="whitespace-normal text-gray-600 font-light">
         {{ props.privateDesc }}
       </p>
     </el-radio>
diff --git a/frontend/src/components/shared/viewers/MarkdownViewer.vue b/frontend/src/components/shared/viewers/MarkdownViewer.vue
index 14ce88383..c2bf04955 100644
--- a/frontend/src/components/shared/viewers/MarkdownViewer.vue
+++ b/frontend/src/components/shared/viewers/MarkdownViewer.vue
@@ -45,7 +45,7 @@
 
       const copyButtonFragment = `
         <clipboard-copy value="${escapeHtml(str)}"
-                        class="copy-button p-1 h-fit hidden group-hover:block hover:bg-[#F0F2F5] rounded cursor-pointer"
+                        class="copy-button p-1 h-fit hidden group-hover:block hover:bg-gray-500 rounded cursor-pointer"
         >${copyIcon}</clipboard-copy>`
 
       if (lang && hljs.getLanguage(lang)) {
diff --git a/frontend/src/components/tags/TagItem.vue b/frontend/src/components/tags/TagItem.vue
index fe27a3c47..be2334c9c 100644
--- a/frontend/src/components/tags/TagItem.vue
+++ b/frontend/src/components/tags/TagItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <span class="text-[14px] text-[#344054] px-[8px] py-[3px] rounded-[6px] cursor-pointer flex items-center gap-[3px] border border-[#D0D5DD]"
-        :class="{ 'bg-[#4D6AD6]': active, 'text-white': active, 'border-[#4D6AD6]': active }"
+  <span class="text-[14px] text-gray-700 px-[8px] py-[3px] rounded-[6px] cursor-pointer flex items-center gap-[3px] border border-gray-300"
+        :class="{ 'bg-brand-500': active, 'text-white': active, 'border-brand-500': active }"
         @click="emit('handleTagClick', tag)">
     <img :src="'/images/tags/' + tag.name + '.svg'"
          class="w-[14px] h-[14px]"
diff --git a/frontend/src/components/tags/TagSidebar.vue b/frontend/src/components/tags/TagSidebar.vue
index 3cda05e9c..fd3da9bc8 100644
--- a/frontend/src/components/tags/TagSidebar.vue
+++ b/frontend/src/components/tags/TagSidebar.vue
@@ -1,34 +1,34 @@
 <template>
-  <div class="flex bg-[#fff] flex-col pt-[32px] pb-[60px]">
+  <div class="flex bg-white flex-col pt-[32px] pb-[60px]">
     <div class="flex">
-      <span v-show="type !== 'code' && type !== 'space'" class="mr-[4px] py-[8px] px-[12px] text-[14px] text-[#667085] cursor-pointer hover:bg-gray-50"
+      <span v-show="type !== 'code' && type !== 'space'" class="mr-[4px] py-[8px] px-[12px] text-[14px] text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Task"
-            :class="activeNavItem === 'Task' ? 'text-[#344054] active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Task' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
             @click="changeActiveItem"
       >
         {{ $t('all.tasks') }}
       </span>
       <span v-show="type === 'model'"
-            class="mr-[4px] py-[8px] px-[12px] text-[14px] text-[#667085] cursor-pointer hover:bg-gray-50"
+            class="mr-[4px] py-[8px] px-[12px] text-[14px] text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Framework"
-            :class="activeNavItem === 'Framework' ? 'text-[#344054] active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Framework' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
             @click="changeActiveItem"
       >
       {{ $t('all.framework') }}
       </span>
 
       <span v-show="type === 'model' || type === 'dataset'"
-            class="mr-[4px] py-[8px] px-[12px] text-[14px] text-[#667085] cursor-pointer hover:bg-gray-50"
+            class="mr-[4px] py-[8px] px-[12px] text-[14px] text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="Language"
-            :class="activeNavItem === 'Language' ? 'text-[#344054] active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'Language' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
             @click="changeActiveItem"
       >
       {{ $t('all.languages') }}
       </span>
 
-      <span class="mr-[4px] py-[8px] px-[12px] text-[14px] text-[#667085] cursor-pointer hover:bg-gray-50"
+      <span class="mr-[4px] py-[8px] px-[12px] text-[14px] text-gray-500 cursor-pointer hover:bg-gray-50"
             data-type="License"
-            :class="activeNavItem === 'License' ? 'text-[#344054] active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
+            :class="activeNavItem === 'License' ? 'text-gray-700 active-type font-[600] shadow-outline-gray-400 shadow-outline-4' : ''"
             @click="changeActiveItem"
       >
       License
@@ -47,7 +47,7 @@
         />
         <div class="">
           <div v-for="(value, key) in theTaskTags">
-            <h3 class="text-[#909399] text-[12px] my-[16px]">{{ $t(`tags.${key}`) }}</h3>
+            <h3 class="text-gray-500 text-[12px] my-[16px]">{{ $t(`tags.${key}`) }}</h3>
             <div class="flex gap-[8px] flex-wrap">
               <tag-item v-for="tag in value" :tag="tag" :active="activeTaskTag === tag.name" @handleTagClick="setActiveTaskTag" />
             </div>
@@ -103,7 +103,7 @@
         />
         <div class="flex gap-[8px] flex-wrap">
           <span v-for="languageTag in theLanguageTags"
-                class="text-[14px] text-[#303133] px-[8px] py-[4px] rounded-[4px] cursor-pointer flex items-center gap-[4px]"
+                class="text-[14px] text-gray-700 px-[8px] py-[4px] rounded-[4px] cursor-pointer flex items-center gap-[4px]"
                 :data-tag_name="languageTag.name"
                 :style="setLanguageTagColor(languageTag.name)"
                 @click="setActiveLanguageTag(languageTag.name)"
@@ -124,7 +124,7 @@
           @input = "filterLicenseTags"
         />
         <div class="flex gap-[8px] flex-wrap">
-          <span v-for="licenseTag in theLicenseTags" class="text-[14px] text-[#303133] px-[8px] py-[3px] rounded-[6px] cursor-pointer flex items-center gap-[4px] border border-gray-200"
+          <span v-for="licenseTag in theLicenseTags" class="text-[14px] text-gray-700 px-[8px] py-[3px] rounded-[6px] cursor-pointer flex items-center gap-[4px] border border-gray-200"
                 :data-tag_name="licenseTag.name"
                 :style="setLicenseTagColor(licenseTag.name)"
                 @click="setActiveLicenseTag"
diff --git a/frontend/src/components/user_settings/AccessTokenSettings.vue b/frontend/src/components/user_settings/AccessTokenSettings.vue
index 3ef88e511..c9dac6e7e 100644
--- a/frontend/src/components/user_settings/AccessTokenSettings.vue
+++ b/frontend/src/components/user_settings/AccessTokenSettings.vue
@@ -9,13 +9,13 @@
     <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l min-h-[calc(100vh-153px)]">
       <div class="max-w-[512px]">
         <div class="mb-[16px]">
-          <h3 class="mb-[4px] text-[#303133] text-[20px] font-semibold">
+          <h3 class="mb-[4px] text-gray-700 text-[20px] font-semibold">
             {{ $t('accessToken.title') }}
           </h3>
-          <p class="text-[#606266] text-[14px]">{{ $t('accessToken.desc') }}</p>
+          <p class="text-gray-500 text-[14px]">{{ $t('accessToken.desc') }}</p>
         </div>
-        <div class="bg-[#F5F7FA] p-[12px] rounded-[8px] mt-[16px]">
-          <h3 class="text-[#303133] text-[16px] font-[500] mb-[16px]">
+        <div class="bg-gray-100 p-[12px] rounded-[8px] mt-[16px]">
+          <h3 class="text-gray-700 text-[16px] font-[500] mb-[16px]">
             access token
           </h3>
           <div class="flex items-center">
@@ -26,7 +26,7 @@
               onfocus="this.blur()"
             />
             <div
-              class="ml-[8px] px-[16px] py-[8px] border rounded-[4px] bg-[#FFF] cursor-pointer"
+              class="ml-[8px] px-[16px] py-[8px] border rounded-[4px] bg-white cursor-pointer"
               @click="copyToken"
             >
               <SvgIcon name="copy" />
diff --git a/frontend/src/components/user_settings/Menu.vue b/frontend/src/components/user_settings/Menu.vue
index f29406f0b..02e78a371 100644
--- a/frontend/src/components/user_settings/Menu.vue
+++ b/frontend/src/components/user_settings/Menu.vue
@@ -7,25 +7,25 @@
             <div class="text-[18px] leading-[28px] font-semibold">
               {{ userStore.nickname || userStore.username }}
             </div>
-            <div class="text-[16px] text-[#909399] leading-[24px] font-light">@{{ userStore.username }}</div>
+            <div class="text-[16px] text-gray-500 leading-[24px] font-light">@{{ userStore.username }}</div>
           </div>
         </div>
         <div class="flex flex-col">
           <!-- profile -->
           <a href="/settings/profile"
-             class="p-[16px] hover:bg-[#F9FAFB] border-[#DCDFE6] text-[16px] text-[#606266] leading-[24px] cursor-pointer"
+             class="p-[16px] hover:bg-gray-50 border-gray-200 text-[16px] text-gray-500 leading-[24px] cursor-pointer"
              :class="menuClass('/settings/profile')"
           >
               {{ $t('profile.accountSetting')}}
           </a>
 
-          <!-- <div class="p-[16px] hover:bg-[#EBEDF0] border-b border-[#DCDFE6] text-[18px] text-[#606266] leading-[26px] opacity-40"
+          <!-- <div class="p-[16px] hover:bg-gray-100 border-b border-gray-200 text-[18px] text-gray-500 leading-[26px] opacity-40"
                :class="menuClass('/settings/account')"
           >
             {{ $t('profile.menu.accountInformation')}}
           </div> -->
 
-          <!-- <div class="p-[16px] hover:bg-[#EBEDF0] border-b border-[#DCDFE6] text-[18px] text-[#606266] leading-[26px] opacity-40"
+          <!-- <div class="p-[16px] hover:bg-gray-100 border-b border-gray-200 text-[18px] text-gray-500 leading-[26px] opacity-40"
                :class="menuClass('/settings/accessTokens')"
           >
             {{ $t('profile.menu.accessToken')}}
@@ -34,7 +34,7 @@
           <!-- access token -->
           <a v-if="hasEmail"
              href="/settings/access-token"
-             class="p-[16px] hover:bg-[#F9FAFB] border-[#DCDFE6] text-[16px] text-[#606266] leading-[24px] cursor-pointer"
+             class="p-[16px] hover:bg-gray-50 border-gray-200 text-[16px] text-gray-500 leading-[24px] cursor-pointer"
              :class="menuClass('/settings/access-token')"
           >
             {{ $t('profile.menu.gitToken')}}
@@ -43,7 +43,7 @@
           <!-- starship api key -->
           <a v-if="hasEmail"
              href="/settings/starship-access-token"
-             class="p-[16px] hover:bg-[#F9FAFB] border-[#DCDFE6] text-[16px] text-[#606266] leading-[24px] cursor-pointer"
+             class="p-[16px] hover:bg-gray-50 border-gray-200 text-[16px] text-gray-500 leading-[24px] cursor-pointer"
              :class="menuClass('/settings/starship-access-token')"
           >
             {{ $t('profile.menu.starshipAccessToken')}}
@@ -52,7 +52,7 @@
           <!-- sync access token -->
           <a v-if="hasEmail"
              href="/settings/sync-access-token"
-             class="p-[16px] hover:bg-[#F9FAFB] border-[#DCDFE6] text-[16px] text-[#606266] leading-[24px] cursor-pointer"
+             class="p-[16px] hover:bg-gray-50 border-gray-200 text-[16px] text-gray-500 leading-[24px] cursor-pointer"
              :class="menuClass('/settings/sync-access-token')"
           >
             {{ $t('profile.menu.syncAccessToken')}}
@@ -61,13 +61,13 @@
           <!-- ssh key -->
           <a v-if="hasEmail"
              href="/settings/ssh-keys"
-             class="p-[16px] hover:bg-[#F9FAFB] border-[#DCDFE6] text-[16px] text-[#606266] leading-[24px] cursor-pointer"
+             class="p-[16px] hover:bg-gray-50 border-gray-200 text-[16px] text-gray-500 leading-[24px] cursor-pointer"
              :class="menuClass('/settings/ssh-keys')"
           >
             {{ $t('profile.menu.sshKey')}}
           </a>
 
-          <!-- <div class="p-[16px] hover:bg-[#EBEDF0] text-[18px] text-[#606266] leading-[26px] opacity-40"
+          <!-- <div class="p-[16px] hover:bg-gray-100 text-[18px] text-gray-500 leading-[26px] opacity-40"
                :class="menuClass('/settings/billing')"
           >
             {{ $t('profile.menu.billing')}}
@@ -116,7 +116,7 @@
 
   const menuClass = (menuPath) => {
     if (menuPath === window.location.pathname) {
-      return 'text-[#303133] font-semibold'
+      return 'text-gray-700 font-semibold'
     } else {
       return ''
     }
diff --git a/frontend/src/components/user_settings/Profile.vue b/frontend/src/components/user_settings/Profile.vue
index d5dd85623..1ebe5045c 100644
--- a/frontend/src/components/user_settings/Profile.vue
+++ b/frontend/src/components/user_settings/Profile.vue
@@ -9,37 +9,37 @@
       {{ isCurrentUser ? userStore.nickname : nickname }}
     </div>
     <!-- name -->
-    <div class="text-[16px] text-[#909399] max-w-[max-content] leading-[24px] mb-[16px]">
+    <div class="text-[16px] text-gray-500 max-w-[max-content] leading-[24px] mb-[16px]">
       @{{ isCurrentUser ? userStore.username : username }}
     </div>
     <!-- profile settings -->
     <div v-if="isCurrentUser" class="flex xl:flex-col md:flex-row gap-3">
-      <a href="/settings/profile" class="px-[12px] py-[5px] lg:w-[200px] md:w-auto text-center border border-[#DCDFE6] rounded-[4px] text-[14px] leading-[22px] font-medium hover:bg-[#EAECF0] hover:text-[#808080]">
-        {{ $t('profile.accountSetting')}}
+      <a href="/settings/profile" class="px-[12px] py-[5px] lg:w-[200px] md:w-auto text-center border border-gray-200 rounded-[4px] text-[14px] leading-[22px] font-medium hover:bg-gray-200 hover:text-gray-700">
+        {{ $t('profile.editProfile')}}
       </a>
-      <a href="/settings/profile" class="px-[12px] py-[5px] border border-[#DCDFE6] rounded-[4px] text-[14px] leading-[22px] font-medium hover:bg-[#EAECF0] hover:text-[#808080] hidden">
+      <a href="/settings/profile" class="px-[12px] py-[5px] border border-gray-200 rounded-[4px] text-[14px] leading-[22px] font-medium hover:bg-gray-200 hover:text-gray-700 hidden">
         {{ $t('profile.settings')}}
       </a>
     </div>
     <!-- roles -->
-    <div v-if="isCurrentUser ? userStore.roles : userRoles" class="mt-[16px] text-[#606266] text-[16px] leading-[24px] flex items-center gap-[8px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.66663 12.533C2.66663 10.7657 4.09931 9.33301 5.86663 9.33301H10.1333C11.9006 9.33301 13.3333 10.7657 13.3333 12.533V12.533C13.3333 13.7112 12.3782 14.6663 11.2 14.6663H4.79996C3.62175 14.6663 2.66663 13.7112 2.66663 12.533V12.533Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6666 3.99967C10.6666 5.47243 9.47272 6.66634 7.99996 6.66634C6.5272 6.66634 5.33329 5.47243 5.33329 3.99967C5.33329 2.52692 6.5272 1.33301 7.99996 1.33301C9.47272 1.33301 10.6666 2.52692 10.6666 3.99967Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
+    <div v-if="isCurrentUser ? userStore.roles : userRoles" class="mt-[16px] text-gray-500 text-[16px] leading-[24px] flex items-center gap-[8px]"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M2.66663 12.533C2.66663 10.7657 4.09931 9.33301 5.86663 9.33301H10.1333C11.9006 9.33301 13.3333 10.7657 13.3333 12.533V12.533C13.3333 13.7112 12.3782 14.6663 11.2 14.6663H4.79996C3.62175 14.6663 2.66663 13.7112 2.66663 12.533V12.533Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/><path d="M10.6666 3.99967C10.6666 5.47243 9.47272 6.66634 7.99996 6.66634C6.5272 6.66634 5.33329 5.47243 5.33329 3.99967C5.33329 2.52692 6.5272 1.33301 7.99996 1.33301C9.47272 1.33301 10.6666 2.52692 10.6666 3.99967Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
       {{ isCurrentUser ? userStore.roles.join(',') : userRoles.join(', ') }}
     </div>
     <!-- phone -->
     <div v-if="hasPhone"
-         class="mt-[16px] text-[#606266] text-[16px] leading-[24px] flex items-center gap-[8px]">
+         class="mt-[16px] text-gray-500 text-[16px] leading-[24px] flex items-center gap-[8px]">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M8.00004 3.99967H8.00671M6.66671 12.6663H9.33337M8.33337 3.99967C8.33337 4.18377 8.18414 4.33301 8.00004 4.33301C7.81595 4.33301 7.66671 4.18377 7.66671 3.99967C7.66671 3.81558 7.81595 3.66634 8.00004 3.66634C8.18414 3.66634 8.33337 3.81558 8.33337 3.99967ZM7.60004 14.6663H8.40004C9.89351 14.6663 10.6403 14.6663 11.2107 14.3757C11.7124 14.12 12.1204 13.7121 12.3761 13.2103C12.6667 12.6399 12.6667 11.8931 12.6667 10.3997V5.59967C12.6667 4.1062 12.6667 3.35946 12.3761 2.78903C12.1204 2.28727 11.7124 1.87932 11.2107 1.62366C10.6403 1.33301 9.89351 1.33301 8.40004 1.33301H7.60004C6.10657 1.33301 5.35983 1.33301 4.7894 1.62366C4.28763 1.87932 3.87969 2.28727 3.62402 2.78903C3.33337 3.35946 3.33337 4.1062 3.33337 5.59967V10.3997C3.33337 11.8931 3.33337 12.6399 3.62402 13.2103C3.87969 13.7121 4.28763 14.12 4.7894 14.3757C5.35983 14.6663 6.10657 14.6663 7.60004 14.6663Z" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></svg>
       {{ isCurrentUser ? userStore.phone : phone }}
     </div>
     <!-- email -->
     <div v-if="hasEmail"
-         class="mt-[16px] text-[#606266] text-[16px] leading-[24px] flex items-center gap-[8px]">
+         class="mt-[16px] text-gray-500 text-[16px] leading-[24px] flex items-center gap-[8px]">
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M12 5.33333L11.3334 5.77778L10.9584 6.02773C9.88925 6.74053 9.35466 7.09692 8.77684 7.23539C8.2662 7.35776 7.73388 7.35776 7.22325 7.23539C6.64543 7.09692 6.11083 6.74053 5.04164 6.02773L4.66671 5.77778L4.00004 5.33333M6.6667 14H9.33337C11.2002 14 12.1336 14 12.8467 13.6367C13.4739 13.3171 13.9838 12.8072 14.3034 12.18C14.6667 11.4669 14.6667 10.5335 14.6667 8.66667V7.33333C14.6667 5.46649 14.6667 4.53307 14.3034 3.82003C13.9838 3.19282 13.4739 2.68289 12.8467 2.36331C12.1336 2 11.2002 2 9.33338 2H6.66671C4.79987 2 3.86644 2 3.15341 2.36331C2.5262 2.68289 2.01626 3.19282 1.69669 3.82003C1.33337 4.53307 1.33337 5.46649 1.33337 7.33333V8.66667C1.33337 10.5335 1.33337 11.4669 1.69669 12.18C2.01626 12.8072 2.5262 13.3171 3.15341 13.6367C3.86644 14 4.79986 14 6.6667 14Z" stroke="#2F384C" stroke-linecap="round"/></svg>
       <div class="w-[90%] overflow-hidden text-ellipsis">{{ isCurrentUser ? userStore.email : email }}</div>
     </div>
     <!-- last login time -->
     <div v-if="hasLastLoginTime"
-         class="mt-[16px] text-[#606266] text-[16px] leading-[24px] flex items-center gap-[8px]">
+         class="mt-[16px] text-gray-500 text-[16px] leading-[24px] flex items-center gap-[8px]">
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(#clip0_1405_18826)"><path d="M1.33337 7.99967C1.33337 11.3134 4.00004 14.6663 8.00004 14.6663C12 14.6663 14.6667 11.9997 14.6667 7.99967C14.6667 3.99967 12 1.33301 8.00004 1.33301C4.00004 1.33301 1.33337 4.66634 1.33337 4.66634M1.33337 4.66634V1.99967M1.33337 4.66634H3.66671M8.00004 5.33301V7.99967L10 9.33301" stroke="#2F384C" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1405_18826"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>
       {{ isCurrentUser ? userStore.lastLoginTime : theLastLoginTime }}
     </div>
@@ -55,7 +55,7 @@
           </a>
         </p>
       </div>
-      <div v-else class="text-[#909399]">
+      <div v-else class="text-gray-500">
         {{ $t('all.noData')}}
       </div>
     </div>
diff --git a/frontend/src/components/user_settings/ProfileEdit.vue b/frontend/src/components/user_settings/ProfileEdit.vue
index dac905865..ecff72c8c 100644
--- a/frontend/src/components/user_settings/ProfileEdit.vue
+++ b/frontend/src/components/user_settings/ProfileEdit.vue
@@ -25,12 +25,12 @@
           @change="uploadAvatar" />
         <div
           @click="uploadImage"
-          class="text-[14px] border border-[#DCDFE6] px-[20px] py-[9px] leading-[22px] text-center rounded-[8px] text-white cursor-pointer bg-[#409EFF]">
+          class="text-[14px] border border-gray-200 px-[20px] py-[9px] leading-[22px] text-center rounded-[8px] text-white cursor-pointer bg-brand-600">
           {{ $t('profile.edit.uploadAvatar') }}
         </div>
         <div
           @click="removeImage"
-          class="text-[14px] border border-[#DCDFE6] px-[20px] py-[9px] leading-[22px] text-center rounded-[8px] text-[#606266] cursor-pointer bg-white">
+          class="text-[14px] border border-gray-200 px-[20px] py-[9px] leading-[22px] text-center rounded-[8px] text-gray-500 cursor-pointer bg-white">
           {{ $t('profile.edit.removeAvatar') }}
         </div>
       </div>
@@ -135,7 +135,7 @@
     </div>
     <div
       @click="confirmUpdateProfile"
-      class="w-[111px] text-[14px] border border-[#DCDFE6] px-[16px] py-[5px] leading-[22px] text-center rounded-[8px] text-white cursor-pointer bg-[#409EFF]">
+      class="w-[111px] text-[14px] border border-gray-200 px-[16px] py-[5px] leading-[22px] text-center rounded-[8px] text-white cursor-pointer bg-brand-600">
       {{ $t('all.save') }}
     </div>
   </div>
diff --git a/frontend/src/components/user_settings/SshKeyCard.vue b/frontend/src/components/user_settings/SshKeyCard.vue
index 8c01f3c97..f2eea07b6 100644
--- a/frontend/src/components/user_settings/SshKeyCard.vue
+++ b/frontend/src/components/user_settings/SshKeyCard.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="mt-[16px] rounded-lg bg-[#F5F7FA] p-[12px] w-[480px] lg:w-full">
+  <div class="mt-[16px] rounded-lg bg-gray-100 p-[12px] w-[480px] lg:w-full">
     <div class="flex items-center pb-[16px] pt-[2px] border-b-2 md:block relative">
       <p class="font-medium text-base break-words mr-[8px]">{{ theSshKeyName }}</p>
-      <p class="text-[#606266] text-[13px] md:pl-0 md:mt-[4px]"> {{ passedTime }}</p>
+      <p class="text-gray-500 text-[13px] md:pl-0 md:mt-[4px]"> {{ passedTime }}</p>
       <div @click="deleteDialogVisible = true"
            class="flex items-center justify-center absolute top-0 right-0 w-[46px] h-[32px] bg-white rounded border-2 text-right">
         <svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -12,7 +12,7 @@
         </svg>
       </div>
     </div>
-    <div class="pt-[16px]"><p class="break-all text-[#606266] text-sm">{{ theSshKey }}</p></div>
+    <div class="pt-[16px]"><p class="break-all text-gray-500 text-sm">{{ theSshKey }}</p></div>
   </div>
   <el-dialog v-model="deleteDialogVisible" :title="$t('sshKey.delKeyName', {value: sshKeyName})" width="30%" class="dialogWidth"
              style="border-radius: 0.5rem;" left>
diff --git a/frontend/src/components/user_settings/SshKeySettings.vue b/frontend/src/components/user_settings/SshKeySettings.vue
index ebc1c7fe0..618a9aa69 100644
--- a/frontend/src/components/user_settings/SshKeySettings.vue
+++ b/frontend/src/components/user_settings/SshKeySettings.vue
@@ -8,16 +8,16 @@
     >
     </Menu>
     <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l min-h-[calc(100vh-153px)]">
-      <h3 class="text-[#303133] text-[20px] font-[600]">SSH Keys</h3>
+      <h3 class="text-gray-700 text-[20px] font-[600]">SSH Keys</h3>
       <button
         @click="centerDialogVisible = true"
-        class="rounded-[4px] border bg-[#FFF] py-[5px] px-[16px] text-[#606266] text-[14px] font-[500] mt-[32px] w-[160px]"
+        class="rounded-[4px] border bg-white py-[5px] px-[16px] text-gray-500 text-[14px] font-[500] mt-[32px] w-[160px]"
       >
         {{ $t('sshKey.addSshKey') }}
       </button>
       <div
         v-if="theSshKeys.length === 0"
-        class="mt-[16px] rounded-sm w-full bg-[#F0F3FF] py-[9px] px-[16px] text-[#4D6AD6]"
+        class="mt-[16px] rounded-sm w-full bg-brand-25] py-[9px] px-[16px] text-brand-500"
       >
         {{ $t('sshKey.noKeyTips') }}
       </div>
@@ -44,7 +44,7 @@
           ref="formRef"
         >
           <div class="mb-[16px]">
-            <p class="text-[#303133] text-[14px] mb-[8px]">
+            <p class="text-gray-700 text-[14px] mb-[8px]">
               {{ $t('sshKey.sshKeyName') }} <span class="text-red-400">*</span>
             </p>
             <el-input
@@ -54,7 +54,7 @@
             />
           </div>
           <div>
-            <p class="text-[#303133] text-[14px] mb-[8px]">
+            <p class="text-gray-700 text-[14px] mb-[8px]">
               {{ $t('sshKey.sshKeyContent')
               }}<span class="text-red-400">*</span>
             </p>
diff --git a/frontend/src/components/user_settings/StarshipAccessTokenCard.vue b/frontend/src/components/user_settings/StarshipAccessTokenCard.vue
index 36e9eaffa..e06c60cf9 100644
--- a/frontend/src/components/user_settings/StarshipAccessTokenCard.vue
+++ b/frontend/src/components/user_settings/StarshipAccessTokenCard.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="bg-[#F5F7FA] p-[12px] rounded-[8px] mt-[16px] flex flex-col gap-[8px]"
+    class="bg-gray-100 p-[12px] rounded-[8px] mt-[16px] flex flex-col gap-[8px]"
   >
     <div class="flex justify-between">
-      <h3 class="text-[#303133] text-[16px] font-[500]">
+      <h3 class="text-gray-700 text-[16px] font-[500]">
         {{ tokenName }}
       </h3>
       <el-button
@@ -20,7 +20,7 @@
         onfocus="this.blur()"
       />
       <div
-        class="ml-[8px] px-[16px] py-[8px] border rounded-[4px] bg-[#FFF] cursor-pointer"
+        class="ml-[8px] px-[16px] py-[8px] border rounded-[4px] bg-white cursor-pointer"
         @click="copyToken"
       >
         <SvgIcon name="copy" />
diff --git a/frontend/src/components/user_settings/StarshipAccessTokenSettings.vue b/frontend/src/components/user_settings/StarshipAccessTokenSettings.vue
index e52c138fd..c5781ae99 100644
--- a/frontend/src/components/user_settings/StarshipAccessTokenSettings.vue
+++ b/frontend/src/components/user_settings/StarshipAccessTokenSettings.vue
@@ -12,10 +12,10 @@
     <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l min-h-[calc(100vh-153px)]">
       <div class="max-w-[512px]">
         <div class="mb-[16px]">
-          <h3 class="mb-[4px] text-[#303133] text-[20px] font-semibold">
+          <h3 class="mb-[4px] text-gray-700 text-[20px] font-semibold">
             {{ $t('accessToken.starshipTitle') }}
           </h3>
-          <p class="text-[#606266] text-[14px]">
+          <p class="text-gray-500 text-[14px]">
             {{ $t('accessToken.starshipDesc') }}
           </p>
         </div>
@@ -29,7 +29,7 @@
 
       <button
         @click="centerDialogVisible = true"
-        class="rounded-[4px] border bg-[#FFF] py-[5px] px-[16px] text-[#606266] text-[14px] font-[500] w-[160px]"
+        class="rounded-[4px] border bg-white py-[5px] px-[16px] text-gray-500 text-[14px] font-[500] w-[160px]"
       >
         {{ $t('accessToken.starshipAddToken') }}
       </button>
diff --git a/frontend/src/components/user_settings/SyncAccessTokenSettings.vue b/frontend/src/components/user_settings/SyncAccessTokenSettings.vue
index b64c3a0be..65d749494 100644
--- a/frontend/src/components/user_settings/SyncAccessTokenSettings.vue
+++ b/frontend/src/components/user_settings/SyncAccessTokenSettings.vue
@@ -10,18 +10,18 @@
     <div class="grow flex flex-col gap-[24px] px-6 py-10 border-l min-h-[calc(100vh-153px)]">
       <div class="max-w-[512px]">
         <div class="mb-[16px]">
-          <h3 class="mb-[4px] text-[#303133] text-[20px] font-semibold">
+          <h3 class="mb-[4px] text-gray-700 text-[20px] font-semibold">
             {{ $t('accessToken.syncTitle') }}
           </h3>
-          <p class="text-[#606266] text-[14px]">
+          <p class="text-gray-500 text-[14px]">
             {{ $t('accessToken.syncDesc') }}
           </p>
         </div>
         <div
           v-if="accessToken"
-          class="bg-[#F5F7FA] p-[12px] rounded-[8px] mt-[16px]"
+          class="bg-gray-100 p-[12px] rounded-[8px] mt-[16px]"
         >
-          <h3 class="text-[#303133] text-[16px] font-[500] mb-[16px]">Token</h3>
+          <h3 class="text-gray-700 text-[16px] font-[500] mb-[16px]">Token</h3>
           <div class="flex items-center">
             <el-input
               v-model="accessToken"
@@ -30,7 +30,7 @@
               onfocus="this.blur()"
             />
             <div
-              class="ml-[8px] px-[16px] py-[8px] border rounded-[4px] bg-[#FFF] cursor-pointer"
+              class="ml-[8px] px-[16px] py-[8px] border rounded-[4px] bg-white cursor-pointer"
               @click="copyToken"
             >
               <SvgIcon name="copy" />
diff --git a/frontend/src/views/layouts/navbar.html b/frontend/src/views/layouts/navbar.html
index 290978996..ff184afa4 100644
--- a/frontend/src/views/layouts/navbar.html
+++ b/frontend/src/views/layouts/navbar.html
@@ -1,5 +1,5 @@
 {{ define "layouts/navbar.html" }}
-<div class="bg-white border-b border-[#DCDFE6]">
+<div class="bg-white border-b border-gray-200">
   <Navbar
     logo="/images/opencsg_logo.png"
     is-logged-in="{{ .isLoggedIn }}"
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 2a41b9500..becbcd821 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -6,7 +6,82 @@ export default {
     "./src/**/*.{vue,js,ts,jsx,tsx}",
   ],
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        'white': '#FFFFFF',
+        'gray-25': '#FCFCFD',
+        'gray-50': '#F9FAFB',
+        'gray-100': '#F2F4F7',
+        'gray-200': '#EAECF0',
+        'gray-300': '#D0D5DD',
+        'gray-400': '#98A2B3',
+        'gray-500': '#667085',
+        'gray-600': '#475467',
+        'gray-700': '#344054',
+        'gray-800': '#182230',
+        'gray-900': '#101828',
+        'gray-950': '#0C111D',  
+        'brand-25': '#F0F3FF',
+        'brand-50': '#CED8FF',
+        'brand-100': '#ACBDFF',
+        'brand-200': '#99AFFF',
+        'brand-300': '#6584F8',
+        'brand-400': '#5271E3',
+        'brand-500': '#4D6AD6',
+        'brand-600': '#3250BD',
+        'brand-700': '#223B99',
+        'brand-800': '#17308F',
+        'brand-900': '#25367A',
+        'brand-950': '#0E1B4E',
+        'error-25': '#FFFBFA',
+        'error-50': '#FEF3F2',
+        'error-100': '#FEE4E2',
+        'error-200': '#FECDCA',
+        'error-300': '#FDA29B',
+        'error-400': '#F97066',
+        'error-500': '#F04438',
+        'error-600': '#D92D20',
+        'error-700': '#B42318',
+        'error-800': '#912018',
+        'error-900': '#7A271A',
+        'success-25': '#F6FEF9',
+        'success-50': '#ECFEF5',
+        'success-100': '#D1FADF',
+        'success-200': '#A6F4C5',
+        'success-300': '#6CE9A6',
+        'success-400': '#32D583',
+        'success-500': '#16A364',
+        'success-600': '#138050',
+        'success-700': '#0F603E',
+        'success-800': '#0C4830',
+        'success-900': '#0A3927', 
+        'success-950': '#062219',
+        'warning-25': '#FFFBFA',
+        'warning-50': '#FEF3F2',
+        'warning-100': '#FEE4E2',
+        'warning-200': '#FECDCA',
+        'warning-300': '#FDA29B',
+        'warning-400': '#F97066',
+        'warning-500': '#F04438', 
+        'warning-600': '#D92D20',
+        'warning-700': '#B42318',
+        'warning-800': '#912018',
+        'warning-900': '#7A271A',
+        'warning-950': '#4C150E',
+        'success-25': '#F6FEF9',
+        'success-50': '#ECFDF3',
+        'success-100': '#DCFAE6',
+        'success-200': '#ABEFC6',
+        'success-300': '#75E0A7',
+        'success-400': '#47CD89',
+        'success-500': '#17B26A',
+        'success-600': '#079455',
+        'success-700': '#067647',
+        'success-800': '#085D3A',
+        'success-900': '#074D31',
+        'success-950': '#053321',
+      },
+    },
     screens: {
       '2xl': {'max': '1536px'},
       'xl': {'max': '1280px'},