Enhance UI consistency and styling across components

.gitignore

@@ -172,3 +172,6 @@ claude-flow
 hive-mind-prompt-*.txt
 .ssmenv
 .env.example
+
+# Figma full CSS export (optional local file for rebuilds; generated figma-*.css stay in repo)
+client/src/styles/tokens/figma-source-raw.css

client/src/components/Chat/Footer.tsx

@@ -83,7 +83,7 @@ export default function Footer({ className }: { className?: string }) {
       <div
         className={
           className ??
-          'absolute bottom-0 left-0 right-0 hidden flex-col items-center justify-center gap-2 px-2 py-2 text-center text-xs text-text-primary sm:flex md:px-[60px]'
+          'absolute bottom-0 left-0 right-0 hidden flex-col items-center justify-center gap-2 px-2 py-2 text-center sm:flex md:px-[60px] fy-typography-body-tiny text-fig-Subject-soft'
         }
         role="contentinfo"
       >

client/src/components/Chat/Header.tsx

@@ -15,7 +15,7 @@ export default function Header() {
   const [showSettings, setShowSettings] = useState(false);
 
   return (
-    <div className="sticky top-0 z-10 flex h-14 w-full items-center justify-between bg-white p-2 font-semibold text-text-primary dark:!bg-[#111111]">
+    <div className="bg-fig-Surface-standard text-fig-Text-heading sticky top-0 z-10 flex h-14 w-full items-center justify-between p-2 font-semibold">
       <div className="hide-scrollbar flex w-full items-center justify-between gap-2 overflow-x-auto">
         <div className="mx-1 flex items-center">
           <AnimatePresence initial={false}>
@@ -39,12 +39,7 @@ export default function Header() {
           <div className="relative flex h-8 w-8 items-center justify-center rounded-sm">
             <img src={asset('FIA.svg')} alt="FIA" className="h-full w-full object-contain" />
           </div>
-          <div
-            className="font-sans text-[20px] leading-5 text-text-primary dark:text-gray-100"
-            style={{ fontSize: '20px' }}
-          >
-            FIA - FYERS Intelligent Assistant
-          </div>
+          <div className="fy-typography-title">FIA - FYERS Intelligent Assistant</div>
         </div>
 
         {/* Right: model row + Settings inside same scale-75 block (gear sits beside model button) */}
@@ -60,7 +55,7 @@ export default function Header() {
               aria-label={localize('com_nav_settings')}
             >
               <img
-                src="/research/assets/settings.svg"
+                src="/assets/settings.svg"
                 alt=""
                 className="h-5 w-5 dark:brightness-0 dark:invert"
               />

client/src/components/Chat/Input/BadgeRow.tsx

@@ -322,7 +322,7 @@ function BadgeRow({
 
   return (
     <BadgeRowProvider conversationId={conversationId} isSubmitting={isSubmitting}>
-      <div ref={containerRef} className="relative flex flex-wrap items-center gap-2">
+      <div ref={containerRef} className="relative flex flex-wrap items-center gap-3">
         {showEphemeralBadges === true && <ToolsDropdown />}
         {tempBadges.map((badge, index) => (
           <React.Fragment key={badge.id}>

client/src/components/Chat/Input/ChatForm.tsx

@@ -45,7 +45,6 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const [isCollapsed, setIsCollapsed] = useState(false);
   const [, setIsScrollable] = useState(false);
   const [visualRowCount, setVisualRowCount] = useState(1);
-  const [isTextAreaFocused, setIsTextAreaFocused] = useState(false);
   const [backupBadges, setBackupBadges] = useState<Pick<BadgeItem, 'id'>[]>([]);
 
   const SpeechToText = useRecoilValue(store.speechToText);
@@ -197,13 +196,14 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
   const baseClasses = useMemo(
     () =>
       cn(
-        'px-1.5 pt-3 pb-1 m-0 w-full resize-none font-inter',
-        'placeholder-gray-400 dark:placeholder-gray-500',
-        'bg-transparent',
-        'text-gray-900 dark:text-gray-100',
-        'text-base',
+        'm-0 w-full resize-none font-inter font-normal',
+        'bg-transparent text-fig-Text-body',
+        'text-xs leading-4',
+        'placeholder:text-fig-Subject-soft',
         isCollapsed ? 'max-h-[52px]' : 'max-h-[45vh] md:max-h-[55vh]',
-        isMoreThanThreeRows ? 'pl-5' : 'px-5',
+        isMoreThanThreeRows
+          ? 'p-[var(--Padding-boundary)] pl-5'
+          : 'p-[var(--Padding-boundary)]',
       ),
     [isCollapsed, isMoreThanThreeRows],
   );
@@ -247,10 +247,8 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
           <div
             onClick={handleContainerClick}
             className={cn(
-              'relative flex w-full flex-grow flex-col overflow-hidden rounded-[2px]',
-              'bg-transparent border border-[#2434E7]',
-              'transition-all duration-200',
-              isTextAreaFocused ? 'shadow-lg' : 'shadow-md',
+              'relative flex w-full min-h-[93px] flex-grow flex-col overflow-hidden rounded-[2px] border',
+              'border-fig-Stroke-primary bg-fig-Surface-standard shadow-none transition-[border-color] duration-200',
             )}
           >
             <TextareaHeader addedConvo={addedConvo} setAddedConvo={setAddedConvo} />
@@ -281,14 +279,10 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
                     tabIndex={0}
                     data-testid="text-input"
                     rows={1}
-                    onFocus={() => {
-                      handleFocusOrClick();
-                      setIsTextAreaFocused(true);
-                    }}
-                    onBlur={setIsTextAreaFocused.bind(null, false)}
+                    onFocus={handleFocusOrClick}
                     aria-label={localize('com_ui_message_input')}
                     onClick={handleFocusOrClick}
-                    style={{ height: 44, overflowY: 'auto' }}
+                    style={{ overflowY: 'auto' }}
                     className={cn(
                       baseClasses,
                       removeFocusRings,
@@ -317,7 +311,8 @@ const ChatForm = memo(({ index = 0 }: { index?: number }) => {
             )}
             <div
               className={cn(
-                '@container items-between flex gap-2 pt-1 pb-1 px-3',
+                '@container items-between flex gap-2',
+                'pt-[var(--Padding-boundary)] pb-[var(--Padding-spacer)] px-[var(--Padding-spacer)]',
                 isRTL ? 'flex-row-reverse' : 'flex-row',
               )}
             >

client/src/components/Chat/Input/Files/UploadButton.tsx

@@ -33,17 +33,16 @@ const UploadButton = () => {
             onClick={handleClick}
             id="upload-document-button"
             aria-label="Upload Document"
-            style={{ width: '34px', height: '34px' }}
             className={cn(
-              'flex cursor-pointer items-center justify-center rounded-lg border border-border-light bg-transparent p-1 transition-all hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-primary focus:ring-opacity-50',
+              'flex h-8 w-8 cursor-pointer items-center justify-center rounded-[2px] border border-fig-Stroke-standard',
+              'bg-transparent p-px transition-colors hover:bg-fig-Surface-one-standard focus:outline-none focus:ring-2 focus:ring-fig-Stroke-primary focus:ring-opacity-40',
             )}
           >
-            <div className="flex w-full items-center justify-center gap-2">
+            <div className="flex w-full items-center justify-center">
               <img
-                src="/research/assets/export.svg"
+                src="/assets/export.svg"
                 alt="Upload Document"
-                className="icon-md dark:invert"
-                style={{ width: '18px', height: '18px' }}
+                className="icon-md h-5 w-5 dark:invert"
               />
             </div>
           </button>

client/src/components/Chat/Input/PersonaSelector.tsx

@@ -268,7 +268,7 @@ export default function PersonaSelector() {
       <button
         type="button"
         disabled
-        className="flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm font-medium text-text-primary opacity-50"
+        className="flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-soft bg-transparent px-1.5 text-sm font-normal leading-5 text-fig-Text-body opacity-50"
       >
         <User className="h-4 w-4" />
         <span>Loading...</span>
@@ -287,7 +287,7 @@ export default function PersonaSelector() {
       <button
         type="button"
         disabled
-        className="flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm font-medium text-text-primary opacity-50"
+        className="flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-soft bg-transparent px-1.5 text-sm font-normal leading-5 text-fig-Text-body opacity-50"
         title="No personas available"
       >
         <User className="h-4 w-4" />
@@ -368,8 +368,7 @@ export default function PersonaSelector() {
         setIsOpen={setIsOpen}
         trigger={
           <Ariakit.MenuButton
-            style={{ height: '34px' }}
-            className="flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 text-sm font-medium text-text-primary transition-all hover:bg-surface-hover"
+            className="flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-soft bg-transparent px-1.5 text-sm font-normal leading-5 text-fig-Text-body transition-colors hover:bg-fig-Surface-one-standard"
           >
             <User className="h-4 w-4" />
             <span>{buttonText}</span>

client/src/components/Chat/Input/SendButton.tsx

@@ -23,13 +23,15 @@ const SubmitButton = React.memo(
             id="send-button"
             disabled={props.disabled}
             className={cn(
-              'rounded-full bg-[#2434E7] p-1.5 text-white outline-offset-4 transition-all duration-200 hover:bg-[#1c2ac9] disabled:cursor-not-allowed disabled:opacity-50',
-            )}            
+              'flex h-8 w-8 items-center justify-center rounded-[2px] border border-fig-Stroke-primary',
+              'bg-fig-Surface-two-primary p-0 text-fig-Subject-inverse outline-offset-4',
+              'transition-all duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50',
+            )}
             data-testid="send-button"
             type="submit"
           >
             <span className="" data-state="closed">
-              <SendIcon size={24} />
+              <SendIcon size={16} className="text-fig-Subject-two-primary" />
             </span>
           </button>
         }

client/src/components/Chat/Input/StopButton.tsx

@@ -12,7 +12,9 @@ export default function StopButton({ stop, setShowStopButton }) {
         <button
           type="button"
           className={cn(
-            'rounded-full bg-blue-600 p-1.5 text-white outline-offset-4 transition-all duration-200 hover:bg-blue-700 disabled:cursor-not-allowed disabled:bg-blue-400 disabled:opacity-50',
+            'border-fig-Stroke-primary flex h-8 w-8 items-center justify-center rounded-[2px] border',
+            'bg-fig-Surface-two-primary text-fig-Subject-inverse p-0 outline-offset-4',
+            'transition-all duration-200 hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-50',
           )}
           aria-label={localize('com_nav_stop_generating')}
           onClick={(e) => {
@@ -21,17 +23,18 @@ export default function StopButton({ stop, setShowStopButton }) {
           }}
         >
           <svg
-            width="24"
-            height="24"
+            width="16"
+            height="16"
             viewBox="0 0 24 24"
             fill="none"
             xmlns="http://www.w3.org/2000/svg"
-            className="icon-lg text-white"
+            className="text-fig-Subject-two-primary h-4 w-4"
+            aria-hidden
           >
-            <rect x="7" y="7" width="10" height="10" rx="1.25" fill="currentColor"></rect>
+            <rect x="7" y="7" width="10" height="10" rx="1.25" fill="currentColor" />
           </svg>
         </button>
       }
-    ></TooltipAnchor>
+    />
   );
 }

client/src/components/Chat/Input/TemplateSelector.tsx

@@ -271,9 +271,9 @@ export default function TemplateSelector() {
       <button
         type="button"
         disabled
-        className="flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm font-medium text-text-primary opacity-50"
+        className="flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-soft bg-transparent px-1.5 text-sm font-normal leading-5 text-fig-Text-body opacity-50"
       >
-        <img src="/research/assets/documents.svg" alt="Template" className="h-3.5 w-3.5 dark:invert" />
+        <img src="/assets/documents.svg" alt="Template" className="h-3.5 w-3.5 dark:invert" />
         <span>Loading...</span>
       </button>
     );
@@ -290,10 +290,10 @@ export default function TemplateSelector() {
       <button
         type="button"
         disabled
-        className="flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 py-2 text-sm font-medium text-text-primary opacity-50"
+        className="flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-soft bg-transparent px-1.5 text-sm font-normal leading-5 text-fig-Text-body opacity-50"
         title="No templates available"
       >
-        <img src="/research/assets/documents.svg" alt="Template" className="h-3.5 w-3.5 dark:invert" />
+        <img src="/assets/documents.svg" alt="Template" className="h-3.5 w-3.5 dark:invert" />
         <span>{buttonText}</span>
       </button>
     );
@@ -369,10 +369,9 @@ export default function TemplateSelector() {
         setIsOpen={setIsOpen}
         trigger={
           <Ariakit.MenuButton
-            style={{ height: '34px' }}
-            className="flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 text-sm font-medium text-text-primary transition-all hover:bg-surface-hover"
+            className="flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-soft bg-transparent px-1.5 text-sm font-normal leading-5 text-fig-Text-body transition-colors hover:bg-fig-Surface-one-standard"
           >
-            <img src="/research/assets/documents.svg" alt="Template" className="h-3.5 w-3.5 dark:invert" />
+            <img src="/assets/documents.svg" alt="Template" className="h-3.5 w-3.5 dark:invert" />
             <span>{buttonText}</span>
             <ChevronDown className="h-4 w-4" />
           </Ariakit.MenuButton>

client/src/components/Chat/Input/ToolsDropdown.tsx

@@ -277,10 +277,11 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
                 onClick={handleClick}
                 id="tools-dropdown-button"
                 aria-label="Select Documents"
-                style={{ height: '34px' }}
                 className={cn(
-                  'flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 text-sm font-medium text-text-primary transition-all hover:bg-surface-hover',
-                  isDisabled && 'opacity-50 cursor-not-allowed',
+                  'flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-standard',
+                  'bg-transparent px-[9px] text-sm font-normal leading-5 text-fig-Subject-standard',
+                  'transition-colors hover:bg-fig-Surface-one-standard',
+                  isDisabled && 'cursor-not-allowed opacity-50',
                 )}
               >
                 {buttonText}
@@ -299,10 +300,11 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
             onMouseLeave={handleMouseLeave}
             id="tools-dropdown-button"
             aria-label="Select Documents"
-            style={{ height: '34px' }}
             className={cn(
-              'flex items-center gap-1.5 rounded-lg border border-border-light bg-transparent px-3 text-sm font-medium text-text-primary transition-all hover:bg-surface-hover',
-              isDisabled && 'opacity-50 cursor-not-allowed',
+              'flex h-8 items-center gap-1.5 rounded-[2px] border border-fig-Stroke-standard',
+              'bg-transparent px-[9px] text-sm font-normal leading-5 text-fig-Subject-standard',
+              'transition-colors hover:bg-fig-Surface-one-standard',
+              isDisabled && 'cursor-not-allowed opacity-50',
             )}
           >
             {buttonText}
@@ -311,7 +313,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
                 e.stopPropagation();
                 handleClearDocuments();
               }}
-              className="ml-1 flex-shrink-0 rounded p-0.5 hover:bg-surface-hover"
+              className="ml-1 flex-shrink-0 rounded p-0.5 hover:bg-fig-Surface-one-standard"
               aria-label="Clear all documents"
             >
               <span className="text-xs">✕</span>
@@ -347,7 +349,7 @@ const ToolsDropdown = ({ disabled }: ToolsDropdownProps) => {
               >
                 <div className="flex items-center gap-2 min-w-0 flex-1">
                   <img 
-                    src="/research/assets/documents.svg" 
+                    src="/assets/documents.svg" 
                     alt="Document" 
                     className="h-3 w-3 flex-shrink-0 opacity-70 dark:invert" 
                   />

client/src/components/Chat/Landing.tsx

@@ -1,11 +1,9 @@
-import { useMemo, useCallback, useState, useEffect, useRef } from 'react';
 import { EModelEndpoint } from 'librechat-data-provider';
-import { BirthdayIcon, TooltipAnchor } from '@librechat/client';
-import { useChatContext, useAgentsMapContext, useAssistantsMapContext } from '~/Providers';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useAgentsMapContext, useAssistantsMapContext, useChatContext } from '~/Providers';
 import { useGetEndpointsQuery, useGetStartupConfig } from '~/data-provider';
-import ConvoIcon from '~/components/Endpoints/ConvoIcon';
-import { useLocalize, useAuthContext } from '~/hooks';
-import { getIconEndpoint, getEntity } from '~/utils';
+import { useAuthContext, useLocalize } from '~/hooks';
+import { getEntity, getIconEndpoint } from '~/utils';
 
 const containerClassName =
   'relative flex h-full items-center justify-center rounded-full bg-white dark:bg-presentation dark:text-white text-black dark:after:shadow-none ';
@@ -144,21 +142,14 @@ export default function Landing({ centerFormOnLanding }: { centerFormOnLanding:
 
   return (
     <div
-      className={`flex h-full transform-gpu flex-col items-center justify-center pb-16 transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'}`}
+      className={`flex h-full transform-gpu flex-col items-center justify-center pb-[var(--Gap-one-group)] transition-all duration-200 ${centerFormOnLanding ? 'max-h-full sm:max-h-0' : 'max-h-full'}`}
     >
-      <div className="flex flex-col items-center gap-3 p-2 mb-6">
+      <div className="mb-6 flex flex-col items-center gap-3 p-2">
         {/* Main Heading */}
-        <h1 
-          className="text-[32px] font-semibold leading-[40px] text-[#2A2A2A] dark:text-white text-center"
-        >
+        <h1 className="fy-typography-title-large text-fig-Text-heading text-center">
           {/* Analyse the markets with FIA */}
-          What can I help you with ?
+          Upload documents to extract key insights
         </h1>
-
-        {/* Subtitle */}
-        <div className="text-[16px] font-normal leading-[24px] text-[#666666] dark:text-gray-400 text-center max-w-2xl">
-          {/* Get institutional-grade insights, analyse documents, and explore <br/>market data with the power of AI. */}
-        </div>
       </div>
     </div>
   );

client/src/components/Chat/Presentation.tsx

@@ -84,7 +84,7 @@ export default function Presentation({ children }: { children: React.ReactNode }
           artifacts={artifactsElement}
         >
           <main
-            className="flex h-full flex-col overflow-y-auto rounded-[2px] border border-[#EDEDED] bg-[#ffffff] dark:border-gray-700 dark:!bg-[#111111]"
+            className="bg-fig-Surface-standard flex h-full flex-col overflow-y-auto rounded-[2px]"
             role="main"
           >
             {children}

client/src/components/Nav/Nav.tsx

@@ -185,7 +185,7 @@ const Nav = memo(
               transition={{ duration: 0.2 }}
               key="nav"
             >
-              <div className="h-full w-[320px] md:w-[300px] rounded-[2px] bg-white dark:!bg-[#111111]">
+              <div className="bg-fig-Surface-standard h-full w-[320px] rounded-[2px] md:w-[300px]">
                 <div className="flex h-full flex-col">
                   <nav
                     id="chat-history-nav"