From 65207cce3e27c551e1caf7c74834652495c6ea24 Mon Sep 17 00:00:00 2001
From: Hiren-fyers <hiren@fyers.in>
Date: Wed, 22 Apr 2026 16:20:22 +0530
Subject: [PATCH] Enhance UI consistency and styling across components

- Updated Tailwind CSS configuration to include Figma theme colors for improved design coherence.
- Added Figma-related CSS imports in main entry file for better styling integration.
- Refined component styles in Chat, Nav, and TemplatesView for enhanced visual consistency and user experience.
- Adjusted button and input styles for improved alignment and responsiveness across various components.
- Updated .gitignore to include optional Figma CSS export file.
---
 .gitignore                                    |   3 +
 client/src/components/Chat/Footer.tsx         |   2 +-
 client/src/components/Chat/Header.tsx         |  11 +-
 client/src/components/Chat/Input/BadgeRow.tsx |   2 +-
 client/src/components/Chat/Input/ChatForm.tsx |  31 +-
 .../Chat/Input/Files/UploadButton.tsx         |  11 +-
 .../components/Chat/Input/PersonaSelector.tsx |   7 +-
 .../src/components/Chat/Input/SendButton.tsx  |   8 +-
 .../src/components/Chat/Input/StopButton.tsx  |  15 +-
 .../Chat/Input/TemplateSelector.tsx           |  13 +-
 .../components/Chat/Input/ToolsDropdown.tsx   |  18 +-
 client/src/components/Chat/Landing.tsx        |  25 +-
 client/src/components/Chat/Presentation.tsx   |   2 +-
 client/src/components/Nav/Nav.tsx             |   2 +-
 client/src/components/Nav/SearchBar.tsx       |  71 +-
 client/src/components/Nav/SidebarEdgeTabs.tsx |   8 +-
 client/src/components/Nav/TopNavBar.tsx       |   9 +-
 .../components/Templates/TemplatesView.tsx    | 453 ++++++++-----
 client/src/locales/en/translation.json        |   2 +-
 client/src/main.jsx                           |   2 +
 client/src/routes/ResourcesRoute.tsx          | 359 ++++++----
 client/src/routes/Root.tsx                    |   8 +-
 .../src/styles/tokens/build-figma-tokens.mjs  | 102 +++
 .../styles/tokens/figma-platform-laptop.css   | 171 +++++
 client/src/styles/tokens/figma-primitives.css | 308 +++++++++
 .../styles/tokens/figma-tailwind-colors.cjs   |   2 +
 .../styles/tokens/figma-theme-semantic.css    | 614 ++++++++++++++++++
 client/src/styles/tokens/figma-tokens.css     |   4 +
 client/src/styles/typography-fy.css           | 166 +++++
 client/tailwind.config.cjs                    |   4 +
 packages/client/src/svgs/SendIcon.tsx         |   2 +-
 31 files changed, 2011 insertions(+), 424 deletions(-)
 create mode 100644 client/src/styles/tokens/build-figma-tokens.mjs
 create mode 100644 client/src/styles/tokens/figma-platform-laptop.css
 create mode 100644 client/src/styles/tokens/figma-primitives.css
 create mode 100644 client/src/styles/tokens/figma-tailwind-colors.cjs
 create mode 100644 client/src/styles/tokens/figma-theme-semantic.css
 create mode 100644 client/src/styles/tokens/figma-tokens.css
 create mode 100644 client/src/styles/typography-fy.css

diff --git a/.gitignore b/.gitignore
index 3c6cf7fd4de8..5689ca0b4334 100644
--- a/.gitignore
+++ b/.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
diff --git a/client/src/components/Chat/Footer.tsx b/client/src/components/Chat/Footer.tsx
index 26532def0cb1..1a7bd6576f52 100644
--- a/client/src/components/Chat/Footer.tsx
+++ b/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"
       >
diff --git a/client/src/components/Chat/Header.tsx b/client/src/components/Chat/Header.tsx
index 4094eb5de8a9..146988c0c5e0 100644
--- a/client/src/components/Chat/Header.tsx
+++ b/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"
               />
diff --git a/client/src/components/Chat/Input/BadgeRow.tsx b/client/src/components/Chat/Input/BadgeRow.tsx
index f23305435088..49b4727e722a 100644
--- a/client/src/components/Chat/Input/BadgeRow.tsx
+++ b/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}>
diff --git a/client/src/components/Chat/Input/ChatForm.tsx b/client/src/components/Chat/Input/ChatForm.tsx
index a219281495e5..1d6e6ab2da06 100644
--- a/client/src/components/Chat/Input/ChatForm.tsx
+++ b/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',
               )}
             >
diff --git a/client/src/components/Chat/Input/Files/UploadButton.tsx b/client/src/components/Chat/Input/Files/UploadButton.tsx
index 2886ffcd95af..42b384ba35ce 100644
--- a/client/src/components/Chat/Input/Files/UploadButton.tsx
+++ b/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>
diff --git a/client/src/components/Chat/Input/PersonaSelector.tsx b/client/src/components/Chat/Input/PersonaSelector.tsx
index 0d9f0f90d0b9..355684786eec 100644
--- a/client/src/components/Chat/Input/PersonaSelector.tsx
+++ b/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>
diff --git a/client/src/components/Chat/Input/SendButton.tsx b/client/src/components/Chat/Input/SendButton.tsx
index 9e97eb79105c..3518be0bda92 100644
--- a/client/src/components/Chat/Input/SendButton.tsx
+++ b/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>
         }
diff --git a/client/src/components/Chat/Input/StopButton.tsx b/client/src/components/Chat/Input/StopButton.tsx
index 7c9e5ec45f47..a6c2c73112c8 100644
--- a/client/src/components/Chat/Input/StopButton.tsx
+++ b/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>
+    />
   );
 }
diff --git a/client/src/components/Chat/Input/TemplateSelector.tsx b/client/src/components/Chat/Input/TemplateSelector.tsx
index af299322eada..b4f3d8040bd6 100644
--- a/client/src/components/Chat/Input/TemplateSelector.tsx
+++ b/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>
diff --git a/client/src/components/Chat/Input/ToolsDropdown.tsx b/client/src/components/Chat/Input/ToolsDropdown.tsx
index bb9c05bd6065..bbacd5308f6f 100644
--- a/client/src/components/Chat/Input/ToolsDropdown.tsx
+++ b/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" 
                   />
diff --git a/client/src/components/Chat/Landing.tsx b/client/src/components/Chat/Landing.tsx
index 111d012517f9..150b09b669b6 100644
--- a/client/src/components/Chat/Landing.tsx
+++ b/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>
   );
diff --git a/client/src/components/Chat/Presentation.tsx b/client/src/components/Chat/Presentation.tsx
index 3d53c093e8bf..e0ad95b79b60 100644
--- a/client/src/components/Chat/Presentation.tsx
+++ b/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}
diff --git a/client/src/components/Nav/Nav.tsx b/client/src/components/Nav/Nav.tsx
index 3313cc59f5fb..a16c0edcb1be 100644
--- a/client/src/components/Nav/Nav.tsx
+++ b/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"
diff --git a/client/src/components/Nav/SearchBar.tsx b/client/src/components/Nav/SearchBar.tsx
index c50838eeb1a0..7ea7573c7c92 100644
--- a/client/src/components/Nav/SearchBar.tsx
+++ b/client/src/components/Nav/SearchBar.tsx
@@ -1,13 +1,13 @@
-import React, { forwardRef, useState, useCallback, useMemo, useEffect, useRef } from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+import { QueryKeys } from 'librechat-data-provider';
 import debounce from 'lodash/debounce';
-import { useRecoilState } from 'recoil';
 import { Search, X } from 'lucide-react';
