change style

Signed-off-by: Jintao Zhang <zhangjintao9020@gmail.com>

src/App.jsx

@@ -135,47 +135,100 @@ function App() {
   };
 
   return (
-    <div className="flex flex-col h-screen w-full overflow-hidden">
-      <div className="flex justify-between items-center px-5 h-header border-b border-border bg-background">
-        <div className="flex items-center gap-2">
+    <div className="flex flex-col h-screen w-full overflow-hidden bg-background-secondary">
+      {/* Modern Enterprise Header */}
+      <header className="flex justify-between items-center px-6 h-header bg-background-elevated border-b border-border shadow-sm">
+        <div className="flex items-center gap-4">
           <button
-            className="md:hidden bg-transparent border-0 text-base text-lightest-text cursor-pointer flex items-center justify-center z-10 w-8 h-8 hover:text-text"
+            className="md:hidden bg-transparent border-0 text-lg text-muted cursor-pointer flex items-center justify-center z-10 w-10 h-10 rounded-lg hover:bg-background-secondary hover:text-primary transition-all duration-fast"
             onClick={toggleMobileMenu}
           >
-            ☰
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
           </button>
-          <h1 className="text-xl font-semibold text-text">Thinking Model Client</h1>
+          
+          {/* Brand Section */}
+          <div className="flex items-center gap-3">
+            <div className="w-8 h-8 bg-gradient-to-br from-primary to-primary-dark rounded-lg flex items-center justify-center shadow-sm">
+              <svg className="w-5 h-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
+              </svg>
+            </div>
+            <div>
+              <h1 className="text-xl font-bold text-primary bg-gradient-to-r from-primary to-primary-dark bg-clip-text text-transparent">Thinking Model Client</h1>
+              <p className="text-xs text-muted hidden sm:block">Enterprise AI Assistant</p>
+            </div>
+          </div>
         </div>
-        <div className="flex items-center gap-2.5">
+        
+        {/* Controls Section */}
+        <div className="flex items-center gap-3">
+          {/* Profile Selector */}
           <div className="relative">
             <button
-              className="py-1.5 px-3 bg-background border border-border rounded text-sm text-text cursor-pointer flex items-center gap-1.5"
+              className="flex items-center gap-2 py-2 px-4 bg-background-secondary border border-border rounded-lg text-sm text-secondary hover:bg-background-tertiary hover:text-primary hover:border-primary transition-all duration-fast shadow-sm"
               onClick={toggleProfileDropdown}
             >
-              {activeProfile.name} ▼
+              <div className="w-6 h-6 bg-primary rounded-full flex items-center justify-center text-xs text-white font-medium">
+                {activeProfile.name.charAt(0).toUpperCase()}
+              </div>
+              <span className="hidden sm:inline font-medium">{activeProfile.name}</span>
+              <svg className={`w-4 h-4 transition-transform duration-fast ${showProfileDropdown ? 'rotate-180' : ''}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
             </button>
+            
             {showProfileDropdown && (
-              <div className="absolute top-full right-0 w-[200px] bg-background border border-border rounded shadow-md z-10 mt-1.5">
-                {profiles.map(profile => (
-                  <div
-                    key={profile.id}
-                    className={`p-3 cursor-pointer transition-colors duration-200 text-sm ${profile.id === activeProfileId ? 'bg-active font-medium' : 'hover:bg-hover'}`}
-                    onClick={() => handleProfileSelect(profile.id)}
-                  >
-                    {profile.name}
+              <div className="absolute top-full right-0 w-64 bg-background-elevated border border-border rounded-xl shadow-xl z-50 mt-2 animate-slide-up">
+                <div className="p-2">
+                  <div className="px-3 py-2 text-xs font-semibold text-muted uppercase tracking-wider border-b border-border mb-2">
+                    Select Profile
                   </div>
-                ))}
+                  {profiles.map(profile => (
+                    <button
+                      key={profile.id}
+                      className={`w-full flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-all duration-fast text-sm text-left ${
+                        profile.id === activeProfileId 
+                          ? 'bg-primary-light text-primary font-medium shadow-sm' 
+                          : 'hover:bg-background-secondary text-secondary'
+                      }`}
+                      onClick={() => handleProfileSelect(profile.id)}
+                    >
+                      <div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-medium ${
+                        profile.id === activeProfileId ? 'bg-primary text-white' : 'bg-background-tertiary text-muted'
+                      }`}>
+                        {profile.name.charAt(0).toUpperCase()}
+                      </div>
+                      <div className="flex-1">
+                        <div className="font-medium">{profile.name}</div>
+                        <div className="text-xs text-muted truncate">{profile.model}</div>
+                      </div>
+                      {profile.id === activeProfileId && (
+                        <svg className="w-4 h-4 text-primary" fill="currentColor" viewBox="0 0 20 20">
+                          <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                        </svg>
+                      )}
+                    </button>
+                  ))}
+                </div>
               </div>
             )}
           </div>
