diff --git a/src/App.tsx b/src/App.tsx
index 1189eda..4f129cc 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -202,17 +202,17 @@ function App() {
 
 
   return (
-    <div className="min-h-screen flex flex-col bg-[var(--color-bg-primary)]">
+    <div className="min-h-screen flex flex-col bg-gray-50">
       {/* Linear 风格的顶部导航 */}
-      <header className="bg-white border-b border-[var(--color-border)] px-6 py-4">
+      <header className="bg-white border-b border-gray-200 px-6 py-4">
         <div className="flex items-center justify-between">
           <div className="flex items-center gap-2">
-            <h1 className="text-xl font-semibold text-[var(--color-primary)]">
+            <h1 className="text-xl font-semibold text-blue-500">
               CC Switch
             </h1>
             <button
               onClick={() => setIsSettingsOpen(true)}
-              className="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-all"
+              className="p-1.5 text-gray-500 hover:text-blue-500 hover:bg-gray-100 rounded-md transition-all"
               title="设置"
             >
               <Settings size={18} />
@@ -224,7 +224,7 @@ function App() {
 
             <button
               onClick={() => setIsAddModalOpen(true)}
-              className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition-colors text-sm font-medium"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium"
             >
               <Plus size={16} />
               添加供应商
@@ -241,8 +241,8 @@ function App() {
             <div
               className={`fixed top-6 left-1/2 transform -translate-x-1/2 z-50 px-4 py-3 rounded-lg shadow-lg transition-all duration-300 ${
                 notification.type === "error"
-                  ? "bg-[var(--color-error)] text-white"
-                  : "bg-[var(--color-success)] text-white"
+                  ? "bg-red-500 text-white"
+                  : "bg-green-500 text-white"
               } ${isNotificationVisible ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-2"}`}
             >
               {notification.message}
diff --git a/src/components/AppSwitcher.tsx b/src/components/AppSwitcher.tsx
index 833a8a5..60bd4fc 100644
--- a/src/components/AppSwitcher.tsx
+++ b/src/components/AppSwitcher.tsx
@@ -13,14 +13,14 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
   };
 
   return (
-    <div className="inline-flex bg-[var(--color-bg-tertiary)] rounded-lg p-1 gap-1">
+    <div className="inline-flex bg-gray-100 rounded-lg p-1 gap-1">
       <button
         type="button"
         onClick={() => handleSwitch("claude")}
         className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "claude"
-            ? "bg-white text-[var(--color-text-primary)] shadow-sm"
-            : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white/50"
+            ? "bg-white text-gray-900 shadow-sm"
+            : "text-gray-500 hover:text-gray-900 hover:bg-white/50"
         }`}
       >
         <Code2 size={16} />
@@ -32,8 +32,8 @@ export function AppSwitcher({ activeApp, onSwitch }: AppSwitcherProps) {
         onClick={() => handleSwitch("codex")}
         className={`inline-flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-all duration-200 ${
           activeApp === "codex"
-            ? "bg-white text-[var(--color-text-primary)] shadow-sm"
-            : "text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white/50"
+            ? "bg-white text-gray-900 shadow-sm"
+            : "text-gray-500 hover:text-gray-900 hover:bg-white/50"
         }`}
       >
         <Terminal size={16} />
diff --git a/src/components/ConfirmDialog.tsx b/src/components/ConfirmDialog.tsx
index fde1d7b..a1bf19f 100644
--- a/src/components/ConfirmDialog.tsx
+++ b/src/components/ConfirmDialog.tsx
@@ -33,18 +33,18 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
       {/* Dialog */}
       <div className="relative bg-white rounded-xl shadow-lg max-w-md w-full mx-4 overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-[var(--color-border)]">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
           <div className="flex items-center gap-3">
-            <div className="w-10 h-10 bg-[var(--color-error-light)] rounded-full flex items-center justify-center">
-              <AlertTriangle size={20} className="text-[var(--color-error)]" />
+            <div className="w-10 h-10 bg-red-100 rounded-full flex items-center justify-center">
+              <AlertTriangle size={20} className="text-red-500" />
             </div>
-            <h3 className="text-lg font-semibold text-[var(--color-text-primary)]">
+            <h3 className="text-lg font-semibold text-gray-900">
               {title}
             </h3>
           </div>
           <button
             onClick={onCancel}
-            className="p-1 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors"
+            className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
           >
             <X size={18} />
           </button>
@@ -52,23 +52,23 @@ export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
 
         {/* Content */}
         <div className="p-6">
-          <p className="text-[var(--color-text-secondary)] leading-relaxed">
+          <p className="text-gray-500 leading-relaxed">
             {message}
           </p>
         </div>
 
         {/* Actions */}
-        <div className="flex items-center justify-end gap-3 p-6 border-t border-[var(--color-border)] bg-[var(--color-bg-tertiary)]">
+        <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-100">
           <button
             onClick={onCancel}
-            className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white rounded-md transition-colors"
+            className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-md transition-colors"
             autoFocus
           >
             {cancelText}
           </button>
           <button
             onClick={onConfirm}
-            className="px-4 py-2 text-sm font-medium bg-[var(--color-error)] text-white hover:bg-[var(--color-error)]/90 rounded-md transition-colors"
+            className="px-4 py-2 text-sm font-medium bg-red-500 text-white hover:bg-red-500/90 rounded-md transition-colors"
           >
             {confirmText}
           </button>
diff --git a/src/components/ProviderForm.tsx b/src/components/ProviderForm.tsx
index 44eca8f..2aa5e59 100644
--- a/src/components/ProviderForm.tsx
+++ b/src/components/ProviderForm.tsx
@@ -453,14 +453,14 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
       {/* Modal */}
       <div className="relative bg-white rounded-xl shadow-lg max-w-3xl w-full mx-4 max-h-[90vh] overflow-hidden flex flex-col">
         {/* Header */}
-        <div className="flex items-center justify-between p-6 border-b border-[var(--color-border)]">
-          <h2 className="text-xl font-semibold text-[var(--color-text-primary)]">
+        <div className="flex items-center justify-between p-6 border-b border-gray-200">
+          <h2 className="text-xl font-semibold text-gray-900">
             {title}
           </h2>
           <button
             type="button"
             onClick={onClose}
-            className="p-1 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors"
+            className="p-1 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
             aria-label="关闭"
           >
             <X size={18} />
@@ -470,12 +470,12 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
         <form onSubmit={handleSubmit} className="flex flex-col flex-1 min-h-0">
           <div className="flex-1 overflow-auto p-6 space-y-6">
             {error && (
-              <div className="flex items-center gap-3 p-4 bg-[var(--color-error-light)] border border-[var(--color-error)]/20 rounded-lg">
+              <div className="flex items-center gap-3 p-4 bg-red-100 border border-red-500/20 rounded-lg">
                 <AlertCircle
                   size={20}
-                  className="text-[var(--color-error)] flex-shrink-0"
+                  className="text-red-500 flex-shrink-0"
                 />
-                <p className="text-[var(--color-error)] text-sm font-medium">
+                <p className="text-red-500 text-sm font-medium">
                   {error}
                 </p>
               </div>
@@ -506,7 +506,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
             <div className="space-y-2">
               <label
                 htmlFor="name"
-                className="block text-sm font-medium text-[var(--color-text-primary)]"
+                className="block text-sm font-medium text-gray-900"
               >
                 供应商名称 *
               </label>
@@ -519,7 +519,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                 placeholder="例如：Anthropic 官方"
                 required
                 autoComplete="off"
-                className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors"
+                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
               />
             </div>
 
@@ -571,7 +571,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
             <div className="space-y-2">
               <label
                 htmlFor="websiteUrl"
-                className="block text-sm font-medium text-[var(--color-text-primary)]"
+                className="block text-sm font-medium text-gray-900"
               >
                 官网地址
               </label>
@@ -583,7 +583,7 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
                 onChange={handleChange}
                 placeholder="https://example.com（可选）"
                 autoComplete="off"
-                className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors"
+                className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors"
               />
             </div>
 
@@ -622,17 +622,17 @@ const ProviderForm: React.FC<ProviderFormProps> = ({
           </div>
 
           {/* Footer */}
-          <div className="flex items-center justify-end gap-3 p-6 border-t border-[var(--color-border)] bg-[var(--color-bg-tertiary)]">
+          <div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200 bg-gray-100">
             <button
               type="button"
               onClick={onClose}
-              className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-white rounded-lg transition-colors"
+              className="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-900 hover:bg-white rounded-lg transition-colors"
             >
               取消
             </button>
             <button
               type="submit"
-              className="inline-flex items-center gap-2 px-4 py-2 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-hover)] transition-colors text-sm font-medium"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors text-sm font-medium"
             >
               <Save size={16} />
               {submitText}
diff --git a/src/components/ProviderForm/ApiKeyInput.tsx b/src/components/ProviderForm/ApiKeyInput.tsx
index 92ae750..72a5308 100644
--- a/src/components/ProviderForm/ApiKeyInput.tsx
+++ b/src/components/ProviderForm/ApiKeyInput.tsx
@@ -28,15 +28,15 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
 
   const inputClass = `w-full px-3 py-2 pr-10 border rounded-lg text-sm transition-colors ${
     disabled
-      ? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed"
-      : "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]"
+      ? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
+      : "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
   }`;
 
   return (
     <div className="space-y-2">
       <label
         htmlFor={id}
-        className="block text-sm font-medium text-[var(--color-text-primary)]"
+        className="block text-sm font-medium text-gray-900"
       >
         {label} {required && "*"}
       </label>
@@ -56,7 +56,7 @@ const ApiKeyInput: React.FC<ApiKeyInputProps> = ({
           <button
             type="button"
             onClick={toggleShowKey}
-            className="absolute inset-y-0 right-0 flex items-center pr-3 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] transition-colors"
+            className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-900 transition-colors"
             aria-label={showKey ? "隐藏API Key" : "显示API Key"}
           >
             {showKey ? <EyeOff size={16} /> : <Eye size={16} />}
diff --git a/src/components/ProviderForm/ClaudeConfigEditor.tsx b/src/components/ProviderForm/ClaudeConfigEditor.tsx
index 9f96001..8691859 100644
--- a/src/components/ProviderForm/ClaudeConfigEditor.tsx
+++ b/src/components/ProviderForm/ClaudeConfigEditor.tsx
@@ -19,16 +19,16 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
       <div className="flex items-center justify-between">
         <label
           htmlFor="settingsConfig"
-          className="block text-sm font-medium text-[var(--color-text-primary)]"
+          className="block text-sm font-medium text-gray-900"
         >
           Claude Code 配置 (JSON) *
         </label>
-        <label className="inline-flex items-center gap-2 text-sm text-[var(--color-text-secondary)] cursor-pointer">
+        <label className="inline-flex items-center gap-2 text-sm text-gray-500 cursor-pointer">
           <input
             type="checkbox"
             checked={disableCoAuthored}
             onChange={(e) => onCoAuthoredToggle(e.target.checked)}
-            className="w-4 h-4 text-[var(--color-primary)] bg-white border-[var(--color-border)] rounded focus:ring-[var(--color-primary)] focus:ring-2"
+            className="w-4 h-4 text-blue-500 bg-white border-gray-200 rounded focus:ring-blue-500 focus:ring-2"
           />
           禁止 Claude Code 签名
         </label>
@@ -44,7 +44,7 @@ const ClaudeConfigEditor: React.FC<ClaudeConfigEditorProps> = ({
 }`}
         rows={12}
       />
-      <p className="text-xs text-[var(--color-text-secondary)]">
+      <p className="text-xs text-gray-500">
         完整的 Claude Code settings.json 配置内容
       </p>
     </div>
diff --git a/src/components/ProviderForm/CodexConfigEditor.tsx b/src/components/ProviderForm/CodexConfigEditor.tsx
index 0612fa6..2ca8d64 100644
--- a/src/components/ProviderForm/CodexConfigEditor.tsx
+++ b/src/components/ProviderForm/CodexConfigEditor.tsx
@@ -20,7 +20,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
       <div className="space-y-2">
         <label
           htmlFor="codexAuth"
-          className="block text-sm font-medium text-[var(--color-text-primary)]"
+          className="block text-sm font-medium text-gray-900"
         >
           auth.json (JSON) *
         </label>
@@ -34,9 +34,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
 }`}
           rows={6}
           required
-          className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[8rem]"
+          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[8rem]"
         />
-        <p className="text-xs text-[var(--color-text-secondary)]">
+        <p className="text-xs text-gray-500">
           Codex auth.json 配置内容
         </p>
       </div>
@@ -44,7 +44,7 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
       <div className="space-y-2">
         <label
           htmlFor="codexConfig"
-          className="block text-sm font-medium text-[var(--color-text-primary)]"
+          className="block text-sm font-medium text-gray-900"
         >
           config.toml (TOML)
         </label>
@@ -54,9 +54,9 @@ const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
           onChange={(e) => onConfigChange(e.target.value)}
           placeholder=""
           rows={8}
-          className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[10rem]"
+          className="w-full px-3 py-2 border border-gray-200 rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 transition-colors resize-y min-h-[10rem]"
         />
-        <p className="text-xs text-[var(--color-text-secondary)]">
+        <p className="text-xs text-gray-500">
           Codex config.toml 配置内容
         </p>
       </div>
diff --git a/src/components/ProviderForm/KimiModelSelector.tsx b/src/components/ProviderForm/KimiModelSelector.tsx
index 664a4fc..aab8e9e 100644
--- a/src/components/ProviderForm/KimiModelSelector.tsx
+++ b/src/components/ProviderForm/KimiModelSelector.tsx
@@ -88,8 +88,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
 
   const selectClass = `w-full px-3 py-2 border rounded-lg text-sm transition-colors appearance-none bg-white ${
     disabled
-      ? "bg-[var(--color-bg-tertiary)] border-[var(--color-border)] text-[var(--color-text-tertiary)] cursor-not-allowed"
-      : "border-[var(--color-border)] focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)]"
+      ? "bg-gray-100 border-gray-200 text-gray-400 cursor-not-allowed"
+      : "border-gray-200 focus:outline-none focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500"
   }`;
 
   const ModelSelect: React.FC<{
@@ -98,7 +98,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
     onChange: (value: string) => void;
   }> = ({ label, value, onChange }) => (
     <div className="space-y-2">
-      <label className="block text-sm font-medium text-[var(--color-text-primary)]">
+      <label className="block text-sm font-medium text-gray-900">
         {label}
       </label>
       <div className="relative">
@@ -123,7 +123,7 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
         </select>
         <ChevronDown
           size={16}
-          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-[var(--color-text-secondary)] pointer-events-none"
+          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 pointer-events-none"
         />
       </div>
     </div>
@@ -132,14 +132,14 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between">
-        <h3 className="text-sm font-medium text-[var(--color-text-primary)]">
+        <h3 className="text-sm font-medium text-gray-900">
           模型配置
         </h3>
         <button
           type="button"
           onClick={() => debouncedKey && fetchModelsWithKey(debouncedKey)}
           disabled={disabled || loading || !debouncedKey}
-          className="inline-flex items-center gap-1 px-2 py-1 text-xs text-[var(--color-text-secondary)] hover:text-[var(--color-primary)] disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          className="inline-flex items-center gap-1 px-2 py-1 text-xs text-gray-500 hover:text-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
         >
           <RefreshCw size={12} className={loading ? "animate-spin" : ""} />
           刷新模型列表
@@ -147,12 +147,12 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
       </div>
 
       {error && (
-        <div className="flex items-center gap-2 p-3 bg-[var(--color-error-light)] border border-[var(--color-error)]/20 rounded-lg">
+        <div className="flex items-center gap-2 p-3 bg-red-100 border border-red-500/20 rounded-lg">
           <AlertCircle
             size={16}
-            className="text-[var(--color-error)] flex-shrink-0"
+            className="text-red-500 flex-shrink-0"
           />
-          <p className="text-[var(--color-error)] text-xs">{error}</p>
+          <p className="text-red-500 text-xs">{error}</p>
         </div>
       )}
 
@@ -172,8 +172,8 @@ const KimiModelSelector: React.FC<KimiModelSelectorProps> = ({
       </div>
 
       {!apiKey.trim() && (
-        <div className="p-3 bg-[var(--color-bg-secondary)] border border-[var(--color-border)] rounded-lg">
-          <p className="text-xs text-[var(--color-text-secondary)]">
+        <div className="p-3 bg-gray-100 border border-gray-200 rounded-lg">
+          <p className="text-xs text-gray-500">
             📝 请先填写 API Key（格式：sk-xxx-api-key-here）以获取可用模型列表
           </p>
         </div>
diff --git a/src/components/ProviderForm/PresetSelector.tsx b/src/components/ProviderForm/PresetSelector.tsx
index 92d8d31..bcd8470 100644
--- a/src/components/ProviderForm/PresetSelector.tsx
+++ b/src/components/ProviderForm/PresetSelector.tsx
@@ -30,11 +30,11 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
 
     if (isSelected) {
       return isOfficial
-        ? `${baseClass} bg-[var(--color-warning)] text-white`
-        : `${baseClass} bg-[var(--color-primary)] text-white`;
+        ? `${baseClass} bg-amber-500 text-white`
+        : `${baseClass} bg-blue-500 text-white`;
     }
 
-    return `${baseClass} bg-[var(--color-bg-tertiary)] text-[var(--color-text-secondary)] hover:bg-[var(--color-border)]`;
+    return `${baseClass} bg-gray-100 text-gray-500 hover:bg-gray-200`;
   };
 
   const getDescription = () => {
@@ -55,13 +55,13 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
   return (
     <div className="space-y-4">
       <div>
-        <label className="block text-sm font-medium text-[var(--color-text-primary)] mb-3">
+        <label className="block text-sm font-medium text-gray-900 mb-3">
           {title}
         </label>
         <div className="flex flex-wrap gap-2">
           <button
             type="button"
-            className={getButtonClass(-1)}
+            className={`${getButtonClass(-1)} ${selectedIndex === -1 ? '' : ''}`}
             onClick={onCustomClick}
           >
             {customLabel}
@@ -80,7 +80,7 @@ const PresetSelector: React.FC<PresetSelectorProps> = ({
         </div>
       </div>
       {getDescription() && (
-        <p className="text-sm text-[var(--color-text-secondary)]">
+        <p className="text-sm text-gray-500">
           {getDescription()}
         </p>
       )}
diff --git a/src/components/ProviderList.tsx b/src/components/ProviderList.tsx
index 3ec1d4b..951afe3 100644
--- a/src/components/ProviderList.tsx
+++ b/src/components/ProviderList.tsx
@@ -69,13 +69,13 @@ const ProviderList: React.FC<ProviderListProps> = ({
     <div className="space-y-4">
       {sortedProviders.length === 0 ? (
         <div className="text-center py-12">
-          <div className="w-16 h-16 mx-auto mb-4 bg-[var(--color-bg-tertiary)] rounded-full flex items-center justify-center">
-            <Users size={24} className="text-[var(--color-text-tertiary)]" />
+          <div className="w-16 h-16 mx-auto mb-4 bg-gray-100 rounded-full flex items-center justify-center">
+            <Users size={24} className="text-gray-400" />
           </div>
-          <h3 className="text-lg font-medium text-[var(--color-text-primary)] mb-2">
+          <h3 className="text-lg font-medium text-gray-900 mb-2">
             还没有添加任何供应商
           </h3>
-          <p className="text-[var(--color-text-secondary)] text-sm">
+          <p className="text-gray-500 text-sm">
             点击右上角的"添加供应商"按钮开始配置您的第一个API供应商
           </p>
         </div>
@@ -90,18 +90,18 @@ const ProviderList: React.FC<ProviderListProps> = ({
                 key={provider.id}
                 className={`bg-white rounded-lg border p-4 transition-all duration-200 ${
                   isCurrent
-                    ? "border-[var(--color-primary)] ring-1 ring-[var(--color-primary)]/20 bg-[var(--color-primary)]/5"
-                    : "border-[var(--color-border)] hover:border-[var(--color-border-hover)] hover:shadow-sm"
+                    ? "border-blue-500 ring-1 ring-blue-500/20 bg-blue-500/5"
+                    : "border-gray-200 hover:border-gray-300 hover:shadow-sm"
                 }`}
               >
                 <div className="flex items-start justify-between">
                   <div className="flex-1">
                     <div className="flex items-center gap-3 mb-2">
-                      <h3 className="font-medium text-[var(--color-text-primary)]">
+                      <h3 className="font-medium text-gray-900">
                         {provider.name}
                       </h3>
                       {isCurrent && (
-                        <div className="inline-flex items-center gap-1 px-2 py-1 bg-[var(--color-success)]/10 text-[var(--color-success)] rounded-md text-xs font-medium">
+                        <div className="inline-flex items-center gap-1 px-2 py-1 bg-green-500/10 text-green-500 rounded-md text-xs font-medium">
                           <CheckCircle2 size={12} />
                           当前使用
                         </div>
@@ -115,14 +115,14 @@ const ProviderList: React.FC<ProviderListProps> = ({
                             e.preventDefault();
                             handleUrlClick(provider.websiteUrl!);
                           }}
-                          className="inline-flex items-center gap-1 text-[var(--color-primary)] hover:opacity-90 transition-colors"
+                          className="inline-flex items-center gap-1 text-blue-500 hover:opacity-90 transition-colors"
                           title={`访问 ${provider.websiteUrl}`}
                         >
                           {provider.websiteUrl}
                         </button>
                       ) : (
                         <span
-                          className="text-[var(--color-text-secondary)]"
+                          className="text-gray-500"
                           title={apiUrl}
                         >
                           {apiUrl}
@@ -137,8 +137,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
                       disabled={isCurrent}
                       className={`inline-flex items-center gap-1 px-3 py-1.5 text-sm font-medium rounded-md transition-colors ${
                         isCurrent
-                          ? "bg-[var(--color-bg-tertiary)] text-[var(--color-text-tertiary)] cursor-not-allowed"
-                          : "bg-[var(--color-primary)] text-white hover:bg-[var(--color-primary-hover)]"
+                          ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                          : "bg-blue-500 text-white hover:bg-blue-600"
                       }`}
                     >
                       <Play size={14} />
@@ -147,7 +147,7 @@ const ProviderList: React.FC<ProviderListProps> = ({
 
                     <button
                       onClick={() => onEdit(provider.id)}
-                      className="p-1.5 text-[var(--color-text-secondary)] hover:text-[var(--color-text-primary)] hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors"
+                      className="p-1.5 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
                       title="编辑供应商"
                     >
                       <Edit3 size={16} />
@@ -158,8 +158,8 @@ const ProviderList: React.FC<ProviderListProps> = ({
                       disabled={isCurrent}
                       className={`p-1.5 rounded-md transition-colors ${
                         isCurrent
-                          ? "text-[var(--color-text-tertiary)] cursor-not-allowed"
-                          : "text-[var(--color-text-secondary)] hover:text-[var(--color-error)] hover:bg-[var(--color-error-light)]"
+                          ? "text-gray-400 cursor-not-allowed"
+                          : "text-gray-500 hover:text-red-500 hover:bg-red-100"
                       }`}
                       title="删除供应商"
                     >
diff --git a/src/components/SettingsModal.tsx b/src/components/SettingsModal.tsx
index 34ee061..b2cc691 100644
--- a/src/components/SettingsModal.tsx
+++ b/src/components/SettingsModal.tsx
@@ -86,15 +86,15 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
     <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
       <div className="bg-white rounded-xl shadow-2xl w-[500px] overflow-hidden">
         {/* 标题栏 */}
-        <div className="flex items-center justify-between px-6 py-4 border-b border-[var(--color-border)]">
-          <h2 className="text-lg font-semibold text-[var(--color-primary)]">
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+          <h2 className="text-lg font-semibold text-blue-500">
             设置
           </h2>
           <button
             onClick={onClose}
-            className="p-1.5 hover:bg-[var(--color-bg-tertiary)] rounded-md transition-colors"
+            className="p-1.5 hover:bg-gray-100 rounded-md transition-colors"
           >
-            <X size={20} className="text-[var(--color-text-secondary)]" />
+            <X size={20} className="text-gray-500" />
           </button>
         </div>
 
@@ -102,11 +102,11 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
         <div className="px-6 py-4 space-y-6">
           {/* 显示设置 - 功能还未实现 */}
           {/* <div>
-            <h3 className="text-sm font-medium text-[var(--color-text-primary)] mb-3">
+            <h3 className="text-sm font-medium text-gray-900 mb-3">
               显示设置
             </h3>
             <label className="flex items-center justify-between">
-              <span className="text-sm text-[var(--color-text-secondary)]">
+              <span className="text-sm text-gray-500">
                 在 Dock 中显示（macOS）
               </span>
               <input
@@ -115,30 +115,30 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
                 onChange={(e) =>
                   setSettings({ ...settings, showInDock: e.target.checked })
                 }
-                className="w-4 h-4 text-[var(--color-primary)] rounded focus:ring-[var(--color-primary)]/20"
+                className="w-4 h-4 text-blue-500 rounded focus:ring-blue-500/20"
               />
             </label>
           </div> */}
 
           {/* 配置文件位置 */}
           <div>
-            <h3 className="text-sm font-medium text-[var(--color-text-primary)] mb-3">
+            <h3 className="text-sm font-medium text-gray-900 mb-3">
               配置文件位置
             </h3>
             <div className="flex items-center gap-2">
-              <div className="flex-1 px-3 py-2 bg-[var(--color-bg-tertiary)] rounded-lg">
-                <span className="text-xs font-mono text-[var(--color-text-secondary)]">
+              <div className="flex-1 px-3 py-2 bg-gray-100 rounded-lg">
+                <span className="text-xs font-mono text-gray-500">
                   {configPath || "加载中..."}
                 </span>
               </div>
               <button
                 onClick={handleOpenConfigFolder}
-                className="p-2 hover:bg-[var(--color-bg-tertiary)] rounded-lg transition-colors"
+                className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
                 title="打开文件夹"
               >
                 <FolderOpen
                   size={18}
-                  className="text-[var(--color-text-secondary)]"
+                  className="text-gray-500"
                 />
               </button>
             </div>
@@ -146,21 +146,21 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
 
           {/* 关于 */}
           <div>
-            <h3 className="text-sm font-medium text-[var(--color-text-primary)] mb-3">
+            <h3 className="text-sm font-medium text-gray-900 mb-3">
               关于
             </h3>
-            <div className="p-4 bg-[var(--color-bg-tertiary)] rounded-lg">
+            <div className="p-4 bg-gray-100 rounded-lg">
               <div className="flex items-start justify-between">
                 <div className="flex items-start gap-3">
                   <Info
                     size={18}
-                    className="text-[var(--color-text-secondary)] mt-0.5"
+                    className="text-gray-500 mt-0.5"
                   />
                   <div className="text-sm">
-                    <p className="font-medium text-[var(--color-text-primary)]">
+                    <p className="font-medium text-gray-900">
                       CC Switch
                     </p>
-                    <p className="mt-1 text-[var(--color-text-secondary)]">
+                    <p className="mt-1 text-gray-500">
                       版本 {version}
                     </p>
                   </div>
@@ -170,8 +170,8 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
                   disabled={isCheckingUpdate}
                   className={`px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
                     isCheckingUpdate
-                      ? "bg-[var(--color-bg-secondary)] text-[var(--color-text-tertiary)]"
-                      : "bg-white hover:bg-[var(--color-bg-primary)] text-[var(--color-primary)]"
+                      ? "bg-white text-gray-400"
+                      : "bg-white hover:bg-gray-50 text-blue-500"
                   }`}
                 >
                   {isCheckingUpdate ? (
@@ -189,16 +189,16 @@ export default function SettingsModal({ onClose }: SettingsModalProps) {
         </div>
 
         {/* 底部按钮 */}
-        <div className="flex justify-end gap-3 px-6 py-4 border-t border-[var(--color-border)]">
+        <div className="flex justify-end gap-3 px-6 py-4 border-t border-gray-200">
           <button
             onClick={onClose}
-            className="px-4 py-2 text-sm font-medium text-[var(--color-text-secondary)] hover:bg-[var(--color-bg-tertiary)] rounded-lg transition-colors"
+            className="px-4 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 rounded-lg transition-colors"
           >
             取消
           </button>
           <button
             onClick={saveSettings}
-            className="px-4 py-2 text-sm font-medium text-white bg-[var(--color-primary)] hover:bg-[var(--color-primary-hover)] rounded-lg transition-colors"
+            className="px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 rounded-lg transition-colors"
           >
             保存
           </button>
diff --git a/src/index.css b/src/index.css
index effcde6..62b54ff 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,89 +1,37 @@
 @import "tailwindcss";
 
-/* Linear 风格的全局配色和基础样式 */
-:root {
-  /* Linear 配色方案 */
-  --color-bg-primary: #fafafa;
-  --color-bg-secondary: #ffffff;
-  --color-bg-tertiary: #f4f4f5;
-  --color-border: #e4e4e7;
-  --color-border-hover: #d4d4d8;
-
-  /* 蓝色主色调 */
-  --color-primary: #3498db;
-  --color-primary-hover: #2980b9;
-  --color-primary-light: #5dade2;
-
-  /* 文本颜色 */
-  --color-text-primary: #18181b;
-  --color-text-secondary: #71717a;
-  --color-text-tertiary: #a1a1aa;
-
-  /* 状态颜色 */
-  --color-success: #10b981;
-  --color-success-light: #d1fae5;
-  --color-error: #ef4444;
-  --color-error-light: #fee2e2;
-  --color-warning: #f59e0b;
-  --color-warning-light: #fef3c7;
-
-  /* 阴影 */
-  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  --shadow-lg:
-    0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
-
-  /* 圆角 */
-  --radius-sm: 0.375rem;
-  --radius-md: 0.5rem;
-  --radius-lg: 0.75rem;
-
-  /* 字体 */
-  --font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue",
-    Arial, sans-serif;
-}
-
+/* 全局基础样式 */
 * {
   box-sizing: border-box;
 }
 
 html {
-  font-family: var(--font-family);
+  @apply font-sans antialiased;
   line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
 
 body {
-  margin: 0;
-  padding: 0;
-  background-color: var(--color-bg-primary);
-  color: var(--color-text-primary);
-  font-size: 14px;
+  @apply m-0 p-0 bg-gray-50 text-gray-900 text-sm;
 }
 
 /* 滚动条样式 */
 ::-webkit-scrollbar {
-  width: 6px;
-  height: 6px;
+  @apply w-1.5 h-1.5;
 }
 
 ::-webkit-scrollbar-track {
-  background: var(--color-bg-tertiary);
+  @apply bg-gray-100;
 }
 
 ::-webkit-scrollbar-thumb {
-  background: var(--color-border-hover);
-  border-radius: 3px;
+  @apply bg-gray-300 rounded;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background: var(--color-text-tertiary);
+  @apply bg-gray-400;
 }
 
 /* 焦点样式 */
 *:focus-visible {
-  outline: 2px solid var(--color-primary);
-  outline-offset: 2px;
+  @apply outline-2 outline-blue-500 outline-offset-2;
 }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..ed8ea9d
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,58 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        // 扩展蓝色系列以匹配 Linear 风格
+        blue: {
+          500: '#3498db',
+          600: '#2980b9',
+          400: '#5dade2',
+        },
+        // 自定义灰色系列
+        gray: {
+          50: '#fafafa',   // bg-primary
+          100: '#f4f4f5',  // bg-tertiary
+          200: '#e4e4e7',  // border
+          300: '#d4d4d8',  // border-hover
+          400: '#a1a1aa',  // text-tertiary
+          500: '#71717a',  // text-secondary
+          900: '#18181b',  // text-primary
+        },
+        // 状态颜色
+        green: {
+          500: '#10b981',
+          100: '#d1fae5',
+        },
+        red: {
+          500: '#ef4444',
+          100: '#fee2e2',
+        },
+        amber: {
+          500: '#f59e0b',
+          100: '#fef3c7',
+        },
+      },
+      boxShadow: {
+        'sm': '0 1px 2px 0 rgb(0 0 0 / 0.05)',
+        'md': '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
+        'lg': '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
+      },
+      borderRadius: {
+        'sm': '0.375rem',
+        'md': '0.5rem',
+        'lg': '0.75rem',
+        'xl': '0.875rem',
+      },
+      fontFamily: {
+        sans: ['-apple-system', 'BlinkMacSystemFont', '"Segoe UI"', 'Roboto', '"Helvetica Neue"', 'Arial', 'sans-serif'],
+        mono: ['ui-monospace', 'SFMono-Regular', '"SF Mono"', 'Consolas', '"Liberation Mono"', 'Menlo', 'monospace'],
+      },
+    },
+  },
+  plugins: [],
+}
\ No newline at end of file