diff --git a/src/App.jsx b/src/App.jsx
index 15b7e90..48358dc 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -15,31 +15,106 @@ const ThemedApp = () => {
       theme={{
         algorithm: isDarkMode ? theme.darkAlgorithm : theme.defaultAlgorithm,
         token: {
-          colorPrimary: "#1677ff",
-          borderRadius: 4,
-          colorBgContainer: isDarkMode ? "#141414" : "#ffffff",
-          colorBgElevated: isDarkMode ? "#1f1f1f" : "#ffffff",
-          colorText: isDarkMode
-            ? "rgba(255, 255, 255, 0.85)"
-            : "rgba(0, 0, 0, 0.85)",
-          colorTextSecondary: isDarkMode
-            ? "rgba(255, 255, 255, 0.45)"
-            : "rgba(0, 0, 0, 0.45)",
+          // 颜色
+          colorPrimary: '#006494',
+          colorSuccess: '#16A34A',
+          colorWarning: '#FBBF24',
+          colorError: '#DC2626',
+          colorInfo: '#006494',
+          
+          // 中性色
+          colorText: isDarkMode ? 'rgba(255, 255, 255, 0.87)' : 'rgba(0, 0, 0, 0.87)',
+          colorTextSecondary: isDarkMode ? 'rgba(255, 255, 255, 0.60)' : 'rgba(0, 0, 0, 0.60)',
+          colorTextTertiary: isDarkMode ? 'rgba(255, 255, 255, 0.38)' : 'rgba(0, 0, 0, 0.38)',
+          colorBgContainer: isDarkMode ? '#121212' : '#ffffff',
+          colorBgElevated: isDarkMode ? '#242424' : '#ffffff',
+          colorBorder: isDarkMode ? 'rgba(255, 255, 255, 0.12)' : 'rgba(0, 0, 0, 0.12)',
+
+          // 字体
+          fontFamily: '"Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif',
+          fontSize: 16,
+          
+          // 圆角
+          borderRadius: 8,
+          borderRadiusLG: 12,
+          borderRadiusSM: 4,
+          borderRadiusXS: 2,
+
+          // 线框
+          lineWidth: 1,
+          lineType: 'solid',
+
+          // 动画
+          motionDurationMid: '0.2s',
+          motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
+          motionEaseOut: 'cubic-bezier(0.0, 0, 0.2, 1)',
+          motionEaseIn: 'cubic-bezier(0.4, 0, 1, 1)',
+
+          // 阴影
+          boxShadow: isDarkMode 
+            ? '0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15)' 
+            : '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 3px rgba(0, 0, 0, 0.08)',
+          boxShadowSecondary: isDarkMode
+            ? '0 4px 12px 6px rgba(0, 0, 0, 0.4)'
+            : '0 4px 12px 6px rgba(0, 0, 0, 0.12)',
         },
         components: {
-          // 为所有支持 variant 的组件设置 filled 模式
-          Form: {
-            variant: 'filled',
+          // 按钮样式
+          Button: {
+            borderRadius: 8,
+            controlHeight: 40,
+            paddingContentHorizontal: 24,
+            primaryShadow: 'none',
           },
+          // 输入框样式
           Input: {
+            controlHeight: 48,
+            borderRadius: 8,
+            paddingContentHorizontal: 16,
             variant: 'filled',
           },
+          // 选择器样式
           Select: {
+            controlHeight: 48,
+            borderRadius: 8,
             variant: 'filled',
           },
-          TreeSelect: {
+          // 表单样式
+          Form: {
+            labelFontSize: 14,
+            margin: 24,
+            itemMarginBottom: 24,
             variant: 'filled',
           },
+          // 卡片样式
+          Card: {
+            borderRadius: 12,
+            padding: 24,
+          },
+          // 模态框样式
+          Modal: {
+            borderRadius: 12,
+            paddingContentHorizontal: 24,
+            paddingContentVertical: 24,
+          },
+          // 下拉菜单样式
+          Dropdown: {
+            borderRadius: 8,
+            controlHeight: 40,
+          },
+          // 标签页样式
+          Tabs: {
+            inkBarColor: '#006494',
+            cardGutter: 8,
+          },
+          // 表格样式
+          Table: {
+            borderRadius: 8,
+            padding: 16,
+            cellPaddingBlock: 16,
+            cellPaddingInline: 16,
+          },
+          // 其他组件的 filled 变体设置
           DatePicker: {
             variant: 'filled',
           },
@@ -49,10 +124,13 @@ const ThemedApp = () => {
           Cascader: {
             variant: 'filled',
           },
+          TreeSelect: {
+            variant: 'filled',
+          },
           AutoComplete: {
             variant: 'filled',
           },
-        }
+        },
       }}
     >
       <div className={isDarkMode ? "dark" : ""}>
diff --git a/src/pages/auth/Login.jsx b/src/pages/auth/Login.jsx
index ce06cc9..1e7a064 100644
--- a/src/pages/auth/Login.jsx
+++ b/src/pages/auth/Login.jsx
@@ -101,7 +101,7 @@ const Login = () => {
 
       {/* 右侧图片 */}
       <div className="hidden md:flex md:w-1/2 items-center justify-center p-12">
-        <div className="w-full h-full rounded-3xl bg-[url('https://uppeta.com/img/svg/main.svg')] bg-center bg-contain bg-no-repeat dark:opacity-90 transform hover:scale-105 transition-all duration-500" />
+        <div className="w-full h-full rounded-3xl bg-[url('https://uppeta.com/img/svg/main.svg')] bg-center bg-contain bg-no-repeat dark:opacity-90 animate-pulse-slow transform hover:scale-105 transition-all duration-500" />
       </div>
     </div>
   </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index 2002e35..cc15984 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -8,25 +8,124 @@ export default {
   theme: {
     extend: {
       colors: {
+        // Material Design 3 调色板
         primary: {
-          DEFAULT: '#1677ff',
-          dark: '#0958d9',
+          DEFAULT: '#006494',  // 主色
+          50: '#F0F9FF',
+          100: '#E0F2FE',
+          200: '#B9E6FE',
+          300: '#7CD4FD',
+          400: '#36BFFA',
+          500: '#0BA5EC',
+          600: '#0086C9',
+          700: '#006494',
+          800: '#00497D',
+          900: '#003356',
         },
-        success: {
-          DEFAULT: '#52c41a',
-          dark: '#389e0d',
+        secondary: {
+          DEFAULT: '#625B71',
+          50: '#F6F5F7',
+          100: '#ECEAEF',
+          200: '#D9D6DF',
+          300: '#B3AEBF',
+          400: '#8C859E',
+          500: '#625B71',
+          600: '#4E495A',
+          700: '#3B3744',
+          800: '#27242D',
+          900: '#141217',
         },
-        warning: {
-          DEFAULT: '#faad14',
-          dark: '#d48806',
+        surface: {
+          DEFAULT: '#FFFFFF',
+          dark: '#121212',
         },
         error: {
-          DEFAULT: '#ff4d4f',
-          dark: '#d9363e',
+          DEFAULT: '#DC2626',
+          50: '#FEF2F2',
+          100: '#FEE2E2',
+          200: '#FECACA',
+          300: '#FCA5A5',
+          400: '#F87171',
+          500: '#EF4444',
+          600: '#DC2626',
+          700: '#B91C1C',
+          800: '#991B1B',
+          900: '#7F1D1D',
         },
+        success: {
+          DEFAULT: '#16A34A',
+          50: '#F0FDF4',
+          100: '#DCFCE7',
+          200: '#BBF7D0',
+          300: '#86EFAC',
+          400: '#4ADE80',
+          500: '#22C55E',
+          600: '#16A34A',
+          700: '#15803D',
+          800: '#166534',
+          900: '#14532D',
+        },
+        warning: {
+          DEFAULT: '#FBBF24',
+          50: '#FFFBEB',
+          100: '#FEF3C7',
+          200: '#FDE68A',
+          300: '#FCD34D',
+          400: '#FBBF24',
+          500: '#F59E0B',
+          600: '#D97706',
+          700: '#B45309',
+          800: '#92400E',
+          900: '#78350F',
+        }
       },
       fontFamily: {
-        sans: ['Poppins', 'sans-serif'],
+        sans: ['Roboto', 'sans-serif'],  // Google 字体
+      },
+      boxShadow: {
+        // Material Design 3 阴影
+        'elevation-1': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'elevation-2': '0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)',
+        'elevation-3': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        'elevation-4': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+        'elevation-5': '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
+      },
+      borderRadius: {
+        // Material Design 3 圆角
+        'none': '0',
+        'sm': '4px',
+        DEFAULT: '8px',
+        'md': '12px',
+        'lg': '16px',
+        'xl': '28px',
+        '2xl': '32px',
+        'full': '9999px',
+      },
+      animation: {
+        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'ripple': 'ripple 0.6s linear',
+      },
+      keyframes: {
+        pulse: {
+          '0%, 100%': {
+            opacity: 1,
+            transform: 'scale(1)',
+          },
+          '50%': {
+            opacity: .9,
+            transform: 'scale(0.98)',
+          },
+        },
+        ripple: {
+          '0%': {
+            transform: 'scale(0)',
+            opacity: 0.4,
+          },
+          '100%': {
+            transform: 'scale(4)',
+            opacity: 0,
+          },
+        }
       },
     },
   },