-import { QueryKeys } from 'librechat-data-provider';
-import { useQueryClient } from '@tanstack/react-query';
+import React, { forwardRef, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
+import { useRecoilState } from 'recoil';
 import { useLocalize, useNewConvo } from '~/hooks';
-import { cn } from '~/utils';
 import store from '~/store';
+import { cn } from '~/utils';
 
 type SearchBarProps = {
   isSmallScreen?: boolean;
@@ -110,41 +110,54 @@ const SearchBar = forwardRef((props: SearchBarProps, ref: React.Ref<HTMLDivEleme
     <div
       ref={ref}
       className={cn(
-        'group relative mt-1 flex h-10 cursor-pointer items-center rounded-lg border-border-medium px-1 py-2 text-text-primary transition-colors duration-200 focus-within:bg-surface-hover hover:bg-surface-hover',
-        isSmallScreen === true ? 'mb-2 h-14 rounded-xl' : '',
+        'border-fig-Stroke-soft bg-fig-Surface-standard text-fig-Text-body group relative mt-1 flex h-8 cursor-text items-stretch overflow-hidden rounded-[2px] border transition-[border-color,box-shadow] duration-200',
+        isSmallScreen === true ? 'mb-2 h-14' : '',
       )}
     >
-      <Search className="absolute left-2 h-4 w-4 text-text-secondary group-focus-within:text-text-primary group-hover:text-text-primary" />
-      <input
-        type="text"
-        ref={inputRef}
-        className="m-0 mr-0 w-full border-none bg-transparent p-0 pl-7 text-sm leading-tight placeholder-text-secondary placeholder-opacity-100 focus-visible:outline-none group-focus-within:placeholder-text-primary group-hover:placeholder-text-primary"
-        value={text}
-        onChange={onChange}
-        onKeyDown={(e) => {
-          e.code === 'Space' ? e.stopPropagation() : null;
-        }}
-        aria-label={localize('com_nav_search_placeholder')}
-        placeholder={localize('com_nav_search_placeholder')}
-        onKeyUp={handleKeyUp}
-        onFocus={() => setSearchState((prev) => ({ ...prev, isSearching: true }))}
-        onBlur={() => setSearchState((prev) => ({ ...prev, isSearching: false }))}
-        autoComplete="off"
-        dir="auto"
-      />
+      <div
+        className={cn(
+          'flex min-h-0 min-w-0 flex-1 items-center gap-1 pl-1.5 pr-8',
+          isSmallScreen === true && 'gap-1.5 px-2 pr-10',
+        )}
+      >
+        <Search
+          className="text-fig-Subject-standard pointer-events-none h-4 w-4 shrink-0"
+          aria-hidden
+        />
+        <input
+          type="text"
+          ref={inputRef}
+          className={cn(
+            'text-fig-Text-body caret-fig-Text-body placeholder:text-fig-Subject-soft m-0 min-w-0 flex-1 border-0 bg-transparent p-0 text-xs font-normal leading-4 placeholder:font-normal focus-visible:outline-none',
+            isSmallScreen === true && 'text-sm leading-5',
+          )}
+          value={text}
+          onChange={onChange}
+          onKeyDown={(e) => {
+            e.code === 'Space' ? e.stopPropagation() : null;
+          }}
+          aria-label={localize('com_nav_search_placeholder')}
+          placeholder={localize('com_nav_search_placeholder')}
+          onKeyUp={handleKeyUp}
+          onFocus={() => setSearchState((prev) => ({ ...prev, isSearching: true }))}
+          onBlur={() => setSearchState((prev) => ({ ...prev, isSearching: false }))}
+          autoComplete="off"
+          dir="auto"
+        />
+      </div>
       <button
         type="button"
         aria-label={`${localize('com_ui_clear')} ${localize('com_ui_search')}`}
         className={cn(
-          'absolute right-[7px] flex h-5 w-5 items-center justify-center rounded-full border-none bg-transparent p-0 transition-opacity duration-200',
-          showClearIcon ? 'opacity-100' : 'opacity-0',
-          isSmallScreen === true ? 'right-[16px]' : '',
+          'text-fig-Subject-standard hover:text-fig-Text-body focus-visible:ring-fig-Stroke-soft absolute right-1 top-1/2 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-sm border-0 bg-transparent p-0 transition-opacity duration-200 focus-visible:outline-none focus-visible:ring-2',
+          showClearIcon ? 'pointer-events-auto opacity-100' : 'pointer-events-none opacity-0',
+          isSmallScreen === true ? 'right-2' : '',
         )}
         onClick={() => clearText(location.pathname)}
         tabIndex={showClearIcon ? 0 : -1}
         disabled={!showClearIcon}
       >
-        <X className="h-5 w-5 cursor-pointer" />
+        <X className="h-4 w-4 shrink-0 cursor-pointer" />
       </button>
     </div>
   );
diff --git a/client/src/components/Nav/SidebarEdgeTabs.tsx b/client/src/components/Nav/SidebarEdgeTabs.tsx
index 5a7dadc1b0ae..3eb20526f4a7 100644
--- a/client/src/components/Nav/SidebarEdgeTabs.tsx
+++ b/client/src/components/Nav/SidebarEdgeTabs.tsx
@@ -36,19 +36,19 @@ export default function SidebarEdgeTabs({
         'group absolute z-50 box-border flex h-6 w-2 shrink-0 -translate-y-1/2 cursor-pointer items-center justify-center p-0 transition-[width,height] duration-200 ease-out hover:h-8 hover:w-3 !border-0',
         'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
         navVisible
-          ? 'left-0 top-1/2 !rounded-br-[8px] !rounded-tr-[8px] hover:!rounded-br-[8px] hover:!rounded-tr-[8px] bg-[#111111] text-white hover:bg-[#1a1a1a] dark:bg-[#ffffff] dark:text-black dark:hover:bg-neutral-100'
-          : 'left-0 top-[calc(50%+4px)] !rounded-bl-[8px] !rounded-tl-[8px] hover:!rounded-bl-[8px] hover:!rounded-tl-[8px] bg-[#2434E7] text-white hover:bg-[#1c2ac9]',
+          ? 'left-0 top-1/2 !rounded-br-[8px] !rounded-tr-[8px] hover:!rounded-br-[8px] hover:!rounded-tr-[8px] bg-fig-Surface-inverse text-fig-Subject-inverse hover:bg-fig-Subject-standard dark:!bg-fig-Surface-inverse dark:text-[var(--Colour-Secondary-100)] dark:hover:bg-fig-Surface-one-neutral'
+          : 'left-0 top-[calc(50%+4px)] !rounded-bl-[8px] !rounded-tl-[8px] hover:!rounded-bl-[8px] hover:!rounded-tl-[8px] bg-[var(--Colour-Primary-40)] text-fig-Subject-inverse hover:bg-[var(--Colour-Primary-50)]',
       )}
     >
       {navVisible ? (
         <ChevronLeft
-          className="h-3 w-2 shrink-0 text-white transition-[width,height] duration-200 ease-out group-hover:h-4 group-hover:w-3 dark:text-black"
+          className="h-3 w-2 shrink-0 text-inherit transition-[width,height] duration-200 ease-out group-hover:h-4 group-hover:w-3"
           strokeWidth={2.5}
           aria-hidden
         />
       ) : (
         <ChevronRight
-          className="h-3 w-2 shrink-0 transition-[width,height] duration-200 ease-out group-hover:h-4 group-hover:w-3"
+          className="h-3 w-2 shrink-0 text-fig-Subject-inverse transition-[width,height] duration-200 ease-out group-hover:h-4 group-hover:w-3"
           strokeWidth={2.5}
           aria-hidden
         />
diff --git a/client/src/components/Nav/TopNavBar.tsx b/client/src/components/Nav/TopNavBar.tsx
index 678fd6754299..43944c344ba4 100644
--- a/client/src/components/Nav/TopNavBar.tsx
+++ b/client/src/components/Nav/TopNavBar.tsx
@@ -5,6 +5,7 @@ import { PermissionManager, type Permission } from '~/utils/permissions';
 import { saasApi } from '~/services/saasApi';
 import Settings from './Settings';
 import { asset } from '~/utils/assetPath';
+import { absoluteUrl } from '~/utils/remoteApiOrigin';
 
 // interface NiftyData {
 //   symbol: string;
@@ -253,7 +254,7 @@ export default function TopNavBar() {
       if (token && refreshToken) {
         // Call logout endpoint if available
         try {
-          await fetch('/api/v1/auth/logout', {
+          await fetch(absoluteUrl('/api/v1/auth/logout'), {
             method: 'POST',
             headers: {
               'Authorization': `Bearer ${token}`,
@@ -409,7 +410,7 @@ export default function TopNavBar() {
   // };
 
   return (
-    <nav className="bg-white dark:!bg-[#111111] border-b border-[#EDEDED] dark:border-gray-700 px-3 sm:px-4 md:px-6 py-1 flex-shrink-0 z-50 min-h-[48px]">
+    <nav className="bg-fig-Surface-standard border-fig-Stroke-soft flex-shrink-0 border-b px-3 py-1 sm:px-4 md:px-6 z-50 min-h-[48px]">
       <div className="flex items-center justify-between relative">
         {/* Left: FYERS Logo & Financial Data */}
         <div className="flex items-center gap-4 flex-shrink-0">
@@ -456,8 +457,8 @@ export default function TopNavBar() {
               onClick={() => handleMenuChange(menu)}
               className={`px-3 py-1 sm:px-4 sm:py-1 md:px-5 md:py-1 rounded-lg text-sm sm:text-base transition whitespace-nowrap ${
                 activeMenu === menu
-                  ? 'bg-[#F2F4FF] text-[#2434E7] dark:bg-[#2A2A2A] dark:text-[#A0A8FF]'
-                  : 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800'
+                  ? 'bg-fig-Surface-one-primary text-fig-Subject-primary'
+                  : 'text-fig-Text-body hover:bg-fig-Surface-one-standard'
               }`}
             >
               {menu}
diff --git a/client/src/components/Templates/TemplatesView.tsx b/client/src/components/Templates/TemplatesView.tsx
index 60a953a2def3..8319b9a2faee 100644
--- a/client/src/components/Templates/TemplatesView.tsx
+++ b/client/src/components/Templates/TemplatesView.tsx
@@ -15,8 +15,44 @@ import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useSearchParams } from 'react-router-dom';
 import { saasApi } from '~/services/saasApi';
+import { cn } from '~/utils';
 import { asset } from '~/utils/assetPath';
 
+/** One-line summary for the templates table (role/task/format or flattened text). */
+function getTemplateShortDescriptionLine(template: {
+  detailedPrompt?: string;
+  description?: string;
+  framework?: string;
+}): string {
+  const templateContent = template.detailedPrompt || template.description || '';
+  if (!templateContent) {
+    return template.framework || 'No template content';
+  }
+  const lines = templateContent.split('\n').filter((line) => line.trim());
+  if (lines.length === 0) {
+    return templateContent.replace(/\s+/g, ' ').trim();
+  }
+  let role = '';
+  let task = '';
+  let format = '';
+  for (const line of lines) {
+    const lowerLine = line.toLowerCase();
+    if (lowerLine.includes('role') || lowerLine.includes('act as')) {
+      role = line.replace(/.*(?:role|act as)[:\s]*/i, '').trim();
+    } else if (lowerLine.includes('task') || lowerLine.includes('create')) {
+      task = line.replace(/.*(?:task|create)[:\s]*/i, '').trim();
+    } else if (lowerLine.includes('format') || lowerLine.includes('show as')) {
+      format = line.replace(/.*(?:format|show as)[:\s]*/i, '').trim();
+    }
+  }
+  if (role || task || format) {
+    return [role && `Role: ${role}`, task && `Task: ${task}`, format && `Format: ${format}`]
+      .filter(Boolean)
+      .join(' · ');
+  }
+  return templateContent.replace(/\n/g, ' ').replace(/\s+/g, ' ').trim();
+}
+
 export default function TemplatesView() {
   const { showToast } = useToastContext();
   const [searchParams, setSearchParams] = useSearchParams();
@@ -390,38 +426,40 @@ export default function TemplatesView() {
   const isLoading = activeTab === 'templates' ? templatesLoading : personasLoading;
 
   return (
-    <div className="flex h-screen flex-col bg-[#ffffff] px-2 pb-2 pt-0 dark:bg-[#111111]">
+    <div className="bg-fig-Surface-standard flex h-screen flex-col px-2 pb-2 pt-0">
       {/* Tabs */}
       <div className="pt-2">
         <div className="flex items-center justify-between gap-3">
-          <div className="flex items-center gap-4 sm:gap-4">
+          <div className="flex items-center gap-[var(--Gap-group)] sm:gap-[var(--Gap-group)]">
             <button
+              type="button"
               onClick={() => {
                 setActiveTab('personas');
                 setSelectedItem(null);
                 setDropdownPosition(null);
               }}
-              className={`inline-flex h-7 items-center border-b-2 px-0 text-[14px] font-normal leading-none transition-colors ${
+              className={cn(
+                'font-inter inline-flex items-center border-b-2 px-0 text-sm font-normal leading-5 transition-colors',
                 activeTab === 'personas'
-                  ? 'border-[#2434E7] text-[#2A2A2A] dark:text-gray-100'
-                  : 'border-transparent text-[#6D6D6D] hover:text-[#2A2A2A] dark:text-gray-400 dark:hover:text-gray-200'
-              }`}
-              style={{ fontFamily: 'Inter, sans-serif' }}
+                  ? 'text-fig-Subject-standard border-fig-Stroke-primary pb-[var(--Padding-boundary)] pt-[var(--Padding-spacer)]'
+                  : 'text-fig-Subject-neutral hover:text-fig-Subject-standard border-transparent py-[var(--Padding-spacer)]',
+              )}
             >
               Agents
             </button>
             <button
+              type="button"
               onClick={() => {
                 setActiveTab('templates');
                 setSelectedItem(null);
                 setDropdownPosition(null);
               }}
-              className={`inline-flex h-7 items-center border-b-2 px-0 text-[14px] font-normal leading-none transition-colors ${
+              className={cn(
+                'font-inter inline-flex items-center border-b-2 px-0 text-sm font-normal leading-5 transition-colors',
                 activeTab === 'templates'
-                  ? 'border-[#2434E7] text-[#2A2A2A] dark:text-gray-100'
-                  : 'border-transparent text-[#6D6D6D] hover:text-[#2A2A2A] dark:text-gray-400 dark:hover:text-gray-200'
-              }`}
-              style={{ fontFamily: 'Inter, sans-serif' }}
+                  ? 'text-fig-Subject-standard border-fig-Stroke-primary pb-[var(--Padding-boundary)] pt-[var(--Padding-spacer)]'
+                  : 'text-fig-Subject-neutral hover:text-fig-Subject-standard border-transparent py-[var(--Padding-spacer)]',
+              )}
             >
               Templates
             </button>
@@ -434,7 +472,11 @@ export default function TemplatesView() {
                 setShowCreatePersonaModal(true);
               }
             }}
-            className="h-8 rounded-lg bg-[#2434E7] px-4 py-2 font-medium text-white hover:bg-[#2434E7]/90"
+            className={cn(
+              'border-fig-Stroke-primary bg-fig-Surface-two-primary h-[var(--Size-button)] rounded-[2px] border',
+              'font-inter text-fig-Subject-two-primary px-4 text-sm font-medium',
+              'transition-opacity hover:opacity-90',
+            )}
           >
             + Create {activeTab === 'templates' ? 'template' : 'agent'}
           </Button>
@@ -445,11 +487,11 @@ export default function TemplatesView() {
       <div className="flex-1 overflow-auto py-4">
         {isLoading ? (
           <div className="flex h-64 items-center justify-center">
-            <p className="text-gray-500 dark:text-gray-400">Loading...</p>
+            <p className="text-fig-Subject-neutral font-inter text-sm">Loading...</p>
           </div>
         ) : currentItems.length === 0 ? (
           <div className="flex h-64 flex-col items-center justify-center">
-            <p className="mb-4 text-gray-500 dark:text-gray-400">
+            <p className="text-fig-Subject-neutral font-inter mb-4 text-sm">
               No {activeTab === 'templates' ? 'templates' : 'agents'} created yet.
             </p>
             <Button
@@ -460,115 +502,133 @@ export default function TemplatesView() {
                   setShowCreatePersonaModal(true);
                 }
               }}
-              className="h-8 rounded-lg bg-[#2434E7] px-4 py-2 font-medium text-white hover:bg-[#2434E7]/90"
+              className={cn(
+                'border-fig-Stroke-primary bg-fig-Surface-two-primary h-[var(--Size-button)] rounded-[2px] border',
+                'font-inter text-fig-Subject-two-primary px-4 text-sm font-medium',
+                'transition-opacity hover:opacity-90',
+              )}
             >
               + Create {activeTab === 'templates' ? 'template' : 'agent'}
             </Button>
           </div>
         ) : (
-          <div className="overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
-            <table className="min-w-full border-separate border-spacing-0">
-              <thead className="border-b border-[#ededed] bg-[#EDEDED] dark:border-[#3e3e3e] dark:bg-[#2a2a2a]">
-                <tr className="border-b border-gray-200 dark:border-gray-700">
-                  <th className="whitespace-nowrap px-3 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+          <div className="border-fig-Stroke-soft overflow-x-auto rounded-[2px] border">
+            <table className="w-full min-w-[640px] table-fixed border-separate border-spacing-0">
+              <thead className="bg-fig-Surface-one-neutral">
+                <tr>
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-left align-middle',
+                      'w-[var(--Grids-three)] min-w-0',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
                     Name
                   </th>
-                  <th className="whitespace-nowrap px-3 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-left align-middle',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
                     Short description
                   </th>
-                  <th className="whitespace-nowrap px-3 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-right align-middle',
+                      'w-[var(--Grids-two)] min-w-0 whitespace-nowrap',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
                     Date created
                   </th>
-                  <th className="whitespace-nowrap px-3 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-right align-middle',
+                      'w-[var(--Grids-one)] min-w-0',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
                     Actions
                   </th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              <tbody className="divide-fig-Stroke-soft divide-y">
                 {activeTab === 'templates'
                   ? templates.map((template, rowIndex) => {
                       const isSelected =
                         selectedItem?.type === 'template' && selectedItem.id === template.id;
+                      const shortDescriptionLine = getTemplateShortDescriptionLine(template);
                       return (
                         <tr
                           key={template.id}
-                          className={`group cursor-pointer hover:bg-[#f7f7f7] dark:hover:bg-[#222222] ${
+                          className={cn(
+                            'group cursor-pointer',
+                            'hover:bg-fig-Surface-neutral',
                             rowIndex % 2 === 0
-                              ? 'bg-[#ffffff] dark:bg-[#111111]'
-                              : 'bg-[#fafafa] dark:bg-[#1a1a1a]'
-                          }`}
+                              ? 'bg-fig-Surface-standard'
+                              : 'bg-fig-Surface-zero-neutral',
+                          )}
                         >
-                          <td className="whitespace-nowrap px-3 py-3">
-                            <div className="flex items-center gap-3">
-                              <div className="box-border flex h-[28px] min-h-[28px] w-[28px] min-w-[28px] shrink-0 items-center justify-center !rounded-[2px] border-0 bg-[#f7f7f7] p-1 dark:bg-[#222222]">
+                          <td
+                            className={cn(
+                              'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] align-middle',
+                              'overflow-hidden',
+                            )}
+                          >
+                            <div className="flex h-full min-h-0 items-center gap-2 sm:gap-[var(--Gap-neighbor)]">
+                              <div
+                                className={cn(
+                                  'box-border flex h-[var(--Size-zero-button)] w-[var(--Size-zero-button)] shrink-0 items-center justify-center rounded-[2px] p-1',
+                                  rowIndex % 2 === 0
+                                    ? 'bg-fig-Surface-neutral'
+                                    : 'bg-fig-Surface-one-neutral',
+                                )}
+                              >
                                 <img
                                   src={asset('documents.svg')}
                                   alt="Template"
-                                  className="block h-full w-full max-h-[20px] max-w-[20px] flex-shrink-0 object-contain opacity-70 dark:opacity-70 dark:brightness-0 dark:invert"
+                                  className="block h-5 w-5 flex-shrink-0 object-contain opacity-70 dark:opacity-70 dark:brightness-0 dark:invert"
                                 />
                               </div>
-                              <div className="text-sm font-normal text-gray-700 dark:text-gray-300">
+                              <div className="fy-typography-title-small text-fig-Subject-standard truncate">
                                 {template.name}
                               </div>
                             </div>
                           </td>
-                          <td className="px-3 py-3">
-                            <div className="max-w-md whitespace-pre-wrap text-sm text-gray-500 dark:text-gray-400">
-                              {(() => {
-                                const templateContent =
-                                  template.detailedPrompt || template.description || '';
-                                if (!templateContent)
-                                  return template.framework || 'No template content';
-
-                                // Format template content to show structure (Role, Task, Format)
-                                const lines = templateContent
-                                  .split('\n')
-                                  .filter((line) => line.trim());
-                                if (lines.length === 0) return templateContent;
-
-                                // Extract ROLE, TASK, FORMAT from the structure
-                                let role = '';
-                                let task = '';
-                                let format = '';
-
-                                lines.forEach((line) => {
-                                  const lowerLine = line.toLowerCase();
-                                  if (lowerLine.includes('role') || lowerLine.includes('act as')) {
-                                    role = line.replace(/.*(?:role|act as)[:\s]*/i, '').trim();
-                                  } else if (
-                                    lowerLine.includes('task') ||
-                                    lowerLine.includes('create')
-                                  ) {
-                                    task = line.replace(/.*(?:task|create)[:\s]*/i, '').trim();
-                                  } else if (
-                                    lowerLine.includes('format') ||
-                                    lowerLine.includes('show as')
-                                  ) {
-                                    format = line.replace(/.*(?:format|show as)[:\s]*/i, '').trim();
-                                  }
-                                });
-
-                                // Build formatted display showing the structure
-                                if (role || task || format) {
-                                  const parts: string[] = [];
-                                  if (role) parts.push(`Role: ${role}`);
-                                  if (task) parts.push(`Task: ${task}`);
-                                  if (format) parts.push(`Format: ${format}`);
-                                  return parts.join('\n');
-                                }
-
-                                // Fallback: show the full content (truncated if too long)
-                                return templateContent.length > 200
-                                  ? `${templateContent.substring(0, 200)}...`
-                                  : templateContent;
-                              })()}
+                          <td
+                            className={cn(
+                              'p-[var(--Padding-spacer)] align-middle',
+                              'w-0 min-w-0 max-w-[11rem] sm:max-w-[14rem]',
+                            )}
+                          >
+                            <div
+                              className="font-inter text-fig-Subject-standard text-sm font-normal leading-5"
+                              title={shortDescriptionLine}
+                            >
+                              {shortDescriptionLine}
                             </div>
                           </td>
-                          <td className="whitespace-nowrap px-3 py-3 text-sm text-gray-500 dark:text-gray-400">
+                          <td
+                            className={cn(
+                              'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)]',
+                              'min-w-0 whitespace-nowrap text-right',
+                              'font-inter text-fig-Subject-standard text-sm font-normal leading-5',
+                            )}
+                          >
                             {formatDate(template.created_at)}
                           </td>
-                          <td className="whitespace-nowrap px-3 py-3 text-sm">
-                            <div className="relative inline-block text-left">
+                          <td
+                            className={cn(
+                              'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] text-right align-middle',
+                              'font-inter text-sm font-medium leading-5',
+                            )}
+                          >
+                            <div className="relative flex h-full min-h-0 items-center justify-end gap-2 text-left">
                               <button
                                 ref={(el) => {
                                   if (el) {
@@ -601,16 +661,16 @@ export default function TemplatesView() {
                                     setSelectedItem({ type: 'template', id: template.id });
                                   }
                                 }}
-                                className="dropdown-trigger rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+                                className="dropdown-trigger text-fig-Subject-standard hover:bg-fig-Surface-one-standard rounded-[2px] p-1 transition-colors"
                                 title="More options"
                               >
-                                <MoreVertical className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                                <MoreVertical className="h-3 w-3" aria-hidden />
                               </button>
                               {isSelected &&
                                 dropdownPosition &&
                                 createPortal(
                                   <div
-                                    className="fixed z-[9999] w-48 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+                                    className="border-fig-Stroke-soft bg-fig-Surface-standard fixed z-[9999] w-48 rounded-[2px] border shadow-lg"
                                     style={{
                                       top: `${dropdownPosition.top}px`,
                                       right: `${dropdownPosition.right}px`,
@@ -625,7 +685,7 @@ export default function TemplatesView() {
                                           e.preventDefault();
                                           handleEditTemplate(template);
                                         }}
-                                        className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+                                        className="text-fig-Subject-standard hover:bg-fig-Surface-one-standard flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-normal leading-5"
                                       >
                                         <Edit className="h-4 w-4" />
                                         Edit
@@ -637,7 +697,7 @@ export default function TemplatesView() {
                                           e.preventDefault();
                                           handleDeleteTemplate(template);
                                         }}
-                                        className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-red-600 hover:bg-gray-100 dark:text-red-400 dark:hover:bg-gray-700"
+                                        className="hover:bg-fig-Surface-one-standard flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-normal leading-5 text-destructive"
                                       >
                                         <img
                                           src={asset('delete.svg')}
@@ -661,36 +721,69 @@ export default function TemplatesView() {
                       return (
                         <tr
                           key={persona.id}
-                          className={`group cursor-pointer hover:bg-[#f7f7f7] dark:hover:bg-[#222222] ${
+                          className={cn(
+                            'group cursor-pointer',
+                            'hover:bg-fig-Surface-neutral',
                             rowIndex % 2 === 0
-                              ? 'bg-[#ffffff] dark:bg-[#111111]'
-                              : 'bg-[#fafafa] dark:bg-[#1a1a1a]'
-                          }`}
+                              ? 'bg-fig-Surface-standard'
+                              : 'bg-fig-Surface-zero-neutral',
+                          )}
                         >
-                          <td className="whitespace-nowrap px-3 py-3">
-                            <div className="flex items-center gap-3">
-                              <div className="box-border flex h-[28px] min-h-[28px] w-[28px] min-w-[28px] shrink-0 items-center justify-center !rounded-[2px] border-0 bg-[#f7f7f7] p-1 dark:bg-[#222222]">
+                          <td
+                            className={cn(
+                              'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] align-middle',
+                              'overflow-hidden',
+                            )}
+                          >
+                            <div className="flex h-full min-h-0 items-center gap-2 sm:gap-[var(--Gap-neighbor)]">
+                              <div
+                                className={cn(
+                                  'box-border flex h-[var(--Size-zero-button)] w-[var(--Size-zero-button)] shrink-0 items-center justify-center rounded-[2px] p-1',
+                                  rowIndex % 2 === 0
+                                    ? 'bg-fig-Surface-neutral'
+                                    : 'bg-fig-Surface-one-neutral',
+                                )}
+                              >
                                 <img
                                   src={asset('Leads.svg')}
                                   alt="Persona"
-                                  className="block h-full w-full max-h-[20px] max-w-[20px] flex-shrink-0 object-contain opacity-80 dark:invert"
+                                  className="block h-5 w-5 flex-shrink-0 object-contain opacity-80 dark:invert"
                                 />
                               </div>
-                              <div className="text-sm font-normal text-gray-700 dark:text-gray-300">
+                              <div className="font-inter text-fig-Subject-standard min-w-0 truncate text-sm font-medium leading-4">
                                 {persona.name}
                               </div>
                             </div>
                           </td>
-                          <td className="px-3 py-3">
-                            <div className="text-sm text-gray-500 dark:text-gray-400">
+                          <td
+                            className={cn(
+                              'p-[var(--Padding-spacer)] align-middle',
+                              'w-0 min-w-0 max-w-[11rem] sm:max-w-[14rem]',
+                            )}
+                          >
+                            <p
+                              className="text-fig-Subject-neutral font-inter m-0 min-w-0 truncate text-sm font-normal leading-5"
+                              title={persona.description || 'No description'}
+                            >
                               {persona.description || 'No description'}
-                            </div>
+                            </p>
                           </td>
-                          <td className="whitespace-nowrap px-3 py-3 text-sm text-gray-500 dark:text-gray-400">
+                          <td
+                            className={cn(
+                              'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)]',
+                              'min-w-0 whitespace-nowrap text-right',
+                              'font-inter text-fig-Subject-standard text-sm font-normal leading-5',
+                            )}
+                          >
                             {formatDate(persona.created_at)}
                           </td>
-                          <td className="whitespace-nowrap px-3 py-3 text-sm">
-                            <div className="relative inline-block text-left">
+                          <td
+                            className={cn(
+                              'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] text-right align-middle',
+                              'font-inter text-sm font-medium leading-5',
+                            )}
+                          >
+                            <div className="relative flex h-full min-h-0 items-center justify-end gap-2 text-left">
                               <button
                                 ref={(el) => {
                                   if (el) {
@@ -721,16 +814,16 @@ export default function TemplatesView() {
                                     setSelectedItem({ type: 'persona', id: persona.id });
                                   }
                                 }}
-                                className="dropdown-trigger rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+                                className="dropdown-trigger text-fig-Subject-standard hover:bg-fig-Surface-one-standard rounded-[2px] p-1 transition-colors"
                                 title="More options"
                               >
-                                <MoreVertical className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                                <MoreVertical className="h-3 w-3" aria-hidden />
                               </button>
                               {isSelected &&
                                 dropdownPosition &&
                                 createPortal(
                                   <div
-                                    className="fixed z-[9999] w-48 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+                                    className="border-fig-Stroke-soft bg-fig-Surface-standard fixed z-[9999] w-48 rounded-[2px] border shadow-lg"
                                     style={{
                                       top: `${dropdownPosition.top}px`,
                                       right: `${dropdownPosition.right}px`,
@@ -745,7 +838,7 @@ export default function TemplatesView() {
                                           e.preventDefault();
                                           handleEditPersona(persona);
                                         }}
-                                        className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+                                        className="text-fig-Subject-standard hover:bg-fig-Surface-one-standard flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-normal leading-5"
                                       >
                                         <Edit className="h-4 w-4" />
                                         Edit
@@ -757,7 +850,7 @@ export default function TemplatesView() {
                                           e.preventDefault();
                                           handleDeletePersona(persona);
                                         }}
-                                        className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-red-600 hover:bg-gray-100 dark:text-red-400 dark:hover:bg-gray-700"
+                                        className="hover:bg-fig-Surface-one-standard flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-normal leading-5 text-destructive"
                                       >
                                         <img
                                           src={asset('delete.svg')}
@@ -1061,7 +1154,7 @@ function CreateTemplateModal({
 
   return (
     <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto bg-[#F7F7F7] p-6 dark:bg-[#222222]">
+      <DialogContent className="bg-fig-Surface-neutral max-h-[90vh] max-w-2xl overflow-y-auto p-6">
         <DialogHeader className="mb-4">
           <DialogTitle className="text-xl font-semibold">Create Template</DialogTitle>
         </DialogHeader>
@@ -1072,7 +1165,7 @@ function CreateTemplateModal({
         )}
         <form onSubmit={handleSubmit} className="space-y-5">
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Template Name *
             </label>
             <Input
@@ -1080,12 +1173,12 @@ function CreateTemplateModal({
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               required
-              className="w-full rounded-lg border border-gray-300 bg-[#FFFFFF] px-4 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-[#111111] dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full rounded-[2px] border px-4 py-2.5 text-sm focus:outline-none focus:ring-2"
             />
           </div>
 
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Select Framework
             </label>
             <div className="relative">
@@ -1099,7 +1192,7 @@ function CreateTemplateModal({
                 trigger={
                   <Ariakit.MenuButton
                     style={{ height: '40px' }}
-                    className="flex w-full items-center justify-between gap-1.5 rounded-lg border border-gray-300 bg-white px-4 text-sm font-normal text-gray-900 transition-all hover:border-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500"
+                    className="border-fig-Stroke-standard text-fig-Text-body bg-fig-Surface-standard hover:border-fig-Stroke-standard flex w-full items-center justify-between gap-1.5 rounded-[2px] border px-4 text-sm font-normal transition-all"
                   >
                     <span>
                       {formData.customTemplate
@@ -1108,7 +1201,7 @@ function CreateTemplateModal({
                           ? (frameworks as any)[formData.framework].name
                           : '-- Select Framework --'}
                     </span>
-                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                    <ChevronDown className="text-fig-Subject-standard h-4 w-4" />
                   </Ariakit.MenuButton>
                 }
                 items={[
@@ -1134,21 +1227,21 @@ function CreateTemplateModal({
                     },
                   },
                 ]}
-                className="w-full divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white shadow-lg dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
-                itemClassName="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                className="divide-fig-Stroke-soft border-fig-Stroke-soft bg-fig-Surface-standard w-full divide-y rounded-[2px] border shadow-lg"
+                itemClassName="text-fig-Text-body cursor-pointer px-4 py-3 text-sm transition-colors hover:bg-fig-Surface-one-standard"
               />
             </div>
           </div>
 
           {formData.framework && !formData.customTemplate && (
-            <div className="mt-5 space-y-4 border-t border-gray-200 pt-5 dark:border-gray-700">
-              <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            <div className="border-fig-Stroke-soft mt-5 space-y-4 border-t pt-5">
+              <h3 className="text-fig-Text-heading font-inter text-base font-semibold">
                 {(frameworks as any)[formData.framework].name}
               </h3>
               {Object.entries((frameworks as any)[formData.framework].fields).map(
                 ([key, label]) => (
                   <div key={key}>
-                    <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
                       {String(label)}
                     </label>
                     <TextareaAutosize
@@ -1164,7 +1257,7 @@ function CreateTemplateModal({
                       minRows={3}
                       maxRows={8}
                       aria-label={String(label)}
-                      className="w-full resize-none rounded-lg border border-gray-300 bg-[#FFFFFF] px-4 py-3 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-[#111111] dark:text-gray-100"
+                      className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full resize-none rounded-[2px] border px-4 py-3 text-sm focus:outline-none focus:ring-2"
                     />
                   </div>
                 ),
@@ -1173,12 +1266,12 @@ function CreateTemplateModal({
           )}
 
           {formData.customTemplate && (
-            <div className="mt-5 space-y-4 border-t border-gray-200 pt-5 dark:border-gray-700">
-              <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            <div className="border-fig-Stroke-soft mt-5 space-y-4 border-t pt-5">
+              <h3 className="text-fig-Text-heading font-inter text-base font-semibold">
                 Custom Template
               </h3>
               <div>
-                <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
                   Template Content *
                 </label>
                 <TextareaAutosize
@@ -1189,25 +1282,25 @@ function CreateTemplateModal({
                   placeholder="Enter your custom template here..."
                   required
                   aria-label="Custom template content"
-                  className="w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-gray-800 dark:text-gray-100"
+                  className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full resize-none rounded-[2px] border px-4 py-3 text-sm focus:outline-none focus:ring-2"
                 />
               </div>
             </div>
           )}
 
-          <div className="mt-6 flex gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+          <div className="border-fig-Stroke-soft mt-6 flex gap-3 border-t pt-4">
             <Button
               type="button"
               onClick={onClose}
               variant="outline"
-              className="flex-1 bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Subject-standard bg-fig-Surface-standard flex-1 border"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="flex-1 bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-400"
+              className="bg-fig-Surface-two-primary border-fig-Stroke-primary text-fig-Subject-two-primary flex-1 border hover:opacity-90 disabled:opacity-50"
             >
               {loading ? 'Creating...' : 'Save Template'}
             </Button>
@@ -1356,7 +1449,7 @@ function EditTemplateModal({
 
   return (
     <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto bg-[#F7F7F7] p-6 dark:bg-[#222222]">
+      <DialogContent className="bg-fig-Surface-neutral max-h-[90vh] max-w-2xl overflow-y-auto p-6">
         <DialogHeader className="mb-4">
           <DialogTitle className="text-xl font-semibold">Edit Template</DialogTitle>
         </DialogHeader>
@@ -1367,7 +1460,7 @@ function EditTemplateModal({
         )}
         <form onSubmit={handleSubmit} className="space-y-5">
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Template Name *
             </label>
             <Input
@@ -1375,12 +1468,12 @@ function EditTemplateModal({
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               required
-              className="w-full rounded-lg border border-gray-300 bg-[#FFFFFF] px-4 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-[#111111] dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full rounded-[2px] border px-4 py-2.5 text-sm focus:outline-none focus:ring-2"
             />
           </div>
 
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Select Framework
             </label>
             <div className="relative">
@@ -1394,7 +1487,7 @@ function EditTemplateModal({
                 trigger={
                   <Ariakit.MenuButton
                     style={{ height: '40px' }}
-                    className="flex w-full items-center justify-between gap-1.5 rounded-lg border border-gray-300 bg-white px-4 text-sm font-normal text-gray-900 transition-all hover:border-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500"
+                    className="border-fig-Stroke-standard text-fig-Text-body bg-fig-Surface-standard hover:border-fig-Stroke-standard flex w-full items-center justify-between gap-1.5 rounded-[2px] border px-4 text-sm font-normal transition-all"
                   >
                     <span>
                       {formData.customTemplate
@@ -1403,7 +1496,7 @@ function EditTemplateModal({
                           ? (frameworks as any)[formData.framework].name
                           : '-- Select Framework --'}
                     </span>
-                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                    <ChevronDown className="text-fig-Subject-standard h-4 w-4" />
                   </Ariakit.MenuButton>
                 }
                 items={[
@@ -1429,21 +1522,21 @@ function EditTemplateModal({
                     },
                   },
                 ]}
-                className="w-full divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white shadow-lg dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
-                itemClassName="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                className="divide-fig-Stroke-soft border-fig-Stroke-soft bg-fig-Surface-standard w-full divide-y rounded-[2px] border shadow-lg"
+                itemClassName="text-fig-Text-body cursor-pointer px-4 py-3 text-sm transition-colors hover:bg-fig-Surface-one-standard"
               />
             </div>
           </div>
 
           {formData.framework && !formData.customTemplate && (
-            <div className="mt-5 space-y-4 border-t border-gray-200 pt-5 dark:border-gray-700">
-              <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            <div className="border-fig-Stroke-soft mt-5 space-y-4 border-t pt-5">
+              <h3 className="text-fig-Text-heading font-inter text-base font-semibold">
                 {(frameworks as any)[formData.framework].name}
               </h3>
               {Object.entries((frameworks as any)[formData.framework].fields).map(
                 ([key, label]) => (
                   <div key={key}>
-                    <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                    <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
                       {String(label)}
                     </label>
                     <TextareaAutosize
@@ -1459,7 +1552,7 @@ function EditTemplateModal({
                       minRows={3}
                       maxRows={8}
                       aria-label={String(label)}
-                      className="w-full resize-none rounded-lg border border-gray-300 bg-[#FFFFFF] px-4 py-3 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-[#111111] dark:text-gray-100"
+                      className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full resize-none rounded-[2px] border px-4 py-3 text-sm focus:outline-none focus:ring-2"
                     />
                   </div>
                 ),
@@ -1468,12 +1561,12 @@ function EditTemplateModal({
           )}
 
           {formData.customTemplate && (
-            <div className="mt-5 space-y-4 border-t border-gray-200 pt-5 dark:border-gray-700">
-              <h3 className="text-base font-semibold text-gray-900 dark:text-gray-100">
+            <div className="border-fig-Stroke-soft mt-5 space-y-4 border-t pt-5">
+              <h3 className="text-fig-Text-heading font-inter text-base font-semibold">
                 Custom Template
               </h3>
               <div>
-                <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+                <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
                   Template Content *
                 </label>
                 <TextareaAutosize
@@ -1484,25 +1577,25 @@ function EditTemplateModal({
                   placeholder="Enter your custom template here..."
                   required
                   aria-label="Custom template content"
-                  className="w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-gray-800 dark:text-gray-100"
+                  className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full resize-none rounded-[2px] border px-4 py-3 text-sm focus:outline-none focus:ring-2"
                 />
               </div>
             </div>
           )}
 
-          <div className="mt-6 flex gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+          <div className="border-fig-Stroke-soft mt-6 flex gap-3 border-t pt-4">
             <Button
               type="button"
               onClick={onClose}
               variant="outline"
-              className="flex-1 bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Subject-standard bg-fig-Surface-standard flex-1 border"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="flex-1 bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-400"
+              className="bg-fig-Surface-two-primary border-fig-Stroke-primary text-fig-Subject-two-primary flex-1 border hover:opacity-90 disabled:opacity-50"
             >
               {loading ? 'Updating...' : 'Update Template'}
             </Button>
@@ -1727,7 +1820,7 @@ function CreatePersonaModal({
 
   return (
     <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto bg-[#F7F7F7] p-6 dark:bg-[#222222]">
+      <DialogContent className="bg-fig-Surface-neutral max-h-[90vh] max-w-2xl overflow-y-auto p-6">
         <DialogHeader className="mb-4">
           <DialogTitle className="text-xl font-semibold">Create Agents</DialogTitle>
         </DialogHeader>
@@ -1738,7 +1831,7 @@ function CreatePersonaModal({
         )}
         <form onSubmit={handleSubmit} className="space-y-5">
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Name *
             </label>
             <Input
@@ -1746,13 +1839,13 @@ function CreatePersonaModal({
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               required
-              className="w-full rounded-lg border border-gray-300 bg-[#FFFFFF] px-4 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-[#111111] dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full rounded-[2px] border px-4 py-2.5 text-sm focus:outline-none focus:ring-2"
             />
           </div>
 
           {/* Predefined Personas - Above description */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Select Predefined Agent (optional)
             </label>
             <div className="relative">
@@ -1766,14 +1859,14 @@ function CreatePersonaModal({
                 trigger={
                   <Ariakit.MenuButton
                     style={{ height: '40px' }}
-                    className="flex w-full items-center justify-between gap-1.5 rounded-lg border border-gray-300 bg-white px-4 text-sm font-normal text-gray-900 transition-all hover:border-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500"
+                    className="border-fig-Stroke-standard text-fig-Text-body bg-fig-Surface-standard hover:border-fig-Stroke-standard flex w-full items-center justify-between gap-1.5 rounded-[2px] border px-4 text-sm font-normal transition-all"
                   >
                     <span>
                       {formData.selectedPredefinedId
                         ? PREDEFINED_PERSONAS[parseInt(formData.selectedPredefinedId)].name
                         : '-- Select Predefined Agent (Optional) --'}
                     </span>
-                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                    <ChevronDown className="text-fig-Subject-standard h-4 w-4" />
                   </Ariakit.MenuButton>
                 }
                 items={[
@@ -1792,12 +1885,12 @@ function CreatePersonaModal({
                     },
                   })),
                 ]}
-                className="w-full divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white shadow-lg dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
-                itemClassName="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                className="divide-fig-Stroke-soft border-fig-Stroke-soft bg-fig-Surface-standard w-full divide-y rounded-[2px] border shadow-lg"
+                itemClassName="text-fig-Text-body cursor-pointer px-4 py-3 text-sm transition-colors hover:bg-fig-Surface-one-standard"
               />
             </div>
             {formData.selectedPredefinedId && (
-              <p className="mt-1 text-xs text-blue-600 dark:text-blue-400">
+              <p className="text-fig-Subject-primary mt-1 text-xs">
                 Agent template will be auto-filled below. Just edit the variables like{' '}
                 {`{{variable_name}}`} with your values.
               </p>
@@ -1805,7 +1898,7 @@ function CreatePersonaModal({
           </div>
 
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Description {formData.selectedPredefinedId ? '' : '*'}
             </label>
             <TextareaAutosize
@@ -1815,7 +1908,7 @@ function CreatePersonaModal({
               maxRows={10}
               required={!formData.selectedPredefinedId}
               aria-label="Persona description"
-              className="w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-gray-800 dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full resize-none rounded-[2px] border px-4 py-3 text-sm focus:outline-none focus:ring-2"
               placeholder={
                 formData.selectedPredefinedId
                   ? 'Edit variables like {{focus_area}} with your values'
@@ -1823,7 +1916,7 @@ function CreatePersonaModal({
               }
             />
             {formData.selectedPredefinedId && (
-              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              <p className="text-fig-Subject-neutral mt-1 text-xs">
                 Variables to edit:{' '}
                 {PREDEFINED_PERSONAS[parseInt(formData.selectedPredefinedId)]?.variables
                   .map((v) => `{{${v}}}`)
@@ -1832,19 +1925,19 @@ function CreatePersonaModal({
             )}
           </div>
 
-          <div className="mt-6 flex gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+          <div className="border-fig-Stroke-soft mt-6 flex gap-3 border-t pt-4">
             <Button
               type="button"
               onClick={onClose}
               variant="outline"
-              className="flex-1 bg-white text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-800 dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Subject-standard flex-1 border text-sm"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="flex-1 bg-blue-600 text-sm text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 disabled:bg-blue-400"
+              className="bg-fig-Surface-two-primary border-fig-Stroke-primary text-fig-Subject-two-primary flex-1 border text-sm hover:opacity-90 disabled:opacity-50"
             >
               {loading ? 'Creating...' : 'Save Agents'}
             </Button>
@@ -1928,7 +2021,7 @@ function EditPersonaModal({
 
   return (
     <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent className="max-h-[90vh] max-w-2xl overflow-y-auto bg-[#F7F7F7] p-6 dark:bg-[#222222]">
+      <DialogContent className="bg-fig-Surface-neutral max-h-[90vh] max-w-2xl overflow-y-auto p-6">
         <DialogHeader className="mb-4">
           <DialogTitle className="text-xl font-semibold">Edit Agents</DialogTitle>
         </DialogHeader>
@@ -1939,7 +2032,7 @@ function EditPersonaModal({
         )}
         <form onSubmit={handleSubmit} className="space-y-5">
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Name *
             </label>
             <Input
@@ -1947,13 +2040,13 @@ function EditPersonaModal({
               value={formData.name}
               onChange={(e) => setFormData({ ...formData, name: e.target.value })}
               required
-              className="w-full rounded-lg border border-gray-300 bg-[#FFFFFF] px-4 py-2.5 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-[#111111] dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full rounded-[2px] border px-4 py-2.5 text-sm focus:outline-none focus:ring-2"
             />
           </div>
 
           {/* Predefined Personas - Above description */}
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Select Predefined Persona (optional)
             </label>
             <div className="relative">
@@ -1967,14 +2060,14 @@ function EditPersonaModal({
                 trigger={
                   <Ariakit.MenuButton
                     style={{ height: '40px' }}
-                    className="flex w-full items-center justify-between gap-1.5 rounded-lg border border-gray-300 bg-white px-4 text-sm font-normal text-gray-900 transition-all hover:border-gray-400 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100 dark:hover:border-gray-500"
+                    className="border-fig-Stroke-standard text-fig-Text-body bg-fig-Surface-standard hover:border-fig-Stroke-standard flex w-full items-center justify-between gap-1.5 rounded-[2px] border px-4 text-sm font-normal transition-all"
                   >
                     <span>
                       {formData.selectedPredefinedId
                         ? PREDEFINED_PERSONAS[parseInt(formData.selectedPredefinedId)].name
                         : '-- Select Predefined Persona (Optional) --'}
                     </span>
-                    <ChevronDown className="h-4 w-4 text-gray-500" />
+                    <ChevronDown className="text-fig-Subject-standard h-4 w-4" />
                   </Ariakit.MenuButton>
                 }
                 items={[
@@ -1993,12 +2086,12 @@ function EditPersonaModal({
                     },
                   })),
                 ]}
-                className="w-full divide-y divide-gray-200 rounded-lg border border-gray-200 bg-white shadow-lg dark:divide-gray-700 dark:border-gray-700 dark:bg-gray-800"
-                itemClassName="px-4 py-3 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors"
+                className="divide-fig-Stroke-soft border-fig-Stroke-soft bg-fig-Surface-standard w-full divide-y rounded-[2px] border shadow-lg"
+                itemClassName="text-fig-Text-body cursor-pointer px-4 py-3 text-sm transition-colors hover:bg-fig-Surface-one-standard"
               />
             </div>
             {formData.selectedPredefinedId && (
-              <p className="mt-1 text-xs text-blue-600 dark:text-blue-400">
+              <p className="text-fig-Subject-primary mt-1 text-xs">
                 Persona template will be auto-filled below. Just edit the variables like{' '}
                 {`{{variable_name}}`} with your values.
               </p>
@@ -2006,7 +2099,7 @@ function EditPersonaModal({
           </div>
 
           <div>
-            <label className="mb-2 block text-sm font-medium text-gray-700 dark:text-gray-300">
+            <label className="text-fig-Subject-standard mb-2 block text-sm font-medium">
               Description {formData.selectedPredefinedId ? '' : '*'}
             </label>
             <TextareaAutosize
@@ -2016,7 +2109,7 @@ function EditPersonaModal({
               maxRows={10}
               required={!formData.selectedPredefinedId}
               aria-label="Persona description"
-              className="w-full resize-none rounded-lg border border-gray-300 bg-white px-4 py-3 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-gray-400 dark:bg-gray-800 dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Text-body focus:border-fig-Stroke-primary focus:ring-fig-Stroke-primary/20 bg-fig-Surface-standard w-full resize-none rounded-[2px] border px-4 py-3 text-sm focus:outline-none focus:ring-2"
               placeholder={
                 formData.selectedPredefinedId
                   ? 'Edit variables like {{focus_area}} with your values'
@@ -2024,7 +2117,7 @@ function EditPersonaModal({
               }
             />
             {formData.selectedPredefinedId && (
-              <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              <p className="text-fig-Subject-neutral mt-1 text-xs">
                 Variables to edit:{' '}
                 {PREDEFINED_PERSONAS[parseInt(formData.selectedPredefinedId)]?.variables
                   .map((v) => `{{${v}}}`)
@@ -2033,19 +2126,19 @@ function EditPersonaModal({
             )}
           </div>
 
-          <div className="mt-6 flex gap-3 border-t border-gray-200 pt-4 dark:border-gray-700">
+          <div className="border-fig-Stroke-soft mt-6 flex gap-3 border-t pt-4">
             <Button
               type="button"
               onClick={onClose}
               variant="outline"
-              className="flex-1 bg-white text-gray-900 dark:bg-gray-800 dark:text-gray-100"
+              className="border-fig-Stroke-standard text-fig-Subject-standard bg-fig-Surface-standard flex-1 border"
             >
               Cancel
             </Button>
             <Button
               type="submit"
               disabled={loading}
-              className="flex-1 bg-blue-600 text-white hover:bg-blue-700 disabled:bg-blue-400"
+              className="bg-fig-Surface-two-primary border-fig-Stroke-primary text-fig-Subject-two-primary flex-1 border hover:opacity-90 disabled:opacity-50"
             >
               {loading ? 'Updating...' : 'Update Agent'}
             </Button>
diff --git a/client/src/locales/en/translation.json b/client/src/locales/en/translation.json
index 43850407638e..ff046ec49f5f 100644
--- a/client/src/locales/en/translation.json
+++ b/client/src/locales/en/translation.json
@@ -557,7 +557,7 @@
   "com_nav_save_badges_state": "Save badges state",
   "com_nav_save_drafts": "Save drafts locally",
   "com_nav_scroll_button": "Scroll to the end button",
-  "com_nav_search_placeholder": "Search messages",
+  "com_nav_search_placeholder": "Search history",
   "com_nav_send_message": "Send message",
   "com_nav_setting_account": "Account",
   "com_nav_setting_balance": "Balance",
diff --git a/client/src/main.jsx b/client/src/main.jsx
index 53b483f8d20d..6bef024996fa 100644
--- a/client/src/main.jsx
+++ b/client/src/main.jsx
@@ -3,6 +3,8 @@ import { createRoot } from 'react-dom/client';
 import './locales/i18n';
 import App from './App';
 import './style.css';
+import './styles/tokens/figma-tokens.css';
+import './styles/typography-fy.css';
 import './mobile.css';
 import { ApiErrorBoundaryProvider } from './hooks/ApiErrorBoundaryContext';
 import 'katex/dist/katex.min.css';
diff --git a/client/src/routes/ResourcesRoute.tsx b/client/src/routes/ResourcesRoute.tsx
index 355cd58b503d..f45fbceaea13 100644
--- a/client/src/routes/ResourcesRoute.tsx
+++ b/client/src/routes/ResourcesRoute.tsx
@@ -1,12 +1,5 @@
 import { Spinner, useToastContext } from '@librechat/client';
-import {
-  ChevronRight,
-  Home,
-  MoreVertical,
-  Plus,
-  Search,
-  X
-} from 'lucide-react';
+import { ChevronRight, Home, MoreVertical, Plus, Search, X } from 'lucide-react';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import CreateFolderModal from '~/components/Resources/Modals/CreateFolderModal';
@@ -14,6 +7,7 @@ import EditFileModal from '~/components/Resources/Modals/EditFileModal';
 import EditFolderModal from '~/components/Resources/Modals/EditFolderModal';
 import UploadFileModal from '~/components/Resources/Modals/UploadFileModal';
 import { saasApi } from '~/services/saasApi';
+import { cn } from '~/utils';
 import { PermissionManager } from '~/utils/permissions';
 
 interface FolderNode {
@@ -45,7 +39,7 @@ const DocumentIcon = ({ className }: { className?: string }) => (
   <img
     src="/research/assets/documents.svg"
     alt="Document"
-    className={`${className || 'h-4 w-4'} opacity-70 dark:opacity-70 dark:brightness-0 dark:invert`}
+    className={`${className || 'h-3 w-3'} opacity-70 dark:opacity-70 dark:brightness-0 dark:invert`}
   />
 );
 
@@ -631,34 +625,36 @@ export default function ResourcesRoute() {
           {/* Second Row: Tabs + Actions */}
           <div className="flex flex-col items-start justify-between gap-3 sm:flex-row sm:items-center">
             {/* Tabs */}
-            <div className="flex items-center gap-4 sm:gap-4">
+            <div className="flex items-center gap-[var(--Gap-group)] sm:gap-[var(--Gap-group)]">
               <button
+                type="button"
                 onClick={() => {
                   setActiveTab('documents');
                   navigateToFolder(null, 'Home');
                   setShowSearch(false);
                 }}
-                className={`inline-flex h-7 items-center border-b-2 px-0 text-[14px] font-normal leading-none transition-colors ${
+                className={cn(
+                  'font-inter inline-flex items-center border-b-2 px-0 text-sm font-normal leading-5 transition-colors',
                   activeTab === 'documents'
-                    ? 'border-[#2434E7] text-[#2A2A2A] dark:text-gray-100'
-                    : 'border-transparent text-[#6D6D6D] hover:text-[#2A2A2A] dark:text-gray-400 dark:hover:text-gray-200'
-                }`}
-                style={{ fontFamily: 'Inter, sans-serif' }}
+                    ? 'border-fig-Stroke-primary text-fig-Subject-standard pb-[var(--Padding-boundary)] pt-[var(--Padding-spacer)]'
+                    : 'text-fig-Subject-neutral hover:text-fig-Subject-standard border-transparent py-[var(--Padding-spacer)]',
+                )}
               >
                 Documents
               </button>
               <button
+                type="button"
                 onClick={() => {
                   setActiveTab('reports');
                   setSearchQuery('');
                   setShowSearch(false);
                 }}
-                className={`inline-flex h-7 items-center border-b-2 px-0 text-[14px] font-normal leading-none transition-colors ${
+                className={cn(
+                  'font-inter inline-flex items-center border-b-2 px-0 text-sm font-normal leading-5 transition-colors',
                   activeTab === 'reports'
-                    ? 'border-[#2434E7] text-[#2A2A2A] dark:text-gray-100'
-                    : 'border-transparent text-[#6D6D6D] hover:text-[#2A2A2A] dark:text-gray-400 dark:hover:text-gray-200'
-                }`}
-                style={{ fontFamily: 'Inter, sans-serif' }}
+                    ? 'border-fig-Stroke-primary text-fig-Subject-standard pb-[var(--Padding-boundary)] pt-[var(--Padding-spacer)]'
+                    : 'text-fig-Subject-neutral hover:text-fig-Subject-standard border-transparent py-[var(--Padding-spacer)]',
+                )}
               >
                 Reports
               </button>
@@ -666,67 +662,106 @@ export default function ResourcesRoute() {
 
             {/* Action Buttons */}
             {canManage && (
-              <div className="flex w-full items-center gap-2 sm:w-auto sm:gap-3">
-                <button
-                  onClick={() => {
-                    setShowCreateFolderModal(true);
-                  }}
-                  className="flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg bg-[#2434E7] hover:bg-[#2434E7]/90 px-2 text-xs font-medium leading-none text-white transition-colors sm:flex-none sm:gap-2 sm:px-3"
-                >
-                  <Plus className="h-3 w-3 sm:h-3.5 sm:w-3.5" />
-                  <span className="hidden sm:inline">Create folder</span>
-                  <span className="sm:hidden">Folder</span>
-                </button>
-                <button
-                  onClick={() => {
-                    setShowUploadFileModal(true);
-                  }}
-                  className="flex h-8 flex-1 items-center justify-center gap-1.5 rounded-lg border border-gray-300 bg-white px-2 text-xs font-medium leading-none text-gray-700 transition-colors hover:bg-gray-50 dark:border-gray-400 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700 sm:flex-none sm:gap-2 sm:px-3"
-                >
-                  <img
-                    src="/research/assets/export.svg"
-                    alt="Upload"
-                    className="h-3 w-3 dark:invert sm:h-3.5 sm:w-3.5"
-                  />
-                  <span className="hidden sm:inline">Upload document</span>
-                  <span className="sm:hidden">Upload</span>
-                </button>
-                {showSearch ? (
-                  <div className="relative">
-                    <input
-                      id="resources-search"
-                      type="text"
-                      value={searchQuery}
-                      onChange={(e) => setSearchQuery(e.target.value)}
-                      placeholder="Search files and folders..."
-                      className="box-border h-8 w-64 rounded-lg border border-[#EDEDED] bg-[#ffffff] py-0 pl-10 pr-10 text-sm leading-8 text-gray-900 focus:border-[#2434E7] focus:outline-none focus:ring-2 focus:ring-[#2434E7]/25 dark:border-[#3e3e3e] dark:bg-[#111111] dark:text-gray-100 dark:focus:border-[#2434E7]"
-                      autoFocus
-                      onKeyDown={(e) => {
-                        if (e.key === 'Escape') {
-                          setShowSearch(false);
-                          setSearchQuery('');
-                        }
-                      }}
+              <div className="flex w-full min-w-0 items-center gap-1.5 sm:w-auto sm:flex-nowrap">
+                <div className="flex min-w-0 flex-1 items-center gap-2 sm:flex-none">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowCreateFolderModal(true);
+                    }}
+                    className={cn(
+                      'border-fig-Stroke-primary flex h-[var(--Size-zero-button)] flex-1 items-center justify-center gap-0.5 rounded-[2px] border',
+                      'bg-fig-Surface-two-primary px-[var(--Dimensions-Size-xs3)] py-px',
+                      'font-inter text-fig-Subject-two-primary text-xs font-normal leading-4',
+                      'transition-opacity hover:opacity-90 sm:flex-none',
+                    )}
+                  >
+                    <Plus className="h-3 w-3 shrink-0" aria-hidden />
+                    <span className="hidden sm:inline">Create folder</span>
+                    <span className="sm:hidden">Folder</span>
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowUploadFileModal(true);
+                    }}
+                    className={cn(
+                      'border-fig-Stroke-standard flex h-[var(--Size-zero-button)] flex-1 items-center justify-center gap-0.5 rounded-[2px] border',
+                      'bg-transparent px-[var(--Dimensions-Size-xs3)] py-px',
+                      'font-inter text-fig-Subject-standard text-xs font-normal leading-4',
+                      'hover:bg-fig-Surface-one-standard transition-colors sm:flex-none',
+                    )}
+                  >
+                    <img
+                      src="/research/assets/export.svg"
+                      alt=""
+                      className="h-3 w-3 shrink-0 opacity-90 dark:opacity-100"
                     />
-                    <Search className="absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
-                    <button
-                      onClick={() => {
-                        setShowSearch(false);
-                        setSearchQuery('');
-                      }}
-                      className="absolute right-3 top-1/2 -translate-y-1/2 transform text-gray-400 hover:text-gray-600 dark:hover:text-gray-200"
-                      title="Close search"
+                    <span className="hidden sm:inline">Upload document</span>
+                    <span className="sm:hidden">Upload</span>
+                  </button>
+                </div>
+                {showSearch ? (
+                  <div className="relative min-w-0 sm:min-w-[16rem]">
+                    <div
+                      className={cn(
+                        'border-fig-Stroke-soft bg-fig-Surface-standard flex h-[var(--Size-zero-button)] w-full min-w-0 max-w-md items-stretch',
+                        'overflow-hidden rounded-[2px] border transition-[border-color,box-shadow] duration-200',
+                        'focus-within:border-fig-Stroke-primary focus-within:ring-fig-Stroke-primary/20 focus-within:ring-2',
+                      )}
                     >
-                      <X className="h-4 w-4" />
-                    </button>
+                      <div className="flex min-w-0 flex-1 items-center gap-1 pl-1.5 pr-1">
+                        <Search
+                          className="text-fig-Subject-standard h-3.5 w-3.5 shrink-0"
+                          aria-hidden
+                        />
+                        <input
+                          id="resources-search"
+                          type="text"
+                          value={searchQuery}
+                          onChange={(e) => setSearchQuery(e.target.value)}
+                          placeholder="Search files and folders..."
+                          className={cn(
+                            'm-0 min-w-0 flex-1 border-0 bg-transparent p-0',
+                            'text-fig-Text-body caret-fig-Text-body placeholder:text-fig-Subject-soft',
+                            'text-xs font-normal leading-4',
+                            'focus-visible:outline-none',
+                          )}
+                          autoFocus
+                          onKeyDown={(e) => {
+                            if (e.key === 'Escape') {
+                              setShowSearch(false);
+                              setSearchQuery('');
+                            }
+                          }}
+                        />
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setShowSearch(false);
+                            setSearchQuery('');
+                          }}
+                          className="text-fig-Subject-standard hover:text-fig-Text-body focus-visible:ring-fig-Stroke-soft flex h-5 w-5 shrink-0 items-center justify-center rounded-sm border-0 bg-transparent p-0 transition-opacity focus-visible:outline-none focus-visible:ring-2"
+                          title="Close search"
+                        >
+                          <X className="h-3.5 w-3.5" />
+                        </button>
+                      </div>
+                    </div>
                   </div>
                 ) : (
                   <button
+                    type="button"
                     onClick={() => {
                       setShowSearch(true);
                     }}
-                    className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg p-0 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-900 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-gray-200"
+                    className={cn(
+                      'text-fig-Subject-standard flex h-[var(--Size-zero-button)] w-[var(--Size-zero-button)] shrink-0 items-center justify-center',
+                      'rounded-[2px] p-0 transition-colors',
+                      'hover:bg-fig-Surface-one-standard hover:text-fig-Text-body',
+                    )}
                     title="Search files and folders"
+                    aria-label="Search files and folders"
                   >
                     <Search className="h-4 w-4" />
                   </button>
@@ -783,23 +818,49 @@ export default function ResourcesRoute() {
           /* List/Table View - Responsive */
           <div className="mb-4 overflow-x-auto rounded-lg border border-gray-200 dark:border-gray-700">
             <table className="w-full min-w-[640px]">
-              <thead className="border-b border-[#ededed] bg-[#EDEDED] dark:border-[#3e3e3e] dark:bg-[#2a2a2a]">
+              <thead className="bg-fig-Surface-one-neutral dark:bg-fig-Surface-one-neutral">
                 <tr>
-                  <th className="px-3 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-left align-middle',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
                     Name
                   </th>
-                  <th className="hidden px-3 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 md:table-cell">
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-left align-middle',
+                      'hidden md:table-cell',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
                     Owner
                   </th>
-                  <th className="hidden px-3 py-3 text-left text-sm font-medium text-gray-700 dark:text-gray-300 sm:table-cell">
-                    Created date
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-right align-middle',
+                      'hidden sm:table-cell',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
+                    Date created
                   </th>
-                  <th className="px-3 py-3 text-right text-sm font-medium text-gray-700 dark:text-gray-300">
+                  <th
+                    scope="col"
+                    className={cn(
+                      'box-border h-[var(--Size-tableHeader)] p-[var(--Padding-spacer)] text-right align-middle',
+                      'font-inter text-fig-Subject-standard text-xs font-medium leading-[14px]',
+                    )}
+                  >
                     Actions
                   </th>
                 </tr>
               </thead>
-              <tbody className="divide-y divide-gray-200 dark:divide-gray-700">
+              <tbody className="">
                 {/* Folders */}
                 {filteredContent.folders.map((folder, folderIndex) => {
                   const folderFileCount = folder.files?.length || 0;
@@ -825,11 +886,13 @@ export default function ResourcesRoute() {
                   return (
                     <tr
                       key={folder.id}
-                      className={`group cursor-pointer hover:bg-[#f7f7f7] dark:hover:bg-[#222222] ${
+                      className={cn(
+                        'group cursor-pointer',
+                        'hover:bg-fig-Surface-neutral',
                         folderIndex % 2 === 0
-                          ? 'bg-[#ffffff] dark:bg-[#111111]'
-                          : 'bg-[#fafafa] dark:bg-[#1a1a1a]'
-                      }`}
+                          ? 'bg-fig-Surface-standard'
+                          : 'bg-fig-Surface-zero-neutral',
+                      )}
                       onDoubleClick={(e) => {
                         if (
                           !(e.target as HTMLElement).closest('.dropdown-trigger, .dropdown-menu')
@@ -838,35 +901,62 @@ export default function ResourcesRoute() {
                         }
                       }}
                     >
-                      <td className="whitespace-nowrap px-3 py-3">
-                        <div className="flex items-center gap-2 sm:gap-3">
-                          <div className="box-border flex h-[28px] min-h-[28px] w-[28px] min-w-[28px] shrink-0 items-center justify-center !rounded-[2px] border-0 bg-[#f7f7f7] p-1 dark:bg-[#222222]">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] align-middle',
+                          'overflow-hidden',
+                        )}
+                      >
+                        <div className="flex h-full min-h-0 items-center gap-2 sm:gap-[var(--Gap-neighbor)]">
+                          <div
+                            className={cn(
+                              'box-border flex h-[var(--Size-zero-button)] w-[var(--Size-zero-button)] shrink-0 items-center justify-center rounded-[2px] p-1',
+                              folderIndex % 2 === 0
+                                ? 'bg-fig-Surface-neutral'
+                                : 'bg-fig-Surface-one-neutral',
+                            )}
+                          >
                             <img
                               src="/research/assets/Folder.svg"
                               alt="Folder"
-                              className="block h-full w-full max-h-[20px] max-w-[20px] flex-shrink-0 object-contain dark:invert"
+                              className="block h-5 w-5 flex-shrink-0 object-contain dark:invert"
                             />
                           </div>
-                          <div className="min-w-0">
-                            <div className="truncate text-xs font-medium text-gray-900 dark:text-gray-100 sm:text-sm">
+                          <div className="flex min-w-0 flex-col gap-0">
+                            <div className="fy-typography-title-small text-fig-Subject-standard truncate">
                               {folder.name}
                             </div>
-                            {folderFileCount > 0 && (
-                              <div className="text-xs text-gray-500 dark:text-gray-400">
-                                {folderFileCount} doc{folderFileCount !== 1 ? 's' : ''}
-                              </div>
-                            )}
+                            <div className="fy-typography-body-tiny text-fig-Subject-neutral">
+                              {folderFileCount} Doc{folderFileCount !== 1 ? 's' : ''}
+                            </div>
                           </div>
                         </div>
                       </td>
-                      <td className="hidden whitespace-nowrap px-3 py-3 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)]',
+                          'font-inter',
+                          'text-fig-Subject-standard hidden p-[var(--Padding-spacer)] text-left align-middle text-sm font-normal leading-5 md:table-cell',
+                        )}
+                      >
                         {folder.created_by_name || 'Unknown'}
                       </td>
-                      <td className="hidden whitespace-nowrap px-3 py-3 text-xs text-gray-500 dark:text-gray-400 sm:table-cell sm:text-sm">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)]',
+                          'font-inter',
+                          'text-fig-Subject-standard hidden p-[var(--Padding-spacer)] text-right align-middle text-sm font-normal leading-5 sm:table-cell',
+                        )}
+                      >
                         {formatDate(folder.created_at)}
                       </td>
-                      <td className="whitespace-nowrap px-3 py-3 text-right text-sm font-medium">
-                        <div className="flex items-center justify-end gap-2">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] text-right align-middle',
+                          'font-inter text-sm font-medium leading-5',
+                        )}
+                      >
+                        <div className="flex h-full min-h-0 items-center justify-end gap-2">
                           {canModifyFolder && (
                             <div className="relative">
                               <button
@@ -899,17 +989,17 @@ export default function ResourcesRoute() {
                                     setSelectedItem({ type: 'folder', id: folder.id });
                                   }
                                 }}
-                                className="dropdown-trigger rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+                                className="dropdown-trigger text-fig-Subject-standard hover:bg-fig-Surface-one-standard rounded-[2px] p-1 transition-colors"
                                 title="More options"
                               >
-                                <MoreVertical className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                                <MoreVertical className="h-3 w-3" aria-hidden />
                               </button>
                               {selectedItem?.type === 'folder' &&
                                 selectedItem.id === folder.id &&
                                 dropdownPosition &&
                                 createPortal(
                                   <div
-                                    className="fixed z-[9999] w-48 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+                                    className="border-fig-Stroke-soft bg-fig-Surface-standard fixed z-[9999] w-48 rounded-[2px] border shadow-lg"
                                     style={{
                                       top: `${dropdownPosition.top}px`,
                                       right: `${dropdownPosition.right}px`,
@@ -929,7 +1019,7 @@ export default function ResourcesRoute() {
                                             setSelectedItem(null);
                                             setDropdownPosition(null);
                                           }}
-                                          className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-gray-700 hover:bg-gray-100 dark:text-gray-300 dark:hover:bg-gray-700"
+                                          className="text-fig-Subject-standard hover:bg-fig-Surface-one-standard flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-normal leading-5"
                                         >
                                           <img
                                             src="/research/assets/edit.svg"
@@ -948,7 +1038,7 @@ export default function ResourcesRoute() {
                                           setSelectedItem(null);
                                           setDropdownPosition(null);
                                         }}
-                                        className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-red-600 hover:bg-gray-100 dark:text-red-400 dark:hover:bg-gray-700"
+                                        className="hover:bg-fig-Surface-one-standard flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-normal leading-5 text-destructive"
                                       >
                                         <img
                                           src="/research/assets/delete.svg"
@@ -987,34 +1077,63 @@ export default function ResourcesRoute() {
                   return (
                     <tr
                       key={file.id}
-                      className={`group cursor-pointer hover:bg-[#f7f7f7] dark:hover:bg-[#222222] ${
+                      className={cn(
+                        'group cursor-pointer',
+                        'hover:bg-fig-Surface-neutral',
                         rowIndex % 2 === 0
-                          ? 'bg-[#ffffff] dark:bg-[#111111]'
-                          : 'bg-[#fafafa] dark:bg-[#1a1a1a]'
-                      }`}
+                          ? 'bg-fig-Surface-standard'
+                          : 'bg-fig-Surface-zero-neutral',
+                      )}
                       onDoubleClick={() => handlePreviewFile(file)}
                     >
-                      <td className="whitespace-nowrap px-3 py-3">
-                        <div className="flex min-w-0 items-center gap-2 sm:gap-3">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] align-middle',
+                          'overflow-hidden',
+                        )}
+                      >
+                        <div className="flex h-full min-w-0 items-center gap-2 sm:gap-[var(--Gap-neighbor)]">
                           <div
-                            className="box-border flex h-[28px] min-h-[28px] w-[28px] min-w-[28px] shrink-0 items-center justify-center !rounded-[2px] border-0 bg-[#f7f7f7] p-1 dark:bg-[#222222]"
+                            className={cn(
+                              'box-border flex h-[var(--Size-zero-button)] w-[var(--Size-zero-button)] shrink-0 items-center justify-center rounded-[2px] p-1',
+                              rowIndex % 2 === 0
+                                ? 'bg-fig-Surface-neutral'
+                                : 'bg-fig-Surface-one-neutral',
+                            )}
                             aria-hidden
                           >
-                            <FileIcon className="h-5 w-5 max-h-full max-w-full flex-shrink-0 object-contain text-gray-500 [&_img]:object-contain [&_svg]:h-full [&_svg]:w-full" />
+                            <FileIcon className="block h-5 w-5 flex-shrink-0 object-contain" />
                           </div>
-                          <div className="truncate text-xs font-medium text-gray-900 dark:text-gray-100 sm:text-sm">
+                          <div className="font-inter text-fig-Subject-standard min-w-0 truncate text-sm font-medium leading-4">
                             {file.name}
                           </div>
                         </div>
                       </td>
-                      <td className="hidden whitespace-nowrap px-3 py-3 text-sm text-gray-500 dark:text-gray-400 md:table-cell">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)]',
+                          'font-inter',
+                          'text-fig-Subject-standard hidden p-[var(--Padding-spacer)] text-left align-middle text-sm font-normal leading-5 md:table-cell',
+                        )}
+                      >
                         {file.created_by_name || 'Unknown'}
                       </td>
-                      <td className="hidden whitespace-nowrap px-3 py-3 text-xs text-gray-500 dark:text-gray-400 sm:table-cell sm:text-sm">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)]',
+                          'font-inter',
+                          'text-fig-Subject-standard hidden p-[var(--Padding-spacer)] text-right align-middle text-sm font-normal leading-5 sm:table-cell',
+                        )}
+                      >
                         {formatDate(file.created_at)}
                       </td>
-                      <td className="whitespace-nowrap px-3 py-3 text-right text-sm font-medium">
-                        <div className="flex items-center justify-end gap-2">
+                      <td
+                        className={cn(
+                          'box-border h-[var(--Size-tableBody)] max-h-[var(--Size-tableBody)] p-[var(--Padding-spacer)] text-right align-middle',
+                          'font-inter text-sm font-medium leading-5',
+                        )}
+                      >
+                        <div className="flex h-full min-h-0 items-center justify-end gap-2">
                           {/* <button
                             onClick={(e) => {
                               e.stopPropagation();
@@ -1056,17 +1175,17 @@ export default function ResourcesRoute() {
                                     setSelectedItem({ type: 'file', id: file.id });
                                   }
                                 }}
-                                className="dropdown-trigger rounded p-1 hover:bg-gray-100 dark:hover:bg-gray-700"
+                                className="dropdown-trigger text-fig-Subject-standard hover:bg-fig-Surface-one-standard rounded-[2px] p-1 transition-colors"
                                 title="More options"
                               >
-                                <MoreVertical className="h-4 w-4 text-gray-500 dark:text-gray-400" />
+                                <MoreVertical className="h-3 w-3" aria-hidden />
                               </button>
                               {selectedItem?.type === 'file' &&
                                 selectedItem.id === file.id &&
                                 dropdownPosition &&
                                 createPortal(
                                   <div
-                                    className="fixed z-[9999] w-48 rounded-md border border-gray-200 bg-white shadow-lg dark:border-gray-700 dark:bg-gray-800"
+                                    className="border-fig-Stroke-soft bg-fig-Surface-standard fixed z-[9999] w-48 rounded-[2px] border shadow-lg"
                                     style={{
                                       top: `${dropdownPosition.top}px`,
                                       right: `${dropdownPosition.right}px`,
@@ -1085,7 +1204,7 @@ export default function ResourcesRoute() {
                                             setSelectedItem(null);
                                             setDropdownPosition(null);
                                           }}
-                                          className="flex w-full items-center gap-2 px-4 py-2 text-left text-sm text-red-600 hover:bg-gray-100 dark:text-red-400 dark:hover:bg-gray-700"
+                                          className="hover:bg-fig-Surface-one-standard flex w-full items-center gap-2 px-4 py-2 text-left text-sm font-normal leading-5 text-destructive"
                                         >
                                           <img
                                             src="/research/assets/delete.svg"
diff --git a/client/src/routes/Root.tsx b/client/src/routes/Root.tsx
index 9b7e165bb6f5..d028769fe1fe 100644
--- a/client/src/routes/Root.tsx
+++ b/client/src/routes/Root.tsx
@@ -84,13 +84,13 @@ export default function Root() {
             <PromptGroupsProvider>
               <Banner onHeightChange={setBannerHeight} />
               <div
-                className="flex flex-col bg-[#f6f8ff] dark:bg-[#2a2a2a]"
+                className="bg-fig-Surface-primary flex flex-col"
                 style={{ height: `calc(100dvh - ${bannerHeight}px)` }}
               >
                 {showTopNavBar && <TopNavBar />}
-                {/* Shell padding L/T/R/B = 4/0/4/4 px; column gap 4px (FYERS Design) */}
-                <div className="flex flex-1 overflow-hidden p-[0px_4px_4px_4px]">
-                  <div className="relative z-0 flex h-full w-full gap-[4px] overflow-hidden">
+                {/* Shell padding L/T/R/B = 4/0/4/4 px; column gap (platform tokens) */}
+                <div className="flex flex-1 overflow-hidden p-[0_var(--Padding-neighbor)_var(--Padding-neighbor)_var(--Padding-neighbor)]">
+                  <div className="relative z-0 flex h-full w-full gap-[var(--Gap-zero-neighbor)] overflow-hidden">
                     {shouldShowNav && <Nav navVisible={navVisible} setNavVisible={setNavVisible} />}
                     <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
                       {shouldShowNav && (
diff --git a/client/src/styles/tokens/build-figma-tokens.mjs b/client/src/styles/tokens/build-figma-tokens.mjs
new file mode 100644
index 000000000000..0e9a689280bc
--- /dev/null
+++ b/client/src/styles/tokens/build-figma-tokens.mjs
@@ -0,0 +1,102 @@
+/**
+ * Splits a Figma CSS export into committed token files:
+ * - figma-primitives.css
+ * - figma-theme-semantic.css  (Light on :root, Dark on html.dark)
+ * - figma-platform-laptop.css (Laptop only; other platform modes dropped)
+ * - figma-tokens.css, figma-tailwind-colors.cjs
+ *
+ * The generated CSS files in this folder are the default source of truth; Figma
+ * exports are not kept in the repo. When the design system updates, save the new
+ * export (any path) and run:
+ *
+ *   cd client && node ./src/styles/tokens/build-figma-tokens.mjs <path-to-export.css>
+ */
+import { readFileSync, writeFileSync, existsSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve, isAbsolute } from 'node:path';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const raw = process.argv[2];
+if (!raw) {
+  console.log(
+    'Figma token rebuild — pass a Figma CSS export (not stored in the repo):\n' +
+      '  npm run build:figma-tokens -- <path-to-figma-export.css>\n' +
+      '  node ./src/styles/tokens/build-figma-tokens.mjs <path-to-figma-export.css>\n' +
+      'Generates figma-*.css and figma-tailwind-colors.cjs in this directory.'
+  );
+  process.exit(0);
+}
+
+const inputPath = isAbsolute(raw) ? raw : resolve(process.cwd(), raw);
+if (!existsSync(inputPath)) {
+  console.error('File not found:', inputPath);
+  process.exit(1);
+}
+
+const src = readFileSync(inputPath, 'utf8');
+const lines = src.split(/\r?\n/);
+
+const slice = (start1, end1) => lines.slice(start1 - 1, end1).join('\n');
+
+const primitives = slice(1, 306);
+const lightBody = slice(311, 612);
+const darkBody = slice(615, 916);
+let platformLaptop = slice(1517, 1681);
+
+// Theme semantic stroke is a colour; platform "Stroke-standard" is thickness—keep theme, drop this line.
+platformLaptop = platformLaptop
+  .split('\n')
+  .filter((line) => !/^\s*--Stroke-standard:\s*var\(--Dimensions-Thickness-xs\);/.test(line))
+  .join('\n');
+
+const themeSemantic = `/* Collection: Theme — from Figma; Light = :root, Dark = html.dark / .dark */
+:root {
+${lightBody}
+}
+
+html.dark,
+.dark {
+${darkBody}
+}
+`;
+
+const platform = `/* Collection: Platform — Mode: Laptop only (rebuild drops Mobile / Wide / Tablet) */
+/* Use var(--Dimensions-Thickness-xs) for 1px stroke width; --Stroke-* here is not set to avoid clashing with Theme colour tokens. */
+:root {
+${platformLaptop}
+}
+`;
+
+const header = (title) => `/* ${title} — auto-generated; do not hand-edit. Rebuild: node build-figma-tokens.mjs <figma-export.css> */
+
+`;
+
+writeFileSync(join(__dirname, 'figma-primitives.css'), header('Figma Primitives') + primitives + '\n', 'utf8');
+writeFileSync(join(__dirname, 'figma-theme-semantic.css'), header('Figma Theme (light + dark)') + themeSemantic + '\n', 'utf8');
+writeFileSync(join(__dirname, 'figma-platform-laptop.css'), header('Figma Platform (laptop)') + platform + '\n', 'utf8');
+
+const index = `/* Figma tokens: import order matters (primitives → theme → platform) */
+@import './figma-primitives.css';
+@import './figma-theme-semantic.css';
+@import './figma-platform-laptop.css';
+`;
+writeFileSync(join(__dirname, 'figma-tokens.css'), index, 'utf8');
+
+const varNames = [
+  ...new Set(
+    lightBody
+      .split('\n')
+      .map((l) => l.match(/^\s*--([^:]+):/))
+      .filter(Boolean)
+      .map((m) => m[1])
+  ),
+].sort();
+const cjs = `// Auto-generated with build-figma-tokens.mjs (theme semantic var names from Light mode)
+module.exports = ${JSON.stringify(
+    Object.fromEntries(varNames.map((n) => [n, `var(--${n})`]))
+  )};
+`;
+writeFileSync(join(__dirname, 'figma-tailwind-colors.cjs'), cjs, 'utf8');
+
+console.log('Wrote figma-primitives.css, figma-theme-semantic.css, figma-platform-laptop.css, figma-tokens.css, figma-tailwind-colors.cjs');
diff --git a/client/src/styles/tokens/figma-platform-laptop.css b/client/src/styles/tokens/figma-platform-laptop.css
new file mode 100644
index 000000000000..73abcc69dbb2
--- /dev/null
+++ b/client/src/styles/tokens/figma-platform-laptop.css
@@ -0,0 +1,171 @@
+/* Figma Platform (laptop) — auto-generated; do not hand-edit. Rebuild: node build-figma-tokens.mjs <figma-export.css> */
+
+/* Collection: Platform — Mode: Laptop only (rebuild drops Mobile / Wide / Tablet) */
+/* Use var(--Dimensions-Thickness-xs) for 1px stroke width; --Stroke-* here is not set to avoid clashing with Theme colour tokens. */
+:root {
+  --Gap-buddy: var(--Dimensions-Space-z);
+  --Gap-parentChild: var(--Dimensions-Space-s);
+  --Gap-sibling: var(--Dimensions-Space-l);
+  --Gap-zero-buddy: var(--Dimensions-Space-zs);
+  --Gap-group: var(--Dimensions-Space-xl);
+  --Gap-zero-parentChild: var(--Dimensions-Space-xs2);
+  --Gap-neighbor: var(--Dimensions-Space-s);
+  --Gap-one-buddy: var(--Dimensions-Space-xs3);
+  --Gap-boundary: var(--Dimensions-Space-xl);
+  --Gap-spacer: var(--Dimensions-Space-xl);
+  --Gap-zero-neighbor: var(--Dimensions-Space-xs2);
+  --Gap-one-parentChild: var(--Dimensions-Space-xl);
+  --Padding-buddy: var(--Dimensions-Space-xs2);
+  --Padding-buddyVertical: var(--Dimensions-Space-xs3);
+  --Padding-neighbor: var(--Dimensions-Space-s);
+  --Padding-spacer: var(--Dimensions-Space-s);
+  --Padding-parentChild: var(--Dimensions-Space-l);
+  --Padding-parentChildVertical: var(--Dimensions-Space-s);
+  --Padding-sibling: var(--Dimensions-Space-l);
+  --Padding-boundary: var(--Dimensions-Space-m);
+  --Padding-zero-buddy: var(--Dimensions-Space-xs4);
+  --Padding-zero-neighbor: var(--Dimensions-Space-xs2);
+  --Padding-zero-sibling: var(--Dimensions-Space-xs2);
+  --Padding-zero-boundary: var(--Dimensions-Space-xs2);
+  --Padding-zero-spacer: var(--Dimensions-Space-xs);
+  --Padding-zero-parentChild: var(--Dimensions-Space-s);
+  --Padding-one-buddy: var(--Dimensions-Space-xs2);
+  --Padding-one-neighbor: var(--Dimensions-Space-xl);
+  --Padding-one-parentChild: var(--Dimensions-Space-xl);
+  --Padding-one-sibling: var(--Dimensions-Space-xl2);
+  --Padding-one-boundary: var(--Dimensions-Space-xl3);
+  --Padding-one-spacer: var(--Dimensions-Space-xl5);
+  --Corner-slightlyRounded: var(--Dimensions-Radius-xs);
+  --Gap-zero-sibling: var(--Dimensions-Space-xs);
+  --Gap-zero-group: var(--Dimensions-Space-s);
+  --Gap-zero-boundary: var(--Dimensions-Space-s);
+  --Gap-zero-spacer: var(--Dimensions-Space-s);
+  --Corner-moderatelyRounded: var(--Dimensions-Radius-xs);
+  --Gap-one-neighbor: var(--Dimensions-Space-xl);
+  --Gap-one-sibling: var(--Dimensions-Space-xl2);
+  --Gap-one-group: var(--Dimensions-Space-xl3);
+  --Gap-one-boundary: var(--Dimensions-Space-xl4);
+  --Gap-one-spacer: var(--Dimensions-Space-xl4);
+  --Corner-highlyRounded: var(--Dimensions-Radius-s);
+  --Corner-rounded: var(--Dimensions-Radius-m);
+  --Corner-fullyrounded: var(--Dimensions-Radius-r);
+  --Size-dot: var(--Dimensions-Size-xs4);
+  --Size-indicator: var(--Dimensions-Size-xs4);
+  --Size-avatar: var(--Dimensions-Size-xl3);
+  --Size-zero-icon: var(--Dimensions-Size-s);
+  --Size-zero-dot: var(--Dimensions-Size-xs5);
+  --Size-zero-windowControls: var(--Dimensions-Size-s);
+  --Size-one-icon: var(--Dimensions-Size-x2);
+  --Size-one-avatar: var(--Dimensions-Size-xl7);
+  --Size-two-icon: var(--Dimensions-Size-xl3);
+  --Size-three-icon: var(--Dimensions-Size-xl4);
+  --Size-three-logo: var(--Dimensions-Size-xl6);
+  --Size-icon: var(--Dimensions-Size-l);
+  --Grids-one: var(--Dimensions-LargeSize-lp1);
+  --Grids-two: var(--Dimensions-LargeSize-lp2);
+  --Grids-three: var(--Dimensions-LargeSize-lp3);
+  --Grids-four: var(--Dimensions-LargeSize-lp4);
+  --Grids-five: var(--Dimensions-LargeSize-lp5);
+  --Grids-six: var(--Dimensions-LargeSize-lp6);
+  --Screens-width: var(--Dimensions-LargeSize-lpw);
+  --Grids-nine: var(--Dimensions-LargeSize-lp9);
+  --Screens-height: var(--Dimensions-LargeSize-lph);
+  --Stroke-icon: var(--Dimensions-Thickness-s);
+  --Screens-maxWidth: var(--Dimensions-LargeSize-lp12);
+  --Font-Brand-size: var(--Dimensions-Size-xl3);
+  --Font-Brand-lineHeight: var(--Dimensions-Size-xl4);
+  --Font-Displayheading-large: var(--Dimensions-Size-xl6);
+  --Font-Displayheading-standard: var(--Dimensions-Size-xl5);
+  --Font-Displayheading-small: var(--Dimensions-Size-xl4);
+  --Font-Displayheading-Lineheight-large: var(--Dimensions-Size-xl7);
+  --Font-Displayheading-Lineheight-standard: var(--Dimensions-Size-xl6);
+  --Font-Displayheading-Lineheight-small: var(--Dimensions-Size-xl5);
+  --Font-Headline-large: var(--Dimensions-Size-xl5);
+  --Font-Headline-standard: var(--Dimensions-Size-xl4);
+  --Font-Headline-small: var(--Dimensions-Size-xl);
+  --Font-Headline-Lineheight-large: var(--Dimensions-Size-xl6);
+  --Font-Headline-Lineheight-standard: var(--Dimensions-Size-xl5);
+  --Font-Headline-Lineheight-small: var(--Dimensions-Size-xl4);
+  --Font-Title-large: var(--Dimensions-Size-x2);
+  --Font-Title-standard: var(--Dimensions-Size-l);
+  --Font-Title-small: var(--Dimensions-Size-m);
+  --Font-Title-tiny: var(--Dimensions-Size-s);
+  --Font-Title-Lineheight-large: var(--Dimensions-Size-xl3);
+  --Font-Title-Lineheight-standard: var(--Dimensions-Size-x2);
+  --Font-Title-Lineheight-small: var(--Dimensions-Size-l);
+  --Font-Title-Lineheight-tiny: var(--Dimensions-Size-m);
+  --Font-Label-large: var(--Dimensions-Size-l);
+  --Font-Label-standard: var(--Dimensions-Size-m);
+  --Font-Label-small: var(--Dimensions-Size-s);
+  --Font-Label-tiny: var(--Dimensions-Size-xs);
+  --Font-Label-micro: var(--Dimensions-Size-xs4);
+  --Font-Label-Lineheight-large: var(--Dimensions-Size-xl3);
+  --Font-Label-Lineheight-standard: var(--Dimensions-Size-x2);
+  --Font-Label-Lineheight-small: var(--Dimensions-Size-l);
+  --Font-Label-Lineheight-tiny: var(--Dimensions-Size-m);
+  --Font-Label-Lineheight-micro: var(--Dimensions-Size-s);
+  --Font-Body-large: var(--Dimensions-Size-l);
+  --Font-Body-standard: var(--Dimensions-Size-m);
+  --Font-Body-small: var(--Dimensions-Size-s);
+  --Font-Body-tiny: var(--Dimensions-Size-xs);
+  --Font-Body-Lineheight-large: var(--Dimensions-Size-xl3);
+  --Font-Body-Lineheight-standard: var(--Dimensions-Size-x2);
+  --Font-Body-Lineheight-small: var(--Dimensions-Size-l);
+  --Font-Body-Lineheight-tiny: var(--Dimensions-Size-m);
+  --Font-Weight-light: var(--Dimensions-Weight-s);
+  --Font-Weight-regular: var(--Dimensions-Weight-r);
+  --Font-Weight-medium: var(--Dimensions-Weight-m);
+  --Font-Weight-semiBold: var(--Dimensions-Weight-l);
+  --Font-Weight-bold: var(--Dimensions-Weight-xl);
+  --Font-Weight-extraBold: var(--Dimensions-Weight-xl2);
+  --Size-overlay: var(--Dimensions-LargeSize-overlayWide);
+  --Beam-Width-b1: var(--Dimensions-LargeSize-beam1);
+  --GridUnits-Web-count: var(--Dimensions-Grid-m);
+  --GridUnits-Web-margin: var(--Dimensions-Grid-l);
+  --GridUnits-Web-gutter: var(--Dimensions-Grid-m);
+  --GridUnits-Wide-count: var(--Dimensions-Grid-m);
+  --GridUnits-Wide-margin: var(--Dimensions-Grid-xl2);
+  --GridUnits-Wide-gutter: var(--Dimensions-Grid-xl);
+  --GridUnits-Mobile-count: var(--Dimensions-Grid-xs);
+  --GridUnits-Mobile-margin: var(--Dimensions-Grid-m);
+  --GridUnits-Mobile-gutter: var(--Dimensions-Grid-s);
+  --Effects-blur: var(--Dimensions-Blur-xs);
+  --Effects-one-blur: var(--Dimensions-Blur-s);
+  --Effects-Shadow-x: var(--Dimensions-Space-z);
+  --Effects-Shadow-one-x: var(--Dimensions-Space-xs);
+  --Effects-Shadow-y: var(--Dimensions-Space-xs4);
+  --Effects-Shadow-one-y: var(--Dimensions-Space-xs3);
+  --Beam-Width-b2: var(--Dimensions-LargeSize-beam2);
+  --Beam-Width-b3: var(--Dimensions-LargeSize-beam4);
+  --Beam-Height-b1: var(--Dimensions-Size-xl11);
+  --Beam-Height-b2: var(--Dimensions-Size-xl12);
+  --Beam-Height-b3: var(--Dimensions-Size-xl13);
+  --Stroke-one-standard: var(--Dimensions-Thickness-m);
+  --Size-logo: var(--Dimensions-Size-xl4);
+  --Size-one-logo: var(--Dimensions-Size-xl12);
+  --Size-one-inputArea: var(--Dimensions-Size-xl10);
+  --Effects-Shadow-two-y: var(--Dimensions-Space-m);
+  --Effects-Shadow-inner-y: var(--Dimensions-Space-zm);
+  --Size-button: var(--Dimensions-Size-xl4);
+  --Size-zero-button: var(--Dimensions-Size-xl3);
+  --Size-one-button: var(--Dimensions-Size-xl5);
+  --Size-one-smart: var(--Dimensions-Size-xl5);
+  --Size-buttonInput: var(--Dimensions-Size-l);
+  --Size-input: var(--Dimensions-Size-xl4);
+  --Size-inputArea: var(--Dimensions-Size-xl9);
+  --Size-zero-input: var(--Dimensions-Size-xl3);
+  --Size-tableBody: var(--Dimensions-Size-xl5);
+  --Size-zero-tableBody: var(--Dimensions-Size-xl4);
+  --Size-tableHeader: var(--Dimensions-Size-xl4);
+  --Size-navigationL2: var(--Dimensions-Size-xl5);
+  --Size-smart: var(--Dimensions-Size-xl4);
+  --Size-bar: var(--Dimensions-Size-xs6);
+  --Size-banner: var(--Dimensions-Size-xl10);
+  --Size-carouselitem: var(--Dimensions-Size-xl14);
+  --Size-marketDepth: var(--Dimensions-Size-xl3);
+  --Size-footerLandscape: var(--Dimensions-LargeSize-lp3);
+  --DeviceScale-scale: var(--Dimensions-ScaleFactor-base);
+  --Stroke-two-standard: var(--Dimensions-Thickness-xl);
+  --Stroke-selected: var(--Dimensions-Thickness-xl2);
+}
+
diff --git a/client/src/styles/tokens/figma-primitives.css b/client/src/styles/tokens/figma-primitives.css
new file mode 100644
index 000000000000..5b9b3d448a75
--- /dev/null
+++ b/client/src/styles/tokens/figma-primitives.css
@@ -0,0 +1,308 @@
+/* Figma Primitives — auto-generated; do not hand-edit. Rebuild: node build-figma-tokens.mjs <figma-export.css> */
+
+:root{
+  /* Collection: Primitives */
+
+  /* Mode: Value */
+  --Colour-Brand-10: rgba(38,56,255,1.00);
+  --Colour-Primary-0: rgba(246,248,255,1.00);
+  --Colour-Brand-20: rgba(169,170,179,1.00);
+  --Colour-Primary-10: rgba(242,244,255,1.00);
+  --Colour-Primary-20: rgba(160,168,255,1.00);
+  --Colour-Primary-30: rgba(36,52,231,1.00);
+  --Colour-Primary-40: rgba(0,17,205,1.00);
+  --Colour-Primary-50: rgba(18,31,165,1.00);
+  --Colour-Primary-60: rgba(0,10,122,1.00);
+  --Colour-Secondary-0: rgba(255,255,255,1.00);
+  --Colour-Secondary-10: rgba(250,250,250,1.00);
+  --Colour-Secondary-20: rgba(247,247,247,1.00);
+  --Colour-Secondary-30: rgba(237,237,237,1.00);
+  --Colour-Secondary-40: rgba(159,159,159,1.00);
+  --Colour-Secondary-50: rgba(109,109,109,1.00);
+  --Colour-Secondary-60: rgba(62,62,62,1.00);
+  --Colour-Secondary-70: rgba(42,42,42,1.00);
+  --Colour-Secondary-80: rgba(34,34,34,1.00);
+  --Colour-Secondary-90: rgba(26,26,26,1.00);
+  --Colour-Secondary-100: rgba(17,17,17,1.00);
+  --Colour-Action-Buy-0: rgba(238,252,241,1.00);
+  --Colour-Action-Buy-10: rgba(235,253,238,1.00);
+  --Colour-Action-Buy-20: rgba(125,219,137,1.00);
+  --Colour-Action-Buy-30: rgba(0,122,39,1.00);
+  --Colour-Action-Buy-40: rgba(12,51,12,1.00);
+  --Colour-Action-Buy-50: rgba(8,33,8,1.00);
+  --Colour-Action-Sell-0: rgba(253,237,237,1.00);
+  --Colour-Action-Sell-10: rgba(255,230,232,1.00);
+  --Colour-Action-Sell-20: rgba(255,119,126,1.00);
+  --Colour-Action-Sell-30: rgba(178,38,2,1.00);
+  --Colour-Action-Sell-40: rgba(85,27,0,1.00);
+  --Colour-Alert-Information-0: rgba(244,250,255,1.00);
+  --Colour-Action-Sell-50: rgba(34,7,7,1.00);
+  --Colour-Alert-Information-10: rgba(240,249,255,1.00);
+  --Colour-Alert-Information-20: rgba(190,234,254,1.00);
+  --Colour-Alert-Information-30: rgba(2,119,182,1.00);
+  --Colour-Alert-Information-40: rgba(7,56,80,1.00);
+  --Colour-Alert-Discovery-0: rgba(254,245,252,1.00);
+  --Colour-Alert-Information-50: rgba(5,30,46,1.00);
+  --Colour-Alert-Discovery-10: rgba(254,241,250,1.00);
+  --Colour-Alert-Discovery-20: rgba(254,205,240,1.00);
+  --Colour-Alert-Discovery-30: rgba(201,13,123,1.00);
+  --Colour-Alert-Discovery-40: rgba(74,6,48,1.00);
+  --Colour-Alert-Discovery-50: rgba(57,4,35,1.00);
+  --Colour-Alert-Success-0: rgba(245,251,247,1.00);
+  --Colour-Alert-Success-10: rgba(241,249,241,1.00);
+  --Colour-Alert-Success-20: rgba(176,255,209,1.00);
+  --Colour-Alert-Success-30: rgba(7,117,55,1.00);
+  --Colour-Alert-Success-40: rgba(0,56,26,1.00);
+  --Colour-Alert-Warning-0: rgba(255,252,243,1.00);
+  --Colour-Alert-Success-50: rgba(12,28,13,1.00);
+  --Colour-Alert-Warning-10: rgba(255,250,235,1.00);
+  --Colour-Alert-Warning-20: rgba(253,248,180,1.00);
+  --Colour-Alert-Warning-30: rgba(157,104,7,1.00);
+  --Colour-Alert-Warning-40: rgba(70,40,10,1.00);
+  --Colour-Alert-Danger-0: rgba(255,249,249,1.00);
+  --Colour-Alert-Warning-50: rgba(43,22,3,1.00);
+  --Colour-Alert-Danger-10: rgba(255,235,235,1.00);
+  --Colour-Alert-Danger-20: rgba(255,191,185,1.00);
+  --Colour-Alert-Danger-30: rgba(162,29,17,1.00);
+  --Colour-Alert-Danger-40: rgba(82,0,29,1.00);
+  --Colour-Alert-Danger-50: rgba(41,0,0,1.00);
+  --Colour-Accent-Violet-0: rgba(251,254,232,1.00);
+  --Colour-Accent-Violet-10: rgba(246,255,194,1.00);
+  --Colour-Accent-Violet-20: rgba(241,255,136,1.00);
+  --Colour-Accent-Violet-30: rgba(241,255,69,1.00);
+  --Colour-Accent-Violet-40: rgba(243,254,39,1.00);
+  --Colour-Accent-Violet-50: rgba(245,253,9,1.00);
+  --Colour-Accent-Violet-60: rgba(237,235,5,1.00);
+  --Colour-Accent-Violet-70: rgba(205,187,1,1.00);
+  --Colour-Accent-Violet-80: rgba(163,135,5,1.00);
+  --Colour-Accent-Violet-90: rgba(114,86,17,1.00);
+  --Colour-Accent-Violet-100: rgba(41,28,3,1.00);
+  --Colour-Accent-Lavender-10: rgba(242,244,255,1.00);
+  --Colour-Accent-Lavender-20: rgba(223,228,255,1.00);
+  --Colour-Accent-Lavender-30: rgba(201,206,255,1.00);
+  --Colour-Accent-Lavender-40: rgba(160,168,255,1.00);
+  --Colour-Accent-Lavender-50: rgba(78,93,255,1.00);
+  --Colour-Accent-Lavender-60: rgba(38,56,255,1.00);
+  --Colour-Accent-Lavender-70: rgba(0,20,249,1.00);
+  --Colour-Accent-Lavender-80: rgba(0,17,205,1.00);
+  --Colour-Accent-Lavender-90: rgba(0,13,161,1.00);
+  --Colour-Accent-Lavender-100: rgba(0,10,122,1.00);
+  --Colour-Accent-Chestnut-10: rgba(242,244,255,1.00);
+  --Colour-Accent-Chestnut-20: rgba(223,228,255,1.00);
+  --Colour-Accent-Chestnut-30: rgba(201,206,255,1.00);
+  --Colour-Accent-Chestnut-40: rgba(160,168,255,1.00);
+  --Colour-Accent-Chestnut-50: rgba(78,93,255,1.00);
+  --Colour-Accent-Chestnut-60: rgba(38,56,255,1.00);
+  --Colour-Accent-Chestnut-70: rgba(0,20,249,1.00);
+  --Colour-Accent-Chestnut-80: rgba(0,17,205,1.00);
+  --Colour-Accent-Chestnut-90: rgba(0,13,161,1.00);
+  --Colour-Accent-Chestnut-100: rgba(0,10,122,1.00);
+  --Colour-Accent-Gold-10: rgba(242,244,255,1.00);
+  --Colour-Accent-Gold-20: rgba(223,228,255,1.00);
+  --Colour-Accent-Gold-30: rgba(201,206,255,1.00);
+  --Colour-Accent-Gold-40: rgba(160,168,255,1.00);
+  --Colour-Accent-Gold-50: rgba(78,93,255,1.00);
+  --Colour-Accent-Gold-60: rgba(38,56,255,1.00);
+  --Colour-Accent-Gold-70: rgba(0,20,249,1.00);
+  --Colour-Accent-Gold-80: rgba(0,17,205,1.00);
+  --Colour-Accent-Gold-90: rgba(0,13,161,1.00);
+  --Colour-Accent-Gold-100: rgba(0,10,122,1.00);
+  --Colour-Accent-Taupe-10: rgba(242,244,255,1.00);
+  --Colour-Accent-Taupe-20: rgba(223,228,255,1.00);
+  --Colour-Accent-Taupe-30: rgba(201,206,255,1.00);
+  --Colour-Accent-Taupe-40: rgba(160,168,255,1.00);
+  --Colour-Accent-Taupe-50: rgba(78,93,255,1.00);
+  --Colour-Accent-Taupe-60: rgba(38,56,255,1.00);
+  --Colour-Accent-Taupe-70: rgba(0,20,249,1.00);
+  --Colour-Accent-Taupe-80: rgba(0,17,205,1.00);
+  --Colour-Accent-Taupe-90: rgba(0,13,161,1.00);
+  --Colour-Accent-Taupe-100: rgba(0,10,122,1.00);
+  --Colour-Accent-Cadet-10: rgba(252,252,252,1.00);
+  --Colour-Accent-Cadet-20: rgba(244,244,244,1.00);
+  --Colour-Accent-Cadet-30: rgba(237,237,237,1.00);
+  --Colour-Accent-Cadet-40: rgba(228,228,228,1.00);
+  --Colour-Accent-Cadet-50: rgba(222,222,222,1.00);
+  --Colour-Accent-Cadet-60: rgba(209,209,209,1.00);
+  --Colour-Accent-Cadet-70: rgba(93,93,93,1.00);
+  --Colour-Accent-Cadet-80: rgba(66,66,66,1.00);
+  --Dimensions-Size-xs6: 4px;
+  --Colour-Accent-Cadet-90: rgba(39,39,39,1.00);
+  --Dimensions-Size-xs5: 6px;
+  --Dimensions-Size-xs4: 8px;
+  --Colour-Accent-Cadet-100: rgba(13,13,13,1.00);
+  --Dimensions-Size-xs3: 9px;
+  --Dimensions-LargeSize-tbw: 834px;
+  --Dimensions-LargeSize-lph: 864px;
+  --Dimensions-LargeSize-wdh: 1080px;
+  --Dimensions-LargeSize-tbh: 1194px;
+  --Dimensions-LargeSize-lpw: 1536px;
+  --Dimensions-LargeSize-wdw: 1920px;
+  --Dimensions-LargeSize-lp1: 93px;
+  --Dimensions-LargeSize-wd1: 114px;
+  --Dimensions-LargeSize-mb5: 135px;
+  --Dimensions-LargeSize-lp2: 198px;
+  --Dimensions-LargeSize-wd2: 241px;
+  --Dimensions-LargeSize-lp3: 303px;
+  --Dimensions-LargeSize-mobile: 360px;
+  --Dimensions-LargeSize-mobilebp: 550px;
+  --Dimensions-LargeSize-overlayStandard: 480px;
+  --Dimensions-LargeSize-overlayWide: 528px;
+  --Dimensions-LargeSize-wd3: 367px;
+  --Dimensions-LargeSize-lp4: 408px;
+  --Dimensions-LargeSize-wd4: 493px;
+  --Dimensions-LargeSize-lp5: 513px;
+  --Dimensions-LargeSize-lp6: 618px;
+  --Dimensions-LargeSize-wd5: 620px;
+  --Dimensions-LargeSize-lp7: 723px;
+  --Dimensions-LargeSize-wd6: 746px;
+  --Dimensions-LargeSize-mbh: 780px;
+  --Dimensions-LargeSize-lp8: 828px;
+  --Dimensions-LargeSize-wd7: 872px;
+  --Dimensions-LargeSize-lp9: 933px;
+  --Dimensions-LargeSize-wd8: 999px;
+  --Dimensions-LargeSize-wd9: 1125px;
+  --Dimensions-LargeSize-lp10: 1038px;
+  --Dimensions-LargeSize-lp11: 1143px;
+  --Dimensions-LargeSize-wd10: 1251px;
+  --Dimensions-LargeSize-lp12: 1280px;
+  --Dimensions-LargeSize-wd11: 1378px;
+  --Dimensions-LargeSize-beam1: 245px;
+  --Dimensions-LargeSize-beam2: 489px;
+  --Dimensions-LargeSize-beam3: 546px;
+  --Dimensions-LargeSize-beam4: 596px;
+  --Dimensions-Size-xs2: 10px;
+  --Dimensions-Size-xs: 11px;
+  --Dimensions-Size-s: 12px;
+  --Dimensions-Size-m: 14px;
+  --Dimensions-Size-l: 16px;
+  --Dimensions-Size-xl: 18px;
+  --Dimensions-Size-x2: 20px;
+  --Dimensions-Size-xl3: 24px;
+  --Dimensions-Size-xl4: 32px;
+  --Dimensions-Size-xl5: 40px;
+  --Dimensions-Size-xl6: 48px;
+  --Dimensions-Size-xl7: 52px;
+  --Dimensions-Size-xl8: 56px;
+  --Dimensions-Size-xl9: 60px;
+  --Dimensions-Space-zm: -2px;
+  --Dimensions-Size-xl10: 111px;
+  --Dimensions-Size-xl11: 120px;
+  --Dimensions-Size-xl12: 180px;
+  --Dimensions-Size-xl13: 240px;
+  --Dimensions-Size-xl14: 336px;
+  --Dimensions-Space-zs: -1px;
+  --Dimensions-Space-z: 0;
+  --Dimensions-Space-xs4: 1px;
+  --Dimensions-Space-xs3: 2px;
+  --Dimensions-Space-xs2: 4px;
+  --Dimensions-Space-xs: 6px;
+  --Dimensions-Space-s: 8px;
+  --Dimensions-Space-m: 10px;
+  --Dimensions-Space-l: 12px;
+  --Dimensions-Space-xl: 16px;
+  --Dimensions-Space-xl2: 20px;
+  --Dimensions-Space-xl3: 24px;
+  --Dimensions-Space-xl4: 32px;
+  --Dimensions-Space-xl5: 48px;
+  --Dimensions-Space-xl6: 64px;
+  --Dimensions-Space-xl7: 80px;
+  --Dimensions-Radius-z: 0;
+  --Dimensions-Radius-xs: 2px;
+  --Dimensions-Radius-s: 4px;
+  --Dimensions-Radius-m: 8px;
+  --Dimensions-Radius-l: 12px;
+  --Dimensions-Radius-xl: 16px;
+  --Dimensions-Radius-xl2: 20px;
+  --Dimensions-Radius-xl3: 24px;
+  --Dimensions-Thickness-z: 0;
+  --Dimensions-Radius-r: 100px;
+  --Dimensions-Thickness-xs: 0.5px;
+  --Dimensions-Thickness-s: 0.75px;
+  --Dimensions-Thickness-m: 1px;
+  --Dimensions-Thickness-l: 1.5px;
+  --Dimensions-Thickness-xl: 2px;
+  --Dimensions-Thickness-xl2: 4px;
+  --Dimensions-Blur-xs2: 0;
+  --Dimensions-Blur-xs: 4px;
+  --Dimensions-Blur-s: 8px;
+  --Dimensions-Blur-m: 12px;
+  --Dimensions-Blur-l: 20px;
+  --Dimensions-Blur-xl: 40px;
+  --Dimensions-Blur-xl2: 80px;
+  --Dimensions-Blur-xl3: 160px;
+  --Dimensions-Grid-xs: 4px;
+  --Dimensions-Grid-s: 8px;
+  --Dimensions-Grid-m: 12px;
+  --Dimensions-Grid-l: 16px;
+  --Dimensions-Grid-xl: 20px;
+  --Dimensions-Grid-xl2: 40px;
+  --Dimensions-Weight-s: 200;
+  --Dimensions-Weight-r: 400;
+  --Dimensions-Weight-m: 500;
+  --Dimensions-Weight-l: 600;
+  --Dimensions-Weight-xl: 700;
+  --Dimensions-Weight-xl2: 800;
+  --Dimensions-ScaleFactor-base: 1;
+  --Dimensions-ScaleFactor-medium: 1.15;
+  --Colour-Graphic-Blue-10: rgba(242,244,255,1.00);
+  --Colour-Graphic-Blue-20: rgba(212,215,255,1.00);
+  --Colour-Graphic-Blue-30: rgba(168,175,255,1.00);
+  --Colour-Graphic-Blue-40: rgba(81,96,255,1.00);
+  --Colour-Graphic-Blue-50: rgba(38,56,255,1.00);
+  --Colour-Graphic-Blue-60: rgba(37,52,211,1.00);
+  --Colour-Graphic-Blue-70: rgba(36,43,122,1.00);
+  --Colour-Graphic-Blue-80: rgba(35,38,78,1.00);
+  --Colour-Graphic-Blue-90: rgba(34,34,34,1.00);
+  --Colour-Graphic-Neutral-10: rgba(255,255,255,1.00);
+  --Colour-Graphic-Neutral-20: rgba(233,233,233,1.00);
+  --Colour-Graphic-Neutral-30: rgba(122,122,122,1.00);
+  --Colour-Graphic-Neutral-40: rgba(56,56,56,1.00);
+  --Colour-Graphic-Neutral-50: rgba(34,34,34,1.00);
+  --Colour-Graphic-Yellow-10: rgba(254,255,246,1.00);
+  --Colour-Graphic-Yellow-20: rgba(252,255,218,1.00);
+  --Colour-Graphic-Yellow-30: rgba(248,255,162,1.00);
+  --Colour-Graphic-Yellow-40: rgba(244,255,106,1.00);
+  --Colour-Graphic-Yellow-50: rgba(241,255,69,1.00);
+  --Colour-Graphic-Yellow-60: rgba(200,211,62,1.00);
+  --Colour-Graphic-Yellow-70: rgba(137,144,52,1.00);
+  --Colour-Graphic-Yellow-80: rgba(75,78,41,1.00);
+  --Colour-Graphic-Yellow-90: rgba(44,45,36,1.00);
+  --Colour-Data-Petal-0: rgba(255,244,246,1.00);
+  --Colour-Data-Petal-10: rgba(255,233,238,1.00);
+  --Colour-Data-Petal-20: rgba(252,165,179,1.00);
+  --Colour-Data-Petal-30: rgba(225,29,72,1.00);
+  --Colour-Data-Petal-40: rgba(106,10,35,1.00);
+  --Colour-Data-Petal-50: rgba(87,6,30,1.00);
+  --Colour-Data-Iris-0: rgba(249,247,255,1.00);
+  --Colour-Data-Ember-0: rgba(255,250,248,1.00);
+  --Colour-Data-Ember-10: rgba(255,239,230,1.00);
+  --Colour-Data-Ember-20: rgba(250,193,166,1.00);
+  --Colour-Data-Ember-30: rgba(226,78,39,1.00);
+  --Colour-Data-Ember-40: rgba(105,31,12,1.00);
+  --Colour-Data-Ember-50: rgba(90,22,7,1.00);
+  --Colour-Data-Iris-10: rgba(237,232,255,1.00);
+  --Colour-Data-Iris-20: rgba(201,184,255,1.00);
+  --Colour-Data-Iris-30: rgba(105,38,255,1.00);
+  --Colour-Data-Iris-40: rgba(52,0,163,1.00);
+  --Colour-Data-Iris-50: rgba(23,18,48,1.00);
+  --Colour-Data-Lagoon-0: rgba(242,251,251,1.00);
+  --Colour-Data-Lagoon-10: rgba(223,243,243,1.00);
+  --Colour-Data-Lagoon-20: rgba(165,228,228,1.00);
+  --Colour-Data-Lagoon-30: rgba(0,131,131,1.00);
+  --Colour-Data-Lagoon-40: rgba(0,54,54,1.00);
+  --Colour-Data-Lagoon-50: rgba(0,47,47,1.00);
+  --Colour-Data-Leather-0: rgba(251,248,244,1.00);
+  --Colour-Data-Leather-10: rgba(242,236,230,1.00);
+  --Colour-Data-Leather-20: rgba(212,191,168,1.00);
+  --Colour-Data-Leather-30: rgba(147,121,98,1.00);
+  --Colour-Data-Leather-40: rgba(94,79,62,1.00);
+  --Colour-Data-Leather-50: rgba(47,39,32,1.00);
+  --Colour-Shadow-10: rgba(237,237,237,1.00);
+  --Colour-Shadow-20: rgba(159,159,159,1.00);
+  --Colour-Shadow-30: rgba(159,159,159,0.30);
+  --Colour-Shadow-40: rgba(0,0,0,0.80);
+  --Colour-Prime-0: rgba(17,17,17,0.50);
+  --Colour-Prime-10: rgba(42,42,42,0.70);
+  --Colour-Prime-Primary-0: rgba(18,31,165,0.50);
+  --Colour-Prime-Primary-10: rgba(160,168,255,0.50);
+}
diff --git a/client/src/styles/tokens/figma-tailwind-colors.cjs b/client/src/styles/tokens/figma-tailwind-colors.cjs
new file mode 100644
index 000000000000..30bb72570f92
--- /dev/null
+++ b/client/src/styles/tokens/figma-tailwind-colors.cjs
@@ -0,0 +1,2 @@
+// Auto-generated with build-figma-tokens.mjs (theme semantic var names from Light mode)
+module.exports = { "Avatar-Gradient-one": "var(--Avatar-Gradient-one)", "Avatar-Gradient-two": "var(--Avatar-Gradient-two)", "Avatar-fill": "var(--Avatar-fill)", "Avatar-text": "var(--Avatar-text)", "Beam-B4": "var(--Beam-B4)", "Beam-b1": "var(--Beam-b1)", "Beam-b2": "var(--Beam-b2)", "Beam-b3": "var(--Beam-b3)", "Brand-color": "var(--Brand-color)", "Brand-text": "var(--Brand-text)", "Font-Badge-neutral": "var(--Font-Badge-neutral)", "Font-Badge-primary": "var(--Font-Badge-primary)", "Font-Banner-Action-buy": "var(--Font-Banner-Action-buy)", "Font-Banner-Action-sell": "var(--Font-Banner-Action-sell)", "Font-Banner-Alert-danger": "var(--Font-Banner-Alert-danger)", "Font-Banner-Alert-discovery": "var(--Font-Banner-Alert-discovery)", "Font-Banner-Alert-information": "var(--Font-Banner-Alert-information)", "Font-Banner-Alert-success": "var(--Font-Banner-Alert-success)", "Font-Banner-Alert-warning": "var(--Font-Banner-Alert-warning)", "Font-Button-Action-Buy-primary": "var(--Font-Button-Action-Buy-primary)", "Font-Button-Action-Buy-secondary": "var(--Font-Button-Action-Buy-secondary)", "Font-Button-Action-Sell-primary": "var(--Font-Button-Action-Sell-primary)", "Font-Button-Action-Sell-secondary": "var(--Font-Button-Action-Sell-secondary)", "Font-Button-Alert-Secondary-danger": "var(--Font-Button-Alert-Secondary-danger)", "Font-Button-Alert-Secondary-discovery": "var(--Font-Button-Alert-Secondary-discovery)", "Font-Button-Alert-Secondary-information": "var(--Font-Button-Alert-Secondary-information)", "Font-Button-Alert-Secondary-success": "var(--Font-Button-Alert-Secondary-success)", "Font-Button-Alert-Secondary-warning": "var(--Font-Button-Alert-Secondary-warning)", "Font-Button-Alert-danger": "var(--Font-Button-Alert-danger)", "Font-Button-Alert-discovery": "var(--Font-Button-Alert-discovery)", "Font-Button-Alert-information": "var(--Font-Button-Alert-information)", "Font-Button-Alert-success": "var(--Font-Button-Alert-success)", "Font-Button-Alert-warning": "var(--Font-Button-Alert-warning)", "Font-Button-Segmented-Primary-disabled": "var(--Font-Button-Segmented-Primary-disabled)", "Font-Button-Segmented-Primary-selected": "var(--Font-Button-Segmented-Primary-selected)", "Font-Button-Segmented-Primary-unselected": "var(--Font-Button-Segmented-Primary-unselected)", "Font-Button-Segmented-Secondary-disabled": "var(--Font-Button-Segmented-Secondary-disabled)", "Font-Button-Segmented-Secondary-selected": "var(--Font-Button-Segmented-Secondary-selected)", "Font-Button-Segmented-Secondary-unselected": "var(--Font-Button-Segmented-Secondary-unselected)", "Font-Button-Tertiary-Danger-hover": "var(--Font-Button-Tertiary-Danger-hover)", "Font-Button-Tertiary-Danger-pressed": "var(--Font-Button-Tertiary-Danger-pressed)", "Font-Button-Tertiary-Danger-standard": "var(--Font-Button-Tertiary-Danger-standard)", "Font-Button-Tertiary-Discovery-hover": "var(--Font-Button-Tertiary-Discovery-hover)", "Font-Button-Tertiary-Discovery-pressed": "var(--Font-Button-Tertiary-Discovery-pressed)", "Font-Button-Tertiary-Discovery-standard": "var(--Font-Button-Tertiary-Discovery-standard)", "Font-Button-Tertiary-Information-hover": "var(--Font-Button-Tertiary-Information-hover)", "Font-Button-Tertiary-Information-pressed": "var(--Font-Button-Tertiary-Information-pressed)", "Font-Button-Tertiary-Information-standard": "var(--Font-Button-Tertiary-Information-standard)", "Font-Button-Tertiary-Standard-hover": "var(--Font-Button-Tertiary-Standard-hover)", "Font-Button-Tertiary-Standard-pressed": "var(--Font-Button-Tertiary-Standard-pressed)", "Font-Button-Tertiary-Standard-standard": "var(--Font-Button-Tertiary-Standard-standard)", "Font-Button-Tertiary-Success-hover": "var(--Font-Button-Tertiary-Success-hover)", "Font-Button-Tertiary-Success-pressed": "var(--Font-Button-Tertiary-Success-pressed)", "Font-Button-Tertiary-Success-standard": "var(--Font-Button-Tertiary-Success-standard)", "Font-Button-Tertiary-Warning-hover": "var(--Font-Button-Tertiary-Warning-hover)", "Font-Button-Tertiary-Warning-pressed": "var(--Font-Button-Tertiary-Warning-pressed)", "Font-Button-Tertiary-Warning-standard": "var(--Font-Button-Tertiary-Warning-standard)", "Font-Button-primary": "var(--Font-Button-primary)", "Font-Button-secondary": "var(--Font-Button-secondary)", "Font-Chip-active": "var(--Font-Chip-active)", "Font-Chip-hover": "var(--Font-Chip-hover)", "Font-Chip-standard": "var(--Font-Chip-standard)", "Font-Input-error": "var(--Font-Input-error)", "Font-Input-hint": "var(--Font-Input-hint)", "Font-Input-label": "var(--Font-Input-label)", "Font-Input-placeholder": "var(--Font-Input-placeholder)", "Font-Input-standard": "var(--Font-Input-standard)", "Font-Input-support": "var(--Font-Input-support)", "Font-Navigation-L1-active": "var(--Font-Navigation-L1-active)", "Font-Navigation-L1-standard": "var(--Font-Navigation-L1-standard)", "Font-Navigation-L2-active": "var(--Font-Navigation-L2-active)", "Font-Navigation-L2-standard": "var(--Font-Navigation-L2-standard)", "Font-Option-chain-Analysis-tag-high": "var(--Font-Option-chain-Analysis-tag-high)", "Font-Option-chain-Analysis-tag-low": "var(--Font-Option-chain-Analysis-tag-low)", "Font-Option-chain-spotIndicator": "var(--Font-Option-chain-spotIndicator)", "Font-Slider-body": "var(--Font-Slider-body)", "Font-Slider-label": "var(--Font-Slider-label)", "Font-Snackbar-acknowledged": "var(--Font-Snackbar-acknowledged)", "Font-Snackbar-executed": "var(--Font-Snackbar-executed)", "Font-Snackbar-partial": "var(--Font-Snackbar-partial)", "Font-Snackbar-pending": "var(--Font-Snackbar-pending)", "Font-Snackbar-rejected": "var(--Font-Snackbar-rejected)", "Font-Tab-active": "var(--Font-Tab-active)", "Font-Tab-hover": "var(--Font-Tab-hover)", "Font-Tab-standard": "var(--Font-Tab-standard)", "Font-Tag-active": "var(--Font-Tag-active)", "Font-Tag-hover": "var(--Font-Tag-hover)", "Font-Tag-standard": "var(--Font-Tag-standard)", "Font-Toggle-action": "var(--Font-Toggle-action)", "Font-Toggle-standard": "var(--Font-Toggle-standard)", "Font-Tooltip-standard": "var(--Font-Tooltip-standard)", "Graphic-electric-five": "var(--Graphic-electric-five)", "Graphic-electric-four": "var(--Graphic-electric-four)", "Graphic-electric-one": "var(--Graphic-electric-one)", "Graphic-electric-three": "var(--Graphic-electric-three)", "Graphic-electric-two": "var(--Graphic-electric-two)", "Graphic-primary-four": "var(--Graphic-primary-four)", "Graphic-primary-one": "var(--Graphic-primary-one)", "Graphic-primary-three": "var(--Graphic-primary-three)", "Graphic-primary-two": "var(--Graphic-primary-two)", "Graphic-secondary-five": "var(--Graphic-secondary-five)", "Graphic-secondary-four": "var(--Graphic-secondary-four)", "Graphic-secondary-one": "var(--Graphic-secondary-one)", "Graphic-secondary-three": "var(--Graphic-secondary-three)", "Graphic-secondary-two": "var(--Graphic-secondary-two)", "Graphic-stroke-electric": "var(--Graphic-stroke-electric)", "Graphic-stroke-one-primary": "var(--Graphic-stroke-one-primary)", "Graphic-stroke-one-secondary": "var(--Graphic-stroke-one-secondary)", "Graphic-stroke-one-three": "var(--Graphic-stroke-one-three)", "Graphic-stroke-primary": "var(--Graphic-stroke-primary)", "Graphic-stroke-secondary": "var(--Graphic-stroke-secondary)", "Graphic-stroke-two-electric": "var(--Graphic-stroke-two-electric)", "Graphic-stroke-two-primary": "var(--Graphic-stroke-two-primary)", "Graphic-stroke-two-secondary": "var(--Graphic-stroke-two-secondary)", "Graphic-stroke-zero-electric": "var(--Graphic-stroke-zero-electric)", "Graphic-stroke-zero-primary": "var(--Graphic-stroke-zero-primary)", "Graphic-stroke-zero-secondary": "var(--Graphic-stroke-zero-secondary)", "Logo-App-step-4": "var(--Logo-App-step-4)", "Logo-App-step1": "var(--Logo-App-step1)", "Logo-App-step2": "var(--Logo-App-step2)", "Logo-App-step3": "var(--Logo-App-step3)", "OptionChain-call": "var(--OptionChain-call)", "OptionChain-indicatorDown": "var(--OptionChain-indicatorDown)", "OptionChain-indicatorUp": "var(--OptionChain-indicatorUp)", "Shadow-emphasis": "var(--Shadow-emphasis)", "Shadow-inner": "var(--Shadow-inner)", "Shadow-standard": "var(--Shadow-standard)", "Stroke-cadet": "var(--Stroke-cadet)", "Stroke-chestnut": "var(--Stroke-chestnut)", "Stroke-danger": "var(--Stroke-danger)", "Stroke-discovery": "var(--Stroke-discovery)", "Stroke-down": "var(--Stroke-down)", "Stroke-ember": "var(--Stroke-ember)", "Stroke-gold": "var(--Stroke-gold)", "Stroke-information": "var(--Stroke-information)", "Stroke-inverse": "var(--Stroke-inverse)", "Stroke-iris": "var(--Stroke-iris)", "Stroke-lagoon": "var(--Stroke-lagoon)", "Stroke-lavender": "var(--Stroke-lavender)", "Stroke-leather": "var(--Stroke-leather)", "Stroke-neutral": "var(--Stroke-neutral)", "Stroke-one-soft": "var(--Stroke-one-soft)", "Stroke-petal": "var(--Stroke-petal)", "Stroke-primary": "var(--Stroke-primary)", "Stroke-soft": "var(--Stroke-soft)", "Stroke-standard": "var(--Stroke-standard)", "Stroke-success": "var(--Stroke-success)", "Stroke-up": "var(--Stroke-up)", "Stroke-warning": "var(--Stroke-warning)", "Stroke-yellow": "var(--Stroke-yellow)", "Stroke-zero-danger": "var(--Stroke-zero-danger)", "Stroke-zero-primary": "var(--Stroke-zero-primary)", "Stroke-zero-warning": "var(--Stroke-zero-warning)", "Subject-cadet": "var(--Subject-cadet)", "Subject-chestnut": "var(--Subject-chestnut)", "Subject-danger": "var(--Subject-danger)", "Subject-discovery": "var(--Subject-discovery)", "Subject-down": "var(--Subject-down)", "Subject-ember": "var(--Subject-ember)", "Subject-gold": "var(--Subject-gold)", "Subject-information": "var(--Subject-information)", "Subject-inverse": "var(--Subject-inverse)", "Subject-iris": "var(--Subject-iris)", "Subject-lagoon": "var(--Subject-lagoon)", "Subject-lavender": "var(--Subject-lavender)", "Subject-leather": "var(--Subject-leather)", "Subject-neutral": "var(--Subject-neutral)", "Subject-one-cadet": "var(--Subject-one-cadet)", "Subject-one-chestnut": "var(--Subject-one-chestnut)", "Subject-one-danger": "var(--Subject-one-danger)", "Subject-one-discovery": "var(--Subject-one-discovery)", "Subject-one-down": "var(--Subject-one-down)", "Subject-one-ember": "var(--Subject-one-ember)", "Subject-one-gold": "var(--Subject-one-gold)", "Subject-one-information": "var(--Subject-one-information)", "Subject-one-iris": "var(--Subject-one-iris)", "Subject-one-lagoon": "var(--Subject-one-lagoon)", "Subject-one-lavender": "var(--Subject-one-lavender)", "Subject-one-leather": "var(--Subject-one-leather)", "Subject-one-neutral": "var(--Subject-one-neutral)", "Subject-one-petal": "var(--Subject-one-petal)", "Subject-one-primary": "var(--Subject-one-primary)", "Subject-one-soft": "var(--Subject-one-soft)", "Subject-one-standard": "var(--Subject-one-standard)", "Subject-one-success": "var(--Subject-one-success)", "Subject-one-taupe": "var(--Subject-one-taupe)", "Subject-one-up": "var(--Subject-one-up)", "Subject-one-warning": "var(--Subject-one-warning)", "Subject-one-yellow": "var(--Subject-one-yellow)", "Subject-petal": "var(--Subject-petal)", "Subject-primary": "var(--Subject-primary)", "Subject-soft": "var(--Subject-soft)", "Subject-standard": "var(--Subject-standard)", "Subject-success": "var(--Subject-success)", "Subject-taupe": "var(--Subject-taupe)", "Subject-three-chestnut": "var(--Subject-three-chestnut)", "Subject-three-neutral": "var(--Subject-three-neutral)", "Subject-three-standard": "var(--Subject-three-standard)", "Subject-two-cadet": "var(--Subject-two-cadet)", "Subject-two-chestnut": "var(--Subject-two-chestnut)", "Subject-two-danger": "var(--Subject-two-danger)", "Subject-two-discovery": "var(--Subject-two-discovery)", "Subject-two-down": "var(--Subject-two-down)", "Subject-two-ember": "var(--Subject-two-ember)", "Subject-two-gold": "var(--Subject-two-gold)", "Subject-two-information": "var(--Subject-two-information)", "Subject-two-iris": "var(--Subject-two-iris)", "Subject-two-lagoon": "var(--Subject-two-lagoon)", "Subject-two-lavender": "var(--Subject-two-lavender)", "Subject-two-leather": "var(--Subject-two-leather)", "Subject-two-neutral": "var(--Subject-two-neutral)", "Subject-two-petal": "var(--Subject-two-petal)", "Subject-two-primary": "var(--Subject-two-primary)", "Subject-two-success": "var(--Subject-two-success)", "Subject-two-taupe": "var(--Subject-two-taupe)", "Subject-two-up": "var(--Subject-two-up)", "Subject-two-warning": "var(--Subject-two-warning)", "Subject-two-yellow": "var(--Subject-two-yellow)", "Subject-up": "var(--Subject-up)", "Subject-warning": "var(--Subject-warning)", "Subject-yellow": "var(--Subject-yellow)", "Surface-cadet": "var(--Surface-cadet)", "Surface-chestnut": "var(--Surface-chestnut)", "Surface-danger": "var(--Surface-danger)", "Surface-discovery": "var(--Surface-discovery)", "Surface-down": "var(--Surface-down)", "Surface-ember": "var(--Surface-ember)", "Surface-gold": "var(--Surface-gold)", "Surface-information": "var(--Surface-information)", "Surface-inverse": "var(--Surface-inverse)", "Surface-iris": "var(--Surface-iris)", "Surface-lagoon": "var(--Surface-lagoon)", "Surface-lavender": "var(--Surface-lavender)", "Surface-leather": "var(--Surface-leather)", "Surface-neutral": "var(--Surface-neutral)", "Surface-one-cadet": "var(--Surface-one-cadet)", "Surface-one-chestnut": "var(--Surface-one-chestnut)", "Surface-one-danger": "var(--Surface-one-danger)", "Surface-one-discovery": "var(--Surface-one-discovery)", "Surface-one-down": "var(--Surface-one-down)", "Surface-one-ember": "var(--Surface-one-ember)", "Surface-one-gold": "var(--Surface-one-gold)", "Surface-one-information": "var(--Surface-one-information)", "Surface-one-iris": "var(--Surface-one-iris)", "Surface-one-lagoon": "var(--Surface-one-lagoon)", "Surface-one-lavender": "var(--Surface-one-lavender)", "Surface-one-leather": "var(--Surface-one-leather)", "Surface-one-neutral": "var(--Surface-one-neutral)", "Surface-one-petal": "var(--Surface-one-petal)", "Surface-one-primary": "var(--Surface-one-primary)", "Surface-one-standard": "var(--Surface-one-standard)", "Surface-one-success": "var(--Surface-one-success)", "Surface-one-taupe": "var(--Surface-one-taupe)", "Surface-one-up": "var(--Surface-one-up)", "Surface-one-warning": "var(--Surface-one-warning)", "Surface-one-yellow": "var(--Surface-one-yellow)", "Surface-petal": "var(--Surface-petal)", "Surface-primary": "var(--Surface-primary)", "Surface-standard": "var(--Surface-standard)", "Surface-success": "var(--Surface-success)", "Surface-taupe": "var(--Surface-taupe)", "Surface-three-neutral": "var(--Surface-three-neutral)", "Surface-three-primary": "var(--Surface-three-primary)", "Surface-two-cadet": "var(--Surface-two-cadet)", "Surface-two-chestnut": "var(--Surface-two-chestnut)", "Surface-two-danger": "var(--Surface-two-danger)", "Surface-two-discovery": "var(--Surface-two-discovery)", "Surface-two-down": "var(--Surface-two-down)", "Surface-two-ember": "var(--Surface-two-ember)", "Surface-two-gold": "var(--Surface-two-gold)", "Surface-two-information": "var(--Surface-two-information)", "Surface-two-iris": "var(--Surface-two-iris)", "Surface-two-lagoon": "var(--Surface-two-lagoon)", "Surface-two-lavender": "var(--Surface-two-lavender)", "Surface-two-leather": "var(--Surface-two-leather)", "Surface-two-neutral": "var(--Surface-two-neutral)", "Surface-two-petal": "var(--Surface-two-petal)", "Surface-two-primary": "var(--Surface-two-primary)", "Surface-two-standard": "var(--Surface-two-standard)", "Surface-two-success": "var(--Surface-two-success)", "Surface-two-taupe": "var(--Surface-two-taupe)", "Surface-two-up": "var(--Surface-two-up)", "Surface-two-warning": "var(--Surface-two-warning)", "Surface-two-yellow": "var(--Surface-two-yellow)", "Surface-up": "var(--Surface-up)", "Surface-warning": "var(--Surface-warning)", "Surface-yellow": "var(--Surface-yellow)", "Surface-zero-neutral": "var(--Surface-zero-neutral)", "Text-Action-down": "var(--Text-Action-down)", "Text-Action-up": "var(--Text-Action-up)", "Text-Alert-danger": "var(--Text-Alert-danger)", "Text-Alert-discovery": "var(--Text-Alert-discovery)", "Text-Alert-information": "var(--Text-Alert-information)", "Text-Alert-success": "var(--Text-Alert-success)", "Text-Alert-warning": "var(--Text-Alert-warning)", "Text-Emphasis-label": "var(--Text-Emphasis-label)", "Text-active": "var(--Text-active)", "Text-body": "var(--Text-body)", "Text-heading": "var(--Text-heading)", "Text-label": "var(--Text-label)", "Text-link": "var(--Text-link)", "Text-title": "var(--Text-title)" };
diff --git a/client/src/styles/tokens/figma-theme-semantic.css b/client/src/styles/tokens/figma-theme-semantic.css
new file mode 100644
index 000000000000..2d6538a2511c
--- /dev/null
+++ b/client/src/styles/tokens/figma-theme-semantic.css
@@ -0,0 +1,614 @@
+/* Figma Theme (light + dark) — auto-generated; do not hand-edit. Rebuild: node build-figma-tokens.mjs <figma-export.css> */
+
+/* Collection: Theme — generated from Figma; Light = :root, Dark = html.dark / .dark */
+:root {
+  --Logo-App-step1: var(--Colour-Primary-30);
+  --Logo-App-step2: var(--Colour-Accent-Violet-30);
+  --Logo-App-step3: var(--Colour-Alert-Danger-20);
+  --Logo-App-step-4: var(--Colour-Accent-Gold-40);
+  --Brand-color: var(--Colour-Brand-10);
+  --Subject-one-standard: var(--Colour-Secondary-80);
+  --Subject-one-soft: var(--Colour-Secondary-50);
+  --Brand-text: var(--Colour-Brand-20);
+  --Surface-standard: var(--Colour-Secondary-0);
+  --Surface-inverse: var(--Colour-Secondary-100);
+  --Surface-zero-neutral: var(--Colour-Secondary-10);
+  --Surface-one-standard: var(--Colour-Secondary-20);
+  --Surface-one-neutral: var(--Colour-Secondary-30);
+  --Surface-one-primary: var(--Colour-Primary-10);
+  --Surface-one-information: var(--Colour-Alert-Information-10);
+  --Surface-one-discovery: var(--Colour-Alert-Discovery-10);
+  --Surface-one-success: var(--Colour-Alert-Success-10);
+  --Surface-one-warning: var(--Colour-Alert-Warning-10);
+  --Surface-one-danger: var(--Colour-Alert-Danger-10);
+  --Surface-one-up: var(--Colour-Action-Buy-10);
+  --Surface-one-down: var(--Colour-Action-Sell-10);
+  --Surface-one-gold: var(--Colour-Accent-Gold-20);
+  --Surface-one-lavender: var(--Colour-Accent-Lavender-20);
+  --Surface-one-chestnut: var(--Colour-Accent-Chestnut-20);
+  --Surface-one-taupe: var(--Colour-Accent-Taupe-20);
+  --Surface-one-cadet: var(--Colour-Accent-Cadet-20);
+  --Surface-one-yellow: var(--Colour-Accent-Violet-10);
+  --Surface-one-petal: var(--Colour-Data-Petal-10);
+  --Surface-one-ember: var(--Colour-Data-Ember-10);
+  --Surface-one-iris: var(--Colour-Data-Iris-10);
+  --Surface-one-lagoon: var(--Colour-Data-Lagoon-10);
+  --Surface-one-leather: var(--Colour-Data-Leather-10);
+  --Surface-two-standard: var(--Colour-Secondary-30);
+  --Surface-neutral: var(--Colour-Secondary-20);
+  --Surface-primary: var(--Colour-Primary-0);
+  --Surface-information: var(--Colour-Alert-Information-0);
+  --Surface-discovery: var(--Colour-Alert-Discovery-0);
+  --Surface-success: var(--Colour-Alert-Success-0);
+  --Surface-warning: var(--Colour-Alert-Warning-0);
+  --Surface-danger: var(--Colour-Alert-Danger-0);
+  --Surface-up: var(--Colour-Action-Buy-0);
+  --Surface-down: var(--Colour-Action-Sell-0);
+  --Surface-gold: var(--Colour-Accent-Gold-10);
+  --Surface-lavender: var(--Colour-Accent-Lavender-10);
+  --Surface-chestnut: var(--Colour-Accent-Chestnut-10);
+  --Surface-taupe: var(--Colour-Accent-Taupe-10);
+  --Surface-cadet: var(--Colour-Accent-Cadet-10);
+  --Surface-yellow: var(--Colour-Accent-Violet-0);
+  --Surface-petal: var(--Colour-Data-Petal-0);
+  --Surface-ember: var(--Colour-Data-Ember-0);
+  --Surface-iris: var(--Colour-Data-Iris-0);
+  --Surface-lagoon: var(--Colour-Data-Lagoon-0);
+  --Surface-leather: var(--Colour-Data-Leather-0);
+  --Surface-two-neutral: var(--Colour-Secondary-40);
+  --Surface-three-neutral: var(--Colour-Secondary-60);
+  --Surface-three-primary: var(--Colour-Primary-40);
+  --Surface-two-primary: var(--Colour-Primary-30);
+  --Surface-two-information: var(--Colour-Alert-Information-30);
+  --Surface-two-discovery: var(--Colour-Alert-Discovery-30);
+  --Surface-two-success: var(--Colour-Alert-Success-30);
+  --Surface-two-warning: var(--Colour-Alert-Warning-30);
+  --Surface-two-danger: var(--Colour-Alert-Danger-30);
+  --Surface-two-up: var(--Colour-Action-Buy-30);
+  --Surface-two-down: var(--Colour-Action-Sell-30);
+  --Surface-two-gold: var(--Colour-Accent-Gold-30);
+  --Surface-two-lavender: var(--Colour-Accent-Lavender-30);
+  --Surface-two-chestnut: var(--Colour-Accent-Chestnut-30);
+  --Surface-two-taupe: var(--Colour-Accent-Taupe-30);
+  --Surface-two-cadet: var(--Colour-Accent-Cadet-30);
+  --Surface-two-yellow: var(--Colour-Accent-Violet-50);
+  --Surface-two-petal: var(--Colour-Data-Petal-30);
+  --Surface-two-ember: var(--Colour-Data-Ember-30);
+  --Surface-two-iris: var(--Colour-Data-Iris-30);
+  --Surface-two-lagoon: var(--Colour-Data-Lagoon-30);
+  --Surface-two-leather: var(--Colour-Data-Leather-30);
+  --Subject-one-neutral: var(--Colour-Secondary-60);
+  --Subject-standard: var(--Colour-Secondary-70);
+  --Subject-inverse: var(--Colour-Secondary-0);
+  --Subject-soft: var(--Colour-Secondary-40);
+  --Shadow-inner: var(--Colour-Shadow-10);
+  --Shadow-standard: var(--Colour-Shadow-10);
+  --Shadow-emphasis: var(--Colour-Shadow-30);
+  --Stroke-standard: var(--Colour-Secondary-40);
+  --Stroke-inverse: var(--Colour-Secondary-0);
+  --Stroke-soft: var(--Colour-Secondary-30);
+  --Stroke-neutral: var(--Colour-Secondary-50);
+  --Stroke-primary: var(--Colour-Primary-30);
+  --Beam-b1: var(--Colour-Accent-Gold-10);
+  --Beam-b2: var(--Colour-Accent-Chestnut-20);
+  --Beam-b3: var(--Colour-Accent-Violet-10);
+  --Beam-B4: var(--Colour-Accent-Cadet-20);
+  --Subject-neutral: var(--Colour-Secondary-50);
+  --Subject-primary: var(--Colour-Primary-30);
+  --Subject-information: var(--Colour-Alert-Information-30);
+  --Subject-discovery: var(--Colour-Alert-Discovery-30);
+  --Subject-success: var(--Colour-Alert-Success-30);
+  --Subject-warning: var(--Colour-Alert-Warning-30);
+  --Subject-danger: var(--Colour-Alert-Danger-30);
+  --Subject-up: var(--Colour-Action-Buy-30);
+  --Subject-down: var(--Colour-Action-Sell-30);
+  --Subject-two-neutral: var(--Colour-Secondary-60);
+  --Subject-gold: var(--Colour-Accent-Gold-60);
+  --Subject-one-primary: var(--Colour-Primary-40);
+  --Subject-one-information: var(--Colour-Alert-Information-40);
+  --Subject-one-discovery: var(--Colour-Alert-Discovery-40);
+  --Subject-one-success: var(--Colour-Alert-Success-40);
+  --Subject-one-warning: var(--Colour-Alert-Warning-40);
+  --Subject-one-danger: var(--Colour-Alert-Danger-40);
+  --Subject-one-up: var(--Colour-Action-Buy-40);
+  --Subject-one-down: var(--Colour-Action-Sell-40);
+  --Subject-lavender: var(--Colour-Accent-Lavender-60);
+  --Stroke-cadet: var(--Colour-Secondary-0);
+  --Subject-chestnut: var(--Colour-Accent-Chestnut-60);
+  --Subject-taupe: var(--Colour-Accent-Taupe-60);
+  --Avatar-fill: var(--Colour-Primary-30);
+  --Graphic-primary-one: var(--Colour-Graphic-Blue-10);
+  --Graphic-primary-two: var(--Colour-Graphic-Blue-20);
+  --Graphic-primary-three: var(--Colour-Graphic-Blue-30);
+  --Graphic-primary-four: var(--Colour-Graphic-Blue-40);
+  --Avatar-text: var(--Colour-Secondary-0);
+  --Avatar-Gradient-one: var(--Colour-Accent-Lavender-50);
+  --Avatar-Gradient-two: var(--Colour-Accent-Lavender-20);
+  --Text-heading: var(--Colour-Secondary-100);
+  --Text-title: var(--Colour-Secondary-80);
+  --Text-body: var(--Colour-Secondary-60);
+  --Text-label: var(--Colour-Secondary-50);
+  --Text-Emphasis-label: var(--Colour-Secondary-50);
+  --Text-link: var(--Colour-Primary-30);
+  --Text-active: var(--Colour-Primary-30);
+  --Text-Alert-information: var(--Colour-Alert-Information-30);
+  --Text-Alert-discovery: var(--Colour-Alert-Discovery-30);
+  --Text-Alert-success: var(--Colour-Alert-Success-30);
+  --Text-Alert-warning: var(--Colour-Alert-Warning-30);
+  --Text-Alert-danger: var(--Colour-Alert-Danger-30);
+  --Subject-cadet: var(--Colour-Accent-Cadet-70);
+  --Subject-yellow: var(--Colour-Accent-Violet-60);
+  --Subject-petal: var(--Colour-Data-Petal-30);
+  --Subject-ember: var(--Colour-Data-Ember-30);
+  --Subject-iris: var(--Colour-Data-Iris-30);
+  --Subject-lagoon: var(--Colour-Data-Lagoon-30);
+  --Subject-leather: var(--Colour-Data-Leather-30);
+  --Subject-one-gold: var(--Colour-Accent-Gold-70);
+  --Subject-one-lavender: var(--Colour-Accent-Lavender-70);
+  --Subject-one-chestnut: var(--Colour-Accent-Chestnut-70);
+  --Stroke-chestnut: var(--Colour-Accent-Chestnut-20);
+  --Stroke-lavender: var(--Colour-Accent-Lavender-30);
+  --Stroke-gold: var(--Colour-Accent-Gold-40);
+  --Subject-one-taupe: var(--Colour-Accent-Taupe-70);
+  --Subject-one-cadet: var(--Colour-Accent-Cadet-70);
+  --Subject-one-yellow: var(--Colour-Accent-Violet-70);
+  --Subject-one-petal: var(--Colour-Data-Petal-40);
+  --Subject-one-ember: var(--Colour-Data-Ember-40);
+  --Subject-one-iris: var(--Colour-Data-Iris-40);
+  --Subject-one-lagoon: var(--Colour-Data-Lagoon-40);
+  --Subject-one-leather: var(--Colour-Data-Leather-40);
+  --Subject-three-standard: var(--Colour-Secondary-0);
+  --Text-Action-up: var(--Colour-Action-Buy-30);
+  --Text-Action-down: var(--Colour-Action-Sell-30);
+  --Font-Button-Tertiary-Standard-standard: var(--Colour-Primary-30);
+  --Font-Button-Tertiary-Standard-hover: var(--Colour-Primary-40);
+  --Font-Button-Tertiary-Standard-pressed: var(--Colour-Primary-40);
+  --Font-Button-Tertiary-Information-standard: var(--Colour-Alert-Information-30);
+  --Font-Button-Tertiary-Information-hover: var(--Colour-Alert-Information-40);
+  --Font-Button-Tertiary-Information-pressed: var(--Colour-Alert-Information-40);
+  --Font-Button-Tertiary-Success-standard: var(--Colour-Alert-Success-30);
+  --Font-Button-Tertiary-Success-hover: var(--Colour-Alert-Success-40);
+  --Font-Button-Tertiary-Success-pressed: var(--Colour-Alert-Success-40);
+  --Font-Button-Tertiary-Warning-standard: var(--Colour-Alert-Warning-30);
+  --Font-Button-Tertiary-Warning-hover: var(--Colour-Alert-Warning-40);
+  --Font-Button-Tertiary-Warning-pressed: var(--Colour-Alert-Warning-40);
+  --Font-Button-Tertiary-Danger-standard: var(--Colour-Alert-Danger-30);
+  --Font-Button-Tertiary-Danger-hover: var(--Colour-Alert-Danger-40);
+  --Font-Button-Tertiary-Danger-pressed: var(--Colour-Alert-Danger-40);
+  --Font-Button-Tertiary-Discovery-standard: var(--Colour-Alert-Discovery-30);
+  --Font-Button-Tertiary-Discovery-hover: var(--Colour-Alert-Discovery-40);
+  --Font-Button-Tertiary-Discovery-pressed: var(--Colour-Alert-Discovery-40);
+  --Font-Button-primary: var(--Colour-Primary-10);
+  --Font-Button-secondary: var(--Colour-Secondary-60);
+  --Font-Button-Action-Buy-primary: var(--Colour-Action-Buy-0);
+  --Font-Button-Action-Buy-secondary: var(--Colour-Action-Buy-40);
+  --Font-Button-Action-Sell-primary: var(--Colour-Action-Sell-0);
+  --Font-Button-Action-Sell-secondary: var(--Colour-Action-Sell-40);
+  --Font-Button-Alert-information: var(--Colour-Alert-Information-10);
+  --Font-Button-Alert-Secondary-information: var(--Colour-Alert-Information-40);
+  --Font-Button-Alert-Secondary-discovery: var(--Colour-Alert-Discovery-40);
+  --Font-Button-Alert-Secondary-warning: var(--Colour-Alert-Warning-40);
+  --Font-Button-Alert-Secondary-danger: var(--Colour-Alert-Danger-40);
+  --Font-Button-Alert-Secondary-success: var(--Colour-Alert-Success-40);
+  --Font-Button-Alert-discovery: var(--Colour-Alert-Discovery-10);
+  --Font-Button-Alert-success: var(--Colour-Alert-Success-10);
+  --Font-Button-Alert-warning: var(--Colour-Alert-Warning-10);
+  --Font-Button-Alert-danger: var(--Colour-Alert-Danger-10);
+  --Font-Button-Segmented-Primary-selected: var(--Colour-Primary-10);
+  --Font-Button-Segmented-Primary-unselected: var(--Colour-Primary-40);
+  --Font-Button-Segmented-Primary-disabled: var(--Colour-Accent-Cadet-40);
+  --Font-Button-Segmented-Secondary-selected: var(--Colour-Primary-30);
+  --Font-Button-Segmented-Secondary-unselected: var(--Colour-Primary-40);
+  --Font-Button-Segmented-Secondary-disabled: var(--Colour-Accent-Cadet-40);
+  --Font-Banner-Alert-information: var(--Colour-Alert-Information-50);
+  --Font-Banner-Alert-discovery: var(--Colour-Alert-Discovery-50);
+  --Font-Banner-Alert-success: var(--Colour-Alert-Success-50);
+  --Font-Banner-Alert-warning: var(--Colour-Alert-Warning-50);
+  --Font-Banner-Alert-danger: var(--Colour-Alert-Danger-50);
+  --Font-Banner-Action-buy: var(--Colour-Action-Buy-50);
+  --Font-Banner-Action-sell: var(--Colour-Action-Sell-50);
+  --Font-Badge-primary: var(--Colour-Primary-30);
+  --Font-Badge-neutral: var(--Colour-Secondary-50);
+  --Font-Chip-standard: var(--Colour-Secondary-50);
+  --Font-Chip-hover: var(--Colour-Secondary-50);
+  --Font-Chip-active: var(--Colour-Primary-30);
+  --Font-Input-standard: var(--Colour-Secondary-50);
+  --Font-Input-placeholder: var(--Colour-Secondary-40);
+  --Font-Input-hint: var(--Colour-Secondary-40);
+  --Font-Input-support: var(--Colour-Secondary-40);
+  --Font-Input-label: var(--Colour-Secondary-50);
+  --Font-Input-error: var(--Colour-Alert-Danger-30);
+  --Font-Navigation-L1-standard: var(--Colour-Primary-60);
+  --Font-Navigation-L1-active: var(--Colour-Primary-30);
+  --Font-Navigation-L2-standard: var(--Colour-Secondary-50);
+  --Font-Navigation-L2-active: var(--Colour-Primary-30);
+  --Font-Option-chain-spotIndicator: var(--Colour-Accent-Violet-0);
+  --Font-Option-chain-Analysis-tag-high: var(--Colour-Accent-Gold-80);
+  --Font-Option-chain-Analysis-tag-low: var(--Colour-Accent-Violet-70);
+  --Font-Slider-body: var(--Colour-Secondary-50);
+  --Font-Slider-label: var(--Colour-Secondary-40);
+  --Font-Snackbar-acknowledged: var(--Colour-Alert-Information-10);
+  --Font-Snackbar-executed: var(--Colour-Alert-Success-10);
+  --Font-Snackbar-pending: var(--Colour-Alert-Warning-10);
+  --Font-Snackbar-partial: var(--Colour-Accent-Gold-10);
+  --Font-Snackbar-rejected: var(--Colour-Alert-Danger-10);
+  --Font-Tab-standard: var(--Colour-Secondary-50);
+  --Font-Tab-hover: var(--Colour-Secondary-50);
+  --Font-Tab-active: var(--Colour-Primary-30);
+  --Font-Tag-standard: var(--Colour-Secondary-40);
+  --Font-Tag-hover: var(--Colour-Secondary-40);
+  --Font-Tag-active: var(--Colour-Primary-30);
+  --Font-Toggle-standard: var(--Colour-Secondary-50);
+  --Font-Toggle-action: var(--Colour-Secondary-0);
+  --Font-Tooltip-standard: var(--Colour-Secondary-0);
+  --Stroke-up: var(--Colour-Action-Buy-30);
+  --Stroke-down: var(--Colour-Action-Sell-30);
+  --Stroke-information: var(--Colour-Alert-Information-30);
+  --Stroke-discovery: var(--Colour-Alert-Discovery-30);
+  --Stroke-success: var(--Colour-Alert-Success-30);
+  --Stroke-warning: var(--Colour-Alert-Warning-30);
+  --Stroke-danger: var(--Colour-Alert-Danger-30);
+  --Stroke-yellow: var(--Colour-Accent-Violet-60);
+  --Stroke-petal: var(--Colour-Data-Petal-30);
+  --Stroke-ember: var(--Colour-Data-Ember-30);
+  --Stroke-iris: var(--Colour-Data-Iris-30);
+  --Stroke-lagoon: var(--Colour-Data-Lagoon-30);
+  --Stroke-leather: var(--Colour-Data-Leather-30);
+  --Stroke-zero-danger: var(--Colour-Alert-Danger-20);
+  --Stroke-zero-warning: var(--Colour-Alert-Warning-20);
+  --Stroke-zero-primary: var(--Colour-Primary-20);
+  --Subject-three-neutral: var(--Colour-Secondary-20);
+  --Subject-three-chestnut: var(--Colour-Accent-Chestnut-90);
+  --Subject-two-primary: var(--Colour-Primary-10);
+  --Subject-two-information: var(--Colour-Alert-Information-10);
+  --Subject-two-discovery: var(--Colour-Alert-Discovery-10);
+  --Subject-two-success: var(--Colour-Alert-Success-10);
+  --Subject-two-warning: var(--Colour-Alert-Warning-10);
+  --Subject-two-danger: var(--Colour-Alert-Danger-10);
+  --Subject-two-up: var(--Colour-Action-Buy-0);
+  --Subject-two-down: var(--Colour-Action-Sell-0);
+  --Subject-two-gold: var(--Colour-Accent-Gold-10);
+  --Subject-two-lavender: var(--Colour-Accent-Lavender-10);
+  --Subject-two-chestnut: var(--Colour-Accent-Chestnut-10);
+  --Subject-two-taupe: var(--Colour-Accent-Taupe-10);
+  --Subject-two-cadet: var(--Colour-Accent-Cadet-10);
+  --Subject-two-yellow: var(--Colour-Accent-Violet-10);
+  --Subject-two-petal: var(--Colour-Data-Petal-10);
+  --Subject-two-ember: var(--Colour-Data-Ember-10);
+  --Subject-two-iris: var(--Colour-Data-Iris-10);
+  --Subject-two-lagoon: var(--Colour-Data-Lagoon-10);
+  --Subject-two-leather: var(--Colour-Data-Leather-10);
+  --Stroke-one-soft: var(--Colour-Secondary-40);
+  --Graphic-secondary-one: var(--Colour-Graphic-Neutral-10);
+  --Graphic-secondary-two: var(--Colour-Graphic-Neutral-20);
+  --Graphic-secondary-three: var(--Colour-Graphic-Neutral-30);
+  --Graphic-secondary-four: var(--Colour-Graphic-Neutral-40);
+  --Graphic-secondary-five: var(--Colour-Graphic-Neutral-50);
+  --Graphic-electric-one: var(--Colour-Graphic-Yellow-10);
+  --Graphic-electric-two: var(--Colour-Graphic-Yellow-20);
+  --Graphic-electric-three: var(--Colour-Graphic-Yellow-30);
+  --Graphic-electric-four: var(--Colour-Graphic-Yellow-40);
+  --Graphic-electric-five: var(--Colour-Graphic-Yellow-50);
+  --Graphic-stroke-primary: var(--Colour-Graphic-Blue-40);
+  --Graphic-stroke-secondary: var(--Colour-Graphic-Neutral-30);
+  --Graphic-stroke-electric: var(--Colour-Graphic-Yellow-40);
+  --Graphic-stroke-zero-primary: var(--Colour-Graphic-Blue-10);
+  --Graphic-stroke-zero-secondary: var(--Colour-Graphic-Neutral-20);
+  --Graphic-stroke-zero-electric: var(--Colour-Graphic-Yellow-10);
+  --Graphic-stroke-one-primary: var(--Colour-Graphic-Blue-60);
+  --Graphic-stroke-one-secondary: var(--Colour-Graphic-Neutral-40);
+  --Graphic-stroke-one-three: var(--Colour-Graphic-Yellow-60);
+  --Graphic-stroke-two-primary: var(--Colour-Graphic-Blue-90);
+  --Graphic-stroke-two-secondary: var(--Colour-Graphic-Neutral-50);
+  --Graphic-stroke-two-electric: var(--Colour-Graphic-Yellow-90);
+  --OptionChain-call: var(--Colour-Accent-Violet-0);
+  --OptionChain-indicatorUp: var(--Colour-Action-Buy-10);
+  --OptionChain-indicatorDown: var(--Colour-Action-Sell-10);
+}
+
+html.dark,
+.dark {
+  --Logo-App-step1: var(--Colour-Primary-30);
+  --Logo-App-step2: var(--Colour-Accent-Violet-40);
+  --Logo-App-step3: var(--Colour-Alert-Danger-20);
+  --Logo-App-step-4: var(--Colour-Accent-Gold-50);
+  --Brand-color: var(--Colour-Brand-10);
+  --Subject-one-standard: var(--Colour-Secondary-20);
+  --Subject-one-soft: var(--Colour-Secondary-40);
+  --Brand-text: var(--Colour-Brand-20);
+  --Surface-standard: var(--Colour-Secondary-100);
+  --Surface-inverse: var(--Colour-Secondary-0);
+  --Surface-zero-neutral: var(--Colour-Secondary-90);
+  --Surface-one-standard: var(--Colour-Secondary-80);
+  --Surface-one-neutral: var(--Colour-Secondary-70);
+  --Surface-one-primary: var(--Colour-Secondary-60);
+  --Surface-one-information: var(--Colour-Alert-Information-40);
+  --Surface-one-discovery: var(--Colour-Alert-Discovery-40);
+  --Surface-one-success: var(--Colour-Alert-Success-40);
+  --Surface-one-warning: var(--Colour-Alert-Warning-40);
+  --Surface-one-danger: var(--Colour-Alert-Danger-40);
+  --Surface-one-up: var(--Colour-Action-Buy-40);
+  --Surface-one-down: var(--Colour-Action-Sell-40);
+  --Surface-one-gold: var(--Colour-Accent-Gold-40);
+  --Surface-one-lavender: var(--Colour-Accent-Lavender-40);
+  --Surface-one-chestnut: var(--Colour-Accent-Chestnut-40);
+  --Surface-one-taupe: var(--Colour-Accent-Taupe-40);
+  --Surface-one-cadet: var(--Colour-Accent-Cadet-40);
+  --Surface-one-yellow: var(--Colour-Accent-Violet-100);
+  --Surface-one-petal: var(--Colour-Data-Petal-40);
+  --Surface-one-ember: var(--Colour-Data-Ember-40);
+  --Surface-one-iris: var(--Colour-Data-Iris-40);
+  --Surface-one-lagoon: var(--Colour-Data-Lagoon-40);
+  --Surface-one-leather: var(--Colour-Data-Leather-40);
+  --Surface-two-standard: var(--Colour-Secondary-60);
+  --Surface-neutral: var(--Colour-Secondary-80);
+  --Surface-primary: var(--Colour-Secondary-70);
+  --Surface-information: var(--Colour-Alert-Information-50);
+  --Surface-discovery: var(--Colour-Alert-Discovery-50);
+  --Surface-success: var(--Colour-Alert-Success-50);
+  --Surface-warning: var(--Colour-Alert-Warning-50);
+  --Surface-danger: var(--Colour-Alert-Danger-50);
+  --Surface-up: var(--Colour-Action-Buy-50);
+  --Surface-down: var(--Colour-Action-Sell-50);
+  --Surface-gold: var(--Colour-Accent-Cadet-80);
+  --Surface-lavender: var(--Colour-Accent-Lavender-100);
+  --Surface-chestnut: var(--Colour-Accent-Chestnut-100);
+  --Surface-taupe: var(--Colour-Accent-Taupe-100);
+  --Surface-cadet: var(--Colour-Accent-Cadet-100);
+  --Surface-yellow: var(--Colour-Accent-Violet-100);
+  --Surface-petal: var(--Colour-Data-Petal-50);
+  --Surface-ember: var(--Colour-Data-Ember-50);
+  --Surface-iris: var(--Colour-Data-Iris-50);
+  --Surface-lagoon: var(--Colour-Data-Lagoon-50);
+  --Surface-leather: var(--Colour-Data-Leather-50);
+  --Surface-two-neutral: var(--Colour-Secondary-50);
+  --Surface-three-neutral: var(--Colour-Secondary-30);
+  --Surface-three-primary: var(--Colour-Primary-40);
+  --Surface-two-primary: var(--Colour-Primary-30);
+  --Surface-two-information: var(--Colour-Alert-Information-30);
+  --Surface-two-discovery: var(--Colour-Alert-Discovery-30);
+  --Surface-two-success: var(--Colour-Alert-Success-30);
+  --Surface-two-warning: var(--Colour-Alert-Warning-30);
+  --Surface-two-danger: var(--Colour-Alert-Danger-30);
+  --Surface-two-up: var(--Colour-Action-Buy-30);
+  --Surface-two-down: var(--Colour-Action-Sell-30);
+  --Surface-two-gold: var(--Colour-Accent-Gold-30);
+  --Surface-two-lavender: var(--Colour-Accent-Lavender-30);
+  --Surface-two-chestnut: var(--Colour-Accent-Chestnut-30);
+  --Surface-two-taupe: var(--Colour-Accent-Taupe-30);
+  --Surface-two-cadet: var(--Colour-Accent-Cadet-30);
+  --Surface-two-yellow: var(--Colour-Accent-Violet-50);
+  --Surface-two-petal: var(--Colour-Data-Petal-30);
+  --Surface-two-ember: var(--Colour-Data-Ember-30);
+  --Surface-two-iris: var(--Colour-Data-Iris-30);
+  --Surface-two-lagoon: var(--Colour-Data-Lagoon-30);
+  --Surface-two-leather: var(--Colour-Data-Leather-30);
+  --Subject-one-neutral: var(--Colour-Secondary-30);
+  --Subject-standard: var(--Colour-Secondary-0);
+  --Subject-inverse: var(--Colour-Secondary-80);
+  --Subject-soft: var(--Colour-Secondary-50);
+  --Shadow-inner: var(--Colour-Shadow-20);
+  --Shadow-standard: var(--Colour-Shadow-40);
+  --Shadow-emphasis: var(--Colour-Shadow-40);
+  --Stroke-standard: var(--Colour-Secondary-50);
+  --Stroke-inverse: var(--Colour-Secondary-100);
+  --Stroke-soft: var(--Colour-Secondary-60);
+  --Stroke-neutral: var(--Colour-Secondary-50);
+  --Stroke-primary: var(--Colour-Primary-30);
+  --Beam-b1: var(--Colour-Accent-Gold-90);
+  --Beam-b2: var(--Colour-Accent-Chestnut-90);
+  --Beam-b3: var(--Colour-Accent-Violet-80);
+  --Beam-B4: var(--Colour-Accent-Cadet-90);
+  --Subject-neutral: var(--Colour-Secondary-40);
+  --Subject-primary: var(--Colour-Primary-20);
+  --Subject-information: var(--Colour-Alert-Information-20);
+  --Subject-discovery: var(--Colour-Alert-Discovery-20);
+  --Subject-success: var(--Colour-Alert-Success-20);
+  --Subject-warning: var(--Colour-Alert-Warning-20);
+  --Subject-danger: var(--Colour-Alert-Danger-20);
+  --Subject-up: var(--Colour-Action-Buy-20);
+  --Subject-down: var(--Colour-Action-Sell-20);
+  --Subject-two-neutral: var(--Colour-Secondary-20);
+  --Subject-gold: var(--Colour-Accent-Gold-30);
+  --Subject-one-primary: var(--Colour-Primary-10);
+  --Subject-one-information: var(--Colour-Alert-Information-20);
+  --Subject-one-discovery: var(--Colour-Alert-Discovery-20);
+  --Subject-one-success: var(--Colour-Alert-Success-20);
+  --Subject-one-warning: var(--Colour-Alert-Warning-20);
+  --Subject-one-danger: var(--Colour-Alert-Danger-20);
+  --Subject-one-up: var(--Colour-Action-Buy-10);
+  --Subject-one-down: var(--Colour-Action-Sell-10);
+  --Subject-lavender: var(--Colour-Accent-Lavender-30);
+  --Stroke-cadet: var(--Colour-Secondary-100);
+  --Subject-chestnut: var(--Colour-Accent-Chestnut-30);
+  --Subject-taupe: var(--Colour-Accent-Taupe-30);
+  --Avatar-fill: var(--Colour-Primary-30);
+  --Graphic-primary-one: var(--Colour-Graphic-Blue-90);
+  --Graphic-primary-two: var(--Colour-Graphic-Blue-80);
+  --Graphic-primary-three: var(--Colour-Graphic-Blue-70);
+  --Graphic-primary-four: var(--Colour-Graphic-Blue-60);
+  --Avatar-text: var(--Colour-Secondary-0);
+  --Avatar-Gradient-one: var(--Colour-Accent-Lavender-50);
+  --Avatar-Gradient-two: var(--Colour-Accent-Lavender-20);
+  --Text-heading: var(--Colour-Secondary-0);
+  --Text-title: var(--Colour-Secondary-20);
+  --Text-body: var(--Colour-Secondary-30);
+  --Text-label: var(--Colour-Secondary-40);
+  --Text-Emphasis-label: var(--Colour-Secondary-30);
+  --Text-link: var(--Colour-Primary-20);
+  --Text-active: var(--Colour-Primary-30);
+  --Text-Alert-information: var(--Colour-Alert-Information-30);
+  --Text-Alert-discovery: var(--Colour-Alert-Discovery-30);
+  --Text-Alert-success: var(--Colour-Alert-Success-30);
+  --Text-Alert-warning: var(--Colour-Alert-Warning-30);
+  --Text-Alert-danger: var(--Colour-Alert-Danger-30);
+  --Subject-cadet: var(--Colour-Accent-Cadet-70);
+  --Subject-yellow: var(--Colour-Accent-Violet-30);
+  --Subject-petal: var(--Colour-Data-Petal-30);
+  --Subject-ember: var(--Colour-Data-Ember-30);
+  --Subject-iris: var(--Colour-Data-Iris-30);
+  --Subject-lagoon: var(--Colour-Data-Lagoon-30);
+  --Subject-leather: var(--Colour-Data-Leather-30);
+  --Subject-one-gold: var(--Colour-Accent-Gold-50);
+  --Subject-one-lavender: var(--Colour-Accent-Lavender-50);
+  --Subject-one-chestnut: var(--Colour-Accent-Chestnut-50);
+  --Stroke-chestnut: var(--Colour-Accent-Chestnut-50);
+  --Stroke-lavender: var(--Colour-Accent-Lavender-40);
+  --Stroke-gold: var(--Colour-Accent-Gold-70);
+  --Subject-one-taupe: var(--Colour-Accent-Taupe-50);
+  --Subject-one-cadet: var(--Colour-Accent-Cadet-70);
+  --Subject-one-yellow: var(--Colour-Accent-Violet-20);
+  --Subject-one-petal: var(--Colour-Data-Petal-20);
+  --Subject-one-ember: var(--Colour-Data-Ember-20);
+  --Subject-one-iris: var(--Colour-Data-Iris-20);
+  --Subject-one-lagoon: var(--Colour-Data-Lagoon-20);
+  --Subject-one-leather: var(--Colour-Data-Leather-20);
+  --Subject-three-standard: var(--Colour-Secondary-80);
+  --Text-Action-up: var(--Colour-Action-Buy-20);
+  --Text-Action-down: var(--Colour-Action-Sell-20);
+  --Font-Button-Tertiary-Standard-standard: var(--Colour-Primary-30);
+  --Font-Button-Tertiary-Standard-hover: var(--Colour-Primary-20);
+  --Font-Button-Tertiary-Standard-pressed: var(--Colour-Primary-20);
+  --Font-Button-Tertiary-Information-standard: var(--Colour-Alert-Information-30);
+  --Font-Button-Tertiary-Information-hover: var(--Colour-Alert-Information-20);
+  --Font-Button-Tertiary-Information-pressed: var(--Colour-Alert-Information-20);
+  --Font-Button-Tertiary-Success-standard: var(--Colour-Alert-Success-30);
+  --Font-Button-Tertiary-Success-hover: var(--Colour-Alert-Success-20);
+  --Font-Button-Tertiary-Success-pressed: var(--Colour-Alert-Success-20);
+  --Font-Button-Tertiary-Warning-standard: var(--Colour-Alert-Warning-30);
+  --Font-Button-Tertiary-Warning-hover: var(--Colour-Alert-Warning-20);
+  --Font-Button-Tertiary-Warning-pressed: var(--Colour-Alert-Warning-20);
+  --Font-Button-Tertiary-Danger-standard: var(--Colour-Alert-Danger-30);
+  --Font-Button-Tertiary-Danger-hover: var(--Colour-Alert-Danger-20);
+  --Font-Button-Tertiary-Danger-pressed: var(--Colour-Alert-Danger-20);
+  --Font-Button-Tertiary-Discovery-standard: var(--Colour-Alert-Discovery-30);
+  --Font-Button-Tertiary-Discovery-hover: var(--Colour-Alert-Discovery-20);
+  --Font-Button-Tertiary-Discovery-pressed: var(--Colour-Alert-Discovery-20);
+  --Font-Button-primary: var(--Colour-Primary-10);
+  --Font-Button-secondary: var(--Colour-Secondary-40);
+  --Font-Button-Action-Buy-primary: var(--Colour-Action-Buy-0);
+  --Font-Button-Action-Buy-secondary: var(--Colour-Action-Buy-20);
+  --Font-Button-Action-Sell-primary: var(--Colour-Action-Sell-0);
+  --Font-Button-Action-Sell-secondary: var(--Colour-Action-Sell-20);
+  --Font-Button-Alert-information: var(--Colour-Alert-Information-10);
+  --Font-Button-Alert-Secondary-information: var(--Colour-Alert-Information-20);
+  --Font-Button-Alert-Secondary-discovery: var(--Colour-Alert-Discovery-20);
+  --Font-Button-Alert-Secondary-warning: var(--Colour-Alert-Warning-20);
+  --Font-Button-Alert-Secondary-danger: var(--Colour-Alert-Danger-20);
+  --Font-Button-Alert-Secondary-success: var(--Colour-Alert-Success-20);
+  --Font-Button-Alert-discovery: var(--Colour-Alert-Discovery-10);
+  --Font-Button-Alert-success: var(--Colour-Alert-Success-10);
+  --Font-Button-Alert-warning: var(--Colour-Alert-Warning-10);
+  --Font-Button-Alert-danger: var(--Colour-Alert-Danger-10);
+  --Font-Button-Segmented-Primary-selected: var(--Colour-Primary-60);
+  --Font-Button-Segmented-Primary-unselected: var(--Colour-Primary-20);
+  --Font-Button-Segmented-Primary-disabled: var(--Colour-Secondary-50);
+  --Font-Button-Segmented-Secondary-selected: var(--Colour-Primary-30);
+  --Font-Button-Segmented-Secondary-unselected: var(--Colour-Primary-20);
+  --Font-Button-Segmented-Secondary-disabled: var(--Colour-Secondary-50);
+  --Font-Banner-Alert-information: var(--Colour-Alert-Information-10);
+  --Font-Banner-Alert-discovery: var(--Colour-Alert-Discovery-10);
+  --Font-Banner-Alert-success: var(--Colour-Alert-Success-10);
+  --Font-Banner-Alert-warning: var(--Colour-Alert-Warning-10);
+  --Font-Banner-Alert-danger: var(--Colour-Alert-Danger-10);
+  --Font-Banner-Action-buy: var(--Colour-Action-Buy-0);
+  --Font-Banner-Action-sell: var(--Colour-Action-Sell-0);
+  --Font-Badge-primary: var(--Colour-Primary-30);
+  --Font-Badge-neutral: var(--Colour-Secondary-40);
+  --Font-Chip-standard: var(--Colour-Secondary-40);
+  --Font-Chip-hover: var(--Colour-Secondary-40);
+  --Font-Chip-active: var(--Colour-Primary-30);
+  --Font-Input-standard: var(--Colour-Secondary-40);
+  --Font-Input-placeholder: var(--Colour-Secondary-50);
+  --Font-Input-hint: var(--Colour-Secondary-50);
+  --Font-Input-support: var(--Colour-Secondary-50);
+  --Font-Input-label: var(--Colour-Secondary-40);
+  --Font-Input-error: var(--Colour-Alert-Danger-30);
+  --Font-Navigation-L1-standard: var(--Colour-Primary-10);
+  --Font-Navigation-L1-active: var(--Colour-Primary-30);
+  --Font-Navigation-L2-standard: var(--Colour-Secondary-40);
+  --Font-Navigation-L2-active: var(--Colour-Primary-30);
+  --Font-Option-chain-spotIndicator: var(--Colour-Accent-Violet-90);
+  --Font-Option-chain-Analysis-tag-high: var(--Colour-Accent-Gold-30);
+  --Font-Option-chain-Analysis-tag-low: var(--Colour-Accent-Violet-20);
+  --Font-Slider-body: var(--Colour-Secondary-30);
+  --Font-Slider-label: var(--Colour-Secondary-50);
+  --Font-Snackbar-acknowledged: var(--Colour-Alert-Information-50);
+  --Font-Snackbar-executed: var(--Colour-Alert-Success-50);
+  --Font-Snackbar-pending: var(--Colour-Alert-Warning-50);
+  --Font-Snackbar-partial: var(--Colour-Accent-Gold-100);
+  --Font-Snackbar-rejected: var(--Colour-Alert-Danger-50);
+  --Font-Tab-standard: var(--Colour-Secondary-40);
+  --Font-Tab-hover: var(--Colour-Secondary-40);
+  --Font-Tab-active: var(--Colour-Primary-30);
+  --Font-Tag-standard: var(--Colour-Secondary-40);
+  --Font-Tag-hover: var(--Colour-Secondary-40);
+  --Font-Tag-active: var(--Colour-Primary-30);
+  --Font-Toggle-standard: var(--Colour-Secondary-40);
+  --Font-Toggle-action: var(--Colour-Secondary-0);
+  --Font-Tooltip-standard: var(--Colour-Secondary-100);
+  --Stroke-up: var(--Colour-Action-Buy-30);
+  --Stroke-down: var(--Colour-Action-Sell-30);
+  --Stroke-information: var(--Colour-Alert-Information-30);
+  --Stroke-discovery: var(--Colour-Alert-Discovery-30);
+  --Stroke-success: var(--Colour-Alert-Success-30);
+  --Stroke-warning: var(--Colour-Alert-Warning-30);
+  --Stroke-danger: var(--Colour-Alert-Danger-30);
+  --Stroke-yellow: var(--Colour-Accent-Violet-60);
+  --Stroke-petal: var(--Colour-Data-Petal-30);
+  --Stroke-ember: var(--Colour-Data-Ember-30);
+  --Stroke-iris: var(--Colour-Data-Iris-30);
+  --Stroke-lagoon: var(--Colour-Data-Lagoon-30);
+  --Stroke-leather: var(--Colour-Data-Leather-30);
+  --Stroke-zero-danger: var(--Colour-Alert-Danger-20);
+  --Stroke-zero-warning: var(--Colour-Alert-Warning-40);
+  --Stroke-zero-primary: var(--Colour-Primary-50);
+  --Subject-three-neutral: var(--Colour-Secondary-60);
+  --Subject-three-chestnut: var(--Colour-Accent-Chestnut-20);
+  --Subject-two-primary: var(--Colour-Primary-10);
+  --Subject-two-information: var(--Colour-Alert-Information-10);
+  --Subject-two-discovery: var(--Colour-Alert-Discovery-10);
+  --Subject-two-success: var(--Colour-Alert-Success-10);
+  --Subject-two-warning: var(--Colour-Alert-Warning-10);
+  --Subject-two-danger: var(--Colour-Alert-Danger-10);
+  --Subject-two-up: var(--Colour-Action-Buy-0);
+  --Subject-two-down: var(--Colour-Action-Sell-0);
+  --Subject-two-gold: var(--Colour-Accent-Gold-10);
+  --Subject-two-lavender: var(--Colour-Accent-Lavender-10);
+  --Subject-two-chestnut: var(--Colour-Accent-Chestnut-10);
+  --Subject-two-taupe: var(--Colour-Accent-Taupe-10);
+  --Subject-two-cadet: var(--Colour-Accent-Cadet-10);
+  --Subject-two-yellow: var(--Colour-Accent-Violet-10);
+  --Subject-two-petal: var(--Colour-Data-Petal-10);
+  --Subject-two-ember: var(--Colour-Data-Ember-10);
+  --Subject-two-iris: var(--Colour-Data-Iris-10);
+  --Subject-two-lagoon: var(--Colour-Data-Lagoon-10);
+  --Subject-two-leather: var(--Colour-Data-Leather-10);
+  --Stroke-one-soft: var(--Colour-Secondary-50);
+  --Graphic-secondary-one: var(--Colour-Graphic-Neutral-50);
+  --Graphic-secondary-two: var(--Colour-Graphic-Neutral-40);
+  --Graphic-secondary-three: var(--Colour-Graphic-Neutral-30);
+  --Graphic-secondary-four: var(--Colour-Graphic-Neutral-20);
+  --Graphic-secondary-five: var(--Colour-Graphic-Neutral-10);
+  --Graphic-electric-one: var(--Colour-Graphic-Yellow-90);
+  --Graphic-electric-two: var(--Colour-Graphic-Yellow-80);
+  --Graphic-electric-three: var(--Colour-Graphic-Yellow-70);
+  --Graphic-electric-four: var(--Colour-Graphic-Yellow-60);
+  --Graphic-electric-five: var(--Colour-Graphic-Yellow-50);
+  --Graphic-stroke-primary: var(--Colour-Graphic-Blue-60);
+  --Graphic-stroke-secondary: var(--Colour-Graphic-Neutral-30);
+  --Graphic-stroke-electric: var(--Colour-Graphic-Yellow-60);
+  --Graphic-stroke-zero-primary: var(--Colour-Graphic-Blue-90);
+  --Graphic-stroke-zero-secondary: var(--Colour-Graphic-Neutral-40);
+  --Graphic-stroke-zero-electric: var(--Colour-Graphic-Yellow-90);
+  --Graphic-stroke-one-primary: var(--Colour-Graphic-Blue-40);
+  --Graphic-stroke-one-secondary: var(--Colour-Graphic-Neutral-20);
+  --Graphic-stroke-one-three: var(--Colour-Graphic-Yellow-40);
+  --Graphic-stroke-two-primary: var(--Colour-Graphic-Blue-10);
+  --Graphic-stroke-two-secondary: var(--Colour-Graphic-Neutral-10);
+  --Graphic-stroke-two-electric: var(--Colour-Graphic-Yellow-10);
+  --OptionChain-call: var(--Colour-Accent-Violet-100);
+  --OptionChain-indicatorUp: var(--Colour-Action-Buy-40);
+  --OptionChain-indicatorDown: var(--Colour-Action-Sell-40);
+}
+
diff --git a/client/src/styles/tokens/figma-tokens.css b/client/src/styles/tokens/figma-tokens.css
new file mode 100644
index 000000000000..3ebd2196f6f0
--- /dev/null
+++ b/client/src/styles/tokens/figma-tokens.css
@@ -0,0 +1,4 @@
+/* Figma tokens: import order matters (primitives → theme → platform) */
+@import './figma-primitives.css';
+@import './figma-theme-semantic.css';
+@import './figma-platform-laptop.css';
diff --git a/client/src/styles/typography-fy.css b/client/src/styles/typography-fy.css
new file mode 100644
index 000000000000..3e3292aed90f
--- /dev/null
+++ b/client/src/styles/typography-fy.css
@@ -0,0 +1,166 @@
+/**
+ * FyTypography parity (Flutter fy_ui) — web presets on top of Figma tokens.
+ * Classes: fy-typography-display-large, fy-typography-body, …
+ * Load after figma-tokens (Inter default matches Tailwind sans).
+ * font-size / line-height use Figma size tokens; primitives use px in figma-primitives.
+ */
+.fy-typography-display-large,
+.fy-typography-display,
+.fy-typography-display-small,
+.fy-typography-headline-small,
+.fy-typography-headline,
+.fy-typography-headline-large,
+.fy-typography-title-large,
+.fy-typography-title,
+.fy-typography-title-small,
+.fy-typography-title-tiny,
+.fy-typography-label-large,
+.fy-typography-label,
+.fy-typography-label-small,
+.fy-typography-label-tiny,
+.fy-typography-label-micro,
+.fy-typography-body-large,
+.fy-typography-body,
+.fy-typography-body-small,
+.fy-typography-body-tiny {
+  font-family: 'Inter', system-ui, sans-serif;
+  font-style: normal;
+}
+
+/* display */
+.fy-typography-display-large {
+  font-size: var(--Font-Displayheading-large);
+  line-height: var(--Font-Displayheading-Lineheight-large);
+  font-weight: var(--Font-Weight-extraBold);
+  color: var(--Text-heading);
+}
+
+.fy-typography-display {
+  font-size: var(--Font-Displayheading-standard);
+  line-height: var(--Font-Displayheading-Lineheight-standard);
+  font-weight: var(--Font-Weight-light);
+  color: var(--Text-heading);
+}
+
+.fy-typography-display-small {
+  font-size: var(--Font-Displayheading-small);
+  line-height: var(--Font-Displayheading-Lineheight-small);
+  font-weight: var(--Font-Weight-semiBold);
+  color: var(--Text-heading);
+}
+
+/* headline */
+.fy-typography-headline-small {
+  font-size: var(--Font-Headline-small);
+  line-height: var(--Font-Headline-Lineheight-small);
+  font-weight: var(--Font-Weight-bold);
+  color: var(--Text-heading);
+}
+
+.fy-typography-headline {
+  font-size: var(--Font-Headline-standard);
+  line-height: var(--Font-Headline-Lineheight-standard);
+  font-weight: var(--Font-Weight-bold);
+  color: var(--Text-heading);
+}
+
+.fy-typography-headline-large {
+  font-size: var(--Font-Headline-large);
+  line-height: var(--Font-Headline-Lineheight-large);
+  font-weight: var(--Font-Weight-bold);
+  color: var(--Text-heading);
+}
+
+/* title */
+.fy-typography-title-large {
+  font-size: var(--Font-Title-large);
+  line-height: var(--Font-Title-Lineheight-large);
+  font-weight: var(--Font-Weight-semiBold);
+  color: var(--Text-title);
+}
+
+.fy-typography-title {
+  font-size: var(--Font-Title-standard);
+  line-height: var(--Font-Title-Lineheight-standard);
+  font-weight: var(--Font-Weight-semiBold);
+  color: var(--Text-title);
+}
+
+.fy-typography-title-small {
+  font-size: var(--Font-Title-small);
+  line-height: var(--Font-Title-Lineheight-small);
+  font-weight: var(--Font-Weight-semiBold);
+  color: var(--Text-title);
+}
+
+.fy-typography-title-tiny {
+  font-size: var(--Font-Title-tiny);
+  line-height: var(--Font-Title-Lineheight-tiny);
+  font-weight: var(--Font-Weight-medium);
+  color: var(--Text-title);
+}
+
+/* label */
+.fy-typography-label-large {
+  font-size: var(--Font-Label-large);
+  line-height: var(--Font-Label-Lineheight-large);
+  font-weight: var(--Font-Weight-regular);
+  color: var(--Text-label);
+}
+
+.fy-typography-label {
+  font-size: var(--Font-Label-standard);
+  line-height: var(--Font-Label-Lineheight-standard);
+  font-weight: var(--Font-Weight-regular);
+  color: var(--Text-label);
+}
+
+.fy-typography-label-small {
+  font-size: var(--Font-Label-small);
+  line-height: var(--Font-Label-Lineheight-small);
+  font-weight: var(--Font-Weight-regular);
+  color: var(--Text-label);
+}
+
+.fy-typography-label-tiny {
+  font-size: var(--Font-Label-tiny);
+  line-height: var(--Font-Label-Lineheight-tiny);
+  font-weight: var(--Font-Weight-medium);
+  color: var(--Text-label);
+}
+
+.fy-typography-label-micro {
+  font-size: var(--Font-Label-micro);
+  line-height: var(--Font-Label-Lineheight-micro);
+  font-weight: var(--Font-Weight-semiBold);
+  color: var(--Text-label);
+}
+
+/* body */
+.fy-typography-body-large {
+  font-size: var(--Font-Body-large);
+  line-height: var(--Font-Body-Lineheight-large);
+  font-weight: var(--Font-Weight-regular);
+  color: var(--Text-body);
+}
+
+.fy-typography-body {
+  font-size: var(--Font-Body-standard);
+  line-height: var(--Font-Body-Lineheight-standard);
+  font-weight: var(--Font-Weight-regular);
+  color: var(--Text-body);
+}
+
+.fy-typography-body-small {
+  font-size: var(--Font-Body-small);
+  line-height: var(--Font-Body-Lineheight-small);
+  font-weight: var(--Font-Weight-regular);
+  color: var(--Text-body);
+}
+
+.fy-typography-body-tiny {
+  font-size: var(--Font-Body-tiny);
+  line-height: var(--Font-Body-Lineheight-tiny);
+  font-weight: var(--Font-Weight-regular);
+  color: var(--Text-body);
+}
diff --git a/client/tailwind.config.cjs b/client/tailwind.config.cjs
index 1ae6e788a306..2c40a01de535 100644
--- a/client/tailwind.config.cjs
+++ b/client/tailwind.config.cjs
@@ -1,5 +1,7 @@
 // const { fontFamily } = require('tailwindcss/defaultTheme');
 
+const figmaThemeColors = require('./src/styles/tokens/figma-tailwind-colors.cjs');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -152,6 +154,8 @@ module.exports = {
           DEFAULT: 'hsl(var(--card))',
           foreground: 'hsl(var(--card-foreground))',
         },
+        /* Figma theme semantic tokens: e.g. bg-fig-Surface-standard text-fig-Text-body */
+        fig: figmaThemeColors,
       },
       borderRadius: {
         none: '0',
diff --git a/packages/client/src/svgs/SendIcon.tsx b/packages/client/src/svgs/SendIcon.tsx
index 534624debb92..8fa8352ca824 100644
--- a/packages/client/src/svgs/SendIcon.tsx
+++ b/packages/client/src/svgs/SendIcon.tsx
@@ -7,7 +7,7 @@ export default function SendIcon({ size = 24, className = '' }) {
       height={size}
       viewBox={'0 0 24 24'}
       fill="none"
-      className={cn('text-white', className)}
+      className={cn(className || 'text-white')}
     >
       <path
         d="M7 11L12 6L17 11M12 18V7"