From 9dabe63677e71c815f2dafeb4ef5ee4c72d0158b Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Thu, 24 Apr 2025 16:03:51 -0300
Subject: [PATCH] fix: Standardize font sizes using Tailwind classes across
 frontend components (#7770)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../components/ListSelectionComponent/index.tsx      |  8 ++++----
 .../GenericNode/components/NodeDescription/index.tsx |  8 ++++----
 .../GenericNode/components/NodeName/index.tsx        |  2 +-
 .../GenericNode/components/NodeStatus/index.tsx      |  4 ++--
 .../GenericNode/components/OutputComponent/index.tsx |  2 +-
 .../components/common/paginatorComponent/index.tsx   |  6 +++---
 .../core/chatComponents/ContentBlockDisplay.tsx      |  4 ++--
 .../core/chatComponents/ContentDisplay.tsx           | 12 ++++++------
 .../core/chatComponents/DurationDisplay.tsx          |  2 +-
 .../components/sideBarFolderButtons/index.tsx        |  6 +++---
 .../customization/components/custom-parameter.tsx    |  2 +-
 src/frontend/src/modals/EmbedModal/embed-modal.tsx   |  2 +-
 .../IOFieldView/components/session-selector.tsx      |  2 +-
 .../modals/IOModal/components/chat-view-wrapper.tsx  |  2 +-
 .../chatInput/components/button-send-wrapper.tsx     |  4 ++--
 .../chatView/chatInput/components/no-input.tsx       |  2 +-
 .../components/audio-settings/components/header.tsx  |  2 +-
 .../components/chatView/chatMessage/chat-message.tsx |  6 +++---
 .../chatView/chatMessage/components/content-view.tsx |  2 +-
 .../chatMessage/components/edit-message-field.tsx    |  2 +-
 .../chatView/chatMessage/components/edit-message.tsx |  2 +-
 .../modals/IOModal/components/sidebar-open-view.tsx  |  2 +-
 .../src/modals/apiModal/codeTabs/code-tabs.tsx       |  2 +-
 src/frontend/src/modals/apiModal/new-api-modal.tsx   |  2 +-
 .../components/fileRendererComponent/index.tsx       |  2 +-
 .../components/toolbar-button.tsx                    |  2 +-
 .../components/nodeToolbarComponent/index.tsx        |  2 +-
 src/frontend/src/pages/MainPage/pages/empty-page.tsx |  4 +---
 .../src/pages/MainPage/pages/filesPage/index.tsx     |  2 +-
 src/frontend/src/style/applies.css                   |  2 +-
 src/frontend/tailwind.config.mjs                     |  4 ++++
 31 files changed, 54 insertions(+), 52 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx
index 4780e23fe..2bef4121b 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/ListSelectionComponent/index.tsx
@@ -93,11 +93,11 @@ const ListItem = ({
           </div>
         )}
         <div className="flex w-full flex-col truncate">
-          <div className="flex w-full truncate text-[13px] font-semibold">
+          <div className="flex w-full truncate text-mmd font-semibold">
             <span className="truncate">{item.name}</span>
           </div>
           {"metaData" in item && item.metaData && (
-            <div className="flex w-full truncate text-[13px] text-gray-500">
+            <div className="flex w-full truncate text-mmd text-gray-500">
               <span className="truncate">{item.metaData}</span>
             </div>
           )}
@@ -105,7 +105,7 @@ const ListItem = ({
 
         {isHovered || isFocused ? (
           <div className="ml-auto flex items-center justify-start rounded-md">
-            <div className="flex items-center pr-1.5 text-[13px] font-semibold text-muted-foreground">
+            <div className="flex items-center pr-1.5 text-mmd font-semibold text-muted-foreground">
               Select
             </div>
             <div className="flex items-center justify-center rounded-md">
@@ -286,7 +286,7 @@ const ListSelectionComponent = ({
               name={nodeClass?.icon || "unknown"}
               className="h-[18px] w-[18px] text-muted-foreground"
             />
-            <div className="text-[13px] font-semibold">
+            <div className="text-mmd font-semibold">
               {nodeClass?.display_name}
             </div>
           </div>
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
index 581b09beb..26aa75f61 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeDescription/index.tsx
@@ -78,7 +78,7 @@ export default function NodeDescription({
       <MemoizedMarkdown
         linkTarget="_blank"
         className={cn(
-          "markdown prose flex w-full flex-col text-[13px] leading-5 word-break-break-word [&_pre]:whitespace-break-spaces [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
+          "markdown prose flex w-full flex-col text-mmd leading-5 word-break-break-word [&_pre]:whitespace-break-spaces [&_pre]:!bg-code-description-background [&_pre_code]:!bg-code-description-background",
           mdClassName,
         )}
       >
@@ -153,7 +153,7 @@ export default function NodeDescription({
           <Textarea
             maxLength={charLimit}
             className={cn(
-              "nowheel h-full w-full p-0 text-[13px] focus:border-primary focus:ring-0",
+              "nowheel h-full w-full p-0 text-mmd focus:border-primary focus:ring-0",
               inputClassName,
             )}
             autoFocus
@@ -166,7 +166,7 @@ export default function NodeDescription({
           {charLimit && (nodeDescription?.length ?? 0) >= charLimit - 100 && (
             <div
               className={cn(
-                "pt-1 text-left text-[13px]",
+                "pt-1 text-left text-mmd",
                 (nodeDescription?.length ?? 0) >= charLimit
                   ? "text-error"
                   : "text-primary",
@@ -183,7 +183,7 @@ export default function NodeDescription({
           data-testid="generic-node-desc"
           ref={overflowRef}
           className={cn(
-            "nodoubleclick generic-node-desc-text h-full cursor-grab text-[13px] text-muted-foreground word-break-break-word",
+            "nodoubleclick generic-node-desc-text h-full cursor-grab text-mmd text-muted-foreground word-break-break-word",
             description === "" || !description ? "font-light italic" : "",
             placeholderClassName,
           )}
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
index 6d7e0d254..c01935223 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeName/index.tsx
@@ -100,7 +100,7 @@ export default function NodeName({
         <div className="flex cursor-grab items-center gap-2">
           <span
             className={cn(
-              "max-w-44 cursor-grab truncate text-[14px]",
+              "max-w-44 cursor-grab truncate text-sm",
               validationStatus?.data?.duration && "max-w-36",
               beta && "max-w-36",
               validationStatus?.data?.duration && beta && "max-w-20",
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
index cd2b1786f..995340fee 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@@ -369,7 +369,7 @@ export default function NodeStatus({
           >
             <div className="cursor-help">
               {conditionSuccess && validationStatus?.data?.duration ? (
-                <div className="font-jetbrains mr-1 flex gap-1 rounded-sm bg-accent-emerald px-1 text-[11px] font-bold text-accent-emerald-foreground">
+                <div className="font-jetbrains mr-1 flex gap-1 rounded-sm bg-accent-emerald px-1 text-xxs font-bold text-accent-emerald-foreground">
                   <Check className="h-4 w-4 items-center self-center" />
                   <span>
                     {normalizeTimeString(validationStatus?.data?.duration)}
@@ -388,7 +388,7 @@ export default function NodeStatus({
               size="sq"
               className="pointer-events-none mr-1 flex h-[22px] w-10 justify-center rounded-[8px] bg-accent-pink text-accent-pink-foreground"
             >
-              <span className="text-[11px]">Beta</span>
+              <span className="text-xxs">Beta</span>
             </Badge>
           )}
         </div>
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
index 8d96b02fd..abdf8f455 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/OutputComponent/index.tsx
@@ -27,7 +27,7 @@ export default function OutputComponent({
   return displayProxy(
     <span
       className={cn(
-        "text-[13px] font-medium",
+        "text-xs font-medium",
         isToolMode && "text-secondary",
         frozen ? "text-ice" : "",
       )}
diff --git a/src/frontend/src/components/common/paginatorComponent/index.tsx b/src/frontend/src/components/common/paginatorComponent/index.tsx
index a66d7bf93..dc0017521 100644
--- a/src/frontend/src/components/common/paginatorComponent/index.tsx
+++ b/src/frontend/src/components/common/paginatorComponent/index.tsx
@@ -44,7 +44,7 @@ export default function PaginatorComponent({
 
   return (
     <div className="flex flex-1 items-center justify-between px-6">
-      <div className="flex items-center justify-end gap-1 text-[13px] text-secondary-foreground">
+      <div className="flex items-center justify-end gap-1 text-mmd text-secondary-foreground">
         {(pageIndex - 1) * pageSize + 1}-
         {Math.min(totalRowsCount, (pageIndex - 1) * pageSize + pageSize)}{" "}
         <span className="text-muted-foreground">
@@ -57,14 +57,14 @@ export default function PaginatorComponent({
         </span>
       </div>
       <div className={"flex items-center gap-2"}>
-        <div className="flex items-center gap-1 text-[13px] text-secondary-foreground">
+        <div className="flex items-center gap-1 text-mmd text-secondary-foreground">
           <Select
             onValueChange={(value) => paginate(Number(value), size)}
             value={pageIndex.toString()}
           >
             <SelectTrigger
               direction="up"
-              className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-[13px] focus:border-none focus:ring-0 focus:!ring-offset-0"
+              className="h-7 w-fit gap-1 border-none p-1 pl-1.5 text-mmd focus:border-none focus:ring-0 focus:!ring-offset-0"
             >
               <SelectValue placeholder="1" />
             </SelectTrigger>
diff --git a/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx b/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
index febf3a361..c944d04e0 100644
--- a/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
+++ b/src/frontend/src/components/core/chatComponents/ContentBlockDisplay.tsx
@@ -101,7 +101,7 @@ export function ContentBlockDisplay({
                 <Markdown
                   remarkPlugins={[remarkGfm]}
                   rehypePlugins={[rehypeMathjax]}
-                  className="inline-block w-fit max-w-full text-[14px] font-semibold text-primary"
+                  className="inline-block w-fit max-w-full text-sm font-semibold text-primary"
                 >
                   {headerTitle}
                 </Markdown>
@@ -169,7 +169,7 @@ export function ContentBlockDisplay({
                         className="overflow-hidden pl-4 pt-[16px] font-medium"
                       >
                         <Markdown
-                          className="text-[14px] font-semibold text-foreground"
+                          className="text-sm font-semibold text-foreground"
                           remarkPlugins={[remarkGfm]}
                           linkTarget="_blank"
                           rehypePlugins={[rehypeMathjax]}
diff --git a/src/frontend/src/components/core/chatComponents/ContentDisplay.tsx b/src/frontend/src/components/core/chatComponents/ContentDisplay.tsx
index 23d9a5e06..323320943 100644
--- a/src/frontend/src/components/core/chatComponents/ContentDisplay.tsx
+++ b/src/frontend/src/components/core/chatComponents/ContentDisplay.tsx
@@ -32,7 +32,7 @@ export default function ContentDisplay({
             <Markdown
               remarkPlugins={[remarkGfm]}
               rehypePlugins={[rehypeMathjax]}
-              className="inline-block w-fit max-w-full text-[14px] font-semibold text-foreground"
+              className="inline-block w-fit max-w-full text-sm font-semibold text-foreground"
             >
               {content.header.title}
             </Markdown>
@@ -57,7 +57,7 @@ export default function ContentDisplay({
             remarkPlugins={[remarkGfm]}
             linkTarget="_blank"
             rehypePlugins={[rehypeMathjax]}
-            className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
+            className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
             components={{
               p({ node, ...props }) {
                 return (
@@ -154,7 +154,7 @@ export default function ContentDisplay({
             <Markdown
               remarkPlugins={[remarkGfm]}
               rehypePlugins={[rehypeMathjax]}
-              className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
+              className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
               components={{
                 pre({ node, ...props }) {
                   return <>{props.children}</>;
@@ -203,7 +203,7 @@ export default function ContentDisplay({
           <Markdown
             remarkPlugins={[remarkGfm]}
             rehypePlugins={[rehypeMathjax]}
-            className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
+            className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
           >
             **Input:**
           </Markdown>
@@ -216,7 +216,7 @@ export default function ContentDisplay({
               <Markdown
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeMathjax]}
-                className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
+                className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
               >
                 **Output:**
               </Markdown>
@@ -228,7 +228,7 @@ export default function ContentDisplay({
               <Markdown
                 remarkPlugins={[remarkGfm]}
                 rehypePlugins={[rehypeMathjax]}
-                className="markdown prose max-w-full text-[14px] font-normal dark:prose-invert"
+                className="markdown prose max-w-full text-sm font-normal dark:prose-invert"
               >
                 **Error:**
               </Markdown>
diff --git a/src/frontend/src/components/core/chatComponents/DurationDisplay.tsx b/src/frontend/src/components/core/chatComponents/DurationDisplay.tsx
index afc5d1a96..97525926f 100644
--- a/src/frontend/src/components/core/chatComponents/DurationDisplay.tsx
+++ b/src/frontend/src/components/core/chatComponents/DurationDisplay.tsx
@@ -65,7 +65,7 @@ export default function DurationDisplay({
             bounce: 0,
             duration: 300,
           }}
-          className="text-[11px] font-bold tabular-nums"
+          className="text-xxs font-bold tabular-nums"
         />
       </div>
     </div>
diff --git a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
index ddb65a5f9..473835060 100644
--- a/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
+++ b/src/frontend/src/components/core/folderSidebarComponent/components/sideBarFolderButtons/index.tsx
@@ -413,7 +413,7 @@ const SideBarFoldersButtonsComponent = ({
                                   handleKeyDown={handleKeyDown}
                                 />
                               ) : (
-                                <span className="block w-0 grow truncate text-[13px] opacity-100">
+                                <span className="block w-0 grow truncate text-mmd opacity-100">
                                   {item.name}
                                 </span>
                               )}
@@ -459,7 +459,7 @@ const SideBarFoldersButtonsComponent = ({
               >
                 <SidebarMenuButton
                   size="md"
-                  className="text-[13px]"
+                  className="text-mmd"
                   onClick={() => {
                     window.open("/store", "_blank");
                   }}
@@ -473,7 +473,7 @@ const SideBarFoldersButtonsComponent = ({
               isActive={checkPathFiles}
               onClick={() => handleFilesClick?.()}
               size="md"
-              className="text-[13px]"
+              className="text-mmd"
             >
               <ForwardedIconComponent name="File" />
               My Files
diff --git a/src/frontend/src/customization/components/custom-parameter.tsx b/src/frontend/src/customization/components/custom-parameter.tsx
index d602cb914..b2aedb841 100644
--- a/src/frontend/src/customization/components/custom-parameter.tsx
+++ b/src/frontend/src/customization/components/custom-parameter.tsx
@@ -64,7 +64,7 @@ export function getCustomParameterTitle({
     <div className={cn(isFlexView && "max-w-56 truncate")}>
       <span
         data-testid={`title-${title.toLocaleLowerCase()}`}
-        className="text-[13px]"
+        className="text-mmd"
       >
         {title}
       </span>
diff --git a/src/frontend/src/modals/EmbedModal/embed-modal.tsx b/src/frontend/src/modals/EmbedModal/embed-modal.tsx
index 66d38d325..dc5e7ca28 100644
--- a/src/frontend/src/modals/EmbedModal/embed-modal.tsx
+++ b/src/frontend/src/modals/EmbedModal/embed-modal.tsx
@@ -57,7 +57,7 @@ export default function EmbedModal({
   return (
     <BaseModal open={open} setOpen={setOpen} size="retangular">
       <BaseModal.Header>
-        <div className="flex items-center gap-2 text-[16px] font-semibold">
+        <div className="flex items-center gap-2 text-base font-semibold">
           <IconComponent name="Columns2" className="icon-size" />
           Embed into site
         </div>
diff --git a/src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx b/src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx
index cb1fb7c7b..df6b40b1d 100644
--- a/src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx
+++ b/src/frontend/src/modals/IOModal/components/IOFieldView/components/session-selector.tsx
@@ -131,7 +131,7 @@ export default function SessionSelector({
         else toggleVisibility();
       }}
       className={cn(
-        "file-component-accordion-div group cursor-pointer rounded-md text-left text-[13px] hover:bg-secondary-hover",
+        "file-component-accordion-div group cursor-pointer rounded-md text-left text-mmd hover:bg-secondary-hover",
         isVisible ? "bg-secondary-hover font-semibold" : "font-normal",
       )}
     >
diff --git a/src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx b/src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx
index 8b68e6c26..b9e6faec6 100644
--- a/src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx
+++ b/src/frontend/src/modals/IOModal/components/chat-view-wrapper.tsx
@@ -33,7 +33,7 @@ export const ChatViewWrapper = ({
     >
       <div
         className={cn(
-          "mb-4 flex h-[5%] items-center text-[16px] font-semibold",
+          "mb-4 flex h-[5%] items-center text-base font-semibold",
           playgroundPage ? "justify-between" : "lg:justify-start",
         )}
       >
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx
index c3edb559c..ec64ab1f8 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/button-send-wrapper.tsx
@@ -60,7 +60,7 @@ const ButtonSendWrapper = ({
       data-testid={showStopButton ? "button-stop" : "button-send"}
     >
       <Case condition={showStopButton}>
-        <div className="flex items-center gap-2 rounded-md text-[14px] font-medium">
+        <div className="flex items-center gap-2 rounded-md text-sm font-medium">
           Stop
           <Loading className="h-4 w-4" />
         </div>
@@ -75,7 +75,7 @@ const ButtonSendWrapper = ({
       </Case> */}
 
       <Case condition={showSendButton}>
-        <div className="flex h-fit w-fit items-center gap-2 text-[14px] font-medium">
+        <div className="flex h-fit w-fit items-center gap-2 text-sm font-medium">
           Send
         </div>
       </Case>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx
index 49dd12fac..a05add60a 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/no-input.tsx
@@ -38,7 +38,7 @@ const NoInputView: React.FC<NoInputViewProps> = ({
             unstyled
             className="form-modal-send-button cursor-pointer bg-muted text-foreground hover:bg-secondary-hover dark:hover:bg-input"
           >
-            <div className="flex items-center gap-2 rounded-md text-[14px] font-medium">
+            <div className="flex items-center gap-2 rounded-md text-sm font-medium">
               Stop
               <Loading className="h-4 w-4" />
             </div>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/components/audio-settings/components/header.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/components/audio-settings/components/header.tsx
index c13046358..feac174cc 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/components/audio-settings/components/header.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatInput/components/voice-assistant/components/audio-settings/components/header.tsx
@@ -16,7 +16,7 @@ const AudioSettingsHeader = () => {
         />
         Voice settings
       </p>
-      <p className="text-[13px] leading-4 text-muted-foreground">
+      <p className="text-mmd leading-4 text-muted-foreground">
         Voice chat is powered by OpenAI. You can also add more voices with
         ElevenLabs.
       </p>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
index 30a00dad6..cfc62dbc4 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/chat-message.tsx
@@ -293,7 +293,7 @@ export default function ChatMessage({
             <div>
               <div
                 className={cn(
-                  "flex max-w-full items-baseline gap-3 truncate pb-2 text-[14px] font-semibold",
+                  "flex max-w-full items-baseline gap-3 truncate pb-2 text-sm font-semibold",
                 )}
                 style={
                   chat.properties?.text_color
@@ -316,7 +316,7 @@ export default function ChatMessage({
                   )}
                 </span>
                 {chat.properties?.source && !playgroundPage && (
-                  <div className="text-[13px] font-normal text-muted-foreground">
+                  <div className="text-mmd font-normal text-muted-foreground">
                     {chat.properties?.source.source}
                   </div>
                 )}
@@ -417,7 +417,7 @@ export default function ChatMessage({
                     <>
                       <div
                         className={cn(
-                          "w-full items-baseline whitespace-pre-wrap break-words text-[14px] font-normal",
+                          "w-full items-baseline whitespace-pre-wrap break-words text-sm font-normal",
                           isEmpty ? "text-muted-foreground" : "text-primary",
                         )}
                         data-testid={`chat-message-${chat.sender_name}-${chatMessage}`}
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/content-view.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/content-view.tsx
index 323d3404b..1e5a24d4b 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/content-view.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/content-view.tsx
@@ -52,7 +52,7 @@ export const ErrorView = ({
               {blocks.map((block, blockIndex) => (
                 <div
                   key={blockIndex}
-                  className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-[14px] text-foreground"
+                  className="w-full rounded-xl border border-error-red-border bg-error-red p-4 text-sm text-foreground"
                 >
                   {block.contents.map((content, contentIndex) => {
                     if (content.type === "error") {
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message-field.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message-field.tsx
index 4b263babb..acd04bbd6 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message-field.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message-field.tsx
@@ -66,7 +66,7 @@ export default function EditMessageField({
               Cancel
             </Button>
           </div>
-          <div className="text-[13px] font-medium text-muted-foreground word-break-break-word">
+          <div className="text-mmd font-medium text-muted-foreground word-break-break-word">
             Editing messages will update the memory but won't restart the
             conversation.
           </div>
diff --git a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
index 5ed3acc50..a85cd5d81 100644
--- a/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
+++ b/src/frontend/src/modals/IOModal/components/chatView/chatMessage/components/edit-message.tsx
@@ -39,7 +39,7 @@ export const MarkdownField = ({
         linkTarget="_blank"
         rehypePlugins={[rehypeMathjax, rehypeRaw]}
         className={cn(
-          "markdown prose flex w-fit max-w-full flex-col items-baseline text-[14px] font-normal word-break-break-word dark:prose-invert",
+          "markdown prose flex w-fit max-w-full flex-col items-baseline text-sm font-normal word-break-break-word dark:prose-invert",
           isEmpty ? "text-muted-foreground" : "text-primary",
         )}
         components={{
diff --git a/src/frontend/src/modals/IOModal/components/sidebar-open-view.tsx b/src/frontend/src/modals/IOModal/components/sidebar-open-view.tsx
index c0818f63b..ef036a236 100644
--- a/src/frontend/src/modals/IOModal/components/sidebar-open-view.tsx
+++ b/src/frontend/src/modals/IOModal/components/sidebar-open-view.tsx
@@ -28,7 +28,7 @@ export const SidebarOpenView = ({
                 name="MessagesSquare"
                 className="h-[18px] w-[18px] text-ring"
               />
-              <div className="text-[13px] font-normal">Chat</div>
+              <div className="text-mmd font-normal">Chat</div>
             </div>
             <ShadTooltip styleClasses="z-50" content="New Chat">
               <div>
diff --git a/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx b/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx
index 9d3b8c748..c93b1d5ff 100644
--- a/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx
+++ b/src/frontend/src/modals/apiModal/codeTabs/code-tabs.tsx
@@ -109,7 +109,7 @@ export default function APITabsComponent() {
               <TabsTrigger
                 key={index}
                 value={index.toString()}
-                className="flex items-center gap-2.5 rounded-md !border-0 px-4 py-2 !text-[14px] data-[state=active]:bg-background"
+                className="flex items-center gap-2.5 rounded-md !border-0 px-4 py-2 !text-sm data-[state=active]:bg-background"
               >
                 <IconComponent name={tab.icon} className="h-4 w-4" />
                 {tab.title}
diff --git a/src/frontend/src/modals/apiModal/new-api-modal.tsx b/src/frontend/src/modals/apiModal/new-api-modal.tsx
index 19221169b..22fb6c6ef 100644
--- a/src/frontend/src/modals/apiModal/new-api-modal.tsx
+++ b/src/frontend/src/modals/apiModal/new-api-modal.tsx
@@ -73,7 +73,7 @@ export default function ApiModal({
           />
           <span className="pl-2">API access</span>
           {nodes.length > 0 && (
-            <div className="border-r-1 absolute right-12 flex items-center text-[13px] font-medium leading-[16px]">
+            <div className="border-r-1 absolute right-12 flex items-center text-mmd font-medium leading-[16px]">
               <Button
                 variant="ghost"
                 size="icon"
diff --git a/src/frontend/src/modals/fileManagerModal/components/filesRendererComponent/components/fileRendererComponent/index.tsx b/src/frontend/src/modals/fileManagerModal/components/filesRendererComponent/components/fileRendererComponent/index.tsx
index 0c7946f57..b5535fdf4 100644
--- a/src/frontend/src/modals/fileManagerModal/components/filesRendererComponent/components/fileRendererComponent/index.tsx
+++ b/src/frontend/src/modals/fileManagerModal/components/filesRendererComponent/components/fileRendererComponent/index.tsx
@@ -132,7 +132,7 @@ export default function FileRendererComponent({
             </span>
           )}
           {file.progress !== undefined && file.progress === -1 ? (
-            <span className="text-[13px] text-primary">
+            <span className="text-mmd text-primary">
               Upload failed,{" "}
               <span
                 className="cursor-pointer text-accent-pink-foreground underline"
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx
index 7472f7226..0a57e7e27 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/components/toolbar-button.tsx
@@ -31,7 +31,7 @@ export const ToolbarButton = memo(
         data-testid={dataTestId}
       >
         <ForwardedIconComponent name={icon} className="h-4 w-4" />
-        {label && <span className="text-[13px] font-medium">{label}</span>}
+        {label && <span className="text-mmd font-medium">{label}</span>}
       </Button>
     </ShadTooltip>
   ),
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 803bab329..9320da61d 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -514,7 +514,7 @@ const NodeToolbarComponent = memo(
                     toolMode ? "text-primary" : "",
                   )}
                 />
-                <span className="text-[13px] font-medium">Tool Mode</span>
+                <span className="text-mmd font-medium">Tool Mode</span>
                 <ToggleShadComponent
                   value={toolMode}
                   editNode={false}
diff --git a/src/frontend/src/pages/MainPage/pages/empty-page.tsx b/src/frontend/src/pages/MainPage/pages/empty-page.tsx
index a15f0bc64..50ded8458 100644
--- a/src/frontend/src/pages/MainPage/pages/empty-page.tsx
+++ b/src/frontend/src/pages/MainPage/pages/empty-page.tsx
@@ -1,4 +1,3 @@
-import LangflowLogo from "@/assets/LangflowLogo.svg?react";
 import logoDarkPng from "@/assets/logo_dark.png";
 import logoLightPng from "@/assets/logo_light.png";
 import CardsWrapComponent from "@/components/core/cardsWrapComponent";
@@ -6,7 +5,6 @@ import { Button } from "@/components/ui/button";
 import { DotBackgroundDemo } from "@/components/ui/dot-background";
 import { DISCORD_URL, GITHUB_URL } from "@/constants/constants";
 import { useGetUserData, useUpdateUser } from "@/controllers/API/queries/auth";
-import { EnhancedBeamEffect } from "@/pages/MainPage/pages/enchanced-beam-effect";
 import useAuthStore from "@/stores/authStore";
 import { useDarkStore } from "@/stores/darkStore";
 import { useFolderStore } from "@/stores/foldersStore";
@@ -177,7 +175,7 @@ export const EmptyPageCommunity = ({
         </div>
         <p
           data-testid="empty_page_drag_and_drop_text"
-          className="absolute bottom-5 left-0 right-0 mt-4 cursor-default text-center text-xs text-muted-foreground"
+          className="absolute bottom-5 left-0 right-0 mt-4 cursor-default text-center text-xxs text-muted-foreground"
         >
           {EMPTY_PAGE_DRAG_AND_DROP_TEXT}
         </p>
diff --git a/src/frontend/src/pages/MainPage/pages/filesPage/index.tsx b/src/frontend/src/pages/MainPage/pages/filesPage/index.tsx
index dac81b7ee..4f900e793 100644
--- a/src/frontend/src/pages/MainPage/pages/filesPage/index.tsx
+++ b/src/frontend/src/pages/MainPage/pages/filesPage/index.tsx
@@ -107,7 +107,7 @@ export const FilesPage = () => {
             </div>
             {params.data.progress !== undefined &&
             params.data.progress === -1 ? (
-              <span className="text-[13px] text-primary">
+              <span className="text-xs text-primary">
                 Upload failed,{" "}
                 <span
                   className="cursor-pointer text-accent-pink-foreground underline"
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index a9449f094..f3dcbe49a 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -1311,7 +1311,7 @@
 }
 
 .deploy-dropdown-item {
-  @apply h-11 cursor-pointer px-2.5 py-1 text-[14px] font-normal hover:bg-background !important;
+  @apply h-11 cursor-pointer px-2.5 py-1 text-sm font-normal hover:bg-background !important;
 }
 
 .deploy-dropdown-item > :first-child {
diff --git a/src/frontend/tailwind.config.mjs b/src/frontend/tailwind.config.mjs
index 424eec9c5..6a89491af 100644
--- a/src/frontend/tailwind.config.mjs
+++ b/src/frontend/tailwind.config.mjs
@@ -342,6 +342,10 @@ const config = {
         100: "100",
         999: "999",
       },
+      fontSize: {
+        "xxs": "11px",
+        "mmd": "13px",
+      },
     },
   },