diff --git a/src/list.tsx b/src/list.tsx
index 763bb93..6b2aa2b 100644
--- a/src/list.tsx
+++ b/src/list.tsx
@@ -1,3 +1,5 @@
+import "./tailwind.css";
+
 import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 
@@ -130,7 +132,7 @@ export const List = ({
           key={key}
           role-slot="list-group"
           aria-label={String(groupContent || "")}
-          className={clsx("font-bold dark:text-gray-400 py-2 px-4 text-sm")}
+          className={clsx("font-bold text-muted-foreground py-2 px-4 text-sm")}
           style={listGroupStyle}
         >
           {String(groupContent || " ")}
@@ -153,8 +155,8 @@ export const List = ({
         key={key}
         role-slot="list-item"
         className={twMerge(
-          clsx("py-2 px-4 hover:bg-gray-200 text-gray-600 cursor-pointer", {
-            "bg-blue-500 text-white hover:bg-blue-600": isSelected,
+          clsx("py-2 px-4 hover:bg-accent text-foreground cursor-pointer", {
+            "bg-primary hover:bg-primary/90 text-primary-foreground hover:bg-primary-hover": isSelected,
           }),
         )}
         id={`lo_id_${index}`}
diff --git a/src/prompt.tsx b/src/prompt.tsx
index a24b53f..9642ac2 100644
--- a/src/prompt.tsx
+++ b/src/prompt.tsx
@@ -21,7 +21,7 @@ const promptsVariants = cva("flex", {
 });
 
 const promptVariants = cva(
-  "flex flex-col justify-center bg-white border border-gray-200 rounded-lg hover:border-gray-300 hover:shadow-sm transition-all duration-150 cursor-pointer",
+  "flex flex-col justify-center bg-background-elevated border-border hover:border-border/80",
   {
     variants: {
       size: {
@@ -38,7 +38,7 @@ const promptVariants = cva(
   },
 );
 
-const promptTitleVariants = cva("font-medium text-gray-900", {
+const promptTitleVariants = cva("font-medium text-foreground", {
   variants: {
     size: {
       xs: "text-sm",
@@ -53,7 +53,7 @@ const promptTitleVariants = cva("font-medium text-gray-900", {
   },
 });
 
-const promptDescriptionVariants = cva("text-gray-600", {
+const promptDescriptionVariants = cva("text-muted-foreground", {
   variants: {
     size: {
       xs: "text-xs",
@@ -106,7 +106,7 @@ export function PromptTitle({
     ? twMerge(clsx(promptTitleVariants({ size, className })))
     : twMerge(
         clsx(
-          "font-medium text-gray-900",
+          "font-medium text-foreground",
           "[div[data-size='xs']_&]:text-sm",
           "[div[data-size='sm']_&]:text-base",
           "[div[data-size='default']_&]:text-base",
@@ -130,7 +130,7 @@ export function PromptDescription({
     ? twMerge(clsx(promptDescriptionVariants({ size, className })))
     : twMerge(
         clsx(
-          "text-gray-600",
+          "text-muted-foreground",
           "[div[data-size='xs']_&]:text-xs",
           "[div[data-size='sm']_&]:text-sm",
           "[div[data-size='default']_&]:text-sm",
diff --git a/src/sender.tsx b/src/sender.tsx
index 241b3d6..3ce3072 100644
--- a/src/sender.tsx
+++ b/src/sender.tsx
@@ -21,7 +21,7 @@ export function InputCount({
   ...props
 }: InputCountProps) {
   return (
-    <span className={clsx("text-gray-400", className)} {...props}>
+    <span className={clsx("text-muted", className)} {...props}>
       {count} / {limit}
     </span>
   );
@@ -58,7 +58,7 @@ export function SenderButton({
       data-slot="sender-button"
       className={twMerge(
         clsx(
-          "flex h-8 w-8 items-center justify-center rounded-full bg-blue-500 hover:bg-blue-500/90 text-white cursor-pointer",
+          "flex items-center justify-center cursor-pointer size-icon-button rounded-full bg-primary text-primary-foreground hover:bg-primary-hover",
           className,
         ),
       )}
@@ -66,7 +66,7 @@ export function SenderButton({
     >
       {icon ?? (
         <img
-          className="filter !brightness-0 invert"
+          className="filter brightness-0! invert"
           src={isSending ? QuickStop : PublishNew}
           alt={isSending ? "icon-quick-stop" : "icon-publish-new"}
         />
@@ -211,15 +211,15 @@ export function Sender({
       data-slot="sender"
       className={twMerge(
         clsx(
-          "relative px-1 flex flex-col items-center border rounded-2xl",
-          "border-gray-200 dark:border-gray-700 shadow-sm transition-all duration-300 hover:shadow-md",
-          "focus-within:ring-2 focus-within:ring-blue-500 focus-within:border-blue-500",
+          "relative px-1 flex flex-col items-center border rounded-xl",
+          "border-border shadow-sm transition-all duration-normal hover:shadow-md",
+          "focus-within:ring-2 focus-within:ring-ring focus-within:border-primary",
           className,
         ),
       )}
       {...props}
     >
-      <div className="absolute bottom-full left-0 w-full bg-white dark:bg-gray-50 rounded-lg shadow-amber-50 max-h-64 overflow-y-auto">
+      <div className="absolute bottom-full left-0 w-full bg-background-elevated rounded-lg shadow-elevated max-h-dropdown overflow-y-auto">
         <Suggestion
           message={message}
           textareaRef={textareaRef}
@@ -234,14 +234,9 @@ export function Sender({
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
         className={clsx(
-          "w-full pt-4 px-4 border-0 rounded-2xl !resize-none bg-transparent",
-          "focus:ring-0 focus:outline-none text-gray-700 placeholder-gray-400",
-          "overflow-y-auto max-h-32",
-          "[scrollbar-gutter:stable] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-thumb]:rounded-full",
-          "[&::-webkit-scrollbar-thumb]:cursor-auto",
-          "[&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-thumb]:bg-gray-600",
-          "[&::-webkit-scrollbar-thumb:hover]:bg-gray-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-gray-500",
-          "[&::-webkit-scrollbar-track]:mt-3",
+          "w-full pt-4 px-4 border-0 rounded-xl resize-none! bg-transparent",
+          "focus:ring-0 focus:outline-none text-foreground placeholder-muted",
+          "overflow-y-auto max-h-textarea custom-scrollbar", // 关键变化！
         )}
         rows={2}
       />
diff --git a/src/tailwind.css b/src/tailwind.css
index 9c0f814..24be95f 100644
--- a/src/tailwind.css
+++ b/src/tailwind.css
@@ -1,3 +1,93 @@
 @import "tailwindcss";
-
 @custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  /* 1. color */
+  --color-background: oklch(1 0 0);             /* white    */
+  --color-foreground: oklch(0.2 0 0);           /* gray-700 */
+  
+  --color-background-elevated: oklch(1 0 0);    /* white */
+
+  --color-primary: oklch(0.62 0.21 260);        /* blue-500 */
+  --color-primary-foreground: oklch(1 0 0);     /* white */
+
+  --color-muted: oklch(0.6 0 0);                /* gray-400 */
+  --color-muted-foreground: oklch(0.55 0 0);
+
+  --color-accent: oklch(0.96 0 0);
+  --color-accent-foreground: oklch(0.2 0 0);
+  
+  --color-border: oklch(0.87 0.01 260);         /* gray-200 */
+  --color-scrollbar: oklch(0.87 0.01 260);      /* gray-300 */
+  --color-scrollbar-hover: oklch(0.7 0.01 260); /* gray-400 */
+  --color-ring: oklch(0.62 0.21 260);           /* primary */
+
+  /* 2. Rounded Corner   */
+  --radius-lg: 0.5rem;                          /* rounded-lg */
+  --radius-xl: 1rem;                            /* rounded-2xl */
+  --radius-full: 9999px;                        /* rounded-full */
+
+  /* 3. shadow */
+  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);
+  --shadow-elevated: 0 10px 15px -3px rgb(253 230 138 / 0.3); /* amber-50 */
+
+  /* 4. Type  */
+  --size-icon-button: 2rem;                     /* h-8 w-8 */
+  --height-textarea-max: 8rem;                  /* max-h-32 */
+  --height-dropdown-max: 16rem;                 /* max-h-64 */
+
+  /* 5. Motion  */
+  --duration-normal: 300ms;
+
+  /* 6. Spacing */
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;   /* py-2 */
+  --spacing-4: 1rem;     /* px-4, gap-4 */
+}
+
+.dark {
+  @theme {
+    --color-background: oklch(0.15 0.01 260);
+    --color-foreground: oklch(0.9 0 0);
+    --color-background-elevated: oklch(0.13 0 0);
+    --color-border: oklch(0.3 0.01 260);
+    
+    --color-accent: oklch(0.26 0 0);
+    --color-muted: oklch(0.65 0 0);
+    --color-muted-foreground: oklch(0.65 0 0);
+
+    --color-scrollbar: oklch(0.26 0 0);
+    --color-scrollbar-hover: oklch(0.4 0 0);
+    
+    --shadow-elevated: 0 10px 15px -3px rgb(0 0 0 / 0.5), 0 0 0 1px oklch(1 0 0 / 0.05);
+  }
+}
+
+
+@layer components {
+  .bg-primary-hover {
+    background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
+  }
+    .custom-scrollbar {
+    scrollbar-gutter: stable;
+    
+    &::-webkit-scrollbar {
+      width: 0.375rem;  /* w-1.5 */
+    }
+    
+    &::-webkit-scrollbar-thumb {
+      border-radius: 9999px;
+      cursor: auto;
+      background-color: var(--color-scrollbar);
+      
+      &:hover {
+        background-color: var(--color-scrollbar-hover);
+      }
+    }
+    
+    &::-webkit-scrollbar-track {
+      margin-top: var(--spacing-3);
+    }
+  }
+}