+          
+          {/* Settings Button */}
           <button
-            className="py-1.5 px-3 bg-background border border-border rounded text-sm text-text cursor-pointer hover:bg-hover"
+            className="flex items-center gap-2 py-2 px-4 bg-background-secondary border border-border rounded-lg text-sm text-secondary hover:bg-background-tertiary hover:text-primary hover:border-primary transition-all duration-fast shadow-sm"
             onClick={toggleSettings}
           >
-            Settings
+            <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+            </svg>
+            <span className="hidden sm:inline font-medium">Settings</span>
           </button>
         </div>
-      </div>
+      </header>
 
       <div className="flex flex-1 overflow-hidden">
         <div className={`sidebar ${sidebarCollapsed ? 'collapsed' : ''} ${mobileMenuOpen ? 'mobile-open' : ''}`}>

src/components/ChatList.jsx

@@ -1,38 +1,146 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 function ChatList({ chats, currentChat, onSelectChat, onDeleteChat, onCreateNewChat, collapsed, isStreamingChat }) {
+  const [hoveredChat, setHoveredChat] = useState(null);
+  
+  const formatDate = (timestamp) => {
+    const date = new Date(timestamp);
+    const now = new Date();
+    const diffTime = Math.abs(now - date);
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+    
+    if (diffDays === 1) return 'Today';
+    if (diffDays === 2) return 'Yesterday';
+    if (diffDays <= 7) return `${diffDays} days ago`;
+    return date.toLocaleDateString();
+  };
+  
+  const truncateTitle = (title, maxLength = 25) => {
+    if (title.length <= maxLength) return title;
+    return title.substring(0, maxLength) + '...';
+  };
+
   return (
-    <div className="chat-list">
-      <button className="new-chat" onClick={onCreateNewChat}>
-        New Chat
-      </button>
-      {chats.length === 0 ? (
-        <div className="empty-state">No conversations yet</div>
-      ) : (
-        chats.map(chat => (
-          <div
-            key={chat.id}
-            className={`chat-item ${chat.id === currentChat?.id ? 'active' : ''} ${isStreamingChat && typeof isStreamingChat === 'function' && isStreamingChat(chat.id) ? 'streaming' : ''}`}
-            onClick={() => onSelectChat(chat.id)}
-          >
-            <div className="flex items-center gap-1">
-              {isStreamingChat && typeof isStreamingChat === 'function' && isStreamingChat(chat.id) && (
-                <span className="streaming-dot"></span>
-              )}
-              <span>{chat.title}</span>
+    <div className="flex flex-col h-full bg-background-elevated">
+      {/* New Chat Button */}
+      <div className="p-3 border-b border-border">
+        <button 
+          className="w-full flex items-center justify-center gap-2 py-3 px-4 bg-primary hover:bg-primary-hover text-white border-none rounded-xl cursor-pointer text-sm font-medium transition-all duration-fast shadow-sm hover:shadow-md active:scale-[0.98]"
+          onClick={onCreateNewChat}
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
+          </svg>
+          <span>New Conversation</span>
+        </button>
+      </div>
+      
+      {/* Chat List */}
+      <div className="flex-1 overflow-y-auto p-2">
+        {chats.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+            <div className="w-16 h-16 bg-background-secondary rounded-full flex items-center justify-center mb-4">
+              <svg className="w-8 h-8 text-muted" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+              </svg>
             </div>
-            <button
-              className="delete-btn"
-              onClick={(e) => {
-                e.stopPropagation();
-                onDeleteChat(chat.id);
-              }}
-            >
-              Delete
-            </button>
+            <h3 className="text-sm font-medium text-secondary mb-2">No conversations yet</h3>
+            <p className="text-xs text-muted">Start a new conversation to get started</p>
+          </div>
+        ) : (
+          <div className="space-y-1">
+            {chats.map(chat => {
+              const isActive = chat.id === currentChat?.id;
+              const isStreaming = isStreamingChat && typeof isStreamingChat === 'function' && isStreamingChat(chat.id);
+              const isHovered = hoveredChat === chat.id;
+              
+              return (
+                <div
+                  key={chat.id}
+                  className={`group relative flex items-center p-3 rounded-lg cursor-pointer transition-all duration-fast ${
+                    isActive 
+                      ? 'bg-primary-light border border-primary/20 shadow-sm' 
+                      : 'hover:bg-background-secondary border border-transparent'
+                  }`}
+                  onClick={() => onSelectChat(chat.id)}
+                  onMouseEnter={() => setHoveredChat(chat.id)}
+                  onMouseLeave={() => setHoveredChat(null)}
+                >
+                  {/* Streaming indicator */}
+                  {isStreaming && (
+                    <div className="absolute left-0 top-0 bottom-0 w-1 bg-gradient-to-b from-info to-primary rounded-r-full animate-pulse" />
+                  )}
+                  
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-2 mb-1">
+                      {/* Chat icon */}
+                      <div className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center ${
+                        isActive ? 'bg-primary text-white' : 'bg-background-tertiary text-muted'
+                      }`}>
+                        {isStreaming ? (
+                          <div className="w-2 h-2 bg-current rounded-full animate-pulse" />
+                        ) : (
+                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
+                          </svg>
+                        )}
+                      </div>
+                      
+                      {/* Chat title */}
+                      <div className="flex-1 min-w-0">
+                        <h4 className={`text-sm font-medium truncate ${
+                          isActive ? 'text-primary' : 'text-secondary'
+                        }`}>
+                          {truncateTitle(chat.title)}
+                        </h4>
+                        
+                        {/* Message count and date */}
+                        <div className="flex items-center justify-between mt-1">
+                          <span className="text-xs text-muted">
+                            {chat.messages?.length || 0} messages
+                          </span>
+                          {chat.messages?.length > 0 && (
+                            <span className="text-xs text-muted">
+                              {formatDate(chat.messages[chat.messages.length - 1]?.timestamp || Date.now())}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  
+                  {/* Delete button */}
+                  <button
+                    className={`flex-shrink-0 ml-2 p-1.5 rounded-md transition-all duration-fast ${
+                      isHovered || isActive 
+                        ? 'opacity-100 hover:bg-error-light hover:text-error' 
+                        : 'opacity-0 group-hover:opacity-100'
+                    }`}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      if (window.confirm('Are you sure you want to delete this conversation?')) {
+                        onDeleteChat(chat.id);
+                      }
+                    }}
+                    title="Delete conversation"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
+                    </svg>
+                  </button>
+                </div>
+              );
+            })}
           </div>
-        ))
-      )}
+        )}
+      </div>
+      
+      {/* Footer */}
+      <div className="p-3 border-t border-border">
+        <div className="text-xs text-muted text-center">
+          {chats.length} conversation{chats.length !== 1 ? 's' : ''}
+        </div>
+      </div>
     </div>
   );
 }

src/components/ChatWindow.jsx

@@ -342,25 +342,7 @@ function ChatWindow({
   };
 
   return (
-    <div className="chat-window relative">
-      {/* Floating New Chat button */}
-      <button
-        onClick={() => {
-          console.log('Floating new chat button clicked');
-          // 在创建新聊天前添加一些日志
-          if (typeof onCreateNewChat === 'function') {
-            console.log('Calling onCreateNewChat function');
-            onCreateNewChat();
-            console.log('onCreateNewChat function called');
-          } else {
-            console.error('onCreateNewChat is not a function');
-          }
-        }}
-        className="floating-new-chat"
-        title="Create a new conversation"
-      >
-        <span className="text-xl">+</span>
-      </button>
+    <div className="flex flex-col h-full bg-background-primary">
       <div className="chat-messages">
         {chat && chat.messages && chat.messages.map((message, index) => {
           const parsedMessage = message.role === 'assistant'

src/index.css

@@ -2,28 +2,78 @@
 @tailwind components;
 @tailwind utilities;
 
-/* Base styles */
+/* Enterprise Design System */
 :root {
-  --primary-color: #3e6ae1;
-  --primary-hover: #2952c8;
-  --text-color: #1a1a1a;
-  --light-text: #4d4d4d;
-  --lightest-text: #737373;
-  --border-color: #e5e7eb;
-  --background-color: #ffffff;
-  --sidebar-width: 280px;
-  --header-height: 60px;
-  --reasoning-background: #f9fafb;
-  --user-message-bg: #f9f8f6;
-  --user-message-color: var(--text-color);
-  --assistant-message-bg: #f9f9f9;
-  --assistant-message-color: #1a1a1a;
-  --hover-color: #f5f5f5;
-  --active-color: #e6f2ff;
+  /* Primary Brand Colors */
+  --primary-color: #2563eb;
+  --primary-hover: #1d4ed8;
+  --primary-light: #dbeafe;
+  --primary-dark: #1e3a8a;
+  
+  /* Secondary Colors */
+  --secondary-color: #64748b;
+  --secondary-hover: #475569;
+  --secondary-light: #f1f5f9;
+  
+  /* Neutral Palette */
+  --text-color: #0f172a;
+  --text-secondary: #334155;
+  --text-muted: #64748b;
+  --text-light: #94a3b8;
+  --text-disabled: #cbd5e1;
+  
+  /* Background System */
+  --background-primary: #ffffff;
+  --background-secondary: #f8fafc;
+  --background-tertiary: #f1f5f9;
+  --background-elevated: #ffffff;
+  
+  /* Border System */
+  --border-color: #e2e8f0;
+  --border-light: #f1f5f9;
+  --border-dark: #cbd5e1;
+  --border-accent: #3b82f6;
+  
+  /* Status Colors */
+  --success-color: #059669;
+  --success-light: #d1fae5;
+  --warning-color: #d97706;
+  --warning-light: #fef3c7;
+  --error-color: #dc2626;
+  --error-light: #fee2e2;
+  --info-color: #0284c7;
+  --info-light: #e0f2fe;
+  
+  /* Layout Variables */
+  --sidebar-width: 320px;
+  --header-height: 64px;
+  --border-radius: 8px;
+  --border-radius-lg: 12px;
+  --border-radius-xl: 16px;
+  
+  /* Shadow System */
+  --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);
+  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+  
+  /* Message Specific */
+  --reasoning-background: var(--background-tertiary);
+  --user-message-bg: var(--primary-color);
+  --user-message-color: #ffffff;
+  --assistant-message-bg: var(--background-elevated);
+  --assistant-message-color: var(--text-color);
+  --hover-color: var(--background-secondary);
+  --active-color: var(--primary-light);
 
   /* Responsive sidebar width */
   --mobile-sidebar-width: 100%;
-  --tablet-sidebar-width: 250px;
+  --tablet-sidebar-width: 280px;
+  
+  /* Animation System */
+  --transition-fast: 150ms ease-out;
+  --transition-normal: 250ms ease-out;
+  --transition-slow: 350ms ease-out;
 }
 
 * {

tailwind.config.js

@@ -7,13 +7,62 @@ export default {
   theme: {
     extend: {
       colors: {
-        primary: 'var(--primary-color)',
+        // Primary brand colors
+        primary: {
+          DEFAULT: 'var(--primary-color)',
+          hover: 'var(--primary-hover)',
+          light: 'var(--primary-light)',
+          dark: 'var(--primary-dark)',
+        },
+        // Secondary colors
+        secondary: {
+          DEFAULT: 'var(--secondary-color)',
+          hover: 'var(--secondary-hover)',
+          light: 'var(--secondary-light)',
+        },
+        // Text colors
+        text: {
+          DEFAULT: 'var(--text-color)',
+          secondary: 'var(--text-secondary)',
+          muted: 'var(--text-muted)',
+          light: 'var(--text-light)',
+          disabled: 'var(--text-disabled)',
+        },
+        // Background colors
+        background: {
+          DEFAULT: 'var(--background-primary)',
+          secondary: 'var(--background-secondary)',
+          tertiary: 'var(--background-tertiary)',
+          elevated: 'var(--background-elevated)',
+        },
+        // Border colors
+        border: {
+          DEFAULT: 'var(--border-color)',
+          light: 'var(--border-light)',
+          dark: 'var(--border-dark)',
+          accent: 'var(--border-accent)',
+        },
+        // Status colors
+        success: {
+          DEFAULT: 'var(--success-color)',
+          light: 'var(--success-light)',
+        },
+        warning: {
+          DEFAULT: 'var(--warning-color)',
+          light: 'var(--warning-light)',
+        },
+        error: {
+          DEFAULT: 'var(--error-color)',
+          light: 'var(--error-light)',
+        },
+        info: {
+          DEFAULT: 'var(--info-color)',
+          light: 'var(--info-light)',
+        },
+        // Legacy color mappings (for backwards compatibility)
         'primary-hover': 'var(--primary-hover)',
-        'text': 'var(--text-color)',
-        'light-text': 'var(--light-text)',
-        'lightest-text': 'var(--lightest-text)',
-        'border': 'var(--border-color)',
-        'background': 'var(--background-color)',
+        'light-text': 'var(--text-light)',
+        'lightest-text': 'var(--text-disabled)',
         'reasoning-bg': 'var(--reasoning-background)',
         'user-message-bg': 'var(--user-message-bg)',
         'user-message-color': 'var(--user-message-color)',
@@ -26,14 +75,58 @@ export default {
         'sidebar': 'var(--sidebar-width)',
         'header': 'var(--header-height)',
       },
+      borderRadius: {
+        'DEFAULT': 'var(--border-radius)',
+        'lg': 'var(--border-radius-lg)',
+        'xl': 'var(--border-radius-xl)',
+      },
+      boxShadow: {
+        'sm': 'var(--shadow-sm)',
+        'DEFAULT': 'var(--shadow-md)',
+        'md': 'var(--shadow-md)',
+        'lg': 'var(--shadow-lg)',
+        'xl': 'var(--shadow-xl)',
+      },
+      transitionDuration: {
+        'fast': 'var(--transition-fast)',
+        'normal': 'var(--transition-normal)',
+        'slow': 'var(--transition-slow)',
+      },
       animation: {
         'blink': 'blink 1s infinite',
+        'pulse-slow': 'pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+        'fade-in': 'fadeIn 0.5s ease-out',
+        'slide-up': 'slideUp 0.3s ease-out',
+        'scale-in': 'scaleIn 0.2s ease-out',
       },
       keyframes: {
         blink: {
           '0%, 100%': { opacity: 1 },
           '50%': { opacity: 0 },
         },
+        fadeIn: {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 },
+        },
+        slideUp: {
+          '0%': { transform: 'translateY(10px)', opacity: 0 },
+          '100%': { transform: 'translateY(0)', opacity: 1 },
+        },
+        scaleIn: {
+          '0%': { transform: 'scale(0.95)', opacity: 0 },
+          '100%': { transform: 'scale(1)', opacity: 1 },
+        },
+      },
+      fontFamily: {
+        'sans': ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
+      },
+      fontSize: {
+        'xs': ['0.75rem', { lineHeight: '1rem' }],
+        'sm': ['0.875rem', { lineHeight: '1.25rem' }],
+        'base': ['1rem', { lineHeight: '1.5rem' }],
+        'lg': ['1.125rem', { lineHeight: '1.75rem' }],
+        'xl': ['1.25rem', { lineHeight: '1.75rem' }],
+        '2xl': ['1.5rem', { lineHeight: '2rem' }],
       },
     },
   },