diff --git a/apps/docs/app/layout.tsx b/apps/docs/app/layout.tsx
index 06e06b83ead..91eeb72f972 100644
--- a/apps/docs/app/layout.tsx
+++ b/apps/docs/app/layout.tsx
@@ -8,8 +8,6 @@ export default function RootLayout({ children }: { children: ReactNode }) {
 export const viewport: Viewport = {
   width: 'device-width',
   initialScale: 1,
-  maximumScale: 1,
-  userScalable: false,
   themeColor: [
     { media: '(prefers-color-scheme: light)', color: '#ffffff' },
     { media: '(prefers-color-scheme: dark)', color: '#0c0c0c' },
diff --git a/apps/sim/app/(auth)/auth-layout-client.tsx b/apps/sim/app/(auth)/auth-layout-client.tsx
index fe4c524ecab..3aee420922f 100644
--- a/apps/sim/app/(auth)/auth-layout-client.tsx
+++ b/apps/sim/app/(auth)/auth-layout-client.tsx
@@ -14,8 +14,8 @@ export default function AuthLayoutClient({ children }: { children: React.ReactNo
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
diff --git a/apps/sim/app/(auth)/components/auth-background.tsx b/apps/sim/app/(auth)/components/auth-background.tsx
index 1291c151de8..dc284dbd66e 100644
--- a/apps/sim/app/(auth)/components/auth-background.tsx
+++ b/apps/sim/app/(auth)/components/auth-background.tsx
@@ -9,7 +9,7 @@ type AuthBackgroundProps = {
 export default function AuthBackground({ className, children }: AuthBackgroundProps) {
   return (
     <div className={cn('fixed inset-0 overflow-hidden', className)}>
-      <div className='-z-50 pointer-events-none absolute inset-0 bg-[#1C1C1C]' />
+      <div className='-z-50 pointer-events-none absolute inset-0 bg-[var(--landing-bg)]' />
       <AuthBackgroundSVG />
       <div className='relative z-20 h-full overflow-auto'>{children}</div>
     </div>
diff --git a/apps/sim/app/(auth)/components/branded-button.tsx b/apps/sim/app/(auth)/components/branded-button.tsx
index 245cd7c9c6e..9f1756627e5 100644
--- a/apps/sim/app/(auth)/components/branded-button.tsx
+++ b/apps/sim/app/(auth)/components/branded-button.tsx
@@ -55,9 +55,9 @@ export const BrandedButton = forwardRef<HTMLButtonElement, BrandedButtonProps>(
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         className={cn(
-          'group inline-flex h-[32px] items-center justify-center gap-[8px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px] transition-colors disabled:cursor-not-allowed disabled:opacity-50',
+          'group inline-flex h-[32px] items-center justify-center gap-2 rounded-[5px] border px-2.5 font-[430] font-season text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
           !hasCustomColor &&
-            'border-[#FFFFFF] bg-[#FFFFFF] text-black hover:border-[#E0E0E0] hover:bg-[#E0E0E0]',
+            'border-[var(--white)] bg-[var(--white)] text-black hover:border-[var(--border-1)] hover:bg-[var(--border-1)]',
           fullWidth && 'w-full',
           className
         )}
diff --git a/apps/sim/app/(auth)/components/sso-login-button.tsx b/apps/sim/app/(auth)/components/sso-login-button.tsx
index c373942becb..e8e25955efc 100644
--- a/apps/sim/app/(auth)/components/sso-login-button.tsx
+++ b/apps/sim/app/(auth)/components/sso-login-button.tsx
@@ -35,7 +35,7 @@ export function SSOLoginButton({
 
   const primaryBtnClasses = cn(
     primaryClassName || 'branded-button-gradient',
-    'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-[15px] text-white transition-all duration-200'
+    'flex w-full items-center justify-center gap-2 rounded-[10px] border font-medium text-base text-white transition-all duration-200'
   )
 
   const outlineBtnClasses = cn('w-full rounded-[10px]')
diff --git a/apps/sim/app/(auth)/components/status-page-layout.tsx b/apps/sim/app/(auth)/components/status-page-layout.tsx
index 7e353e0f19d..3929a564618 100644
--- a/apps/sim/app/(auth)/components/status-page-layout.tsx
+++ b/apps/sim/app/(auth)/components/status-page-layout.tsx
@@ -20,8 +20,8 @@ export function StatusPageLayout({
 }: StatusPageLayoutProps) {
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
@@ -31,7 +31,7 @@ export function StatusPageLayout({
                 <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
                   {title}
                 </h1>
-                <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+                <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
                   {description}
                 </p>
               </div>
diff --git a/apps/sim/app/(auth)/components/support-footer.tsx b/apps/sim/app/(auth)/components/support-footer.tsx
index 5b9dc64fba2..6ccb0a82011 100644
--- a/apps/sim/app/(auth)/components/support-footer.tsx
+++ b/apps/sim/app/(auth)/components/support-footer.tsx
@@ -11,12 +11,12 @@ export function SupportFooter({ position = 'fixed' }: SupportFooterProps) {
 
   return (
     <div
-      className={`right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed ${position}`}
+      className={`right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[var(--text-subtle)] text-small leading-relaxed ${position}`}
     >
       Need help?{' '}
       <a
         href={`mailto:${brandConfig.supportEmail}`}
-        className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+        className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
       >
         Contact support
       </a>
diff --git a/apps/sim/app/(auth)/login/login-form.tsx b/apps/sim/app/(auth)/login/login-form.tsx
index 9dd5cc78dbc..a6ad383556f 100644
--- a/apps/sim/app/(auth)/login/login-form.tsx
+++ b/apps/sim/app/(auth)/login/login-form.tsx
@@ -356,7 +356,7 @@ export default function LoginPage({
         <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Sign in
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           Enter your details
         </p>
       </div>
@@ -374,7 +374,7 @@ export default function LoginPage({
 
       {/* Password reset success message */}
       {resetSuccessMessage && (
-        <div className='mt-1 space-y-1 text-[#4CAF50] text-xs'>
+        <div className='mt-1 space-y-1 text-[var(--success)] text-xs'>
           <p>{resetSuccessMessage}</p>
         </div>
       )}
@@ -387,29 +387,41 @@ export default function LoginPage({
               <div className='flex items-center justify-between'>
                 <Label htmlFor='email'>Email</Label>
               </div>
-              <Input
-                id='email'
-                name='email'
-                placeholder='Enter your email'
-                required
-                autoCapitalize='none'
-                autoComplete='email'
-                autoCorrect='off'
-                value={email}
-                onChange={handleEmailChange}
-                className={cn(
-                  showEmailValidationError &&
-                    emailErrors.length > 0 &&
-                    'border-red-500 focus:border-red-500'
-                )}
-              />
-              {showEmailValidationError && emailErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {emailErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
+              <div className='relative'>
+                <Input
+                  id='email'
+                  name='email'
+                  placeholder='Enter your email'
+                  required
+                  autoCapitalize='none'
+                  autoComplete='email'
+                  autoCorrect='off'
+                  value={email}
+                  onChange={handleEmailChange}
+                  className={cn(
+                    showEmailValidationError &&
+                      emailErrors.length > 0 &&
+                      'border-red-500 focus:border-red-500'
+                  )}
+                />
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    showEmailValidationError && emailErrors.length > 0
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live='polite'
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {emailErrors.map((error, index) => (
+                        <p key={index}>{error}</p>
+                      ))}
+                    </div>
+                  </div>
                 </div>
-              )}
+              </div>
             </div>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
@@ -417,46 +429,58 @@ export default function LoginPage({
                 <button
                   type='button'
                   onClick={() => setForgotPasswordOpen(true)}
-                  className='font-medium text-[#999] text-xs transition hover:text-[#ECECEC]'
+                  className='font-medium text-[var(--text-subtle)] text-xs transition hover:text-[var(--landing-text)]'
                 >
                   Forgot password?
                 </button>
               </div>
               <div className='relative'>
-                <Input
-                  id='password'
-                  name='password'
-                  required
-                  type={showPassword ? 'text' : 'password'}
-                  autoCapitalize='none'
-                  autoComplete='current-password'
-                  autoCorrect='off'
-                  placeholder='Enter your password'
-                  value={password}
-                  onChange={handlePasswordChange}
+                <div className='relative'>
+                  <Input
+                    id='password'
+                    name='password'
+                    required
+                    type={showPassword ? 'text' : 'password'}
+                    autoCapitalize='none'
+                    autoComplete='current-password'
+                    autoCorrect='off'
+                    placeholder='Enter your password'
+                    value={password}
+                    onChange={handlePasswordChange}
+                    className={cn(
+                      'pr-10',
+                      showValidationError &&
+                        passwordErrors.length > 0 &&
+                        'border-red-500 focus:border-red-500'
+                    )}
+                  />
+                  <button
+                    type='button'
+                    onClick={() => setShowPassword(!showPassword)}
+                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] transition hover:text-[var(--landing-text)]'
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                <div
                   className={cn(
-                    'pr-10',
-                    showValidationError &&
-                      passwordErrors.length > 0 &&
-                      'border-red-500 focus:border-red-500'
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    showValidationError && passwordErrors.length > 0
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
                   )}
-                />
-                <button
-                  type='button'
-                  onClick={() => setShowPassword(!showPassword)}
-                  className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
-                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  aria-live='polite'
                 >
-                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                </button>
-              </div>
-              {showValidationError && passwordErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {passwordErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {passwordErrors.map((error, index) => (
+                        <p key={index}>{error}</p>
+                      ))}
+                    </div>
+                  </div>
                 </div>
-              )}
+              </div>
             </div>
           </div>
 
@@ -465,6 +489,7 @@ export default function LoginPage({
             disabled={isLoading}
             loading={isLoading}
             loadingText='Signing in'
+            className='!mt-6'
           >
             Sign in
           </BrandedButton>
@@ -475,10 +500,12 @@ export default function LoginPage({
       {showDivider && (
         <div className='relative my-6 font-light'>
           <div className='absolute inset-0 flex items-center'>
-            <div className='w-full border-[#2A2A2A] border-t' />
+            <div className='w-full border-[var(--landing-bg-elevated)] border-t' />
           </div>
           <div className='relative flex justify-center text-sm'>
-            <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
+            <span className='bg-[var(--landing-bg)] px-4 font-[340] text-[var(--text-subtle)]'>
+              Or continue with
+            </span>
           </div>
         </div>
       )}
@@ -504,24 +531,24 @@ export default function LoginPage({
 
       {/* Only show signup link if email/password signup is enabled */}
       {!isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && (
-        <div className='pt-6 text-center font-light text-[14px]'>
+        <div className='pt-6 text-center font-light text-sm'>
           <span className='font-normal'>Don't have an account? </span>
           <Link
             href={isInviteFlow ? `/signup?invite_flow=true&callbackUrl=${callbackUrl}` : '/signup'}
-            className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+            className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
           >
             Sign up
           </Link>
         </div>
       )}
 
-      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed sm:px-8 md:px-[44px]'>
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[var(--text-subtle)] text-small leading-relaxed sm:px-8 md:px-[44px]'>
         By signing in, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -530,7 +557,7 @@ export default function LoginPage({
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Privacy Policy
         </Link>
@@ -558,17 +585,33 @@ export default function LoginPage({
                     resetStatus.type === 'error' && 'border-red-500 focus:border-red-500'
                   )}
                 />
-                {resetStatus.type === 'error' && (
-                  <div className='mt-1 text-red-400 text-xs'>
-                    <p>{resetStatus.message}</p>
+                <div
+                  className={cn(
+                    'grid transition-[grid-template-rows] duration-200 ease-out',
+                    resetStatus.type === 'error' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                  )}
+                  aria-live='polite'
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 text-red-400 text-xs'>
+                      <p>{resetStatus.message}</p>
+                    </div>
                   </div>
-                )}
+                </div>
               </div>
-              {resetStatus.type === 'success' && (
-                <div className='mt-1 text-[#4CAF50] text-xs'>
-                  <p>{resetStatus.message}</p>
+              <div
+                className={cn(
+                  'grid transition-[grid-template-rows] duration-200 ease-out',
+                  resetStatus.type === 'success' ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]'
+                )}
+                aria-live='polite'
+              >
+                <div className='overflow-hidden'>
+                  <div className='mt-1 text-[var(--success)] text-xs'>
+                    <p>{resetStatus.message}</p>
+                  </div>
                 </div>
-              )}
+              </div>
               <BrandedButton
                 type='button'
                 onClick={handleForgotPassword}
diff --git a/apps/sim/app/(auth)/oauth/consent/page.tsx b/apps/sim/app/(auth)/oauth/consent/page.tsx
index 0138a7dd6d9..f03f7727049 100644
--- a/apps/sim/app/(auth)/oauth/consent/page.tsx
+++ b/apps/sim/app/(auth)/oauth/consent/page.tsx
@@ -130,7 +130,7 @@ export default function OAuthConsentPage() {
           <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorize Application
           </h1>
-          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
             Loading application details...
           </p>
         </div>
@@ -145,7 +145,7 @@ export default function OAuthConsentPage() {
           <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
             Authorization Error
           </h1>
-          <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+          <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
             {error}
           </p>
         </div>
@@ -170,11 +170,11 @@ export default function OAuthConsentPage() {
             className='rounded-[10px]'
           />
         ) : (
-          <div className='flex h-12 w-12 items-center justify-center rounded-[10px] bg-[#2A2A2A] font-medium text-[#999] text-[18px]'>
+          <div className='flex h-12 w-12 items-center justify-center rounded-[10px] bg-[var(--surface-4)] font-medium text-[var(--text-subtle)] text-lg'>
             {(clientName ?? '?').charAt(0).toUpperCase()}
           </div>
         )}
-        <ArrowLeftRight className='h-5 w-5 text-[#999]' />
+        <ArrowLeftRight className='h-5 w-5 text-[var(--text-subtle)]' />
         <Image
           src='/new/logo/colorized-bg.svg'
           alt='Sim'
@@ -188,14 +188,14 @@ export default function OAuthConsentPage() {
         <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Authorize Application
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
-          <span className='font-medium text-[#ECECEC]'>{clientName}</span> is requesting access to
-          your account
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
+          <span className='font-medium text-[var(--landing-text)]'>{clientName}</span> is requesting
+          access to your account
         </p>
       </div>
 
       {session?.user && (
-        <div className='mt-5 flex items-center gap-3 rounded-lg border border-[#2A2A2A] px-4 py-3'>
+        <div className='mt-5 flex items-center gap-3 rounded-lg border border-[var(--landing-bg-elevated)] px-4 py-3'>
           {session.user.image ? (
             <Image
               src={session.user.image}
@@ -206,20 +206,20 @@ export default function OAuthConsentPage() {
               unoptimized
             />
           ) : (
-            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-[#2A2A2A] font-medium text-[#999] text-[13px]'>
+            <div className='flex h-8 w-8 items-center justify-center rounded-full bg-[var(--surface-4)] font-medium text-[var(--text-subtle)] text-small'>
               {(session.user.name ?? session.user.email ?? '?').charAt(0).toUpperCase()}
             </div>
           )}
           <div className='min-w-0'>
             {session.user.name && (
-              <p className='truncate font-medium text-[14px]'>{session.user.name}</p>
+              <p className='truncate font-medium text-sm'>{session.user.name}</p>
             )}
-            <p className='truncate text-[#999] text-[13px]'>{session.user.email}</p>
+            <p className='truncate text-[var(--text-subtle)] text-small'>{session.user.email}</p>
           </div>
           <button
             type='button'
             onClick={handleSwitchAccount}
-            className='ml-auto text-[#999] text-[13px] underline-offset-2 transition-colors hover:text-[#ECECEC] hover:underline'
+            className='ml-auto text-[var(--text-subtle)] text-small underline-offset-2 transition-colors hover:text-[var(--landing-text)] hover:underline'
           >
             Switch
           </button>
@@ -229,10 +229,13 @@ export default function OAuthConsentPage() {
       {scopes.length > 0 && (
         <div className='mt-5 w-full max-w-[410px]'>
           <div className='rounded-lg border p-4'>
-            <p className='mb-3 font-medium text-[14px]'>This will allow the application to:</p>
+            <p className='mb-3 font-medium text-sm'>This will allow the application to:</p>
             <ul className='space-y-2'>
               {scopes.map((s) => (
-                <li key={s} className='flex items-start gap-2 font-normal text-[#999] text-[13px]'>
+                <li
+                  key={s}
+                  className='flex items-start gap-2 font-normal text-[var(--text-subtle)] text-small'
+                >
                   <span className='mt-0.5 text-green-500'>&#10003;</span>
                   <span>{SCOPE_DESCRIPTIONS[s] ?? s}</span>
                 </li>
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
index a48eedc5f8a..9cca124e3f5 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-content.tsx
@@ -72,7 +72,7 @@ function ResetPasswordContent() {
         <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Reset your password
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           Enter a new password for your account
         </p>
       </div>
@@ -87,10 +87,10 @@ function ResetPasswordContent() {
         />
       </div>
 
-      <div className='pt-6 text-center font-light text-[14px]'>
+      <div className='pt-6 text-center font-light text-sm'>
         <Link
           href='/login'
-          className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+          className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
         >
           Back to login
         </Link>
diff --git a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
index 8f5ef10aafc..c017326f590 100644
--- a/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
+++ b/apps/sim/app/(auth)/reset-password/reset-password-form.tsx
@@ -46,7 +46,7 @@ export function RequestResetForm({
             disabled={isSubmitting}
             required
           />
-          <p className='text-[#999] text-sm'>
+          <p className='text-[var(--text-subtle)] text-sm'>
             We'll send a password reset link to this email address.
           </p>
         </div>
@@ -54,7 +54,10 @@ export function RequestResetForm({
         {/* Status message display */}
         {statusType && statusMessage && (
           <div
-            className={cn('text-xs', statusType === 'success' ? 'text-[#4CAF50]' : 'text-red-400')}
+            className={cn(
+              'text-xs',
+              statusType === 'success' ? 'text-[var(--success)]' : 'text-red-400'
+            )}
           >
             <p>{statusMessage}</p>
           </div>
@@ -162,7 +165,7 @@ export function SetNewPasswordForm({
             <button
               type='button'
               onClick={() => setShowPassword(!showPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
+              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] transition hover:text-[var(--landing-text)]'
               aria-label={showPassword ? 'Hide password' : 'Show password'}
             >
               {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -190,7 +193,7 @@ export function SetNewPasswordForm({
             <button
               type='button'
               onClick={() => setShowConfirmPassword(!showConfirmPassword)}
-              className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
+              className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] transition hover:text-[var(--landing-text)]'
               aria-label={showConfirmPassword ? 'Hide password' : 'Show password'}
             >
               {showConfirmPassword ? <EyeOff size={18} /> : <Eye size={18} />}
@@ -208,7 +211,7 @@ export function SetNewPasswordForm({
           <div
             className={cn(
               'mt-1 space-y-1 text-xs',
-              statusType === 'success' ? 'text-[#4CAF50]' : 'text-red-400'
+              statusType === 'success' ? 'text-[var(--success)]' : 'text-red-400'
             )}
           >
             <p>{statusMessage}</p>
diff --git a/apps/sim/app/(auth)/signup/signup-form.tsx b/apps/sim/app/(auth)/signup/signup-form.tsx
index 0a8138053a1..39c4d3af5da 100644
--- a/apps/sim/app/(auth)/signup/signup-form.tsx
+++ b/apps/sim/app/(auth)/signup/signup-form.tsx
@@ -327,7 +327,7 @@ function SignupFormContent({
         <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           Create an account
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           Create an account or log in
         </p>
       </div>
@@ -351,105 +351,139 @@ function SignupFormContent({
 
       {/* Email/Password Form - show unless explicitly disabled */}
       {!isFalsy(getEnv('NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED')) && (
-        <form onSubmit={onSubmit} className='mt-8 space-y-8'>
+        <form onSubmit={onSubmit} className='mt-8 space-y-10'>
           <div className='space-y-6'>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
                 <Label htmlFor='name'>Full name</Label>
               </div>
-              <Input
-                id='name'
-                name='name'
-                placeholder='Enter your name'
-                type='text'
-                autoCapitalize='words'
-                autoComplete='name'
-                title='Name can only contain letters, spaces, hyphens, and apostrophes'
-                value={name}
-                onChange={handleNameChange}
-                className={cn(
-                  showNameValidationError &&
-                    nameErrors.length > 0 &&
-                    'border-red-500 focus:border-red-500'
-                )}
-              />
-              {showNameValidationError && nameErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {nameErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
+              <div className='relative'>
+                <Input
+                  id='name'
+                  name='name'
+                  placeholder='Enter your name'
+                  type='text'
+                  autoCapitalize='words'
+                  autoComplete='name'
+                  title='Name can only contain letters, spaces, hyphens, and apostrophes'
+                  value={name}
+                  onChange={handleNameChange}
+                  className={cn(
+                    showNameValidationError &&
+                      nameErrors.length > 0 &&
+                      'border-red-500 focus:border-red-500'
+                  )}
+                />
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    showNameValidationError && nameErrors.length > 0
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live='polite'
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {nameErrors.map((error, index) => (
+                        <p key={index}>{error}</p>
+                      ))}
+                    </div>
+                  </div>
                 </div>
-              )}
-            </div>
-            <div className='space-y-2'>
-              <div className='flex items-center justify-between'>
-                <Label htmlFor='email'>Email</Label>
               </div>
-              <Input
-                id='email'
-                name='email'
-                placeholder='Enter your email'
-                autoCapitalize='none'
-                autoComplete='email'
-                autoCorrect='off'
-                value={email}
-                onChange={handleEmailChange}
-                className={cn(
-                  (emailError || (showEmailValidationError && emailErrors.length > 0)) &&
-                    'border-red-500 focus:border-red-500'
-                )}
-              />
-              {showEmailValidationError && emailErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {emailErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
-                </div>
-              )}
-              {emailError && !showEmailValidationError && (
-                <div className='mt-1 text-red-400 text-xs'>
-                  <p>{emailError}</p>
-                </div>
-              )}
             </div>
             <div className='space-y-2'>
               <div className='flex items-center justify-between'>
-                <Label htmlFor='password'>Password</Label>
+                <Label htmlFor='email'>Email</Label>
               </div>
               <div className='relative'>
                 <Input
-                  id='password'
-                  name='password'
-                  type={showPassword ? 'text' : 'password'}
+                  id='email'
+                  name='email'
+                  placeholder='Enter your email'
                   autoCapitalize='none'
-                  autoComplete='new-password'
-                  placeholder='Enter your password'
+                  autoComplete='email'
                   autoCorrect='off'
-                  value={password}
-                  onChange={handlePasswordChange}
+                  value={email}
+                  onChange={handleEmailChange}
                   className={cn(
-                    'pr-10',
-                    showValidationError &&
-                      passwordErrors.length > 0 &&
+                    (emailError || (showEmailValidationError && emailErrors.length > 0)) &&
                       'border-red-500 focus:border-red-500'
                   )}
                 />
-                <button
-                  type='button'
-                  onClick={() => setShowPassword(!showPassword)}
-                  className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] transition hover:text-[#ECECEC]'
-                  aria-label={showPassword ? 'Hide password' : 'Show password'}
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    (showEmailValidationError && emailErrors.length > 0) ||
+                      (emailError && !showEmailValidationError)
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live='polite'
                 >
-                  {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                </button>
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {showEmailValidationError && emailErrors.length > 0 ? (
+                        emailErrors.map((error, index) => <p key={index}>{error}</p>)
+                      ) : emailError && !showEmailValidationError ? (
+                        <p>{emailError}</p>
+                      ) : null}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div className='space-y-2'>
+              <div className='flex items-center justify-between'>
+                <Label htmlFor='password'>Password</Label>
               </div>
-              {showValidationError && passwordErrors.length > 0 && (
-                <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                  {passwordErrors.map((error, index) => (
-                    <p key={index}>{error}</p>
-                  ))}
+              <div className='relative'>
+                <div className='relative'>
+                  <Input
+                    id='password'
+                    name='password'
+                    type={showPassword ? 'text' : 'password'}
+                    autoCapitalize='none'
+                    autoComplete='new-password'
+                    placeholder='Enter your password'
+                    autoCorrect='off'
+                    value={password}
+                    onChange={handlePasswordChange}
+                    className={cn(
+                      'pr-10',
+                      showValidationError &&
+                        passwordErrors.length > 0 &&
+                        'border-red-500 focus:border-red-500'
+                    )}
+                  />
+                  <button
+                    type='button'
+                    onClick={() => setShowPassword(!showPassword)}
+                    className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] transition hover:text-[var(--landing-text)]'
+                    aria-label={showPassword ? 'Hide password' : 'Show password'}
+                  >
+                    {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                  </button>
+                </div>
+                <div
+                  className={cn(
+                    'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                    showValidationError && passwordErrors.length > 0
+                      ? 'grid-rows-[1fr]'
+                      : 'grid-rows-[0fr]'
+                  )}
+                  aria-live='polite'
+                >
+                  <div className='overflow-hidden'>
+                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                      {passwordErrors.map((error, index) => (
+                        <p key={index}>{error}</p>
+                      ))}
+                    </div>
+                  </div>
                 </div>
-              )}
+              </div>
             </div>
           </div>
 
@@ -458,6 +492,7 @@ function SignupFormContent({
             disabled={isLoading}
             loading={isLoading}
             loadingText='Creating account'
+            className='!mt-6'
           >
             Create account
           </BrandedButton>
@@ -476,10 +511,12 @@ function SignupFormContent({
       })() && (
         <div className='relative my-6 font-light'>
           <div className='absolute inset-0 flex items-center'>
-            <div className='w-full border-[#2A2A2A] border-t' />
+            <div className='w-full border-[var(--landing-bg-elevated)] border-t' />
           </div>
           <div className='relative flex justify-center text-sm'>
-            <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or continue with</span>
+            <span className='bg-[var(--landing-bg)] px-4 font-[340] text-[var(--text-subtle)]'>
+              Or continue with
+            </span>
           </div>
         </div>
       )}
@@ -514,23 +551,23 @@ function SignupFormContent({
         </div>
       )}
 
-      <div className='pt-6 text-center font-light text-[14px]'>
+      <div className='pt-6 text-center font-light text-sm'>
         <span className='font-normal'>Already have an account? </span>
         <Link
           href={isInviteFlow ? `/login?invite_flow=true&callbackUrl=${redirectUrl}` : '/login'}
-          className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+          className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
         >
           Sign in
         </Link>
       </div>
 
-      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed sm:px-8 md:px-[44px]'>
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[var(--text-subtle)] text-small leading-relaxed sm:px-8 md:px-[44px]'>
         By creating an account, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -539,7 +576,7 @@ function SignupFormContent({
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--landing-text)] hover:underline'
         >
           Privacy Policy
         </Link>
diff --git a/apps/sim/app/(auth)/verify/verify-content.tsx b/apps/sim/app/(auth)/verify/verify-content.tsx
index 392811ff2ed..53821a8d37f 100644
--- a/apps/sim/app/(auth)/verify/verify-content.tsx
+++ b/apps/sim/app/(auth)/verify/verify-content.tsx
@@ -62,7 +62,7 @@ function VerificationForm({
         <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
           {isVerified ? 'Email Verified!' : 'Verify Your Email'}
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--text-primary)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
           {isVerified
             ? 'Your email has been verified. Redirecting to dashboard...'
             : !isEmailVerificationEnabled
@@ -78,7 +78,7 @@ function VerificationForm({
       {!isVerified && isEmailVerificationEnabled && (
         <div className='mt-8 space-y-8'>
           <div className='space-y-6'>
-            <p className='text-center text-[#999] text-sm'>
+            <p className='text-center text-[var(--text-subtle)] text-sm'>
               Enter the 6-digit code to verify your account.
               {hasEmailService ? " If you don't see it in your inbox, check your spam folder." : ''}
             </p>
@@ -122,15 +122,16 @@ function VerificationForm({
 
           {hasEmailService && (
             <div className='text-center'>
-              <p className='text-[#999] text-sm'>
+              <p className='text-[var(--text-subtle)] text-sm'>
                 Didn't receive a code?{' '}
                 {countdown > 0 ? (
                   <span>
-                    Resend in <span className='font-medium text-[#ECECEC]'>{countdown}s</span>
+                    Resend in{' '}
+                    <span className='font-medium text-[var(--landing-text)]'>{countdown}s</span>
                   </span>
                 ) : (
                   <button
-                    className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+                    className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
                     onClick={handleResend}
                     disabled={isLoading || isResendDisabled}
                   >
@@ -141,7 +142,7 @@ function VerificationForm({
             </div>
           )}
 
-          <div className='text-center font-light text-[14px]'>
+          <div className='text-center font-light text-sm'>
             <button
               onClick={() => {
                 if (typeof window !== 'undefined') {
@@ -151,7 +152,7 @@ function VerificationForm({
                 }
                 router.push('/signup')
               }}
-              className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+              className='font-medium text-[var(--landing-text)] underline-offset-4 transition hover:text-white hover:underline'
             >
               Back to signup
             </button>
@@ -166,8 +167,8 @@ function VerificationFormFallback() {
   return (
     <div className='text-center'>
       <div className='animate-pulse'>
-        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[#2A2A2A]' />
-        <div className='mx-auto h-4 w-64 rounded bg-[#2A2A2A]' />
+        <div className='mx-auto mb-4 h-8 w-48 rounded bg-[var(--surface-4)]' />
+        <div className='mx-auto h-4 w-64 rounded bg-[var(--surface-4)]' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/(home)/components/collaboration/collaboration.tsx b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
index e9e760a8525..0ab87a49645 100644
--- a/apps/sim/app/(home)/components/collaboration/collaboration.tsx
+++ b/apps/sim/app/(home)/components/collaboration/collaboration.tsx
@@ -25,7 +25,7 @@ function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
       }}
     >
       {Array.from({ length: cols * rows }, (_, i) => (
-        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[#2A2A2A]' />
+        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[var(--landing-bg-elevated)]' />
       ))}
     </div>
   )
@@ -89,7 +89,7 @@ function VikhyathCursor() {
         <div className='absolute top-0 left-[56.02px]'>
           <CursorArrow fill='#2ABBF8' />
         </div>
-        <div className='-left-[4px] absolute top-[18px] flex items-center rounded bg-[#2ABBF8] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+        <div className='-left-[4px] absolute top-4.5 flex items-center rounded bg-[#2ABBF8] px-[5px] py-[3px] font-[420] font-season text-[var(--landing-text-dark)] text-sm leading-[100%] tracking-[-0.02em]'>
           Vikhyath
         </div>
       </div>
@@ -113,7 +113,7 @@ function AlexaCursor() {
         <div className='absolute top-0 left-0'>
           <CursorArrow fill='#FFCC02' />
         </div>
-        <div className='absolute top-[16px] left-[23px] flex items-center rounded bg-[#FFCC02] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+        <div className='absolute top-4 left-[23px] flex items-center rounded bg-[#FFCC02] px-[5px] py-[3px] font-[420] font-season text-[var(--landing-text-dark)] text-sm leading-[100%] tracking-[-0.02em]'>
           Alexa
         </div>
       </div>
@@ -143,7 +143,7 @@ function YouCursor({ x, y, visible }: YouCursorProps) {
       <svg width='23.15' height='21.1' viewBox='0 0 17.5 16.4' fill='none'>
         <path d={CURSOR_ARROW_MIRRORED_PATH} fill='#33C482' />
       </svg>
-      <div className='absolute top-[16px] left-[23px] flex items-center rounded bg-[#33C482] px-[5px] py-[3px] font-[420] font-season text-[#202020] text-[14px] leading-[100%] tracking-[-0.02em]'>
+      <div className='absolute top-4 left-[23px] flex items-center rounded bg-[var(--brand-tertiary-2)] px-[5px] py-[3px] font-[420] font-season text-[var(--landing-text-dark)] text-sm leading-[100%] tracking-[-0.02em]'>
         You
       </div>
     </div>
@@ -212,7 +212,7 @@ export default function Collaboration() {
       ref={sectionRef}
       id='collaboration'
       aria-labelledby='collaboration-heading'
-      className='bg-[#1C1C1C]'
+      className='bg-[var(--landing-bg)]'
       style={{ cursor: isHovering ? 'none' : 'auto' }}
       onMouseMove={handleMouseMove}
       onMouseEnter={handleMouseEnter}
@@ -222,7 +222,7 @@ export default function Collaboration() {
       <style dangerouslySetInnerHTML={{ __html: CURSOR_KEYFRAMES }} />
 
       <DotGrid
-        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[var(--landing-bg-elevated)] border-y bg-[var(--landing-bg)] p-1.5'
         cols={120}
         rows={1}
         gap={6}
@@ -230,12 +230,12 @@ export default function Collaboration() {
 
       <div className='relative overflow-hidden'>
         <div className='grid grid-cols-1 md:grid-cols-[auto_1fr]'>
-          <div className='flex flex-col items-start gap-3 px-4 pt-[60px] pb-8 sm:gap-4 sm:px-8 md:gap-[20px] md:px-[80px] md:pt-[100px]'>
+          <div className='flex flex-col items-start gap-3 px-4 pt-[60px] pb-8 sm:gap-4 sm:px-8 md:gap-5 md:px-[80px] md:pt-[100px]'>
             <Badge
               variant='blue'
               size='md'
               dot
-              className='bg-[#33C482]/10 font-season text-[#33C482] uppercase tracking-[0.02em]'
+              className='bg-[var(--brand-tertiary-2)]/10 font-season text-[var(--brand-tertiary-2)] uppercase tracking-[0.02em]'
             >
               Teams
             </Badge>
@@ -249,14 +249,14 @@ export default function Collaboration() {
               collaboration
             </h2>
 
-            <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] md:text-[18px]'>
+            <p className='font-[430] font-season text-[#F6F6F0]/50 text-base leading-[150%] tracking-[0.02em] md:text-lg'>
               Grab your team. Build agents together <br className='hidden md:block' />
               in real-time inside your workspace.
             </p>
 
             <Link
               href='/signup'
-              className='group/cta mt-[12px] inline-flex h-[32px] cursor-none items-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+              className='group/cta mt-3 inline-flex h-[32px] cursor-none items-center gap-1.5 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-black text-sm transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
             >
               Build together
               <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -306,16 +306,16 @@ export default function Collaboration() {
           href='/blog/multiplayer'
           target='_blank'
           rel='noopener noreferrer'
-          className='relative mx-4 mb-6 flex cursor-none items-center gap-[14px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] px-[12px] py-[10px] transition-colors hover:border-[#3d3d3d] hover:bg-[#232323] sm:mx-8 md:absolute md:bottom-10 md:left-[80px] md:z-20 md:mx-0 md:mb-0'
+          className='relative mx-4 mb-6 flex cursor-none items-center gap-3.5 rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] px-3 py-2.5 transition-colors hover:border-[#3d3d3d] hover:bg-[var(--landing-bg-card)] sm:mx-8 md:absolute md:bottom-10 md:left-[80px] md:z-20 md:mx-0 md:mb-0'
         >
           <div className='relative h-7 w-11 shrink-0'>
             <Image src='/landing/multiplayer-cursors.svg' alt='' fill className='object-contain' />
           </div>
-          <div className='flex flex-col gap-[2px]'>
-            <span className='font-[430] font-season text-[#F6F6F0]/50 text-[12px] uppercase leading-[100%] tracking-[0.08em]'>
+          <div className='flex flex-col gap-0.5'>
+            <span className='font-[430] font-season text-[#F6F6F0]/50 text-caption uppercase leading-[100%] tracking-[0.08em]'>
               Blog
             </span>
-            <span className='font-[430] font-season text-[#F6F6F0] text-[14px] leading-[125%] tracking-[0.02em]'>
+            <span className='font-[430] font-season text-[#F6F6F0] text-sm leading-[125%] tracking-[0.02em]'>
               How we built realtime collaboration
             </span>
           </div>
@@ -323,7 +323,7 @@ export default function Collaboration() {
       </div>
 
       <DotGrid
-        className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+        className='overflow-hidden border-[var(--landing-bg-elevated)] border-y bg-[var(--landing-bg)] p-1.5'
         cols={120}
         rows={1}
         gap={6}
diff --git a/apps/sim/app/(home)/components/enterprise/enterprise.tsx b/apps/sim/app/(home)/components/enterprise/enterprise.tsx
index 63f37fad989..a31523e773d 100644
--- a/apps/sim/app/(home)/components/enterprise/enterprise.tsx
+++ b/apps/sim/app/(home)/components/enterprise/enterprise.tsx
@@ -134,13 +134,27 @@ const ENTRY_TEMPLATES: Omit<LogEntry, 'id' | 'insertedAt'>[] = [
 
 const INITIAL_OFFSETS_MS = [0, 20_000, 75_000, 180_000, 360_000, 600_000]
 
-const MARQUEE_KEYFRAMES = `
-  @keyframes marquee {
+const ENTERPRISE_FEATURE_MARQUEE_STYLES = `
+  @keyframes enterprise-feature-marquee {
     0% { transform: translateX(0); }
     100% { transform: translateX(-25%); }
   }
+  .enterprise-feature-marquee-track {
+    animation: enterprise-feature-marquee 30s linear infinite;
+  }
+  .enterprise-feature-marquee:hover .enterprise-feature-marquee-track {
+    animation-play-state: paused;
+  }
+  .enterprise-feature-marquee-tag {
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
   @media (prefers-reduced-motion: reduce) {
-    @keyframes marquee { 0%, 100% { transform: none; } }
+    .enterprise-feature-marquee-track {
+      animation: none;
+    }
+    .enterprise-feature-marquee-tag {
+      transition: none;
+    }
   }
 `
 
@@ -181,7 +195,7 @@ function AuditRow({ entry, index }: AuditRowProps) {
       />
 
       {/* Row content */}
-      <div className='flex min-w-0 items-center gap-3 py-[10px] pr-4 pl-5'>
+      <div className='flex min-w-0 items-center gap-3 py-2.5 pr-4 pl-5'>
         {/* Actor avatar */}
         <div
           className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full'
@@ -193,15 +207,20 @@ function AuditRow({ entry, index }: AuditRowProps) {
         </div>
 
         {/* Time */}
-        <span className='w-[56px] shrink-0 font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em]'>
+        <span className='w-[56px] shrink-0 font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em]'>
           {timeAgo}
         </span>
 
         <span className='min-w-0 truncate font-[430] font-season text-[12px] leading-none tracking-[0.02em]'>
           <span className='text-[#F6F6F6]/80'>{entry.actor}</span>
           <span className='hidden sm:inline'>
-            <span className='text-[#F6F6F6]/40'> · </span>
-            <span className='text-[#F6F6F6]/55'>{entry.description}</span>
+            <span className='text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)]'>
+              {' '}
+              ·{' '}
+            </span>
+            <span className='text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
+              {entry.description}
+            </span>
           </span>
         </span>
       </div>
@@ -457,13 +476,13 @@ function AccessControlPanel() {
 
 function TrustStrip() {
   return (
-    <div className='mx-6 mt-4 grid grid-cols-1 overflow-hidden rounded-[8px] border border-[#2A2A2A] sm:grid-cols-3 md:mx-8'>
+    <div className='mx-6 mt-4 grid grid-cols-1 overflow-hidden rounded-lg border border-[var(--landing-bg-elevated)] sm:grid-cols-3 md:mx-8'>
       {/* SOC 2 + HIPAA combined */}
       <Link
         href='https://trust.delve.co/sim-studio'
         target='_blank'
         rel='noopener noreferrer'
-        className='group flex items-center gap-3 border-[#2A2A2A] border-b px-4 py-[14px] transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
+        className='group flex items-center gap-3 border-[var(--landing-bg-elevated)] border-b px-4 py-3.5 transition-colors hover:bg-[var(--landing-bg-surface)] sm:border-r sm:border-b-0'
       >
         <Image
           src='/footer/soc2.png'
@@ -473,10 +492,10 @@ function TrustStrip() {
           className='shrink-0 object-contain'
         />
         <div className='flex flex-col gap-[3px]'>
-          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+          <strong className='font-[430] font-season text-small text-white leading-none'>
             SOC 2 & HIPAA
           </strong>
-          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em] transition-colors group-hover:text-[#F6F6F6]/55'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
             Type II · PHI protected →
           </span>
         </div>
@@ -487,31 +506,31 @@ function TrustStrip() {
         href='https://github.com/simstudioai/sim'
         target='_blank'
         rel='noopener noreferrer'
-        className='group flex items-center gap-3 border-[#2A2A2A] border-b px-4 py-[14px] transition-colors hover:bg-[#212121] sm:border-r sm:border-b-0'
+        className='group flex items-center gap-3 border-[var(--landing-bg-elevated)] border-b px-4 py-3.5 transition-colors hover:bg-[var(--landing-bg-surface)] sm:border-r sm:border-b-0'
       >
         <div className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[#FFCC02]/10'>
           <GithubIcon width={11} height={11} className='text-[#FFCC02]/75' />
         </div>
         <div className='flex flex-col gap-[3px]'>
-          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+          <strong className='font-[430] font-season text-small text-white leading-none'>
             Open Source
           </strong>
-          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em] transition-colors group-hover:text-[#F6F6F6]/55'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em] transition-colors group-hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'>
             View on GitHub →
           </span>
         </div>
       </Link>
 
       {/* SSO */}
-      <div className='flex items-center gap-3 px-4 py-[14px]'>
+      <div className='flex items-center gap-3 px-4 py-3.5'>
         <div className='flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded-full bg-[#2ABBF8]/10'>
           <Lock className='h-[14px] w-[14px] text-[#2ABBF8]/75' />
         </div>
         <div className='flex flex-col gap-[3px]'>
-          <strong className='font-[430] font-season text-[13px] text-white leading-none'>
+          <strong className='font-[430] font-season text-small text-white leading-none'>
             SSO & SCIM
           </strong>
-          <span className='font-[430] font-season text-[#F6F6F6]/30 text-[11px] leading-none tracking-[0.02em]'>
+          <span className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_30%,transparent)] text-xs leading-none tracking-[0.02em]'>
             Okta, Azure AD, Google
           </span>
         </div>
@@ -522,9 +541,13 @@ function TrustStrip() {
 
 export default function Enterprise() {
   return (
-    <section id='enterprise' aria-labelledby='enterprise-heading' className='bg-[#F6F6F6]'>
-      <div className='px-4 pt-[60px] pb-[40px] sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
-        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
+    <section
+      id='enterprise'
+      aria-labelledby='enterprise-heading'
+      className='bg-[var(--landing-bg-section)]'
+    >
+      <div className='px-4 pt-[60px] pb-10 sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
+        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-5'>
           <Badge
             variant='blue'
             size='md'
@@ -536,7 +559,7 @@ export default function Enterprise() {
 
           <h2
             id='enterprise-heading'
-            className='max-w-[600px] font-[430] font-season text-[#1C1C1C] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+            className='max-w-[600px] font-[430] font-season text-[32px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
           >
             Enterprise features for
             <br />
@@ -578,9 +601,9 @@ export default function Enterprise() {
 
           <TrustStrip />
 
-          {/* Scrolling feature ticker */}
-          <div className='relative mt-6 overflow-hidden border-[#2A2A2A] border-t'>
-            <style dangerouslySetInnerHTML={{ __html: MARQUEE_KEYFRAMES }} />
+          {/* Scrolling feature ticker — keyframe loop; pause on hover. Tags use transitions for hover. */}
+          <div className='enterprise-feature-marquee relative mt-6 overflow-hidden border-[var(--landing-bg-elevated)] border-t'>
+            <style dangerouslySetInnerHTML={{ __html: ENTERPRISE_FEATURE_MARQUEE_STYLES }} />
             {/* Fade edges */}
             <div
               aria-hidden='true'
@@ -593,12 +616,12 @@ export default function Enterprise() {
               style={{ background: 'linear-gradient(to left, #1C1C1C, transparent)' }}
             />
             {/* Duplicate tags for seamless loop */}
-            <div className='flex w-max' style={{ animation: 'marquee 30s linear infinite' }}>
+            <div className='enterprise-feature-marquee-track flex w-max'>
               {[...FEATURE_TAGS, ...FEATURE_TAGS, ...FEATURE_TAGS, ...FEATURE_TAGS].map(
                 (tag, i) => (
                   <span
                     key={i}
-                    className='whitespace-nowrap border-[#2A2A2A] border-r px-5 py-4 font-[430] font-season text-[#F6F6F6]/40 text-[13px] leading-none tracking-[0.02em]'
+                    className='enterprise-feature-marquee-tag whitespace-nowrap border-[var(--landing-bg-elevated)] border-r px-5 py-4 font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)] text-small leading-none tracking-[0.02em] hover:bg-white/[0.04] hover:text-[color-mix(in_srgb,var(--landing-text-subtle)_55%,transparent)]'
                   >
                     {tag}
                   </span>
@@ -607,8 +630,8 @@ export default function Enterprise() {
             </div>
           </div>
 
-          <div className='flex items-center justify-between border-[#2A2A2A] border-t px-6 py-5 md:px-8 md:py-6'>
-            <p className='font-[430] font-season text-[#F6F6F6]/40 text-[15px] leading-[150%] tracking-[0.02em]'>
+          <div className='flex items-center justify-between border-[var(--landing-bg-elevated)] border-t px-6 py-5 md:px-8 md:py-6'>
+            <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)] text-base leading-[150%] tracking-[0.02em]'>
               Ready for growth?
             </p>
             <Link
diff --git a/apps/sim/app/(home)/components/features/features.tsx b/apps/sim/app/(home)/components/features/features.tsx
index b22cbee92db..2ae9a7c33e6 100644
--- a/apps/sim/app/(home)/components/features/features.tsx
+++ b/apps/sim/app/(home)/components/features/features.tsx
@@ -152,7 +152,7 @@ function DotGrid({
   return (
     <div
       aria-hidden='true'
-      className={`h-full shrink-0 bg-[#F6F6F6] p-[6px] ${borderLeft ? 'border-[#E9E9E9] border-l' : ''}`}
+      className={`h-full shrink-0 bg-[var(--landing-bg-section)] p-1.5 ${borderLeft ? 'border-[#ededed] border-l' : ''}`}
       style={{
         width: width ? `${width}px` : undefined,
         display: 'grid',
@@ -181,7 +181,7 @@ export default function Features() {
     <section
       id='features'
       aria-labelledby='features-heading'
-      className='relative overflow-hidden bg-[#F6F6F6]'
+      className='relative overflow-hidden bg-[var(--landing-bg-section)]'
     >
       <div aria-hidden='true' className='absolute top-0 left-0 w-full'>
         <Image
@@ -195,10 +195,7 @@ export default function Features() {
       </div>
 
       <div className='relative z-10 pt-[60px] lg:pt-[100px]'>
-        <div
-          ref={sectionRef}
-          className='flex flex-col items-start gap-[20px] px-[24px] lg:px-[80px]'
-        >
+        <div ref={sectionRef} className='flex flex-col items-start gap-5 px-6 lg:px-[80px]'>
           <Badge
             variant='blue'
             size='md'
@@ -216,31 +213,31 @@ export default function Features() {
           </Badge>
           <h2
             id='features-heading'
-            className='max-w-[900px] font-[430] font-season text-[#1C1C1C] text-[28px] leading-[110%] tracking-[-0.02em] md:text-[40px]'
+            className='max-w-[900px] font-[430] font-season text-[28px] text-[var(--landing-text-dark)] leading-[110%] tracking-[-0.02em] md:text-[40px]'
           >
             {HEADING_LETTERS.map((char, i) => (
               <ScrollLetter key={i} scrollYProgress={scrollYProgress} charIndex={i}>
                 {char}
               </ScrollLetter>
             ))}
-            <span className='text-[#1C1C1C]/40'>
+            <span className='text-[color-mix(in_srgb,var(--landing-text-subtle)_40%,transparent)]'>
               Design powerful workflows, connect your data, and monitor every run — all in one
               platform.
             </span>
           </h2>
         </div>
 
-        <div className='relative mt-[40px] pb-[40px] lg:mt-[73px] lg:pb-[80px]'>
+        <div className='relative mt-10 pb-10 lg:mt-[73px] lg:pb-[80px]'>
           <div
             aria-hidden='true'
-            className='absolute top-0 bottom-0 left-[80px] z-20 hidden w-px bg-[#E9E9E9] lg:block'
+            className='absolute top-0 bottom-0 left-[80px] z-20 hidden w-px bg-[#ededed] lg:block'
           />
           <div
             aria-hidden='true'
-            className='absolute top-0 right-[80px] bottom-0 z-20 hidden w-px bg-[#E9E9E9] lg:block'
+            className='absolute top-0 right-[80px] bottom-0 z-20 hidden w-px bg-[#ededed] lg:block'
           />
 
-          <div className='flex h-[68px] border border-[#E9E9E9] lg:overflow-hidden'>
+          <div className='flex h-[68px] border border-[#ededed] lg:overflow-hidden'>
             <div className='h-full shrink-0'>
               <div className='h-full lg:hidden'>
                 <DotGrid cols={3} rows={8} width={24} />
@@ -258,7 +255,7 @@ export default function Features() {
                   role='tab'
                   aria-selected={index === activeTab}
                   onClick={() => setActiveTab(index)}
-                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-[12px] font-medium font-season text-[#212121] text-[12px] uppercase lg:px-0 lg:text-[14px]${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#E9E9E9] border-l' : ''}`}
+                  className={`relative h-full flex-1 items-center justify-center whitespace-nowrap px-3 font-medium font-season text-[var(--landing-text-dark)] text-caption uppercase lg:px-0 lg:text-sm${tab.hideOnMobile ? ' hidden lg:flex' : ' flex'}${index > 0 ? ' border-[#ededed] border-l' : ''}`}
                   style={{ backgroundColor: index === activeTab ? '#FDFDFD' : '#F6F6F6' }}
                 >
                   {tab.mobileLabel ? (
@@ -298,19 +295,19 @@ export default function Features() {
             </div>
           </div>
 
-          <div className='mt-[32px] flex flex-col gap-[24px] px-[24px] lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
-            <div className='flex flex-col items-start justify-between gap-[24px] pt-[20px] lg:h-[560px] lg:gap-0'>
-              <div className='flex flex-col items-start gap-[16px]'>
-                <h3 className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
+          <div className='mt-8 flex flex-col gap-6 px-6 lg:mt-[60px] lg:grid lg:grid-cols-[1fr_2.8fr] lg:gap-[60px] lg:px-[120px]'>
+            <div className='flex flex-col items-start justify-between gap-6 pt-5 lg:h-[560px] lg:gap-0'>
+              <div className='flex flex-col items-start gap-4'>
+                <h3 className='font-[430] font-season text-[24px] text-[var(--landing-text-dark)] leading-[120%] tracking-[-0.02em] lg:text-[28px]'>
                   {FEATURE_TABS[activeTab].title}
                 </h3>
-                <p className='font-[430] font-season text-[#1C1C1C]/50 text-[16px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
+                <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_50%,transparent)] text-md leading-[150%] tracking-[0.02em] lg:text-lg'>
                   {FEATURE_TABS[activeTab].description}
                 </p>
               </div>
               <Link
                 href='/signup'
-                className='group/cta inline-flex h-[32px] items-center gap-[6px] rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
+                className='group/cta inline-flex h-[32px] items-center gap-1.5 rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-2.5 font-[430] font-season text-sm text-white transition-colors hover:border-[var(--landing-bg-elevated)] hover:bg-[var(--landing-bg-elevated)]'
               >
                 {FEATURE_TABS[activeTab].cta}
                 <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -336,7 +333,7 @@ export default function Features() {
             <FeaturesPreview activeTab={activeTab} />
           </div>
 
-          <div aria-hidden='true' className='mt-[60px] hidden h-px bg-[#E9E9E9] lg:block' />
+          <div aria-hidden='true' className='mt-[60px] hidden h-px bg-[#ededed] lg:block' />
         </div>
       </div>
     </section>
diff --git a/apps/sim/app/(home)/components/footer/footer-cta.tsx b/apps/sim/app/(home)/components/footer/footer-cta.tsx
index c01276e2b2b..25b1c018cf7 100644
--- a/apps/sim/app/(home)/components/footer/footer-cta.tsx
+++ b/apps/sim/app/(home)/components/footer/footer-cta.tsx
@@ -9,7 +9,7 @@ import { useAnimatedPlaceholder } from '@/app/workspace/[workspaceId]/home/hooks
 const MAX_HEIGHT = 120
 
 const CTA_BUTTON =
-  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+  'inline-flex items-center h-[32px] rounded-[5px] border px-2.5 font-[430] font-season text-sm'
 
 export function FooterCTA() {
   const landingSubmit = useLandingSubmit()
@@ -42,13 +42,13 @@ export function FooterCTA() {
 
   return (
     <div className='flex flex-col items-center px-4 pt-[120px] pb-[100px] sm:px-8 md:px-[80px]'>
-      <h2 className='text-center font-[430] font-season text-[#1C1C1C] text-[28px] leading-[100%] tracking-[-0.02em] sm:text-[32px] md:text-[36px]'>
+      <h2 className='text-center font-[430] font-season text-[28px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em] sm:text-[32px] md:text-[36px]'>
         What should we get done?
       </h2>
 
       <div className='mt-8 w-full max-w-[42rem]'>
         <div
-          className='cursor-text rounded-[20px] border border-[#E5E5E5] bg-white px-[10px] py-[8px] shadow-sm'
+          className='cursor-text rounded-[20px] border border-[var(--landing-bg-skeleton)] bg-white px-2.5 py-2 shadow-sm'
           onClick={() => textareaRef.current?.focus()}
         >
           <textarea
@@ -59,7 +59,7 @@ export function FooterCTA() {
             onInput={handleInput}
             placeholder={animatedPlaceholder}
             rows={2}
-            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-[4px] py-[4px] font-body text-[#1C1C1C] text-[15px] leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[#999] focus-visible:ring-0'
+            className='m-0 box-border min-h-[48px] w-full resize-none border-0 bg-transparent px-1 py-1 font-body text-[var(--landing-text-dark)] text-base leading-[24px] tracking-[-0.015em] outline-none placeholder:font-[380] placeholder:text-[var(--landing-text-muted)] focus-visible:ring-0'
             style={{ caretColor: '#1C1C1C', maxHeight: `${MAX_HEIGHT}px` }}
           />
           <div className='flex items-center justify-end'>
@@ -79,18 +79,18 @@ export function FooterCTA() {
         </div>
       </div>
 
-      <div className='mt-8 flex gap-[8px]'>
+      <div className='mt-8 flex gap-2'>
         <a
           href='https://docs.sim.ai'
           target='_blank'
           rel='noopener noreferrer'
-          className={`${CTA_BUTTON} border-[#D4D4D4] text-[#1C1C1C] transition-colors hover:bg-[#E8E8E8]`}
+          className={`${CTA_BUTTON} border-[#D4D4D4] text-[var(--landing-text-dark)] transition-colors hover:bg-[var(--landing-bg-skeleton)]`}
         >
           Docs
         </a>
         <Link
           href='/signup'
-          className={`${CTA_BUTTON} gap-[8px] border-[#1C1C1C] bg-[#1C1C1C] text-white transition-colors hover:border-[#333] hover:bg-[#333]`}
+          className={`${CTA_BUTTON} gap-2 border-[var(--landing-bg)] bg-[var(--landing-bg)] text-white transition-colors hover:border-[var(--landing-bg-elevated)] hover:bg-[var(--landing-bg-elevated)]`}
         >
           Get started
         </Link>
diff --git a/apps/sim/app/(home)/components/footer/footer.tsx b/apps/sim/app/(home)/components/footer/footer.tsx
index 120ced0bdfc..3df96136616 100644
--- a/apps/sim/app/(home)/components/footer/footer.tsx
+++ b/apps/sim/app/(home)/components/footer/footer.tsx
@@ -2,7 +2,8 @@ import Image from 'next/image'
 import Link from 'next/link'
 import { FooterCTA } from '@/app/(home)/components/footer/footer-cta'
 
-const LINK_CLASS = 'text-[14px] text-[#999] transition-colors hover:text-[#ECECEC]'
+const LINK_CLASS =
+  'text-sm text-[var(--landing-text-muted)] transition-colors hover:text-[var(--landing-text)]'
 
 interface FooterItem {
   label: string
@@ -81,8 +82,8 @@ const LEGAL_LINKS: FooterItem[] = [
 function FooterColumn({ title, items }: { title: string; items: FooterItem[] }) {
   return (
     <div>
-      <h3 className='mb-[16px] font-medium text-[#ECECEC] text-[14px]'>{title}</h3>
-      <div className='flex flex-col gap-[10px]'>
+      <h3 className='mb-4 font-medium text-[var(--landing-text)] text-sm'>{title}</h3>
+      <div className='flex flex-col gap-2.5'>
         {items.map(({ label, href, external }) =>
           external ? (
             <a
@@ -113,16 +114,16 @@ export default function Footer({ hideCTA }: FooterProps) {
   return (
     <footer
       role='contentinfo'
-      className={`bg-[#F6F6F6] pb-[40px] font-[430] font-season text-[14px]${hideCTA ? ' pt-[40px]' : ''}`}
+      className={`bg-[var(--landing-bg-section)] pb-10 font-[430] font-season text-sm${hideCTA ? ' pt-10' : ''}`}
     >
       {!hideCTA && <FooterCTA />}
       <div className='px-4 sm:px-8 md:px-[80px]'>
-        <div className='relative overflow-hidden rounded-lg bg-[#1C1C1C] px-6 pt-[40px] pb-[32px] sm:px-10 sm:pt-[48px] sm:pb-[40px]'>
+        <div className='relative overflow-hidden rounded-lg bg-[var(--landing-bg)] px-6 pt-10 pb-8 sm:px-10 sm:pt-12 sm:pb-10'>
           <nav
             aria-label='Footer navigation'
             className='relative z-[1] grid grid-cols-2 gap-x-8 gap-y-10 sm:grid-cols-3 lg:grid-cols-7'
           >
-            <div className='col-span-2 flex flex-col gap-[24px] sm:col-span-1'>
+            <div className='col-span-2 flex flex-col gap-6 sm:col-span-1'>
               <Link href='/' aria-label='Sim home'>
                 <Image
                   src='/logo/sim-landing.svg'
diff --git a/apps/sim/app/(home)/components/hero/hero.tsx b/apps/sim/app/(home)/components/hero/hero.tsx
index d6c75765ca1..d183e438d38 100644
--- a/apps/sim/app/(home)/components/hero/hero.tsx
+++ b/apps/sim/app/(home)/components/hero/hero.tsx
@@ -25,7 +25,7 @@ const LandingPreview = dynamic(
 
 /** Shared base classes for CTA link buttons — matches Deploy/Run button styling in the preview panel. */
 const CTA_BASE =
-  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+  'inline-flex items-center h-[32px] rounded-[5px] border px-2.5 font-[430] font-season text-sm'
 
 export default function Hero() {
   const blockStates = useBlockCycle()
@@ -34,7 +34,7 @@ export default function Hero() {
     <section
       id='hero'
       aria-labelledby='hero-heading'
-      className='relative flex flex-col items-center overflow-hidden bg-[#1C1C1C] pt-[60px] pb-[12px] lg:pt-[100px]'
+      className='relative flex flex-col items-center overflow-hidden bg-[var(--landing-bg)] pt-[60px] pb-3 lg:pt-[100px]'
     >
       <p className='sr-only'>
         Sim is the open-source platform to build AI agents and run your agentic workforce. Connect
@@ -58,30 +58,30 @@ export default function Hero() {
         <Image src='/landing/card-right.svg' alt='' fill className='object-contain' />
       </div>
 
-      <div className='relative z-10 flex flex-col items-center gap-[12px]'>
+      <div className='relative z-10 flex flex-col items-center gap-3'>
         <h1
           id='hero-heading'
           className='font-[430] font-season text-[36px] text-white leading-[100%] tracking-[-0.02em] sm:text-[48px] lg:text-[72px]'
         >
           Build AI Agents
         </h1>
-        <p className='font-[430] font-season text-[#F6F6F6]/60 text-[15px] leading-[125%] tracking-[0.02em] lg:text-[18px]'>
+        <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-base leading-[125%] tracking-[0.02em] lg:text-lg'>
           Sim is the AI Workspace for Agent Builders.
         </p>
 
-        <div className='mt-[12px] flex items-center gap-[8px]'>
+        <div className='mt-3 flex items-center gap-2'>
           <a
             href='https://form.typeform.com/to/jqCO12pF'
             target='_blank'
             rel='noopener noreferrer'
-            className={`${CTA_BASE} border-[#3d3d3d] text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]`}
+            className={`${CTA_BASE} border-[#3d3d3d] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]`}
             aria-label='Get a demo'
           >
             Get a demo
           </a>
           <Link
             href='/signup'
-            className={`${CTA_BASE} gap-[8px] border-[#FFFFFF] bg-[#FFFFFF] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
+            className={`${CTA_BASE} gap-2 border-white bg-white text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
             aria-label='Get started with Sim'
           >
             Get started
@@ -118,7 +118,7 @@ export default function Hero() {
           <BlocksRightSideAnimated animState={blockStates.rightSide} />
         </div>
 
-        <div className='relative z-10 overflow-hidden rounded border border-[#2A2A2A]'>
+        <div className='relative z-10 overflow-hidden rounded border border-[var(--landing-bg-elevated)]'>
           <LandingPreview />
         </div>
       </div>
diff --git a/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx b/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
index 068a1c3a2f6..3db51c65c9b 100644
--- a/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
+++ b/apps/sim/app/(home)/components/navbar/components/blog-dropdown.tsx
@@ -26,7 +26,7 @@ function BlogCard({
     <Link
       href={`/blog/${slug}`}
       className={cn(
-        'group/card flex flex-col overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]',
+        'group/card flex flex-col overflow-hidden rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] transition-colors hover:border-[#3D3D3D] hover:bg-[var(--landing-bg-elevated)]',
         className
       )}
       prefetch={false}
@@ -39,9 +39,9 @@ function BlogCard({
           className='h-full w-full object-cover transition-transform duration-200 group-hover/card:scale-[1.02]'
         />
       </div>
-      <div className='flex-shrink-0 px-[10px] py-[6px]'>
+      <div className='flex-shrink-0 px-2.5 py-1.5'>
         <span
-          className='font-[430] font-season text-[#cdcdcd] leading-[140%]'
+          className='font-[430] font-season text-[var(--landing-text-body)] leading-[140%]'
           style={{ fontSize: titleSize }}
         >
           {title}
@@ -61,8 +61,8 @@ export function BlogDropdown({ posts }: BlogDropdownProps) {
   if (!featured) return null
 
   return (
-    <div className='w-[560px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
-      <div className='grid grid-cols-3 gap-[8px]'>
+    <div className='w-[560px] rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] p-4 shadow-overlay'>
+      <div className='grid grid-cols-3 gap-2'>
         <BlogCard
           slug={featured.slug}
           image={featured.ogImage}
diff --git a/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx b/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
index 9d5daa4fa2f..45836540299 100644
--- a/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
+++ b/apps/sim/app/(home)/components/navbar/components/docs-dropdown.tsx
@@ -36,15 +36,15 @@ const RESOURCE_CARDS = [
 
 export function DocsDropdown() {
   return (
-    <div className='w-[480px] rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] p-[16px] shadow-[0_16px_48px_rgba(0,0,0,0.4)]'>
-      <div className='grid grid-cols-2 gap-[10px]'>
+    <div className='w-[480px] rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] p-4 shadow-overlay'>
+      <div className='grid grid-cols-2 gap-2.5'>
         {PREVIEW_CARDS.map((card) => (
           <a
             key={card.title}
             href={card.href}
             target='_blank'
             rel='noopener noreferrer'
-            className='group/card overflow-hidden rounded-[5px] border border-[#2A2A2A] bg-[#1C1C1C] transition-colors hover:border-[#3D3D3D] hover:bg-[#2A2A2A]'
+            className='group/card overflow-hidden rounded-[5px] border border-[var(--landing-bg-elevated)] bg-[var(--landing-bg)] transition-colors hover:border-[#3D3D3D] hover:bg-[var(--landing-bg-elevated)]'
           >
             <div className='h-[120px] w-full overflow-hidden bg-[#141414]'>
               <img
@@ -54,8 +54,8 @@ export function DocsDropdown() {
                 className='h-full w-full scale-[1.04] object-cover transition-transform duration-200 group-hover/card:scale-[1.06]'
               />
             </div>
-            <div className='px-[10px] py-[8px]'>
-              <span className='font-[430] font-season text-[#cdcdcd] text-[13px]'>
+            <div className='px-2.5 py-2'>
+              <span className='font-[430] font-season text-[var(--landing-text-body)] text-small'>
                 {card.title}
               </span>
             </div>
@@ -63,7 +63,7 @@ export function DocsDropdown() {
         ))}
       </div>
 
-      <div className='mt-[8px] grid grid-cols-3 gap-[8px]'>
+      <div className='mt-2 grid grid-cols-3 gap-2'>
         {RESOURCE_CARDS.map((card) => {
           const Icon = card.icon
           return (
@@ -72,15 +72,15 @@ export function DocsDropdown() {
               href={card.href}
               target='_blank'
               rel='noopener noreferrer'
-              className='flex flex-col gap-[4px] rounded-[5px] border border-[#2A2A2A] px-[10px] py-[8px] transition-colors hover:border-[#3D3D3D] hover:bg-[#232323]'
+              className='flex flex-col gap-1 rounded-[5px] border border-[var(--landing-bg-elevated)] px-2.5 py-2 transition-colors hover:border-[#3D3D3D] hover:bg-[var(--landing-bg-card)]'
             >
-              <div className='flex items-center gap-[6px]'>
-                <Icon className='h-[13px] w-[13px] flex-shrink-0 text-[#939393]' />
-                <span className='font-[430] font-season text-[#cdcdcd] text-[12px]'>
+              <div className='flex items-center gap-1.5'>
+                <Icon className='h-[13px] w-[13px] flex-shrink-0 text-[var(--landing-text-icon)]' />
+                <span className='font-[430] font-season text-[var(--landing-text-body)] text-caption'>
                   {card.title}
                 </span>
               </div>
-              <span className='font-season text-[#939393] text-[11px] leading-[130%]'>
+              <span className='font-season text-[var(--landing-text-icon)] text-xs leading-[130%]'>
                 {card.description}
               </span>
             </a>
diff --git a/apps/sim/app/(home)/components/navbar/components/github-stars.tsx b/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
index 1c16222435a..f33f7619c18 100644
--- a/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
+++ b/apps/sim/app/(home)/components/navbar/components/github-stars.tsx
@@ -31,7 +31,7 @@ export function GitHubStars() {
       href='https://github.com/simstudioai/sim'
       target='_blank'
       rel='noopener noreferrer'
-      className='flex items-center gap-[8px] px-[12px]'
+      className='flex items-center gap-2 px-3'
       aria-label={`GitHub repository — ${stars} stars`}
     >
       <GithubOutlineIcon className='h-[14px] w-[14px]' />
diff --git a/apps/sim/app/(home)/components/navbar/navbar.tsx b/apps/sim/app/(home)/components/navbar/navbar.tsx
index 35cea4f68a7..c7ce8aabf65 100644
--- a/apps/sim/app/(home)/components/navbar/navbar.tsx
+++ b/apps/sim/app/(home)/components/navbar/navbar.tsx
@@ -30,8 +30,8 @@ const NAV_LINKS: NavLink[] = [
   { label: 'Enterprise', href: 'https://form.typeform.com/to/jqCO12pF', external: true },
 ]
 
-const LOGO_CELL = 'flex items-center pl-[20px] lg:pl-[80px] pr-[20px]'
-const LINK_CELL = 'flex items-center px-[14px]'
+const LOGO_CELL = 'flex items-center pl-5 lg:pl-[80px] pr-5'
+const LINK_CELL = 'flex items-center px-3.5'
 
 interface NavbarProps {
   logoOnly?: boolean
@@ -88,7 +88,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
   return (
     <nav
       aria-label='Primary navigation'
-      className='relative flex h-[52px] border-[#2A2A2A] border-b-[1px] bg-[#1C1C1C] font-[430] font-season text-[#ECECEC] text-[14px]'
+      className='relative flex h-[52px] border-[var(--landing-bg-elevated)] border-b-[1px] bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)] text-sm'
       itemScope
       itemType='https://schema.org/SiteNavigationElement'
     >
@@ -128,9 +128,9 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
               const isHighlighted = isActive || isThisHovered
               const isDimmed = anyHighlighted && !isHighlighted
               const linkClass = cn(
-                icon ? `${LINK_CELL} gap-[8px]` : LINK_CELL,
+                icon ? `${LINK_CELL} gap-2` : LINK_CELL,
                 'transition-colors duration-200',
-                isDimmed && 'text-[#F6F6F6]/60'
+                isDimmed && 'text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)]'
               )
               const chevron = icon === 'chevron' && <NavChevron open={isActive} />
 
@@ -154,7 +154,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
 
                     <div
                       className={cn(
-                        '-mt-[2px] absolute top-full left-0 z-50',
+                        '-mt-0.5 absolute top-full left-0 z-50',
                         isActive
                           ? 'pointer-events-auto opacity-100'
                           : 'pointer-events-none opacity-0'
@@ -206,27 +206,27 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
 
           <div className='hidden flex-1 lg:block' />
 
-          <div className='hidden items-center gap-[8px] pr-[80px] pl-[20px] lg:flex'>
+          <div className='hidden items-center gap-2 pr-[80px] pl-5 lg:flex'>
             <Link
               href='/login'
-              className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+              className='inline-flex h-[30px] items-center rounded-[5px] border border-[#3d3d3d] px-[9px] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
               aria-label='Log in'
             >
               Log in
             </Link>
             <Link
               href='/signup'
-              className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+              className='inline-flex h-[30px] items-center gap-[7px] rounded-[5px] border border-white bg-white px-[9px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
               aria-label='Get started with Sim'
             >
               Get started
             </Link>
           </div>
 
-          <div className='flex flex-1 items-center justify-end pr-[20px] lg:hidden'>
+          <div className='flex flex-1 items-center justify-end pr-5 lg:hidden'>
             <button
               type='button'
-              className='flex h-[32px] w-[32px] items-center justify-center rounded-[5px] transition-colors hover:bg-[#2A2A2A]'
+              className='flex h-[32px] w-[32px] items-center justify-center rounded-[5px] transition-colors hover:bg-[var(--landing-bg-elevated)]'
               onClick={() => setMobileMenuOpen((prev) => !prev)}
               aria-label={mobileMenuOpen ? 'Close menu' : 'Open menu'}
               aria-expanded={mobileMenuOpen}
@@ -237,19 +237,19 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
 
           <div
             className={cn(
-              'fixed inset-x-0 top-[52px] bottom-0 z-50 flex flex-col overflow-y-auto bg-[#1C1C1C] font-[430] font-season text-[14px] transition-all duration-200 lg:hidden',
+              'fixed inset-x-0 top-[52px] bottom-0 z-50 flex flex-col overflow-y-auto bg-[var(--landing-bg)] font-[430] font-season text-sm transition-all duration-200 lg:hidden',
               mobileMenuOpen ? 'visible opacity-100' : 'invisible opacity-0'
             )}
           >
             <ul className='flex flex-col'>
               {NAV_LINKS.map(({ label, href, external }) => (
-                <li key={label} className='border-[#2A2A2A] border-b'>
+                <li key={label} className='border-[var(--landing-bg-elevated)] border-b'>
                   {external ? (
                     <a
                       href={href}
                       target='_blank'
                       rel='noopener noreferrer'
-                      className='flex items-center justify-between px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                      className='flex items-center justify-between px-5 py-3.5 text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
                       onClick={() => setMobileMenuOpen(false)}
                     >
                       {label}
@@ -258,7 +258,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                   ) : (
                     <Link
                       href={href}
-                      className='flex items-center px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                      className='flex items-center px-5 py-3.5 text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
                       onClick={() => setMobileMenuOpen(false)}
                     >
                       {label}
@@ -266,12 +266,12 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
                   )}
                 </li>
               ))}
-              <li className='border-[#2A2A2A] border-b'>
+              <li className='border-[var(--landing-bg-elevated)] border-b'>
                 <a
                   href='https://github.com/simstudioai/sim'
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='flex items-center gap-[8px] px-[20px] py-[14px] text-[#ECECEC] transition-colors active:bg-[#2A2A2A]'
+                  className='flex items-center gap-2 px-5 py-3.5 text-[var(--landing-text)] transition-colors active:bg-[var(--landing-bg-elevated)]'
                   onClick={() => setMobileMenuOpen(false)}
                 >
                   <GithubOutlineIcon className='h-[14px] w-[14px]' />
@@ -280,10 +280,10 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
               </li>
             </ul>
 
-            <div className='mt-auto flex flex-col gap-[10px] p-[20px]'>
+            <div className='mt-auto flex flex-col gap-2.5 p-5'>
               <Link
                 href='/login'
-                className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#3d3d3d] text-[#ECECEC] text-[14px] transition-colors active:bg-[#2A2A2A]'
+                className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#3d3d3d] text-[var(--landing-text)] text-sm transition-colors active:bg-[var(--landing-bg-elevated)]'
                 onClick={() => setMobileMenuOpen(false)}
                 aria-label='Log in'
               >
@@ -291,7 +291,7 @@ export default function Navbar({ logoOnly = false, blogPosts = [] }: NavbarProps
               </Link>
               <Link
                 href='/signup'
-                className='flex h-[32px] items-center justify-center rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                className='flex h-[32px] items-center justify-center rounded-[5px] border border-white bg-white text-black text-sm transition-colors active:bg-[#E0E0E0]'
                 onClick={() => setMobileMenuOpen(false)}
                 aria-label='Get started with Sim'
               >
@@ -376,7 +376,13 @@ function MobileMenuIcon({ open }: { open: boolean }) {
 
 function ExternalArrowIcon() {
   return (
-    <svg width='12' height='12' viewBox='0 0 12 12' fill='none' className='text-[#666]'>
+    <svg
+      width='12'
+      height='12'
+      viewBox='0 0 12 12'
+      fill='none'
+      className='text-[var(--landing-text-secondary)]'
+    >
       <path
         d='M3.5 2.5H9.5V8.5M9 3L3 9'
         stroke='currentColor'
diff --git a/apps/sim/app/(home)/components/pricing/pricing.tsx b/apps/sim/app/(home)/components/pricing/pricing.tsx
index 77c4b9b46f0..b0bdd048794 100644
--- a/apps/sim/app/(home)/components/pricing/pricing.tsx
+++ b/apps/sim/app/(home)/components/pricing/pricing.tsx
@@ -110,17 +110,17 @@ function PricingCard({ tier }: PricingCardProps) {
         <div className='flex flex-col'>
           <h3
             id={`${tier.id}-heading`}
-            className='font-[430] font-season text-[#1C1C1C] text-[24px] leading-[100%] tracking-[-0.02em]'
+            className='font-[430] font-season text-[24px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em]'
           >
             {tier.name}
           </h3>
-          <p className='mt-2 min-h-[44px] font-[430] font-season text-[#5c5c5c] text-[14px] leading-[125%] tracking-[0.02em]'>
+          <p className='mt-2 min-h-[44px] font-[430] font-season text-[#5c5c5c] text-sm leading-[125%] tracking-[0.02em]'>
             {tier.description}
           </p>
-          <p className='mt-4 flex items-center gap-1.5 font-[430] font-season text-[#1C1C1C] text-[20px] leading-[100%] tracking-[-0.02em]'>
+          <p className='mt-4 flex items-center gap-1.5 font-[430] font-season text-[20px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em]'>
             {tier.price}
             {tier.billingPeriod && (
-              <span className='text-[#737373] text-[16px]'>{tier.billingPeriod}</span>
+              <span className='text-[#737373] text-md'>{tier.billingPeriod}</span>
             )}
           </p>
           <div className='mt-4'>
@@ -129,21 +129,21 @@ function PricingCard({ tier }: PricingCardProps) {
                 href={tier.cta.href}
                 target='_blank'
                 rel='noopener noreferrer'
-                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:bg-[#F0F0F0]'
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-2.5 font-[430] font-season text-[var(--landing-text-dark)] text-sm transition-colors hover-hover:bg-[#F0F0F0]'
               >
                 {tier.cta.label}
               </a>
             ) : isPro ? (
               <Link
                 href={tier.cta.href}
-                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-[10px] font-[430] font-season text-[14px] text-white transition-colors hover:border-[#2A2A2A] hover:bg-[#2A2A2A]'
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#1D1D1D] bg-[#1D1D1D] px-2.5 font-[430] font-season text-sm text-white transition-colors hover:border-[var(--landing-bg-elevated)] hover:bg-[#F0F0F0]'
               >
                 {tier.cta.label}
               </Link>
             ) : (
               <Link
                 href={tier.cta.href}
-                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-[10px] font-[430] font-season text-[#1C1C1C] text-[14px] transition-colors hover:bg-[#F0F0F0]'
+                className='flex h-[32px] w-full items-center justify-center rounded-[5px] border border-[#E5E5E5] px-2.5 font-[430] font-season text-[var(--landing-text-dark)] text-sm transition-colors hover:bg-[#F0F0F0]'
               >
                 {tier.cta.label}
               </Link>
@@ -155,7 +155,7 @@ function PricingCard({ tier }: PricingCardProps) {
           {tier.features.map((feature) => (
             <li key={feature} className='flex items-center gap-2'>
               <CheckIcon color='#404040' />
-              <span className='font-[400] font-season text-[#5c5c5c] text-[14px] leading-[125%] tracking-[0.02em]'>
+              <span className='font-[400] font-season text-[#5c5c5c] text-sm leading-[125%] tracking-[0.02em]'>
                 {feature}
               </span>
             </li>
@@ -186,9 +186,13 @@ function PricingCard({ tier }: PricingCardProps) {
  */
 export default function Pricing() {
   return (
-    <section id='pricing' aria-labelledby='pricing-heading' className='bg-[#F6F6F6]'>
-      <div className='px-4 pt-[60px] pb-[40px] sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
-        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-[20px]'>
+    <section
+      id='pricing'
+      aria-labelledby='pricing-heading'
+      className='bg-[var(--landing-bg-section)]'
+    >
+      <div className='px-4 pt-[60px] pb-10 sm:px-8 sm:pt-[80px] sm:pb-0 md:px-[80px] md:pt-[100px]'>
+        <div className='flex flex-col items-start gap-3 sm:gap-4 md:gap-5'>
           <Badge
             variant='blue'
             size='md'
@@ -200,7 +204,7 @@ export default function Pricing() {
 
           <h2
             id='pricing-heading'
-            className='font-[430] font-season text-[#1C1C1C] text-[32px] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
+            className='font-[430] font-season text-[32px] text-[var(--landing-text-dark)] leading-[100%] tracking-[-0.02em] sm:text-[36px] md:text-[40px]'
           >
             Pricing
           </h2>
diff --git a/apps/sim/app/(home)/components/templates/templates.tsx b/apps/sim/app/(home)/components/templates/templates.tsx
index f38d69aba58..38490f36c15 100644
--- a/apps/sim/app/(home)/components/templates/templates.tsx
+++ b/apps/sim/app/(home)/components/templates/templates.tsx
@@ -337,7 +337,7 @@ function DotGrid({ className, cols, rows, gap = 0 }: DotGridProps) {
       }}
     >
       {Array.from({ length: cols * rows }, (_, i) => (
-        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[#2A2A2A]' />
+        <div key={i} className='h-[1.5px] w-[1.5px] rounded-full bg-[var(--landing-bg-elevated)]' />
       ))}
     </div>
   )
@@ -412,7 +412,7 @@ export default function Templates() {
       ref={sectionRef}
       id='templates'
       aria-labelledby='templates-heading'
-      className='mt-[40px] mb-[80px]'
+      className='mt-10 mb-[80px]'
     >
       <p className='sr-only'>
         Sim includes {TEMPLATE_WORKFLOWS.length} pre-built workflow templates covering OCR
@@ -422,9 +422,9 @@ export default function Templates() {
         customise it, and deploy in minutes.
       </p>
 
-      <div className='bg-[#1C1C1C]'>
+      <div className='bg-[var(--landing-bg)]'>
         <DotGrid
-          className='overflow-hidden border-[#2A2A2A] border-y bg-[#1C1C1C] p-[6px]'
+          className='overflow-hidden border-[var(--landing-bg-elevated)] border-y bg-[var(--landing-bg)] p-1.5'
           cols={160}
           rows={1}
           gap={6}
@@ -449,8 +449,8 @@ export default function Templates() {
             </svg>
           </div>
 
-          <div className='px-[20px] pt-[60px] lg:px-[80px] lg:pt-[100px]'>
-            <div className='flex flex-col items-start gap-[20px]'>
+          <div className='px-5 pt-[60px] lg:px-[80px] lg:pt-[100px]'>
+            <div className='flex flex-col items-start gap-5'>
               <Badge
                 variant='blue'
                 size='md'
@@ -471,7 +471,7 @@ export default function Templates() {
                 Ship your agent in minutes
               </h2>
 
-              <p className='font-[430] font-season text-[#F6F6F0]/50 text-[15px] leading-[150%] tracking-[0.02em] lg:text-[18px]'>
+              <p className='font-[430] font-season text-[#F6F6F0]/50 text-base leading-[150%] tracking-[0.02em] lg:text-lg'>
                 Pre-built templates for every use case—pick one, swap{' '}
                 <br className='hidden lg:inline' />
                 models and tools to fit your stack, and deploy.
@@ -479,11 +479,11 @@ export default function Templates() {
             </div>
           </div>
 
-          <div className='mt-[40px] flex border-[#2A2A2A] border-y lg:mt-[73px]'>
+          <div className='mt-10 flex border-[var(--landing-bg-elevated)] border-y lg:mt-[73px]'>
             <div className='shrink-0'>
               <div className='h-full lg:hidden'>
                 <DotGrid
-                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-r p-[4px]'
+                  className='h-full w-[24px] overflow-hidden border-[var(--landing-bg-elevated)] border-r p-1'
                   cols={2}
                   rows={55}
                   gap={4}
@@ -491,7 +491,7 @@ export default function Templates() {
               </div>
               <div className='hidden h-full lg:block'>
                 <DotGrid
-                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-r p-[6px]'
+                  className='h-full w-[80px] overflow-hidden border-[var(--landing-bg-elevated)] border-r p-1.5'
                   cols={8}
                   rows={55}
                   gap={6}
@@ -503,7 +503,7 @@ export default function Templates() {
               <div
                 role='tablist'
                 aria-label='Workflow templates'
-                className='flex w-full shrink-0 flex-col border-[#2A2A2A] lg:w-[300px] lg:border-r'
+                className='flex w-full shrink-0 flex-col border-[var(--landing-bg-elevated)] lg:w-[300px] lg:border-r'
               >
                 {TEMPLATE_WORKFLOWS.map((workflow, index) => {
                   const isActive = index === activeIndex
@@ -521,7 +521,7 @@ export default function Templates() {
                           isActive
                             ? 'z-10'
                             : cn(
-                                'flex items-center px-[12px] py-[10px] hover:bg-[#232323]/50',
+                                'flex items-center px-3 py-2.5 hover:bg-[var(--landing-bg-card)]/50',
                                 index < TEMPLATE_WORKFLOWS.length - 1 &&
                                   'shadow-[inset_0_-1px_0_0_#2A2A2A]'
                               )
@@ -543,8 +543,8 @@ export default function Templates() {
                                   className='absolute right-[-8px] bottom-0 left-2 h-2'
                                   style={buildBottomWallStyle(depth)}
                                 />
-                                <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-[12px] py-[10px] shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
-                                  <span className='flex-1 font-[430] font-season text-[16px] text-white'>
+                                <div className='-translate-y-2 relative flex translate-x-2 items-center bg-[#242424] px-3 py-2.5 shadow-[inset_0_0_0_1.5px_#3E3E3E]'>
+                                  <span className='flex-1 font-[430] font-season text-md text-white'>
                                     {workflow.name}
                                   </span>
                                   <ChevronDown
@@ -556,7 +556,7 @@ export default function Templates() {
                             )
                           })()
                         ) : (
-                          <span className='font-[430] font-season text-[#F6F6F0]/50 text-[16px]'>
+                          <span className='font-[430] font-season text-[#F6F6F0]/50 text-md'>
                             {workflow.name}
                           </span>
                         )}
@@ -571,19 +571,19 @@ export default function Templates() {
                             transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }}
                             className='overflow-hidden'
                           >
-                            <div className='aspect-[16/10] w-full border-[#2A2A2A] border-y bg-[#1b1b1b]'>
+                            <div className='aspect-[16/10] w-full border-[var(--landing-bg-elevated)] border-y bg-[#1b1b1b]'>
                               <LandingPreviewWorkflow
                                 workflow={workflow}
                                 animate
                                 fitViewOptions={{ padding: 0.15, maxZoom: 1.3 }}
                               />
                             </div>
-                            <div className='p-[12px]'>
+                            <div className='p-3'>
                               <button
                                 type='button'
                                 onClick={handleUseTemplate}
                                 disabled={isPreparingTemplate}
-                                className='inline-flex h-[32px] w-full cursor-pointer items-center justify-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] font-[430] font-season text-[14px] text-black transition-colors active:bg-[#E0E0E0]'
+                                className='inline-flex h-[32px] w-full cursor-pointer items-center justify-center gap-1.5 rounded-[5px] border border-white bg-white font-[430] font-season text-black text-sm transition-colors active:bg-[#E0E0E0]'
                               >
                                 {isPreparingTemplate ? 'Preparing...' : 'Use template'}
                               </button>
@@ -614,7 +614,7 @@ export default function Templates() {
                   type='button'
                   onClick={handleUseTemplate}
                   disabled={isPreparingTemplate}
-                  className='group/cta absolute top-[16px] right-[16px] z-10 inline-flex h-[32px] cursor-pointer items-center gap-[6px] rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[10px] font-[430] font-season text-[14px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                  className='group/cta absolute top-4 right-[16px] z-10 inline-flex h-[32px] cursor-pointer items-center gap-1.5 rounded-[5px] border border-white bg-white px-2.5 font-[430] font-season text-black text-sm transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
                 >
                   {isPreparingTemplate ? 'Preparing...' : 'Use template'}
                   <span className='relative h-[10px] w-[10px] shrink-0'>
@@ -642,7 +642,7 @@ export default function Templates() {
             <div className='shrink-0'>
               <div className='h-full lg:hidden'>
                 <DotGrid
-                  className='h-full w-[24px] overflow-hidden border-[#2A2A2A] border-l p-[4px]'
+                  className='h-full w-[24px] overflow-hidden border-[var(--landing-bg-elevated)] border-l p-1'
                   cols={2}
                   rows={55}
                   gap={4}
@@ -650,7 +650,7 @@ export default function Templates() {
               </div>
               <div className='hidden h-full lg:block'>
                 <DotGrid
-                  className='h-full w-[80px] overflow-hidden border-[#2A2A2A] border-l p-[6px]'
+                  className='h-full w-[80px] overflow-hidden border-[var(--landing-bg-elevated)] border-l p-1.5'
                   cols={8}
                   rows={55}
                   gap={6}
diff --git a/apps/sim/app/(home)/landing.tsx b/apps/sim/app/(home)/landing.tsx
index 79689dd57a7..66fc994b015 100644
--- a/apps/sim/app/(home)/landing.tsx
+++ b/apps/sim/app/(home)/landing.tsx
@@ -36,7 +36,9 @@ export default async function Landing() {
   const blogPosts = await getNavBlogPosts()
 
   return (
-    <div className={`${season.variable} ${martianMono.variable} min-h-screen bg-[#1C1C1C]`}>
+    <div
+      className={`${season.variable} ${martianMono.variable} min-h-screen bg-[var(--landing-bg)]`}
+    >
       <StructuredData />
       <header>
         <Navbar blogPosts={blogPosts} />
diff --git a/apps/sim/app/(landing)/blog/[slug]/back-link.tsx b/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
index 179223a0b8a..d9b6874e682 100644
--- a/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/back-link.tsx
@@ -10,7 +10,7 @@ export function BackLink() {
   return (
     <Link
       href='/blog'
-      className='group flex items-center gap-1 text-[#999] text-sm hover:text-[#ECECEC]'
+      className='group flex items-center gap-1 text-[var(--landing-text-muted)] text-sm hover:text-[var(--landing-text)]'
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
diff --git a/apps/sim/app/(landing)/blog/[slug]/page.tsx b/apps/sim/app/(landing)/blog/[slug]/page.tsx
index d5ed263e2b5..c36f2b4100a 100644
--- a/apps/sim/app/(landing)/blog/[slug]/page.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/page.tsx
@@ -66,7 +66,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
           </div>
           <div className='flex flex-1 flex-col justify-between'>
             <h1
-              className='font-[500] text-[#ECECEC] text-[36px] leading-tight tracking-tight sm:text-[48px] md:text-[56px] lg:text-[64px]'
+              className='font-[500] text-[36px] text-[var(--landing-text)] leading-tight tracking-tight sm:text-[48px] md:text-[56px] lg:text-[64px]'
               itemProp='headline'
             >
               {post.title}
@@ -85,7 +85,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                       href={a?.url || '#'}
                       target='_blank'
                       rel='noopener noreferrer author'
-                      className='text-[#999] text-[14px] leading-[1.5] hover:text-[#ECECEC] sm:text-[16px]'
+                      className='text-[var(--landing-text-muted)] text-sm leading-[1.5] hover:text-[var(--landing-text)] sm:text-md'
                       itemProp='author'
                       itemScope
                       itemType='https://schema.org/Person'
@@ -99,11 +99,11 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             </div>
           </div>
         </div>
-        <hr className='mt-8 border-[#2A2A2A] border-t sm:mt-12' />
+        <hr className='mt-8 border-[var(--landing-bg-elevated)] border-t sm:mt-12' />
         <div className='flex flex-col gap-6 py-8 sm:flex-row sm:items-start sm:justify-between sm:gap-8 sm:py-10'>
           <div className='flex flex-shrink-0 items-center gap-4'>
             <time
-              className='block text-[#999] text-[14px] leading-[1.5] sm:text-[16px]'
+              className='block text-[var(--landing-text-muted)] text-sm leading-[1.5] sm:text-md'
               dateTime={post.date}
               itemProp='datePublished'
             >
@@ -116,7 +116,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
             <meta itemProp='dateModified' content={post.updated ?? post.date} />
           </div>
           <div className='flex-1'>
-            <p className='m-0 block translate-y-[-4px] font-[400] text-[#999] text-[18px] leading-[1.5] sm:text-[20px] md:text-[26px]'>
+            <p className='m-0 block translate-y-[-4px] font-[400] text-[var(--landing-text-muted)] text-lg leading-[1.5] sm:text-[20px] md:text-[26px]'>
               {post.description}
             </p>
           </div>
@@ -124,18 +124,18 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       </header>
 
       <div className='mx-auto max-w-[900px] px-6 pb-20 sm:px-8 md:px-12' itemProp='articleBody'>
-        <div className='prose prose-lg prose-invert max-w-none prose-blockquote:border-[#3d3d3d] prose-hr:border-[#2A2A2A] prose-a:text-[#ECECEC] prose-blockquote:text-[#999] prose-code:text-[#ECECEC] prose-headings:text-[#ECECEC] prose-li:text-[#999] prose-p:text-[#999] prose-strong:text-[#ECECEC]'>
+        <div className='prose prose-lg prose-invert max-w-none prose-blockquote:border-[#3d3d3d] prose-hr:border-[var(--landing-bg-elevated)] prose-a:text-[var(--landing-text)] prose-blockquote:text-[var(--landing-text-muted)] prose-code:text-[var(--landing-text)] prose-headings:text-[var(--landing-text)] prose-li:text-[var(--landing-text-muted)] prose-p:text-[var(--landing-text-muted)] prose-strong:text-[var(--landing-text)]'>
           <Article />
           {post.faq && post.faq.length > 0 ? <FAQ items={post.faq} /> : null}
         </div>
       </div>
       {related.length > 0 && (
         <div className='mx-auto max-w-[900px] px-6 pb-24 sm:px-8 md:px-12'>
-          <h2 className='mb-4 font-[500] text-[#ECECEC] text-[24px]'>Related posts</h2>
+          <h2 className='mb-4 font-[500] text-[24px] text-[var(--landing-text)]'>Related posts</h2>
           <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
             {related.map((p) => (
               <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
-                <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
+                <div className='overflow-hidden rounded-lg border border-[var(--landing-bg-elevated)]'>
                   <Image
                     src={p.ogImage}
                     alt={p.title}
@@ -147,14 +147,16 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                     unoptimized
                   />
                   <div className='p-3'>
-                    <div className='mb-1 text-[#999] text-xs'>
+                    <div className='mb-1 text-[var(--landing-text-muted)] text-xs'>
                       {new Date(p.date).toLocaleDateString('en-US', {
                         month: 'short',
                         day: 'numeric',
                         year: 'numeric',
                       })}
                     </div>
-                    <div className='font-[500] text-[#ECECEC] text-sm leading-tight'>{p.title}</div>
+                    <div className='font-[500] text-[var(--landing-text)] text-sm leading-tight'>
+                      {p.title}
+                    </div>
                   </div>
                 </div>
               </Link>
diff --git a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
index 4950d1ecab1..f81d6fc0a2a 100644
--- a/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
+++ b/apps/sim/app/(landing)/blog/[slug]/share-button.tsx
@@ -41,7 +41,7 @@ export function ShareButton({ url, title }: ShareButtonProps) {
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
         <button
-          className='flex items-center gap-1.5 text-[#999] text-sm hover:text-[#ECECEC]'
+          className='flex items-center gap-1.5 text-[var(--landing-text-muted)] text-sm hover:text-[var(--landing-text)]'
           aria-label='Share this post'
         >
           <Share2 className='h-4 w-4' />
diff --git a/apps/sim/app/(landing)/blog/authors/[id]/page.tsx b/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
index 9cb330c396e..5d25bf03f47 100644
--- a/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
+++ b/apps/sim/app/(landing)/blog/authors/[id]/page.tsx
@@ -23,7 +23,7 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
   if (!author) {
     return (
       <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px]'>Author not found</h1>
+        <h1 className='font-[500] text-[32px] text-[var(--landing-text)]'>Author not found</h1>
       </main>
     )
   }
@@ -52,12 +52,14 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
             unoptimized
           />
         ) : null}
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] leading-tight'>{author.name}</h1>
+        <h1 className='font-[500] text-[32px] text-[var(--landing-text)] leading-tight'>
+          {author.name}
+        </h1>
       </div>
       <div className='grid grid-cols-1 gap-8 sm:grid-cols-2'>
         {posts.map((p) => (
           <Link key={p.slug} href={`/blog/${p.slug}`} className='group'>
-            <div className='overflow-hidden rounded-lg border border-[#2A2A2A]'>
+            <div className='overflow-hidden rounded-lg border border-[var(--landing-bg-elevated)]'>
               <Image
                 src={p.ogImage}
                 alt={p.title}
@@ -67,14 +69,16 @@ export default async function AuthorPage({ params }: { params: Promise<{ id: str
                 unoptimized
               />
               <div className='p-3'>
-                <div className='mb-1 text-[#999] text-xs'>
+                <div className='mb-1 text-[var(--landing-text-muted)] text-xs'>
                   {new Date(p.date).toLocaleDateString('en-US', {
                     month: 'short',
                     day: 'numeric',
                     year: 'numeric',
                   })}
                 </div>
-                <div className='font-[500] text-[#ECECEC] text-sm leading-tight'>{p.title}</div>
+                <div className='font-[500] text-[var(--landing-text)] text-sm leading-tight'>
+                  {p.title}
+                </div>
               </div>
             </div>
           </Link>
diff --git a/apps/sim/app/(landing)/blog/layout.tsx b/apps/sim/app/(landing)/blog/layout.tsx
index 59f7adaf70f..b200ed5eada 100644
--- a/apps/sim/app/(landing)/blog/layout.tsx
+++ b/apps/sim/app/(landing)/blog/layout.tsx
@@ -26,7 +26,7 @@ export default async function StudioLayout({ children }: { children: React.React
   }
 
   return (
-    <div className='flex min-h-screen flex-col bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <div className='flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
       <script
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(orgJsonLd) }}
diff --git a/apps/sim/app/(landing)/blog/page.tsx b/apps/sim/app/(landing)/blog/page.tsx
index 359464e3209..3c477347b98 100644
--- a/apps/sim/app/(landing)/blog/page.tsx
+++ b/apps/sim/app/(landing)/blog/page.tsx
@@ -50,10 +50,10 @@ export default async function BlogIndex({
         type='application/ld+json'
         dangerouslySetInnerHTML={{ __html: JSON.stringify(blogJsonLd) }}
       />
-      <h1 className='mb-3 font-[500] text-[#ECECEC] text-[40px] leading-tight sm:text-[56px]'>
+      <h1 className='mb-3 font-[500] text-[40px] text-[var(--landing-text)] leading-tight sm:text-[56px]'>
         Blog
       </h1>
-      <p className='mb-10 text-[#999] text-[18px]'>
+      <p className='mb-10 text-[var(--landing-text-muted)] text-lg'>
         Announcements, insights, and guides for building AI agent workflows.
       </p>
 
@@ -75,18 +75,18 @@ export default async function BlogIndex({
           {pageNum > 1 && (
             <Link
               href={`/blog?page=${pageNum - 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
-              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
             >
               Previous
             </Link>
           )}
-          <span className='text-[#999] text-sm'>
+          <span className='text-[var(--landing-text-muted)] text-sm'>
             Page {pageNum} of {totalPages}
           </span>
           {pageNum < totalPages && (
             <Link
               href={`/blog?page=${pageNum + 1}${tag ? `&tag=${encodeURIComponent(tag)}` : ''}`}
-              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+              className='rounded-[5px] border border-[#3d3d3d] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
             >
               Next
             </Link>
diff --git a/apps/sim/app/(landing)/blog/post-grid.tsx b/apps/sim/app/(landing)/blog/post-grid.tsx
index 918d6782f53..48db0492714 100644
--- a/apps/sim/app/(landing)/blog/post-grid.tsx
+++ b/apps/sim/app/(landing)/blog/post-grid.tsx
@@ -27,7 +27,7 @@ export function PostGrid({ posts }: { posts: Post[] }) {
     <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
       {posts.map((p, index) => (
         <Link key={p.slug} href={`/blog/${p.slug}`} className='group flex flex-col'>
-          <div className='flex h-full flex-col overflow-hidden rounded-xl border border-[#2A2A2A] transition-colors duration-300 hover:border-[#3d3d3d]'>
+          <div className='flex h-full flex-col overflow-hidden rounded-xl border border-[var(--landing-bg-elevated)] transition-colors duration-300 hover:border-[#3d3d3d]'>
             {/* Image container with fixed aspect ratio to prevent layout shift */}
             <div className='relative aspect-video w-full overflow-hidden'>
               <Image
@@ -42,29 +42,33 @@ export function PostGrid({ posts }: { posts: Post[] }) {
               />
             </div>
             <div className='flex flex-1 flex-col p-4'>
-              <div className='mb-2 text-[#999] text-xs'>
+              <div className='mb-2 text-[var(--landing-text-muted)] text-xs'>
                 {new Date(p.date).toLocaleDateString('en-US', {
                   month: 'short',
                   day: 'numeric',
                   year: 'numeric',
                 })}
               </div>
-              <h3 className='mb-1 font-[500] text-[#ECECEC] text-lg leading-tight'>{p.title}</h3>
-              <p className='mb-3 line-clamp-3 flex-1 text-[#999] text-sm'>{p.description}</p>
+              <h3 className='mb-1 font-[500] text-[var(--landing-text)] text-lg leading-tight'>
+                {p.title}
+              </h3>
+              <p className='mb-3 line-clamp-3 flex-1 text-[var(--landing-text-muted)] text-sm'>
+                {p.description}
+              </p>
               <div className='flex items-center gap-2'>
                 <div className='-space-x-1.5 flex'>
                   {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
                     .slice(0, 3)
                     .map((author, idx) => (
-                      <Avatar key={idx} className='size-4 border border-[#1C1C1C]'>
+                      <Avatar key={idx} className='size-4 border border-[var(--landing-text)]'>
                         <AvatarImage src={author?.avatarUrl} alt={author?.name} />
-                        <AvatarFallback className='border border-[#1C1C1C] bg-[#2A2A2A] text-[#999] text-[10px]'>
+                        <AvatarFallback className='border border-[var(--landing-text)] bg-[var(--landing-bg-elevated)] text-[var(--landing-text-muted)] text-micro'>
                           {author?.name.slice(0, 2)}
                         </AvatarFallback>
                       </Avatar>
                     ))}
                 </div>
-                <span className='text-[#999] text-xs'>
+                <span className='text-[var(--landing-text-muted)] text-xs'>
                   {(p.authors && p.authors.length > 0 ? p.authors : [p.author])
                     .slice(0, 2)
                     .map((a) => a?.name)
diff --git a/apps/sim/app/(landing)/blog/tags/page.tsx b/apps/sim/app/(landing)/blog/tags/page.tsx
index a36ca97fd05..bbe2453c952 100644
--- a/apps/sim/app/(landing)/blog/tags/page.tsx
+++ b/apps/sim/app/(landing)/blog/tags/page.tsx
@@ -10,11 +10,13 @@ export default async function TagsIndex() {
   const tags = await getAllTags()
   return (
     <main className='mx-auto max-w-[900px] px-6 py-10 sm:px-8 md:px-12'>
-      <h1 className='mb-6 font-[500] text-[#ECECEC] text-[32px] leading-tight'>Browse by tag</h1>
+      <h1 className='mb-6 font-[500] text-[32px] text-[var(--landing-text)] leading-tight'>
+        Browse by tag
+      </h1>
       <div className='flex flex-wrap gap-3'>
         <Link
           href='/blog'
-          className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+          className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
         >
           All
         </Link>
@@ -22,7 +24,7 @@ export default async function TagsIndex() {
           <Link
             key={t.tag}
             href={`/blog?tag=${encodeURIComponent(t.tag)}`}
-            className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[#ECECEC] text-sm transition-colors hover:bg-[#2A2A2A]'
+            className='rounded-full border border-[#3d3d3d] px-3 py-1 text-[var(--landing-text)] text-sm transition-colors hover:bg-[var(--landing-bg-elevated)]'
           >
             {t.tag} ({t.count})
           </Link>
diff --git a/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx b/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx
index 3288fee422f..b0ff5768f5e 100644
--- a/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/compliance-badges.tsx
@@ -4,7 +4,7 @@ import { HIPAABadgeIcon } from '@/components/icons'
 
 export default function ComplianceBadges() {
   return (
-    <div className='mt-[6px] flex items-center gap-[12px]'>
+    <div className='mt-1.5 flex items-center gap-3'>
       {/* SOC2 badge */}
       <Link href='https://trust.delve.co/sim-studio' target='_blank' rel='noopener noreferrer'>
         <Image
diff --git a/apps/sim/app/(landing)/components/footer/components/social-links.tsx b/apps/sim/app/(landing)/components/footer/components/social-links.tsx
index ccc6ef8d70b..2205c2d390d 100644
--- a/apps/sim/app/(landing)/components/footer/components/social-links.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/social-links.tsx
@@ -2,12 +2,12 @@ import { DiscordIcon, GithubIcon, LinkedInIcon, xIcon as XIcon } from '@/compone
 
 export default function SocialLinks() {
   return (
-    <div className='flex items-center gap-[12px]'>
+    <div className='flex items-center gap-3'>
       <a
         href='https://discord.gg/Hr4UWYEcTT'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='Discord'
       >
         <DiscordIcon className='h-[20px] w-[20px]' aria-hidden='true' />
@@ -16,7 +16,7 @@ export default function SocialLinks() {
         href='https://x.com/simdotai'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='X (Twitter)'
       >
         <XIcon className='h-[18px] w-[18px]' aria-hidden='true' />
@@ -25,7 +25,7 @@ export default function SocialLinks() {
         href='https://www.linkedin.com/company/simstudioai/'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='LinkedIn'
       >
         <LinkedInIcon className='h-[18px] w-[18px]' aria-hidden='true' />
@@ -34,7 +34,7 @@ export default function SocialLinks() {
         href='https://github.com/simstudioai/sim'
         target='_blank'
         rel='noopener noreferrer'
-        className='flex items-center text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+        className='flex items-center text-md text-muted-foreground transition-colors hover:text-foreground'
         aria-label='GitHub'
       >
         <GithubIcon className='h-[20px] w-[20px]' aria-hidden='true' />
diff --git a/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx b/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx
index 36beae40a6e..6e35af35a4f 100644
--- a/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx
+++ b/apps/sim/app/(landing)/components/footer/components/status-indicator.tsx
@@ -36,8 +36,8 @@ export function StatusDotIcon({ status, className, ...props }: StatusDotIconProp
 
 const STATUS_COLORS: Record<StatusType, string> = {
   operational: 'text-[#10B981] hover:text-[#059669]',
-  degraded: 'text-[#F59E0B] hover:text-[#D97706]',
-  outage: 'text-[#EF4444] hover:text-[#DC2626]',
+  degraded: 'text-[var(--amber)] hover:text-[#D97706]',
+  outage: 'text-[var(--text-error)] hover:text-[var(--error)]',
   maintenance: 'text-[#3B82F6] hover:text-[#2563EB]',
   loading: 'text-muted-foreground hover:text-foreground',
   error: 'text-muted-foreground hover:text-foreground',
@@ -59,7 +59,7 @@ export default function StatusIndicator() {
       href={statusUrl}
       target='_blank'
       rel='noopener noreferrer'
-      className={`flex min-w-[165px] items-center gap-[6px] whitespace-nowrap text-[12px] transition-colors ${STATUS_COLORS[status]}`}
+      className={`flex min-w-[165px] items-center gap-1.5 whitespace-nowrap text-caption transition-colors ${STATUS_COLORS[status]}`}
       aria-label={`System status: ${message}`}
     >
       <StatusDotIcon status={status} className='h-[6px] w-[6px]' aria-hidden='true' />
diff --git a/apps/sim/app/(landing)/components/footer/footer.tsx b/apps/sim/app/(landing)/components/footer/footer.tsx
index 9ed8d03c84a..f4583ddd56d 100644
--- a/apps/sim/app/(landing)/components/footer/footer.tsx
+++ b/apps/sim/app/(landing)/components/footer/footer.tsx
@@ -17,13 +17,13 @@ export default function Footer({ fullWidth = false }: FooterProps) {
       <div
         className={
           fullWidth
-            ? 'px-4 pt-[40px] pb-[40px] sm:px-4 sm:pt-[34px] sm:pb-[340px]'
-            : 'px-4 pt-[40px] pb-[40px] sm:px-[50px] sm:pt-[34px] sm:pb-[340px]'
+            ? 'px-4 pt-10 pb-10 sm:px-4 sm:pt-[34px] sm:pb-[340px]'
+            : 'px-4 pt-10 pb-10 sm:px-[50px] sm:pt-[34px] sm:pb-[340px]'
         }
       >
         <div className={`flex gap-[80px] ${fullWidth ? 'justify-center' : ''}`}>
           {/* Logo and social links */}
-          <div className='flex flex-col gap-[24px]'>
+          <div className='flex flex-col gap-6'>
             <Logo />
             <SocialLinks />
             <ComplianceBadges />
@@ -32,19 +32,19 @@ export default function Footer({ fullWidth = false }: FooterProps) {
 
           {/* Links section */}
           <div>
-            <h2 className='mb-[16px] font-medium text-[14px] text-foreground'>More Sim</h2>
-            <div className='flex flex-col gap-[12px]'>
+            <h2 className='mb-4 font-medium text-foreground text-sm'>More Sim</h2>
+            <div className='flex flex-col gap-3'>
               <Link
                 href='https://docs.sim.ai'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Docs
               </Link>
               <Link
                 href='#pricing'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Pricing
               </Link>
@@ -52,19 +52,19 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='https://form.typeform.com/to/jqCO12pF'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Enterprise
               </Link>
               <Link
                 href='/blog'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Blog
               </Link>
               <Link
                 href='/changelog'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Changelog
               </Link>
@@ -72,7 +72,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='https://status.sim.ai'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Status
               </Link>
@@ -80,7 +80,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='https://jobs.ashbyhq.com/sim'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Careers
               </a>
@@ -88,7 +88,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='/privacy'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Privacy Policy
               </Link>
@@ -96,7 +96,7 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                 href='/terms'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                className='text-muted-foreground text-sm transition-colors hover:text-foreground'
               >
                 Terms of Service
               </Link>
@@ -105,15 +105,15 @@ export default function Footer({ fullWidth = false }: FooterProps) {
 
           {/* Blocks section */}
           <div className='hidden sm:block'>
-            <h2 className='mb-[16px] font-medium text-[14px] text-foreground'>Blocks</h2>
-            <div className='flex flex-col gap-[12px]'>
+            <h2 className='mb-4 font-medium text-foreground text-sm'>Blocks</h2>
+            <div className='flex flex-col gap-3'>
               {FOOTER_BLOCKS.map((block) => (
                 <Link
                   key={block}
                   href={`https://docs.sim.ai/blocks/${block.toLowerCase().replaceAll(' ', '-')}`}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                  className='text-muted-foreground text-sm transition-colors hover:text-foreground'
                 >
                   {block}
                 </Link>
@@ -123,24 +123,24 @@ export default function Footer({ fullWidth = false }: FooterProps) {
 
           {/* Tools section - split into columns */}
           <div className='hidden sm:block'>
-            <h2 className='mb-[16px] font-medium text-[14px] text-foreground'>Tools</h2>
+            <h2 className='mb-4 font-medium text-foreground text-sm'>Tools</h2>
             <div className='flex gap-[80px]'>
               {/* First column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(0, Math.ceil(FOOTER_TOOLS.length / 4)).map((tool) => (
                   <Link
                     key={tool}
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
                 ))}
               </div>
               {/* Second column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(
                   Math.ceil(FOOTER_TOOLS.length / 4),
                   Math.ceil((FOOTER_TOOLS.length * 2) / 4)
@@ -150,14 +150,14 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
                 ))}
               </div>
               {/* Third column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(
                   Math.ceil((FOOTER_TOOLS.length * 2) / 4),
                   Math.ceil((FOOTER_TOOLS.length * 3) / 4)
@@ -167,21 +167,21 @@ export default function Footer({ fullWidth = false }: FooterProps) {
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
                 ))}
               </div>
               {/* Fourth column */}
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {FOOTER_TOOLS.slice(Math.ceil((FOOTER_TOOLS.length * 3) / 4)).map((tool) => (
                   <Link
                     key={tool}
                     href={`https://docs.sim.ai/tools/${tool.toLowerCase().replace(/\s+/g, '_')}`}
                     target='_blank'
                     rel='noopener noreferrer'
-                    className='whitespace-nowrap text-[14px] text-muted-foreground transition-colors hover:text-foreground'
+                    className='whitespace-nowrap text-muted-foreground text-sm transition-colors hover:text-foreground'
                   >
                     {tool}
                   </Link>
diff --git a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
index c8e523e2f86..fd58b46f719 100644
--- a/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/icon-button.tsx
@@ -27,8 +27,8 @@ export function IconButton({
       onMouseEnter={onMouseEnter}
       className={`flex items-center justify-center rounded-xl border p-2 outline-none transition-all duration-300 ${
         isAutoHovered
-          ? 'border-[#E5E5E5] shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
-          : 'border-transparent hover:border-[#E5E5E5] hover:shadow-[0_2px_4px_0_rgba(0,0,0,0.08)]'
+          ? 'border-[#454545] shadow-subtle'
+          : 'border-transparent hover:border-[#454545] hover:shadow-subtle'
       }`}
       style={style}
     >
diff --git a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx
index 78f18844780..99715c39174 100644
--- a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/landing-block.tsx
@@ -44,20 +44,20 @@ export const LandingBlock = React.memo(function LandingBlock({
 
   return (
     <div
-      className={`z-10 flex w-[250px] flex-col rounded-[8px] border border-[#E5E5E5] bg-white ${className ?? ''}`}
+      className={`z-10 flex w-[250px] flex-col rounded-lg border border-[#E5E5E5] bg-white ${className ?? ''}`}
     >
       {/* Header - matches workflow-block.tsx header styling */}
       <div
-        className={`flex items-center justify-between p-[8px] ${hasContentBelowHeader ? 'border-[#E5E5E5] border-b' : ''}`}
+        className={`flex items-center justify-between p-2 ${hasContentBelowHeader ? 'border-[#E5E5E5] border-b' : ''}`}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2.5'>
           <div
-            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
             style={{ background: color as string }}
           >
             {icon}
           </div>
-          <span className='truncate font-medium text-[#171717] text-[16px]' title={name}>
+          <span className='truncate font-medium text-[#171717] text-md' title={name}>
             {name}
           </span>
         </div>
@@ -65,7 +65,7 @@ export const LandingBlock = React.memo(function LandingBlock({
 
       {/* Content - SubBlock Rows matching workflow-block.tsx */}
       {hasContentBelowHeader && (
-        <div className='flex flex-col gap-[8px] p-[8px]'>
+        <div className='flex flex-col gap-2 p-2'>
           {tags.map((tag) => (
             <SubBlockRow key={tag.label} icon={tag.icon} label={tag.label} />
           ))}
diff --git a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
index 655a8b3a9c7..8dcefe126ee 100644
--- a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-block/tag.tsx
@@ -30,15 +30,12 @@ export const SubBlockRow = React.memo(function SubBlockRow({ label, value }: Sub
     : [label, value]
 
   return (
-    <div className='flex items-center gap-[8px]'>
-      <span className='min-w-0 truncate text-[#888888] text-[14px] capitalize' title={title}>
+    <div className='flex items-center gap-2'>
+      <span className='min-w-0 truncate text-[#888888] text-sm capitalize' title={title}>
         {title}
       </span>
       {displayValue && (
-        <span
-          className='flex-1 truncate text-right text-[#171717] text-[14px]'
-          title={displayValue}
-        >
+        <span className='flex-1 truncate text-right text-[#171717] text-sm' title={displayValue}>
           {displayValue}
         </span>
       )}
diff --git a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx
index f3bcd0f529a..07513f2e10b 100644
--- a/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx
+++ b/apps/sim/app/(landing)/components/hero/components/landing-canvas/landing-canvas.tsx
@@ -128,7 +128,7 @@ export function LandingCanvas({
       {/* <button
         type='button'
         aria-label='Use template'
-        className='absolute top-[24px] left-[50px] z-20 inline-flex items-center justify-center rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-1.5 text-sm text-white shadow-[inset_0_1.25px_2.5px_0_#9B77FF] transition-all duration-200'
+        className='absolute top-6 left-[50px] z-20 inline-flex items-center justify-center rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-1.5 text-sm text-white shadow-brand-inset transition-all duration-200'
         onClick={() => {
           // Template usage logic will be implemented here
         }}
diff --git a/apps/sim/app/(landing)/components/hero/hero.tsx b/apps/sim/app/(landing)/components/hero/hero.tsx
index a3674b21465..2b9f915cf00 100644
--- a/apps/sim/app/(landing)/components/hero/hero.tsx
+++ b/apps/sim/app/(landing)/components/hero/hero.tsx
@@ -363,7 +363,7 @@ export default function Hero() {
   return (
     <section
       id='hero'
-      className='flex w-full flex-col items-center justify-center pt-[36px] sm:pt-[80px]'
+      className='flex w-full flex-col items-center justify-center pt-9 sm:pt-[80px]'
       aria-labelledby='hero-heading'
     >
       <h1
@@ -372,11 +372,11 @@ export default function Hero() {
       >
         Workflows for LLMs
       </h1>
-      <p className='px-4 pt-[6px] text-center text-[18px] opacity-70 sm:px-0 sm:pt-[10px] sm:text-[22px]'>
+      <p className='px-4 pt-1.5 text-center text-lg opacity-70 sm:px-0 sm:pt-2.5 sm:text-[22px]'>
         Build and deploy AI agent workflows
       </p>
       <div
-        className='flex items-center justify-center gap-[2px] pt-[18px] sm:pt-[32px]'
+        className='flex items-center justify-center gap-0.5 pt-4.5 sm:pt-8'
         onMouseEnter={handleIconContainerMouseEnter}
         onMouseLeave={handleIconContainerMouseLeave}
       >
@@ -397,7 +397,7 @@ export default function Hero() {
           )
         })}
       </div>
-      <div className='flex w-full items-center justify-center px-4 pt-[8px] sm:px-8 sm:pt-[12px] md:px-[50px]'>
+      <div className='flex w-full items-center justify-center px-4 pt-2 sm:px-8 sm:pt-3 md:px-[50px]'>
         <div className='relative w-full sm:w-[640px]'>
           <label htmlFor='agent-description' className='sr-only'>
             Describe the AI agent you want to build
@@ -424,7 +424,7 @@ export default function Hero() {
             key={isEmpty ? 'empty' : 'filled'}
             type='button'
             aria-label='Submit description'
-            className='absolute right-2.5 bottom-4 flex h-[30px] w-[30px] items-center justify-center transition-all duration-200 sm:right-[11px] sm:bottom-[16px] sm:h-[34px] sm:w-[34px]'
+            className='absolute right-2.5 bottom-4 flex h-[30px] w-[30px] items-center justify-center transition-all duration-200 sm:right-[11px] sm:bottom-4 sm:h-[34px] sm:w-[34px]'
             disabled={isEmpty}
             onClick={handleSubmit}
             style={{
diff --git a/apps/sim/app/(landing)/components/integrations/integrations.tsx b/apps/sim/app/(landing)/components/integrations/integrations.tsx
index 34e2c9bfba3..5084e4d16fe 100644
--- a/apps/sim/app/(landing)/components/integrations/integrations.tsx
+++ b/apps/sim/app/(landing)/components/integrations/integrations.tsx
@@ -93,7 +93,7 @@ function TickerRow({ direction, offset, showOdd, icons }: TickerRowProps) {
   return (
     <div className='relative h-[88px] w-full overflow-hidden'>
       <div
-        className={`absolute flex items-center gap-[16px] ${
+        className={`absolute flex items-center gap-4 ${
           direction === 'left' ? 'animate-slide-left' : 'animate-slide-right'
         }`}
         style={{
@@ -121,21 +121,21 @@ export default function Integrations() {
   return (
     <section
       id='integrations'
-      className='flex flex-col pt-[40px] pb-[27px] sm:pt-[24px]'
+      className='flex flex-col pt-10 pb-[27px] sm:pt-6'
       aria-labelledby='integrations-heading'
     >
       <h2
         id='integrations-heading'
-        className='mb-[4px] px-4 font-medium text-[28px] text-foreground tracking-tight sm:pl-[50px]'
+        className='mb-1 px-4 font-medium text-[28px] text-foreground tracking-tight sm:pl-[50px]'
       >
         Integrations
       </h2>
-      <p className='mb-[24px] px-4 text-[#515151] text-[18px] sm:pl-[50px]'>
+      <p className='mb-6 px-4 text-[#515151] text-lg sm:pl-[50px]'>
         Immediately connect to 100+ models and apps
       </p>
 
       {/* Sliding tickers */}
-      <div className='flex w-full flex-col sm:px-[12px]'>
+      <div className='flex w-full flex-col sm:px-3'>
         <TickerRow direction='left' offset={0} showOdd={false} icons={modelProviderIcons} />
         <TickerRow direction='right' offset={0.5} showOdd={true} icons={communicationIcons} />
         <TickerRow direction='left' offset={1} showOdd={false} icons={dataStorageIcons} />
diff --git a/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx b/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx
index 9467651525e..518d4df38b5 100644
--- a/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx
+++ b/apps/sim/app/(landing)/components/landing-pricing/landing-pricing.tsx
@@ -161,7 +161,7 @@ function PricingCard({
             </span>
           </div>
 
-          <ul className='mb-[2px] space-y-3'>
+          <ul className='mb-0.5 space-y-3'>
             {tier.features.map((feature, idx) => (
               <li key={idx} className='flex items-start gap-2'>
                 <feature.icon
@@ -184,7 +184,7 @@ function PricingCard({
               onClick={handleCtaClick}
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
-              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#E8E8E8] bg-gradient-to-b from-[#F8F8F8] to-white px-3 py-[6px] font-medium text-[#6F3DFA] text-[14px] shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.9)] transition-all'
+              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#E5E5E5] bg-gradient-to-b from-[#F8F8F8] to-white px-3 py-1.5 font-medium text-[#6F3DFA] text-sm shadow-[inset_0_2px_4px_0_rgba(255,255,255,0.9)] transition-all'
             >
               <span className='flex items-center gap-1'>
                 {tier.ctaText}
@@ -202,7 +202,7 @@ function PricingCard({
               onClick={handleCtaClick}
               onMouseEnter={() => setIsHovered(true)}
               onMouseLeave={() => setIsHovered(false)}
-              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-[6px] font-medium text-[14px] text-white shadow-[inset_0_1.25px_2.5px_0_#9B77FF] transition-all'
+              className='group inline-flex w-full items-center justify-center gap-2 rounded-[10px] border border-[#343434] bg-gradient-to-b from-[#060606] to-[#323232] px-3 py-1.5 font-medium text-sm text-white shadow-brand-inset transition-all'
             >
               <span className='flex items-center gap-1'>
                 {tier.ctaText}
@@ -227,7 +227,7 @@ function PricingCard({
  */
 export default function LandingPricing() {
   return (
-    <section id='pricing' className='px-4 pt-[23px] sm:px-0 sm:pt-[4px]' aria-label='Pricing plans'>
+    <section id='pricing' className='px-4 pt-[23px] sm:px-0 sm:pt-1' aria-label='Pricing plans'>
       <h2 className='sr-only'>Pricing Plans</h2>
       <div className='relative mx-auto w-full max-w-[1289px]'>
         <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-0 lg:grid-cols-4'>
diff --git a/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx b/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx
index e2c686c1f0e..b55f928b598 100644
--- a/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx
+++ b/apps/sim/app/(landing)/components/landing-templates/landing-templates.tsx
@@ -79,12 +79,12 @@ export default function LandingTemplates() {
   return (
     <section
       id='templates'
-      className='flex flex-col px-4 pt-[40px] sm:px-[50px] sm:pt-[34px]'
+      className='flex flex-col px-4 pt-10 sm:px-[50px] sm:pt-[34px]'
       aria-labelledby='templates-heading'
     >
       <h2
         id='templates-heading'
-        className='mb-[16px] font-medium text-[28px] text-foreground tracking-tight sm:mb-[24px]'
+        className='mb-4 font-medium text-[28px] text-foreground tracking-tight sm:mb-6'
       >
         Templates
       </h2>
diff --git a/apps/sim/app/(landing)/components/legal-layout.tsx b/apps/sim/app/(landing)/components/legal-layout.tsx
index 552bb5dd9ea..6e97b96785f 100644
--- a/apps/sim/app/(landing)/components/legal-layout.tsx
+++ b/apps/sim/app/(landing)/components/legal-layout.tsx
@@ -12,16 +12,16 @@ export default async function LegalLayout({ title, children }: LegalLayoutProps)
   const blogPosts = await getNavBlogPosts()
 
   return (
-    <main className='min-h-screen bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <main className='min-h-screen bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
       <header>
         <Navbar blogPosts={blogPosts} />
       </header>
 
       <div className='mx-auto max-w-[800px] px-6 pt-[60px] pb-[80px] sm:px-12'>
-        <h1 className='mb-12 text-center font-[500] text-4xl text-[#ECECEC] md:text-5xl'>
+        <h1 className='mb-12 text-center font-[500] text-4xl text-[var(--landing-text)] md:text-5xl'>
           {title}
         </h1>
-        <div className='space-y-8 text-[#999] text-[15px] leading-[1.7] [&_h2]:mt-12 [&_h2]:mb-6 [&_h2]:text-[#ECECEC] [&_h3]:mt-8 [&_h3]:mb-4 [&_h3]:text-[#ECECEC] [&_li]:text-[#999] [&_strong]:text-[#ECECEC]'>
+        <div className='space-y-8 text-[var(--landing-text-muted)] text-base leading-[1.7] [&_h2]:mt-12 [&_h2]:mb-6 [&_h2]:text-[var(--landing-text)] [&_h3]:mt-8 [&_h3]:mb-4 [&_h3]:text-[var(--landing-text)] [&_li]:text-[var(--landing-text-muted)] [&_strong]:text-[var(--landing-text)]'>
           {children}
         </div>
       </div>
diff --git a/apps/sim/app/(landing)/components/nav/nav.tsx b/apps/sim/app/(landing)/components/nav/nav.tsx
index ca205ce8bf2..f9ebc4af4d8 100644
--- a/apps/sim/app/(landing)/components/nav/nav.tsx
+++ b/apps/sim/app/(landing)/components/nav/nav.tsx
@@ -64,7 +64,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
           href='https://docs.sim.ai'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
           prefetch={false}
         >
           Docs
@@ -73,7 +73,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
       <li>
         <Link
           href='/?from=nav#pricing'
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
           scroll={true}
         >
           Pricing
@@ -82,7 +82,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
       <li>
         <button
           onClick={handleEnterpriseClick}
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
           type='button'
           aria-label='Contact for Enterprise pricing'
         >
@@ -94,7 +94,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
           href='https://jobs.ashbyhq.com/sim'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='text-md text-muted-foreground transition-colors hover:text-foreground'
         >
           Careers
         </a>
@@ -104,7 +104,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
           href='https://github.com/simstudioai/sim'
           target='_blank'
           rel='noopener noreferrer'
-          className='flex items-center gap-2 text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+          className='flex items-center gap-2 text-md text-muted-foreground transition-colors hover:text-foreground'
           aria-label={`GitHub repository - ${githubStars} stars`}
         >
           <GithubIcon className='h-[16px] w-[16px]' aria-hidden='true' />
@@ -118,7 +118,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
     <nav
       aria-label='Primary navigation'
       className={`flex w-full items-center justify-between px-4 ${
-        variant === 'auth' ? 'pt-[20px] sm:pt-[16.5px]' : 'pt-[12px] sm:pt-[8.5px]'
+        variant === 'auth' ? 'pt-5 sm:pt-[16.5px]' : 'pt-3 sm:pt-[8.5px]'
       } pb-[21px] sm:px-8 md:px-[44px]`}
       itemScope
       itemType='https://schema.org/SiteNavigationElement'
@@ -154,7 +154,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
         </Link>
         {/* Desktop Navigation Links - only show on landing and if hosted */}
         {variant === 'landing' && isHosted && (
-          <ul className='hidden items-center justify-center gap-[20px] pt-[4px] md:flex'>
+          <ul className='hidden items-center justify-center gap-5 pt-1 md:flex'>
             <NavLinks />
           </ul>
         )}
@@ -162,12 +162,12 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
 
       {/* Auth Buttons - show only when hosted, regardless of variant */}
       {!hideAuthButtons && isHosted && (
-        <div className='flex items-center justify-center gap-[16px] pt-[1.5px]'>
+        <div className='flex items-center justify-center gap-4 pt-[1.5px]'>
           <button
             onClick={handleLoginClick}
             onMouseEnter={() => setIsLoginHovered(true)}
             onMouseLeave={() => setIsLoginHovered(false)}
-            className='group hidden text-[#2E2E2E] text-[16px] transition-colors hover:text-foreground md:block'
+            className='group hidden text-[#2E2E2E] text-md transition-colors hover:text-foreground md:block'
             type='button'
             aria-label='Log in to your account'
           >
@@ -186,7 +186,7 @@ export default function Nav({ hideAuthButtons = false, variant = 'landing' }: Na
             href='/signup'
             onMouseEnter={() => setIsHovered(true)}
             onMouseLeave={() => setIsHovered(false)}
-            className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-[6px] pr-[10px] pl-[12px] text-[15px] text-white transition-all`}
+            className={`${buttonClass} group inline-flex items-center justify-center gap-2 rounded-[10px] py-1.5 pr-2.5 pl-3 text-base text-white transition-all`}
             aria-label='Get started with Sim - Sign up for free'
             prefetch={true}
           >
diff --git a/apps/sim/app/(landing)/components/testimonials/testimonials.tsx b/apps/sim/app/(landing)/components/testimonials/testimonials.tsx
index c05ebb52f36..9c2c3bf7d50 100644
--- a/apps/sim/app/(landing)/components/testimonials/testimonials.tsx
+++ b/apps/sim/app/(landing)/components/testimonials/testimonials.tsx
@@ -125,7 +125,7 @@ export default function Testimonials() {
       className='flex hidden h-[150px] items-center sm:block'
       aria-label='Social proof testimonials'
     >
-      <div className='relative mx-auto h-full w-full max-w-[1289px] pl-[2px]'>
+      <div className='relative mx-auto h-full w-full max-w-[1289px] pl-0.5'>
         <div
           className='relative h-full w-full overflow-hidden'
           onMouseEnter={() => setIsPaused(true)}
@@ -146,7 +146,7 @@ export default function Testimonials() {
                 <div key={`${absoluteIndex}`} className='flex h-full w-1/4 flex-shrink-0'>
                   {/* Tweet container */}
                   <div
-                    className='group flex h-full w-full cursor-pointer flex-col px-[12px] py-[12px] transition-all duration-100 hover:bg-[#0A0A0A] sm:px-[14px]'
+                    className='group flex h-full w-full cursor-pointer flex-col px-3 py-3 transition-all duration-100 hover:bg-[#0A0A0A] sm:px-3.5'
                     onClick={() => window.open(tweet.tweetUrl, '_blank', 'noopener,noreferrer')}
                   >
                     {/* Top section with profile info */}
@@ -179,7 +179,7 @@ export default function Testimonials() {
                     </div>
 
                     {/* Tweet content below with padding */}
-                    <p className='mt-2 line-clamp-4 font-[380] text-[#0A0A0A] text-[13px] leading-[1.3] transition-colors duration-300 group-hover:text-white'>
+                    <p className='mt-2 line-clamp-4 font-[380] text-[#0A0A0A] text-small leading-[1.3] transition-colors duration-300 group-hover:text-white'>
                       {tweet.text}
                     </p>
                   </div>
diff --git a/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx b/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx
index a5acd60fe0b..96fd354d9f3 100644
--- a/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx
+++ b/apps/sim/app/(landing)/integrations/components/request-integration-modal.tsx
@@ -99,7 +99,7 @@ export function RequestIntegrationModal() {
                     <polyline points='20 6 9 17 4 12' />
                   </svg>
                 </div>
-                <p className='text-[14px] text-[var(--text-primary)]'>
+                <p className='text-[14px] text-[var(--landing-text)]'>
                   Request submitted — we&apos;ll follow up at{' '}
                   <span className='font-medium'>{email}</span>.
                 </p>
diff --git a/apps/sim/app/(landing)/privacy/page.tsx b/apps/sim/app/(landing)/privacy/page.tsx
index 7d3be4c6430..84790944986 100644
--- a/apps/sim/app/(landing)/privacy/page.tsx
+++ b/apps/sim/app/(landing)/privacy/page.tsx
@@ -574,7 +574,7 @@ export default function PrivacyPolicy() {
           Please note that we may ask you to verify your identity before responding to such
           requests.
         </p>
-        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[#2A2A2A] p-3 text-[#ECECEC]'>
+        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[var(--landing-bg-elevated)] p-3 text-[var(--landing-text)]'>
           You have the right to complain to a Data Protection Authority about our collection and use
           of your Personal Information. For more information, please contact your local data
           protection authority in the European Economic Area (EEA).
@@ -596,7 +596,10 @@ export default function PrivacyPolicy() {
           sharing practices (such as analytics or advertising services) may be considered a "sale"
           or "share" under CCPA/CPRA. You have the right to opt-out of such data sharing. To
           exercise this right, contact us at{' '}
-          <Link href='mailto:privacy@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:privacy@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             privacy@sim.ai
           </Link>
           .
@@ -682,7 +685,10 @@ export default function PrivacyPolicy() {
           Sim interacts with are not covered by this policy and should be reported directly to the
           solution vendor in accordance with their disclosure policy (if any). Before beginning your
           inquiry, email us at{' '}
-          <Link href='mailto:security@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:security@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             security@sim.ai
           </Link>{' '}
           if you're unsure whether a system or endpoint is in scope.
@@ -701,7 +707,10 @@ export default function PrivacyPolicy() {
         <h3 className='mb-2 font-medium text-xl'>Reporting a vulnerability</h3>
         <p className='mb-4'>
           To report any security flaws, send an email to{' '}
-          <Link href='mailto:security@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:security@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             security@sim.ai
           </Link>
           . The next business day, we'll acknowledge receipt of your vulnerability report and keep
@@ -745,7 +754,7 @@ export default function PrivacyPolicy() {
             Email:{' '}
             <Link
               href='mailto:privacy@sim.ai'
-              className='text-[#ECECEC] underline hover:text-white'
+              className='text-[var(--landing-text)] underline hover:text-white'
             >
               privacy@sim.ai
             </Link>
diff --git a/apps/sim/app/(landing)/terms/page.tsx b/apps/sim/app/(landing)/terms/page.tsx
index e5c6099649e..0ac619980b3 100644
--- a/apps/sim/app/(landing)/terms/page.tsx
+++ b/apps/sim/app/(landing)/terms/page.tsx
@@ -281,7 +281,7 @@ export default function TermsOfService() {
           Agreement. The arbitration will be conducted by JAMS, an established alternative dispute
           resolution provider.
         </p>
-        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[#2A2A2A] p-3 text-[#ECECEC]'>
+        <p className='mb-4 border-[#3d3d3d] border-l-4 bg-[var(--landing-bg-elevated)] p-3 text-[var(--landing-text)]'>
           YOU AND COMPANY AGREE THAT EACH OF US MAY BRING CLAIMS AGAINST THE OTHER ONLY ON AN
           INDIVIDUAL BASIS AND NOT ON A CLASS, REPRESENTATIVE, OR COLLECTIVE BASIS. ONLY INDIVIDUAL
           RELIEF IS AVAILABLE, AND DISPUTES OF MORE THAN ONE CUSTOMER OR USER CANNOT BE ARBITRATED
@@ -290,7 +290,10 @@ export default function TermsOfService() {
         <p className='mb-4'>
           You have the right to opt out of the provisions of this Arbitration Agreement by sending a
           timely written notice of your decision to opt out to:{' '}
-          <Link href='mailto:legal@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:legal@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             legal@sim.ai{' '}
           </Link>
           within 30 days after first becoming subject to this Arbitration Agreement.
@@ -339,7 +342,7 @@ export default function TermsOfService() {
           Our Copyright Agent can be reached at:{' '}
           <Link
             href='mailto:copyright@sim.ai'
-            className='text-[#ECECEC] underline hover:text-white'
+            className='text-[var(--landing-text)] underline hover:text-white'
           >
             copyright@sim.ai
           </Link>
@@ -350,7 +353,10 @@ export default function TermsOfService() {
         <h2 className='mb-4 font-semibold text-2xl'>18. Contact Us</h2>
         <p>
           If you have any questions about these Terms, please contact us at:{' '}
-          <Link href='mailto:legal@sim.ai' className='text-[#ECECEC] underline hover:text-white'>
+          <Link
+            href='mailto:legal@sim.ai'
+            className='text-[var(--landing-text)] underline hover:text-white'
+          >
             legal@sim.ai
           </Link>
         </p>
diff --git a/apps/sim/app/_styles/globals.css b/apps/sim/app/_styles/globals.css
index 6512d7212f1..651e57f1063 100644
--- a/apps/sim/app/_styles/globals.css
+++ b/apps/sim/app/_styles/globals.css
@@ -15,6 +15,27 @@
   --toolbar-triggers-height: 300px; /* TOOLBAR_TRIGGERS_HEIGHT.DEFAULT */
   --editor-connections-height: 172px; /* EDITOR_CONNECTIONS_HEIGHT.DEFAULT */
   --terminal-height: 206px; /* TERMINAL_HEIGHT.DEFAULT */
+
+  /* z-index scale for layered UI
+     Popover must be above modal so dropdowns inside modals render correctly */
+  --z-dropdown: 100;
+  --z-modal: 200;
+  --z-popover: 300;
+  --z-tooltip: 400;
+  --z-toast: 500;
+
+  /* Shadow scale */
+  --shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.1);
+  --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.15);
+  --shadow-kbd: 0 4px 0 0 rgba(48, 48, 48, 1);
+  --shadow-kbd-sm: 0 2px 0 0 rgba(48, 48, 48, 1);
+  --shadow-brand-inset: inset 0 1.25px 2.5px 0 #9b77ff;
+  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
+
+  /* Scrollbar colors */
+  --scrollbar-thumb-color: #c0c0c0;
+  --scrollbar-thumb-hover-color: #a8a8a8;
 }
 
 .workspace-root {
@@ -197,67 +218,62 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --font-weight-medium: 440;
     --font-weight-semibold: 500;
 
-    /* Extended palette */
-    --c-0D0D0D: #0d0d0d;
-    --c-1A1A1A: #1a1a1a;
-    --c-1F1F1F: #1f1f1f;
-    --c-2A2A2A: #2a2a2a;
-    --c-383838: #383838;
-    --c-414141: #414141;
-    --c-442929: #442929;
-    --c-491515: #491515;
-    --c-575757: #575757;
-    --c-686868: #686868;
-    --c-707070: #707070;
-    --c-727272: #727272;
-    --c-737373: #737373;
-    --c-808080: #808080;
-    --c-858585: #858585;
-    --c-868686: #868686;
-    --c-8D8D8D: #8d8d8d;
-    --c-939393: #939393;
-    --c-A8A8A8: #a8a8a8;
-    --c-B8B8B8: #b8b8b8;
-    --c-C0C0C0: #c0c0c0;
-    --c-CDCDCD: #cdcdcd;
-    --c-D0D0D0: #d0d0d0;
-    --c-D2D2D2: #d2d2d2;
-    --c-E0E0E0: #e0e0e0;
-    --c-E5E5E5: #e5e5e5;
-    --c-E8E8E8: #e8e8e8;
-    --c-EEEEEE: #eeeeee;
-    --c-F0F0F0: #f0f0f0;
-    --c-F4F4F4: #f4f4f4;
-    --c-F5F5F5: #f5f5f5;
-
-    /* Blues and cyans */
-    --c-00B0B0: #00b0b0;
-    --c-264F78: #264f78;
-    --c-2F55FF: #2f55ff;
-    --c-2FA1FF: #2fa1ff;
-    --c-336699: #336699;
-    --c-34B5FF: #34b5ff;
-    --c-601EE0: #601ee0;
-    --c-611F69: #611f69;
-    --c-802FFF: #802fff;
-    --c-8357FF: #8357ff;
-    --c-8C10FF: #8c10ff;
-
-    /* Greens */
-    --c-4CAF50: #22c55e;
-
-    /* Oranges / Ambers */
-    --c-F59E0B: #f59e0b;
-    --c-F97316: #ea580c;
-    --c-FF972F: #f97316;
-
-    /* Reds */
-    --c-DC2626: #dc2626;
-    --c-F6D2D2: #fecaca;
-    --c-F87171: #f87171;
-    --c-FF402F: #ef4444;
-    --c-B91C1C: #b91c1c;
-    --c-883827: #7c2d12;
+    /* Landing / marketing - text (static dark-section colors) */
+    --landing-text: #ececec;
+    --landing-text-muted: #999999;
+    --landing-text-subtle: #f6f6f6;
+    --landing-text-dark: #1c1c1c;
+    --landing-text-secondary: #666666;
+    --landing-text-body: #cdcdcd;
+    --landing-text-icon: #939393;
+
+    /* Landing / marketing - surfaces */
+    --landing-bg: #1c1c1c;
+    --landing-bg-elevated: #2a2a2a;
+    --landing-bg-card: #232323;
+    --landing-bg-section: #f6f6f6;
+    --landing-bg-subtle: #fafafa;
+    --landing-bg-surface: #1e1e1e;
+    --landing-bg-hover: #f0f0f0;
+    --landing-bg-skeleton: #e8e8e8;
+
+    /* Landing / marketing - borders */
+    --landing-border: #2a2a2a;
+    --landing-border-light: #e5e5e5;
+    --landing-border-strong: #3d3d3d;
+    --landing-border-subtle: #d4d4d4;
+
+    /* Code editor (theme-aware) */
+    --code-bg: #f5f5f5;
+    --code-foreground: #1a1a1a;
+    --code-line-number: #737373;
+
+    /* Workspace: additional text */
+    --text-placeholder: #8d8d8d;
+    --text-success: #22c55e;
+
+    /* Status / semantic colors */
+    --error: #dc2626;
+    --error-muted: #fecaca;
+    --error-emphasis: #b91c1c;
+    --amber: #f59e0b;
+    --orange: #ea580c;
+    --orange-bright: #f97316;
+    --success: #22c55e;
+    --teal: #00b0b0;
+
+    /* Brand extended */
+    --brand-knowledge: #00b0b0;
+    --brand-purple-deep: #601ee0;
+    --brand-purple: #802fff;
+    --brand-purple-bright: #8357ff;
+    --brand-purple-vivid: #8c10ff;
+    --brand-plum: #611f69;
+    --brand-blue-dark: #264f78;
+    --brand-blue-muted: #336699;
+    --brand-blue: #2f55ff;
+    --brand-blue-light: #2fa1ff;
+    --brand-blue-sky: #34b5ff;
 
     /* Terminal status badges */
     --terminal-status-error-bg: #fef2f2;
@@ -319,70 +335,37 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --font-weight-medium: 480;
     --font-weight-semibold: 550;
 
-    /* Extended palette (exhaustive from code usage via -[#...]) */
-    /* Neutral deep shades */
-    --c-0D0D0D: #0d0d0d;
-    --c-1A1A1A: #1a1a1a;
-    --c-1F1F1F: #1f1f1f;
-    --c-2A2A2A: #2a2a2a;
-    --c-383838: #383838;
-    --c-414141: #414141;
-    --c-442929: #442929;
-    --c-491515: #491515;
-    --c-575757: #575757;
-    --c-686868: #686868;
-    --c-707070: #707070;
-    --c-727272: #727272;
-    --c-737373: #737373;
-    --c-808080: #808080;
-    --c-858585: #858585;
-    --c-868686: #868686;
-    --c-8D8D8D: #8d8d8d;
-    --c-939393: #939393;
-    --c-A8A8A8: #a8a8a8;
-    --c-B8B8B8: #b8b8b8;
-    --c-C0C0C0: #c0c0c0;
-    --c-CDCDCD: #cdcdcd;
-    --c-D0D0D0: #d0d0d0;
-    --c-D2D2D2: #d2d2d2;
-    --c-E0E0E0: #e0e0e0;
-    --c-E5E5E5: #e5e5e5;
-    --c-E8E8E8: #e8e8e8;
-    --c-EEEEEE: #eeeeee;
-    --c-F0F0F0: #f0f0f0;
-    --c-F4F4F4: #f4f4f4;
-    --c-F5F5F5: #f5f5f5;
-
-    --c-CFCFCF: #cfcfcf;
-
-    /* Blues and cyans */
-    --c-00B0B0: #00b0b0;
-    --c-264F78: #264f78;
-    --c-2F55FF: #2f55ff;
-    --c-2FA1FF: #2fa1ff;
-    --c-336699: #336699;
-    --c-34B5FF: #34b5ff;
-    --c-601EE0: #601ee0;
-    --c-611F69: #611f69;
-    --c-802FFF: #802fff;
-    --c-8357FF: #8357ff;
-    --c-8C10FF: #8c10ff;
-
-    /* Greens */
-    --c-4CAF50: #4caf50;
-
-    /* Oranges / Ambers */
-    --c-F59E0B: #f59e0b;
-    --c-F97316: #f97316;
-    --c-FF972F: #ff972f;
-
-    /* Reds */
-    --c-DC2626: #dc2626;
-    --c-F6D2D2: #f6d2d2;
-    --c-F87171: #f87171;
-    --c-FF402F: #ff402f;
-    --c-B91C1C: #b91c1c;
-    --c-883827: #883827;
+    /* Code editor (dark mode overrides) */
+    --code-bg: #1f1f1f;
+    --code-foreground: #eeeeee;
+    --code-line-number: #a8a8a8;
+
+    /* Workspace text */
+    --text-placeholder: #8d8d8d;
+    --text-success: #22c55e;
+
+    /* Status / semantic (dark overrides where needed) */
+    --error: #f87171;
+    --error-muted: #f6d2d2;
+    --error-emphasis: #b91c1c;
+    --amber: #f59e0b;
+    --orange: #f97316;
+    --orange-bright: #ff972f;
+    --success: #22c55e;
+    --teal: #00b0b0;
+
+    /* Brand extended */
+    --brand-knowledge: #00b0b0;
+    --brand-purple-deep: #601ee0;
+    --brand-purple: #802fff;
+    --brand-purple-bright: #8357ff;
+    --brand-purple-vivid: #8c10ff;
+    --brand-plum: #611f69;
+    --brand-blue-dark: #264f78;
+    --brand-blue-muted: #336699;
+    --brand-blue: #2f55ff;
+    --brand-blue-light: #2fa1ff;
+    --brand-blue-sky: #34b5ff;
 
     /* Terminal status badges */
     --terminal-status-error-bg: #491515;
@@ -393,6 +376,13 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
     --terminal-status-warning-bg: #3d3520;
     --terminal-status-warning-border: #5c4d1f;
     --terminal-status-warning-color: #d4a72c;
+
+    /* Scrollbar colors */
+    --scrollbar-thumb-color: #5a5a5a;
+    --scrollbar-thumb-hover-color: #6a6a6a;
+
+    /* Shadow scale - dark */
+    --shadow-overlay: 0 16px 48px rgba(0, 0, 0, 0.4);
   }
 }
 
@@ -446,12 +436,12 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   }
 
   ::-webkit-scrollbar-thumb {
-    background-color: #c0c0c0;
+    background-color: var(--scrollbar-thumb-color);
     border-radius: var(--radius);
   }
 
   ::-webkit-scrollbar-thumb:hover {
-    background-color: #a8a8a8;
+    background-color: var(--scrollbar-thumb-hover-color);
   }
 
   /* Dark Mode Global Scrollbar */
@@ -460,20 +450,20 @@ html[data-sidebar-collapsed] .sidebar-container .sidebar-collapse-btn {
   }
 
   .dark ::-webkit-scrollbar-thumb {
-    background-color: #5a5a5a;
+    background-color: var(--scrollbar-thumb-color);
   }
 
   .dark ::-webkit-scrollbar-thumb:hover {
-    background-color: #6a6a6a;
+    background-color: var(--scrollbar-thumb-hover-color);
   }
 
   * {
     scrollbar-width: thin;
-    scrollbar-color: #c0c0c0 transparent;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
   }
 
   .dark * {
-    scrollbar-color: #5a5a5a transparent;
+    scrollbar-color: var(--scrollbar-thumb-color) transparent;
   }
 
   .copilot-scrollable {
diff --git a/apps/sim/app/changelog/components/changelog-content.tsx b/apps/sim/app/changelog/components/changelog-content.tsx
index d8f3e687e93..7b324c7ca38 100644
--- a/apps/sim/app/changelog/components/changelog-content.tsx
+++ b/apps/sim/app/changelog/components/changelog-content.tsx
@@ -47,35 +47,35 @@ export default async function ChangelogContent() {
     <div className='min-h-screen'>
       <div className='relative grid md:grid-cols-2'>
         {/* Left intro panel */}
-        <div className='relative top-0 overflow-hidden border-[#2A2A2A] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
+        <div className='relative top-0 overflow-hidden border-[var(--landing-bg-elevated)] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
           <div className='relative mx-auto h-full max-w-xl md:flex md:flex-col md:justify-center'>
             <h1 className='mt-6 font-[500] text-4xl tracking-tight sm:text-5xl'>Changelog</h1>
-            <p className='mt-4 text-[#999] text-sm'>
+            <p className='mt-4 text-[var(--landing-text-muted)] text-sm'>
               Stay up-to-date with the latest features, improvements, and bug fixes in Sim. All
               changes are documented here with detailed release notes.
             </p>
-            <hr className='mt-6 border-[#2A2A2A]' />
+            <hr className='mt-6 border-[var(--landing-bg-elevated)]' />
 
             <div className='mt-6 flex flex-wrap items-center gap-3 text-sm'>
               <Link
                 href='https://github.com/simstudioai/sim/releases'
                 target='_blank'
                 rel='noopener noreferrer'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] py-[5px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+                className='inline-flex items-center gap-2 rounded-[5px] border border-[var(--white)] bg-[var(--white)] px-[9px] py-[5px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
               >
                 <Github className='h-4 w-4' />
                 View on GitHub
               </Link>
               <Link
                 href='https://docs.sim.ai'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
               >
                 <BookOpen className='h-4 w-4' />
                 Documentation
               </Link>
               <Link
                 href='/changelog.xml'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
+                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[13.5px] text-[var(--landing-text)] transition-colors hover:bg-[var(--landing-bg-elevated)]'
               >
                 <Rss className='h-4 w-4' />
                 RSS Feed
diff --git a/apps/sim/app/changelog/components/timeline-list.tsx b/apps/sim/app/changelog/components/timeline-list.tsx
index 968d80ea087..09075569b6b 100644
--- a/apps/sim/app/changelog/components/timeline-list.tsx
+++ b/apps/sim/app/changelog/components/timeline-list.tsx
@@ -98,7 +98,7 @@ export default function ChangelogList({ initialEntries }: Props) {
         <div key={entry.tag}>
           <div className='flex items-center justify-between gap-4'>
             <div className='flex items-center gap-2'>
-              <div className='font-[500] text-[#ECECEC] text-[18px] tracking-tight'>
+              <div className='font-[500] text-[var(--landing-text)] text-lg tracking-tight'>
                 {entry.tag}
               </div>
               {entry.contributors && entry.contributors.length > 0 && (
@@ -113,7 +113,7 @@ export default function ChangelogList({ initialEntries }: Props) {
                       title={`@${contributor}`}
                       className='block'
                     >
-                      <Avatar className='size-6 ring-2 ring-[#1C1C1C]'>
+                      <Avatar className='size-6 ring-2 ring-[var(--landing-bg)]'>
                         <AvatarImage
                           src={`https://avatars.githubusercontent.com/${contributor}`}
                           alt={`@${contributor}`}
@@ -124,14 +124,14 @@ export default function ChangelogList({ initialEntries }: Props) {
                     </a>
                   ))}
                   {entry.contributors.length > 5 && (
-                    <div className='relative flex size-6 items-center justify-center rounded-full bg-[#2A2A2A] text-[#ECECEC] text-[10px] ring-2 ring-[#1C1C1C] hover:z-10'>
+                    <div className='relative flex size-6 items-center justify-center rounded-full bg-[var(--landing-bg-elevated)] text-[var(--landing-text)] text-micro ring-2 ring-[var(--landing-bg)] hover:z-10'>
                       +{entry.contributors.length - 5}
                     </div>
                   )}
                 </div>
               )}
             </div>
-            <div className='text-[#999] text-xs'>
+            <div className='text-[var(--landing-text-muted)] text-xs'>
               {new Date(entry.date).toLocaleDateString('en-US', {
                 year: 'numeric',
                 month: 'short',
@@ -146,7 +146,7 @@ export default function ChangelogList({ initialEntries }: Props) {
                 h2: ({ children, ...props }) =>
                   isContributorsLabel(children) ? null : (
                     <h3
-                      className='mt-5 mb-2 font-[500] text-[#ECECEC] text-[13px] tracking-tight'
+                      className='mt-5 mb-2 font-[500] text-[var(--landing-text)] text-small tracking-tight'
                       {...props}
                     >
                       {children}
@@ -155,7 +155,7 @@ export default function ChangelogList({ initialEntries }: Props) {
                 h3: ({ children, ...props }) =>
                   isContributorsLabel(children) ? null : (
                     <h4
-                      className='mt-4 mb-1 font-[500] text-[#ECECEC] text-[13px] tracking-tight'
+                      className='mt-4 mb-1 font-[500] text-[var(--landing-text)] text-small tracking-tight'
                       {...props}
                     >
                       {children}
@@ -170,25 +170,31 @@ export default function ChangelogList({ initialEntries }: Props) {
                   const text = String(children)
                   if (/^\s*contributors\s*:?\s*$/i.test(text)) return null
                   return (
-                    <li className='text-[#999] text-[13px] leading-relaxed' {...props}>
+                    <li
+                      className='text-[var(--landing-text-muted)] text-small leading-relaxed'
+                      {...props}
+                    >
                       {children}
                     </li>
                   )
                 },
                 p: ({ children, ...props }) =>
                   /^\s*contributors\s*:?\s*$/i.test(String(children)) ? null : (
-                    <p className='mb-3 text-[#999] text-[13px] leading-relaxed' {...props}>
+                    <p
+                      className='mb-3 text-[var(--landing-text-muted)] text-small leading-relaxed'
+                      {...props}
+                    >
                       {children}
                     </p>
                   ),
                 strong: ({ children, ...props }) => (
-                  <strong className='font-[500] text-[#ECECEC]' {...props}>
+                  <strong className='font-[500] text-[var(--landing-text)]' {...props}>
                     {children}
                   </strong>
                 ),
                 code: ({ children, ...props }) => (
                   <code
-                    className='rounded bg-[#2A2A2A] px-1 py-0.5 font-mono text-[#ECECEC] text-xs'
+                    className='rounded bg-[var(--landing-bg-elevated)] px-1 py-0.5 font-mono text-[var(--landing-text)] text-xs'
                     {...props}
                   >
                     {children}
@@ -217,7 +223,7 @@ export default function ChangelogList({ initialEntries }: Props) {
             type='button'
             onClick={loadMore}
             disabled={loading}
-            className='rounded-[5px] border border-[#3d3d3d] px-3 py-1.5 text-[#ECECEC] text-[13px] transition-colors hover:bg-[#2A2A2A] disabled:opacity-60'
+            className='rounded-[5px] border border-[#3d3d3d] px-3 py-1.5 text-[var(--landing-text)] text-small transition-colors hover:bg-[var(--landing-bg-elevated)] disabled:opacity-60'
           >
             {loading ? 'Loading…' : 'Show more'}
           </button>
diff --git a/apps/sim/app/changelog/layout.tsx b/apps/sim/app/changelog/layout.tsx
index 5fbd2896730..e392181c182 100644
--- a/apps/sim/app/changelog/layout.tsx
+++ b/apps/sim/app/changelog/layout.tsx
@@ -7,7 +7,7 @@ export default async function ChangelogLayout({ children }: { children: React.Re
   const blogPosts = await getNavBlogPosts()
   return (
     <div
-      className={`${martianMono.variable} relative min-h-screen bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]`}
+      className={`${martianMono.variable} relative min-h-screen bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]`}
     >
       <header>
         <Navbar blogPosts={blogPosts} />
diff --git a/apps/sim/app/chat/components/auth/email/email-auth.tsx b/apps/sim/app/chat/components/auth/email/email-auth.tsx
index 72cb122d4ff..1178a03796f 100644
--- a/apps/sim/app/chat/components/auth/email/email-auth.tsx
+++ b/apps/sim/app/chat/components/auth/email/email-auth.tsx
@@ -182,18 +182,18 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
                   {showOtpVerification ? 'Verify Your Email' : 'Email Verification'}
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   {showOtpVerification
                     ? `A verification code has been sent to ${email}`
                     : 'This chat requires email verification'}
@@ -246,7 +246,7 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                   </form>
                 ) : (
                   <div className='space-y-6'>
-                    <p className='text-center text-[#999] text-sm'>
+                    <p className='text-center text-[var(--text-subtle)] text-sm'>
                       Enter the 6-digit code to verify your account. If you don't see it in your
                       inbox, check your spam folder.
                     </p>
@@ -311,7 +311,7 @@ export default function EmailAuth({ identifier, onAuthSuccess }: EmailAuthProps)
                       </p>
                     </div>
 
-                    <div className='text-center font-light text-[14px]'>
+                    <div className='text-center font-light text-sm'>
                       <button
                         onClick={() => {
                           setShowOtpVerification(false)
diff --git a/apps/sim/app/chat/components/auth/password/password-auth.tsx b/apps/sim/app/chat/components/auth/password/password-auth.tsx
index c25f63b5c38..832f450887c 100644
--- a/apps/sim/app/chat/components/auth/password/password-auth.tsx
+++ b/apps/sim/app/chat/components/auth/password/password-auth.tsx
@@ -80,18 +80,18 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
                   Password Required
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   This chat is password-protected
                 </p>
               </div>
@@ -103,47 +103,59 @@ export default function PasswordAuth({ identifier, onAuthSuccess }: PasswordAuth
                 }}
                 className='mt-8 w-full max-w-[410px] space-y-6'
               >
-                <div className='space-y-2'>
+                <div className='space-y-6'>
                   <div className='flex items-center justify-between'>
                     <Label htmlFor='password'>Password</Label>
                   </div>
                   <div className='relative'>
-                    <Input
-                      id='password'
-                      name='password'
-                      required
-                      type={showPassword ? 'text' : 'password'}
-                      autoCapitalize='none'
-                      autoComplete='new-password'
-                      autoCorrect='off'
-                      placeholder='Enter password'
-                      value={password}
-                      onChange={handlePasswordChange}
-                      onKeyDown={handleKeyDown}
+                    <div className='relative'>
+                      <Input
+                        id='password'
+                        name='password'
+                        required
+                        type={showPassword ? 'text' : 'password'}
+                        autoCapitalize='none'
+                        autoComplete='new-password'
+                        autoCorrect='off'
+                        placeholder='Enter password'
+                        value={password}
+                        onChange={handlePasswordChange}
+                        onKeyDown={handleKeyDown}
+                        className={cn(
+                          'pr-10',
+                          showValidationError &&
+                            passwordErrors.length > 0 &&
+                            'border-red-500 focus:border-red-500'
+                        )}
+                        autoFocus
+                      />
+                      <button
+                        type='button'
+                        onClick={() => setShowPassword(!showPassword)}
+                        className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] hover:text-[var(--landing-text)]'
+                        aria-label={showPassword ? 'Hide password' : 'Show password'}
+                      >
+                        {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
+                      </button>
+                    </div>
+                    <div
                       className={cn(
-                        'pr-10',
-                        showValidationError &&
-                          passwordErrors.length > 0 &&
-                          'border-red-500 focus:border-red-500'
+                        'absolute right-0 left-0 z-10 grid transition-[grid-template-rows] duration-200 ease-out',
+                        showValidationError && passwordErrors.length > 0
+                          ? 'grid-rows-[1fr]'
+                          : 'grid-rows-[0fr]'
                       )}
-                      autoFocus
-                    />
-                    <button
-                      type='button'
-                      onClick={() => setShowPassword(!showPassword)}
-                      className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] hover:text-[#ECECEC]'
-                      aria-label={showPassword ? 'Hide password' : 'Show password'}
+                      aria-live='polite'
                     >
-                      {showPassword ? <EyeOff size={18} /> : <Eye size={18} />}
-                    </button>
-                  </div>
-                  {showValidationError && passwordErrors.length > 0 && (
-                    <div className='mt-1 space-y-1 text-red-400 text-xs'>
-                      {passwordErrors.map((error, index) => (
-                        <p key={index}>{error}</p>
-                      ))}
+                      <div className='overflow-hidden'>
+                        <div className='mt-1 space-y-1 text-red-400 text-xs'>
+                          {passwordErrors.map((error, index) => (
+                            <p key={index}>{error}</p>
+                          ))}
+                        </div>
+                      </div>
                     </div>
-                  )}
+                  </div>
                 </div>
 
                 <BrandedButton
diff --git a/apps/sim/app/chat/components/header/header.tsx b/apps/sim/app/chat/components/header/header.tsx
index 43a9d7d7bbb..bb1bcdb7264 100644
--- a/apps/sim/app/chat/components/header/header.tsx
+++ b/apps/sim/app/chat/components/header/header.tsx
@@ -26,7 +26,7 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
   return (
     <nav
       aria-label='Chat navigation'
-      className={`flex w-full items-center justify-between px-4 pt-[12px] pb-[21px] sm:px-8 sm:pt-[8.5px] md:px-[44px] md:pt-[16px]`}
+      className={`flex w-full items-center justify-between px-4 pt-3 pb-[21px] sm:px-8 sm:pt-[8.5px] md:px-[44px] md:pt-4`}
     >
       <div className='flex items-center gap-[34px]'>
         <div className='flex items-center gap-3'>
@@ -40,19 +40,19 @@ export function ChatHeader({ chatConfig, starCount }: ChatHeaderProps) {
               className='h-6 w-6 rounded-md object-cover'
             />
           )}
-          <h2 className='font-medium text-[18px] text-foreground'>
+          <h2 className='font-medium text-foreground text-lg'>
             {chatConfig?.customizations?.headerText || chatConfig?.title || 'Chat'}
           </h2>
         </div>
       </div>
 
       {!brand.logoUrl && (
-        <div className='flex items-center gap-[16px]'>
+        <div className='flex items-center gap-4'>
           <a
             href='https://github.com/simstudioai/sim'
             target='_blank'
             rel='noopener noreferrer'
-            className='flex items-center gap-2 text-[16px] text-muted-foreground transition-colors hover:text-foreground'
+            className='flex items-center gap-2 text-md text-muted-foreground transition-colors hover:text-foreground'
             aria-label={`GitHub repository - ${starCount} stars`}
           >
             <GithubIcon className='h-[16px] w-[16px]' aria-hidden='true' />
diff --git a/apps/sim/app/chat/components/input/input.tsx b/apps/sim/app/chat/components/input/input.tsx
index 25402cf475b..d1742f8069e 100644
--- a/apps/sim/app/chat/components/input/input.tsx
+++ b/apps/sim/app/chat/components/input/input.tsx
@@ -303,7 +303,7 @@ export const ChatInput: React.FC<{
                             <div className='truncate font-medium text-gray-800 text-xs dark:text-gray-200'>
                               {file.name}
                             </div>
-                            <div className='text-[10px] text-gray-500 dark:text-gray-400'>
+                            <div className='text-gray-500 text-micro dark:text-gray-400'>
                               {formatFileSize(file.size)}
                             </div>
                           </div>
diff --git a/apps/sim/app/chat/components/message/components/file-download.tsx b/apps/sim/app/chat/components/message/components/file-download.tsx
index be884b1a2a3..23f1e31c8fd 100644
--- a/apps/sim/app/chat/components/message/components/file-download.tsx
+++ b/apps/sim/app/chat/components/message/components/file-download.tsx
@@ -119,7 +119,7 @@ export function ChatFileDownload({ file }: ChatFileDownloadProps) {
       <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center'>{renderIcon()}</div>
       <div className='min-w-0 flex-1 text-left'>
         <div className='w-[100px] truncate text-xs'>{file.name}</div>
-        <div className='text-[10px] text-[var(--text-muted)]'>{formatFileSize(file.size)}</div>
+        <div className='text-[var(--text-muted)] text-micro'>{formatFileSize(file.size)}</div>
       </div>
       <div className='flex-shrink-0'>
         {isDownloading ? (
diff --git a/apps/sim/app/chat/components/message/components/markdown-renderer.tsx b/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
index 8aa66579d5c..c0152c53b2a 100644
--- a/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
+++ b/apps/sim/app/chat/components/message/components/markdown-renderer.tsx
@@ -208,7 +208,7 @@ const MarkdownRenderer = memo(function MarkdownRenderer({
   const processedContent = content.trim()
 
   return (
-    <div className='space-y-4 break-words font-sans text-[#0D0D0D] text-base leading-relaxed dark:text-gray-100'>
+    <div className='space-y-4 break-words font-sans text-[var(--text-primary)] text-base leading-relaxed dark:text-gray-100'>
       <ReactMarkdown remarkPlugins={REMARK_PLUGINS} components={components}>
         {processedContent}
       </ReactMarkdown>
diff --git a/apps/sim/app/chat/components/message/message.tsx b/apps/sim/app/chat/components/message/message.tsx
index a9186ae020e..e4fac1eca7d 100644
--- a/apps/sim/app/chat/components/message/message.tsx
+++ b/apps/sim/app/chat/components/message/message.tsx
@@ -146,7 +146,7 @@ export const ClientChatMessage = memo(
                                 {attachment.name}
                               </div>
                               {attachment.size && (
-                                <div className='text-[10px] text-gray-500 md:text-xs dark:text-gray-400'>
+                                <div className='text-gray-500 text-micro md:text-xs dark:text-gray-400'>
                                   {formatFileSize(attachment.size)}
                                 </div>
                               )}
@@ -163,7 +163,7 @@ export const ClientChatMessage = memo(
             {/* Only render message bubble if there's actual text content (not just file count message) */}
             {message.content && !String(message.content).startsWith('Sent') && (
               <div className='flex justify-end'>
-                <div className='max-w-[80%] rounded-3xl bg-[#F4F4F4] px-4 py-3 dark:bg-gray-600'>
+                <div className='max-w-[80%] rounded-3xl bg-[var(--surface-4)] px-4 py-3 dark:bg-gray-600'>
                   <div className='whitespace-pre-wrap break-words text-base text-gray-800 leading-relaxed dark:text-gray-100'>
                     {isJsonObject ? (
                       <pre>{JSON.stringify(message.content, null, 2)}</pre>
diff --git a/apps/sim/app/form/[identifier]/components/form-field.tsx b/apps/sim/app/form/[identifier]/components/form-field.tsx
index f51f0dd4f98..77184d8a6ed 100644
--- a/apps/sim/app/form/[identifier]/components/form-field.tsx
+++ b/apps/sim/app/form/[identifier]/components/form-field.tsx
@@ -95,7 +95,7 @@ export function FormField({
               onCheckedChange={onChange}
               style={value ? { backgroundColor: primaryColor } : undefined}
             />
-            <span className={'text-[14px] text-muted-foreground'}>{value ? 'Yes' : 'No'}</span>
+            <span className={'text-muted-foreground text-sm'}>{value ? 'Yes' : 'No'}</span>
           </div>
         )
 
@@ -122,7 +122,7 @@ export function FormField({
             placeholder={
               placeholder || (field.type === 'array' ? '["item1", "item2"]' : '{"key": "value"}')
             }
-            className='min-h-[100px] rounded-[10px] font-mono text-[13px] shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
+            className='min-h-[100px] rounded-[10px] font-mono text-small shadow-sm transition-colors focus:border-gray-400 focus:ring-2 focus:ring-gray-100'
           />
         )
 
@@ -156,7 +156,7 @@ export function FormField({
                 className='mb-2 h-6 w-6 text-muted-foreground'
                 style={isDragging ? { color: primaryColor } : undefined}
               />
-              <p className={'text-center text-[14px] text-muted-foreground'}>
+              <p className={'text-center text-muted-foreground text-sm'}>
                 <span style={{ color: primaryColor }} className='font-medium'>
                   Click to upload
                 </span>{' '}
@@ -169,13 +169,13 @@ export function FormField({
                 {files.map((file, idx) => (
                   <div
                     key={idx}
-                    className='flex items-center justify-between rounded-[8px] border border-border bg-muted/30 px-3 py-2'
+                    className='flex items-center justify-between rounded-lg border border-border bg-muted/30 px-3 py-2'
                   >
                     <div className='min-w-0 flex-1'>
-                      <p className={'truncate font-medium text-[13px] text-foreground'}>
+                      <p className={'truncate font-medium text-foreground text-small'}>
                         {file.name}
                       </p>
-                      <p className={'text-[12px] text-muted-foreground'}>
+                      <p className={'text-caption text-muted-foreground'}>
                         {formatFileSize(file.size)}
                       </p>
                     </div>
@@ -212,7 +212,7 @@ export function FormField({
 
   return (
     <div className='space-y-2'>
-      <Label className={'font-medium text-[14px] text-foreground'}>
+      <Label className={'font-medium text-foreground text-sm'}>
         {displayLabel}
         {isRequired && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
       </Label>
diff --git a/apps/sim/app/form/[identifier]/components/password-auth.tsx b/apps/sim/app/form/[identifier]/components/password-auth.tsx
index d6c6f54e915..f18f3b38923 100644
--- a/apps/sim/app/form/[identifier]/components/password-auth.tsx
+++ b/apps/sim/app/form/[identifier]/components/password-auth.tsx
@@ -33,18 +33,18 @@ export function PasswordAuth({ onSubmit, error }: PasswordAuthProps) {
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
                   Password Required
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   Enter the password to access this form.
                 </p>
               </div>
@@ -65,12 +65,12 @@ export function PasswordAuth({ onSubmit, error }: PasswordAuthProps) {
                     <button
                       type='button'
                       onClick={() => setShowPassword(!showPassword)}
-                      className='-translate-y-1/2 absolute top-1/2 right-3 text-[#999] hover:text-[#ECECEC]'
+                      className='-translate-y-1/2 absolute top-1/2 right-3 text-[var(--text-subtle)] hover:text-[var(--landing-text)]'
                     >
                       {showPassword ? <EyeOff className='h-4 w-4' /> : <Eye className='h-4 w-4' />}
                     </button>
                   </div>
-                  {error && <p className='text-[14px] text-red-500'>{error}</p>}
+                  {error && <p className='text-red-500 text-sm'>{error}</p>}
                 </div>
 
                 <BrandedButton
diff --git a/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx b/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx
index 29e78da43b1..339c24e4d2d 100644
--- a/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx
+++ b/apps/sim/app/form/[identifier]/components/powered-by-sim.tsx
@@ -9,7 +9,7 @@ export function PoweredBySim() {
   return (
     <div
       className={
-        'fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[#999] text-[13px] leading-relaxed'
+        'fixed right-0 bottom-0 left-0 z-50 pb-8 text-center font-[340] text-[var(--text-subtle)] text-small leading-relaxed'
       }
     >
       <a
diff --git a/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx b/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx
index 829f7b9edfd..303bff5798f 100644
--- a/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx
+++ b/apps/sim/app/form/[identifier]/components/thank-you-screen.tsx
@@ -34,7 +34,7 @@ export function ThankYouScreen({ title, message, primaryColor }: ThankYouScreenP
         >
           {title}
         </h2>
-        <p className={'mt-3 max-w-md font-[380] text-[#999] text-[16px]'}>{message}</p>
+        <p className={'mt-3 max-w-md font-[380] text-[var(--text-subtle)] text-md'}>{message}</p>
       </div>
     </main>
   )
diff --git a/apps/sim/app/form/[identifier]/form.tsx b/apps/sim/app/form/[identifier]/form.tsx
index 47a2e93e07b..6941e5d59d5 100644
--- a/apps/sim/app/form/[identifier]/form.tsx
+++ b/apps/sim/app/form/[identifier]/form.tsx
@@ -238,7 +238,7 @@ export default function Form({ identifier }: { identifier: string }) {
   if (isSubmitted && thankYouData) {
     return (
       <AuthBackground className={`${martianMono.variable} dark font-[430] font-season`}>
-        <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
+        <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
           <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
             <ThankYouScreen
               title={thankYouData.title}
@@ -270,22 +270,24 @@ export default function Form({ identifier }: { identifier: string }) {
 
   return (
     <AuthBackground className={`${martianMono.variable} dark font-[430] font-season`}>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--landing-text)]'>
         <div className='relative z-30 flex flex-1 justify-center px-4 pt-16 pb-24'>
           <div className='w-full max-w-[410px]'>
             {/* Form title */}
             <div className='mb-8 text-center'>
-              <h1 className='font-[500] text-[#ECECEC] text-[28px] tracking-tight'>
+              <h1 className='font-[500] text-[28px] text-[var(--landing-text)] tracking-tight'>
                 {formConfig.title}
               </h1>
               {formConfig.description && (
-                <p className='mt-2 font-[380] text-[#999] text-[15px]'>{formConfig.description}</p>
+                <p className='mt-2 font-[380] text-[var(--text-subtle)] text-base'>
+                  {formConfig.description}
+                </p>
               )}
             </div>
 
             <form onSubmit={handleSubmit} className='space-y-6'>
               {fields.length === 0 ? (
-                <div className='rounded-[10px] border border-[#2A2A2A] bg-[#2A2A2A] p-6 text-center text-[#999]'>
+                <div className='rounded-[10px] border border-[var(--landing-bg-elevated)] bg-[var(--surface-4)] p-6 text-center text-[var(--text-subtle)]'>
                   This form has no fields configured.
                 </div>
               ) : (
@@ -307,7 +309,7 @@ export default function Form({ identifier }: { identifier: string }) {
               )}
 
               {error && (
-                <div className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] p-3 text-red-500 text-sm'>
+                <div className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-4)] p-3 text-red-500 text-sm'>
                   {error}
                 </div>
               )}
diff --git a/apps/sim/app/invite/components/layout.tsx b/apps/sim/app/invite/components/layout.tsx
index 1d6ce1fd1d0..2dd235bc479 100644
--- a/apps/sim/app/invite/components/layout.tsx
+++ b/apps/sim/app/invite/components/layout.tsx
@@ -9,7 +9,7 @@ interface InviteLayoutProps {
 
 export default function InviteLayout({ children }: InviteLayoutProps) {
   return (
-    <div className='relative flex min-h-screen flex-col bg-[#1C1C1C] font-[430] font-season text-[#ECECEC]'>
+    <div className='relative flex min-h-screen flex-col bg-[var(--landing-bg)] font-[430] font-season text-[var(--landing-text)]'>
       <header className='shrink-0'>
         <Navbar logoOnly />
       </header>
diff --git a/apps/sim/app/invite/components/status-card.tsx b/apps/sim/app/invite/components/status-card.tsx
index 19f03ce282d..e6b70d4d92c 100644
--- a/apps/sim/app/invite/components/status-card.tsx
+++ b/apps/sim/app/invite/components/status-card.tsx
@@ -32,11 +32,13 @@ export function InviteStatusCard({
     return (
       <>
         <div className='space-y-1 text-center'>
-          <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>Loading</h1>
-          <p className='font-[380] text-[#999] text-[16px]'>{description}</p>
+          <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
+            Loading
+          </h1>
+          <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p>
         </div>
         <div className='mt-8 flex w-full items-center justify-center py-8'>
-          <Loader2 className='h-8 w-8 animate-spin text-[#999]' />
+          <Loader2 className='h-8 w-8 animate-spin text-[var(--landing-text-muted)]' />
         </div>
       </>
     )
@@ -45,8 +47,10 @@ export function InviteStatusCard({
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>{title}</h1>
-        <p className='font-[380] text-[#999] text-[16px]'>{description}</p>
+        <h1 className='font-[500] text-[32px] text-[var(--landing-text)] tracking-tight'>
+          {title}
+        </h1>
+        <p className='font-[380] text-[var(--landing-text-muted)] text-md'>{description}</p>
       </div>
 
       <div className='mt-8 w-full max-w-[410px] space-y-3'>
@@ -66,7 +70,7 @@ export function InviteStatusCard({
             showArrow={false}
             className={
               index !== 0
-                ? 'border-[#3d3d3d] bg-transparent text-[#ECECEC] hover:border-[#3d3d3d] hover:bg-[#2A2A2A]'
+                ? 'border-[#3d3d3d] bg-transparent text-[var(--landing-text)] hover:border-[#3d3d3d] hover:bg-[var(--landing-bg-elevated)]'
                 : undefined
             }
           >
diff --git a/apps/sim/app/not-found.tsx b/apps/sim/app/not-found.tsx
index 5556ae4ccab..f93c42b5270 100644
--- a/apps/sim/app/not-found.tsx
+++ b/apps/sim/app/not-found.tsx
@@ -4,28 +4,28 @@ import AuthBackground from '@/app/(auth)/components/auth-background'
 import Navbar from '@/app/(home)/components/navbar/navbar'
 
 const CTA_BASE =
-  'inline-flex items-center h-[32px] rounded-[5px] border px-[10px] font-[430] font-season text-[14px]'
+  'inline-flex items-center h-[32px] rounded-[5px] border px-2.5 font-[430] font-season text-sm'
 
 export default async function NotFound() {
   const blogPosts = await getNavBlogPosts()
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-full flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-full flex-col text-[var(--landing-text)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar blogPosts={blogPosts} />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
-          <div className='flex flex-col items-center gap-[12px]'>
+          <div className='flex flex-col items-center gap-3'>
             <h1 className='font-[430] font-season text-[40px] text-white leading-[110%] tracking-[-0.02em]'>
-              Page Not Found
+              Page not found
             </h1>
-            <p className='font-[430] font-season text-[#F6F6F6]/60 text-[18px] leading-[125%] tracking-[0.02em]'>
+            <p className='font-[430] font-season text-[color-mix(in_srgb,var(--landing-text-subtle)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
               The page you&apos;re looking for doesn&apos;t exist or has been moved.
             </p>
-            <div className='mt-[12px] flex items-center gap-[8px]'>
+            <div className='mt-3 flex items-center gap-2'>
               <Link
                 href='/'
-                className={`${CTA_BASE} gap-[8px] border-[#FFFFFF] bg-[#FFFFFF] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
+                className={`${CTA_BASE} gap-2 border-white bg-white text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]`}
               >
                 Return to Home
               </Link>
diff --git a/apps/sim/app/templates/[id]/template.tsx b/apps/sim/app/templates/[id]/template.tsx
index c028f521387..422a257baf2 100644
--- a/apps/sim/app/templates/[id]/template.tsx
+++ b/apps/sim/app/templates/[id]/template.tsx
@@ -65,7 +65,7 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
       <div className={cn('flex flex-1', isWorkspaceContext && 'overflow-hidden')}>
         <div
           className={cn(
-            'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
+            'flex flex-1 flex-col px-6 pt-6 pb-6',
             isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
           )}
         >
@@ -73,54 +73,54 @@ function TemplateDetailsLoading({ isWorkspaceContext, workspaceId }: TemplateDet
           <Breadcrumb items={breadcrumbItems} />
 
           {/* Template name and action buttons */}
-          <div className='mt-[14px] flex items-center justify-between'>
-            <Skeleton className='h-[27px] w-[250px] rounded-[4px]' />
-            <div className='flex items-center gap-[8px]'>
-              <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+          <div className='mt-3.5 flex items-center justify-between'>
+            <Skeleton className='h-[27px] w-[250px] rounded-sm' />
+            <div className='flex items-center gap-2'>
+              <Skeleton className='h-[32px] w-[80px] rounded-md' />
             </div>
           </div>
 
           {/* Template tagline */}
-          <div className='mt-[4px]'>
-            <Skeleton className='h-[21px] w-[400px] rounded-[4px]' />
+          <div className='mt-1'>
+            <Skeleton className='h-[21px] w-[400px] rounded-sm' />
           </div>
 
           {/* Creator and stats row */}
-          <div className='mt-[16px] flex items-center gap-[8px]'>
+          <div className='mt-4 flex items-center gap-2'>
             {/* Star icon and count */}
-            <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
-            <Skeleton className='h-[21px] w-[24px] rounded-[4px]' />
+            <Skeleton className='h-[14px] w-[14px] rounded-xs' />
+            <Skeleton className='h-[21px] w-[24px] rounded-sm' />
 
             {/* Views icon and count */}
-            <Skeleton className='h-[16px] w-[16px] rounded-[2px]' />
-            <Skeleton className='h-[21px] w-[32px] rounded-[4px]' />
+            <Skeleton className='h-[16px] w-[16px] rounded-xs' />
+            <Skeleton className='h-[21px] w-[32px] rounded-sm' />
 
             {/* Vertical divider */}
-            <div className='mx-[4px] mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
+            <div className='mx-1 mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
 
             {/* Creator profile pic */}
             <Skeleton className='h-[16px] w-[16px] rounded-full' />
             {/* Creator name */}
-            <Skeleton className='h-[21px] w-[100px] rounded-[4px]' />
+            <Skeleton className='h-[21px] w-[100px] rounded-sm' />
           </div>
 
           {/* Credentials needed */}
-          <div className='mt-[12px]'>
-            <Skeleton className='h-[18px] w-[280px] rounded-[4px]' />
+          <div className='mt-3'>
+            <Skeleton className='h-[18px] w-[280px] rounded-sm' />
           </div>
 
           {/* Canvas preview */}
-          <div className='relative mt-[24px] h-[450px] w-full flex-shrink-0 overflow-hidden rounded-[8px] border border-[var(--border)]'>
+          <div className='relative mt-6 h-[450px] w-full flex-shrink-0 overflow-hidden rounded-lg border border-[var(--border)]'>
             <Skeleton className='h-full w-full rounded-none' />
           </div>
 
           {/* About this Workflow */}
           <div className='mt-8'>
-            <Skeleton className='mb-4 h-[24px] w-[180px] rounded-[4px]' />
+            <Skeleton className='mb-4 h-[24px] w-[180px] rounded-sm' />
             <div className='space-y-2'>
-              <Skeleton className='h-[18px] w-full rounded-[4px]' />
-              <Skeleton className='h-[18px] w-[90%] rounded-[4px]' />
-              <Skeleton className='h-[18px] w-[75%] rounded-[4px]' />
+              <Skeleton className='h-[18px] w-full rounded-sm' />
+              <Skeleton className='h-[18px] w-[90%] rounded-sm' />
+              <Skeleton className='h-[18px] w-[75%] rounded-sm' />
             </div>
           </div>
         </div>
@@ -624,7 +624,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
       <div className={cn('flex flex-1', isWorkspaceContext && 'overflow-hidden')}>
         <div
           className={cn(
-            'flex flex-1 flex-col px-[24px] pt-[24px] pb-[24px]',
+            'flex flex-1 flex-col px-6 pt-6 pb-6',
             isWorkspaceContext ? 'overflow-auto bg-white dark:bg-[var(--bg)]' : 'overflow-visible'
           )}
         >
@@ -632,11 +632,11 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
           <Breadcrumb items={breadcrumbItems} />
 
           {/* Template name and action buttons */}
-          <div className='mt-[14px] flex items-center justify-between'>
-            <h1 className='font-medium text-[18px] text-[var(--text-primary)]'>{template.name}</h1>
+          <div className='mt-3.5 flex items-center justify-between'>
+            <h1 className='font-medium text-[var(--text-primary)] text-lg'>{template.name}</h1>
 
             {/* Action buttons */}
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               {/* Approve/Reject buttons for super users */}
               {isSuperUser && template.status === 'pending' && (
                 <>
@@ -644,7 +644,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     variant='active'
                     onClick={handleApprove}
                     disabled={isApproving}
-                    className='h-[32px] rounded-[6px]'
+                    className='h-[32px] rounded-md'
                   >
                     {isApproving ? 'Approving...' : 'Approve'}
                   </Button>
@@ -652,7 +652,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     variant='active'
                     onClick={handleReject}
                     disabled={isRejecting}
-                    className='h-[32px] rounded-[6px]'
+                    className='h-[32px] rounded-md'
                   >
                     {isRejecting ? 'Rejecting...' : 'Reject'}
                   </Button>
@@ -667,7 +667,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       variant='active'
                       onClick={handleEditTemplate}
                       disabled={isEditing || (!isWorkspaceContext && hasWorkspaceAccess === false)}
-                      className='h-[32px] rounded-[6px]'
+                      className='h-[32px] rounded-md'
                     >
                       {isEditing ? 'Opening...' : 'Edit'}
                     </Button>
@@ -681,7 +681,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                           variant='active'
                           onClick={() => setShowWorkspaceSelectorForEdit(true)}
                           disabled={isUsing || isLoadingWorkspaces}
-                          className='h-[32px] rounded-[6px]'
+                          className='h-[32px] rounded-md'
                         >
                           {isUsing ? 'Importing...' : isLoadingWorkspaces ? 'Loading...' : 'Edit'}
                           <ChevronDown className='ml-2 h-4 w-4' />
@@ -700,7 +700,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             >
                               <div className='flex flex-col'>
                                 <span>{workspace.name}</span>
-                                <span className='text-[11px] text-[var(--text-tertiary)] capitalize'>
+                                <span className='text-[var(--text-tertiary)] text-xs capitalize'>
                                   {workspace.permissions} access
                                 </span>
                               </div>
@@ -728,7 +728,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                             : encodeURIComponent(`/templates/${template.id}`)
                         router.push(`/login?callbackUrl=${callbackUrl}`)
                       }}
-                      className='h-[32px] rounded-[6px]'
+                      className='h-[32px] rounded-md'
                     >
                       Sign in to use
                     </Button>
@@ -737,7 +737,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       variant='primary'
                       onClick={handleUseTemplate}
                       disabled={isUsing}
-                      className='!text-[#FFFFFF] h-[32px] rounded-[6px] px-[12px] text-[14px]'
+                      className='!text-[var(--white)] h-[32px] rounded-md px-3 text-sm'
                     >
                       {isUsing ? 'Creating...' : 'Use template'}
                     </Button>
@@ -748,7 +748,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
               {/* Share button */}
               <Popover open={sharePopoverOpen} onOpenChange={setSharePopoverOpen}>
                 <PopoverTrigger asChild>
-                  <Button variant='active' className='h-[32px] rounded-[6px] px-[12px]'>
+                  <Button variant='active' className='h-[32px] rounded-md px-3'>
                     <Share2 className='h-[14px] w-[14px]' />
                   </Button>
                 </PopoverTrigger>
@@ -779,13 +779,13 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
 
           {/* Template tagline */}
           {template.details?.tagline && (
-            <p className='mt-[4px] line-clamp-2 max-w-[40vw] font-medium text-[14px] text-[var(--text-tertiary)]'>
+            <p className='mt-1 line-clamp-2 max-w-[40vw] font-medium text-[var(--text-tertiary)] text-sm'>
               {template.details.tagline}
             </p>
           )}
 
           {/* Creator and stats row */}
-          <div className='mt-[16px] flex items-center gap-[8px]'>
+          <div className='mt-4 flex items-center gap-2'>
             {/* Star icon and count */}
             <Star
               onClick={handleStarToggle}
@@ -795,18 +795,16 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                 starTemplate.isPending && 'opacity-50'
               )}
             />
-            <span className='font-medium text-[14px] text-[var(--text-muted)]'>
+            <span className='font-medium text-[var(--text-muted)] text-sm'>
               {template.stars || 0}
             </span>
 
             {/* Users icon and count */}
             <ChartNoAxesColumn className='h-[16px] w-[16px] text-[var(--text-muted)]' />
-            <span className='font-medium text-[14px] text-[var(--text-muted)]'>
-              {template.views}
-            </span>
+            <span className='font-medium text-[var(--text-muted)] text-sm'>{template.views}</span>
 
             {/* Vertical divider */}
-            <div className='mx-[4px] mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
+            <div className='mx-1 mb-[-1.5px] h-[18px] w-[1.25px] rounded-full bg-[var(--border)]' />
 
             {/* Creator profile pic */}
             {template.creator?.profileImageUrl ? (
@@ -823,8 +821,8 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
               </div>
             )}
             {/* Creator name */}
-            <div className='flex items-center gap-[4px]'>
-              <span className='font-medium text-[14px] text-[var(--text-muted)]'>
+            <div className='flex items-center gap-1'>
+              <span className='font-medium text-[var(--text-muted)] text-sm'>
                 {template.creator?.name || 'Unknown'}
               </span>
               {template.creator?.verified && <VerifiedBadge size='md' />}
@@ -834,7 +832,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
           {/* Credentials needed */}
           {Array.isArray(template.requiredCredentials) &&
             template.requiredCredentials.length > 0 && (
-              <p className='mt-[12px] font-medium text-[12px] text-[var(--text-muted)]'>
+              <p className='mt-3 font-medium text-[var(--text-muted)] text-caption'>
                 Credentials needed:{' '}
                 {template.requiredCredentials
                   .map((cred: CredentialRequirement) => {
@@ -852,15 +850,15 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
 
           {/* Canvas preview */}
           <div
-            className='relative mt-[24px] h-[450px] w-full flex-shrink-0 overflow-hidden rounded-[8px] border border-[var(--border)]'
+            className='relative mt-6 h-[450px] w-full flex-shrink-0 overflow-hidden rounded-lg border border-[var(--border)]'
             onWheelCapture={handleCanvasWheelCapture}
           >
             {renderWorkflowPreview()}
 
             {/* Last updated overlay */}
             {template.updatedAt && (
-              <div className='pointer-events-none absolute right-[12px] bottom-[12px] rounded-[4px] bg-[var(--bg)]/80 px-[8px] py-[4px] backdrop-blur-sm'>
-                <span className='font-medium text-[12px] text-[var(--text-muted)]'>
+              <div className='pointer-events-none absolute right-[12px] bottom-3 rounded-sm bg-[var(--bg)]/80 px-2 py-1 backdrop-blur-sm'>
+                <span className='font-medium text-[var(--text-muted)] text-caption'>
                   Last updated{' '}
                   {formatDistanceToNow(new Date(template.updatedAt), {
                     addSuffix: true,
@@ -917,7 +915,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                     li: ({ children }) => <li className='leading-[1.4rem]'>{children}</li>,
                     code: ({ inline, children }: any) =>
                       inline ? (
-                        <code className='rounded bg-muted px-1.5 py-0.5 font-mono text-[#F59E0B] text-xs'>
+                        <code className='rounded bg-muted px-1.5 py-0.5 font-mono text-[var(--amber)] text-xs'>
                           {children}
                         </code>
                       ) : (
@@ -966,7 +964,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       variant={template.creator.verified ? 'active' : 'default'}
                       onClick={handleToggleVerification}
                       disabled={isVerifying}
-                      className='h-[28px] rounded-[6px] text-[12px]'
+                      className='h-[28px] rounded-md text-caption'
                     >
                       {isVerifying
                         ? 'Updating...'
@@ -995,7 +993,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                   {/* Creator details */}
                   <div className='flex-1'>
                     <div className='mb-[5px] flex items-center gap-3'>
-                      <div className='flex items-center gap-[6px]'>
+                      <div className='flex items-center gap-1.5'>
                         <h4 className='font-sans font-semibold text-base text-foreground'>
                           {template.creator.name}
                         </h4>
@@ -1003,7 +1001,7 @@ export default function TemplateDetails({ isWorkspaceContext = false }: Template
                       </div>
 
                       {/* Social links */}
-                      <div className='flex items-center gap-[12px]'>
+                      <div className='flex items-center gap-3'>
                         {template.creator.details?.websiteUrl && (
                           <a
                             href={template.creator.details.websiteUrl}
diff --git a/apps/sim/app/templates/components/template-card.tsx b/apps/sim/app/templates/components/template-card.tsx
index 79445802be9..5dcbf0999d4 100644
--- a/apps/sim/app/templates/components/template-card.tsx
+++ b/apps/sim/app/templates/components/template-card.tsx
@@ -28,26 +28,26 @@ interface TemplateCardProps {
 
 export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
-    <div className={cn('h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px]', className)}>
-      <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-5)]' />
-      <div className='mt-[14px] flex items-center justify-between'>
+    <div className={cn('h-[268px] w-full rounded-lg bg-[var(--surface-3)] p-2', className)}>
+      <div className='h-[180px] w-full animate-pulse rounded-md bg-[var(--surface-5)]' />
+      <div className='mt-3.5 flex items-center justify-between'>
         <div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-5)]' />
         <div className='flex items-center gap-[-4px]'>
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-5)]'
+              className='h-[18px] w-[18px] animate-pulse rounded-sm bg-[var(--surface-5)]'
             />
           ))}
         </div>
       </div>
 
-      <div className='mt-[14px] flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='mt-3.5 flex items-center justify-between'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-5)]' />
           <div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-5)]' />
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
           <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-5)]' />
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-5)]' />
@@ -195,11 +195,11 @@ function TemplateCardInner({
   return (
     <div
       onClick={handleCardClick}
-      className={cn('w-full cursor-pointer rounded-[8px] bg-[var(--surface-3)] p-[8px]', className)}
+      className={cn('w-full cursor-pointer rounded-lg bg-[var(--surface-3)] p-2', className)}
     >
       <div
         ref={previewRef}
-        className='pointer-events-none h-[180px] w-full cursor-pointer overflow-hidden rounded-[6px]'
+        className='pointer-events-none h-[180px] w-full cursor-pointer overflow-hidden rounded-md'
       >
         {normalizedState && isInView ? (
           <PreviewWorkflow
@@ -216,8 +216,8 @@ function TemplateCardInner({
         )}
       </div>
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-[var(--text-primary)]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <h3 className='truncate pr-2 pl-0.5 font-medium text-[var(--text-primary)] text-md'>
           {title}
         </h3>
 
@@ -231,7 +231,7 @@ function TemplateCardInner({
                 return (
                   <div
                     key={index}
-                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                     style={{
                       background: blockConfig.bgColor || 'gray',
                       marginLeft: index > 0 ? '-4px' : '0',
@@ -242,10 +242,10 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-7)]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--surface-7)]'
                 style={{ marginLeft: '-4px' }}
               >
-                <span className='font-medium text-[10px] text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-primary)] text-micro'>
                   +{blockTypes.length - 3}
                 </span>
               </div>
@@ -258,7 +258,7 @@ function TemplateCardInner({
               return (
                 <div
                   key={index}
-                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                   style={{
                     background: blockConfig.bgColor || 'gray',
                     marginLeft: index > 0 ? '-4px' : '0',
@@ -273,13 +273,13 @@ function TemplateCardInner({
       </div>
 
       {description && (
-        <p className='mt-[4px] truncate pl-[2px] text-[12px] text-[var(--text-tertiary)]'>
+        <p className='mt-1 truncate pl-0.5 text-[var(--text-tertiary)] text-caption'>
           {description}
         </p>
       )}
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex min-w-0 items-center gap-[8px]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <div className='flex min-w-0 items-center gap-2'>
           {authorImageUrl ? (
             <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
@@ -289,15 +289,15 @@ function TemplateCardInner({
               <User className='h-[12px] w-[12px] text-[var(--text-muted)]' />
             </div>
           )}
-          <div className='flex min-w-0 items-center gap-[4px]'>
-            <span className='truncate font-medium text-[12px] text-[var(--text-muted)]'>
+          <div className='flex min-w-0 items-center gap-1'>
+            <span className='truncate font-medium text-[var(--text-muted)] text-caption'>
               {author}
             </span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[12px] text-[var(--text-muted)]'>
+        <div className='flex flex-shrink-0 items-center gap-1.5 font-medium text-[var(--text-muted)] text-caption'>
           <User className='h-[12px] w-[12px]' />
           <span>{usageCount}</span>
           <Star
diff --git a/apps/sim/app/templates/templates.tsx b/apps/sim/app/templates/templates.tsx
index 08fe5595552..0bc56f9c744 100644
--- a/apps/sim/app/templates/templates.tsx
+++ b/apps/sim/app/templates/templates.tsx
@@ -135,21 +135,21 @@ export default function Templates({
   return (
     <div className='flex h-[100vh] flex-col'>
       <div className='flex flex-1 overflow-hidden'>
-        <div className='flex flex-1 flex-col overflow-auto px-[24px] pt-[28px] pb-[24px]'>
+        <div className='flex flex-1 flex-col overflow-auto px-6 pt-7 pb-6'>
           <div>
-            <div className='flex items-start gap-[12px]'>
-              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#1E3A5A] bg-[#0F2A3D]'>
+            <div className='flex items-start gap-3'>
+              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-md border border-[#1E3A5A] bg-[#0F2A3D]'>
                 <Layout className='h-[14px] w-[14px] text-[#60A5FA]' />
               </div>
-              <h1 className='font-medium text-[18px]'>Templates</h1>
+              <h1 className='font-medium text-lg'>Templates</h1>
             </div>
-            <p className='mt-[10px] text-[14px] text-[var(--text-tertiary)]'>
+            <p className='mt-2.5 text-[var(--text-tertiary)] text-sm'>
               Grab a template and start building, or make one from scratch.
             </p>
           </div>
 
-          <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
+          <div className='mt-3.5 flex items-center justify-between'>
+            <div className='flex h-[32px] w-[400px] items-center gap-1.5 rounded-lg bg-[var(--surface-4)] px-2'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search'
@@ -158,10 +158,10 @@ export default function Templates({
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button
                 variant={activeTab === 'gallery' ? 'active' : 'default'}
-                className='h-[32px] rounded-[6px]'
+                className='h-[32px] rounded-md'
                 onClick={() => setActiveTab('gallery')}
               >
                 Gallery
@@ -169,7 +169,7 @@ export default function Templates({
               {isSuperUser && (
                 <Button
                   variant={activeTab === 'pending' ? 'active' : 'default'}
-                  className='h-[32px] rounded-[6px]'
+                  className='h-[32px] rounded-md'
                   onClick={() => setActiveTab('pending')}
                 >
                   Pending
@@ -178,7 +178,7 @@ export default function Templates({
             </div>
           </div>
 
-          <div className='mt-[24px] grid grid-cols-1 gap-x-[20px] gap-y-[40px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+          <div className='mt-6 grid grid-cols-1 gap-x-5 gap-y-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
             {loading ? (
               Array.from({ length: 8 }).map((_, index) => (
                 <TemplateCardSkeleton key={`skeleton-${index}`} />
diff --git a/apps/sim/app/unsubscribe/unsubscribe.tsx b/apps/sim/app/unsubscribe/unsubscribe.tsx
index b402a06fefe..4dd853499bf 100644
--- a/apps/sim/app/unsubscribe/unsubscribe.tsx
+++ b/apps/sim/app/unsubscribe/unsubscribe.tsx
@@ -119,13 +119,15 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>Loading</h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
+            Loading
+          </h1>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
             Validating your unsubscribe link...
           </p>
         </div>
         <div className={'mt-8 flex w-full items-center justify-center py-8'}>
-          <Loader2 className='h-8 w-8 animate-spin text-[#999]' />
+          <Loader2 className='h-8 w-8 animate-spin text-[var(--text-subtle)]' />
         </div>
       </InviteLayout>
     )
@@ -135,10 +137,10 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
             Invalid Unsubscribe Link
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>{error}</p>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>{error}</p>
         </div>
 
         <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
@@ -152,10 +154,10 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
             Important Account Emails
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
             Transactional emails like password resets, account confirmations, and security alerts
             cannot be unsubscribed from as they contain essential information for your account.
           </p>
@@ -172,10 +174,10 @@ function UnsubscribeContent() {
     return (
       <InviteLayout>
         <div className='space-y-1 text-center'>
-          <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+          <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
             Successfully Unsubscribed
           </h1>
-          <p className={'font-[380] text-[#999] text-[16px]'}>
+          <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
             You have been unsubscribed from our emails. You will stop receiving emails within 48
             hours.
           </p>
@@ -193,13 +195,13 @@ function UnsubscribeContent() {
   return (
     <InviteLayout>
       <div className='space-y-1 text-center'>
-        <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>
+        <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
           Email Preferences
         </h1>
-        <p className={'font-[380] text-[#999] text-[16px]'}>
+        <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
           Choose which emails you'd like to stop receiving.
         </p>
-        <p className={'mt-2 font-[380] text-[#999] text-[14px]'}>{data?.email}</p>
+        <p className={'mt-2 font-[380] text-[var(--text-subtle)] text-sm'}>{data?.email}</p>
       </div>
 
       <div className={'mt-8 w-full max-w-[410px] space-y-3'}>
@@ -215,7 +217,9 @@ function UnsubscribeContent() {
         </BrandedButton>
 
         <div className='py-2 text-center'>
-          <span className={'font-[380] text-[#999] text-[14px]'}>or choose specific types</span>
+          <span className={'font-[380] text-[var(--text-subtle)] text-sm'}>
+            or choose specific types
+          </span>
         </div>
 
         <BrandedButton
@@ -259,7 +263,7 @@ function UnsubscribeContent() {
       </div>
 
       <div className={'mt-6 max-w-[410px] text-center'}>
-        <p className='font-[380] text-[#999] text-[13px]'>
+        <p className='font-[380] text-[var(--text-subtle)] text-small'>
           You'll continue receiving important account emails like password resets and security
           alerts.
         </p>
@@ -274,13 +278,15 @@ export default function Unsubscribe() {
       fallback={
         <InviteLayout>
           <div className='space-y-1 text-center'>
-            <h1 className={'font-medium text-[#ECECEC] text-[32px] tracking-tight'}>Loading</h1>
-            <p className={'font-[380] text-[#999] text-[16px]'}>
+            <h1 className={'font-medium text-[32px] text-[var(--landing-text)] tracking-tight'}>
+              Loading
+            </h1>
+            <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
               Validating your unsubscribe link...
             </p>
           </div>
           <div className={'mt-8 flex w-full items-center justify-center py-8'}>
-            <Loader2 className='h-8 w-8 animate-spin text-[#999]' />
+            <Loader2 className='h-8 w-8 animate-spin text-[var(--text-subtle)]' />
           </div>
         </InviteLayout>
       }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
index 524a7f88601..b55513cd7bf 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/error/error.tsx
@@ -37,12 +37,12 @@ export function ErrorState({
 
   return (
     <div className='flex h-full flex-1 items-center justify-center'>
-      <div className='flex flex-col items-center gap-[16px] text-center'>
-        <div className='flex flex-col gap-[8px]'>
-          <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>{title}</h2>
-          <p className='max-w-[300px] text-[13px] text-[var(--text-tertiary)]'>{description}</p>
+      <div className='flex flex-col items-center gap-4 text-center'>
+        <div className='flex flex-col gap-2'>
+          <h2 className='font-semibold text-[var(--text-primary)] text-md'>{title}</h2>
+          <p className='max-w-[300px] text-[var(--text-tertiary)] text-small'>{description}</p>
         </div>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           {secondaryAction && (
             <Button
               variant={secondaryAction.variant ?? 'ghost'}
@@ -54,7 +54,7 @@ export function ErrorState({
             </Button>
           )}
           <Button variant='default' size='sm' onClick={reset}>
-            <RefreshCw className='mr-[6px] h-[14px] w-[14px]' />
+            <RefreshCw className='mr-1.5 h-[14px] w-[14px]' />
             Try again
           </Button>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
index c4311844752..99cae0891b2 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/inline-rename-input.tsx
@@ -32,7 +32,7 @@ export function InlineRenameInput({ value, onChange, onSubmit, onCancel }: Inlin
       }}
       onBlur={onSubmit}
       onClick={(e) => e.stopPropagation()}
-      className='min-w-0 flex-1 truncate border-0 bg-transparent p-0 font-medium text-[14px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0'
+      className='min-w-0 flex-1 truncate border-0 bg-transparent p-0 font-medium text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0'
     />
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index 9d86664c812..cda3f8c9ccb 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -49,7 +49,7 @@ export function MessageActions({ content, requestId }: MessageActionsProps) {
         <button
           type='button'
           aria-label='More options'
-          className='flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-icon)] opacity-0 transition-colors transition-opacity hover:bg-[var(--surface-3)] hover:text-[var(--text-primary)] focus-visible:opacity-100 focus-visible:outline-none group-hover/msg:opacity-100 data-[state=open]:opacity-100'
+          className='flex h-5 w-5 items-center justify-center rounded-sm text-[var(--text-icon)] opacity-0 transition-colors transition-opacity hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-primary)] focus-visible:opacity-100 focus-visible:outline-none group-hover/msg:opacity-100 data-[state=open]:opacity-100'
           onClick={(event) => event.stopPropagation()}
         >
           <Ellipsis className='h-3 w-3' strokeWidth={2} />
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
index 7c94ac098c1..4a63ce8ed00 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-header/resource-header.tsx
@@ -67,17 +67,15 @@ export const ResourceHeader = memo(function ResourceHeader({
     <div
       className={cn(
         'border-[var(--border)] border-b',
-        hasBreadcrumbs ? 'px-[16px] py-[8.5px]' : 'px-[24px] py-[10px]'
+        hasBreadcrumbs ? 'px-4 py-[8.5px]' : 'px-6 py-2.5'
       )}
     >
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-[12px]'>
+        <div className='flex items-center gap-3'>
           {hasBreadcrumbs ? (
             breadcrumbs.map((crumb, i) => (
               <Fragment key={i}>
-                {i > 0 && (
-                  <span className='select-none text-[14px] text-[var(--text-icon)]'>/</span>
-                )}
+                {i > 0 && <span className='select-none text-[var(--text-icon)] text-sm'>/</span>}
                 <BreadcrumbSegment
                   icon={i === 0 ? Icon : undefined}
                   label={crumb.label}
@@ -90,13 +88,11 @@ export const ResourceHeader = memo(function ResourceHeader({
           ) : (
             <>
               {Icon && <Icon className='h-[14px] w-[14px] text-[var(--text-icon)]' />}
-              {title && (
-                <h1 className='font-medium text-[14px] text-[var(--text-body)]'>{title}</h1>
-              )}
+              {title && <h1 className='font-medium text-[var(--text-body)] text-sm'>{title}</h1>}
             </>
           )}
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           {actions?.map((action) => {
             const ActionIcon = action.icon
             return (
@@ -105,13 +101,13 @@ export const ResourceHeader = memo(function ResourceHeader({
                 onClick={action.onClick}
                 disabled={action.disabled}
                 variant='subtle'
-                className='px-[8px] py-[4px] text-[12px]'
+                className='px-2 py-1 text-caption'
               >
                 {ActionIcon && (
                   <ActionIcon
                     className={cn(
                       'h-[14px] w-[14px] text-[var(--text-icon)]',
-                      action.label && 'mr-[6px]'
+                      action.label && 'mr-1.5'
                     )}
                   />
                 )}
@@ -124,9 +120,9 @@ export const ResourceHeader = memo(function ResourceHeader({
               onClick={create.onClick}
               disabled={create.disabled}
               variant='subtle'
-              className='px-[8px] py-[4px] text-[12px]'
+              className='px-2 py-1 text-caption'
             >
-              <Plus className='mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+              <Plus className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
               {create.label}
             </Button>
           )}
@@ -151,8 +147,8 @@ function BreadcrumbSegment({
 }) {
   if (editing?.isEditing) {
     return (
-      <span className='inline-flex items-center px-[8px] py-[4px]'>
-        {Icon && <Icon className='mr-[12px] h-[14px] w-[14px] text-[var(--text-icon)]' />}
+      <span className='inline-flex items-center px-2 py-1'>
+        {Icon && <Icon className='mr-3 h-[14px] w-[14px] text-[var(--text-icon)]' />}
         <InlineRenameInput
           value={editing.value}
           onChange={editing.onChange}
@@ -165,7 +161,7 @@ function BreadcrumbSegment({
 
   const content = (
     <>
-      {Icon && <Icon className='mr-[12px] h-[14px] w-[14px] text-[var(--text-icon)]' />}
+      {Icon && <Icon className='mr-3 h-[14px] w-[14px] text-[var(--text-icon)]' />}
       {label}
     </>
   )
@@ -174,9 +170,9 @@ function BreadcrumbSegment({
     return (
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <Button variant='subtle' className='px-[8px] py-[4px] font-medium text-[14px]'>
+          <Button variant='subtle' className='px-2 py-1 font-medium text-sm'>
             {content}
-            <ChevronDown className='ml-[8px] h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+            <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
@@ -196,18 +192,14 @@ function BreadcrumbSegment({
 
   if (onClick) {
     return (
-      <Button
-        variant='subtle'
-        className='px-[8px] py-[4px] font-medium text-[14px]'
-        onClick={onClick}
-      >
+      <Button variant='subtle' className='px-2 py-1 font-medium text-sm' onClick={onClick}>
         {content}
       </Button>
     )
   }
 
   return (
-    <span className='inline-flex items-center px-[8px] py-[4px] font-medium text-[14px] text-[var(--text-body)]'>
+    <span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
       {content}
     </span>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
index b64349112cd..5749e243e41 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options-bar/resource-options-bar.tsx
@@ -77,30 +77,25 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
   if (!hasContent) return null
 
   return (
-    <div
-      className={cn(
-        'border-[var(--border)] border-b py-[10px]',
-        search ? 'px-[24px]' : 'px-[16px]'
-      )}
-    >
+    <div className={cn('border-[var(--border)] border-b py-2.5', search ? 'px-6' : 'px-4')}>
       <div className='flex items-center justify-between'>
         {search && (
           <div className='relative flex flex-1 items-center'>
             <Search className='pointer-events-none h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-            <div className='flex flex-1 items-center gap-[6px] overflow-x-auto pl-[10px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+            <div className='flex flex-1 items-center gap-1.5 overflow-x-auto pl-2.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
               {search.tags?.map((tag, i) => (
                 <Button
                   key={`${tag.label}-${tag.value}-${i}`}
                   variant='subtle'
                   className={cn(
-                    'shrink-0 px-[8px] py-[4px] text-[12px]',
+                    'shrink-0 px-2 py-1 text-caption',
                     search.highlightedTagIndex === i &&
                       'ring-1 ring-[var(--border-focus)] ring-offset-1'
                   )}
                   onClick={tag.onRemove}
                 >
                   {tag.label}: {tag.value}
-                  <span className='ml-[4px] text-[10px] text-[var(--text-icon)]'>✕</span>
+                  <span className='ml-1 text-[var(--text-icon)] text-micro'>✕</span>
                 </Button>
               ))}
               <input
@@ -112,46 +107,46 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
                 onFocus={search.onFocus}
                 onBlur={search.onBlur}
                 placeholder={search.tags?.length ? '' : (search.placeholder ?? 'Search...')}
-                className='min-w-[80px] flex-1 bg-transparent py-[4px] text-[12px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-subtle)]'
+                className='min-w-[80px] flex-1 bg-transparent py-1 text-[var(--text-secondary)] text-caption outline-none placeholder:text-[var(--text-subtle)]'
               />
             </div>
             {search.tags?.length || search.value ? (
               <button
                 type='button'
-                className='mr-[2px] flex h-[14px] w-[14px] shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover:text-[var(--text-secondary)]'
+                className='mr-0.5 flex h-[14px] w-[14px] shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover-hover:text-[var(--text-secondary)]'
                 onClick={search.onClearAll}
               >
-                <span className='text-[12px]'>✕</span>
+                <span className='text-caption'>✕</span>
               </button>
             ) : null}
             {search.dropdown && (
               <div
                 ref={search.dropdownRef}
-                className='absolute top-full left-0 z-50 mt-[6px] w-full rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+                className='absolute top-full left-0 z-50 mt-1.5 w-full rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
               >
                 {search.dropdown}
               </div>
             )}
           </div>
         )}
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           {extras}
           {filterTags?.map((tag) => (
             <Button
               key={tag.label}
               variant='subtle'
-              className='px-[8px] py-[4px] text-[12px]'
+              className='px-2 py-1 text-caption'
               onClick={tag.onRemove}
             >
               {tag.label}
-              <span className='ml-[4px] text-[10px] text-[var(--text-icon)]'>✕</span>
+              <span className='ml-1 text-[var(--text-icon)] text-micro'>✕</span>
             </Button>
           ))}
           {filter && (
             <PopoverPrimitive.Root>
               <PopoverPrimitive.Trigger asChild>
-                <Button variant='subtle' className='px-[8px] py-[4px] text-[12px]'>
-                  <ListFilter className='mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+                <Button variant='subtle' className='px-2 py-1 text-caption'>
+                  <ListFilter className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
                   Filter
                 </Button>
               </PopoverPrimitive.Trigger>
@@ -160,7 +155,7 @@ export const ResourceOptionsBar = memo(function ResourceOptionsBar({
                   align='start'
                   sideOffset={6}
                   className={cn(
-                    'z-50 rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+                    'z-50 rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
                   )}
                 >
                   {filter}
@@ -181,8 +176,8 @@ function SortDropdown({ config }: { config: SortConfig }) {
   return (
     <DropdownMenu>
       <DropdownMenuTrigger asChild>
-        <Button variant='subtle' className='px-[8px] py-[4px] text-[12px]'>
-          <ArrowUpDown className='mr-[6px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+        <Button variant='subtle' className='px-2 py-1 text-caption'>
+          <ArrowUpDown className='mr-1.5 h-[14px] w-[14px] text-[var(--text-icon)]' />
           Sort
         </Button>
       </DropdownMenuTrigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
index 63300948f9f..6882ac89a6d 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/resource/resource.tsx
@@ -242,7 +242,7 @@ export const ResourceTable = memo(function ResourceTable({
   if (rows.length === 0 && emptyMessage) {
     return (
       <div className='flex min-h-0 flex-1 items-center justify-center'>
-        <span className='text-[13px] text-[var(--text-secondary)]'>{emptyMessage}</span>
+        <span className='text-[var(--text-secondary)] text-small'>{emptyMessage}</span>
       </div>
     )
   }
@@ -250,12 +250,12 @@ export const ResourceTable = memo(function ResourceTable({
   return (
     <div className='relative flex min-h-0 flex-1 flex-col overflow-hidden'>
       <div ref={headerRef} className='overflow-hidden'>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
             <tr>
               {hasCheckbox && (
-                <th className='h-10 w-[52px] py-[6px] pr-0 pl-[20px] text-left align-middle'>
+                <th className='h-10 w-[52px] py-1.5 pr-0 pl-5 text-left align-middle'>
                   <Checkbox
                     size='sm'
                     checked={selectable.isAllSelected}
@@ -270,7 +270,7 @@ export const ResourceTable = memo(function ResourceTable({
                   return (
                     <th
                       key={col.id}
-                      className='h-10 px-[24px] py-[6px] text-left align-middle font-base text-[12px] text-[var(--text-muted)]'
+                      className='h-10 px-6 py-1.5 text-left align-middle font-base text-[var(--text-muted)] text-caption'
                     >
                       {col.header}
                     </th>
@@ -279,10 +279,10 @@ export const ResourceTable = memo(function ResourceTable({
                 const isActive = internalSort.column === col.id
                 const SortIcon = internalSort.direction === 'asc' ? ArrowUp : ArrowDown
                 return (
-                  <th key={col.id} className='h-10 px-[16px] py-[6px] text-left align-middle'>
+                  <th key={col.id} className='h-10 px-4 py-1.5 text-left align-middle'>
                     <Button
                       variant='subtle'
-                      className='px-[8px] py-[4px] font-base text-[var(--text-muted)] hover:text-[var(--text-muted)]'
+                      className='px-2 py-1 font-base text-[var(--text-muted)] hover-hover:text-[var(--text-muted)]'
                       onClick={() =>
                         handleSort(
                           col.id,
@@ -292,7 +292,7 @@ export const ResourceTable = memo(function ResourceTable({
                     >
                       {col.header}
                       {isActive && (
-                        <SortIcon className='ml-[4px] h-[12px] w-[12px] text-[var(--text-icon)]' />
+                        <SortIcon className='ml-1 h-[12px] w-[12px] text-[var(--text-icon)]' />
                       )}
                     </Button>
                   </th>
@@ -303,7 +303,7 @@ export const ResourceTable = memo(function ResourceTable({
         </table>
       </div>
       <div className='min-h-0 flex-1 overflow-auto' onScroll={handleBodyScroll}>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <tbody>
             {displayRows.map((row) => {
@@ -314,7 +314,7 @@ export const ResourceTable = memo(function ResourceTable({
                   data-resource-row
                   data-row-id={row.id}
                   className={cn(
-                    'transition-colors hover:bg-[var(--surface-3)]',
+                    'transition-colors hover-hover:bg-[var(--surface-3)]',
                     onRowClick && 'cursor-pointer',
                     (selectedRowId === row.id || isSelected) && 'bg-[var(--surface-3)]'
                   )}
@@ -323,7 +323,7 @@ export const ResourceTable = memo(function ResourceTable({
                   onContextMenu={(e) => onRowContextMenu?.(e, row.id)}
                 >
                   {hasCheckbox && (
-                    <td className='w-[52px] py-[10px] pr-0 pl-[20px] align-middle'>
+                    <td className='w-[52px] py-2.5 pr-0 pl-5 align-middle'>
                       <Checkbox
                         size='sm'
                         checked={isSelected}
@@ -339,7 +339,7 @@ export const ResourceTable = memo(function ResourceTable({
                   {columns.map((col, colIdx) => {
                     const cell = row.cells[col.id]
                     return (
-                      <td key={col.id} className='px-[24px] py-[10px] align-middle'>
+                      <td key={col.id} className='px-6 py-2.5 align-middle'>
                         <CellContent
                           cell={{ ...cell, label: cell?.label || EMPTY_CELL_PLACEHOLDER }}
                           primary={colIdx === 0}
@@ -356,12 +356,12 @@ export const ResourceTable = memo(function ResourceTable({
                   'transition-colors',
                   create.disabled
                     ? 'cursor-not-allowed'
-                    : 'cursor-pointer hover:bg-[var(--surface-3)]'
+                    : 'cursor-pointer hover-hover:bg-[var(--surface-3)]'
                 )}
                 onClick={create.disabled ? undefined : create.onClick}
               >
-                <td colSpan={totalColSpan} className='px-[24px] py-[10px] align-middle'>
-                  <span className='flex items-center gap-[12px] font-medium text-[14px] text-[var(--text-secondary)]'>
+                <td colSpan={totalColSpan} className='px-6 py-2.5 align-middle'>
+                  <span className='flex items-center gap-3 font-medium text-[var(--text-secondary)] text-sm'>
                     <Plus className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
                     {create.label}
                   </span>
@@ -371,7 +371,7 @@ export const ResourceTable = memo(function ResourceTable({
           </tbody>
         </table>
         {hasMore && (
-          <div ref={loadMoreRef} className='flex items-center justify-center py-[12px]'>
+          <div ref={loadMoreRef} className='flex items-center justify-center py-3'>
             {isLoadingMore && (
               <Loader className='h-[16px] w-[16px] text-[var(--text-secondary)]' animate />
             )}
@@ -400,7 +400,7 @@ function Pagination({
   onPageChange: (page: number) => void
 }) {
   return (
-    <div className='flex items-center justify-center border-[var(--border)] border-t bg-[var(--bg)] px-4 py-[10px]'>
+    <div className='flex items-center justify-center border-[var(--border)] border-t bg-[var(--bg)] px-4 py-2.5'>
       <div className='flex items-center gap-1'>
         <Button
           variant='ghost'
@@ -409,7 +409,7 @@ function Pagination({
         >
           <ChevronLeft className='h-3.5 w-3.5' />
         </Button>
-        <div className='mx-[12px] flex items-center gap-[16px]'>
+        <div className='mx-3 flex items-center gap-4'>
           {Array.from({ length: Math.min(totalPages, 5) }, (_, i) => {
             let page: number
             if (totalPages <= 5) {
@@ -428,7 +428,7 @@ function Pagination({
                 type='button'
                 onClick={() => onPageChange(page)}
                 className={cn(
-                  'font-medium text-sm transition-colors hover:text-[var(--text-body)]',
+                  'font-medium text-sm transition-colors hover-hover:text-[var(--text-body)]',
                   page === currentPage ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
                 )}
               >
@@ -454,7 +454,7 @@ function CellContent({ cell, primary }: { cell: ResourceCell; primary?: boolean
   return (
     <span
       className={cn(
-        'flex min-w-0 items-center gap-[12px] font-medium text-[14px]',
+        'flex min-w-0 items-center gap-3 font-medium text-sm',
         primary ? 'text-[var(--text-body)]' : 'text-[var(--text-secondary)]'
       )}
     >
@@ -500,19 +500,19 @@ function DataTableSkeleton({
   return (
     <>
       <div className='overflow-hidden'>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <thead className='shadow-[inset_0_-1px_0_var(--border)]'>
             <tr>
               {hasCheckbox && (
-                <th className='h-10 w-[52px] py-[10px] pr-0 pl-[20px] text-left align-middle'>
-                  <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                <th className='h-10 w-[52px] py-2.5 pr-0 pl-5 text-left align-middle'>
+                  <Skeleton className='h-[14px] w-[14px] rounded-xs' />
                 </th>
               )}
               {columns.map((col) => (
                 <th
                   key={col.id}
-                  className='h-10 px-[24px] py-[10px] text-left align-middle font-base text-[var(--text-muted)]'
+                  className='h-10 px-6 py-2.5 text-left align-middle font-base text-[var(--text-muted)]'
                 >
                   <div className='flex min-h-[20px] items-center'>
                     <Skeleton className='h-[12px] w-[56px]' />
@@ -524,20 +524,20 @@ function DataTableSkeleton({
         </table>
       </div>
       <div className='min-h-0 flex-1 overflow-auto'>
-        <table className='w-full table-fixed text-[13px]'>
+        <table className='w-full table-fixed text-small'>
           <ResourceColGroup columns={columns} hasCheckbox={hasCheckbox} />
           <tbody>
             {Array.from({ length: rowCount }, (_, i) => (
               <tr key={i}>
                 {hasCheckbox && (
-                  <td className='w-[52px] py-[10px] pr-0 pl-[20px] align-middle'>
-                    <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                  <td className='w-[52px] py-2.5 pr-0 pl-5 align-middle'>
+                    <Skeleton className='h-[14px] w-[14px] rounded-xs' />
                   </td>
                 )}
                 {columns.map((col, colIdx) => (
-                  <td key={col.id} className='px-[24px] py-[10px] align-middle'>
-                    <span className='flex min-h-[21px] items-center gap-[12px]'>
-                      {colIdx === 0 && <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />}
+                  <td key={col.id} className='px-6 py-2.5 align-middle'>
+                    <span className='flex min-h-[21px] items-center gap-3'>
+                      {colIdx === 0 && <Skeleton className='h-[14px] w-[14px] rounded-xs' />}
                       <Skeleton className='h-[14px] w-[128px]' />
                     </span>
                   </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
index 0e8f9b62a6b..b7ab7d08b07 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/file-viewer.tsx
@@ -251,7 +251,7 @@ function TextEditor({
 
   if (isLoading) {
     return (
-      <div className='flex flex-1 flex-col gap-[8px] p-[24px]'>
+      <div className='flex flex-1 flex-col gap-2 p-6'>
         <Skeleton className='h-[16px] w-[60%]' />
         <Skeleton className='h-[16px] w-[80%]' />
         <Skeleton className='h-[16px] w-[40%]' />
@@ -263,7 +263,7 @@ function TextEditor({
   if (error) {
     return (
       <div className='flex flex-1 items-center justify-center'>
-        <p className='text-[13px] text-[var(--text-muted)]'>Failed to load file content</p>
+        <p className='text-[var(--text-muted)] text-small'>Failed to load file content</p>
       </div>
     )
   }
@@ -282,7 +282,7 @@ function TextEditor({
           spellCheck={false}
           style={showPreviewPane ? { width: `${splitPct}%`, flexShrink: 0 } : undefined}
           className={cn(
-            'h-full resize-none border-0 bg-transparent p-[24px] font-mono text-[14px] text-[var(--text-body)] outline-none placeholder:text-[var(--text-subtle)]',
+            'h-full resize-none border-0 bg-transparent p-6 font-mono text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-subtle)]',
             !showPreviewPane && 'w-full',
             isResizing && 'pointer-events-none'
           )}
@@ -337,11 +337,11 @@ function UnsupportedPreview({ file }: { file: WorkspaceFileRecord }) {
   const ext = getFileExtension(file.name)
 
   return (
-    <div className='flex flex-1 flex-col items-center justify-center gap-[8px]'>
-      <p className='font-medium text-[14px] text-[var(--text-body)]'>
+    <div className='flex flex-1 flex-col items-center justify-center gap-2'>
+      <p className='font-medium text-[var(--text-body)] text-sm'>
         Preview not available{ext ? ` for .${ext} files` : ' for this file'}
       </p>
-      <p className='text-[13px] text-[var(--text-muted)]'>
+      <p className='text-[var(--text-muted)] text-small'>
         Use the download button to view this file
       </p>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
index 771a342462b..831cec77c8c 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/preview-panel.tsx
@@ -51,12 +51,12 @@ export function PreviewPanel({ content, mimeType, filename }: PreviewPanelProps)
 
 const MarkdownPreview = memo(function MarkdownPreview({ content }: { content: string }) {
   return (
-    <div className='h-full overflow-auto p-[24px]'>
+    <div className='h-full overflow-auto p-6'>
       <ReactMarkdown
         remarkPlugins={[remarkGfm, remarkBreaks]}
         components={{
           p: ({ children }: any) => (
-            <p className='mb-3 break-words text-[14px] text-[var(--text-primary)] leading-[1.6] last:mb-0'>
+            <p className='mb-3 break-words text-[var(--text-primary)] text-sm leading-[1.6] last:mb-0'>
               {children}
             </p>
           ),
@@ -71,22 +71,22 @@ const MarkdownPreview = memo(function MarkdownPreview({ content }: { content: st
             </h2>
           ),
           h3: ({ children }: any) => (
-            <h3 className='mt-4 mb-2 break-words font-semibold text-[16px] text-[var(--text-primary)] first:mt-0'>
+            <h3 className='mt-4 mb-2 break-words font-semibold text-[var(--text-primary)] text-md first:mt-0'>
               {children}
             </h3>
           ),
           h4: ({ children }: any) => (
-            <h4 className='mt-3 mb-2 break-words font-semibold text-[14px] text-[var(--text-primary)] first:mt-0'>
+            <h4 className='mt-3 mb-2 break-words font-semibold text-[var(--text-primary)] text-sm first:mt-0'>
               {children}
             </h4>
           ),
           ul: ({ children }: any) => (
-            <ul className='mt-1 mb-3 list-disc space-y-1 break-words pl-6 text-[14px] text-[var(--text-primary)]'>
+            <ul className='mt-1 mb-3 list-disc space-y-1 break-words pl-6 text-[var(--text-primary)] text-sm'>
               {children}
             </ul>
           ),
           ol: ({ children }: any) => (
-            <ol className='mt-1 mb-3 list-decimal space-y-1 break-words pl-6 text-[14px] text-[var(--text-primary)]'>
+            <ol className='mt-1 mb-3 list-decimal space-y-1 break-words pl-6 text-[var(--text-primary)] text-sm'>
               {children}
             </ol>
           ),
@@ -98,7 +98,7 @@ const MarkdownPreview = memo(function MarkdownPreview({ content }: { content: st
               return (
                 <code
                   {...props}
-                  className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[#F59E0B] text-[13px]'
+                  className='whitespace-normal rounded bg-[var(--surface-5)] px-1.5 py-0.5 font-mono text-[var(--amber)] text-small'
                 >
                   {children}
                 </code>
@@ -108,7 +108,7 @@ const MarkdownPreview = memo(function MarkdownPreview({ content }: { content: st
             return (
               <code
                 {...props}
-                className='my-3 block whitespace-pre-wrap break-words rounded-md bg-[var(--surface-5)] p-4 font-mono text-[13px] text-[var(--text-primary)]'
+                className='my-3 block whitespace-pre-wrap break-words rounded-md bg-[var(--surface-5)] p-4 font-mono text-[var(--text-primary)] text-small'
               >
                 {children}
               </code>
@@ -120,7 +120,7 @@ const MarkdownPreview = memo(function MarkdownPreview({ content }: { content: st
               href={href}
               target='_blank'
               rel='noopener noreferrer'
-              className='break-all text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+              className='break-all text-[var(--brand-secondary)] underline-offset-2 hover-hover:underline'
             >
               {children}
             </a>
@@ -144,7 +144,7 @@ const MarkdownPreview = memo(function MarkdownPreview({ content }: { content: st
           ),
           table: ({ children }: any) => (
             <div className='my-4 max-w-full overflow-x-auto rounded-md border border-[var(--border)]'>
-              <table className='w-full border-collapse text-[13px]'>{children}</table>
+              <table className='w-full border-collapse text-small'>{children}</table>
             </div>
           ),
           thead: ({ children }: any) => <thead className='bg-[var(--surface-2)]'>{children}</thead>,
@@ -153,7 +153,7 @@ const MarkdownPreview = memo(function MarkdownPreview({ content }: { content: st
             <tr className='border-[var(--border)] border-b last:border-b-0'>{children}</tr>
           ),
           th: ({ children }: any) => (
-            <th className='px-3 py-2 text-left font-semibold text-[12px] text-[var(--text-primary)]'>
+            <th className='px-3 py-2 text-left font-semibold text-[var(--text-primary)] text-caption'>
               {children}
             </th>
           ),
@@ -205,22 +205,22 @@ function CsvPreview({ content }: { content: string }) {
 
   if (headers.length === 0) {
     return (
-      <div className='flex h-full items-center justify-center p-[24px]'>
-        <p className='text-[13px] text-[var(--text-muted)]'>No data to display</p>
+      <div className='flex h-full items-center justify-center p-6'>
+        <p className='text-[var(--text-muted)] text-small'>No data to display</p>
       </div>
     )
   }
 
   return (
-    <div className='h-full overflow-auto p-[24px]'>
+    <div className='h-full overflow-auto p-6'>
       <div className='overflow-x-auto rounded-md border border-[var(--border)]'>
-        <table className='w-full border-collapse text-[13px]'>
+        <table className='w-full border-collapse text-small'>
           <thead className='bg-[var(--surface-2)]'>
             <tr>
               {headers.map((header, i) => (
                 <th
                   key={i}
-                  className='whitespace-nowrap px-3 py-2 text-left font-semibold text-[12px] text-[var(--text-primary)]'
+                  className='whitespace-nowrap px-3 py-2 text-left font-semibold text-[var(--text-primary)] text-caption'
                 >
                   {header}
                 </th>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/files.tsx b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
index 448a1b251d6..7afd5a63f42 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/files.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/files.tsx
@@ -200,7 +200,7 @@ export function Files() {
               label: file.name,
               content:
                 listRename.editingId === file.id ? (
-                  <span className='flex min-w-0 items-center gap-[12px] font-medium text-[14px] text-[var(--text-body)]'>
+                  <span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
                     <span className='flex-shrink-0 text-[var(--text-icon)]'>
                       <Icon className='h-[14px] w-[14px]' />
                     </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx
index 806f4f73b30..9f2250d79e2 100644
--- a/apps/sim/app/workspace/[workspaceId]/files/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/files/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
 export default function FilesLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -18,7 +18,7 @@ export default function FilesLoading() {
           </div>
         </div>
       </div>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center'>
           <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
           <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
@@ -27,7 +27,7 @@ export default function FilesLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               <th className='w-[40px] px-[12px] py-[8px]'>
                 <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
               </th>
@@ -40,7 +40,7 @@ export default function FilesLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 <td className='w-[40px] px-[12px] py-[10px]'>
                   <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
                 </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
index c48bec55ab7..6c13ea17d40 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/agent-group.tsx
@@ -58,17 +58,17 @@ export function AgentGroup({
   }, [expanded])
 
   return (
-    <div className='flex flex-col gap-[6px]'>
+    <div className='flex flex-col gap-1.5'>
       {hasItems ? (
         <button
           type='button'
           onClick={() => setExpanded((prev) => !prev)}
-          className='flex cursor-pointer items-center gap-[8px]'
+          className='flex cursor-pointer items-center gap-2'
         >
           <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
             <AgentIcon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
           </div>
-          <span className='font-base text-[14px] text-[var(--text-body)]'>{agentLabel}</span>
+          <span className='font-base text-[var(--text-body)] text-sm'>{agentLabel}</span>
           <ChevronDown
             className={cn(
               'h-[7px] w-[9px] text-[var(--text-icon)] transition-transform duration-150',
@@ -77,17 +77,17 @@ export function AgentGroup({
           />
         </button>
       ) : (
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
             <AgentIcon className='h-[16px] w-[16px] text-[var(--text-icon)]' />
           </div>
-          <span className='font-base text-[14px] text-[var(--text-body)]'>{agentLabel}</span>
+          <span className='font-base text-[var(--text-body)] text-sm'>{agentLabel}</span>
         </div>
       )}
       {hasItems && mounted && (
         <div
           className={cn(
-            'flex flex-col gap-[6px] transition-opacity duration-300 ease-out',
+            'flex flex-col gap-1.5 transition-opacity duration-300 ease-out',
             expanded ? 'opacity-100' : 'opacity-0'
           )}
         >
@@ -103,7 +103,7 @@ export function AgentGroup({
             ) : (
               <span
                 key={`text-${idx}`}
-                className='pl-[24px] font-base text-[13px] text-[var(--text-secondary)]'
+                className='pl-6 font-base text-[var(--text-secondary)] text-small'
               >
                 {item.content.trim()}
               </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
index 2c683cd8097..f0e1c95375f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/agent-group/tool-call-item.tsx
@@ -86,11 +86,11 @@ function FlatToolLine({
   status: ToolCallStatus
 }) {
   return (
-    <div className='flex items-center gap-[8px] pl-[24px]'>
+    <div className='flex items-center gap-2 pl-6'>
       <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
         <StatusIcon status={status} toolName={toolName} />
       </div>
-      <span className='font-base text-[13px] text-[var(--text-secondary)]'>{displayTitle}</span>
+      <span className='font-base text-[var(--text-secondary)] text-small'>{displayTitle}</span>
     </div>
   )
 }
@@ -140,17 +140,17 @@ function ToolCallCard({
   const ResolvedIcon = Icon ?? CircleCheck
 
   return (
-    <div className='animate-stream-fade-in pl-[24px]'>
-      <div className='overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-3)]'>
-        <div className='flex items-center gap-[8px] px-[10px] py-[6px]'>
+    <div className='animate-stream-fade-in pl-6'>
+      <div className='overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-3)]'>
+        <div className='flex items-center gap-2 px-2.5 py-1.5'>
           <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
             <ResolvedIcon className='h-[15px] w-[15px] text-[var(--text-tertiary)]' />
           </div>
-          <span className='font-base text-[13px] text-[var(--text-secondary)]'>{displayTitle}</span>
+          <span className='font-base text-[var(--text-secondary)] text-small'>{displayTitle}</span>
         </div>
         {body && (
-          <div className='border-[var(--border)] border-t px-[10px] py-[6px]'>
-            <pre className='max-h-[200px] overflow-y-auto whitespace-pre-wrap break-all font-mono text-[12px] text-[var(--text-body)] leading-[1.5]'>
+          <div className='border-[var(--border)] border-t px-2.5 py-1.5'>
+            <pre className='max-h-[200px] overflow-y-auto whitespace-pre-wrap break-all font-mono text-[var(--text-body)] text-caption leading-[1.5]'>
               {body}
             </pre>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
index eb3db2357ae..e2abef36ee5 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/chat-content/chat-content.tsx
@@ -48,14 +48,14 @@ const PROSE_CLASSES = cn(
   'font-[family-name:var(--font-inter)] antialiased break-words font-[430] tracking-[0]',
   'prose-headings:font-[600] prose-headings:tracking-[0] prose-headings:text-[var(--text-primary)]',
   'prose-headings:mb-3 prose-headings:mt-6 first:prose-headings:mt-0',
-  'prose-p:text-[15px] prose-p:leading-[25px] prose-p:text-[var(--text-primary)]',
+  'prose-p:text-base prose-p:leading-[25px] prose-p:text-[var(--text-primary)]',
   'first:prose-p:mt-0 last:prose-p:mb-0',
-  'prose-li:text-[15px] prose-li:leading-[25px] prose-li:text-[var(--text-primary)]',
+  'prose-li:text-base prose-li:leading-[25px] prose-li:text-[var(--text-primary)]',
   'prose-li:my-1',
   'prose-ul:my-4 prose-ol:my-4',
   'prose-strong:font-[600] prose-strong:text-[var(--text-primary)]',
   'prose-a:text-[var(--text-primary)] prose-a:underline prose-a:decoration-dashed prose-a:underline-offset-2',
-  'prose-code:rounded prose-code:bg-[var(--surface-5)] prose-code:px-1.5 prose-code:py-0.5 prose-code:text-[13px] prose-code:font-mono prose-code:font-[400] prose-code:text-[var(--text-primary)]',
+  'prose-code:rounded prose-code:bg-[var(--surface-5)] prose-code:px-1.5 prose-code:py-0.5 prose-code:text-small prose-code:font-mono prose-code:font-[400] prose-code:text-[var(--text-primary)]',
   'prose-code:before:content-none prose-code:after:content-none',
   'prose-hr:border-[var(--divider)] prose-hr:my-6',
   'prose-table:my-0'
@@ -79,7 +79,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
     return (
       <th
         style={style}
-        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-left font-[600] text-[14px] text-[var(--text-primary)] leading-6'
+        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-left font-[600] text-[var(--text-primary)] text-sm leading-6'
       >
         {children}
       </th>
@@ -89,7 +89,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
     return (
       <td
         style={style}
-        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-[14px] text-[var(--text-primary)] leading-6'
+        className='whitespace-nowrap border-[var(--divider)] border-b px-3 py-2 text-[var(--text-primary)] text-sm leading-6'
       >
         {children}
       </td>
@@ -112,7 +112,7 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
 
     if (!codeString) {
       return (
-        <pre className='not-prose my-6 overflow-x-auto rounded-lg bg-[var(--surface-5)] p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:bg-[#1F1F1F]'>
+        <pre className='not-prose my-6 overflow-x-auto rounded-lg bg-[var(--surface-5)] p-4 font-[430] font-mono text-[var(--text-primary)] text-small leading-[21px] dark:bg-[var(--code-bg)]'>
           {children}
         </pre>
       )
@@ -125,13 +125,13 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
     return (
       <div className='not-prose my-6 overflow-hidden rounded-lg border border-[var(--divider)]'>
         {language && (
-          <div className='border-[var(--divider)] border-b bg-[var(--surface-4)] px-4 py-2 text-[var(--text-tertiary)] text-xs dark:bg-[#2a2a2a]'>
+          <div className='border-[var(--divider)] border-b bg-[var(--surface-4)] px-4 py-2 text-[var(--text-tertiary)] text-xs dark:bg-[var(--surface-4)]'>
             {language}
           </div>
         )}
-        <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[#1F1F1F]'>
+        <div className='code-editor-theme bg-[var(--surface-5)] dark:bg-[var(--code-bg)]'>
           <pre
-            className='m-0 overflow-x-auto whitespace-pre p-4 font-[430] font-mono text-[13px] text-[var(--text-primary)] leading-[21px]'
+            className='m-0 overflow-x-auto whitespace-pre p-4 font-[430] font-mono text-[var(--text-primary)] text-small leading-[21px]'
             dangerouslySetInnerHTML={{ __html: html }}
           />
         </div>
@@ -162,13 +162,13 @@ const MARKDOWN_COMPONENTS: React.ComponentProps<typeof ReactMarkdown>['component
   li({ children, className }) {
     if (className?.includes('task-list-item')) {
       return (
-        <li className='flex list-none items-start gap-2 text-[15px] text-[var(--text-primary)] leading-[25px]'>
+        <li className='flex list-none items-start gap-2 text-[var(--text-primary)] text-base leading-[25px]'>
           {children}
         </li>
       )
     }
     return (
-      <li className='my-1 text-[15px] text-[var(--text-primary)] leading-[25px] marker:text-[var(--text-primary)]'>
+      <li className='my-1 text-[var(--text-primary)] text-base leading-[25px] marker:text-[var(--text-primary)]'>
         {children}
       </li>
     )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
index a358e5e68c6..ea0f2fc82a2 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/options/options.tsx
@@ -15,7 +15,7 @@ export function Options({ items, onSelect }: OptionsProps) {
           key={item.id}
           type='button'
           onClick={() => onSelect?.(item.id)}
-          className='rounded-full border border-[var(--divider)] bg-[var(--bg)] px-3.5 py-1.5 font-[430] font-[family-name:var(--font-inter)] text-[14px] text-[var(--text-primary)] leading-5 transition-colors hover:bg-[var(--surface-5)]'
+          className='rounded-full border border-[var(--divider)] bg-[var(--bg)] px-3.5 py-1.5 font-[430] font-[family-name:var(--font-inter)] text-[var(--text-primary)] text-sm leading-5 transition-colors hover-hover:bg-[var(--surface-5)]'
         >
           {item.label}
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
index 7a3d98df50f..d96e2b45621 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/components/special-tags/special-tags.tsx
@@ -162,17 +162,17 @@ export function SpecialTags({ segment, onOptionSelect }: SpecialTagsProps) {
  */
 export function PendingTagIndicator() {
   return (
-    <div className='flex animate-stream-fade-in items-center gap-[8px] py-[8px]'>
+    <div className='flex animate-stream-fade-in items-center gap-2 py-2'>
       <div className='grid h-[16px] w-[16px] grid-cols-2 gap-[1.5px]'>
         {THINKING_BLOCKS.map((block, i) => (
           <div
             key={i}
-            className='animate-thinking-block rounded-[2px]'
+            className='animate-thinking-block rounded-xs'
             style={{ backgroundColor: block.color, animationDelay: block.delay }}
           />
         ))}
       </div>
-      <span className='font-base text-[14px] text-[var(--text-body)]'>Thinking…</span>
+      <span className='font-base text-[var(--text-body)] text-sm'>Thinking…</span>
     </div>
   )
 }
@@ -190,7 +190,7 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
 
   return (
     <div className='animate-stream-fade-in'>
-      <span className='font-base text-[14px] text-[var(--text-body)]'>Suggested follow-ups</span>
+      <span className='font-base text-[var(--text-body)] text-sm'>Suggested follow-ups</span>
       <div className='mt-1.5 flex flex-col'>
         {entries.map(([key, value], i) => {
           const title = typeof value === 'string' ? value : value.title
@@ -202,15 +202,15 @@ function OptionsDisplay({ data, onSelect }: OptionsDisplayProps) {
               disabled={disabled}
               onClick={() => onSelect?.(title)}
               className={cn(
-                'flex items-center gap-[8px] border-[var(--divider)] px-[8px] py-[8px] text-left transition-colors',
-                disabled ? 'cursor-not-allowed' : 'hover:bg-[var(--surface-5)]',
+                'flex items-center gap-2 border-[var(--divider)] px-2 py-2 text-left transition-colors',
+                disabled ? 'cursor-not-allowed' : 'hover-hover:bg-[var(--surface-5)]',
                 i > 0 && 'border-t'
               )}
             >
               <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
-                <span className='font-base text-[14px] text-[var(--text-icon)]'>{i + 1}</span>
+                <span className='font-base text-[var(--text-icon)] text-sm'>{i + 1}</span>
               </div>
-              <span className='flex-1 font-base text-[14px] text-[var(--text-body)]'>{title}</span>
+              <span className='flex-1 font-base text-[var(--text-body)] text-sm'>{title}</span>
               <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
             </button>
           )
@@ -265,10 +265,10 @@ function CredentialDisplay({ data }: { data: CredentialTagData }) {
       href={data.value}
       target='_blank'
       rel='noopener noreferrer'
-      className='flex animate-stream-fade-in items-center gap-[8px] rounded-lg border border-[var(--divider)] px-3 py-2.5 transition-colors hover:bg-[var(--surface-5)]'
+      className='flex animate-stream-fade-in items-center gap-2 rounded-lg border border-[var(--divider)] px-3 py-2.5 transition-colors hover-hover:bg-[var(--surface-5)]'
     >
       {createElement(Icon, { className: 'h-[16px] w-[16px] shrink-0' })}
-      <span className='flex-1 font-base text-[14px] text-[var(--text-body)]'>
+      <span className='flex-1 font-base text-[var(--text-body)] text-sm'>
         Connect {data.provider}
       </span>
       <ArrowRight className='h-[16px] w-[16px] shrink-0 text-[var(--text-icon)]' />
@@ -299,16 +299,16 @@ function UsageUpgradeDisplay({ data }: { data: UsageUpgradeTagData }) {
           <path d='M8 6.5v3' stroke='currentColor' strokeWidth='1.3' strokeLinecap='round' />
           <circle cx='8' cy='11.5' r='0.75' fill='currentColor' />
         </svg>
-        <span className='font-[500] text-[14px] text-amber-800 leading-5 dark:text-amber-300'>
+        <span className='font-[500] text-amber-800 text-sm leading-5 dark:text-amber-300'>
           Usage Limit Reached
         </span>
       </div>
-      <p className='mt-1.5 text-[13px] text-amber-700/90 leading-[20px] dark:text-amber-400/80'>
+      <p className='mt-1.5 text-amber-700/90 text-small leading-[20px] dark:text-amber-400/80'>
         {data.message}
       </p>
       <a
         href={settingsPath}
-        className='mt-2 inline-flex items-center gap-1 font-[500] text-[13px] text-amber-700 underline decoration-dashed underline-offset-2 transition-colors hover:text-amber-900 dark:text-amber-300 dark:hover:text-amber-200'
+        className='mt-2 inline-flex items-center gap-1 font-[500] text-amber-700 text-small underline decoration-dashed underline-offset-2 transition-colors hover-hover:text-amber-900 dark:text-amber-300 dark:hover-hover:text-amber-200'
       >
         {buttonLabel}
         <ArrowRight className='h-3 w-3' />
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
index ef72850c84f..5f92de6efff 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/message-content/message-content.tsx
@@ -257,7 +257,7 @@ export function MessageContent({
     isStreaming && !hasTrailingContent && (hasSubagentEnded || allLastGroupToolsDone)
 
   return (
-    <div className='space-y-[10px]'>
+    <div className='space-y-2.5'>
       {segments.map((segment, i) => {
         switch (segment.type) {
           case 'text':
@@ -303,11 +303,9 @@ export function MessageContent({
             )
           case 'stopped':
             return (
-              <div key={`stopped-${i}`} className='flex items-center gap-[8px]'>
+              <div key={`stopped-${i}`} className='flex items-center gap-2'>
                 <CircleStop className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
-                <span className='font-base text-[14px] text-[var(--text-body)]'>
-                  Stopped by user
-                </span>
+                <span className='font-base text-[var(--text-body)] text-sm'>Stopped by user</span>
               </div>
             )
         }
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
index 5a979f1eb69..e2bcccb2dde 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/add-resource-dropdown/add-resource-dropdown.tsx
@@ -199,14 +199,14 @@ export function AddResourceDropdown({
                     onClick={() => select({ type, id: item.id, title: item.name }, item.isOpen)}
                   >
                     {config.renderDropdownItem({ item })}
-                    <span className='ml-auto pl-[8px] text-[11px] text-[var(--text-tertiary)]'>
+                    <span className='ml-auto pl-2 text-[var(--text-tertiary)] text-xs'>
                       {config.label}
                     </span>
                   </DropdownMenuItem>
                 )
               })
             ) : (
-              <div className='px-[8px] py-[5px] text-center font-medium text-[12px] text-[var(--text-tertiary)]'>
+              <div className='px-2 py-[5px] text-center font-medium text-[var(--text-tertiary)] text-caption'>
                 No results
               </div>
             )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
index f441c97ed4a..de660ca5b10 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/resource-content.tsx
@@ -33,7 +33,7 @@ import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 const Workflow = lazy(() => import('@/app/workspace/[workspaceId]/w/[workflowId]/workflow'))
 
 const LOADING_SKELETON = (
-  <div className='flex h-full flex-col gap-[8px] p-[24px]'>
+  <div className='flex h-full flex-col gap-2 p-6'>
     <Skeleton className='h-[16px] w-[60%]' />
     <Skeleton className='h-[16px] w-[80%]' />
     <Skeleton className='h-[16px] w-[40%]' />
@@ -318,11 +318,11 @@ function EmbeddedWorkflow({ workspaceId, workflowId }: EmbeddedWorkflowProps) {
 
   if (!workflowExists || hasLoadError) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <WorkflowX className='h-[32px] w-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-primary)]'>Workflow not found</h2>
-          <p className='text-[13px] text-[var(--text-body)]'>
+          <p className='text-[var(--text-body)] text-small'>
             This workflow may have been deleted or moved
           </p>
         </div>
@@ -351,11 +351,11 @@ function EmbeddedFile({ workspaceId, fileId, previewMode }: EmbeddedFileProps) {
 
   if (!file) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <FileX className='h-[32px] w-[32px] text-[var(--text-icon)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-primary)]'>File not found</h2>
-          <p className='text-[13px] text-[var(--text-body)]'>
+          <p className='text-[var(--text-body)] text-small'>
             This file may have been deleted or moved
           </p>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
index 1586f397ff6..ff21d86087d 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-registry/resource-registry.tsx
@@ -67,7 +67,7 @@ function FileDropdownItem({ item }: DropdownItemRenderProps) {
   const DocIcon = getDocumentIcon('', item.name)
   return (
     <>
-      <DocIcon className='mr-[8px] h-[14px] w-[14px] text-[var(--text-icon)]' />
+      <DocIcon className='mr-2 h-[14px] w-[14px] text-[var(--text-icon)]' />
       <span className='truncate'>{item.name}</span>
     </>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
index f1d48eb5438..f58373a2262 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tab-controls.ts
@@ -1,6 +1,5 @@
-export const RESOURCE_TAB_GAP_CLASS = 'gap-[6px]'
+export const RESOURCE_TAB_GAP_CLASS = 'gap-1.5'
 
-export const RESOURCE_TAB_ICON_BUTTON_CLASS =
-  'shrink-0 bg-transparent px-[8px] py-[5px] text-[12px]'
+export const RESOURCE_TAB_ICON_BUTTON_CLASS = 'shrink-0 bg-transparent px-2 py-[5px] text-caption'
 
 export const RESOURCE_TAB_ICON_CLASS = 'h-[16px] w-[16px] text-[var(--text-icon)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
index 546d8796efa..985788e7cdf 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-tabs/resource-tabs.tsx
@@ -260,7 +260,7 @@ export function ResourceTabs({
   return (
     <div
       className={cn(
-        'flex shrink-0 items-center border-[var(--border)] border-b px-[16px] py-[8.5px]',
+        'flex shrink-0 items-center border-[var(--border)] border-b px-4 py-[8.5px]',
         RESOURCE_TAB_GAP_CLASS
       )}
     >
@@ -333,12 +333,12 @@ export function ResourceTabs({
                       onMouseEnter={() => setHoveredTabId(resource.id)}
                       onMouseLeave={() => setHoveredTabId(null)}
                       className={cn(
-                        'group relative shrink-0 bg-transparent px-[8px] py-[4px] pr-[22px] text-[12px] transition-opacity duration-150',
+                        'group relative shrink-0 bg-transparent px-2 py-1 pr-[22px] text-caption transition-opacity duration-150',
                         isActive && 'bg-[var(--surface-4)]',
                         isDragging && 'opacity-30'
                       )}
                     >
-                      {config.renderTabIcon(resource, 'mr-[6px] h-[14px] w-[14px]')}
+                      {config.renderTabIcon(resource, 'mr-1.5 h-[14px] w-[14px]')}
                       {displayName}
                       {(isHovered || isActive) && chatId && (
                         <span
@@ -349,7 +349,7 @@ export function ResourceTabs({
                             if (e.key === 'Enter')
                               handleRemove(e as unknown as React.MouseEvent, resource)
                           }}
-                          className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-[4px] p-[1px] hover:bg-[var(--surface-5)]'
+                          className='-translate-y-1/2 absolute top-1/2 right-[4px] flex items-center justify-center rounded-sm p-[1px] hover-hover:bg-[var(--surface-5)]'
                           aria-label={`Close ${displayName}`}
                         >
                           <svg
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
index d0cf8336cea..cc035d12fae 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/mothership-view.tsx
@@ -97,7 +97,7 @@ export const MothershipView = memo(
                 previewMode={isActivePreviewable ? previewMode : undefined}
               />
             ) : (
-              <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+              <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
                 Click "+" above to add a resource
               </div>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
index 06bb5dd4ccc..0add4145e18 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/queued-messages/queued-messages.tsx
@@ -18,18 +18,18 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
   if (messageQueue.length === 0) return null
 
   return (
-    <div className='-mb-[12px] mx-[14px] overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-[12px]'>
+    <div className='-mb-3 mx-3.5 overflow-hidden rounded-t-[16px] border border-[var(--border-1)] border-b-0 bg-[var(--surface-3)] pb-3'>
       <button
         type='button'
         onClick={() => setIsExpanded(!isExpanded)}
-        className='flex w-full items-center gap-[6px] px-[14px] py-[8px] transition-colors hover:bg-[var(--surface-active)]'
+        className='flex w-full items-center gap-1.5 px-3.5 py-2 transition-colors hover-hover:bg-[var(--surface-active)]'
       >
         {isExpanded ? (
           <ChevronDown className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         ) : (
           <ChevronRight className='h-[14px] w-[14px] text-[var(--text-icon)]' />
         )}
-        <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+        <span className='font-medium text-[var(--text-secondary)] text-small'>
           {messageQueue.length} Queued
         </span>
       </button>
@@ -39,17 +39,17 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
           {messageQueue.map((msg) => (
             <div
               key={msg.id}
-              className='flex items-center gap-[8px] px-[14px] py-[6px] transition-colors hover:bg-[var(--surface-active)]'
+              className='flex items-center gap-2 px-3.5 py-1.5 transition-colors hover-hover:bg-[var(--surface-active)]'
             >
               <div className='flex h-[16px] w-[16px] shrink-0 items-center justify-center'>
                 <div className='h-[10px] w-[10px] rounded-full border-[1.5px] border-[var(--text-tertiary)]/40' />
               </div>
 
               <div className='min-w-0 flex-1'>
-                <p className='truncate text-[13px] text-[var(--text-primary)]'>{msg.content}</p>
+                <p className='truncate text-[var(--text-primary)] text-small'>{msg.content}</p>
               </div>
 
-              <div className='flex shrink-0 items-center gap-[2px]'>
+              <div className='flex shrink-0 items-center gap-0.5'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <button
@@ -58,7 +58,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         onEdit(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
+                      className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)]'
                     >
                       <Pencil className='h-[13px] w-[13px]' />
                     </button>
@@ -76,7 +76,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         void onSendNow(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
+                      className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)]'
                     >
                       <ArrowUp className='h-[13px] w-[13px]' />
                     </button>
@@ -94,7 +94,7 @@ export function QueuedMessages({ messageQueue, onRemove, onSendNow, onEdit }: Qu
                         e.stopPropagation()
                         onRemove(msg.id)
                       }}
-                      className='rounded-[6px] p-[5px] text-[var(--text-icon)] transition-colors hover:bg-[var(--surface-active)] hover:text-[var(--text-primary)]'
+                      className='rounded-md p-[5px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-active)] hover-hover:text-[var(--text-primary)]'
                     >
                       <Trash2 className='h-[13px] w-[13px]' />
                     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
index c0057396e26..c0593aebc1f 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/template-prompts/template-prompts.tsx
@@ -76,7 +76,7 @@ function PreviewTable() {
     <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
       <div className='flex shrink-0 items-center border-[var(--border-1)] border-b bg-[var(--surface-3)]'>
         {['Name', 'Email', 'Company', 'Status'].map((col) => (
-          <div key={col} className='flex flex-1 items-center px-[6px] py-[5px]'>
+          <div key={col} className='flex flex-1 items-center px-1.5 py-[5px]'>
             <span className='font-medium text-[7px] text-[var(--text-tertiary)]'>{col}</span>
           </div>
         ))}
@@ -84,7 +84,7 @@ function PreviewTable() {
       {MINI_TABLE_DATA.map((row, i) => (
         <div key={i} className='flex items-center border-[var(--border-1)] border-b'>
           {row.map((cell, j) => (
-            <div key={j} className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+            <div key={j} className='flex flex-1 items-center px-1.5 py-[2.5px]'>
               {j === 3 ? (
                 <div className='flex items-center gap-[3px]'>
                   <div className={`h-[4px] w-[4px] shrink-0 rounded-full ${STATUS_DOT[cell]}`} />
@@ -110,28 +110,26 @@ function PreviewKnowledge() {
     <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
       <div className='flex shrink-0 items-center border-[var(--border-1)] border-b bg-[var(--surface-3)]'>
         {['Name', 'Size', 'Tokens', 'Status'].map((col) => (
-          <div key={col} className='flex flex-1 items-center px-[6px] py-[5px]'>
+          <div key={col} className='flex flex-1 items-center px-1.5 py-[5px]'>
             <span className='font-medium text-[7px] text-[var(--text-tertiary)]'>{col}</span>
           </div>
         ))}
       </div>
       {MINI_KB_DATA.map((row, i) => (
         <div key={i} className='flex items-center border-[var(--border-1)] border-b'>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
             <span className='truncate font-medium text-[7px] text-[var(--text-body)] leading-[1.2]'>
               {row[0]}
             </span>
           </div>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
             <span className='text-[7px] text-[var(--text-tertiary)] leading-[1.2]'>{row[1]}</span>
           </div>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
             <span className='text-[7px] text-[var(--text-tertiary)] leading-[1.2]'>{row[2]}</span>
           </div>
-          <div className='flex flex-1 items-center px-[6px] py-[2.5px]'>
-            <span
-              className={`inline-block rounded-full px-[4px] py-px text-[6px] ${KB_BADGE[row[3]]}`}
-            >
+          <div className='flex flex-1 items-center px-1.5 py-[2.5px]'>
+            <span className={`inline-block rounded-full px-1 py-px text-[6px] ${KB_BADGE[row[3]]}`}>
               {row[3]}
             </span>
           </div>
@@ -144,14 +142,14 @@ function PreviewKnowledge() {
 function PreviewFile() {
   return (
     <div className='flex h-full w-full flex-col overflow-hidden bg-[var(--surface-2)]'>
-      <div className='flex shrink-0 items-center gap-[4px] border-[var(--border-1)] border-b px-[10px] py-[5px]'>
+      <div className='flex shrink-0 items-center gap-1 border-[var(--border-1)] border-b px-2.5 py-[5px]'>
         <span className='text-[7px] text-[var(--text-tertiary)]'>Files</span>
         <span className='text-[7px] text-[var(--text-tertiary)] opacity-40'>/</span>
         <span className='font-medium text-[7px] text-[var(--text-body)]'>meeting-notes.md</span>
       </div>
-      <div className='flex-1 overflow-hidden px-[10px] py-[6px]'>
+      <div className='flex-1 overflow-hidden px-2.5 py-1.5'>
         <p className='font-semibold text-[8px] text-[var(--text-body)]'>Meeting Notes</p>
-        <p className='mt-[4px] font-medium text-[7px] text-[var(--text-body)]'>Action Items</p>
+        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Action Items</p>
         <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
           • Review Q1 metrics with Sarah
         </p>
@@ -159,11 +157,11 @@ function PreviewFile() {
         <p className='text-[6.5px] text-[var(--text-tertiary)]'>
           • Schedule design review for v2.0
         </p>
-        <p className='mt-[4px] font-medium text-[7px] text-[var(--text-body)]'>Discussion Points</p>
+        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Discussion Points</p>
         <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
           The team agreed to prioritize the new onboarding flow...
         </p>
-        <p className='mt-[4px] font-medium text-[7px] text-[var(--text-body)]'>Next Steps</p>
+        <p className='mt-1 font-medium text-[7px] text-[var(--text-body)]'>Next Steps</p>
         <p className='mt-[1px] text-[6.5px] text-[var(--text-tertiary)]'>
           Follow up with engineering on the API v2 migration.
         </p>
@@ -180,9 +178,9 @@ const WorkflowMiniBlock = memo(function WorkflowMiniBlock({
 }: WorkflowBlockDef) {
   const hasRows = rows.length > 0
   return (
-    <div className='w-[76px] rounded-[4px] border border-[var(--border-1)] bg-[var(--white)] dark:bg-[var(--surface-4)]'>
+    <div className='w-[76px] rounded-sm border border-[var(--border-1)] bg-[var(--white)] dark:bg-[var(--surface-4)]'>
       <div
-        className={`flex items-center gap-[4px] px-[5px] py-[3px] ${hasRows ? 'border-[var(--border-1)] border-b' : ''}`}
+        className={`flex items-center gap-1 px-[5px] py-[3px] ${hasRows ? 'border-[var(--border-1)] border-b' : ''}`}
       >
         <div
           className='flex h-[11px] w-[11px] shrink-0 items-center justify-center rounded-[3px]'
@@ -193,7 +191,7 @@ const WorkflowMiniBlock = memo(function WorkflowMiniBlock({
         <span className='truncate font-medium text-[6.5px] text-[var(--text-body)]'>{name}</span>
       </div>
       {rows.map((row) => (
-        <div key={row.title} className='flex items-center gap-[3px] px-[5px] py-[2px]'>
+        <div key={row.title} className='flex items-center gap-[3px] px-[5px] py-0.5'>
           <span className='shrink-0 text-[5.5px] text-[var(--text-tertiary)]'>{row.title}</span>
           <span className='ml-auto truncate text-[5.5px] text-[var(--text-body)]'>{row.value}</span>
         </div>
@@ -319,8 +317,8 @@ interface TemplatePromptsProps {
 
 export function TemplatePrompts({ onSelect }: TemplatePromptsProps) {
   return (
-    <div className='flex flex-col gap-[24px] lg:gap-[32px]'>
-      <div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
+    <div className='flex flex-col gap-6 lg:gap-8'>
+      <div className='grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-3'>
         {FEATURED_TEMPLATES.map((template) => (
           <TemplateCard key={template.title} template={template} onSelect={onSelect} />
         ))}
@@ -329,11 +327,11 @@ export function TemplatePrompts({ onSelect }: TemplatePromptsProps) {
       {GROUPED_EXTRAS.map((group) => (
         <div
           key={group.category}
-          className='flex flex-col gap-[12px]'
+          className='flex flex-col gap-3'
           style={{ contentVisibility: 'auto', containIntrinsicSize: 'auto 200px' }}
         >
-          <h3 className='font-medium text-[13px] text-[var(--text-secondary)]'>{group.label}</h3>
-          <div className='grid grid-cols-1 gap-[12px] md:grid-cols-2 md:gap-[16px] lg:grid-cols-3'>
+          <h3 className='font-medium text-[var(--text-secondary)] text-small'>{group.label}</h3>
+          <div className='grid grid-cols-1 gap-3 md:grid-cols-2 md:gap-4 lg:grid-cols-3'>
             {group.templates.map((template) => (
               <TemplateCard key={template.title} template={template} onSelect={onSelect} />
             ))}
@@ -359,7 +357,7 @@ const TemplateCard = memo(function TemplateCard({ template, onSelect }: Template
       aria-label={`Select template: ${template.title}`}
       className='group flex cursor-pointer flex-col text-left'
     >
-      <div className='overflow-hidden rounded-[8px] border border-[var(--border-1)] transition-colors group-hover:bg-[var(--surface-2)]'>
+      <div className='overflow-hidden rounded-lg border border-[var(--border-1)] transition-colors group-hover:bg-[var(--surface-2)]'>
         <div className='relative h-[120px] w-full overflow-hidden'>
           {template.image ? (
             <Image
@@ -373,9 +371,9 @@ const TemplateCard = memo(function TemplateCard({ template, onSelect }: Template
             <TemplatePreview modules={template.modules} template={template} />
           )}
         </div>
-        <div className='flex items-center gap-[6px] border-[var(--border-1)] border-t bg-[var(--white)] px-[12px] py-[8px] transition-colors group-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-4)]'>
+        <div className='flex items-center gap-1.5 border-[var(--border-1)] border-t bg-[var(--white)] px-3 py-2 transition-colors group-hover:bg-[var(--surface-2)] dark:bg-[var(--surface-4)]'>
           <Icon className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-          <span className='text-[13px] text-[var(--text-body)]'>{template.title}</span>
+          <span className='text-[var(--text-body)] text-small'>{template.title}</span>
         </div>
       </div>
     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
index fffd762b9e2..1a5b5dea407 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-input/user-input.tsx
@@ -85,7 +85,7 @@ import { useAnimatedPlaceholder } from '../../hooks'
 const TEXTAREA_BASE_CLASSES = cn(
   'm-0 box-border h-auto min-h-[24px] w-full resize-none',
   'overflow-y-auto overflow-x-hidden break-all border-0 bg-transparent',
-  'px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em]',
+  'px-1 py-1 font-body text-base leading-[24px] tracking-[-0.015em]',
   'text-transparent caret-[var(--text-primary)] outline-none',
   'placeholder:font-[380] placeholder:text-[var(--text-subtle)]',
   'focus-visible:ring-0 focus-visible:ring-offset-0',
@@ -95,15 +95,15 @@ const TEXTAREA_BASE_CLASSES = cn(
 const OVERLAY_CLASSES = cn(
   'pointer-events-none absolute top-0 left-0 m-0 box-border h-auto w-full resize-none',
   'overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-all border-0 bg-transparent',
-  'px-[4px] py-[4px] font-body text-[15px] leading-[24px] tracking-[-0.015em]',
+  'px-1 py-1 font-body text-base leading-[24px] tracking-[-0.015em]',
   'text-[var(--text-primary)] outline-none',
   '[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'
 )
 
 const SEND_BUTTON_BASE = 'h-[28px] w-[28px] rounded-full border-0 p-0 transition-colors'
 const SEND_BUTTON_ACTIVE =
-  'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
-const SEND_BUTTON_DISABLED = 'bg-[var(--c-808080)] dark:bg-[var(--c-808080)]'
+  'bg-[var(--divider)] hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
+const SEND_BUTTON_DISABLED = 'bg-[var(--text-subtle)] dark:bg-[var(--text-subtle)]'
 
 const MAX_CHAT_TEXTAREA_HEIGHT = 200
 
@@ -660,7 +660,7 @@ export function UserInput({
       elements.push(
         <span
           key={`mention-${i}-${range.start}-${range.end}`}
-          className='rounded-[5px] bg-[var(--surface-5)] py-[2px]'
+          className='rounded-[5px] bg-[var(--surface-5)] py-0.5'
           style={{
             boxShadow: '-2px 0 0 var(--surface-5), 2px 0 0 var(--surface-5)',
           }}
@@ -688,7 +688,7 @@ export function UserInput({
     <div
       onClick={handleContainerClick}
       className={cn(
-        'relative z-10 mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-[10px] py-[8px] dark:bg-[var(--surface-4)]',
+        'relative z-10 mx-auto w-full max-w-[42rem] cursor-text rounded-[20px] border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-2 dark:bg-[var(--surface-4)]',
         isInitialView && 'shadow-sm'
       )}
       onDragEnter={files.handleDragEnter}
@@ -698,14 +698,14 @@ export function UserInput({
     >
       {/* Attached files */}
       {files.attachedFiles.length > 0 && (
-        <div className='mb-[6px] flex flex-wrap gap-[6px]'>
+        <div className='mb-1.5 flex flex-wrap gap-1.5'>
           {files.attachedFiles.map((file) => {
             const isImage = file.type.startsWith('image/')
             return (
               <Tooltip.Root key={file.id}>
                 <Tooltip.Trigger asChild>
                   <div
-                    className='group relative h-[56px] w-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] hover:bg-[var(--surface-4)]'
+                    className='group relative h-[56px] w-[56px] flex-shrink-0 cursor-pointer overflow-hidden rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] hover-hover:bg-[var(--surface-4)]'
                     onClick={() => files.handleFileClick(file)}
                   >
                     {isImage && file.previewUrl ? (
@@ -715,12 +715,12 @@ export function UserInput({
                         className='h-full w-full object-cover'
                       />
                     ) : (
-                      <div className='flex h-full w-full flex-col items-center justify-center gap-[2px] text-[var(--text-icon)]'>
+                      <div className='flex h-full w-full flex-col items-center justify-center gap-0.5 text-[var(--text-icon)]'>
                         {(() => {
                           const Icon = getDocumentIcon(file.type, file.name)
                           return <Icon className='h-[18px] w-[18px]' />
                         })()}
-                        <span className='max-w-[48px] truncate px-[2px] text-[9px] text-[var(--text-muted)]'>
+                        <span className='max-w-[48px] truncate px-0.5 text-[9px] text-[var(--text-muted)]'>
                           {file.name.split('.').pop()}
                         </span>
                       </div>
@@ -737,7 +737,7 @@ export function UserInput({
                           e.stopPropagation()
                           files.removeFile(file.id)
                         }}
-                        className='absolute top-[2px] right-[2px] flex h-[16px] w-[16px] items-center justify-center rounded-full bg-black/60 opacity-0 group-hover:opacity-100'
+                        className='absolute top-0.5 right-[2px] flex h-[16px] w-[16px] items-center justify-center rounded-full bg-black/60 opacity-0 group-hover:opacity-100'
                       >
                         <X className='h-[10px] w-[10px] text-white' />
                       </button>
@@ -785,7 +785,7 @@ export function UserInput({
       </div>
 
       <div className='flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <DropdownMenu
             open={plusMenuOpen}
             onOpenChange={(open) => {
@@ -800,7 +800,7 @@ export function UserInput({
             <DropdownMenuTrigger asChild>
               <button
                 type='button'
-                className='flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-full border border-[#F0F0F0] transition-colors hover:bg-[#F7F7F7] dark:border-[#3d3d3d] dark:hover:bg-[#303030]'
+                className='flex h-[28px] w-[28px] cursor-pointer items-center justify-center rounded-full border border-[var(--landing-bg-elevated)] transition-colors hover-hover:bg-[var(--surface-3)] dark:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-4)]'
                 title='Add attachments or resources'
               >
                 <Plus className='h-[16px] w-[16px] text-[var(--text-icon)]' />
@@ -855,14 +855,14 @@ export function UserInput({
                           }}
                         >
                           {config.renderDropdownItem({ item })}
-                          <span className='ml-auto pl-[8px] text-[11px] text-[var(--text-tertiary)]'>
+                          <span className='ml-auto pl-2 text-[var(--text-tertiary)] text-xs'>
                             {config.label}
                           </span>
                         </DropdownMenuItem>
                       )
                     })
                   ) : (
-                    <div className='px-[8px] py-[5px] text-center font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <div className='px-2 py-[5px] text-center font-medium text-[var(--text-tertiary)] text-caption'>
                       No results
                     </div>
                   )
@@ -932,15 +932,15 @@ export function UserInput({
             </DropdownMenuContent>
           </DropdownMenu>
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <button
             type='button'
             onClick={toggleListening}
             className={cn(
               'flex h-[28px] w-[28px] items-center justify-center rounded-full transition-colors',
               isListening
-                ? 'bg-red-500 text-white hover:bg-red-600'
-                : 'text-[var(--text-icon)] hover:bg-[#F7F7F7] dark:hover:bg-[#303030]'
+                ? 'bg-red-500 text-white hover-hover:bg-red-600'
+                : 'text-[var(--text-icon)] hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-4)]'
             )}
             title={isListening ? 'Stop listening' : 'Voice input'}
           >
@@ -989,9 +989,9 @@ export function UserInput({
 
       {files.isDragging && (
         <div className='pointer-events-none absolute inset-[6px] z-10 flex items-center justify-center rounded-[14px] border-[1.5px] border-[var(--border-1)] border-dashed bg-[var(--white)] dark:bg-[var(--surface-4)]'>
-          <div className='flex flex-col items-center gap-[8px]'>
-            <span className='font-medium text-[13px] text-[var(--text-secondary)]'>Drop files</span>
-            <div className='flex items-center gap-[8px] text-[var(--text-icon)]'>
+          <div className='flex flex-col items-center gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-small'>Drop files</span>
+            <div className='flex items-center gap-2 text-[var(--text-icon)]'>
               {DROP_OVERLAY_ICONS.map((Icon, i) => (
                 <Icon key={i} className='h-[14px] w-[14px]' />
               ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
index b9a679bb26b..9bb8ebcde36 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/user-message-content/user-message-content.tsx
@@ -6,7 +6,7 @@ import type { ChatMessageContext } from '@/app/workspace/[workspaceId]/home/type
 import { useWorkflowRegistry } from '@/stores/workflows/registry/store'
 
 const USER_MESSAGE_CLASSES =
-  'whitespace-pre-wrap break-all font-[430] font-[family-name:var(--font-inter)] text-[15px] text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
+  'whitespace-pre-wrap break-all font-[430] font-[family-name:var(--font-inter)] text-base text-[var(--text-primary)] leading-[23px] tracking-[0] antialiased'
 
 interface UserMessageContentProps {
   content: string
@@ -83,8 +83,8 @@ function MentionHighlight({ context }: { context: ChatMessageContext }) {
   }
 
   return (
-    <span className='inline-flex items-baseline gap-[4px] rounded-[5px] bg-[var(--surface-5)] px-[5px]'>
-      {icon && <span className='relative top-[2px] flex-shrink-0'>{icon}</span>}
+    <span className='inline-flex items-baseline gap-1 rounded-[5px] bg-[var(--surface-5)] px-[5px]'>
+      {icon && <span className='relative top-0.5 flex-shrink-0'>{icon}</span>}
       {context.label}
     </span>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/home/home.tsx b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
index 1ffa07466ab..75a132e6213 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/home.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/home.tsx
@@ -37,9 +37,9 @@ interface FileAttachmentPillProps {
 function FileAttachmentPill({ mediaType, filename }: FileAttachmentPillProps) {
   const Icon = getDocumentIcon(mediaType, filename)
   return (
-    <div className='flex max-w-[140px] items-center gap-[5px] rounded-[10px] bg-[var(--surface-5)] px-[6px] py-[3px]'>
+    <div className='flex max-w-[140px] items-center gap-[5px] rounded-[10px] bg-[var(--surface-5)] px-1.5 py-[3px]'>
       <Icon className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-icon)]' />
-      <span className='truncate text-[11px] text-[var(--text-body)]'>{filename}</span>
+      <span className='truncate text-[var(--text-body)] text-xs'>{filename}</span>
     </div>
   )
 }
@@ -334,8 +334,8 @@ export function Home({ chatId }: HomeProps = {}) {
   if (!hasMessages && !chatId) {
     return (
       <div className='h-full overflow-y-auto bg-[var(--bg)] [scrollbar-gutter:stable]'>
-        <div className='flex min-h-full flex-col items-center justify-center px-[24px] pb-[2vh]'>
-          <h1 className='mb-[24px] max-w-[42rem] font-[430] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'>
+        <div className='flex min-h-full flex-col items-center justify-center px-6 pb-[2vh]'>
+          <h1 className='mb-6 max-w-[42rem] font-[430] font-season text-[32px] text-[var(--text-primary)] tracking-[-0.02em]'>
             What should we get done
             {session?.user?.name ? `, ${session.user.name.split(' ')[0]}` : ''}?
           </h1>
@@ -352,7 +352,7 @@ export function Home({ chatId }: HomeProps = {}) {
         </div>
         <div
           ref={templateRef}
-          className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-[16px] pb-[32px] sm:px-[24px] lg:px-[40px]'
+          className='-mt-[30vh] mx-auto w-full max-w-[68rem] px-4 pb-8 sm:px-6 lg:px-10'
         >
           <TemplatePrompts onSelect={handleSubmit} />
         </div>
@@ -372,15 +372,15 @@ export function Home({ chatId }: HomeProps = {}) {
               if (msg.role === 'user') {
                 const hasAttachments = msg.attachments && msg.attachments.length > 0
                 return (
-                  <div key={msg.id} className='flex flex-col items-end gap-[6px] pt-3'>
+                  <div key={msg.id} className='flex flex-col items-end gap-1.5 pt-3'>
                     {hasAttachments && (
-                      <div className='flex max-w-[70%] flex-wrap justify-end gap-[6px]'>
+                      <div className='flex max-w-[70%] flex-wrap justify-end gap-1.5'>
                         {msg.attachments!.map((att) => {
                           const isImage = att.media_type.startsWith('image/')
                           return isImage && att.previewUrl ? (
                             <div
                               key={att.id}
-                              className='h-[56px] w-[56px] overflow-hidden rounded-[8px]'
+                              className='h-[56px] w-[56px] overflow-hidden rounded-lg'
                             >
                               <img
                                 src={att.previewUrl}
@@ -437,7 +437,7 @@ export function Home({ chatId }: HomeProps = {}) {
         </div>
 
         <div
-          className={`flex-shrink-0 px-[24px] pb-[16px]${isInputEntering ? ' animate-slide-in-bottom' : ''}`}
+          className={`flex-shrink-0 px-6 pb-4${isInputEntering ? ' animate-slide-in-bottom' : ''}`}
           onAnimationEnd={isInputEntering ? () => setIsInputEntering(false) : undefined}
         >
           <div className='mx-auto max-w-[42rem]'>
@@ -500,7 +500,7 @@ export function Home({ chatId }: HomeProps = {}) {
           <button
             type='button'
             onClick={expandResource}
-            className='flex h-[30px] w-[30px] items-center justify-center rounded-[8px] hover:bg-[var(--surface-active)]'
+            className='flex h-[30px] w-[30px] items-center justify-center rounded-lg hover-hover:bg-[var(--surface-active)]'
             aria-label='Expand resource view'
           >
             <PanelLeft className='h-[16px] w-[16px] text-[var(--text-icon)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
index 25281533fcd..48133841228 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/chunk-editor/chunk-editor.tsx
@@ -197,7 +197,7 @@ export function ChunkEditor({
         }}
       >
         {tokenizerOn ? (
-          <div className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-[24px] font-sans text-[14px] text-[var(--text-body)]'>
+          <div className='h-full w-full cursor-default overflow-y-auto whitespace-pre-wrap break-words p-6 font-sans text-[var(--text-body)] text-sm'>
             {tokenStrings.map((token, index) => (
               <span
                 key={index}
@@ -223,20 +223,20 @@ export function ChunkEditor({
                     ? 'This chunk is synced from a connector and cannot be edited'
                     : 'Read-only view'
             }
-            className='min-h-0 flex-1 resize-none border-0 bg-transparent p-[24px] font-sans text-[14px] text-[var(--text-body)] outline-none placeholder:text-[var(--text-subtle)]'
+            className='min-h-0 flex-1 resize-none border-0 bg-transparent p-6 font-sans text-[var(--text-body)] text-sm outline-none placeholder:text-[var(--text-subtle)]'
             disabled={!canEdit}
             readOnly={!canEdit}
             spellCheck={false}
           />
         )}
       </div>
-      <div className='flex items-center justify-between border-[var(--border)] border-t px-[24px] py-[10px]'>
+      <div className='flex items-center justify-between border-[var(--border)] border-t px-6 py-2.5'>
         <TokenizerToggle
           checked={tokenizerOn}
           onCheckedChange={setTokenizerOn}
           hoveredTokenIndex={tokenizerOn ? hoveredTokenIndex : null}
         />
-        <span className='text-[12px] text-[var(--text-secondary)]'>
+        <span className='text-[var(--text-secondary)] text-caption'>
           {tokenCount.toLocaleString()}
           {maxChunkSize !== undefined && `/${maxChunkSize.toLocaleString()}`} tokens
         </span>
@@ -255,11 +255,11 @@ const TokenizerToggle = React.memo(function TokenizerToggle({
   hoveredTokenIndex: number | null
 }) {
   return (
-    <div className='flex items-center gap-[8px]'>
-      <Label className='text-[12px] text-[var(--text-secondary)]'>Tokenizer</Label>
+    <div className='flex items-center gap-2'>
+      <Label className='text-[var(--text-secondary)] text-caption'>Tokenizer</Label>
       <Switch checked={checked} onCheckedChange={onCheckedChange} />
       {checked && hoveredTokenIndex !== null && (
-        <span className='text-[12px] text-[var(--text-tertiary)]'>
+        <span className='text-[var(--text-tertiary)] text-caption'>
           Token #{hoveredTokenIndex + 1}
         </span>
       )}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
index c947e017477..0dd45e35f0c 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx
@@ -392,23 +392,23 @@ export function DocumentTagsModal({
 
         <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='space-y-[8px]'>
+            <div className='space-y-2'>
               <Label>Tags</Label>
 
               {documentTags.map((tag, index) => (
-                <div key={index} className='space-y-[8px]'>
+                <div key={index} className='space-y-2'>
                   <div
-                    className='flex cursor-pointer items-center gap-2 rounded-[4px] border p-[8px] hover:bg-[var(--surface-2)]'
+                    className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
                     onClick={() => startEditingTag(index)}
                   >
-                    <span className='min-w-0 truncate text-[12px] text-[var(--text-primary)]'>
+                    <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
                       {tag.displayName}
                     </span>
-                    <span className='rounded-[3px] bg-[var(--surface-3)] px-[6px] py-[2px] text-[10px] text-[var(--text-muted)]'>
+                    <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                       {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                     </span>
-                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[#3A3A3A]' />
-                    <span className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-muted)]'>
+                    <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                    <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-xs'>
                       {formatValueForDisplay(tag.value, tag.fieldType)}
                     </span>
                     <div className='flex flex-shrink-0 items-center gap-1'>
@@ -418,7 +418,7 @@ export function DocumentTagsModal({
                           e.stopPropagation()
                           handleRemoveTag(index)
                         }}
-                        className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-error)]'
+                        className='h-4 w-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
                       >
                         <Trash className='h-3 w-3' />
                       </Button>
@@ -426,8 +426,8 @@ export function DocumentTagsModal({
                   </div>
 
                   {editingTagIndex === index && (
-                    <div className='space-y-[8px] rounded-[6px] border p-[12px]'>
-                      <div className='flex flex-col gap-[8px]'>
+                    <div className='space-y-2 rounded-md border p-3'>
+                      <div className='flex flex-col gap-2'>
                         <Label htmlFor={`tagName-${index}`}>Tag Name</Label>
                         {availableDefinitions.length > 0 ? (
                           <Combobox
@@ -477,13 +477,13 @@ export function DocumentTagsModal({
                           />
                         )}
                         {tagNameConflict && (
-                          <span className='text-[12px] text-[var(--text-error)]'>
+                          <span className='text-[var(--text-error)] text-caption'>
                             A tag with this name already exists
                           </span>
                         )}
                       </div>
 
-                      <div className='flex flex-col gap-[8px]'>
+                      <div className='flex flex-col gap-2'>
                         <Label htmlFor={`tagValue-${index}`}>Value</Label>
                         {editTagForm.fieldType === 'boolean' ? (
                           <Combobox
@@ -549,7 +549,7 @@ export function DocumentTagsModal({
                         )}
                       </div>
 
-                      <div className='flex gap-[8px]'>
+                      <div className='flex gap-2'>
                         <Button variant='default' onClick={cancelEditingTag} className='flex-1'>
                           Cancel
                         </Button>
@@ -579,8 +579,8 @@ export function DocumentTagsModal({
               )}
 
               {(isCreatingTag || documentTags.length === 0) && editingTagIndex === null && (
-                <div className='space-y-[8px] rounded-[6px] border p-[12px]'>
-                  <div className='flex flex-col gap-[8px]'>
+                <div className='space-y-2 rounded-md border p-3'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='newTagName'>Tag Name</Label>
                     {tagNameOptions.length > 0 ? (
                       <Combobox
@@ -630,13 +630,13 @@ export function DocumentTagsModal({
                       />
                     )}
                     {tagNameConflict && (
-                      <span className='text-[12px] text-[var(--text-error)]'>
+                      <span className='text-[var(--text-error)] text-caption'>
                         A tag with this name already exists
                       </span>
                     )}
                   </div>
 
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='newTagValue'>Value</Label>
                     {editTagForm.fieldType === 'boolean' ? (
                       <Combobox
@@ -711,7 +711,7 @@ export function DocumentTagsModal({
                       </Badge>
                     )}
 
-                  <div className='flex gap-[8px]'>
+                  <div className='flex gap-2'>
                     {documentTags.length > 0 && (
                       <Button variant='default' onClick={cancelEditingTag} className='flex-1'>
                         Cancel
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
index 21b6bfc71aa..e088225863b 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/document.tsx
@@ -564,16 +564,16 @@ export function Document({
 
   const filterContent = (
     <div className='w-[200px]'>
-      <div className='border-[var(--border-1)] border-b px-[12px] py-[8px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Status</span>
+      <div className='border-[var(--border-1)] border-b px-3 py-2'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
       </div>
-      <div className='flex flex-col gap-[2px] px-[12px] py-[8px]'>
+      <div className='flex flex-col gap-0.5 px-3 py-2'>
         {(['all', 'enabled', 'disabled'] as const).map((value) => (
           <button
             key={value}
             type='button'
             className={cn(
-              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-secondary)] outline-none transition-colors hover:bg-[var(--surface-active)]',
+              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]',
               enabledFilter === value && 'bg-[var(--surface-active)]'
             )}
             onClick={() => {
@@ -822,9 +822,9 @@ export function Document({
           cells: {
             content: {
               content: (
-                <div className='flex items-center gap-[8px]'>
+                <div className='flex items-center gap-2'>
                   <FileText className='h-5 w-5 flex-shrink-0 text-[var(--text-muted)]' />
-                  <span className='text-[14px] text-[var(--text-muted)] italic'>
+                  <span className='text-[var(--text-muted)] text-sm italic'>
                     {documentData?.processingStatus === 'pending' &&
                       'Document processing pending...'}
                     {documentData?.processingStatus === 'processing' &&
@@ -849,7 +849,7 @@ export function Document({
         content: {
           content: (
             <span
-              className='block min-w-0 truncate text-[14px] text-[var(--text-primary)]'
+              className='block min-w-0 truncate text-[var(--text-primary)] text-sm'
               title={chunk.content}
             >
               <SearchHighlight
@@ -861,9 +861,7 @@ export function Document({
         },
         index: {
           content: (
-            <span className='font-mono text-[14px] text-[var(--text-primary)]'>
-              {chunk.chunkIndex}
-            </span>
+            <span className='font-mono text-[var(--text-primary)] text-sm'>{chunk.chunkIndex}</span>
           ),
         },
         tokens: {
@@ -1043,7 +1041,7 @@ export function Document({
         <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
           <ResourceHeader icon={FileText} breadcrumbs={loadingBreadcrumbs} />
           <div className='flex flex-1 items-center justify-center'>
-            <span className='text-[14px] text-[var(--text-muted)]'>Loading chunk...</span>
+            <span className='text-[var(--text-muted)] text-sm'>Loading chunk...</span>
           </div>
         </div>
       )
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx
index 577be0ff2b0..4b98c9a8543 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 4
 export default function DocumentLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
+      <div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[8px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -18,7 +18,7 @@ export default function DocumentLoading() {
           </div>
         </div>
       </div>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -32,7 +32,7 @@ export default function DocumentLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               <th className='w-[40px] px-[12px] py-[8px]'>
                 <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
               </th>
@@ -45,7 +45,7 @@ export default function DocumentLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 <td className='w-[40px] px-[12px] py-[10px]'>
                   <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
                 </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
index dbdf92ba327..3a018ce5e1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx
@@ -814,16 +814,16 @@ export function KnowledgeBase({
 
   const filterContent = (
     <div className='w-[320px]'>
-      <div className='border-[var(--border-1)] border-b px-[12px] py-[8px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Status</span>
+      <div className='border-[var(--border-1)] border-b px-3 py-2'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
       </div>
-      <div className='flex flex-col gap-[2px] px-[12px] py-[8px]'>
+      <div className='flex flex-col gap-0.5 px-3 py-2'>
         {(['all', 'enabled', 'disabled'] as const).map((value) => (
           <button
             key={value}
             type='button'
             className={cn(
-              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-secondary)] outline-none transition-colors hover:bg-[var(--surface-active)]',
+              'flex w-full cursor-pointer select-none items-center rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]',
               enabledFilter === value && 'bg-[var(--surface-active)]'
             )}
             onClick={() => {
@@ -861,7 +861,7 @@ export function KnowledgeBase({
               key={connector.id}
               type='button'
               onClick={() => setShowConnectorsModal(true)}
-              className='flex shrink-0 cursor-pointer items-center gap-[6px] rounded-[6px] px-[8px] py-[4px] text-[12px] text-[var(--text-secondary)] shadow-[inset_0_0_0_1px_var(--border)] transition-colors hover:bg-[var(--surface-3)]'
+              className='flex shrink-0 cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption shadow-[inset_0_0_0_1px_var(--border)] transition-colors hover-hover:bg-[var(--surface-3)]'
             >
               {ConnectorIcon && <ConnectorIcon className='h-[14px] w-[14px]' />}
               {def?.name || connector.connectorType}
@@ -940,7 +940,7 @@ export function KnowledgeBase({
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
                       <span
-                        className='block max-w-full truncate text-[12px] text-[var(--text-secondary)]'
+                        className='block max-w-full truncate text-[var(--text-secondary)] text-caption'
                         onClick={(e) => e.stopPropagation()}
                       >
                         {tagsDisplayText}
@@ -950,9 +950,9 @@ export function KnowledgeBase({
                       side='top'
                       className='max-h-[104px] max-w-[240px] overflow-y-auto'
                     >
-                      <div className='flex flex-col gap-[2px]'>
+                      <div className='flex flex-col gap-0.5'>
                         {tags.map((tag) => (
-                          <div key={tag.slot} className='text-[11px]'>
+                          <div key={tag.slot} className='text-xs'>
                             <span className='text-[var(--text-muted)]'>{tag.displayName}:</span>{' '}
                             {tag.value}
                           </div>
@@ -968,7 +968,7 @@ export function KnowledgeBase({
           cells: {
             name: {
               content: (
-                <span className='flex min-w-0 items-center gap-[12px] font-medium text-[14px] text-[var(--text-body)]'>
+                <span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
                   <span className='flex-shrink-0 text-[var(--text-icon)]'>
                     <DocIcon className='h-[14px] w-[14px]' />
                   </span>
@@ -999,7 +999,7 @@ export function KnowledgeBase({
               content: (
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <span className='font-medium text-[var(--text-secondary)] text-sm'>
                       {format(new Date(doc.uploadedAt), 'MMM d')}
                     </span>
                   </Tooltip.Trigger>
@@ -1025,13 +1025,13 @@ export function KnowledgeBase({
 
   if (error && !knowledgeBase) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <DatabaseX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>
             Knowledge base not found
           </h2>
-          <p className='text-[13px] text-[var(--text-muted)]'>
+          <p className='text-[var(--text-muted)] text-small'>
             This knowledge base may have been deleted or moved
           </p>
         </div>
@@ -1388,13 +1388,15 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
 
   return (
     <div className='border-[var(--border-1)] border-t'>
-      <div className='flex items-center justify-between px-[12px] py-[8px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Filter by tags</span>
-        <div className='flex items-center gap-[4px]'>
+      <div className='flex items-center justify-between px-3 py-2'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>
+          Filter by tags
+        </span>
+        <div className='flex items-center gap-1'>
           {activeCount > 0 && (
             <Button
               variant='ghost'
-              className='h-auto px-[6px] py-[2px] text-[11px] text-[var(--text-muted)]'
+              className='h-auto px-1.5 py-0.5 text-[var(--text-muted)] text-xs'
               onClick={() => onChange([])}
             >
               Clear all
@@ -1406,7 +1408,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
         </div>
       </div>
 
-      <div className='flex max-h-[320px] flex-col gap-[8px] overflow-y-auto px-[12px] pb-[12px]'>
+      <div className='flex max-h-[320px] flex-col gap-2 overflow-y-auto px-3 pb-3'>
         {filtersToShow.map((entry) => {
           const operators = getOperatorsForFieldType(entry.fieldType)
           const operatorOptions: ComboboxOption[] = operators.map((op) => ({
@@ -1418,14 +1420,14 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
           return (
             <div
               key={entry.id}
-              className='flex flex-col gap-[6px] rounded-[6px] border border-[var(--border-1)] p-[8px]'
+              className='flex flex-col gap-1.5 rounded-md border border-[var(--border-1)] p-2'
             >
               <div className='flex items-center justify-between'>
-                <Label className='text-[11px] text-[var(--text-muted)]'>Tag</Label>
+                <Label className='text-[var(--text-muted)] text-xs'>Tag</Label>
                 <button
                   type='button'
                   onClick={() => removeFilter(entry.id)}
-                  className='text-[var(--text-muted)] transition-colors hover:text-[var(--text-error)]'
+                  className='text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-error)]'
                 >
                   <X className='h-3 w-3' />
                 </button>
@@ -1439,7 +1441,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
 
               {entry.tagSlot && (
                 <>
-                  <Label className='text-[11px] text-[var(--text-muted)]'>Operator</Label>
+                  <Label className='text-[var(--text-muted)] text-xs'>Operator</Label>
                   <Combobox
                     options={operatorOptions}
                     value={entry.operator}
@@ -1447,19 +1449,17 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
                     placeholder='Select operator'
                   />
 
-                  <Label className='text-[11px] text-[var(--text-muted)]'>Value</Label>
+                  <Label className='text-[var(--text-muted)] text-xs'>Value</Label>
                   {entry.fieldType === 'date' ? (
                     isBetween ? (
-                      <div className='flex items-center gap-[6px]'>
+                      <div className='flex items-center gap-1.5'>
                         <DatePicker
                           size='sm'
                           value={entry.value || undefined}
                           onChange={(v) => updateEntry(entry.id, { value: v })}
                           placeholder='From'
                         />
-                        <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>
-                          to
-                        </span>
+                        <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>to</span>
                         <DatePicker
                           size='sm'
                           value={entry.valueTo || undefined}
@@ -1476,19 +1476,19 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
                       />
                     )
                   ) : isBetween ? (
-                    <div className='flex items-center gap-[6px]'>
+                    <div className='flex items-center gap-1.5'>
                       <Input
                         value={entry.value}
                         onChange={(e) => updateEntry(entry.id, { value: e.target.value })}
                         placeholder='From'
-                        className='h-[28px] text-[12px]'
+                        className='h-[28px] text-caption'
                       />
-                      <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>to</span>
+                      <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>to</span>
                       <Input
                         value={entry.valueTo}
                         onChange={(e) => updateEntry(entry.id, { valueTo: e.target.value })}
                         placeholder='To'
-                        className='h-[28px] text-[12px]'
+                        className='h-[28px] text-caption'
                       />
                     </div>
                   ) : (
@@ -1502,7 +1502,7 @@ function TagFilterSection({ tagDefinitions, entries, onChange }: TagFilterSectio
                             ? 'Enter number'
                             : 'Enter value'
                       }
-                      className='h-[28px] text-[12px]'
+                      className='h-[28px] text-caption'
                     />
                   )}
                 </>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
index a3e4211d079..6c96ec31d3e 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/action-bar/action-bar.tsx
@@ -54,8 +54,8 @@ export function ActionBar({
       className={cn('-translate-x-1/2 fixed bottom-6 z-50 transform', className)}
       style={{ left: '50%' }}
     >
-      <div className='flex items-center gap-[8px] rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-[8px] py-[6px]'>
-        <span className='px-[4px] text-[13px] text-[var(--text-secondary)]'>
+      <div className='flex items-center gap-2 rounded-[10px] border border-[var(--border)] bg-[var(--surface-2)] px-2 py-1.5'>
+        <span className='px-1 text-[var(--text-secondary)] text-small'>
           {isAllSelected ? totalCount : selectedCount} selected
           {showSelectAllOption && (
             <>
@@ -63,7 +63,7 @@ export function ActionBar({
               <button
                 type='button'
                 onClick={onSelectAll}
-                className='text-[var(--brand-primary)] hover:underline'
+                className='text-[var(--brand-primary)] hover-hover:underline'
               >
                 Select all
               </button>
@@ -75,7 +75,7 @@ export function ActionBar({
               <button
                 type='button'
                 onClick={onClearSelectAll}
-                className='text-[var(--brand-primary)] hover:underline'
+                className='text-[var(--brand-primary)] hover-hover:underline'
               >
                 Clear
               </button>
@@ -91,7 +91,7 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onEnable}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                  className='hover-hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
                 >
                   <Circle className='h-[12px] w-[12px]' />
                 </Button>
@@ -107,7 +107,7 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onDisable}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                  className='hover-hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
                 >
                   <CircleOff className='h-[12px] w-[12px]' />
                 </Button>
@@ -123,7 +123,7 @@ export function ActionBar({
                   variant='ghost'
                   onClick={onDelete}
                   disabled={isLoading}
-                  className='hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-[8px] bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover:bg-[var(--brand-secondary)]'
+                  className='hover-hover:!text-[var(--text-inverse)] h-[28px] w-[28px] rounded-lg bg-[var(--surface-5)] p-0 text-[var(--text-secondary)] hover-hover:bg-[var(--brand-secondary)]'
                 >
                   <Trash2 className='h-[12px] w-[12px]' />
                 </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
index 1d5c3f78a45..e7d9603da82 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/add-connector-modal.tsx
@@ -337,8 +337,8 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
 
           <ModalBody>
             {step === 'select-type' ? (
-              <div className='flex flex-col gap-[8px]'>
-                <div className='flex items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+              <div className='flex flex-col gap-2'>
+                <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
                   <Search
                     className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
                     strokeWidth={2}
@@ -351,7 +351,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                   />
                 </div>
                 <div className='min-h-[400px] overflow-y-auto'>
-                  <div className='flex flex-col gap-[2px]'>
+                  <div className='flex flex-col gap-0.5'>
                     {filteredEntries.map(([type, config]) => (
                       <ConnectorTypeCard
                         key={type}
@@ -360,7 +360,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                       />
                     ))}
                     {filteredEntries.length === 0 && (
-                      <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                      <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                         {CONNECTOR_ENTRIES.length === 0
                           ? 'No connectors available.'
                           : `No sources found matching "${searchTerm}"`}
@@ -370,10 +370,10 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                 </div>
               </div>
             ) : connectorConfig ? (
-              <div className='flex flex-col gap-[12px]'>
+              <div className='flex flex-col gap-3'>
                 {/* Auth: API key input or OAuth credential selection */}
                 {isApiKeyMode ? (
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label>
                       {connectorConfig.auth.mode === 'apiKey' && connectorConfig.auth.label
                         ? connectorConfig.auth.label
@@ -394,10 +394,10 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                     />
                   </div>
                 ) : (
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label>Account</Label>
                     {credentialsLoading ? (
-                      <div className='flex items-center gap-2 text-[13px] text-[var(--text-muted)]'>
+                      <div className='flex items-center gap-2 text-[var(--text-muted)] text-small'>
                         <Loader2 className='h-4 w-4 animate-spin' />
                         Loading credentials...
                       </div>
@@ -442,12 +442,12 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                     canonicalId && (canonicalGroups.get(canonicalId)?.length ?? 0) === 2
 
                   return (
-                    <div key={field.id} className='flex flex-col gap-[4px]'>
+                    <div key={field.id} className='flex flex-col gap-1'>
                       <div className='flex items-center justify-between'>
                         <Label>
                           {field.title}
                           {field.required && (
-                            <span className='ml-[2px] text-[var(--text-error)]'>*</span>
+                            <span className='ml-0.5 text-[var(--text-error)]'>*</span>
                           )}
                         </Label>
                         {hasCanonicalPair && canonicalId && (
@@ -455,7 +455,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                             <Tooltip.Trigger asChild>
                               <button
                                 type='button'
-                                className='flex h-[18px] w-[18px] items-center justify-center rounded-[3px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-3)] hover:text-[var(--text-secondary)]'
+                                className='flex h-[18px] w-[18px] items-center justify-center rounded-[3px] text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-3)] hover-hover:text-[var(--text-secondary)]'
                                 onClick={() => toggleCanonicalMode(canonicalId)}
                               >
                                 <ArrowLeftRight className='h-[12px] w-[12px]' />
@@ -470,7 +470,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                         )}
                       </div>
                       {field.description && (
-                        <p className='text-[11px] text-[var(--text-muted)]'>{field.description}</p>
+                        <p className='text-[var(--text-muted)] text-xs'>{field.description}</p>
                       )}
                       {field.type === 'selector' && field.selectorKey ? (
                         <ConnectorSelectorField
@@ -507,12 +507,12 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
 
                 {/* Tag definitions (opt-out) */}
                 {connectorConfig.tagDefinitions && connectorConfig.tagDefinitions.length > 0 && (
-                  <div className='flex flex-col gap-[4px]'>
+                  <div className='flex flex-col gap-1'>
                     <Label>Metadata Tags</Label>
                     {connectorConfig.tagDefinitions.map((tagDef) => (
                       <div
                         key={tagDef.id}
-                        className='flex cursor-pointer items-center gap-[8px] rounded-[4px] px-[2px] py-[2px] text-[13px]'
+                        className='flex cursor-pointer items-center gap-2 rounded-sm px-0.5 py-0.5 text-small'
                         onClick={() => {
                           setDisabledTagIds((prev) => {
                             const next = new Set(prev)
@@ -541,7 +541,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                           }}
                         />
                         <span className='text-[var(--text-primary)]'>{tagDef.displayName}</span>
-                        <span className='text-[11px] text-[var(--text-muted)]'>
+                        <span className='text-[var(--text-muted)] text-xs'>
                           ({tagDef.fieldType})
                         </span>
                       </div>
@@ -550,7 +550,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                 )}
 
                 {/* Sync interval */}
-                <div className='flex flex-col gap-[4px]'>
+                <div className='flex flex-col gap-1'>
                   <Label>Sync Frequency</Label>
                   <ButtonGroup
                     value={String(syncInterval)}
@@ -565,7 +565,7 @@ export function AddConnectorModal({ open, onOpenChange, knowledgeBaseId }: AddCo
                 </div>
 
                 {error && (
-                  <p className='text-[12px] text-[var(--text-error)] leading-tight'>{error}</p>
+                  <p className='text-[var(--text-error)] text-caption leading-tight'>{error}</p>
                 )}
               </div>
             ) : null}
@@ -619,15 +619,15 @@ function ConnectorTypeCard({ config, onClick }: ConnectorTypeCardProps) {
   return (
     <button
       type='button'
-      className='flex items-center gap-[10px] rounded-[6px] px-[10px] py-[8px] text-left transition-colors hover:bg-[var(--surface-3)]'
+      className='flex items-center gap-2.5 rounded-md px-2.5 py-2 text-left transition-colors hover-hover:bg-[var(--surface-3)]'
       onClick={onClick}
     >
       <Icon className='h-[18px] w-[18px] flex-shrink-0' />
       <div className='flex min-w-0 flex-col gap-[1px]'>
-        <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+        <span className='truncate font-medium text-[var(--text-primary)] text-small'>
           {config.name}
         </span>
-        <span className='truncate text-[11px] text-[var(--text-muted)]'>{config.description}</span>
+        <span className='truncate text-[var(--text-muted)] text-xs'>{config.description}</span>
       </div>
     </button>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx
index 9b6e3fa8293..441a4a9313f 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-connector-modal/components/connector-selector-field.tsx
@@ -67,7 +67,7 @@ export function ConnectorSelectorField({
 
   if (isLoading && isEnabled) {
     return (
-      <div className='flex items-center gap-2 rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] text-[var(--text-muted)] text-sm'>
+      <div className='flex items-center gap-2 rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 text-[var(--text-muted)] text-sm'>
         <Loader2 className='h-3.5 w-3.5 animate-spin' />
         Loading...
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
index 61b6f258fb6..531fcc3f175 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/add-documents-modal/add-documents-modal.tsx
@@ -236,12 +236,12 @@ export function AddDocumentsModal({
 
         <ModalBody>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='space-y-[12px]'>
+            <div className='space-y-3'>
               {fileError && (
-                <p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
+                <p className='text-[var(--text-error)] text-caption leading-tight'>{fileError}</p>
               )}
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Upload Documents</Label>
                 <Button
                   type='button'
@@ -252,7 +252,7 @@ export function AddDocumentsModal({
                   onDragLeave={handleDragLeave}
                   onDrop={handleDrop}
                   className={cn(
-                    '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                    '!bg-[var(--surface-1)] hover-hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-2.5',
                     isDragging && 'border-[var(--surface-7)]'
                   )}
                 >
@@ -264,11 +264,11 @@ export function AddDocumentsModal({
                     className='hidden'
                     multiple
                   />
-                  <div className='flex flex-col gap-[2px] text-center'>
+                  <div className='flex flex-col gap-0.5 text-center'>
                     <span className='text-[var(--text-primary)]'>
                       {isDragging ? 'Drop files here' : 'Drop files here or click to browse'}
                     </span>
-                    <span className='text-[11px] text-[var(--text-tertiary)]'>
+                    <span className='text-[var(--text-tertiary)] text-xs'>
                       PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML (max 100MB each)
                     </span>
                   </div>
@@ -289,20 +289,20 @@ export function AddDocumentsModal({
                         <div
                           key={index}
                           className={cn(
-                            'flex items-center gap-2 rounded-[4px] border p-[8px]',
+                            'flex items-center gap-2 rounded-sm border p-2',
                             isFailed && !isRetrying && 'border-[var(--text-error)]'
                           )}
                         >
                           <span
                             className={cn(
-                              'min-w-0 flex-1 truncate text-[12px]',
+                              'min-w-0 flex-1 truncate text-caption',
                               isFailed && !isRetrying && 'text-[var(--text-error)]'
                             )}
                             title={file.name}
                           >
                             {file.name}
                           </span>
-                          <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>
+                          <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
                             {formatFileSize(file.size)}
                           </span>
                           <div className='flex flex-shrink-0 items-center gap-1'>
@@ -344,15 +344,15 @@ export function AddDocumentsModal({
         </ModalBody>
 
         <ModalFooter>
-          <div className='flex w-full items-center justify-between gap-[12px]'>
+          <div className='flex w-full items-center justify-between gap-3'>
             {uploadError ? (
-              <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+              <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                 {uploadError.message}
               </p>
             ) : (
               <div />
             )}
-            <div className='flex flex-shrink-0 gap-[8px]'>
+            <div className='flex flex-shrink-0 gap-2'>
               <Button variant='default' onClick={handleClose} type='button' disabled={isUploading}>
                 Cancel
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
index 9d2b83eaf8c..dc57496db05 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx
@@ -50,23 +50,20 @@ function DocumentList({ documents, totalCount }: DocumentListProps) {
   const hasMore = totalCount > displayLimit
 
   return (
-    <div className='rounded-[4px] border'>
+    <div className='rounded-sm border'>
       <div className='max-h-[160px] overflow-y-auto'>
         {documents.slice(0, displayLimit).map((doc) => {
           const DocumentIcon = getDocumentIcon('', doc.name)
           return (
-            <div
-              key={doc.id}
-              className='flex items-center gap-[8px] border-b p-[8px] last:border-b-0'
-            >
+            <div key={doc.id} className='flex items-center gap-2 border-b p-2 last:border-b-0'>
               <DocumentIcon className='h-4 w-4 flex-shrink-0 text-[var(--text-muted)]' />
-              <span className='min-w-0 max-w-[120px] truncate text-[12px] text-[var(--text-primary)]'>
+              <span className='min-w-0 max-w-[120px] truncate text-[var(--text-primary)] text-caption'>
                 {doc.name}
               </span>
               {doc.tagValue && (
                 <>
-                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[#3A3A3A]' />
-                  <span className='min-w-0 flex-1 truncate text-[11px] text-[var(--text-muted)]'>
+                  <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                  <span className='min-w-0 flex-1 truncate text-[var(--text-muted)] text-xs'>
                     {doc.tagValue}
                   </span>
                 </>
@@ -75,7 +72,7 @@ function DocumentList({ documents, totalCount }: DocumentListProps) {
           )
         })}
         {hasMore && (
-          <div className='p-[8px] text-[11px] text-[var(--text-muted)]'>
+          <div className='p-2 text-[var(--text-muted)] text-xs'>
             and {totalCount - displayLimit} more documents
           </div>
         )}
@@ -273,17 +270,17 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
 
           <ModalBody>
             <div className='min-h-0 flex-1 overflow-y-auto'>
-              <div className='space-y-[8px]'>
+              <div className='space-y-2'>
                 <Label>
                   Tags:{' '}
-                  <span className='pl-[6px] text-[var(--text-tertiary)]'>
+                  <span className='pl-1.5 text-[var(--text-tertiary)]'>
                     {kbTagDefinitions.length} defined
                   </span>
                 </Label>
 
                 {kbTagDefinitions.length === 0 && !isCreatingTag && (
-                  <div className='rounded-[6px] border p-[16px] text-center'>
-                    <p className='text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='rounded-md border p-4 text-center'>
+                    <p className='text-[var(--text-tertiary)] text-caption'>
                       No tag definitions yet. Create your first tag to organize documents.
                     </p>
                   </div>
@@ -294,17 +291,17 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                   return (
                     <div
                       key={tag.id}
-                      className='flex cursor-pointer items-center gap-2 rounded-[4px] border p-[8px] hover:bg-[var(--surface-2)]'
+                      className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
                       onClick={() => handleViewDocuments(tag)}
                     >
-                      <span className='min-w-0 truncate text-[12px] text-[var(--text-primary)]'>
+                      <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
                         {tag.displayName}
                       </span>
-                      <span className='rounded-[3px] bg-[var(--surface-3)] px-[6px] py-[2px] text-[10px] text-[var(--text-muted)]'>
+                      <span className='rounded-[3px] bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                         {FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                       </span>
-                      <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[#3A3A3A]' />
-                      <span className='min-w-0 flex-1 text-[11px] text-[var(--text-muted)]'>
+                      <div className='mb-[-1.5px] h-[14px] w-[1.25px] flex-shrink-0 rounded-full bg-[var(--border-1)]' />
+                      <span className='min-w-0 flex-1 text-[var(--text-muted)] text-xs'>
                         {usage.documentCount} document{usage.documentCount !== 1 ? 's' : ''}
                       </span>
                       <div className='flex flex-shrink-0 items-center gap-1'>
@@ -314,7 +311,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                             e.stopPropagation()
                             handleDeleteTagClick(tag)
                           }}
-                          className='h-4 w-4 p-0 text-[var(--text-muted)] hover:text-[var(--text-error)]'
+                          className='h-4 w-4 p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
                         >
                           <Trash className='h-3 w-3' />
                         </Button>
@@ -335,8 +332,8 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                 )}
 
                 {isCreatingTag && (
-                  <div className='space-y-[8px] rounded-[6px] border p-[12px]'>
-                    <div className='flex flex-col gap-[8px]'>
+                  <div className='space-y-2 rounded-md border p-3'>
+                    <div className='flex flex-col gap-2'>
                       <Label htmlFor='tagName'>Tag Name</Label>
                       <Input
                         id='tagName'
@@ -358,13 +355,13 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         }}
                       />
                       {tagNameConflict && (
-                        <span className='text-[12px] text-[var(--text-error)]'>
+                        <span className='text-[var(--text-error)] text-caption'>
                           A tag with this name already exists
                         </span>
                       )}
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
+                    <div className='flex flex-col gap-2'>
                       <Label htmlFor='tagType'>Type</Label>
                       <Combobox
                         options={fieldTypeOptions}
@@ -375,13 +372,13 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                         placeholder='Select type'
                       />
                       {!hasAvailableSlots(createTagForm.fieldType) && (
-                        <span className='text-[12px] text-[var(--text-error)]'>
+                        <span className='text-[var(--text-error)] text-caption'>
                           No available slots for this type. Choose a different type.
                         </span>
                       )}
                     </div>
 
-                    <div className='flex gap-[8px]'>
+                    <div className='flex gap-2'>
                       <Button variant='default' onClick={cancelCreatingTag} className='flex-1'>
                         Cancel
                       </Button>
@@ -417,7 +414,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         <ModalContent size='sm'>
           <ModalHeader>Delete Tag</ModalHeader>
           <ModalBody>
-            <div className='space-y-[8px]'>
+            <div className='space-y-2'>
               <p className='text-[var(--text-secondary)]'>
                 Are you sure you want to delete the "{selectedTag?.displayName}" tag? This will
                 remove this tag from {selectedTagUsage?.documentCount || 0} document
@@ -426,7 +423,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
               </p>
 
               {selectedTagUsage && selectedTagUsage.documentCount > 0 && (
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Affected documents:</Label>
                   <DocumentList
                     documents={selectedTagUsage.documents}
@@ -460,7 +457,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
         <ModalContent size='sm'>
           <ModalHeader>Documents using "{selectedTag?.displayName}"</ModalHeader>
           <ModalBody>
-            <div className='space-y-[8px]'>
+            <div className='space-y-2'>
               <p className='text-[var(--text-secondary)]'>
                 {selectedTagUsage?.documentCount || 0} document
                 {selectedTagUsage?.documentCount !== 1 ? 's are' : ' is'} currently using this tag
@@ -468,7 +465,7 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
               </p>
 
               {selectedTagUsage?.documentCount === 0 ? (
-                <div className='rounded-[6px] border p-[16px] text-center'>
+                <div className='rounded-md border p-4 text-center'>
                   <p className='text-[var(--text-secondary)]'>
                     This tag definition is not being used by any documents. You can safely delete it
                     to free up the tag slot.
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
index 3abc3d50822..5e80e1f8cd3 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx
@@ -130,22 +130,17 @@ export function ConnectorsSection({
   if (connectors.length === 0 && !canEdit && !isLoading) return null
 
   return (
-    <div className='mt-[16px]'>
-      {error && (
-        <p className='mt-[8px] text-[12px] text-[var(--text-error)] leading-tight'>{error}</p>
-      )}
+    <div className='mt-4'>
+      {error && <p className='mt-2 text-[var(--text-error)] text-caption leading-tight'>{error}</p>}
 
       {isLoading ? (
-        <div className='mt-[8px] flex flex-col gap-[8px]'>
+        <div className='mt-2 flex flex-col gap-2'>
           {Array.from({ length: 2 }).map((_, i) => (
-            <div
-              key={i}
-              className='rounded-[8px] border border-[var(--border-1)] px-[12px] py-[10px]'
-            >
-              <div className='flex items-center gap-[10px]'>
-                <Skeleton className='h-5 w-5 flex-shrink-0 rounded-[4px]' />
-                <div className='flex flex-col gap-[4px]'>
-                  <div className='flex items-center gap-[8px]'>
+            <div key={i} className='rounded-lg border border-[var(--border-1)] px-3 py-2.5'>
+              <div className='flex items-center gap-2.5'>
+                <Skeleton className='h-5 w-5 flex-shrink-0 rounded-sm' />
+                <div className='flex flex-col gap-1'>
+                  <div className='flex items-center gap-2'>
                     <Skeleton className='h-[14px] w-[100px]' />
                     <Skeleton className='h-[18px] w-[52px] rounded-full' />
                   </div>
@@ -156,11 +151,11 @@ export function ConnectorsSection({
           ))}
         </div>
       ) : connectors.length === 0 ? (
-        <p className='mt-[8px] text-[13px] text-[var(--text-muted)]'>
+        <p className='mt-2 text-[var(--text-muted)] text-small'>
           No connected sources yet. Connect an external source to automatically sync documents.
         </p>
       ) : (
-        <div className='mt-[8px] flex flex-col gap-[8px]'>
+        <div className='mt-2 flex flex-col gap-2'>
           {connectors.map((connector) => (
             <ConnectorCard
               key={connector.id}
@@ -210,7 +205,7 @@ export function ConnectorsSection({
         <ModalContent size='sm'>
           <ModalHeader>Delete Connector</ModalHeader>
           <ModalBody>
-            <p className='text-[14px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-sm'>
               Are you sure you want to remove this connected source? Documents already synced will
               remain in the knowledge base.
             </p>
@@ -305,23 +300,23 @@ function ConnectorCard({
   const syncLogs = detail?.syncLogs ?? []
 
   return (
-    <div className='rounded-[8px] border border-[var(--border-1)]'>
-      <div className='flex items-center justify-between px-[12px] py-[10px]'>
-        <div className='flex items-center gap-[10px]'>
+    <div className='rounded-lg border border-[var(--border-1)]'>
+      <div className='flex items-center justify-between px-3 py-2.5'>
+        <div className='flex items-center gap-2.5'>
           {Icon && <Icon className='h-5 w-5 flex-shrink-0' />}
-          <div className='flex flex-col gap-[2px]'>
-            <div className='flex items-center gap-[8px]'>
-              <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+          <div className='flex flex-col gap-0.5'>
+            <div className='flex items-center gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-small'>
                 {connectorDef?.name || connector.connectorType}
               </span>
-              <Badge variant={statusConfig.variant} className='text-[10px]'>
+              <Badge variant={statusConfig.variant} className='text-micro'>
                 {connector.status === 'syncing' && (
                   <Loader2 className='mr-1 h-3 w-3 animate-spin' />
                 )}
                 {statusConfig.label}
               </Badge>
             </div>
-            <div className='flex items-center gap-[6px] text-[11px] text-[var(--text-muted)]'>
+            <div className='flex items-center gap-1.5 text-[var(--text-muted)] text-xs'>
               {connector.lastSyncAt && (
                 <span>Last sync: {format(new Date(connector.lastSyncAt), 'MMM d, h:mm a')}</span>
               )}
@@ -352,7 +347,7 @@ function ConnectorCard({
           </div>
         </div>
 
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {canEdit && (
             <>
               <Tooltip.Root>
@@ -436,10 +431,10 @@ function ConnectorCard({
       </div>
 
       {missingScopes.length > 0 && (
-        <div className='border-[var(--border-1)] border-t px-[12px] py-[8px]'>
-          <div className='flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
-            <div className='flex items-center font-medium text-[12px]'>
-              <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+        <div className='border-[var(--border-1)] border-t px-3 py-2'>
+          <div className='flex flex-col gap-1 rounded-sm border bg-[var(--surface-2)] px-2 py-1.5'>
+            <div className='flex items-center font-medium text-caption'>
+              <span className='mr-1.5 inline-block h-[6px] w-[6px] rounded-xs bg-amber-500' />
               Additional permissions required
             </div>
             {canEdit && (
@@ -457,7 +452,7 @@ function ConnectorCard({
                   })
                   setShowOAuthModal(true)
                 }}
-                className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+                className='w-full px-2 py-1 font-medium text-caption'
               >
                 Update access
               </Button>
@@ -467,7 +462,7 @@ function ConnectorCard({
       )}
 
       {expanded && (
-        <div className='border-[var(--border-1)] border-t px-[12px] py-[8px]'>
+        <div className='border-[var(--border-1)] border-t px-3 py-2'>
           <SyncHistory logs={syncLogs} isLoading={detailLoading} />
         </div>
       )}
@@ -498,7 +493,7 @@ interface SyncHistoryProps {
 function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
   if (isLoading) {
     return (
-      <div className='flex items-center gap-2 py-[4px] text-[11px] text-[var(--text-muted)]'>
+      <div className='flex items-center gap-2 py-1 text-[var(--text-muted)] text-xs'>
         <Loader2 className='h-3 w-3 animate-spin' />
         Loading sync history...
       </div>
@@ -506,11 +501,11 @@ function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
   }
 
   if (logs.length === 0) {
-    return <p className='py-[4px] text-[11px] text-[var(--text-muted)]'>No sync history yet.</p>
+    return <p className='py-1 text-[var(--text-muted)] text-xs'>No sync history yet.</p>
   }
 
   return (
-    <div className='flex flex-col gap-[6px]'>
+    <div className='flex flex-col gap-1.5'>
       {logs.map((log) => {
         const isError = log.status === 'error' || log.status === 'failed'
         const isRunning = log.status === 'running' || log.status === 'syncing'
@@ -518,7 +513,7 @@ function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
           log.docsAdded + log.docsUpdated + log.docsDeleted + (log.docsFailed ?? 0)
 
         return (
-          <div key={log.id} className='flex items-start gap-[8px] text-[11px]'>
+          <div key={log.id} className='flex items-start gap-2 text-xs'>
             <div className='mt-[1px] flex-shrink-0'>
               {isRunning ? (
                 <Loader2 className='h-3 w-3 animate-spin text-[var(--text-muted)]' />
@@ -530,7 +525,7 @@ function SyncHistory({ logs, isLoading }: SyncHistoryProps) {
             </div>
 
             <div className='flex min-w-0 flex-1 flex-col gap-[1px]'>
-              <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-1.5'>
                 <span className='text-[var(--text-muted)]'>
                   {format(new Date(log.startedAt), 'MMM d, h:mm a')}
                 </span>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
index 5ee8ab5cdca..c212edc1d36 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/edit-connector-modal/edit-connector-modal.tsx
@@ -196,15 +196,15 @@ function SettingsTab({
   error,
 }: SettingsTabProps) {
   return (
-    <div className='flex flex-col gap-[12px]'>
+    <div className='flex flex-col gap-3'>
       {connectorConfig?.configFields.map((field) => (
-        <div key={field.id} className='flex flex-col gap-[4px]'>
+        <div key={field.id} className='flex flex-col gap-1'>
           <Label>
             {field.title}
-            {field.required && <span className='ml-[2px] text-[var(--text-error)]'>*</span>}
+            {field.required && <span className='ml-0.5 text-[var(--text-error)]'>*</span>}
           </Label>
           {field.description && (
-            <p className='text-[11px] text-[var(--text-muted)]'>{field.description}</p>
+            <p className='text-[var(--text-muted)] text-xs'>{field.description}</p>
           )}
           {field.type === 'dropdown' && field.options ? (
             <Combobox
@@ -227,7 +227,7 @@ function SettingsTab({
         </div>
       ))}
 
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label>Sync Frequency</Label>
         <ButtonGroup
           value={String(syncInterval)}
@@ -241,7 +241,7 @@ function SettingsTab({
         </ButtonGroup>
       </div>
 
-      {error && <p className='text-[12px] text-[var(--text-error)] leading-tight'>{error}</p>}
+      {error && <p className='text-[var(--text-error)] text-caption leading-tight'>{error}</p>}
     </div>
   )
 }
@@ -270,7 +270,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
 
   if (isLoading) {
     return (
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-6 w-full' />
         <Skeleton className='h-6 w-full' />
         <Skeleton className='h-6 w-full' />
@@ -279,7 +279,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
   }
 
   return (
-    <div className='flex flex-col gap-[16px]'>
+    <div className='flex flex-col gap-4'>
       <ButtonGroup value={filter} onValueChange={(val) => setFilter(val as 'active' | 'excluded')}>
         <ButtonGroupItem value='active'>Active ({counts.active})</ButtonGroupItem>
         <ButtonGroupItem value='excluded'>Excluded ({counts.excluded})</ButtonGroupItem>
@@ -287,15 +287,15 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
 
       <div className='max-h-[320px] min-h-0 overflow-y-auto'>
         {documents.length === 0 ? (
-          <p className='py-[16px] text-center text-[13px] text-[var(--text-muted)]'>
+          <p className='py-4 text-center text-[var(--text-muted)] text-small'>
             {filter === 'excluded' ? 'No excluded documents' : 'No documents yet'}
           </p>
         ) : (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {documents.map((doc) => (
               <div key={doc.id} className='flex items-center justify-between'>
-                <div className='flex min-w-0 items-center gap-[6px]'>
-                  <span className='truncate text-[13px] text-[var(--text-primary)]'>
+                <div className='flex min-w-0 items-center gap-1.5'>
+                  <span className='truncate text-[var(--text-primary)] text-small'>
                     {doc.filename}
                   </span>
                   {doc.sourceUrl && (
@@ -303,7 +303,7 @@ function DocumentsTab({ knowledgeBaseId, connectorId }: DocumentsTabProps) {
                       href={doc.sourceUrl}
                       target='_blank'
                       rel='noopener noreferrer'
-                      className='flex-shrink-0 text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+                      className='flex-shrink-0 text-[var(--text-muted)] hover-hover:text-[var(--text-secondary)]'
                     >
                       <ExternalLink className='h-3 w-3' />
                     </a>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
index e701c171bb0..33144a19d23 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/rename-document-modal/rename-document-modal.tsx
@@ -80,9 +80,9 @@ export function RenameDocumentModal({
       <ModalContent size='sm'>
         <ModalHeader>Rename Document</ModalHeader>
         <form onSubmit={handleSubmit} className='flex min-h-0 flex-1 flex-col'>
-          <ModalBody className='!pb-[16px]'>
-            <div className='space-y-[12px]'>
-              <div className='flex flex-col gap-[8px]'>
+          <ModalBody className='!pb-4'>
+            <div className='space-y-3'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='document-name'>Name</Label>
                 <Input
                   id='document-name'
@@ -106,15 +106,15 @@ export function RenameDocumentModal({
             </div>
           </ModalBody>
           <ModalFooter>
-            <div className='flex w-full items-center justify-between gap-[12px]'>
+            <div className='flex w-full items-center justify-between gap-3'>
               {error ? (
-                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                   {error}
                 </p>
               ) : (
                 <div />
               )}
-              <div className='flex flex-shrink-0 gap-[8px]'>
+              <div className='flex flex-shrink-0 gap-2'>
                 <Button
                   variant='default'
                   onClick={() => onOpenChange(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx
index ad27d19a9a7..b926f0d4f5c 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/[id]/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 7
 export default function KnowledgeBaseLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
+      <div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[8px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -19,7 +19,7 @@ export default function KnowledgeBaseLoading() {
           </div>
         </div>
       </div>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -34,7 +34,7 @@ export default function KnowledgeBaseLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               <th className='w-[40px] px-[12px] py-[8px]'>
                 <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
               </th>
@@ -47,7 +47,7 @@ export default function KnowledgeBaseLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 <td className='w-[40px] px-[12px] py-[10px]'>
                   <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
                 </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
index a3ef57c6ee9..d956af406fa 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/base-card/base-card.tsx
@@ -29,26 +29,26 @@ interface BaseCardProps {
  */
 export function BaseCardSkeleton() {
   return (
-    <div className='group flex h-full cursor-pointer flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
-      <div className='flex items-center justify-between gap-[8px]'>
-        <div className='h-[17px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-        <div className='h-[22px] w-[90px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+    <div className='group flex h-full cursor-pointer flex-col gap-3 rounded-sm bg-[var(--surface-3)] px-2 py-1.5 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]'>
+      <div className='flex items-center justify-between gap-2'>
+        <div className='h-[17px] w-[120px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+        <div className='h-[22px] w-[90px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
       </div>
 
-      <div className='flex flex-1 flex-col gap-[8px]'>
+      <div className='flex flex-1 flex-col gap-2'>
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[6px]'>
-            <div className='h-[12px] w-[12px] animate-pulse rounded-[2px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-            <div className='h-[15px] w-[45px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+          <div className='flex items-center gap-1.5'>
+            <div className='h-[12px] w-[12px] animate-pulse rounded-xs bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+            <div className='h-[15px] w-[45px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           </div>
-          <div className='h-[15px] w-[120px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+          <div className='h-[15px] w-[120px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         </div>
 
         <div className='h-0 w-full border-[var(--divider)] border-t' />
 
-        <div className='flex h-[36px] flex-col gap-[6px]'>
-          <div className='h-[15px] w-full animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
-          <div className='h-[15px] w-[75%] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+        <div className='flex h-[36px] flex-col gap-1.5'>
+          <div className='h-[15px] w-full animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+          <div className='h-[15px] w-[75%] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         </div>
       </div>
     </div>
@@ -173,26 +173,24 @@ export function BaseCard({
         onContextMenu={handleContextMenu}
         data-kb-card
       >
-        <div className='group flex h-full flex-col gap-[12px] rounded-[4px] bg-[var(--surface-3)] px-[8px] py-[6px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]'>
-          <div className='flex items-center justify-between gap-[8px]'>
-            <h3 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+        <div className='group flex h-full flex-col gap-3 rounded-sm bg-[var(--surface-3)] px-2 py-1.5 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]'>
+          <div className='flex items-center justify-between gap-2'>
+            <h3 className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-sm'>
               {title}
             </h3>
-            {shortId && (
-              <Badge className='flex-shrink-0 rounded-[4px] text-[12px]'>{shortId}</Badge>
-            )}
+            {shortId && <Badge className='flex-shrink-0 rounded-sm text-caption'>{shortId}</Badge>}
           </div>
 
-          <div className='flex flex-1 flex-col gap-[8px]'>
+          <div className='flex flex-1 flex-col gap-2'>
             <div className='flex items-center justify-between'>
-              <span className='flex items-center gap-[6px] text-[12px] text-[var(--text-tertiary)]'>
+              <span className='flex items-center gap-1.5 text-[var(--text-tertiary)] text-caption'>
                 <DocumentAttachment className='h-[12px] w-[12px]' />
                 {docCount} {docCount === 1 ? 'doc' : 'docs'}
               </span>
               {updatedAt && (
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
-                    <span className='text-[12px] text-[var(--text-tertiary)]'>
+                    <span className='text-[var(--text-tertiary)] text-caption'>
                       last updated: {formatRelativeTime(updatedAt)}
                     </span>
                   </Tooltip.Trigger>
@@ -203,8 +201,8 @@ export function BaseCard({
 
             <div className='h-0 w-full border-[var(--divider)] border-t' />
 
-            <div className='flex items-start justify-between gap-[8px]'>
-              <p className='line-clamp-2 h-[36px] flex-1 text-[12px] text-[var(--text-tertiary)] leading-[18px]'>
+            <div className='flex items-start justify-between gap-2'>
+              <p className='line-clamp-2 h-[36px] flex-1 text-[var(--text-tertiary)] text-caption leading-[18px]'>
                 {description}
               </p>
               {connectorTypes.length > 0 && (
@@ -217,7 +215,7 @@ export function BaseCard({
                       <Tooltip.Root key={type}>
                         <Tooltip.Trigger asChild>
                           <div
-                            className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-5)]'
+                            className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--surface-5)]'
                             style={{ marginLeft: index > 0 ? '-4px' : '0' }}
                           >
                             <Icon className='h-[12px] w-[12px] text-[var(--text-secondary)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts b/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
index aa5b7618fe1..03fe178bdc7 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/constants.ts
@@ -1,8 +1,8 @@
 export const filterButtonClass =
-  'w-full justify-between rounded-[10px] border-[#E5E5E5] bg-[var(--white)] font-normal text-sm dark:border-[#414141] dark:bg-[var(--surface-2)]'
+  'w-full justify-between rounded-[10px] border-[var(--surface-6)] bg-[var(--white)] font-normal text-sm dark:border-[var(--border-muted)] dark:bg-[var(--surface-2)]'
 
 export const dropdownContentClass =
-  'w-[220px] rounded-lg border-[#E5E5E5] bg-[var(--white)] p-0 shadow-xs dark:border-[#414141] dark:bg-[var(--surface-2)]'
+  'w-[220px] rounded-lg border-[var(--surface-6)] bg-[var(--white)] p-0 shadow-xs dark:border-[var(--border-muted)] dark:bg-[var(--surface-2)]'
 
 export const commandListClass = 'overflow-y-auto overflow-x-hidden'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
index 8bf91682a91..1c8efc07948 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/create-base-modal/create-base-modal.tsx
@@ -309,8 +309,8 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
           <ModalBody>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-              <div className='space-y-[12px]'>
-                <div className='flex flex-col gap-[8px]'>
+              <div className='space-y-3'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='kb-name'>Name</Label>
                   {/* Hidden decoy fields to prevent browser autofill */}
                   <input
@@ -339,7 +339,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='description'>Description</Label>
                   <Textarea
                     id='description'
@@ -350,8 +350,8 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   />
                 </div>
 
-                <div className='grid grid-cols-2 gap-[12px]'>
-                  <div className='flex flex-col gap-[8px]'>
+                <div className='grid grid-cols-2 gap-3'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='minChunkSize'>Min Chunk Size (characters)</Label>
                     <Input
                       id='minChunkSize'
@@ -364,7 +364,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     />
                   </div>
 
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='maxChunkSize'>Max Chunk Size (tokens)</Label>
                     <Input
                       id='maxChunkSize'
@@ -378,7 +378,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                   </div>
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='overlapSize'>Overlap (tokens)</Label>
                   <Input
                     id='overlapSize'
@@ -389,12 +389,12 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     data-form-type='other'
                     name='overlap-size'
                   />
-                  <p className='text-[11px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-xs'>
                     1 token ≈ 4 characters. Max chunk size and overlap are in tokens.
                   </p>
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Upload Documents</Label>
                   <Button
                     type='button'
@@ -405,7 +405,7 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                     onDragLeave={handleDragLeave}
                     onDrop={handleDrop}
                     className={cn(
-                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                      '!bg-[var(--surface-1)] hover-hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-2.5',
                       isDragging && 'border-[var(--surface-7)]'
                     )}
                   >
@@ -417,11 +417,11 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                       className='hidden'
                       multiple
                     />
-                    <div className='flex flex-col gap-[2px] text-center'>
+                    <div className='flex flex-col gap-0.5 text-center'>
                       <span className='text-[var(--text-primary)]'>
                         {isDragging ? 'Drop files here' : 'Drop files here or click to browse'}
                       </span>
-                      <span className='text-[11px] text-[var(--text-tertiary)]'>
+                      <span className='text-[var(--text-tertiary)] text-xs'>
                         PDF, DOC, DOCX, TXT, CSV, XLS, XLSX, MD, PPT, PPTX, HTML (max 100MB each)
                       </span>
                     </div>
@@ -442,20 +442,20 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                           <div
                             key={index}
                             className={cn(
-                              'flex items-center gap-2 rounded-[4px] border p-[8px]',
+                              'flex items-center gap-2 rounded-sm border p-2',
                               isFailed && !isRetrying && 'border-[var(--text-error)]'
                             )}
                           >
                             <span
                               className={cn(
-                                'min-w-0 flex-1 truncate text-[12px]',
+                                'min-w-0 flex-1 truncate text-caption',
                                 isFailed && !isRetrying && 'text-[var(--text-error)]'
                               )}
                               title={file.name}
                             >
                               {file.name}
                             </span>
-                            <span className='flex-shrink-0 text-[11px] text-[var(--text-muted)]'>
+                            <span className='flex-shrink-0 text-[var(--text-muted)] text-xs'>
                               {formatFileSize(file.size)}
                             </span>
                             <div className='flex flex-shrink-0 items-center gap-1'>
@@ -497,22 +497,22 @@ export function CreateBaseModal({ open, onOpenChange }: CreateBaseModalProps) {
                 )}
 
                 {fileError && (
-                  <p className='text-[12px] text-[var(--text-error)] leading-tight'>{fileError}</p>
+                  <p className='text-[var(--text-error)] text-caption leading-tight'>{fileError}</p>
                 )}
               </div>
             </div>
           </ModalBody>
 
           <ModalFooter>
-            <div className='flex w-full items-center justify-between gap-[12px]'>
+            <div className='flex w-full items-center justify-between gap-3'>
               {submitStatus?.type === 'error' || uploadError ? (
-                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                   {uploadError?.message || submitStatus?.message}
                 </p>
               ) : (
                 <div />
               )}
-              <div className='flex flex-shrink-0 gap-[8px]'>
+              <div className='flex flex-shrink-0 gap-2'>
                 <Button
                   variant='default'
                   onClick={() => handleClose(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
index bf0699813c1..8dd48239719 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/edit-knowledge-base-modal/edit-knowledge-base-modal.tsx
@@ -103,8 +103,8 @@ export function EditKnowledgeBaseModal({
 
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
           <ModalBody>
-            <div className='space-y-[12px]'>
-              <div className='flex flex-col gap-[8px]'>
+            <div className='space-y-3'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='kb-name'>Name</Label>
                 <Input
                   id='kb-name'
@@ -118,11 +118,11 @@ export function EditKnowledgeBaseModal({
                   data-form-type='other'
                 />
                 {errors.name && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{errors.name.message}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{errors.name.message}</p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='description'>Description</Label>
                 <Textarea
                   id='description'
@@ -132,7 +132,7 @@ export function EditKnowledgeBaseModal({
                   className={cn(errors.description && 'border-[var(--text-error)]')}
                 />
                 {errors.description && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {errors.description.message}
                   </p>
                 )}
@@ -141,15 +141,15 @@ export function EditKnowledgeBaseModal({
           </ModalBody>
 
           <ModalFooter>
-            <div className='flex w-full items-center justify-between gap-[12px]'>
+            <div className='flex w-full items-center justify-between gap-3'>
               {error ? (
-                <p className='min-w-0 flex-1 truncate text-[12px] text-[var(--text-error)] leading-tight'>
+                <p className='min-w-0 flex-1 truncate text-[var(--text-error)] text-caption leading-tight'>
                   {error}
                 </p>
               ) : (
                 <div />
               )}
-              <div className='flex flex-shrink-0 gap-[8px]'>
+              <div className='flex flex-shrink-0 gap-2'>
                 <Button
                   variant='default'
                   onClick={() => onOpenChange(false)}
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
index df5bf237b97..c5880735309 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-header/knowledge-header.tsx
@@ -27,10 +27,10 @@ interface BreadcrumbItem {
 }
 
 const HEADER_STYLES = {
-  container: 'flex items-center justify-between px-6 pt-[14px] pb-6',
+  container: 'flex items-center justify-between px-6 pt-3.5 pb-6',
   breadcrumbs: 'flex items-center gap-2',
   icon: 'h-[18px] w-[18px] text-[var(--text-icon)] transition-colors',
-  link: 'group flex items-center gap-2 font-medium text-sm text-[var(--text-body)] transition-colors hover:text-[var(--text-secondary)]',
+  link: 'group flex items-center gap-2 font-medium text-sm text-[var(--text-body)] transition-colors hover-hover:text-[var(--text-secondary)]',
   label: 'font-medium text-sm text-[var(--text-body)]',
   separator: 'text-[var(--text-icon)]',
   actionsContainer: 'flex items-center gap-2',
diff --git a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx
index acb223d33a7..9011fcccca6 100644
--- a/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/knowledge/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
 export default function KnowledgeLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -18,7 +18,7 @@ export default function KnowledgeLoading() {
         </div>
       </div>
 
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center'>
           <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
           <Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
@@ -28,7 +28,7 @@ export default function KnowledgeLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               <th className='w-[40px] px-[12px] py-[8px]'>
                 <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
               </th>
@@ -41,7 +41,7 @@ export default function KnowledgeLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 <td className='w-[40px] px-[12px] py-[10px]'>
                   <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
                 </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/layout.tsx b/apps/sim/app/workspace/[workspaceId]/layout.tsx
index 5abbde90ab6..9aba238dc78 100644
--- a/apps/sim/app/workspace/[workspaceId]/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/layout.tsx
@@ -18,8 +18,8 @@ export default function WorkspaceLayout({ children }: { children: React.ReactNod
             <div className='shrink-0' suppressHydrationWarning>
               <Sidebar />
             </div>
-            <div className='flex min-w-0 flex-1 flex-col p-[8px] pl-0'>
-              <div className='flex-1 overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)]'>
+            <div className='flex min-w-0 flex-1 flex-col p-2 pl-0'>
+              <div className='flex-1 overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)]'>
                 {children}
               </div>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
index 24a80a8f803..ccdc7ede82a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/line-chart/line-chart.tsx
@@ -269,7 +269,7 @@ function LineChartComponent({
                     type='button'
                     aria-pressed={activeSeriesId === s.id}
                     aria-label={`Toggle ${s.label}`}
-                    className='inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-[10px]'
+                    className='inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-micro'
                     style={{
                       color: resolvedColors[s.id || ''] || s.color,
                       opacity: dimmed ? 0.4 : isHovered ? 1 : 0.9,
@@ -290,7 +290,7 @@ function LineChartComponent({
                   >
                     <span
                       aria-hidden='true'
-                      className='inline-block h-[6px] w-[6px] rounded-[2px]'
+                      className='inline-block h-[6px] w-[6px] rounded-xs'
                       style={{ backgroundColor: resolvedColors[s.id || ''] || s.color }}
                     />
                     <span style={{ color: 'hsl(var(--muted-foreground))' }}>{s.label}</span>
@@ -671,11 +671,11 @@ function LineChartComponent({
             const top = Math.min(Math.max(anchorY - 26, padding.top), height - padding.bottom - 18)
             return (
               <div
-                className='pointer-events-none absolute rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] font-medium text-[11px] shadow-lg'
+                className='pointer-events-none absolute rounded-lg border border-[var(--border-1)] bg-[var(--surface-1)] px-2 py-1.5 font-medium text-xs shadow-lg'
                 style={{ left, top }}
               >
                 {currentHoverDate && (
-                  <div className='mb-1 text-[10px] text-[var(--text-tertiary)]'>
+                  <div className='mb-1 text-[var(--text-tertiary)] text-micro'>
                     {currentHoverDate}
                   </div>
                 )}
@@ -686,9 +686,9 @@ function LineChartComponent({
                   const showLabel =
                     seriesLabel && seriesLabel !== 'base' && seriesLabel.trim() !== ''
                   return (
-                    <div key={`tt-${s.id}`} className='flex items-center gap-[8px]'>
+                    <div key={`tt-${s.id}`} className='flex items-center gap-2'>
                       <span
-                        className='inline-block h-[6px] w-[6px] rounded-[2px]'
+                        className='inline-block h-[6px] w-[6px] rounded-xs'
                         style={{ backgroundColor: resolvedColors[s.id || ''] || s.color }}
                       />
                       {showLabel && (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
index 568d4179c2d..afdf2867d5d 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/status-bar/status-bar.tsx
@@ -48,7 +48,7 @@ function StatusBarInner({
   return (
     <div className='relative'>
       <div
-        className='flex select-none items-stretch gap-[2px]'
+        className='flex select-none items-stretch gap-0.5'
         onMouseLeave={() => setHoverIndex(null)}
       >
         {segments.map((segment, i) => {
@@ -60,16 +60,16 @@ function StatusBarInner({
           let hoverBrightness: string
           if (!segment.hasExecutions) {
             color = 'bg-gray-300/60 dark:bg-gray-500/40'
-            hoverBrightness = 'hover:brightness-200'
+            hoverBrightness = 'hover-hover:brightness-200'
           } else if (segment.successRate === 100) {
             color = 'bg-emerald-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover-hover:brightness-106'
           } else if (segment.successRate >= 95) {
             color = 'bg-amber-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover-hover:brightness-106'
           } else {
             color = 'bg-red-400/90'
-            hoverBrightness = 'hover:brightness-106'
+            hoverBrightness = 'hover-hover:brightness-106'
           }
 
           return (
@@ -97,7 +97,7 @@ function StatusBarInner({
 
       {hoverIndex !== null && segments[hoverIndex] && (
         <div
-          className={`-translate-x-1/2 pointer-events-none absolute z-20 w-max whitespace-nowrap rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] text-center text-[11px] shadow-lg ${
+          className={`-translate-x-1/2 pointer-events-none absolute z-20 w-max whitespace-nowrap rounded-lg border border-[var(--border-1)] bg-[var(--surface-1)] px-2 py-1.5 text-center text-xs shadow-lg ${
             preferBelow ? '' : '-translate-y-full'
           }`}
           style={{
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
index 1da98f6bcf3..81af719f7f3 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/components/workflows-list/workflows-list.tsx
@@ -39,15 +39,15 @@ function WorkflowsListInner({
   const { workflows } = useWorkflowRegistry()
 
   return (
-    <div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
+    <div className='flex h-full flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
       {/* Table header */}
-      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
-        <div className='flex items-center gap-[16px]'>
-          <span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
+        <div className='flex items-center gap-4'>
+          <span className='w-[160px] flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
             Workflow
           </span>
-          <span className='flex-1 font-medium text-[12px] text-[var(--text-tertiary)]'>Logs</span>
-          <span className='w-[100px] flex-shrink-0 pl-[16px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <span className='flex-1 font-medium text-[var(--text-tertiary)] text-caption'>Logs</span>
+          <span className='w-[100px] flex-shrink-0 pl-4 font-medium text-[var(--text-tertiary)] text-caption'>
             Success Rate
           </span>
         </div>
@@ -56,8 +56,8 @@ function WorkflowsListInner({
       {/* Table body - scrollable */}
       <div className='min-h-0 flex-1 overflow-y-auto overflow-x-hidden'>
         {filteredExecutions.length === 0 ? (
-          <div className='flex items-center justify-center py-[32px]'>
-            <span className='text-[13px] text-[var(--text-secondary)]'>
+          <div className='flex items-center justify-center py-8'>
+            <span className='text-[var(--text-secondary)] text-small'>
               {searchQuery ? `No workflows found matching "${searchQuery}"` : 'No workflows found'}
             </span>
           </div>
@@ -75,7 +75,7 @@ function WorkflowsListInner({
                 <div
                   key={workflow.workflowId}
                   className={cn(
-                    'flex h-[44px] items-center gap-[16px] px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
+                    'flex h-[44px] items-center gap-4 px-6 hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-4)]',
                     canToggle ? 'cursor-pointer' : 'cursor-default',
                     isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
                   )}
@@ -86,7 +86,7 @@ function WorkflowsListInner({
                   }}
                 >
                   {/* Workflow name with color */}
-                  <div className='flex w-[160px] flex-shrink-0 items-center gap-[8px] pr-[8px]'>
+                  <div className='flex w-[160px] flex-shrink-0 items-center gap-2 pr-2'>
                     <div
                       className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
                       style={{
@@ -95,7 +95,7 @@ function WorkflowsListInner({
                         backgroundClip: 'padding-box',
                       }}
                     />
-                    <span className='min-w-0 truncate font-medium text-[12px] text-[var(--text-primary)]'>
+                    <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
                       {workflow.workflowName}
                     </span>
                   </div>
@@ -113,7 +113,7 @@ function WorkflowsListInner({
                   </div>
 
                   {/* Success rate */}
-                  <span className='w-[100px] flex-shrink-0 pl-[16px] font-medium text-[12px] text-[var(--text-primary)]'>
+                  <span className='w-[100px] flex-shrink-0 pl-4 font-medium text-[var(--text-primary)] text-caption'>
                     {workflow.overallSuccessRate.toFixed(1)}%
                   </span>
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
index 686952a2fe5..60289d8ec01 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/dashboard/dashboard.tsx
@@ -32,16 +32,16 @@ const SKELETON_BAR_HEIGHTS = [
 
 function GraphCardSkeleton({ title }: { title: string }) {
   return (
-    <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-      <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+    <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+      <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
         <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
           {title}
         </span>
         <Skeleton className='h-[20px] w-[40px]' />
       </div>
-      <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
-        <div className='flex h-[166px] flex-col justify-end gap-[4px]'>
-          <div className='flex items-end gap-[2px]'>
+      <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
+        <div className='flex h-[166px] flex-col justify-end gap-1'>
+          <div className='flex items-end gap-0.5'>
             {SKELETON_BAR_HEIGHTS.map((height, i) => (
               <Skeleton
                 key={i}
@@ -60,15 +60,15 @@ function GraphCardSkeleton({ title }: { title: string }) {
 
 function WorkflowRowSkeleton() {
   return (
-    <div className='flex h-[44px] items-center gap-[16px] px-[24px]'>
-      <div className='flex w-[160px] flex-shrink-0 items-center gap-[8px] pr-[8px]'>
+    <div className='flex h-[44px] items-center gap-4 px-6'>
+      <div className='flex w-[160px] flex-shrink-0 items-center gap-2 pr-2'>
         <Skeleton className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px]' />
         <Skeleton className='h-[16px] flex-1' />
       </div>
       <div className='flex-1'>
-        <Skeleton className='h-[24px] w-full rounded-[4px]' />
+        <Skeleton className='h-[24px] w-full rounded-sm' />
       </div>
-      <div className='w-[100px] flex-shrink-0 pl-[16px]'>
+      <div className='w-[100px] flex-shrink-0 pl-4'>
         <Skeleton className='h-[16px] w-[50px]' />
       </div>
     </div>
@@ -77,14 +77,14 @@ function WorkflowRowSkeleton() {
 
 function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
   return (
-    <div className='flex h-full flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
-      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-[24px] py-[10px] dark:bg-[var(--surface-3)]'>
-        <div className='flex items-center gap-[16px]'>
-          <span className='w-[160px] flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+    <div className='flex h-full flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-1)]'>
+      <div className='flex-shrink-0 rounded-t-[6px] bg-[var(--surface-3)] px-6 py-2.5 dark:bg-[var(--surface-3)]'>
+        <div className='flex items-center gap-4'>
+          <span className='w-[160px] flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
             Workflow
           </span>
-          <span className='flex-1 font-medium text-[12px] text-[var(--text-tertiary)]'>Logs</span>
-          <span className='w-[100px] flex-shrink-0 pl-[16px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <span className='flex-1 font-medium text-[var(--text-tertiary)] text-caption'>Logs</span>
+          <span className='w-[100px] flex-shrink-0 pl-4 font-medium text-[var(--text-tertiary)] text-caption'>
             Success Rate
           </span>
         </div>
@@ -100,9 +100,9 @@ function WorkflowsListSkeleton({ rowCount = 5 }: { rowCount?: number }) {
 
 function DashboardSkeleton() {
   return (
-    <div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'>
-      <div className='mb-[16px] flex-shrink-0'>
-        <div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'>
+    <div className='mt-6 flex min-h-0 flex-1 flex-col pb-6'>
+      <div className='mb-4 flex-shrink-0'>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
           <GraphCardSkeleton title='Runs' />
           <GraphCardSkeleton title='Errors' />
           <GraphCardSkeleton title='Latency' />
@@ -442,10 +442,10 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
 
   if (error) {
     return (
-      <div className='mt-[24px] flex flex-1 items-center justify-center'>
+      <div className='mt-6 flex flex-1 items-center justify-center'>
         <div className='text-[var(--text-error)]'>
-          <p className='font-medium text-[13px]'>Error loading data</p>
-          <p className='text-[12px]'>{error.message}</p>
+          <p className='font-medium text-small'>Error loading data</p>
+          <p className='text-caption'>{error.message}</p>
         </div>
       </div>
     )
@@ -453,23 +453,21 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
 
   if (Object.keys(allWorkflows).length === 0) {
     return (
-      <div className='mt-[24px] flex flex-1 items-center justify-center'>
+      <div className='mt-6 flex flex-1 items-center justify-center'>
         <div className='text-center text-[var(--text-secondary)]'>
-          <p className='font-medium text-[13px]'>No workflows</p>
-          <p className='mt-[4px] text-[12px]'>
-            Create a workflow to see its execution history here
-          </p>
+          <p className='font-medium text-small'>No workflows</p>
+          <p className='mt-1 text-caption'>Create a workflow to see its execution history here</p>
         </div>
       </div>
     )
   }
 
   return (
-    <div className='mt-[24px] flex min-h-0 flex-1 flex-col pb-[24px]'>
-      <div className='mb-[16px] flex-shrink-0'>
-        <div className='grid grid-cols-1 gap-[16px] md:grid-cols-3'>
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-            <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+    <div className='mt-6 flex min-h-0 flex-1 flex-col pb-6'>
+      <div className='mb-4 flex-shrink-0'>
+        <div className='grid grid-cols-1 gap-4 md:grid-cols-3'>
+          <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+            <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Runs
               </span>
@@ -479,7 +477,7 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.executionCounts}
@@ -495,8 +493,8 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
             </div>
           </div>
 
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-            <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+          <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+            <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Errors
               </span>
@@ -506,7 +504,7 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.failureCounts}
@@ -522,8 +520,8 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
             </div>
           </div>
 
-          <div className='flex flex-col overflow-hidden rounded-[6px] bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
-            <div className='flex min-w-0 items-center justify-between gap-[8px] bg-[var(--surface-3)] px-[16px] py-[9px] dark:bg-[var(--surface-3)]'>
+          <div className='flex flex-col overflow-hidden rounded-md bg-[var(--surface-2)] dark:bg-[var(--surface-2)]'>
+            <div className='flex min-w-0 items-center justify-between gap-2 bg-[var(--surface-3)] px-4 py-[9px] dark:bg-[var(--surface-3)]'>
               <span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-sm'>
                 Latency
               </span>
@@ -533,12 +531,12 @@ function DashboardInner({ stats, isLoading, error }: DashboardProps) {
                 </span>
               )}
             </div>
-            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-[14px] py-[10px] dark:bg-[var(--surface-1)]'>
+            <div className='flex-1 overflow-y-auto rounded-t-[6px] bg-[var(--surface-2)] px-3.5 py-2.5 dark:bg-[var(--surface-1)]'>
               {globalDetails ? (
                 <LineChart
                   data={globalDetails.latencies}
                   label=''
-                  color='var(--c-F59E0B)'
+                  color='var(--amber)'
                   unit='latency'
                 />
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
index 0f4010f82eb..293adba19ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/execution-snapshot/execution-snapshot.tsx
@@ -92,9 +92,9 @@ export function ExecutionSnapshot({
           className={cn('flex items-center justify-center', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+          <div className='flex items-center gap-2 text-[var(--text-secondary)]'>
             <Loader2 className='h-[16px] w-[16px] animate-spin' />
-            <span className='text-[13px]'>Loading execution snapshot...</span>
+            <span className='text-small'>Loading execution snapshot...</span>
           </div>
         </div>
       )
@@ -106,9 +106,9 @@ export function ExecutionSnapshot({
           className={cn('flex items-center justify-center', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[8px] text-[var(--text-error)]'>
+          <div className='flex items-center gap-2 text-[var(--text-error)]'>
             <AlertCircle className='h-[16px] w-[16px]' />
-            <span className='text-[13px]'>Failed to load execution snapshot: {error.message}</span>
+            <span className='text-small'>Failed to load execution snapshot: {error.message}</span>
           </div>
         </div>
       )
@@ -120,9 +120,9 @@ export function ExecutionSnapshot({
           className={cn('flex items-center justify-center', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+          <div className='flex items-center gap-2 text-[var(--text-secondary)]'>
             <Loader2 className='h-[16px] w-[16px] animate-spin' />
-            <span className='text-[13px]'>Loading execution snapshot...</span>
+            <span className='text-small'>Loading execution snapshot...</span>
           </div>
         </div>
       )
@@ -131,18 +131,20 @@ export function ExecutionSnapshot({
     if (isMigratedWorkflowState(workflowState)) {
       return (
         <div
-          className={cn('flex flex-col items-center justify-center gap-[16px] p-[32px]', className)}
+          className={cn('flex flex-col items-center justify-center gap-4 p-8', className)}
           style={{ height, width }}
         >
-          <div className='flex items-center gap-[12px] text-[var(--text-warning)]'>
+          <div className='flex items-center gap-3 text-[var(--text-warning)]'>
             <AlertCircle className='h-[20px] w-[20px]' />
-            <span className='font-medium text-[15px]'>Logged State Not Found</span>
+            <span className='font-medium text-base'>Logged State Not Found</span>
           </div>
-          <div className='max-w-md text-center text-[13px] text-[var(--text-secondary)]'>
+          <div className='max-w-md text-center text-[var(--text-secondary)] text-small'>
             This log was migrated from the old logging system. The workflow state at execution time
             is not available.
           </div>
-          <div className='text-[12px] text-[var(--text-tertiary)]'>Note: {workflowState._note}</div>
+          <div className='text-[var(--text-tertiary)] text-caption'>
+            Note: {workflowState._note}
+          </div>
         </div>
       )
     }
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
index 5985a00c038..dd538f5087a 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
@@ -99,28 +99,28 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
   }
 
   return (
-    <div className='flex flex-col gap-[4px] rounded-[6px] bg-[var(--surface-1)] px-[8px] py-[6px]'>
-      <div className='flex min-w-0 items-center justify-between gap-[8px]'>
-        <span className='min-w-0 flex-1 truncate font-medium text-[12px] text-[var(--text-secondary)]'>
+    <div className='flex flex-col gap-1 rounded-md bg-[var(--surface-1)] px-2 py-1.5'>
+      <div className='flex min-w-0 items-center justify-between gap-2'>
+        <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-secondary)] text-caption'>
           {file.name}
         </span>
-        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+        <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
           {formatFileSize(file.size)}
         </span>
       </div>
 
       <div className='flex items-center justify-between'>
-        <span className='font-medium text-[11px] text-[var(--text-subtle)]'>{file.type}</span>
+        <span className='font-medium text-[var(--text-subtle)] text-xs'>{file.type}</span>
         <Button
           variant='ghost'
-          className='!h-[20px] !px-[6px] !py-0 text-[11px]'
+          className='!h-[20px] !px-1.5 !py-0 text-xs'
           onClick={handleDownload}
           disabled={isDownloading}
         >
           {isDownloading ? (
-            <Loader2 className='mr-[4px] h-[10px] w-[10px] animate-spin' />
+            <Loader2 className='mr-1 h-[10px] w-[10px] animate-spin' />
           ) : (
-            <ArrowDown className='mr-[4px] h-[10px] w-[10px]' />
+            <ArrowDown className='mr-1 h-[10px] w-[10px]' />
           )}
           {isDownloading ? 'Opening...' : 'Download'}
         </Button>
@@ -135,8 +135,8 @@ export function FileCards({ files, isExecutionFile = false, workspaceId }: FileC
   }
 
   return (
-    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
-      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+    <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
+      <span className='font-medium text-[var(--text-tertiary)] text-caption'>
         Files ({files.length})
       </span>
       {files.map((file, index) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
index c2d29dc5fdf..509654c294b 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/trace-spans/trace-spans.tsx
@@ -295,7 +295,7 @@ function InputOutputSection({
   }, [activateSearch, closeContextMenu])
 
   return (
-    <div className='relative flex min-w-0 flex-col gap-[6px] overflow-hidden'>
+    <div className='relative flex min-w-0 flex-col gap-1.5 overflow-hidden'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => onToggle(sectionKey)}
@@ -312,7 +312,7 @@ function InputOutputSection({
       >
         <span
           className={cn(
-            'font-medium text-[12px] transition-colors',
+            'font-medium text-caption transition-colors',
             isError
               ? 'text-[var(--text-error)]'
               : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
@@ -333,7 +333,7 @@ function InputOutputSection({
             <Code.Viewer
               code={jsonString}
               language='json'
-              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+              className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
               wrapText
               searchQuery={isSearchActive ? searchQuery : undefined}
               currentMatchIndex={currentMatchIndex}
@@ -341,7 +341,7 @@ function InputOutputSection({
             />
             {/* Glass action buttons overlay */}
             {!isSearchActive && (
-              <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+              <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Button
@@ -351,7 +351,7 @@ function InputOutputSection({
                         e.stopPropagation()
                         handleCopy()
                       }}
-                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                     >
                       {copied ? (
                         <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -371,7 +371,7 @@ function InputOutputSection({
                         e.stopPropagation()
                         activateSearch()
                       }}
-                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                      className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                     >
                       <Search className='h-[10px] w-[10px]' />
                     </Button>
@@ -385,7 +385,7 @@ function InputOutputSection({
           {/* Search Overlay */}
           {isSearchActive && (
             <div
-              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+              className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
               onClick={(e) => e.stopPropagation()}
             >
               <Input
@@ -394,11 +394,11 @@ function InputOutputSection({
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 placeholder='Search...'
-                className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+                className='mr-0.5 h-[23px] w-[94px] text-caption'
               />
               <span
                 className={cn(
-                  'min-w-[45px] text-center text-[11px]',
+                  'min-w-[45px] text-center text-xs',
                   matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
                 )}
               >
@@ -581,7 +581,7 @@ const TraceSpanNode = memo(function TraceSpanNode({
       {/* Node Header Row */}
       <div
         className={cn(
-          'group flex items-center justify-between gap-[8px] py-[6px]',
+          'group flex items-center justify-between gap-2 py-1.5',
           isToggleable && 'cursor-pointer'
         )}
         onClick={isToggleable ? () => onToggleNode(spanId) : undefined}
@@ -600,17 +600,17 @@ const TraceSpanNode = memo(function TraceSpanNode({
         aria-expanded={isToggleable ? isExpanded : undefined}
         aria-label={isToggleable ? (isExpanded ? 'Collapse' : 'Expand') : undefined}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           {!isIterationType(span.type) && (
             <div
-              className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+              className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
               style={{ background: bgColor }}
             >
               {BlockIcon && <BlockIcon className='h-[9px] w-[9px] text-white' />}
             </div>
           )}
           <span
-            className='min-w-0 max-w-[180px] truncate font-medium text-[12px]'
+            className='min-w-0 max-w-[180px] truncate font-medium text-caption'
             style={{ color: showErrorStyle ? 'var(--text-error)' : 'var(--text-secondary)' }}
           >
             {span.name}
@@ -624,14 +624,14 @@ const TraceSpanNode = memo(function TraceSpanNode({
             />
           )}
         </div>
-        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+        <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
           {formatDuration(duration, { precision: 2 })}
         </span>
       </div>
 
       {/* Expanded Content */}
       {isExpanded && (
-        <div className='flex min-w-0 flex-col gap-[10px]'>
+        <div className='flex min-w-0 flex-col gap-2.5'>
           {/* Progress Bar */}
           <ProgressBar
             span={span}
@@ -642,7 +642,7 @@ const TraceSpanNode = memo(function TraceSpanNode({
 
           {/* Input/Output Sections */}
           {(hasInput || hasOutput) && (
-            <div className='flex min-w-0 flex-col gap-[6px] overflow-hidden py-[2px]'>
+            <div className='flex min-w-0 flex-col gap-1.5 overflow-hidden py-0.5'>
               {hasInput && (
                 <InputOutputSection
                   label='Input'
@@ -675,9 +675,9 @@ const TraceSpanNode = memo(function TraceSpanNode({
 
           {/* Nested Children */}
           {hasChildren && (
-            <div className='flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[10px]'>
+            <div className='flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-2.5'>
               {filteredChildren.map((child, index) => (
-                <div key={child.id || `${spanId}-child-${index}`} className='pl-[6px]'>
+                <div key={child.id || `${spanId}-child-${index}`} className='pl-1.5'>
                   <TraceSpanNode
                     span={child}
                     workflowStartTime={workflowStartTime}
@@ -740,7 +740,7 @@ export const TraceSpans = memo(function TraceSpans({ traceSpans }: TraceSpansPro
   )
 
   if (!traceSpans || traceSpans.length === 0) {
-    return <div className='text-[12px] text-[var(--text-secondary)]'>No trace data available</div>
+    return <div className='text-[var(--text-secondary)] text-caption'>No trace data available</div>
   }
 
   return (
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
index 240918d389f..352dbaa5ddd 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/log-details.tsx
@@ -105,7 +105,7 @@ const WorkflowOutputSection = memo(
           <Code.Viewer
             code={jsonString}
             language='json'
-            className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+            className='!bg-[var(--surface-4)] dark:!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
             wrapText
             searchQuery={isSearchActive ? searchQuery : undefined}
             currentMatchIndex={currentMatchIndex}
@@ -113,7 +113,7 @@ const WorkflowOutputSection = memo(
           />
           {/* Glass action buttons overlay */}
           {!isSearchActive && (
-            <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+            <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Button
@@ -123,7 +123,7 @@ const WorkflowOutputSection = memo(
                       e.stopPropagation()
                       handleCopy()
                     }}
-                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                   >
                     {copied ? (
                       <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -143,7 +143,7 @@ const WorkflowOutputSection = memo(
                       e.stopPropagation()
                       activateSearch()
                     }}
-                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                    className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                   >
                     <Search className='h-[10px] w-[10px]' />
                   </Button>
@@ -157,7 +157,7 @@ const WorkflowOutputSection = memo(
         {/* Search Overlay */}
         {isSearchActive && (
           <div
-            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+            className='absolute top-0 right-0 z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
             onClick={(e) => e.stopPropagation()}
           >
             <Input
@@ -166,11 +166,11 @@ const WorkflowOutputSection = memo(
               value={searchQuery}
               onChange={(e) => setSearchQuery(e.target.value)}
               placeholder='Search...'
-              className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+              className='mr-0.5 h-[23px] w-[94px] text-caption'
             />
             <span
               className={cn(
-                'min-w-[45px] text-center text-[11px]',
+                'min-w-[45px] text-center text-xs',
                 matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
               )}
             >
@@ -365,14 +365,14 @@ export const LogDetails = memo(function LogDetails({
         aria-label='Log details sidebar'
       >
         {log && (
-          <div className='flex h-full flex-col px-[14px] pt-[12px]'>
+          <div className='flex h-full flex-col px-3.5 pt-3'>
             {/* Header */}
             <div className='flex items-center justify-between'>
-              <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Log Details</h2>
+              <h2 className='font-medium text-[var(--text-primary)] text-sm'>Log Details</h2>
               <div className='flex items-center gap-[1px]'>
                 <Button
                   variant='ghost'
-                  className='!p-[4px]'
+                  className='!p-1'
                   onClick={() => hasPrev && onNavigatePrev?.()}
                   disabled={!hasPrev}
                   aria-label='Previous log'
@@ -381,45 +381,45 @@ export const LogDetails = memo(function LogDetails({
                 </Button>
                 <Button
                   variant='ghost'
-                  className='!p-[4px]'
+                  className='!p-1'
                   onClick={() => hasNext && onNavigateNext?.()}
                   disabled={!hasNext}
                   aria-label='Next log'
                 >
                   <ChevronUp className='h-[14px] w-[14px] rotate-180' />
                 </Button>
-                <Button variant='ghost' className='!p-[4px]' onClick={onClose} aria-label='Close'>
+                <Button variant='ghost' className='!p-1' onClick={onClose} aria-label='Close'>
                   <X className='h-[14px] w-[14px]' />
                 </Button>
               </div>
             </div>
 
             {/* Content - Scrollable */}
-            <div className='mt-[20px] h-full w-full overflow-y-auto' ref={scrollAreaRef}>
-              <div className='flex flex-col gap-[10px] pb-[16px]'>
+            <div className='mt-5 h-full w-full overflow-y-auto' ref={scrollAreaRef}>
+              <div className='flex flex-col gap-2.5 pb-4'>
                 {/* Timestamp & Workflow Row */}
-                <div className='flex min-w-0 items-center gap-[16px] px-[1px]'>
+                <div className='flex min-w-0 items-center gap-4 px-[1px]'>
                   {/* Timestamp Card */}
-                  <div className='flex w-[140px] flex-shrink-0 flex-col gap-[8px]'>
-                    <div className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex w-[140px] flex-shrink-0 flex-col gap-2'>
+                    <div className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Timestamp
                     </div>
-                    <div className='flex items-center gap-[6px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex items-center gap-1.5'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         {formattedTimestamp?.compactDate || 'N/A'}
                       </span>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         {formattedTimestamp?.compactTime || 'N/A'}
                       </span>
                     </div>
                   </div>
 
                   {/* Workflow Card */}
-                  <div className='flex w-0 min-w-0 flex-1 flex-col gap-[8px]'>
-                    <div className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex w-0 min-w-0 flex-1 flex-col gap-2'>
+                    <div className='font-medium text-[var(--text-tertiary)] text-caption'>
                       {log.trigger === 'mothership' ? 'Job' : 'Workflow'}
                     </div>
-                    <div className='flex min-w-0 items-center gap-[8px]'>
+                    <div className='flex min-w-0 items-center gap-2'>
                       {(() => {
                         const c =
                           log.trigger === 'mothership'
@@ -437,7 +437,7 @@ export const LogDetails = memo(function LogDetails({
                           />
                         )
                       })()}
-                      <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-secondary)]'>
+                      <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-secondary)] text-sm'>
                         {log.trigger === 'mothership'
                           ? log.jobTitle || 'Untitled Job'
                           : log.workflow?.name ||
@@ -449,35 +449,35 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Execution ID */}
                 {log.executionId && (
-                  <div className='flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Execution ID
                     </span>
-                    <span className='truncate font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <span className='truncate font-medium text-[var(--text-secondary)] text-sm'>
                       {log.executionId}
                     </span>
                   </div>
                 )}
 
                 {/* Details Section */}
-                <div className='-my-[4px] flex min-w-0 flex-col overflow-hidden'>
+                <div className='-my-1 flex min-w-0 flex-col overflow-hidden'>
                   {/* Level */}
-                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-[8px]'>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-2'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Level
                     </span>
                     <StatusBadge status={logStatus} />
                   </div>
 
                   {/* Trigger */}
-                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-[8px]'>
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex h-[48px] items-center justify-between border-[var(--border)] border-b p-2'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Trigger
                     </span>
                     {log.trigger ? (
                       <TriggerBadge trigger={log.trigger} />
                     ) : (
-                      <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                      <span className='font-medium text-[var(--text-secondary)] text-caption'>
                         —
                       </span>
                     )}
@@ -485,24 +485,24 @@ export const LogDetails = memo(function LogDetails({
 
                   {/* Duration */}
                   <div
-                    className={`flex h-[48px] items-center justify-between border-b p-[8px] ${log.deploymentVersion ? 'border-[var(--border)]' : 'border-transparent'}`}
+                    className={`flex h-[48px] items-center justify-between border-b p-2 ${log.deploymentVersion ? 'border-[var(--border)]' : 'border-transparent'}`}
                   >
-                    <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                       Duration
                     </span>
-                    <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+                    <span className='font-medium text-[var(--text-secondary)] text-small'>
                       {formatDuration(log.duration, { precision: 2 }) || '—'}
                     </span>
                   </div>
 
                   {/* Version */}
                   {log.deploymentVersion && (
-                    <div className='flex h-[48px] items-center gap-[8px] p-[8px]'>
-                      <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <div className='flex h-[48px] items-center gap-2 p-2'>
+                      <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
                         Version
                       </span>
                       <div className='flex w-0 flex-1 justify-end'>
-                        <span className='max-w-full truncate rounded-[6px] bg-[#bbf7d0] px-[9px] py-[2px] font-medium text-[#15803d] text-[12px] dark:bg-[#14291B] dark:text-[#86EFAC]'>
+                        <span className='max-w-full truncate rounded-md bg-[#bbf7d0] px-[9px] py-0.5 font-medium text-[#15803d] text-caption dark:bg-[#14291B] dark:text-[#86EFAC]'>
                           {log.deploymentVersionName || `v${log.deploymentVersion}`}
                         </span>
                       </div>
@@ -515,16 +515,16 @@ export const LogDetails = memo(function LogDetails({
                   log.executionId &&
                   log.trigger !== 'mothership' &&
                   !permissionConfig.hideTraceSpans && (
-                    <div className='-mt-[8px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px]'>
-                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <div className='-mt-2 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2'>
+                      <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                         Workflow State
                       </span>
                       <Button
                         variant='active'
                         onClick={() => setIsExecutionSnapshotOpen(true)}
-                        className='flex w-full items-center justify-between px-[10px] py-[6px]'
+                        className='flex w-full items-center justify-between px-2.5 py-1.5'
                       >
-                        <span className='font-medium text-[12px]'>View Snapshot</span>
+                        <span className='font-medium text-caption'>View Snapshot</span>
                         <Eye className='h-[14px] w-[14px]' />
                       </Button>
                     </div>
@@ -532,10 +532,10 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Workflow Output */}
                 {isWorkflowExecutionLog && workflowOutput && !permissionConfig.hideTraceSpans && (
-                  <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
+                  <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
                     <span
                       className={cn(
-                        'font-medium text-[12px]',
+                        'font-medium text-caption',
                         workflowOutput.error
                           ? 'text-[var(--text-error)]'
                           : 'text-[var(--text-tertiary)]'
@@ -551,8 +551,8 @@ export const LogDetails = memo(function LogDetails({
                 {isWorkflowExecutionLog &&
                   log.executionData?.traceSpans &&
                   !permissionConfig.hideTraceSpans && (
-                    <div className='mt-[4px] flex flex-col gap-[6px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] py-[8px] dark:bg-transparent'>
-                      <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                    <div className='mt-1 flex flex-col gap-1.5 rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 py-2 dark:bg-transparent'>
+                      <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                         Trace Span
                       </span>
                       <TraceSpans traceSpans={log.executionData.traceSpans} />
@@ -566,34 +566,34 @@ export const LogDetails = memo(function LogDetails({
 
                 {/* Cost Breakdown */}
                 {hasCostInfo && (
-                  <div className='flex flex-col gap-[8px]'>
-                    <span className='px-[1px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <div className='flex flex-col gap-2'>
+                    <span className='px-[1px] font-medium text-[var(--text-tertiary)] text-caption'>
                       Cost Breakdown
                     </span>
 
-                    <div className='flex flex-col gap-[4px] rounded-[6px] border border-[var(--border)]'>
-                      <div className='flex flex-col gap-[10px] rounded-[6px] p-[10px]'>
+                    <div className='flex flex-col gap-1 rounded-md border border-[var(--border)]'>
+                      <div className='flex flex-col gap-2.5 rounded-md p-2.5'>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Base Execution:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(BASE_EXECUTION_CHARGE)}
                           </span>
                         </div>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Model Input:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(log.cost?.input || 0)}
                           </span>
                         </div>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Model Output:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(log.cost?.output || 0)}
                           </span>
                         </div>
@@ -601,20 +601,20 @@ export const LogDetails = memo(function LogDetails({
 
                       <div className='border-[var(--border)] border-t' />
 
-                      <div className='flex flex-col gap-[10px] rounded-[6px] p-[10px]'>
+                      <div className='flex flex-col gap-2.5 rounded-md p-2.5'>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Total:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {formatCost(log.cost?.total || 0)}
                           </span>
                         </div>
                         <div className='flex items-center justify-between'>
-                          <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                             Tokens:
                           </span>
-                          <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                          <span className='font-medium text-[var(--text-secondary)] text-caption'>
                             {log.cost?.tokens?.input || log.cost?.tokens?.prompt || 0} in /{' '}
                             {log.cost?.tokens?.output || log.cost?.tokens?.completion || 0} out
                           </span>
@@ -622,8 +622,8 @@ export const LogDetails = memo(function LogDetails({
                       </div>
                     </div>
 
-                    <div className='flex items-center justify-center rounded-[6px] bg-[var(--surface-2)] p-[8px] text-center'>
-                      <p className='font-medium text-[11px] text-[var(--text-subtle)]'>
+                    <div className='flex items-center justify-center rounded-md bg-[var(--surface-2)] p-2 text-center'>
+                      <p className='font-medium text-[var(--text-subtle)] text-xs'>
                         Total cost includes a base execution charge of{' '}
                         {formatCost(BASE_EXECUTION_CHARGE)} plus any model usage costs.
                       </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
index 955c6ee8788..c99a59988fa 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-list/logs-list.tsx
@@ -75,7 +75,7 @@ const LogRow = memo(
       <div
         ref={isSelected ? selectedRowRef : null}
         className={cn(
-          'relative flex h-[44px] cursor-pointer items-center px-[24px] hover:bg-[var(--surface-3)] dark:hover:bg-[var(--surface-4)]',
+          'relative flex h-[44px] cursor-pointer items-center px-6 hover-hover:bg-[var(--surface-3)] dark:hover-hover:bg-[var(--surface-4)]',
           isSelected && 'bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'
         )}
         onClick={handleClick}
@@ -84,7 +84,7 @@ const LogRow = memo(
       >
         <div className='flex flex-1 items-center'>
           <div
-            className={`flex ${LOG_COLUMNS.workflow.width} ${LOG_COLUMNS.workflow.minWidth} items-center gap-[8px] pr-[8px]`}
+            className={`flex ${LOG_COLUMNS.workflow.width} ${LOG_COLUMNS.workflow.minWidth} items-center gap-2 pr-2`}
           >
             <div
               className='h-[10px] w-[10px] flex-shrink-0 rounded-[3px] border-[1.5px]'
@@ -96,7 +96,7 @@ const LogRow = memo(
             />
             <span
               className={cn(
-                'min-w-0 truncate font-medium text-[12px]',
+                'min-w-0 truncate font-medium text-caption',
                 isDeletedWorkflow ? 'text-[var(--text-tertiary)]' : 'text-[var(--text-primary)]'
               )}
             >
@@ -105,7 +105,7 @@ const LogRow = memo(
           </div>
 
           <span
-            className={`${LOG_COLUMNS.date.width} ${LOG_COLUMNS.date.minWidth} font-medium text-[12px] text-[var(--text-primary)]`}
+            className={`${LOG_COLUMNS.date.width} ${LOG_COLUMNS.date.minWidth} font-medium text-[var(--text-primary)] text-caption`}
           >
             {formattedDate.compactDate} {formattedDate.compactTime}
           </span>
@@ -115,7 +115,7 @@ const LogRow = memo(
           </div>
 
           <span
-            className={`${LOG_COLUMNS.cost.width} ${LOG_COLUMNS.cost.minWidth} font-medium text-[12px] text-[var(--text-primary)]`}
+            className={`${LOG_COLUMNS.cost.width} ${LOG_COLUMNS.cost.minWidth} font-medium text-[var(--text-primary)] text-caption`}
           >
             {typeof log.cost?.total === 'number'
               ? `${dollarsToCredits(log.cost.total).toLocaleString()} credits`
@@ -126,12 +126,12 @@ const LogRow = memo(
             {log.trigger ? (
               <TriggerBadge trigger={log.trigger} />
             ) : (
-              <span className='font-medium text-[12px] text-[var(--text-primary)]'>—</span>
+              <span className='font-medium text-[var(--text-primary)] text-caption'>—</span>
             )}
           </div>
 
           <div className={`${LOG_COLUMNS.duration.width} ${LOG_COLUMNS.duration.minWidth}`}>
-            <Badge variant='default' className='rounded-[6px] px-[9px] py-[2px] text-[12px]'>
+            <Badge variant='default' className='rounded-md px-[9px] py-0.5 text-caption'>
               {formatDuration(log.duration, { precision: 2 }) || '—'}
             </Badge>
           </div>
@@ -145,7 +145,7 @@ const LogRow = memo(
             rel='noopener noreferrer'
             className={cn(
               buttonVariants({ variant: 'active' }),
-              'absolute right-[24px] h-[26px] w-[26px] rounded-[6px] p-0'
+              'absolute right-[24px] h-[26px] w-[26px] rounded-md p-0'
             )}
             aria-label='Open resume console'
             onClick={(e) => e.stopPropagation()}
@@ -197,14 +197,14 @@ function Row({
   if (index >= logs.length) {
     return (
       <div style={style} className='flex items-center justify-center'>
-        <div ref={loaderRef} className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+        <div ref={loaderRef} className='flex items-center gap-2 text-[var(--text-secondary)]'>
           {isFetchingNextPage ? (
             <>
               <Loader2 className='h-[16px] w-[16px] animate-spin' />
-              <span className='text-[13px]'>Loading more...</span>
+              <span className='text-small'>Loading more...</span>
             </>
           ) : (
-            <span className='text-[13px]'>Scroll to load more</span>
+            <span className='text-small'>Scroll to load more</span>
           )}
         </div>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
index de9903c7cea..8b7c706d64e 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/slack-channel-selector/slack-channel-selector.tsx
@@ -85,7 +85,7 @@ export function SlackChannelSelector({
   }
 
   return (
-    <div className='flex flex-col gap-[4px]'>
+    <div className='flex flex-col gap-1'>
       <Combobox
         options={options}
         value={value}
@@ -104,11 +104,11 @@ export function SlackChannelSelector({
         searchPlaceholder='Search channels...'
       />
       {selectedChannel && !fetchError && (
-        <p className='text-[12px] text-[var(--text-muted)]'>
+        <p className='text-[var(--text-muted)] text-caption'>
           {selectedChannel.isPrivate ? 'Private' : 'Public'} channel: #{selectedChannel.name}
         </p>
       )}
-      {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
+      {error && <p className='text-[var(--text-error)] text-caption'>{error}</p>}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
index 807a061e882..02c3173bd83 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/components/workflow-selector/workflow-selector.tsx
@@ -79,12 +79,12 @@ export function WorkflowSelector({
     }
 
     return (
-      <div className='flex items-center gap-[4px] overflow-hidden'>
+      <div className='flex items-center gap-1 overflow-hidden'>
         {selectedWorkflows.slice(0, 2).map((w) => (
           <Badge
             key={w.id}
             variant='outline'
-            className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px]'
+            className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs'
             onMouseDown={(e) => handleRemove(e, w.id)}
           >
             {w.name}
@@ -92,7 +92,7 @@ export function WorkflowSelector({
           </Badge>
         ))}
         {selectedWorkflows.length > 2 && (
-          <Badge variant='outline' className='rounded-[6px] px-[8px] py-[2px] text-[11px]'>
+          <Badge variant='outline' className='rounded-md px-2 py-0.5 text-xs'>
             +{selectedWorkflows.length - 2}
           </Badge>
         )}
@@ -102,15 +102,15 @@ export function WorkflowSelector({
 
   if (isLoading) {
     return (
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Label>Workflows</Label>
-        <Skeleton className='h-[34px] w-full rounded-[6px]' />
+        <Skeleton className='h-[34px] w-full rounded-md' />
       </div>
     )
   }
 
   return (
-    <div className='flex flex-col gap-[8px]'>
+    <div className='flex flex-col gap-2'>
       <Label>Workflows</Label>
       <Combobox
         options={options}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
index 4a8d8ccd917..277b202a5a9 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/notifications/notifications.tsx
@@ -551,34 +551,34 @@ export const NotificationSettings = memo(function NotificationSettings({
           : `#${subscription.slackConfig?.channelName || subscription.slackConfig?.channelId}`
 
     return (
-      <div key={subscription.id} className='rounded-[6px] border p-[10px]'>
-        <div className='flex items-center justify-between gap-[12px]'>
-          <div className='flex min-w-0 flex-1 flex-col gap-[6px]'>
-            <p className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+      <div key={subscription.id} className='rounded-md border p-2.5'>
+        <div className='flex items-center justify-between gap-3'>
+          <div className='flex min-w-0 flex-1 flex-col gap-1.5'>
+            <p className='truncate font-medium text-[var(--text-primary)] text-small'>
               {identifier}
             </p>
-            <div className='flex flex-wrap items-center gap-[6px] text-[11px]'>
+            <div className='flex flex-wrap items-center gap-1.5 text-xs'>
               {subscription.allWorkflows ? (
-                <Badge className='rounded-[4px] px-[6px] py-[2px] text-[11px]'>All workflows</Badge>
+                <Badge className='rounded-sm px-1.5 py-0.5 text-xs'>All workflows</Badge>
               ) : (
-                <Badge className='rounded-[4px] px-[6px] py-[2px] text-[11px]'>
+                <Badge className='rounded-sm px-1.5 py-0.5 text-xs'>
                   {subscription.workflowIds.length} workflow(s)
                 </Badge>
               )}
               {subscription.levelFilter.map((level) => (
-                <Badge key={level} className='rounded-[4px] px-[6px] py-[2px] text-[11px]'>
+                <Badge key={level} className='rounded-sm px-1.5 py-0.5 text-xs'>
                   {level}
                 </Badge>
               ))}
               {subscription.alertConfig && (
-                <Badge className='rounded-[4px] bg-amber-100 px-[6px] py-[2px] text-[11px] text-amber-800 dark:bg-amber-900/30 dark:text-amber-400'>
+                <Badge className='rounded-sm bg-amber-100 px-1.5 py-0.5 text-amber-800 text-xs dark:bg-amber-900/30 dark:text-amber-400'>
                   {formatAlertConfigLabel(subscription.alertConfig)}
                 </Badge>
               )}
             </div>
           </div>
 
-          <div className='flex flex-shrink-0 items-center gap-[8px]'>
+          <div className='flex flex-shrink-0 items-center gap-2'>
             <Button
               variant='primary'
               onClick={() => handleTest(subscription.id)}
@@ -609,13 +609,13 @@ export const NotificationSettings = memo(function NotificationSettings({
   }
 
   const renderForm = () => (
-    <div className='flex h-full flex-col gap-[16px]'>
+    <div className='flex h-full flex-col gap-4'>
       <div className='min-h-0 flex-1 overflow-y-auto'>
         {formErrors.general && (
-          <p className='mb-[16px] text-[12px] text-[var(--text-error)]'>{formErrors.general}</p>
+          <p className='mb-4 text-[var(--text-error)] text-caption'>{formErrors.general}</p>
         )}
 
-        <div className='flex flex-col gap-[16px]'>
+        <div className='flex flex-col gap-4'>
           <WorkflowSelector
             workspaceId={workspaceId}
             selectedIds={formData.workflowIds}
@@ -629,7 +629,7 @@ export const NotificationSettings = memo(function NotificationSettings({
 
           {activeTab === 'webhook' && (
             <>
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Webhook URL</Label>
                 <EmcnInput
                   type='url'
@@ -642,10 +642,10 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }}
                 />
                 {formErrors.webhookUrl && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.webhookUrl}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.webhookUrl}</p>
                 )}
               </div>
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Secret (optional)</Label>
                 <EmcnInput
                   type='password'
@@ -659,7 +659,7 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {activeTab === 'email' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Email Recipients</Label>
               <TagInput
                 items={emailItems}
@@ -669,17 +669,19 @@ export const NotificationSettings = memo(function NotificationSettings({
                 placeholderWithTags='Add email'
               />
               {formErrors.emailRecipients && (
-                <p className='text-[12px] text-[var(--text-error)]'>{formErrors.emailRecipients}</p>
+                <p className='text-[var(--text-error)] text-caption'>
+                  {formErrors.emailRecipients}
+                </p>
               )}
             </div>
           )}
 
           {activeTab === 'slack' && (
             <>
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label>Slack Account</Label>
                 {isLoadingSlackAccounts ? (
-                  <Skeleton className='h-[34px] w-full rounded-[6px]' />
+                  <Skeleton className='h-[34px] w-full rounded-md' />
                 ) : slackAccounts.length === 0 ? (
                   <div className='flex'>
                     <Button
@@ -691,7 +693,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                         })
                       }}
                       disabled={connectSlack.isPending}
-                      className='flex items-center gap-[8px]'
+                      className='flex items-center gap-2'
                     >
                       <SlackIcon className='h-[11px] w-[11px]' />
                       {connectSlack.isPending ? 'Connecting...' : 'Connect Slack'}
@@ -716,13 +718,13 @@ export const NotificationSettings = memo(function NotificationSettings({
                   />
                 )}
                 {formErrors.slackAccountId && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.slackAccountId}
                   </p>
                 )}
               </div>
               {slackAccounts.length > 0 && (
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Channel</Label>
                   <SlackChannelSelector
                     accountId={formData.slackAccountId}
@@ -743,7 +745,7 @@ export const NotificationSettings = memo(function NotificationSettings({
             </>
           )}
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Log Level Filters</Label>
             <Combobox
               options={LOG_LEVELS.map((level) => ({
@@ -759,12 +761,12 @@ export const NotificationSettings = memo(function NotificationSettings({
               placeholder='Select log levels...'
               overlayContent={
                 formData.levelFilter.length > 0 ? (
-                  <div className='flex items-center gap-[4px]'>
+                  <div className='flex items-center gap-1'>
                     {formData.levelFilter.map((level) => (
                       <Badge
                         key={level}
                         variant='outline'
-                        className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px] capitalize'
+                        className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs capitalize'
                         onMouseDown={(e) => {
                           e.preventDefault()
                           e.stopPropagation()
@@ -785,11 +787,11 @@ export const NotificationSettings = memo(function NotificationSettings({
               allOptionLabel='All levels'
             />
             {formErrors.levelFilter && (
-              <p className='text-[12px] text-[var(--text-error)]'>{formErrors.levelFilter}</p>
+              <p className='text-[var(--text-error)] text-caption'>{formErrors.levelFilter}</p>
             )}
           </div>
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Trigger Type Filters</Label>
             <Combobox
               options={TRIGGER_OPTIONS.map((t) => ({
@@ -805,12 +807,12 @@ export const NotificationSettings = memo(function NotificationSettings({
               placeholder='Select trigger types...'
               overlayContent={
                 formData.triggerFilter.length > 0 ? (
-                  <div className='flex items-center gap-[4px] overflow-hidden'>
+                  <div className='flex items-center gap-1 overflow-hidden'>
                     {formData.triggerFilter.slice(0, 6).map((trigger) => (
                       <Badge
                         key={trigger}
                         variant='outline'
-                        className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px] capitalize'
+                        className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs capitalize'
                         onMouseDown={(e) => {
                           e.preventDefault()
                           e.stopPropagation()
@@ -825,10 +827,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                       </Badge>
                     ))}
                     {formData.triggerFilter.length > 6 && (
-                      <Badge
-                        variant='outline'
-                        className='rounded-[6px] px-[8px] py-[2px] text-[11px]'
-                      >
+                      <Badge variant='outline' className='rounded-md px-2 py-0.5 text-xs'>
                         +{formData.triggerFilter.length - 6}
                       </Badge>
                     )}
@@ -839,11 +838,11 @@ export const NotificationSettings = memo(function NotificationSettings({
               allOptionLabel='All triggers'
             />
             {formErrors.triggerFilter && (
-              <p className='text-[12px] text-[var(--text-error)]'>{formErrors.triggerFilter}</p>
+              <p className='text-[var(--text-error)] text-caption'>{formErrors.triggerFilter}</p>
             )}
           </div>
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Include in Payload</Label>
             <Combobox
               options={[
@@ -891,12 +890,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                 if (selected.length === 0) return null
 
                 return (
-                  <div className='flex items-center gap-[4px] overflow-hidden'>
+                  <div className='flex items-center gap-1 overflow-hidden'>
                     {selected.slice(0, 2).map((key) => (
                       <Badge
                         key={key}
                         variant='outline'
-                        className='pointer-events-auto cursor-pointer gap-[4px] rounded-[6px] px-[8px] py-[2px] text-[11px]'
+                        className='pointer-events-auto cursor-pointer gap-1 rounded-md px-2 py-0.5 text-xs'
                         onMouseDown={(e) => {
                           e.preventDefault()
                           e.stopPropagation()
@@ -908,10 +907,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                       </Badge>
                     ))}
                     {selected.length > 2 && (
-                      <Badge
-                        variant='outline'
-                        className='rounded-[6px] px-[8px] py-[2px] text-[11px]'
-                      >
+                      <Badge variant='outline' className='rounded-md px-2 py-0.5 text-xs'>
                         +{selected.length - 2}
                       </Badge>
                     )}
@@ -923,7 +919,7 @@ export const NotificationSettings = memo(function NotificationSettings({
             />
           </div>
 
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Label>Rule</Label>
             <Combobox
               options={ALERT_RULES.map((rule) => ({
@@ -934,13 +930,13 @@ export const NotificationSettings = memo(function NotificationSettings({
               onChange={(value) => setFormData({ ...formData, alertRule: value as AlertRule })}
               placeholder='Select rule'
             />
-            <p className='text-[12px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-caption'>
               {ALERT_RULES.find((r) => r.value === formData.alertRule)?.description}
             </p>
           </div>
 
           {formData.alertRule === 'consecutive_failures' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Failure Count</Label>
               <EmcnInput
                 type='number'
@@ -955,7 +951,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.consecutiveFailures && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {formErrors.consecutiveFailures}
                 </p>
               )}
@@ -963,8 +959,8 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {formData.alertRule === 'failure_rate' && (
-            <div className='flex gap-[8px]'>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+            <div className='flex gap-2'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Failure Rate (%)</Label>
                 <EmcnInput
                   type='number'
@@ -979,12 +975,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.failureRatePercent && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.failureRatePercent}
                   </p>
                 )}
               </div>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Window (hours)</Label>
                 <EmcnInput
                   type='number'
@@ -999,14 +995,14 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.windowHours && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.windowHours}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
                 )}
               </div>
             </div>
           )}
 
           {formData.alertRule === 'latency_threshold' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Duration Threshold (seconds)</Label>
               <EmcnInput
                 type='number'
@@ -1021,7 +1017,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.durationThresholdMs && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {formErrors.durationThresholdMs}
                 </p>
               )}
@@ -1029,8 +1025,8 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {formData.alertRule === 'latency_spike' && (
-            <div className='flex gap-[8px]'>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+            <div className='flex gap-2'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Above Average (%)</Label>
                 <EmcnInput
                   type='number'
@@ -1045,12 +1041,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.latencySpikePercent && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.latencySpikePercent}
                   </p>
                 )}
               </div>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Window (hours)</Label>
                 <EmcnInput
                   type='number'
@@ -1065,14 +1061,14 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.windowHours && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.windowHours}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
                 )}
               </div>
             </div>
           )}
 
           {formData.alertRule === 'cost_threshold' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Cost Threshold ($)</Label>
               <EmcnInput
                 type='number'
@@ -1088,7 +1084,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.costThresholdDollars && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {formErrors.costThresholdDollars}
                 </p>
               )}
@@ -1096,7 +1092,7 @@ export const NotificationSettings = memo(function NotificationSettings({
           )}
 
           {formData.alertRule === 'no_activity' && (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Label>Inactivity Period (hours)</Label>
               <EmcnInput
                 type='number'
@@ -1111,14 +1107,16 @@ export const NotificationSettings = memo(function NotificationSettings({
                 }
               />
               {formErrors.inactivityHours && (
-                <p className='text-[12px] text-[var(--text-error)]'>{formErrors.inactivityHours}</p>
+                <p className='text-[var(--text-error)] text-caption'>
+                  {formErrors.inactivityHours}
+                </p>
               )}
             </div>
           )}
 
           {formData.alertRule === 'error_count' && (
-            <div className='flex gap-[8px]'>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+            <div className='flex gap-2'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Error Count</Label>
                 <EmcnInput
                   type='number'
@@ -1133,12 +1131,12 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.errorCountThreshold && (
-                  <p className='text-[12px] text-[var(--text-error)]'>
+                  <p className='text-[var(--text-error)] text-caption'>
                     {formErrors.errorCountThreshold}
                   </p>
                 )}
               </div>
-              <div className='flex flex-1 flex-col gap-[8px]'>
+              <div className='flex flex-1 flex-col gap-2'>
                 <Label>Window (hours)</Label>
                 <EmcnInput
                   type='number'
@@ -1153,7 +1151,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                   }
                 />
                 {formErrors.windowHours && (
-                  <p className='text-[12px] text-[var(--text-error)]'>{formErrors.windowHours}</p>
+                  <p className='text-[var(--text-error)] text-caption'>{formErrors.windowHours}</p>
                 )}
               </div>
             </div>
@@ -1169,19 +1167,19 @@ export const NotificationSettings = memo(function NotificationSettings({
     }
 
     return (
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-4'>
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {isLoading ? (
-            <div className='flex flex-col gap-[16px]'>
+            <div className='flex flex-col gap-4'>
               {[120, 80, 100, 90].map((labelWidth, i) => (
-                <div key={i} className='flex flex-col gap-[8px]'>
-                  <Skeleton className='h-[14px] rounded-[4px]' style={{ width: labelWidth }} />
-                  <Skeleton className='h-[34px] w-full rounded-[6px]' />
+                <div key={i} className='flex flex-col gap-2'>
+                  <Skeleton className='h-[14px] rounded-sm' style={{ width: labelWidth }} />
+                  <Skeleton className='h-[34px] w-full rounded-md' />
                 </div>
               ))}
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredSubscriptions.map(renderSubscriptionItem)}
             </div>
           )}
@@ -1257,7 +1255,7 @@ export const NotificationSettings = memo(function NotificationSettings({
                 variant='primary'
                 disabled={isLoading}
               >
-                <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                <Plus className='mr-1.5 h-[13px] w-[13px]' />
                 Add
               </Button>
             )}
@@ -1269,7 +1267,7 @@ export const NotificationSettings = memo(function NotificationSettings({
         <ModalContent size='sm'>
           <ModalHeader>Delete Notification</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-caption'>
               This will permanently remove the notification and stop all deliveries.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
index fb1f69e02a0..cb8b795276b 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/components/search/search.tsx
@@ -165,12 +165,12 @@ export function AutocompleteSearch({
         modal={false}
       >
         <DropdownMenuPrimitive.Trigger asChild>
-          <div className='relative flex h-[32px] w-[400px] items-center rounded-[8px] bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'>
+          <div className='relative flex h-[32px] w-[400px] items-center rounded-lg bg-[var(--surface-3)] dark:bg-[var(--surface-4)]'>
             {/* Search Icon */}
-            <Search className='mr-[6px] ml-[8px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' />
+            <Search className='mr-1.5 ml-2 h-[14px] w-[14px] flex-shrink-0 text-[var(--text-subtle)]' />
 
             {/* Scrollable container for badges */}
-            <div className='flex flex-1 items-center gap-[6px] overflow-x-auto pr-[6px] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
+            <div className='flex flex-1 items-center gap-1.5 overflow-x-auto pr-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden'>
               {/* Applied Filter Badges */}
               {appliedFilters.map((filter, index) => (
                 <Badge
@@ -179,7 +179,7 @@ export function AutocompleteSearch({
                   role='button'
                   tabIndex={0}
                   className={cn(
-                    'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]',
+                    'h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-xs',
                     highlightedBadgeIndex === index &&
                       'ring-1 ring-[var(--border-focus)] ring-offset-1 ring-offset-[var(--surface-3)] dark:ring-offset-[var(--surface-5)]'
                   )}
@@ -206,7 +206,7 @@ export function AutocompleteSearch({
                   variant='outline'
                   role='button'
                   tabIndex={0}
-                  className='h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-[11px]'
+                  className='h-6 shrink-0 cursor-pointer whitespace-nowrap rounded-md px-2 text-xs'
                   onClick={() => handleFiltersChange(appliedFilters, '')}
                   onKeyDown={(e) => {
                     if (e.key === 'Enter' || e.key === ' ') {
@@ -240,7 +240,7 @@ export function AutocompleteSearch({
             {(hasFilters || hasTextSearch) && (
               <button
                 type='button'
-                className='mr-[8px] ml-[6px] flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover:text-[var(--text-secondary)]'
+                className='mr-2 ml-1.5 flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center text-[var(--text-subtle)] transition-colors hover-hover:text-[var(--text-secondary)]'
                 onClick={clearAll}
               >
                 <X className='h-[14px] w-[14px]' />
@@ -253,7 +253,7 @@ export function AutocompleteSearch({
         <DropdownMenuPrimitive.Portal>
           <DropdownMenuPrimitive.Content
             ref={dropdownRef}
-            className='z-50 rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+            className='z-50 rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
             style={{ width: dropdownWidth }}
             align='start'
             sideOffset={4}
@@ -268,8 +268,8 @@ export function AutocompleteSearch({
                       key={suggestions[0].id}
                       data-index={0}
                       className={cn(
-                        'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                        'hover:bg-[var(--surface-5)]',
+                        'w-full rounded-md px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
+                        'hover-hover:bg-[var(--surface-5)]',
                         highlightedIndex === 0 && 'bg-[var(--surface-5)]'
                       )}
                       onMouseEnter={() => setHighlightedIndex(0)}
@@ -278,13 +278,13 @@ export function AutocompleteSearch({
                         handleSuggestionSelect(suggestions[0])
                       }}
                     >
-                      <div className='text-[13px]'>{suggestions[0].label}</div>
+                      <div className='text-small'>{suggestions[0].label}</div>
                     </button>
                   )}
 
                   {sections.map((section) => (
                     <div key={section.title}>
-                      <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                      <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                         {section.title}
                       </div>
                       {section.suggestions.map((suggestion) => {
@@ -298,8 +298,8 @@ export function AutocompleteSearch({
                             key={suggestion.id}
                             data-index={index}
                             className={cn(
-                              'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                              'hover:bg-[var(--surface-5)]',
+                              'w-full rounded-md px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
+                              'hover-hover:bg-[var(--surface-5)]',
                               isHighlighted && 'bg-[var(--surface-5)]'
                             )}
                             onMouseEnter={() => setHighlightedIndex(index)}
@@ -309,11 +309,11 @@ export function AutocompleteSearch({
                             }}
                           >
                             <div className='flex items-center justify-between gap-3'>
-                              <div className='min-w-0 flex-1 truncate text-[13px]'>
+                              <div className='min-w-0 flex-1 truncate text-small'>
                                 {suggestion.label}
                               </div>
                               {suggestion.value !== suggestion.label && (
-                                <div className='shrink-0 font-mono text-[11px] text-[var(--text-muted)]'>
+                                <div className='shrink-0 font-mono text-[var(--text-muted)] text-xs'>
                                   {suggestion.category === 'workflow' ||
                                   suggestion.category === 'folder'
                                     ? `${suggestion.category}:`
@@ -331,7 +331,7 @@ export function AutocompleteSearch({
                 // Single section layout
                 <div className='py-1'>
                   {suggestionType === 'filters' && (
-                    <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                    <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                       SUGGESTED FILTERS
                     </div>
                   )}
@@ -341,8 +341,8 @@ export function AutocompleteSearch({
                       key={suggestion.id}
                       data-index={index}
                       className={cn(
-                        'w-full rounded-[6px] px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
-                        'hover:bg-[var(--surface-5)]',
+                        'w-full rounded-md px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-[var(--border-focus)]',
+                        'hover-hover:bg-[var(--surface-5)]',
                         index === highlightedIndex && 'bg-[var(--surface-5)]'
                       )}
                       onMouseEnter={() => setHighlightedIndex(index)}
@@ -352,9 +352,9 @@ export function AutocompleteSearch({
                       }}
                     >
                       <div className='flex items-center justify-between gap-3'>
-                        <div className='min-w-0 flex-1 text-[13px]'>{suggestion.label}</div>
+                        <div className='min-w-0 flex-1 text-small'>{suggestion.label}</div>
                         {suggestion.description && (
-                          <div className='shrink-0 text-[11px] text-[var(--text-muted)]'>
+                          <div className='shrink-0 text-[var(--text-muted)] text-xs'>
                             {suggestion.value}
                           </div>
                         )}
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
index ff6dcdfbd51..5046ac607b0 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/logs-toolbar/logs-toolbar.tsx
@@ -377,17 +377,17 @@ export const LogsToolbar = memo(function LogsToolbar({
     <div className='flex flex-col gap-[19px]'>
       {/* Header Section */}
       <div className='flex items-start justify-between'>
-        <div className='flex items-start gap-[12px]'>
-          <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#D4A843] bg-[#FDF6E3] dark:border-[#7A5F11] dark:bg-[#514215]'>
+        <div className='flex items-start gap-3'>
+          <div className='flex h-[26px] w-[26px] items-center justify-center rounded-md border border-[#D4A843] bg-[#FDF6E3] dark:border-[#7A5F11] dark:bg-[#514215]'>
             <Library className='h-[14px] w-[14px] text-[#D4A843] dark:text-[#FBBC04]' />
           </div>
-          <h1 className='font-medium text-[18px]'>Logs</h1>
+          <h1 className='font-medium text-lg'>Logs</h1>
         </div>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           {/* More options menu */}
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button variant='default' className='h-[32px] w-[32px] rounded-[6px] p-0'>
+              <Button variant='default' className='h-[32px] w-[32px] rounded-md p-0'>
                 <MoreHorizontal className='h-[14px] w-[14px]' />
                 <span className='sr-only'>More options</span>
               </Button>
@@ -407,7 +407,7 @@ export const LogsToolbar = memo(function LogsToolbar({
           {/* Refresh button */}
           <Button
             variant='default'
-            className='h-[32px] rounded-[6px] px-[10px]'
+            className='h-[32px] rounded-md px-2.5'
             onClick={isRefreshing ? undefined : onRefresh}
             disabled={isRefreshing}
           >
@@ -423,7 +423,7 @@ export const LogsToolbar = memo(function LogsToolbar({
             variant={isLive ? 'tertiary' : 'default'}
             onClick={onToggleLive}
             className={cn(
-              'h-[32px] rounded-[6px] px-[10px]',
+              'h-[32px] rounded-md px-2.5',
               isLive && 'border border-[var(--brand-tertiary-2)]'
             )}
           >
@@ -432,13 +432,13 @@ export const LogsToolbar = memo(function LogsToolbar({
 
           {/* View mode toggle */}
           <div
-            className='flex h-[32px] cursor-pointer items-center rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] p-[2px]'
+            className='flex h-[32px] cursor-pointer items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] p-0.5'
             onClick={() => onViewModeChange(isDashboardView ? 'logs' : 'dashboard')}
           >
             <Button
               variant={!isDashboardView ? 'active' : 'ghost'}
               className={cn(
-                'h-[26px] rounded-[4px] px-[10px]',
+                'h-[26px] rounded-sm px-2.5',
                 isDashboardView && 'border border-transparent'
               )}
             >
@@ -447,7 +447,7 @@ export const LogsToolbar = memo(function LogsToolbar({
             <Button
               variant={isDashboardView ? 'active' : 'ghost'}
               className={cn(
-                'h-[26px] rounded-[4px] px-[10px]',
+                'h-[26px] rounded-sm px-2.5',
                 !isDashboardView && 'border border-transparent'
               )}
             >
@@ -458,7 +458,7 @@ export const LogsToolbar = memo(function LogsToolbar({
       </div>
 
       {/* Filter Bar Section */}
-      <div className='flex w-full items-center gap-[12px]'>
+      <div className='flex w-full items-center gap-3'>
         <div className='min-w-[200px] max-w-[400px] flex-1'>
           <AutocompleteSearch
             value={searchQuery}
@@ -467,13 +467,13 @@ export const LogsToolbar = memo(function LogsToolbar({
             onOpenChange={onSearchOpenChange}
           />
         </div>
-        <div className='ml-auto flex items-center gap-[8px]'>
+        <div className='ml-auto flex items-center gap-2'>
           {/* Clear Filters Button */}
           {filtersActive && (
             <Button
               variant='active'
               onClick={handleClearFilters}
-              className='h-[32px] rounded-[6px] px-[10px]'
+              className='h-[32px] rounded-md px-2.5'
             >
               <span>Clear</span>
             </Button>
@@ -482,18 +482,15 @@ export const LogsToolbar = memo(function LogsToolbar({
           {/* Filters dropdown - Small screens only */}
           <DropdownMenu modal={false}>
             <DropdownMenuTrigger asChild>
-              <Button
-                variant='active'
-                className='h-[32px] gap-[6px] rounded-[6px] px-[10px] xl:hidden'
-              >
+              <Button variant='active' className='h-[32px] gap-1.5 rounded-md px-2.5 xl:hidden'>
                 <span>Filters</span>
               </Button>
             </DropdownMenuTrigger>
-            <DropdownMenuContent align='end' sideOffset={4} className='w-[280px] p-[12px]'>
-              <div className='flex flex-col gap-[12px]'>
+            <DropdownMenuContent align='end' sideOffset={4} className='w-[280px] p-3'>
+              <div className='flex flex-col gap-3'>
                 {/* Status Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Status
                   </span>
                   <Combobox
@@ -503,7 +500,7 @@ export const LogsToolbar = memo(function LogsToolbar({
                     onMultiSelectChange={handleStatusChange}
                     placeholder='All statuses'
                     overlayContent={
-                      <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                      <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                         {selectedStatusColor && (
                           <div
                             className='flex-shrink-0 rounded-[3px]'
@@ -516,13 +513,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All statuses'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Workflow Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Workflow
                   </span>
                   <Combobox
@@ -532,10 +529,10 @@ export const LogsToolbar = memo(function LogsToolbar({
                     onMultiSelectChange={setWorkflowIds}
                     placeholder='All workflows'
                     overlayContent={
-                      <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                      <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                         {selectedWorkflow && (
                           <div
-                            className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                            className='h-[8px] w-[8px] flex-shrink-0 rounded-xs border-[1.5px]'
                             style={{
                               backgroundColor: selectedWorkflow.color,
                               borderColor: `${selectedWorkflow.color}60`,
@@ -551,13 +548,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All workflows'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Folder Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Folder
                   </span>
                   <Combobox
@@ -576,13 +573,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All folders'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Trigger Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Trigger
                   </span>
                   <Combobox
@@ -601,13 +598,13 @@ export const LogsToolbar = memo(function LogsToolbar({
                     showAllOption
                     allOptionLabel='All triggers'
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
 
                 {/* Time Filter */}
-                <div className='flex flex-col gap-[6px]'>
-                  <span className='font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-1.5'>
+                  <span className='font-medium text-[var(--text-secondary)] text-caption'>
                     Time Range
                   </span>
                   <Combobox
@@ -621,7 +618,7 @@ export const LogsToolbar = memo(function LogsToolbar({
                       </span>
                     }
                     size='sm'
-                    className='h-[32px] w-full rounded-[6px]'
+                    className='h-[32px] w-full rounded-md'
                   />
                 </div>
               </div>
@@ -629,7 +626,7 @@ export const LogsToolbar = memo(function LogsToolbar({
           </DropdownMenu>
 
           {/* Inline Filters - Large screens only */}
-          <div className='hidden items-center gap-[8px] xl:flex'>
+          <div className='hidden items-center gap-2 xl:flex'>
             {/* Status Filter */}
             <Combobox
               options={statusOptions}
@@ -638,7 +635,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               onMultiSelectChange={handleStatusChange}
               placeholder='Status'
               overlayContent={
-                <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                   {selectedStatusColor && (
                     <div
                       className='flex-shrink-0 rounded-[3px]'
@@ -652,7 +649,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All statuses'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Workflow Filter */}
@@ -663,10 +660,10 @@ export const LogsToolbar = memo(function LogsToolbar({
               onMultiSelectChange={setWorkflowIds}
               placeholder='Workflow'
               overlayContent={
-                <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+                <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
                   {selectedWorkflow && (
                     <div
-                      className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                      className='h-[8px] w-[8px] flex-shrink-0 rounded-xs border-[1.5px]'
                       style={{
                         backgroundColor: selectedWorkflow.color,
                         borderColor: `${selectedWorkflow.color}60`,
@@ -683,7 +680,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All workflows'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Folder Filter */}
@@ -702,7 +699,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All folders'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Trigger Filter */}
@@ -721,7 +718,7 @@ export const LogsToolbar = memo(function LogsToolbar({
               allOptionLabel='All triggers'
               size='sm'
               align='end'
-              className='h-[32px] w-[120px] rounded-[6px]'
+              className='h-[32px] w-[120px] rounded-md'
             />
 
             {/* Timeline Filter */}
@@ -740,7 +737,7 @@ export const LogsToolbar = memo(function LogsToolbar({
                     }
                     size='sm'
                     align='end'
-                    className='h-[32px] w-[120px] rounded-[6px]'
+                    className='h-[32px] w-[120px] rounded-md'
                   />
                 </div>
               </DropdownMenuTrigger>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx b/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx
index 6c20d8d3774..d3565504d4c 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
 export default function LogsLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -21,7 +21,7 @@ export default function LogsLoading() {
           </div>
         </div>
       </div>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -36,7 +36,7 @@ export default function LogsLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               <th className='w-[40px] px-[12px] py-[8px]'>
                 <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
               </th>
@@ -49,7 +49,7 @@ export default function LogsLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 <td className='w-[40px] px-[12px] py-[10px]'>
                   <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
                 </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
index fa66608a39e..18a374b9f8e 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/logs.tsx
@@ -883,7 +883,7 @@ export default function Logs() {
             )}
             {sections.map((section) => (
               <div key={section.title}>
-                <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                   {section.title}
                 </div>
                 {section.suggestions.map((suggestion) => {
@@ -907,7 +907,7 @@ export default function Logs() {
         ) : (
           <div className='py-1'>
             {suggestionType === 'filters' && (
-              <div className='px-3 py-1.5 font-medium text-[12px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+              <div className='px-3 py-1.5 font-medium text-[var(--text-tertiary)] text-caption uppercase tracking-wide'>
                 SUGGESTED FILTERS
               </div>
             )}
@@ -1048,7 +1048,7 @@ export default function Logs() {
         />
         {isDashboardView ? (
           <div className='relative flex min-h-0 flex-1 flex-col overflow-auto'>
-            <div className='flex min-h-0 flex-1 flex-col px-[24px]'>
+            <div className='flex min-h-0 flex-1 flex-col px-6'>
               <Dashboard
                 stats={dashboardStatsQuery.data}
                 isLoading={dashboardStatsQuery.isLoading}
@@ -1293,9 +1293,9 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
   }, [resetFilters, onSearchQueryChange])
 
   return (
-    <div className='flex flex-col gap-[12px] p-[12px]'>
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Status</span>
+    <div className='flex flex-col gap-3 p-3'>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Status</span>
         <Combobox
           options={statusOptions}
           multiSelect
@@ -1303,7 +1303,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           onMultiSelectChange={handleStatusChange}
           placeholder='All statuses'
           overlayContent={
-            <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+            <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
               {selectedStatusColor && (
                 <div
                   className='flex-shrink-0 rounded-[3px]'
@@ -1316,12 +1316,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All statuses'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Workflow</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Workflow</span>
         <Combobox
           options={workflowOptions}
           multiSelect
@@ -1329,10 +1329,10 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           onMultiSelectChange={setWorkflowIds}
           placeholder='All workflows'
           overlayContent={
-            <span className='flex items-center gap-[6px] truncate text-[var(--text-primary)]'>
+            <span className='flex items-center gap-1.5 truncate text-[var(--text-primary)]'>
               {selectedWorkflow && (
                 <div
-                  className='h-[8px] w-[8px] flex-shrink-0 rounded-[2px] border-[1.5px]'
+                  className='h-[8px] w-[8px] flex-shrink-0 rounded-xs border-[1.5px]'
                   style={{
                     backgroundColor: selectedWorkflow.color,
                     borderColor: `${selectedWorkflow.color}60`,
@@ -1348,12 +1348,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All workflows'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Folder</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Folder</span>
         <Combobox
           options={folderOptions}
           multiSelect
@@ -1368,12 +1368,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All folders'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Trigger</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Trigger</span>
         <Combobox
           options={triggerOptions}
           multiSelect
@@ -1388,12 +1388,12 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
           showAllOption
           allOptionLabel='All triggers'
           size='sm'
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <span className='font-medium text-[12px] text-[var(--text-secondary)]'>Time Range</span>
+      <div className='flex flex-col gap-1.5'>
+        <span className='font-medium text-[var(--text-secondary)] text-caption'>Time Range</span>
         <DropdownMenu open={datePickerOpen} onOpenChange={setDatePickerOpen}>
           <DropdownMenuTrigger asChild>
             <div>
@@ -1406,7 +1406,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
                   <span className='truncate text-[var(--text-primary)]'>{timeDisplayLabel}</span>
                 }
                 size='sm'
-                className='h-[32px] w-full rounded-[6px]'
+                className='h-[32px] w-full rounded-md'
               />
             </div>
           </DropdownMenuTrigger>
@@ -1433,7 +1433,7 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
         <Button
           variant='active'
           onClick={handleClearFilters}
-          className='h-[32px] w-full rounded-[6px]'
+          className='h-[32px] w-full rounded-md'
         >
           Clear All Filters
         </Button>
@@ -1461,7 +1461,7 @@ function SuggestionButton({
     <button
       data-index={index}
       className={cn(
-        'w-full rounded-[6px] px-3 py-2 text-left transition-colors hover:bg-[var(--surface-5)]',
+        'w-full rounded-md px-3 py-2 text-left transition-colors hover-hover:bg-[var(--surface-5)]',
         highlighted && 'bg-[var(--surface-5)]'
       )}
       onMouseEnter={() => onHover(index)}
@@ -1471,16 +1471,16 @@ function SuggestionButton({
       }}
     >
       <div className='flex items-center justify-between gap-3'>
-        <div className='min-w-0 flex-1 truncate text-[13px]'>{suggestion.label}</div>
+        <div className='min-w-0 flex-1 truncate text-small'>{suggestion.label}</div>
         {showCategory && suggestion.value !== suggestion.label && (
-          <div className='shrink-0 font-mono text-[11px] text-[var(--text-muted)]'>
+          <div className='shrink-0 font-mono text-[var(--text-muted)] text-xs'>
             {suggestion.category === 'workflow' || suggestion.category === 'folder'
               ? `${suggestion.category}:`
               : ''}
           </div>
         )}
         {!showCategory && suggestion.description && (
-          <div className='shrink-0 text-[11px] text-[var(--text-muted)]'>{suggestion.value}</div>
+          <div className='shrink-0 text-[var(--text-muted)] text-xs'>{suggestion.value}</div>
         )}
       </div>
     </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
index f0dea2817f9..abcafb2974c 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/components/create-schedule-modal/schedule-modal.tsx
@@ -316,9 +316,9 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
       <ModalContent size='lg'>
         <ModalHeader>{isEditing ? 'Edit scheduled task' : 'Create new scheduled task'}</ModalHeader>
         <ModalBody>
-          <div className='flex flex-col gap-[18px]'>
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Title</p>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Title</p>
               <EmcnInput
                 value={title}
                 onChange={(e) => {
@@ -332,10 +332,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
               />
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Task description
-              </p>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Task description</p>
               <Textarea
                 value={prompt}
                 onChange={(e) => {
@@ -347,8 +345,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
               />
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Run frequency</p>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Run frequency</p>
               <Combobox
                 options={SCHEDULE_TYPE_OPTIONS}
                 value={scheduleType}
@@ -358,8 +356,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             </div>
 
             {scheduleType === 'minutes' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Interval (minutes)
                 </p>
                 <EmcnInput
@@ -375,10 +373,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {scheduleType === 'hourly' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Minute of hour
-                </p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Minute of hour</p>
                 <EmcnInput
                   type='number'
                   value={hourlyMinute}
@@ -392,33 +388,29 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {scheduleType === 'daily' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Time</p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
                 <TimePicker value={dailyTime} onChange={setDailyTime} />
               </div>
             )}
 
             {scheduleType === 'weekly' && (
-              <div className='flex gap-[12px]'>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Day of week
-                  </p>
+              <div className='flex gap-3'>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Day of week</p>
                   <Combobox options={WEEKDAY_OPTIONS} value={weeklyDay} onChange={setWeeklyDay} />
                 </div>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Time</p>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
                   <TimePicker value={weeklyDayTime} onChange={setWeeklyDayTime} />
                 </div>
               </div>
             )}
 
             {scheduleType === 'monthly' && (
-              <div className='flex gap-[12px]'>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Day of month
-                  </p>
+              <div className='flex gap-3'>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Day of month</p>
                   <EmcnInput
                     type='number'
                     value={monthlyDay}
@@ -429,18 +421,16 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
                     className='h-9'
                   />
                 </div>
-                <div className='flex flex-1 flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Time</p>
+                <div className='flex flex-1 flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Time</p>
                   <TimePicker value={monthlyTime} onChange={setMonthlyTime} />
                 </div>
               </div>
             )}
 
             {scheduleType === 'custom' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Cron expression
-                </p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Cron expression</p>
                 <EmcnInput
                   value={cronExpression}
                   onChange={(e) => setCronExpression(e.target.value)}
@@ -452,8 +442,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {showTimezone && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Timezone</p>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Timezone</p>
                 <Combobox
                   options={TIMEZONE_OPTIONS}
                   value={timezone}
@@ -466,10 +456,10 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {!isEditing && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Start date
-                  <span className='ml-[4px] font-normal text-[var(--text-muted)]'>(optional)</span>
+                  <span className='ml-1 font-normal text-[var(--text-muted)]'>(optional)</span>
                 </p>
                 <DatePicker
                   value={startDate}
@@ -479,8 +469,8 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
               </div>
             )}
 
-            <div className='flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>Lifecycle</p>
+            <div className='flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Lifecycle</p>
               <ButtonGroup
                 value={lifecycle}
                 onValueChange={(value) => setLifecycle(value as 'persistent' | 'until_complete')}
@@ -491,10 +481,10 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             </div>
 
             {lifecycle === 'until_complete' && (
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Max runs
-                  <span className='ml-[4px] font-normal text-[var(--text-muted)]'>(optional)</span>
+                  <span className='ml-1 font-normal text-[var(--text-muted)]'>(optional)</span>
                 </p>
                 <EmcnInput
                   type='number'
@@ -510,14 +500,14 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             {computedCron && schedulePreview && (
               <div>
                 {'error' in schedulePreview ? (
-                  <p className='text-[13px] text-[var(--text-error)]'>{schedulePreview.error}</p>
+                  <p className='text-[var(--text-error)] text-small'>{schedulePreview.error}</p>
                 ) : (
-                  <div className='flex flex-col gap-[4px]'>
-                    <p className='text-[13px] text-[var(--text-secondary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <p className='text-[var(--text-secondary)] text-small'>
                       {schedulePreview.humanReadable}
                     </p>
                     {schedulePreview.nextRun && (
-                      <p className='text-[12px] text-[var(--text-muted)]'>
+                      <p className='text-[var(--text-muted)] text-caption'>
                         Next run:{' '}
                         {schedulePreview.nextRun.toLocaleString(undefined, {
                           dateStyle: 'medium',
@@ -531,7 +521,7 @@ export function ScheduleModal({ open, onOpenChange, workspaceId, schedule }: Sch
             )}
 
             {submitError && (
-              <p className='text-[13px] text-[var(--text-error)] leading-tight'>{submitError}</p>
+              <p className='text-[var(--text-error)] text-small leading-tight'>{submitError}</p>
             )}
           </div>
         </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx
index 4bdba810493..4330f14d360 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 4
 export default function ScheduledTasksLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -17,7 +17,7 @@ export default function ScheduledTasksLoading() {
           </div>
         </div>
       </div>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center'>
           <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
           <Skeleton className='ml-[10px] h-[14px] w-[160px] rounded-[4px]' />
@@ -26,7 +26,7 @@ export default function ScheduledTasksLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               <th className='w-[40px] px-[12px] py-[8px]'>
                 <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
               </th>
@@ -39,7 +39,7 @@ export default function ScheduledTasksLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 <td className='w-[40px] px-[12px] py-[10px]'>
                   <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
                 </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
index 9b9298edc77..36acbbe08ed 100644
--- a/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/scheduled-tasks/scheduled-tasks.tsx
@@ -230,7 +230,7 @@ export function ScheduledTasks() {
         <ModalContent size='sm'>
           <ModalHeader>Delete Scheduled Task</ModalHeader>
           <ModalBody>
-            <p className='text-[12px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-caption'>
               Are you sure you want to delete{' '}
               <span className='font-medium text-[var(--text-primary)]'>
                 {activeTask?.jobTitle || 'this task'}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
index fd01097fde9..d00ffc6b696 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/[section]/settings.tsx
@@ -27,11 +27,11 @@ import {
  */
 function SettingsSectionSkeleton() {
   return (
-    <div className='flex flex-col gap-[16px]'>
-      <Skeleton className='h-[20px] w-[200px] rounded-[4px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
+    <div className='flex flex-col gap-4'>
+      <Skeleton className='h-[20px] w-[200px] rounded-sm' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
     </div>
   )
 }
@@ -173,7 +173,7 @@ export function SettingsPage({ section }: SettingsPageProps) {
 
   return (
     <div>
-      <h2 className='mb-[28px] font-medium text-[22px] text-[var(--text-primary)]'>{label}</h2>
+      <h2 className='mb-7 font-medium text-[22px] text-[var(--text-primary)]'>{label}</h2>
       {effectiveSection === 'general' && <General />}
       {effectiveSection === 'integrations' && <Integrations />}
       {effectiveSection === 'secrets' && <Credentials />}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
index b15fae3a025..5fc7bfcf968 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin-skeleton.tsx
@@ -2,21 +2,21 @@ import { Skeleton } from '@/components/emcn'
 
 export function AdminSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[24px]'>
+    <div className='flex h-full flex-col gap-6'>
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[20px] w-[36px] rounded-full' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[340px]' />
-        <div className='flex gap-[8px]'>
-          <Skeleton className='h-9 flex-1 rounded-[6px]' />
-          <Skeleton className='h-9 w-[80px] rounded-[6px]' />
+        <div className='flex gap-2'>
+          <Skeleton className='h-9 flex-1 rounded-md' />
+          <Skeleton className='h-9 w-[80px] rounded-md' />
         </div>
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[120px]' />
-        <Skeleton className='h-[200px] w-full rounded-[8px]' />
+        <Skeleton className='h-[200px] w-full rounded-lg' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
index 5161bb3c5d9..8a1e0975204 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/admin/admin.tsx
@@ -85,7 +85,7 @@ export function Admin() {
     unbanUser.variables,
   ])
   return (
-    <div className='flex h-full flex-col gap-[24px]'>
+    <div className='flex h-full flex-col gap-6'>
       <div className='flex items-center justify-between'>
         <Label htmlFor='super-user-mode'>Super admin mode</Label>
         <Switch
@@ -97,11 +97,11 @@ export function Admin() {
 
       <div className='h-px bg-[var(--border-secondary)]' />
 
-      <div className='flex flex-col gap-[8px]'>
-        <p className='text-[14px] text-[var(--text-secondary)]'>
+      <div className='flex flex-col gap-2'>
+        <p className='text-[var(--text-secondary)] text-sm'>
           Import a workflow by ID along with its associated copilot chats.
         </p>
-        <div className='flex gap-[8px]'>
+        <div className='flex gap-2'>
           <EmcnInput
             value={workflowId}
             onChange={(e) => {
@@ -120,10 +120,10 @@ export function Admin() {
           </Button>
         </div>
         {importWorkflow.error && (
-          <p className='text-[13px] text-[var(--text-error)]'>{importWorkflow.error.message}</p>
+          <p className='text-[var(--text-error)] text-small'>{importWorkflow.error.message}</p>
         )}
         {importWorkflow.isSuccess && (
-          <p className='text-[13px] text-[var(--text-secondary)]'>
+          <p className='text-[var(--text-secondary)] text-small'>
             Workflow imported successfully (new ID: {importWorkflow.data.newWorkflowId},{' '}
             {importWorkflow.data.copilotChatsImported ?? 0} copilot chats imported)
           </p>
@@ -132,9 +132,9 @@ export function Admin() {
 
       <div className='h-px bg-[var(--border-secondary)]' />
 
-      <div className='flex flex-col gap-[12px]'>
-        <p className='font-medium text-[14px] text-[var(--text-primary)]'>User Management</p>
-        <div className='flex gap-[8px]'>
+      <div className='flex flex-col gap-3'>
+        <p className='font-medium text-[var(--text-primary)] text-sm'>User Management</p>
+        <div className='flex gap-2'>
           <EmcnInput
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
@@ -147,30 +147,30 @@ export function Admin() {
         </div>
 
         {usersError && (
-          <p className='text-[13px] text-[var(--text-error)]'>
+          <p className='text-[var(--text-error)] text-small'>
             {usersError instanceof Error ? usersError.message : 'Failed to fetch users'}
           </p>
         )}
 
         {(setUserRole.error || banUser.error || unbanUser.error) && (
-          <p className='text-[13px] text-[var(--text-error)]'>
+          <p className='text-[var(--text-error)] text-small'>
             {(setUserRole.error || banUser.error || unbanUser.error)?.message ??
               'Action failed. Please try again.'}
           </p>
         )}
 
         {usersLoading && !usersData && (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {Array.from({ length: 5 }).map((_, i) => (
-              <Skeleton key={i} className='h-[48px] w-full rounded-[6px]' />
+              <Skeleton key={i} className='h-[48px] w-full rounded-md' />
             ))}
           </div>
         )}
 
         {searchQuery.length > 0 && usersData && (
           <>
-            <div className='flex flex-col gap-[2px]'>
-              <div className='flex items-center gap-[12px] border-[var(--border-secondary)] border-b px-[12px] py-[8px] text-[12px] text-[var(--text-tertiary)]'>
+            <div className='flex flex-col gap-0.5'>
+              <div className='flex items-center gap-3 border-[var(--border-secondary)] border-b px-3 py-2 text-[var(--text-tertiary)] text-caption'>
                 <span className='w-[200px]'>Name</span>
                 <span className='flex-1'>Email</span>
                 <span className='w-[80px]'>Role</span>
@@ -179,7 +179,7 @@ export function Admin() {
               </div>
 
               {usersData.users.length === 0 && (
-                <div className='py-[16px] text-center text-[13px] text-[var(--text-tertiary)]'>
+                <div className='py-4 text-center text-[var(--text-tertiary)] text-small'>
                   No users found.
                 </div>
               )}
@@ -188,7 +188,7 @@ export function Admin() {
                 <div
                   key={u.id}
                   className={cn(
-                    'flex items-center gap-[12px] px-[12px] py-[8px] text-[13px]',
+                    'flex items-center gap-3 px-3 py-2 text-small',
                     'border-[var(--border-secondary)] border-b last:border-b-0'
                   )}
                 >
@@ -206,12 +206,12 @@ export function Admin() {
                       <Badge variant='green'>Active</Badge>
                     )}
                   </span>
-                  <span className='flex w-[180px] justify-end gap-[4px]'>
+                  <span className='flex w-[180px] justify-end gap-1'>
                     {u.id !== session?.user?.id && (
                       <>
                         <Button
                           variant='active'
-                          className='h-[28px] px-[8px] text-[12px]'
+                          className='h-[28px] px-2 text-caption'
                           onClick={() => {
                             setUserRole.reset()
                             setUserRole.mutate({
@@ -226,7 +226,7 @@ export function Admin() {
                         {u.banned ? (
                           <Button
                             variant='active'
-                            className='h-[28px] px-[8px] text-[12px]'
+                            className='h-[28px] px-2 text-caption'
                             onClick={() => {
                               unbanUser.reset()
                               unbanUser.mutate({ userId: u.id })
@@ -236,16 +236,16 @@ export function Admin() {
                             Unban
                           </Button>
                         ) : banUserId === u.id ? (
-                          <div className='flex gap-[4px]'>
+                          <div className='flex gap-1'>
                             <EmcnInput
                               value={banReason}
                               onChange={(e) => setBanReason(e.target.value)}
                               placeholder='Reason (optional)'
-                              className='h-[28px] w-[120px] text-[12px]'
+                              className='h-[28px] w-[120px] text-caption'
                             />
                             <Button
                               variant='primary'
-                              className='h-[28px] px-[8px] text-[12px]'
+                              className='h-[28px] px-2 text-caption'
                               onClick={() => {
                                 banUser.reset()
                                 banUser.mutate(
@@ -267,7 +267,7 @@ export function Admin() {
                             </Button>
                             <Button
                               variant='active'
-                              className='h-[28px] px-[8px] text-[12px]'
+                              className='h-[28px] px-2 text-caption'
                               onClick={() => {
                                 setBanUserId(null)
                                 setBanReason('')
@@ -279,7 +279,7 @@ export function Admin() {
                         ) : (
                           <Button
                             variant='active'
-                            className='h-[28px] px-[8px] text-[12px] text-[var(--text-error)]'
+                            className='h-[28px] px-2 text-[var(--text-error)] text-caption'
                             onClick={() => {
                               setBanUserId(u.id)
                               setBanReason('')
@@ -297,14 +297,14 @@ export function Admin() {
             </div>
 
             {totalPages > 1 && (
-              <div className='flex items-center justify-between text-[13px] text-[var(--text-secondary)]'>
+              <div className='flex items-center justify-between text-[var(--text-secondary)] text-small'>
                 <span>
                   Page {currentPage} of {totalPages} ({usersData.total} users)
                 </span>
-                <div className='flex gap-[4px]'>
+                <div className='flex gap-1'>
                   <Button
                     variant='active'
-                    className='h-[28px] px-[8px] text-[12px]'
+                    className='h-[28px] px-2 text-caption'
                     onClick={() => setUsersOffset((prev) => prev - PAGE_SIZE)}
                     disabled={usersOffset === 0 || usersLoading}
                   >
@@ -312,7 +312,7 @@ export function Admin() {
                   </Button>
                   <Button
                     variant='active'
-                    className='h-[28px] px-[8px] text-[12px]'
+                    className='h-[28px] px-2 text-caption'
                     onClick={() => setUsersOffset((prev) => prev + PAGE_SIZE)}
                     disabled={usersOffset + PAGE_SIZE >= (usersData?.total ?? 0) || usersLoading}
                   >
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
index 606e35e8ab4..2840852df87 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-key-skeleton.tsx
@@ -5,15 +5,15 @@ import { Skeleton } from '@/components/emcn'
  */
 export function ApiKeySkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <Skeleton className='h-5 w-[80px]' />
           <Skeleton className='h-5 w-[140px]' />
         </div>
         <Skeleton className='h-5 w-[100px]' />
       </div>
-      <Skeleton className='h-[26px] w-[48px] rounded-[6px]' />
+      <Skeleton className='h-[26px] w-[48px] rounded-md' />
     </div>
   )
 }
@@ -23,12 +23,12 @@ export function ApiKeySkeleton() {
  */
 export function ApiKeysSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[80px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[80px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <ApiKeySkeleton />
         <ApiKeySkeleton />
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
index 7a41e992c72..6e419c51a5f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/api-keys.tsx
@@ -123,10 +123,10 @@ export function ApiKeys() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* Search Input and Create Button */}
-      <div className='flex items-center gap-[8px]'>
-        <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex items-center gap-2'>
+        <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
           <Search
             className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
             strokeWidth={2}
@@ -149,7 +149,7 @@ export function ApiKeys() {
           variant='primary'
           disabled={createButtonDisabled}
         >
-          <Plus className='mr-[6px] h-[13px] w-[13px]' />
+          <Plus className='mr-1.5 h-[13px] w-[13px]' />
           Create
         </Button>
       </div>
@@ -157,49 +157,47 @@ export function ApiKeys() {
       {/* Scrollable Content */}
       <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
         {isLoading ? (
-          <div className='flex flex-col gap-[18px]'>
-            <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[70px]' />
-              <div className='text-[14px] text-[var(--text-muted)]'>
+              <div className='text-[var(--text-muted)] text-sm'>
                 <Skeleton className='h-5 w-[140px]' />
               </div>
             </div>
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[55px]' />
               <ApiKeySkeleton />
               <ApiKeySkeleton />
             </div>
           </div>
         ) : personalKeys.length === 0 && workspaceKeys.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+          <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
             Click "Create" above to get started
           </div>
         ) : (
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             <>
               {/* Workspace section */}
               {!searchTerm.trim() ? (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Workspace
-                  </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>Workspace</div>
                   {workspaceKeys.length === 0 ? (
-                    <div className='text-[14px] text-[var(--text-muted)]'>
+                    <div className='text-[var(--text-muted)] text-sm'>
                       No workspace Sim keys yet
                     </div>
                   ) : (
                     workspaceKeys.map((key) => (
-                      <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                      <div key={key.id} className='flex items-center justify-between gap-3'>
                         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                          <div className='flex items-center gap-[6px]'>
-                            <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                          <div className='flex items-center gap-1.5'>
+                            <span className='max-w-[280px] truncate font-medium text-base'>
                               {key.name}
                             </span>
-                            <span className='text-[14px] text-[var(--text-secondary)]'>
+                            <span className='text-[var(--text-secondary)] text-sm'>
                               (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                             </span>
                           </div>
-                          <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                          <p className='truncate text-[var(--text-muted)] text-sm'>
                             {key.displayKey || key.key}
                           </p>
                         </div>
@@ -219,22 +217,20 @@ export function ApiKeys() {
                   )}
                 </div>
               ) : filteredWorkspaceKeys.length > 0 ? (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Workspace
-                  </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>Workspace</div>
                   {filteredWorkspaceKeys.map(({ key }) => (
-                    <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                    <div key={key.id} className='flex items-center justify-between gap-3'>
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <div className='flex items-center gap-[6px]'>
-                          <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                        <div className='flex items-center gap-1.5'>
+                          <span className='max-w-[280px] truncate font-medium text-base'>
                             {key.name}
                           </span>
-                          <span className='text-[14px] text-[var(--text-secondary)]'>
+                          <span className='text-[var(--text-secondary)] text-sm'>
                             (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                           </span>
                         </div>
-                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                        <p className='truncate text-[var(--text-muted)] text-sm'>
                           {key.displayKey || key.key}
                         </p>
                       </div>
@@ -256,25 +252,23 @@ export function ApiKeys() {
 
               {/* Personal section */}
               {(!searchTerm.trim() || filteredPersonalKeys.length > 0) && (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Personal
-                  </div>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>Personal</div>
                   {filteredPersonalKeys.map(({ key }) => {
                     const isConflict = conflicts.includes(key.name)
                     return (
-                      <div key={key.id} className='flex flex-col gap-[8px]'>
-                        <div className='flex items-center justify-between gap-[12px]'>
+                      <div key={key.id} className='flex flex-col gap-2'>
+                        <div className='flex items-center justify-between gap-3'>
                           <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                            <div className='flex items-center gap-[6px]'>
-                              <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                            <div className='flex items-center gap-1.5'>
+                              <span className='max-w-[280px] truncate font-medium text-base'>
                                 {key.name}
                               </span>
-                              <span className='text-[14px] text-[var(--text-secondary)]'>
+                              <span className='text-[var(--text-secondary)] text-sm'>
                                 (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                               </span>
                             </div>
-                            <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                            <p className='truncate text-[var(--text-muted)] text-sm'>
                               {key.displayKey || key.key}
                             </p>
                           </div>
@@ -290,7 +284,7 @@ export function ApiKeys() {
                           </Button>
                         </div>
                         {isConflict && (
-                          <div className='text-[13px] text-[var(--text-error)] leading-tight'>
+                          <div className='text-[var(--text-error)] text-small leading-tight'>
                             Workspace Sim key with the same name overrides this. Rename your
                             personal key to use it.
                           </div>
@@ -306,7 +300,7 @@ export function ApiKeys() {
                 filteredPersonalKeys.length === 0 &&
                 filteredWorkspaceKeys.length === 0 &&
                 (personalKeys.length > 0 || workspaceKeys.length > 0) && (
-                  <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                  <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                     No Sim keys found matching "{searchTerm}"
                   </div>
                 )}
@@ -318,21 +312,21 @@ export function ApiKeys() {
       {/* Allow Personal API Keys Toggle - Fixed at bottom */}
       {!isLoading && canManageWorkspaceKeys && (
         <Tooltip.Provider delayDuration={150}>
-          <div className='mt-[24px] flex items-center justify-between'>
-            <div className='flex items-center gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+          <div className='mt-6 flex items-center justify-between'>
+            <div className='flex items-center gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>
                 Allow personal Sim keys
               </span>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <button
                     type='button'
-                    className='rounded-full p-[4px] text-[var(--text-muted)] transition hover:text-[var(--text-primary)]'
+                    className='rounded-full p-1 text-[var(--text-muted)] transition hover-hover:text-[var(--text-primary)]'
                   >
                     <Info className='h-[12px] w-[12px]' strokeWidth={2} />
                   </button>
                 </Tooltip.Trigger>
-                <Tooltip.Content side='top' className='max-w-xs text-[13px]'>
+                <Tooltip.Content side='top' className='max-w-xs text-small'>
                   Allow collaborators to create and use their own keys with billing charged to them.
                 </Tooltip.Content>
               </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
index 078b915c45e..ad64805a2e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/api-keys/components/create-api-key-modal/create-api-key-modal.tsx
@@ -121,12 +121,10 @@ export function CreateApiKeyModal({
                 : "This key will have access to your personal workflows. Make sure to copy it after creation as you won't be able to see it again."}
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[18px]'>
+            <div className='mt-4 flex flex-col gap-4.5'>
               {canManageWorkspaceKeys && (
-                <div className='flex flex-col gap-[8px]'>
-                  <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                    Sim Key Type
-                  </p>
+                <div className='flex flex-col gap-2'>
+                  <p className='font-medium text-[var(--text-secondary)] text-sm'>Sim Key Type</p>
                   <ButtonGroup
                     value={keyType}
                     onValueChange={(value) => {
@@ -141,8 +139,8 @@ export function CreateApiKeyModal({
                   </ButtonGroup>
                 </div>
               )}
-              <div className='flex flex-col gap-[8px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>
                   Enter a name for your Sim key to help you identify it later.
                 </p>
                 {/* Hidden decoy fields to prevent browser autofill */}
@@ -176,9 +174,7 @@ export function CreateApiKeyModal({
                   data-form-type='other'
                 />
                 {createError && (
-                  <p className='text-[13px] text-[var(--text-error)] leading-tight'>
-                    {createError}
-                  </p>
+                  <p className='text-[var(--text-error)] text-small leading-tight'>{createError}</p>
                 )}
               </div>
             </div>
@@ -226,15 +222,15 @@ export function CreateApiKeyModal({
             </p>
 
             {newKey && (
-              <div className='relative mt-[10px]'>
-                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
-                  <code className='flex-1 truncate font-mono text-[14px] text-[var(--text-primary)]'>
+              <div className='relative mt-2.5'>
+                <div className='flex h-9 items-center rounded-md border bg-[var(--surface-1)] px-2.5 pr-10'>
+                  <code className='flex-1 truncate font-mono text-[var(--text-primary)] text-sm'>
                     {newKey.key}
                   </code>
                 </div>
                 <Button
                   variant='ghost'
-                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-sm text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                   onClick={() => copyToClipboard(newKey.key)}
                 >
                   {copySuccess ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
index a235342a0c4..de080c3c23b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok-skeleton.tsx
@@ -5,15 +5,15 @@ import { Skeleton } from '@/components/emcn'
  */
 export function BYOKKeySkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
-      <div className='flex items-center gap-[12px]'>
-        <Skeleton className='h-9 w-9 flex-shrink-0 rounded-[6px]' />
+    <div className='flex items-center justify-between gap-3'>
+      <div className='flex items-center gap-3'>
+        <Skeleton className='h-9 w-9 flex-shrink-0 rounded-md' />
         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
           <Skeleton className='h-[14px] w-[100px]' />
           <Skeleton className='h-[13px] w-[200px]' />
         </div>
       </div>
-      <Skeleton className='h-[32px] w-[72px] rounded-[6px]' />
+      <Skeleton className='h-[32px] w-[72px] rounded-md' />
     </div>
   )
 }
@@ -23,13 +23,13 @@ export function BYOKKeySkeleton() {
  */
 export function BYOKSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
       </div>
       <Skeleton className='h-[14px] w-[280px]' />
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[8px]'>
+        <div className='flex flex-col gap-2'>
           <BYOKKeySkeleton />
           <BYOKKeySkeleton />
           <BYOKKeySkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
index ecd16ff3d76..a01f13b213c 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/byok/byok.tsx
@@ -216,9 +216,9 @@ export function BYOK() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -233,39 +233,39 @@ export function BYOK() {
           </div>
         </div>
 
-        <p className='text-[14px] text-[var(--text-secondary)]'>
+        <p className='text-[var(--text-secondary)] text-sm'>
           Use your own API keys for hosted model providers.
         </p>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {PROVIDERS.map((p) => (
                 <BYOKKeySkeleton key={p.id} />
               ))}
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredProviders.map((provider) => {
                 const existingKey = getKeyForProvider(provider.id)
                 const Icon = provider.icon
 
                 return (
-                  <div key={provider.id} className='flex items-center justify-between gap-[12px]'>
-                    <div className='flex items-center gap-[12px]'>
-                      <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[6px] bg-[var(--surface-6)]'>
+                  <div key={provider.id} className='flex items-center justify-between gap-3'>
+                    <div className='flex items-center gap-3'>
+                      <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-md bg-[var(--surface-6)]'>
                         <Icon className='h-4 w-4' />
                       </div>
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='font-medium text-[15px]'>{provider.name}</span>
-                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                        <span className='font-medium text-base'>{provider.name}</span>
+                        <p className='truncate text-[var(--text-muted)] text-sm'>
                           {provider.description}
                         </p>
                       </div>
                     </div>
 
                     {existingKey ? (
-                      <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                      <div className='flex flex-shrink-0 items-center gap-2'>
                         <Button variant='default' onClick={() => openEditModal(provider.id)}>
                           Update
                         </Button>
@@ -285,7 +285,7 @@ export function BYOK() {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No providers found matching "{searchTerm}"
                 </div>
               )}
@@ -320,10 +320,8 @@ export function BYOK() {
               requests in this workspace. Your key is encrypted and stored securely.
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Enter your API key
-              </p>
+            <div className='mt-4 flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>Enter your API key</p>
               {/* Hidden decoy fields to prevent browser autofill */}
               <input
                 type='text'
@@ -347,7 +345,7 @@ export function BYOK() {
                     if (error) setError(null)
                   }}
                   placeholder={PROVIDERS.find((p) => p.id === editingProvider)?.placeholder}
-                  className='h-9 pr-[36px]'
+                  className='h-9 pr-9'
                   autoFocus
                   name='byok_api_key'
                   autoComplete='off'
@@ -369,7 +367,7 @@ export function BYOK() {
                 </Button>
               </div>
               {error && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{error}</p>
+                <p className='text-[var(--text-error)] text-small leading-tight'>{error}</p>
               )}
             </div>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
index 0f8ae7adc95..30bf43eb77d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/copilot/copilot.tsx
@@ -33,7 +33,7 @@ const logger = createLogger('CopilotSettings')
  */
 // function McpServerSkeleton() {
 //   return (
-//     <div className='flex items-center justify-between gap-[12px]'>
+//     <div className='flex items-center justify-between gap-3'>
 //       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
 //         <Skeleton className='h-5 w-[120px]' />
 //         <Skeleton className='h-5 w-[80px]' />
@@ -145,28 +145,28 @@ export function Copilot() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         {/* MCP Tools Section — uncomment when ready to allow users to toggle MCP servers for Mothership
-        <div className='flex flex-col gap-[8px]'>
-          <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
+        <div className='flex flex-col gap-2'>
+          <div className='font-medium text-sm text-[var(--text-secondary)]'>
             MCP Tools
           </div>
           {mcpLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <McpServerSkeleton />
               <McpServerSkeleton />
             </div>
           ) : enabledServers.length === 0 ? (
-            <div className='text-[14px] text-[var(--text-muted)]'>
+            <div className='text-sm text-[var(--text-muted)]'>
               No MCP servers configured. Add servers in the MCP Tools tab.
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {enabledServers.map((server) => (
-                <div key={server.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={server.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[15px]'>{server.name}</span>
-                    <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                    <span className='truncate font-medium text-base'>{server.name}</span>
+                    <p className='truncate text-sm text-[var(--text-muted)]'>
                       {server.toolCount ?? 0} tool{server.toolCount === 1 ? '' : 's'}
                     </p>
                   </div>
@@ -182,8 +182,8 @@ export function Copilot() {
         */}
 
         {/* Search Input and Create Button */}
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -203,7 +203,7 @@ export function Copilot() {
             variant='primary'
             disabled={isLoading}
           >
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Create
           </Button>
         </div>
@@ -211,31 +211,29 @@ export function Copilot() {
         {/* Scrollable Content */}
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <CopilotKeySkeleton />
               <CopilotKeySkeleton />
               <CopilotKeySkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Create" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredKeys.map((key) => (
-                <div key={key.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={key.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <div className='flex items-center gap-[6px]'>
-                      <span className='max-w-[280px] truncate font-medium text-[15px]'>
+                    <div className='flex items-center gap-1.5'>
+                      <span className='max-w-[280px] truncate font-medium text-base'>
                         {key.name || 'Unnamed Key'}
                       </span>
-                      <span className='text-[14px] text-[var(--text-secondary)]'>
+                      <span className='text-[var(--text-secondary)] text-sm'>
                         (last used: {formatLastUsed(key.lastUsed).toLowerCase()})
                       </span>
                     </div>
-                    <p className='truncate text-[14px] text-[var(--text-muted)]'>
-                      {key.displayKey}
-                    </p>
+                    <p className='truncate text-[var(--text-muted)] text-sm'>{key.displayKey}</p>
                   </div>
                   <Button
                     variant='ghost'
@@ -250,7 +248,7 @@ export function Copilot() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No API keys found matching "{searchTerm}"
                 </div>
               )}
@@ -269,8 +267,8 @@ export function Copilot() {
               you won't be able to see it again.
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='mt-4 flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>
                 Enter a name for your API key to help you identify it later.
               </p>
               <EmcnInput
@@ -284,7 +282,7 @@ export function Copilot() {
                 autoFocus
               />
               {createError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{createError}</p>
+                <p className='text-[var(--text-error)] text-small leading-tight'>{createError}</p>
               )}
             </div>
           </ModalBody>
@@ -334,15 +332,15 @@ export function Copilot() {
             </p>
 
             {newKey && (
-              <div className='relative mt-[10px]'>
-                <div className='flex h-9 items-center rounded-[6px] border bg-[var(--surface-1)] px-[10px] pr-[40px]'>
-                  <code className='flex-1 truncate font-mono text-[14px] text-[var(--text-primary)]'>
+              <div className='relative mt-2.5'>
+                <div className='flex h-9 items-center rounded-md border bg-[var(--surface-1)] px-2.5 pr-10'>
+                  <code className='flex-1 truncate font-mono text-[var(--text-primary)] text-sm'>
                     {newKey}
                   </code>
                 </div>
                 <Button
                   variant='ghost'
-                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-[4px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='-translate-y-1/2 absolute top-1/2 right-[4px] h-[28px] w-[28px] rounded-sm text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                   onClick={() => copyToClipboard(newKey)}
                 >
                   {copySuccess ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
index b9af75ee0d8..67dae0e9062 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets-skeleton.tsx
@@ -5,35 +5,35 @@ import { Skeleton } from '@/components/emcn'
  */
 export function CredentialSetsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[80px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[80px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[100px]' />
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='h-9 w-9 rounded-[6px]' />
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-9 w-9 rounded-md' />
             <div className='flex flex-col'>
               <Skeleton className='h-[14px] w-[120px]' />
               <Skeleton className='h-[12px] w-[80px]' />
             </div>
           </div>
-          <Skeleton className='h-[32px] w-[60px] rounded-[6px]' />
+          <Skeleton className='h-[32px] w-[60px] rounded-md' />
         </div>
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[60px]' />
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='h-9 w-9 rounded-[6px]' />
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-9 w-9 rounded-md' />
             <div className='flex flex-col'>
               <Skeleton className='h-[14px] w-[140px]' />
               <Skeleton className='h-[12px] w-[100px]' />
             </div>
           </div>
-          <Skeleton className='h-[32px] w-[80px] rounded-[6px]' />
+          <Skeleton className='h-[32px] w-[80px] rounded-md' />
         </div>
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
index 3b207d3014c..8170c189a69 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credential-sets/credential-sets.tsx
@@ -410,34 +410,28 @@ export function CredentialSets() {
 
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
+        <div className='flex h-full flex-col gap-4.5'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[18px]'>
-              <div className='flex items-center gap-[18px]'>
-                <div className='flex items-center gap-[8px]'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                    Group Name
-                  </span>
-                  <span className='text-[14px] text-[var(--text-secondary)]'>
-                    {viewingSet.name}
-                  </span>
+            <div className='flex flex-col gap-4.5'>
+              <div className='flex items-center gap-4.5'>
+                <div className='flex items-center gap-2'>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>Group Name</span>
+                  <span className='text-[var(--text-secondary)] text-sm'>{viewingSet.name}</span>
                 </div>
                 <div className='h-4 w-px bg-[var(--border)]' />
-                <div className='flex items-center gap-[8px]'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                    Provider
-                  </span>
-                  <div className='flex items-center gap-[6px]'>
+                <div className='flex items-center gap-2'>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>Provider</span>
+                  <div className='flex items-center gap-1.5'>
                     {getProviderIcon(viewingSet.providerId)}
-                    <span className='text-[14px] text-[var(--text-secondary)]'>
+                    <span className='text-[var(--text-secondary)] text-sm'>
                       {getProviderDisplayName(viewingSet.providerId as PollingProvider)}
                     </span>
                   </div>
                 </div>
               </div>
 
-              <div className='flex flex-col gap-[4px]'>
-                <div className='flex items-center gap-[8px]'>
+              <div className='flex flex-col gap-1'>
+                <div className='flex items-center gap-2'>
                   <TagInput
                     items={emailItems}
                     onAdd={(value) => addEmail(value)}
@@ -456,19 +450,19 @@ export function CredentialSets() {
                     {createInvitation.isPending ? 'Sending...' : 'Invite'}
                   </Button>
                 </div>
-                {emailError && <p className='text-[13px] text-[var(--text-error)]'>{emailError}</p>}
+                {emailError && <p className='text-[var(--text-error)] text-small'>{emailError}</p>}
               </div>
 
-              <div className='flex flex-col gap-[18px]'>
-                <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>Members</h4>
+              <div className='flex flex-col gap-4.5'>
+                <h4 className='font-medium text-[var(--text-primary)] text-base'>Members</h4>
 
                 {membersLoading || pendingInvitationsLoading ? (
-                  <div className='flex flex-col gap-[18px]'>
+                  <div className='flex flex-col gap-4.5'>
                     {[1, 2].map((i) => (
                       <div key={i} className='flex items-center justify-between'>
-                        <div className='flex items-center gap-[12px]'>
+                        <div className='flex items-center gap-3'>
                           <Skeleton className='h-8 w-8 rounded-full' />
-                          <div className='flex flex-col gap-[4px]'>
+                          <div className='flex flex-col gap-1'>
                             <Skeleton className='h-[14px] w-[100px]' />
                             <Skeleton className='h-[12px] w-[150px]' />
                           </div>
@@ -477,18 +471,18 @@ export function CredentialSets() {
                     ))}
                   </div>
                 ) : totalCount === 0 ? (
-                  <p className='text-[14px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-sm'>
                     No members yet. Send invitations above.
                   </p>
                 ) : (
-                  <div className='flex flex-col gap-[18px]'>
+                  <div className='flex flex-col gap-4.5'>
                     {activeMembers.map((member) => {
                       const name = member.userName || 'Unknown'
                       const avatarInitial = name.charAt(0).toUpperCase()
 
                       return (
                         <div key={member.id} className='flex items-center justify-between'>
-                          <div className='flex flex-1 items-center gap-[12px]'>
+                          <div className='flex flex-1 items-center gap-3'>
                             <Avatar size='md'>
                               {member.userImage && (
                                 <AvatarImage src={member.userImage} alt={name} />
@@ -504,8 +498,8 @@ export function CredentialSets() {
                             </Avatar>
 
                             <div className='min-w-0'>
-                              <div className='flex items-center gap-[8px]'>
-                                <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                              <div className='flex items-center gap-2'>
+                                <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                                   {name}
                                 </span>
                                 {member.credentials.length === 0 && (
@@ -514,13 +508,13 @@ export function CredentialSets() {
                                   </Badge>
                                 )}
                               </div>
-                              <div className='truncate text-[13px] text-[var(--text-muted)]'>
+                              <div className='truncate text-[var(--text-muted)] text-small'>
                                 {member.userEmail}
                               </div>
                             </div>
                           </div>
 
-                          <div className='ml-[16px] flex items-center gap-[4px]'>
+                          <div className='ml-4 flex items-center gap-1'>
                             <Button
                               variant='destructive'
                               onClick={() => handleRemoveMember(member.id)}
@@ -541,7 +535,7 @@ export function CredentialSets() {
 
                       return (
                         <div key={invitation.id} className='flex items-center justify-between'>
-                          <div className='flex flex-1 items-center gap-[12px]'>
+                          <div className='flex flex-1 items-center gap-3'>
                             <Avatar size='md'>
                               <AvatarFallback
                                 style={{ background: getUserColor(email) }}
@@ -552,21 +546,21 @@ export function CredentialSets() {
                             </Avatar>
 
                             <div className='min-w-0'>
-                              <div className='flex items-center gap-[8px]'>
-                                <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                              <div className='flex items-center gap-2'>
+                                <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                                   {emailPrefix}
                                 </span>
                                 <Badge variant='gray-secondary' size='sm'>
                                   Pending
                                 </Badge>
                               </div>
-                              <div className='truncate text-[13px] text-[var(--text-muted)]'>
+                              <div className='truncate text-[var(--text-muted)] text-small'>
                                 {email}
                               </div>
                             </div>
                           </div>
 
-                          <div className='ml-[16px] flex items-center gap-[4px]'>
+                          <div className='ml-4 flex items-center gap-1'>
                             <Button
                               variant='ghost'
                               onClick={() => handleResendInvitation(invitation.id, email)}
@@ -614,9 +608,9 @@ export function CredentialSets() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -630,7 +624,7 @@ export function CredentialSets() {
           </div>
           {canManageCredentialSets && (
             <Button variant='primary' onClick={() => setShowCreateModal(true)}>
-              <Plus className='mr-[6px] h-[13px] w-[13px]' />
+              <Plus className='mr-1.5 h-[13px] w-[13px]' />
               Create
             </Button>
           )}
@@ -638,19 +632,19 @@ export function CredentialSets() {
 
         <div className='relative min-h-0 flex-1 overflow-y-auto'>
           {hasNoContent && !canManageCredentialSets ? (
-            <div className='absolute inset-0 flex items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='absolute inset-0 flex items-center justify-center text-[var(--text-muted)] text-sm'>
               You're not a member of any polling groups yet. When someone invites you, it will
               appear here.
             </div>
           ) : hasNoResults ? (
-            <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+            <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
               No results found matching "{searchTerm}"
             </div>
           ) : (
-            <div className='flex flex-col gap-[18px]'>
+            <div className='flex flex-col gap-4.5'>
               {filteredInvitations.length > 0 && (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>
                     Pending Invitations
                   </div>
                   {filteredInvitations.map((invitation) => (
@@ -658,15 +652,15 @@ export function CredentialSets() {
                       key={invitation.invitationId}
                       className='flex items-center justify-between'
                     >
-                      <div className='flex items-center gap-[12px]'>
-                        <div className='flex h-9 w-9 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                      <div className='flex items-center gap-3'>
+                        <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {getProviderIcon(invitation.providerId)}
                         </div>
                         <div className='flex flex-col'>
-                          <span className='font-medium text-[15px]'>
+                          <span className='font-medium text-base'>
                             {invitation.credentialSetName}
                           </span>
-                          <span className='text-[14px] text-[var(--text-muted)]'>
+                          <span className='text-[var(--text-muted)] text-sm'>
                             {invitation.organizationName}
                           </span>
                         </div>
@@ -684,8 +678,8 @@ export function CredentialSets() {
               )}
 
               {filteredMemberships.length > 0 && (
-                <div className='flex flex-col gap-[8px]'>
-                  <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                <div className='flex flex-col gap-2'>
+                  <div className='font-medium text-[var(--text-secondary)] text-sm'>
                     My Memberships
                   </div>
                   {filteredMemberships.map((membership) => (
@@ -693,15 +687,15 @@ export function CredentialSets() {
                       key={membership.membershipId}
                       className='flex items-center justify-between'
                     >
-                      <div className='flex items-center gap-[12px]'>
-                        <div className='flex h-9 w-9 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                      <div className='flex items-center gap-3'>
+                        <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {getProviderIcon(membership.providerId)}
                         </div>
                         <div className='flex flex-col'>
-                          <span className='font-medium text-[15px]'>
+                          <span className='font-medium text-base'>
                             {membership.credentialSetName}
                           </span>
-                          <span className='text-[14px] text-[var(--text-muted)]'>
+                          <span className='text-[var(--text-muted)] text-sm'>
                             {membership.organizationName}
                           </span>
                         </div>
@@ -724,17 +718,15 @@ export function CredentialSets() {
                 (filteredOwnedSets.length > 0 ||
                   ownedSetsLoading ||
                   (!searchTerm.trim() && ownedSets.length === 0)) && (
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                      Manage
-                    </div>
+                  <div className='flex flex-col gap-2'>
+                    <div className='font-medium text-[var(--text-secondary)] text-sm'>Manage</div>
                     {ownedSetsLoading ? (
                       <>
                         {[1, 2].map((i) => (
                           <div key={i} className='flex items-center justify-between'>
-                            <div className='flex items-center gap-[12px]'>
-                              <Skeleton className='h-9 w-9 rounded-[6px]' />
-                              <div className='flex flex-col gap-[4px]'>
+                            <div className='flex items-center gap-3'>
+                              <Skeleton className='h-9 w-9 rounded-md' />
+                              <div className='flex flex-col gap-1'>
                                 <Skeleton className='h-[14px] w-[120px]' />
                                 <Skeleton className='h-[12px] w-[80px]' />
                               </div>
@@ -743,24 +735,24 @@ export function CredentialSets() {
                         ))}
                       </>
                     ) : !searchTerm.trim() && ownedSets.length === 0 ? (
-                      <div className='text-[14px] text-[var(--text-muted)]'>
+                      <div className='text-[var(--text-muted)] text-sm'>
                         No polling groups created yet
                       </div>
                     ) : (
                       filteredOwnedSets.map((set) => (
                         <div key={set.id} className='flex items-center justify-between'>
-                          <div className='flex items-center gap-[12px]'>
-                            <div className='flex h-9 w-9 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                          <div className='flex items-center gap-3'>
+                            <div className='flex h-9 w-9 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                               {getProviderIcon(set.providerId)}
                             </div>
                             <div className='flex flex-col'>
-                              <span className='font-medium text-[15px]'>{set.name}</span>
-                              <span className='text-[14px] text-[var(--text-muted)]'>
+                              <span className='font-medium text-base'>{set.name}</span>
+                              <span className='text-[var(--text-muted)] text-sm'>
                                 {set.memberCount} member{set.memberCount !== 1 ? 's' : ''}
                               </span>
                             </div>
                           </div>
-                          <div className='flex items-center gap-[8px]'>
+                          <div className='flex items-center gap-2'>
                             <Button variant='default' onClick={() => setViewingSet(set)}>
                               Details
                             </Button>
@@ -786,8 +778,8 @@ export function CredentialSets() {
         <ModalContent size='sm'>
           <ModalHeader>Create Polling Group</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex flex-col gap-[4px]'>
+            <div className='flex flex-col gap-3'>
+              <div className='flex flex-col gap-1'>
                 <Label>Name</Label>
                 <Input
                   value={newSetName}
@@ -798,7 +790,7 @@ export function CredentialSets() {
                   placeholder='e.g., Marketing Team'
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
+              <div className='flex flex-col gap-1'>
                 <Label>Description (optional)</Label>
                 <Input
                   value={newSetDescription}
@@ -806,16 +798,16 @@ export function CredentialSets() {
                   placeholder='e.g., Poll emails for marketing automations'
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
+              <div className='flex flex-col gap-1'>
                 <Label>Email Provider</Label>
-                <div className='inline-flex gap-[2px]'>
+                <div className='inline-flex gap-0.5'>
                   <Button
                     variant={newSetProvider === 'google-email' ? 'active' : 'default'}
                     onClick={() => setNewSetProvider('google-email')}
                     className={cn(
-                      'rounded-r-none px-[8px] py-[4px] text-[13px]',
+                      'rounded-r-none px-2 py-1 text-small',
                       newSetProvider === 'google-email' &&
-                        'bg-[var(--border-1)] hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
+                        'bg-[var(--border-1)] hover-hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover-hover:bg-[var(--border-1)]'
                     )}
                   >
                     Gmail
@@ -824,19 +816,19 @@ export function CredentialSets() {
                     variant={newSetProvider === 'outlook' ? 'active' : 'default'}
                     onClick={() => setNewSetProvider('outlook')}
                     className={cn(
-                      'rounded-l-none px-[8px] py-[4px] text-[13px]',
+                      'rounded-l-none px-2 py-1 text-small',
                       newSetProvider === 'outlook' &&
-                        'bg-[var(--border-1)] hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
+                        'bg-[var(--border-1)] hover-hover:bg-[var(--border-1)] dark:bg-[var(--surface-5)] dark:hover-hover:bg-[var(--border-1)]'
                     )}
                   >
                     Outlook
                   </Button>
                 </div>
-                <p className='mt-[4px] text-[11px] text-[var(--text-tertiary)]'>
+                <p className='mt-1 text-[var(--text-tertiary)] text-xs'>
                   Members will connect their {getProviderDisplayName(newSetProvider)} account
                 </p>
               </div>
-              {createError && <p className='text-[13px] text-[var(--text-error)]'>{createError}</p>}
+              {createError && <p className='text-[var(--text-error)] text-small'>{createError}</p>}
             </div>
           </ModalBody>
           <ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
index 0b7f25ef0d0..32823978561 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credential-skeleton.tsx
@@ -8,12 +8,12 @@ const GRID_COLS = 'grid grid-cols-[minmax(0,1fr)_8px_minmax(0,1fr)_auto] items-c
 export function CredentialSkeleton() {
   return (
     <div className={GRID_COLS}>
-      <Skeleton className='h-9 rounded-[6px]' />
+      <Skeleton className='h-9 rounded-md' />
       <div />
-      <Skeleton className='h-9 rounded-[6px]' />
-      <div className='ml-[8px] flex items-center gap-0'>
-        <Skeleton className='h-9 w-9 rounded-[6px]' />
-        <Skeleton className='h-9 w-9 rounded-[6px]' />
+      <Skeleton className='h-9 rounded-md' />
+      <div className='ml-2 flex items-center gap-0'>
+        <Skeleton className='h-9 w-9 rounded-md' />
+        <Skeleton className='h-9 w-9 rounded-md' />
       </div>
     </div>
   )
@@ -24,19 +24,19 @@ export function CredentialSkeleton() {
  */
 export function CredentialsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[16px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[56px] rounded-[6px]' />
-        <Skeleton className='h-[30px] w-[50px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[56px] rounded-md' />
+        <Skeleton className='h-[30px] w-[50px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-5 w-[70px]' />
-        <div className='text-[13px] text-[var(--text-muted)]'>
+        <div className='text-[var(--text-muted)] text-small'>
           <Skeleton className='h-5 w-[160px]' />
         </div>
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-5 w-[55px]' />
         <CredentialSkeleton />
         <CredentialSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
index ee553726c17..dc8caac1ea8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/credentials/credentials-manager.tsx
@@ -174,7 +174,7 @@ function WorkspaceVariableRow({
         variant='default'
         onClick={() => onViewDetails(envKey)}
         disabled={!hasCredential}
-        className={`ml-[8px] h-9 ${!hasCredential ? 'opacity-40' : ''}`}
+        className={`ml-2 h-9 ${!hasCredential ? 'opacity-40' : ''}`}
       >
         Details
       </Button>
@@ -246,7 +246,7 @@ function NewWorkspaceVariableRow({ envVar, index, onUpdate }: NewWorkspaceVariab
       </Tooltip.Root>
       {keyError && (
         <div
-          className={`${COL_SPAN_ALL} mt-[-4px] text-[12px] text-[var(--text-error)] leading-tight`}
+          className={`${COL_SPAN_ALL} mt-[-4px] text-[var(--text-error)] text-caption leading-tight`}
         >
           {keyError}
         </div>
@@ -1046,7 +1046,7 @@ export function CredentialsManager() {
               variant='default'
               onClick={() => handleViewDetails(envVar.key, 'env_personal')}
               disabled={!hasCredential}
-              className={`ml-[8px] h-9 ${!hasCredential ? 'opacity-40' : ''}`}
+              className={`ml-2 h-9 ${!hasCredential ? 'opacity-40' : ''}`}
             >
               Details
             </Button>
@@ -1066,14 +1066,14 @@ export function CredentialsManager() {
           </Tooltip.Root>
           {keyError && (
             <div
-              className={`${COL_SPAN_ALL} mt-[-4px] text-[12px] text-[var(--text-error)] leading-tight`}
+              className={`${COL_SPAN_ALL} mt-[-4px] text-[var(--text-error)] text-caption leading-tight`}
             >
               {keyError}
             </div>
           )}
           {isConflict && !keyError && (
             <div
-              className={`${COL_SPAN_ALL} mt-[-4px] text-[12px] text-[var(--text-error)] leading-tight`}
+              className={`${COL_SPAN_ALL} mt-[-4px] text-[var(--text-error)] text-caption leading-tight`}
             >
               Workspace variable with the same name overrides this. Rename your personal key to use
               it.
@@ -1101,16 +1101,16 @@ export function CredentialsManager() {
   if (selectedCredential) {
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
+        <div className='flex h-full flex-col gap-4.5'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[18px]'>
-              <div className='flex items-center gap-[10px] border-[var(--border)] border-b pb-[12px]'>
-                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[8px] bg-[var(--surface-5)]'>
+            <div className='flex flex-col gap-4.5'>
+              <div className='flex items-center gap-2.5 border-[var(--border)] border-b pb-3'>
+                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
                   <Key className='h-[18px] w-[18px] text-[var(--text-tertiary)]' />
                 </div>
                 <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <p className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                  <div className='flex items-center gap-2'>
+                    <p className='truncate font-medium text-[var(--text-primary)] text-base'>
                       {selectedCredential.envKey || selectedCredential.displayName}
                     </p>
                     <Badge variant='gray-secondary' size='sm'>
@@ -1122,7 +1122,7 @@ export function CredentialsManager() {
                       </Badge>
                     )}
                   </div>
-                  <p className='text-[13px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-small'>
                     {selectedCredential.type === 'env_personal'
                       ? 'Personal secret'
                       : 'Workspace secret'}
@@ -1130,8 +1130,8 @@ export function CredentialsManager() {
                 </div>
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='flex items-center gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='flex items-center gap-1.5'>
                   Display Name
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
@@ -1167,7 +1167,7 @@ export function CredentialsManager() {
                 />
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
                 <Label>Description</Label>
                 <Textarea
                   id='credential-description'
@@ -1183,42 +1183,42 @@ export function CredentialsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[13px] text-[var(--status-red)]'>
+                <div className='rounded-lg border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-2.5 py-2 text-[var(--status-red)] text-small'>
                   {detailsError}
                 </div>
               )}
 
-              <div className='flex flex-col gap-[6px] border-[var(--border)] border-t pt-[16px]'>
+              <div className='flex flex-col gap-1.5 border-[var(--border)] border-t pt-4'>
                 <Label>Members ({activeMembers.length})</Label>
 
                 {membersLoading ? (
-                  <div className='flex flex-col gap-[8px]'>
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
+                  <div className='flex flex-col gap-2'>
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
                   </div>
                 ) : (
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     {activeMembers.map((member) => (
                       <div
                         key={member.id}
-                        className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px]'
+                        className='grid grid-cols-[1fr_120px_72px] items-center gap-2'
                       >
-                        <div className='flex min-w-0 items-center gap-[10px]'>
+                        <div className='flex min-w-0 items-center gap-2.5'>
                           <Avatar className='h-8 w-8 flex-shrink-0'>
                             <AvatarFallback
                               style={{
                                 background: getUserColor(member.userId || member.userEmail || ''),
                               }}
-                              className='border-0 text-[13px] text-white'
+                              className='border-0 text-small text-white'
                             >
                               {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
                             </AvatarFallback>
                           </Avatar>
                           <div className='min-w-0'>
-                            <p className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                            <p className='truncate font-medium text-[var(--text-primary)] text-sm'>
                               {member.userName || member.userEmail || member.userId}
                             </p>
-                            <p className='truncate text-[12px] text-[var(--text-tertiary)]'>
+                            <p className='truncate text-[var(--text-tertiary)] text-caption'>
                               {member.userEmail || member.userId}
                             </p>
                           </div>
@@ -1264,7 +1264,7 @@ export function CredentialsManager() {
                       </div>
                     ))}
                     {isSelectedAdmin && (
-                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px] border-[var(--border)] border-t pt-[8px]'>
+                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-2 border-[var(--border)] border-t pt-2'>
                         <Combobox
                           options={workspaceUserOptions}
                           value={
@@ -1305,8 +1305,8 @@ export function CredentialsManager() {
             </div>
           </div>
 
-          <div className='mt-auto flex items-center justify-end border-[var(--border)] border-t pt-[10px]'>
-            <div className='flex items-center gap-[8px]'>
+          <div className='mt-auto flex items-center justify-end border-[var(--border)] border-t pt-2.5'>
+            <div className='flex items-center gap-2'>
               <Button onClick={handleBackAttempt} variant='default'>
                 Back
               </Button>
@@ -1367,7 +1367,7 @@ export function CredentialsManager() {
   // List view
   return (
     <>
-      <div className='flex h-full flex-col gap-[16px]'>
+      <div className='flex h-full flex-col gap-4'>
         <div className='hidden'>
           <input
             type='text'
@@ -1391,8 +1391,8 @@ export function CredentialsManager() {
             readOnly
           />
         </div>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1429,36 +1429,36 @@ export function CredentialsManager() {
         </div>
 
         <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[16px]'>
+          <div className='flex flex-col gap-4'>
             {isLoading ? (
               <>
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Skeleton className='h-5 w-[70px]' />
-                  <div className='text-[13px] text-[var(--text-muted)]'>
+                  <div className='text-[var(--text-muted)] text-small'>
                     <Skeleton className='h-5 w-[160px]' />
                   </div>
                 </div>
-                <div className={`${GRID_COLS} gap-y-[8px]`}>
+                <div className={`${GRID_COLS} gap-y-2`}>
                   <Skeleton className={`${COL_SPAN_ALL} h-5 w-[55px]`} />
                   {Array.from({ length: 2 }, (_, i) => (
                     <div key={`personal-${i}`} className='contents'>
-                      <Skeleton className='h-9 rounded-[6px]' />
+                      <Skeleton className='h-9 rounded-md' />
                       <div />
-                      <Skeleton className='h-9 rounded-[6px]' />
-                      <Skeleton className='ml-[8px] h-9 w-[60px] rounded-[6px]' />
-                      <Skeleton className='h-9 w-9 rounded-[6px]' />
+                      <Skeleton className='h-9 rounded-md' />
+                      <Skeleton className='ml-2 h-9 w-[60px] rounded-md' />
+                      <Skeleton className='h-9 w-9 rounded-md' />
                     </div>
                   ))}
                 </div>
               </>
             ) : (
-              <div className={`${GRID_COLS} gap-y-[8px]`}>
+              <div className={`${GRID_COLS} gap-y-2`}>
                 {(!searchTerm.trim() ||
                   filteredWorkspaceEntries.length > 0 ||
                   filteredNewWorkspaceRows.length > 0) && (
                   <>
                     <div
-                      className={`${COL_SPAN_ALL} font-medium text-[13px] text-[var(--text-secondary)]`}
+                      className={`${COL_SPAN_ALL} font-medium text-[var(--text-secondary)] text-small`}
                     >
                       Workspace
                     </div>
@@ -1498,7 +1498,7 @@ export function CredentialsManager() {
                 {(!searchTerm.trim() || filteredEnvVars.length > 0) && (
                   <>
                     <div
-                      className={`${COL_SPAN_ALL} font-medium text-[13px] text-[var(--text-secondary)]`}
+                      className={`${COL_SPAN_ALL} font-medium text-[var(--text-secondary)] text-small`}
                     >
                       Personal
                     </div>
@@ -1517,7 +1517,7 @@ export function CredentialsManager() {
                     Object.keys(workspaceVars).length > 0 ||
                     newWorkspaceRows.length > 0) && (
                     <div
-                      className={`${COL_SPAN_ALL} py-[16px] text-center text-[13px] text-[var(--text-muted)]`}
+                      className={`${COL_SPAN_ALL} py-4 text-center text-[var(--text-muted)] text-small`}
                     >
                       No secrets found matching &ldquo;{searchTerm}&rdquo;
                     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
index 097ea1e39af..93f2895d768 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tool-skeleton.tsx
@@ -5,14 +5,14 @@ import { Skeleton } from '@/components/emcn'
  */
 export function CustomToolSkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
         <Skeleton className='h-[14px] w-[100px]' />
         <Skeleton className='h-[13px] w-[200px]' />
       </div>
-      <div className='flex flex-shrink-0 items-center gap-[8px]'>
-        <Skeleton className='h-[30px] w-[40px] rounded-[4px]' />
-        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
+      <div className='flex flex-shrink-0 items-center gap-2'>
+        <Skeleton className='h-[30px] w-[40px] rounded-sm' />
+        <Skeleton className='h-[30px] w-[54px] rounded-sm' />
       </div>
     </div>
   )
@@ -23,12 +23,12 @@ export function CustomToolSkeleton() {
  */
 export function CustomToolsSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[64px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <CustomToolSkeleton />
         <CustomToolSkeleton />
         <CustomToolSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
index 19391701553..48c4761483d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/custom-tools/custom-tools.tsx
@@ -86,9 +86,9 @@ export function CustomTools() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -102,43 +102,43 @@ export function CustomTools() {
             />
           </div>
           <Button onClick={() => setShowAddForm(true)} disabled={isLoading} variant='primary'>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load tools'}
               </p>
             </div>
           ) : isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <CustomToolSkeleton />
               <CustomToolSkeleton />
               <CustomToolSkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Add" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredTools.map((tool) => (
-                <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={tool.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[15px]'>
+                    <span className='truncate font-medium text-base'>
                       {tool.title || 'Unnamed Tool'}
                     </span>
                     {tool.schema?.function?.description && (
-                      <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                      <p className='truncate text-[var(--text-muted)] text-sm'>
                         {tool.schema.function.description}
                       </p>
                     )}
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     <Button variant='default' onClick={() => setEditingTool(tool.id)}>
                       Edit
                     </Button>
@@ -153,7 +153,7 @@ export function CustomTools() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No tools found matching "{searchTerm}"
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
index 037ada7b286..e58ef57af15 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general-skeleton.tsx
@@ -6,11 +6,11 @@ import { Skeleton } from '@/components/emcn'
  */
 export function GeneralSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[12px]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-3'>
         <Skeleton className='h-9 w-9 rounded-full' />
         <div className='flex flex-1 flex-col justify-center gap-[1px]'>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             <Skeleton className='h-5 w-24' />
             <Skeleton className='h-[10.5px] w-[10.5px]' />
           </div>
@@ -18,9 +18,9 @@ export function GeneralSkeleton() {
         </div>
       </div>
 
-      <div className='flex items-center justify-between border-b pb-[12px]'>
+      <div className='flex items-center justify-between border-b pb-3'>
         <Skeleton className='h-4 w-12' />
-        <Skeleton className='h-8 w-[100px] rounded-[4px]' />
+        <Skeleton className='h-8 w-[100px] rounded-sm' />
       </div>
 
       <div className='flex items-center justify-between'>
@@ -35,7 +35,7 @@ export function GeneralSkeleton() {
 
       <div className='flex items-center justify-between'>
         <Skeleton className='h-4 w-20' />
-        <Skeleton className='h-8 w-[100px] rounded-[4px]' />
+        <Skeleton className='h-8 w-[100px] rounded-sm' />
       </div>
 
       <div className='flex items-center justify-between'>
@@ -43,20 +43,20 @@ export function GeneralSkeleton() {
         <Skeleton className='h-[17px] w-[30px] rounded-full' />
       </div>
 
-      <div className='flex items-center justify-between border-t pt-[16px]'>
+      <div className='flex items-center justify-between border-t pt-4'>
         <Skeleton className='h-4 w-44' />
         <Skeleton className='h-[17px] w-[30px] rounded-full' />
       </div>
 
-      <div className='-mt-[8px] flex flex-col gap-1'>
+      <div className='-mt-2 flex flex-col gap-1'>
         <Skeleton className='h-[12px] w-full' />
         <Skeleton className='h-[12px] w-4/5' />
       </div>
 
-      <div className='mt-auto flex items-center gap-[8px]'>
-        <Skeleton className='h-8 w-20 rounded-[4px]' />
-        <Skeleton className='h-8 w-28 rounded-[4px]' />
-        <Skeleton className='ml-auto h-8 w-24 rounded-[4px]' />
+      <div className='mt-auto flex items-center gap-2'>
+        <Skeleton className='h-8 w-20 rounded-sm' />
+        <Skeleton className='h-8 w-28 rounded-sm' />
+        <Skeleton className='ml-auto h-8 w-24 rounded-sm' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
index c7d63ab87e0..10533ee0459 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/general/general.tsx
@@ -250,12 +250,12 @@ export function General() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* User Info Section */}
-      <div className='flex items-center gap-[12px]'>
+      <div className='flex items-center gap-3'>
         <div className='relative'>
           <div
-            className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-all hover:bg-[var(--bg)] ${!imageUrl ? 'border border-[var(--border)]' : ''}`}
+            className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full transition-all hover-hover:bg-[var(--bg)] ${!imageUrl ? 'border border-[var(--border)]' : ''}`}
             onClick={handleProfilePictureClick}
           >
             {(() => {
@@ -274,7 +274,7 @@ export function General() {
                 )
               }
               return (
-                <span className='font-medium text-[15px] text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-primary)] text-base'>
                   {getInitials(profile?.name) || ''}
                 </span>
               )
@@ -301,12 +301,12 @@ export function General() {
           />
         </div>
         <div className='flex flex-1 flex-col justify-center gap-[1px]'>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             {isEditingName ? (
               <>
                 <div className='relative inline-flex'>
                   <span
-                    className='invisible whitespace-pre font-medium text-[15px]'
+                    className='invisible whitespace-pre font-medium text-base'
                     aria-hidden='true'
                   >
                     {name || '\u00A0'}
@@ -317,7 +317,7 @@ export function General() {
                     onChange={(e) => setName(e.target.value)}
                     onKeyDown={handleKeyDown}
                     onBlur={handleInputBlur}
-                    className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 font-medium text-[15px] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='absolute top-0 left-0 h-full w-full border-0 bg-transparent p-0 font-medium text-base outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                     maxLength={100}
                     disabled={updateProfile.isPending}
                     autoComplete='off'
@@ -338,7 +338,7 @@ export function General() {
               </>
             ) : (
               <>
-                <h3 className='font-medium text-[15px]'>{profile?.name || ''}</h3>
+                <h3 className='font-medium text-base'>{profile?.name || ''}</h3>
                 <Button
                   variant='ghost'
                   className='h-[10.5px] w-[10.5px] flex-shrink-0 p-0'
@@ -350,12 +350,12 @@ export function General() {
               </>
             )}
           </div>
-          <p className='text-[14px] text-[var(--text-tertiary)]'>{profile?.email || ''}</p>
+          <p className='text-[var(--text-tertiary)] text-sm'>{profile?.email || ''}</p>
         </div>
       </div>
-      {uploadError && <p className='text-[14px] text-[var(--text-error)]'>{uploadError}</p>}
+      {uploadError && <p className='text-[var(--text-error)] text-sm'>{uploadError}</p>}
 
-      <div className='flex items-center justify-between border-b pb-[12px]'>
+      <div className='flex items-center justify-between border-b pb-3'>
         <Label htmlFor='theme-select'>Theme</Label>
         <div className='w-[100px]'>
           <Combobox
@@ -423,7 +423,7 @@ export function General() {
         />
       </div>
 
-      <div className='flex items-center justify-between border-t pt-[16px]'>
+      <div className='flex items-center justify-between border-t pt-4'>
         <Label htmlFor='telemetry'>Allow anonymous telemetry</Label>
         <Switch
           id='telemetry'
@@ -432,7 +432,7 @@ export function General() {
         />
       </div>
 
-      <p className='-mt-[8px] text-[13px] text-[var(--text-muted)]'>
+      <p className='-mt-2 text-[var(--text-muted)] text-small'>
         We use OpenTelemetry to collect anonymous usage data to improve Sim. You can opt-out at any
         time.
       </p>
@@ -448,7 +448,7 @@ export function General() {
         </div>
       )}
 
-      <div className='mt-auto flex items-center gap-[8px]'>
+      <div className='mt-auto flex items-center gap-2'>
         {!isAuthDisabled && (
           <>
             <Button onClick={handleSignOut} variant='active'>
@@ -481,7 +481,7 @@ export function General() {
               Click the link in the email to create a new password.
             </p>
             {resetPassword.error && (
-              <p className='mt-[8px] text-[13px] text-[var(--text-error)]'>
+              <p className='mt-2 text-[var(--text-error)] text-small'>
                 {resetPassword.error.message}
               </p>
             )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
index 7d2d2664917..34bd8694fc9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-enable-toggle.tsx
@@ -65,11 +65,9 @@ export function InboxEnableToggle() {
   return (
     <>
       <div className='flex items-center justify-between'>
-        <div className='flex flex-col gap-[2px]'>
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-            Enable email inbox
-          </span>
-          <span className='text-[13px] text-[var(--text-muted)]'>
+        <div className='flex flex-col gap-0.5'>
+          <span className='font-medium text-[var(--text-primary)] text-sm'>Enable email inbox</span>
+          <span className='text-[var(--text-muted)] text-small'>
             Allow this workspace to receive tasks via email
           </span>
         </div>
@@ -88,8 +86,8 @@ export function InboxEnableToggle() {
               An email address will be created for this workspace. Anyone in the allowed senders
               list can email it to create tasks.
             </p>
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='mt-4 flex flex-col gap-2'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>
                 Custom email prefix (optional)
               </p>
               <EmcnInput
@@ -99,7 +97,7 @@ export function InboxEnableToggle() {
                 className='h-9'
                 autoFocus
               />
-              <p className='text-[12px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-caption'>
                 Leave blank for an auto-generated address.
               </p>
             </div>
@@ -130,7 +128,7 @@ export function InboxEnableToggle() {
               ? Any emails sent to this address after disabling will not be delivered.{' '}
               <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
             </p>
-            <p className='mt-[8px] text-[var(--text-secondary)]'>
+            <p className='mt-2 text-[var(--text-secondary)]'>
               Your existing conversations and task history will be preserved.
             </p>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
index 71d3ed6c31b..93bcf2f98a1 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-settings-tab.tsx
@@ -96,17 +96,15 @@ export function InboxSettingsTab() {
 
   return (
     <>
-      <div className='flex flex-col gap-[24px]'>
+      <div className='flex flex-col gap-6'>
         {config?.address && (
-          <div className='flex flex-col gap-[6px]'>
-            <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Sim&apos;s email
-            </div>
+          <div className='flex flex-col gap-1.5'>
+            <div className='font-medium text-[var(--text-secondary)] text-sm'>Sim&apos;s email</div>
             <div className='flex items-center justify-between'>
-              <p className='text-[13px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-small'>
                 Send emails here to create tasks.
               </p>
-              <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-1.5'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <button
@@ -150,22 +148,20 @@ export function InboxSettingsTab() {
             <EmcnInput
               value={config.address}
               readOnly
-              className='h-9 cursor-default font-mono text-[13px]'
+              className='h-9 cursor-default font-mono text-small'
             />
           </div>
         )}
 
-        <div className='flex flex-col gap-[6px]'>
-          <div className='font-medium text-[14px] text-[var(--text-secondary)]'>
-            Allowed senders
-          </div>
-          <p className='text-[13px] text-[var(--text-muted)]'>
+        <div className='flex flex-col gap-1.5'>
+          <div className='font-medium text-[var(--text-secondary)] text-sm'>Allowed senders</div>
+          <p className='text-[var(--text-muted)] text-small'>
             Only emails from these addresses can create tasks.
           </p>
 
-          <div className='mt-[4px] flex flex-col gap-[1px] overflow-hidden rounded-[8px] border border-[var(--border)]'>
+          <div className='mt-1 flex flex-col gap-[1px] overflow-hidden rounded-lg border border-[var(--border)]'>
             {sendersLoading ? (
-              <div className='px-[12px] py-[10px]'>
+              <div className='px-3 py-2.5'>
                 <Skeleton className='h-[16px] w-[200px]' />
               </div>
             ) : (
@@ -173,11 +169,11 @@ export function InboxSettingsTab() {
                 {sendersData?.workspaceMembers.map((member) => (
                   <div
                     key={member.email}
-                    className='flex items-center justify-between border-[var(--border)] border-b px-[12px] py-[10px] last:border-b-0'
+                    className='flex items-center justify-between border-[var(--border)] border-b px-3 py-2.5 last:border-b-0'
                   >
-                    <div className='flex items-center gap-[8px]'>
-                      <span className='text-[13px] text-[var(--text-primary)]'>{member.email}</span>
-                      <Badge variant='gray' className='text-[11px]'>
+                    <div className='flex items-center gap-2'>
+                      <span className='text-[var(--text-primary)] text-small'>{member.email}</span>
+                      <Badge variant='gray' className='text-xs'>
                         member
                       </Badge>
                     </div>
@@ -187,19 +183,19 @@ export function InboxSettingsTab() {
                 {sendersData?.senders.map((sender) => (
                   <div
                     key={sender.id}
-                    className='flex items-center justify-between border-[var(--border)] border-b px-[12px] py-[10px] last:border-b-0'
+                    className='flex items-center justify-between border-[var(--border)] border-b px-3 py-2.5 last:border-b-0'
                   >
-                    <div className='flex items-center gap-[8px]'>
-                      <span className='text-[13px] text-[var(--text-primary)]'>{sender.email}</span>
+                    <div className='flex items-center gap-2'>
+                      <span className='text-[var(--text-primary)] text-small'>{sender.email}</span>
                       {sender.label && (
-                        <span className='text-[12px] text-[var(--text-muted)]'>
+                        <span className='text-[var(--text-muted)] text-caption'>
                           ({sender.label})
                         </span>
                       )}
                     </div>
                     <Button
                       variant='ghost'
-                      className='h-[28px] w-[28px] p-0 text-[var(--text-muted)] hover:text-[var(--text-error)]'
+                      className='h-[28px] w-[28px] p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-error)]'
                       onClick={() => handleRemoveSender(sender.id)}
                     >
                       <Trash2 className='h-[14px] w-[14px]' />
@@ -209,7 +205,7 @@ export function InboxSettingsTab() {
 
                 {sendersData?.workspaceMembers.length === 0 &&
                   sendersData?.senders.length === 0 && (
-                    <div className='px-[12px] py-[10px] text-[13px] text-[var(--text-muted)]'>
+                    <div className='px-3 py-2.5 text-[var(--text-muted)] text-small'>
                       No allowed senders configured.
                     </div>
                   )}
@@ -218,14 +214,14 @@ export function InboxSettingsTab() {
           </div>
 
           {removeSenderError && (
-            <p className='px-[12px] text-[13px] text-[var(--text-error)] leading-tight'>
+            <p className='px-3 text-[var(--text-error)] text-small leading-tight'>
               {removeSenderError}
             </p>
           )}
 
           <Button
             variant='ghost'
-            className='mt-[4px] w-fit'
+            className='mt-1 w-fit'
             onClick={() => {
               setNewSenderEmail('')
               setNewSenderLabel('')
@@ -233,7 +229,7 @@ export function InboxSettingsTab() {
               setIsAddSenderOpen(true)
             }}
           >
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add sender
           </Button>
         </div>
@@ -243,11 +239,9 @@ export function InboxSettingsTab() {
         <ModalContent size='sm'>
           <ModalHeader>Add allowed sender</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex flex-col gap-[4px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Email address
-                </p>
+            <div className='flex flex-col gap-3'>
+              <div className='flex flex-col gap-1'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Email address</p>
                 <EmcnInput
                   value={newSenderEmail}
                   onChange={(e) => {
@@ -259,10 +253,8 @@ export function InboxSettingsTab() {
                   autoFocus
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
-                <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Label (optional)
-                </p>
+              <div className='flex flex-col gap-1'>
+                <p className='font-medium text-[var(--text-secondary)] text-sm'>Label (optional)</p>
                 <EmcnInput
                   value={newSenderLabel}
                   onChange={(e) => setNewSenderLabel(e.target.value)}
@@ -271,7 +263,7 @@ export function InboxSettingsTab() {
                 />
               </div>
               {addSenderError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+                <p className='text-[var(--text-error)] text-small leading-tight'>
                   {addSenderError}
                 </p>
               )}
@@ -302,10 +294,8 @@ export function InboxSettingsTab() {
                 The old address will stop receiving emails immediately.
               </span>
             </p>
-            <div className='mt-[16px] flex flex-col gap-[4px]'>
-              <p className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                New email prefix
-              </p>
+            <div className='mt-4 flex flex-col gap-1'>
+              <p className='font-medium text-[var(--text-secondary)] text-sm'>New email prefix</p>
               <EmcnInput
                 value={newUsername}
                 onChange={(e) => {
@@ -317,7 +307,7 @@ export function InboxSettingsTab() {
                 autoFocus
               />
               {editAddressError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+                <p className='text-[var(--text-error)] text-small leading-tight'>
                   {editAddressError}
                 </p>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
index b65710925da..70768951c2d 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-skeleton.tsx
@@ -5,7 +5,7 @@ import { Skeleton } from '@/components/emcn'
  */
 export function InboxTaskSkeleton() {
   return (
-    <div className='flex flex-col gap-[4px] rounded-[8px] border border-[var(--border)] p-[12px]'>
+    <div className='flex flex-col gap-1 rounded-lg border border-[var(--border)] p-3'>
       <div className='flex items-center justify-between'>
         <Skeleton className='h-[14px] w-[200px]' />
         <Skeleton className='h-[14px] w-[50px]' />
@@ -24,29 +24,29 @@ export function InboxTaskSkeleton() {
  */
 export function InboxSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <Skeleton className='h-[32px] w-full rounded-[8px]' />
-      <Skeleton className='h-[20px] w-[140px] rounded-[4px]' />
-      <Skeleton className='h-[40px] w-full rounded-[8px]' />
-      <div className='flex flex-col gap-[6px]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <Skeleton className='h-[32px] w-full rounded-lg' />
+      <Skeleton className='h-[20px] w-[140px] rounded-sm' />
+      <Skeleton className='h-[40px] w-full rounded-lg' />
+      <div className='flex flex-col gap-1.5'>
         <Skeleton className='h-[14px] w-[100px]' />
         <Skeleton className='h-[13px] w-[200px]' />
-        <Skeleton className='h-[40px] w-full rounded-[8px]' />
+        <Skeleton className='h-[40px] w-full rounded-lg' />
       </div>
-      <div className='flex flex-col gap-[6px]'>
+      <div className='flex flex-col gap-1.5'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[13px] w-[250px]' />
-        <Skeleton className='h-[80px] w-full rounded-[8px]' />
+        <Skeleton className='h-[80px] w-full rounded-lg' />
       </div>
-      <div className='border-[var(--border)] border-t pt-[16px]'>
+      <div className='border-[var(--border)] border-t pt-4'>
         <Skeleton className='h-[14px] w-[40px]' />
-        <Skeleton className='mt-[2px] h-[13px] w-[220px]' />
+        <Skeleton className='mt-0.5 h-[13px] w-[220px]' />
       </div>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[100px] rounded-[6px]' />
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[100px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <InboxTaskSkeleton />
         <InboxTaskSkeleton />
         <InboxTaskSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
index d3cce09a891..4d0803c5c72 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox-task-list.tsx
@@ -73,9 +73,9 @@ export function InboxTaskList() {
   )
 
   return (
-    <div className='flex flex-col gap-[12px]'>
-      <div className='flex items-center gap-[8px]'>
-        <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+    <div className='flex flex-col gap-3'>
+      <div className='flex items-center gap-2'>
+        <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
           <Search
             className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
             strokeWidth={2}
@@ -91,7 +91,7 @@ export function InboxTaskList() {
           <DropdownMenuTrigger asChild>
             <Button
               variant='ghost'
-              className='h-[32px] gap-[4px] px-[8px] text-[13px] text-[var(--text-secondary)]'
+              className='h-[32px] gap-1 px-2 text-[var(--text-secondary)] text-small'
             >
               {STATUS_OPTIONS.find((o) => o.value === statusFilter)?.label ?? 'All statuses'}
               <ChevronDown className='h-[12px] w-[12px]' />
@@ -111,13 +111,13 @@ export function InboxTaskList() {
 
       <div className='min-h-0 flex-1 overflow-y-auto'>
         {isLoading ? (
-          <div className='flex flex-col gap-[4px]'>
+          <div className='flex flex-col gap-1'>
             {Array.from({ length: 3 }).map((_, i) => (
               <InboxTaskSkeleton key={i} />
             ))}
           </div>
         ) : filteredTasks.length === 0 ? (
-          <div className='flex h-[200px] items-center justify-center text-[14px] text-[var(--text-muted)]'>
+          <div className='flex h-[200px] items-center justify-center text-[var(--text-muted)] text-sm'>
             {searchTerm.trim()
               ? `No tasks matching "${searchTerm}"`
               : config?.address
@@ -125,7 +125,7 @@ export function InboxTaskList() {
                 : 'No email tasks yet.'}
           </div>
         ) : (
-          <div className='flex flex-col gap-[4px]'>
+          <div className='flex flex-col gap-1'>
             {filteredTasks.map((task) => {
               const statusBadge = STATUS_BADGES[task.status] || STATUS_BADGES.received
               const isClickable =
@@ -133,8 +133,8 @@ export function InboxTaskList() {
               return (
                 <div
                   key={task.id}
-                  className={`flex flex-col gap-[4px] rounded-[8px] border border-[var(--border)] p-[12px] transition-colors ${
-                    isClickable ? 'cursor-pointer hover:bg-[var(--surface-2)]' : ''
+                  className={`flex flex-col gap-1 rounded-lg border border-[var(--border)] p-3 transition-colors ${
+                    isClickable ? 'cursor-pointer hover-hover:bg-[var(--surface-2)]' : ''
                   }`}
                   role={isClickable ? 'button' : undefined}
                   tabIndex={isClickable ? 0 : undefined}
@@ -147,41 +147,41 @@ export function InboxTaskList() {
                   }}
                 >
                   <div className='flex items-center justify-between'>
-                    <span className='max-w-[70%] truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                    <span className='max-w-[70%] truncate font-medium text-[var(--text-primary)] text-sm'>
                       {task.subject}
                     </span>
-                    <div className='flex items-center gap-[6px]'>
+                    <div className='flex items-center gap-1.5'>
                       {task.hasAttachments && (
                         <Paperclip className='h-[12px] w-[12px] text-[var(--text-muted)]' />
                       )}
-                      <span className='whitespace-nowrap text-[12px] text-[var(--text-muted)]'>
+                      <span className='whitespace-nowrap text-[var(--text-muted)] text-caption'>
                         {formatRelativeTime(task.createdAt)}
                       </span>
                     </div>
                   </div>
                   <div className='flex items-center justify-between'>
-                    <span className='max-w-[60%] truncate text-[12px] text-[var(--text-muted)]'>
+                    <span className='max-w-[60%] truncate text-[var(--text-muted)] text-caption'>
                       {task.fromName || task.fromEmail}
                     </span>
-                    <Badge variant={statusBadge.variant} className='text-[11px]'>
+                    <Badge variant={statusBadge.variant} className='text-xs'>
                       {task.status === 'processing' && (
-                        <span className='mr-[4px] inline-block h-[6px] w-[6px] animate-pulse rounded-full bg-yellow-500' />
+                        <span className='mr-1 inline-block h-[6px] w-[6px] animate-pulse rounded-full bg-yellow-500' />
                       )}
                       {statusBadge.label}
                     </Badge>
                   </div>
                   {task.status === 'rejected' && task.rejectionReason && (
-                    <span className='text-[12px] text-[var(--text-muted)] line-through'>
+                    <span className='text-[var(--text-muted)] text-caption line-through'>
                       {formatRejectionReason(task.rejectionReason)}
                     </span>
                   )}
                   {task.status === 'failed' && task.errorMessage && (
-                    <span className='truncate text-[12px] text-[var(--text-error)]'>
+                    <span className='truncate text-[var(--text-error)] text-caption'>
                       {task.errorMessage}
                     </span>
                   )}
                   {task.status === 'completed' && task.resultSummary && (
-                    <span className='truncate text-[12px] text-[var(--text-muted)]'>
+                    <span className='truncate text-[var(--text-muted)] text-caption'>
                       {task.resultSummary}
                     </span>
                   )}
@@ -189,7 +189,7 @@ export function InboxTaskList() {
                     task.status !== 'failed' &&
                     task.status !== 'rejected' &&
                     task.bodyPreview && (
-                      <span className='truncate text-[12px] text-[var(--text-muted)]'>
+                      <span className='truncate text-[var(--text-muted)] text-caption'>
                         {task.bodyPreview}
                       </span>
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
index 3a1d93cfa20..92716f6a651 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/inbox/inbox.tsx
@@ -31,12 +31,12 @@ export function Inbox() {
 
   if (isBillingEnabled && !isMaxPlan) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[16px] py-[80px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-4 py-[80px]'>
         <div className='text-center'>
-          <h3 className='font-medium text-[16px] text-[var(--text-primary)]'>
+          <h3 className='font-medium text-[var(--text-primary)] text-md'>
             Sim Mailer requires a Max plan
           </h3>
-          <p className='mt-[6px] text-[14px] text-[var(--text-muted)]'>
+          <p className='mt-1.5 text-[var(--text-muted)] text-sm'>
             Upgrade to Max to receive tasks via email and let Sim work on your behalf.
           </p>
         </div>
@@ -45,14 +45,14 @@ export function Inbox() {
           onClick={() => router.push(`/workspace/${workspaceId}/settings/subscription`)}
         >
           Upgrade to Max
-          <ArrowRight className='ml-[6px] h-[14px] w-[14px]' />
+          <ArrowRight className='ml-1.5 h-[14px] w-[14px]' />
         </Button>
       </div>
     )
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       <InboxEnableToggle />
 
       {config?.enabled && (
@@ -60,9 +60,9 @@ export function Inbox() {
           <div className='border-[var(--border)] border-t' />
           <InboxSettingsTab />
 
-          <div className='border-[var(--border)] border-t pt-[16px]'>
-            <div className='font-medium text-[14px] text-[var(--text-secondary)]'>Inbox</div>
-            <p className='mt-[2px] text-[13px] text-[var(--text-muted)]'>
+          <div className='border-[var(--border)] border-t pt-4'>
+            <div className='font-medium text-[var(--text-secondary)] text-sm'>Inbox</div>
+            <p className='mt-0.5 text-[var(--text-muted)] text-small'>
               Email tasks received by this workspace.
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
index c83a68eef5f..35c86d46a87 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/integrations/integrations-manager.tsx
@@ -646,11 +646,11 @@ export function IntegrationsManager() {
               )}
             </div>
           )}
-          <div className='flex flex-col gap-[12px]'>
-            <div className='flex flex-col gap-[10px]'>
+          <div className='flex flex-col gap-3'>
+            <div className='flex flex-col gap-2.5'>
               <div>
                 <Label>Account</Label>
-                <div className='mt-[6px]'>
+                <div className='mt-1.5'>
                   <Combobox
                     options={oauthServiceOptions}
                     value={
@@ -673,7 +673,7 @@ export function IntegrationsManager() {
                               oauthServiceOptions.find((o) => o.value === createOAuthProviderId)
                                 ?.label || ''
                             return (
-                              <div className='flex items-center gap-[8px]'>
+                              <div className='flex items-center gap-2'>
                                 {config &&
                                   createElement(config.icon, {
                                     className: 'h-[14px] w-[14px] flex-shrink-0',
@@ -697,7 +697,7 @@ export function IntegrationsManager() {
                   placeholder='Integration name'
                   autoComplete='off'
                   data-lpignore='true'
-                  className='mt-[6px]'
+                  className='mt-1.5'
                 />
               </div>
               <div>
@@ -709,7 +709,7 @@ export function IntegrationsManager() {
                   maxLength={500}
                   autoComplete='off'
                   data-lpignore='true'
-                  className='mt-[6px] min-h-[80px] resize-none'
+                  className='mt-1.5 min-h-[80px] resize-none'
                 />
               </div>
             </div>
@@ -774,10 +774,10 @@ export function IntegrationsManager() {
             ? <span className='text-[var(--text-error)]'>This action cannot be undone.</span>
           </p>
           {deleteError && (
-            <div className='mt-[12px] rounded-[8px] border border-red-500/50 bg-red-50 p-[12px] dark:bg-red-950/30'>
-              <div className='flex items-start gap-[10px]'>
+            <div className='mt-3 rounded-lg border border-red-500/50 bg-red-50 p-3 dark:bg-red-950/30'>
+              <div className='flex items-start gap-2.5'>
                 <AlertTriangle className='mt-[1px] h-4 w-4 flex-shrink-0 text-red-600 dark:text-red-400' />
-                <p className='text-[13px] text-red-700 dark:text-red-300'>{deleteError}</p>
+                <p className='text-red-700 text-small dark:text-red-300'>{deleteError}</p>
               </div>
             </div>
           )}
@@ -822,24 +822,24 @@ export function IntegrationsManager() {
   if (selectedCredential) {
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
+        <div className='flex h-full flex-col gap-4.5'>
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[18px]'>
-              <div className='flex items-center gap-[10px] border-[var(--border)] border-b pb-[12px]'>
-                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-[8px] bg-[var(--surface-5)]'>
+            <div className='flex flex-col gap-4.5'>
+              <div className='flex items-center gap-2.5 border-[var(--border)] border-b pb-3'>
+                <div className='flex h-9 w-9 flex-shrink-0 items-center justify-center overflow-hidden rounded-lg bg-[var(--surface-5)]'>
                   {selectedOAuthServiceConfig ? (
                     createElement(selectedOAuthServiceConfig.icon, {
                       className: 'h-[18px] w-[18px]',
                     })
                   ) : (
-                    <span className='font-medium text-[13px] text-[var(--text-tertiary)]'>
+                    <span className='font-medium text-[var(--text-tertiary)] text-small'>
                       {resolveProviderLabel(selectedCredential.providerId).slice(0, 1)}
                     </span>
                   )}
                 </div>
                 <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <p className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                  <div className='flex items-center gap-2'>
+                    <p className='truncate font-medium text-[var(--text-primary)] text-base'>
                       {resolveProviderLabel(selectedCredential.providerId) || 'Unknown service'}
                     </p>
                     <Badge variant='gray-secondary' size='sm'>
@@ -851,12 +851,12 @@ export function IntegrationsManager() {
                       </Badge>
                     )}
                   </div>
-                  <p className='text-[13px] text-[var(--text-muted)]'>Connected service</p>
+                  <p className='text-[var(--text-muted)] text-small'>Connected service</p>
                 </div>
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='flex items-center gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='flex items-center gap-1.5'>
                   Display Name
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
@@ -892,7 +892,7 @@ export function IntegrationsManager() {
                 />
               </div>
 
-              <div className='flex flex-col gap-[6px]'>
+              <div className='flex flex-col gap-1.5'>
                 <Label>Description</Label>
                 <Textarea
                   id='credential-description'
@@ -908,42 +908,42 @@ export function IntegrationsManager() {
               </div>
 
               {detailsError && (
-                <div className='rounded-[8px] border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-[10px] py-[8px] text-[13px] text-[var(--status-red)]'>
+                <div className='rounded-lg border border-[var(--status-red)]/40 bg-[var(--status-red)]/10 px-2.5 py-2 text-[var(--status-red)] text-small'>
                   {detailsError}
                 </div>
               )}
 
-              <div className='flex flex-col gap-[6px] border-[var(--border)] border-t pt-[16px]'>
+              <div className='flex flex-col gap-1.5 border-[var(--border)] border-t pt-4'>
                 <Label>Members ({activeMembers.length})</Label>
 
                 {membersLoading ? (
-                  <div className='flex flex-col gap-[8px]'>
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
-                    <Skeleton className='h-[44px] w-full rounded-[8px]' />
+                  <div className='flex flex-col gap-2'>
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
+                    <Skeleton className='h-[44px] w-full rounded-lg' />
                   </div>
                 ) : (
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     {activeMembers.map((member) => (
                       <div
                         key={member.id}
-                        className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px]'
+                        className='grid grid-cols-[1fr_120px_72px] items-center gap-2'
                       >
-                        <div className='flex min-w-0 items-center gap-[10px]'>
+                        <div className='flex min-w-0 items-center gap-2.5'>
                           <Avatar className='h-8 w-8 flex-shrink-0'>
                             <AvatarFallback
                               style={{
                                 background: getUserColor(member.userId || member.userEmail || ''),
                               }}
-                              className='border-0 text-[13px] text-white'
+                              className='border-0 text-small text-white'
                             >
                               {(member.userName || member.userEmail || '?').charAt(0).toUpperCase()}
                             </AvatarFallback>
                           </Avatar>
                           <div className='min-w-0'>
-                            <p className='truncate font-medium text-[14px] text-[var(--text-primary)]'>
+                            <p className='truncate font-medium text-[var(--text-primary)] text-sm'>
                               {member.userName || member.userEmail || member.userId}
                             </p>
-                            <p className='truncate text-[12px] text-[var(--text-tertiary)]'>
+                            <p className='truncate text-[var(--text-tertiary)] text-caption'>
                               {member.userEmail || member.userId}
                             </p>
                           </div>
@@ -989,7 +989,7 @@ export function IntegrationsManager() {
                       </div>
                     ))}
                     {isSelectedAdmin && (
-                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-[8px] border-[var(--border)] border-t pt-[8px]'>
+                      <div className='grid grid-cols-[1fr_120px_72px] items-center gap-2 border-[var(--border)] border-t pt-2'>
                         <Combobox
                           options={workspaceUserOptions}
                           value={
@@ -1030,8 +1030,8 @@ export function IntegrationsManager() {
             </div>
           </div>
 
-          <div className='mt-auto flex items-center justify-between border-[var(--border)] border-t pt-[10px]'>
-            <div className='flex items-center gap-[8px]'>
+          <div className='mt-auto flex items-center justify-between border-[var(--border)] border-t pt-2.5'>
+            <div className='flex items-center gap-2'>
               {isSelectedAdmin && (
                 <>
                   <Button
@@ -1049,7 +1049,7 @@ export function IntegrationsManager() {
                       onClick={handleShareWithWorkspace}
                       disabled={isShareingWithWorkspace || workspaceUserOptions.length === 0}
                     >
-                      <Share2 className='mr-[6px] h-[13px] w-[13px]' />
+                      <Share2 className='mr-1.5 h-[13px] w-[13px]' />
                       {isShareingWithWorkspace ? 'Sharing...' : 'Share'}
                     </Button>
                   )}
@@ -1063,7 +1063,7 @@ export function IntegrationsManager() {
                 </>
               )}
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button onClick={handleBackAttempt} variant='default'>
                 Back
               </Button>
@@ -1090,9 +1090,9 @@ export function IntegrationsManager() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1110,47 +1110,47 @@ export function IntegrationsManager() {
             disabled={credentialsLoading}
             variant='primary'
           >
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Connect
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {credentialsLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <CredentialSkeleton />
               <CredentialSkeleton />
               <CredentialSkeleton />
             </div>
           ) : !hasCredentials ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Connect" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {sortedCredentials.map((credential) => {
                 const serviceConfig = credential.providerId
                   ? getServiceConfigByProviderId(credential.providerId)
                   : null
 
                 return (
-                  <div key={credential.id} className='flex items-center justify-between gap-[12px]'>
-                    <div className='flex min-w-0 items-center gap-[10px]'>
+                  <div key={credential.id} className='flex items-center justify-between gap-3'>
+                    <div className='flex min-w-0 items-center gap-2.5'>
                       {serviceConfig && (
-                        <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-[6px] bg-[var(--surface-5)]'>
+                        <div className='flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-[var(--surface-5)]'>
                           {createElement(serviceConfig.icon, { className: 'h-4 w-4' })}
                         </div>
                       )}
                       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                        <span className='truncate font-medium text-[15px]'>
+                        <span className='truncate font-medium text-base'>
                           {credential.displayName}
                         </span>
-                        <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                        <p className='truncate text-[var(--text-muted)] text-sm'>
                           {credential.description || resolveProviderLabel(credential.providerId)}
                         </p>
                       </div>
                     </div>
-                    <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                    <div className='flex flex-shrink-0 items-center gap-1'>
                       <Button variant='default' onClick={() => handleSelectCredential(credential)}>
                         Details
                       </Button>
@@ -1168,7 +1168,7 @@ export function IntegrationsManager() {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No integrations found matching &ldquo;{searchTerm}&rdquo;
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
index a7ded899ac2..04beeb1484a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/form-field/form-field.tsx
@@ -8,11 +8,11 @@ interface FormFieldProps {
 
 export function FormField({ label, children, optional }: FormFieldProps) {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
-      <Label className='w-[100px] shrink-0 font-medium text-[14px] text-[var(--text-secondary)]'>
+    <div className='flex items-center justify-between gap-3'>
+      <Label className='w-[100px] shrink-0 font-medium text-[var(--text-secondary)] text-sm'>
         {label}
         {optional && (
-          <span className='ml-1 font-normal text-[11px] text-[var(--text-muted)]'>(optional)</span>
+          <span className='ml-1 font-normal text-[var(--text-muted)] text-xs'>(optional)</span>
         )}
       </Label>
       <div className='relative flex-1'>{children}</div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
index 1b2145991f6..5e6f8db16a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-form-modal/mcp-server-form-modal.tsx
@@ -149,7 +149,7 @@ function FormattedInput({
         onInput={handleScroll}
         className='h-9 text-transparent caret-[var(--text-primary)] placeholder:text-[var(--text-muted)]'
       />
-      <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-[8px] py-[6px] font-medium font-sans text-sm'>
+      <div className='pointer-events-none absolute inset-0 flex items-center overflow-hidden px-2 py-1.5 font-medium font-sans text-sm'>
         <div className='whitespace-nowrap' style={{ transform: `translateX(-${scrollLeft}px)` }}>
           {formatDisplayText(value, { availableEnvVars })}
         </div>
@@ -219,7 +219,7 @@ function HeaderRow({
   }
 
   return (
-    <div className='relative flex items-center gap-[8px]'>
+    <div className='relative flex items-center gap-2'>
       <FormattedInput
         placeholder='Name'
         value={header.key || ''}
@@ -598,7 +598,7 @@ export function McpServerFormModal({
         <ModalHeader>{title}</ModalHeader>
         <ModalBody>
           {formMode === 'json' ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Textarea
                 placeholder={`{\n  "mcpServers": {\n    "server-name": {\n      "url": "https://...",\n      "headers": {\n        "X-API-Key": "..."\n      }\n    }\n  }\n}`}
                 value={jsonInput}
@@ -608,12 +608,12 @@ export function McpServerFormModal({
                   if (testResult) clearTestResult()
                   if (submitError) setSubmitError(null)
                 }}
-                className='min-h-[200px] font-mono text-[13px]'
+                className='min-h-[200px] font-mono text-small'
               />
-              {jsonError && <p className='text-[12px] text-[var(--text-error)]'>{jsonError}</p>}
+              {jsonError && <p className='text-[var(--text-error)] text-caption'>{jsonError}</p>}
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <FormField label='Server Name'>
                 <EmcnInput
                   placeholder='e.g., My MCP Server'
@@ -646,17 +646,15 @@ export function McpServerFormModal({
                   onScroll={setUrlScrollLeft}
                 />
                 {isDomainBlocked && (
-                  <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>
+                  <p className='mt-1 text-[var(--text-error)] text-caption'>
                     Domain not permitted by server policy
                   </p>
                 )}
               </FormField>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
-                  Headers
-                </span>
-                <div className='flex max-h-[140px] flex-col gap-[8px] overflow-y-auto'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-small'>Headers</span>
+                <div className='flex max-h-[140px] flex-col gap-2 overflow-y-auto'>
                   {(formData.headers || []).map((header, index) => (
                     <HeaderRow
                       key={index}
@@ -683,10 +681,10 @@ export function McpServerFormModal({
         </ModalBody>
         <ModalFooter>
           {submitError && (
-            <p className='mb-[8px] w-full text-[13px] text-[var(--text-error)]'>{submitError}</p>
+            <p className='mb-2 w-full text-[var(--text-error)] text-small'>{submitError}</p>
           )}
           <div className='flex w-full items-center justify-between'>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               {mode === 'add' && (
                 <Button
                   type='button'
@@ -711,7 +709,7 @@ export function McpServerFormModal({
                 </Button>
               )}
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button variant='ghost' onClick={() => onOpenChange(false)}>
                 Cancel
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
index a0c34a19cc6..87b6f0ce01a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/components/mcp-server-skeleton/mcp-server-skeleton.tsx
@@ -6,17 +6,17 @@ import { Skeleton } from '@/components/emcn'
  */
 export function McpServerSkeleton() {
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <Skeleton className='h-[14px] w-[100px]' />
           <Skeleton className='h-[13px] w-[80px]' />
         </div>
         <Skeleton className='h-[13px] w-[120px]' />
       </div>
-      <div className='flex flex-shrink-0 items-center gap-[4px]'>
-        <Skeleton className='h-[30px] w-[60px] rounded-[4px]' />
-        <Skeleton className='h-[30px] w-[54px] rounded-[4px]' />
+      <div className='flex flex-shrink-0 items-center gap-1'>
+        <Skeleton className='h-[30px] w-[60px] rounded-sm' />
+        <Skeleton className='h-[30px] w-[54px] rounded-sm' />
       </div>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
index 40ccbf66d6b..8ac8f6282df 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp-skeleton.tsx
@@ -6,12 +6,12 @@ import { McpServerSkeleton } from '@/app/workspace/[workspaceId]/settings/compon
  */
 export function McpSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px]'>
-        <Skeleton className='h-[30px] flex-1 rounded-[8px]' />
-        <Skeleton className='h-[30px] w-[64px] rounded-[6px]' />
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2'>
+        <Skeleton className='h-[30px] flex-1 rounded-lg' />
+        <Skeleton className='h-[30px] w-[64px] rounded-md' />
       </div>
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         <McpServerSkeleton />
         <McpServerSkeleton />
         <McpServerSkeleton />
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
index 6bdfc72166d..60e6a0ea683 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/mcp/mcp.tsx
@@ -111,16 +111,16 @@ function ServerListItem({
   const isError = server.connectionStatus === 'error'
 
   return (
-    <div className='flex items-center justify-between gap-[12px]'>
+    <div className='flex items-center justify-between gap-3'>
       <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-        <div className='flex items-center gap-[6px]'>
-          <span className='max-w-[200px] truncate font-medium text-[15px]'>
+        <div className='flex items-center gap-1.5'>
+          <span className='max-w-[200px] truncate font-medium text-base'>
             {server.name || 'Unnamed Server'}
           </span>
-          <span className='text-[14px] text-[var(--text-secondary)]'>({transportLabel})</span>
+          <span className='text-[var(--text-secondary)] text-sm'>({transportLabel})</span>
         </div>
         <p
-          className={`truncate text-[14px] ${isError ? 'text-red-500 dark:text-red-400' : 'text-[var(--text-muted)]'}`}
+          className={`truncate text-sm ${isError ? 'text-red-500 dark:text-red-400' : 'text-[var(--text-muted)]'}`}
         >
           {isRefreshing
             ? 'Refreshing...'
@@ -129,7 +129,7 @@ function ServerListItem({
               : toolsLabel}
         </p>
       </div>
-      <div className='flex flex-shrink-0 items-center gap-[4px]'>
+      <div className='flex flex-shrink-0 items-center gap-1'>
         <Button variant='default' onClick={onViewDetails}>
           Details
         </Button>
@@ -413,47 +413,45 @@ export function MCP({ initialServerId }: MCPProps) {
     const transportLabel = formatTransportLabel(server.transport || 'http')
 
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[18px]'>
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                Server Name
-              </span>
-              <p className='text-[15px] text-[var(--text-secondary)]'>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>Server Name</span>
+              <p className='text-[var(--text-secondary)] text-base'>
                 {server.name || 'Unnamed Server'}
               </p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>Transport</span>
-              <p className='text-[15px] text-[var(--text-secondary)]'>{transportLabel}</p>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>Transport</span>
+              <p className='text-[var(--text-secondary)] text-base'>{transportLabel}</p>
             </div>
 
             {server.url && (
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-primary)]'>URL</span>
-                <p className='break-all text-[15px] text-[var(--text-secondary)]'>{server.url}</p>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-primary)] text-sm'>URL</span>
+                <p className='break-all text-[var(--text-secondary)] text-base'>{server.url}</p>
               </div>
             )}
 
             {server.connectionStatus === 'error' && (
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-primary)]'>Status</span>
-                <p className='text-[15px] text-red-500 dark:text-red-400'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-primary)] text-sm'>Status</span>
+                <p className='text-base text-red-500 dark:text-red-400'>
                   {server.lastError || 'Unable to connect'}
                 </p>
               </div>
             )}
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>
                 Tools ({tools.length})
               </span>
               {tools.length === 0 ? (
-                <p className='text-[14px] text-[var(--text-muted)]'>No tools available</p>
+                <p className='text-[var(--text-muted)] text-sm'>No tools available</p>
               ) : (
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   {tools.map((tool) => {
                     const issues = getStoredToolIssues(server.id, tool.name)
                     const affectedWorkflows = issues.map((i) => i.workflowName)
@@ -466,20 +464,20 @@ export function MCP({ initialServerId }: MCPProps) {
                     return (
                       <div
                         key={tool.name}
-                        className='overflow-hidden rounded-[6px] border bg-[var(--surface-3)]'
+                        className='overflow-hidden rounded-md border bg-[var(--surface-3)]'
                       >
                         <button
                           type='button'
                           onClick={() => hasParams && toggleToolExpanded(tool.name)}
                           className={cn(
-                            'flex w-full items-start justify-between px-[10px] py-[8px] text-left',
-                            hasParams && 'cursor-pointer hover:bg-[var(--surface-4)]'
+                            'flex w-full items-start justify-between px-2.5 py-2 text-left',
+                            hasParams && 'cursor-pointer hover-hover:bg-[var(--surface-4)]'
                           )}
                           disabled={!hasParams}
                         >
                           <div className='flex-1'>
-                            <div className='flex h-[16px] items-center gap-[6px]'>
-                              <p className='font-medium text-[14px] text-[var(--text-primary)] leading-none'>
+                            <div className='flex h-[16px] items-center gap-1.5'>
+                              <p className='font-medium text-[var(--text-primary)] text-sm leading-none'>
                                 {tool.name}
                               </p>
                               {issues.length > 0 && (
@@ -501,7 +499,7 @@ export function MCP({ initialServerId }: MCPProps) {
                               )}
                             </div>
                             {tool.description && (
-                              <p className='mt-[4px] text-[14px] text-[var(--text-tertiary)]'>
+                              <p className='mt-1 text-[var(--text-tertiary)] text-sm'>
                                 {tool.description}
                               </p>
                             )}
@@ -509,7 +507,7 @@ export function MCP({ initialServerId }: MCPProps) {
                           {hasParams && (
                             <ChevronDown
                               className={cn(
-                                'mt-[2px] h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
+                                'mt-0.5 h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-200',
                                 isExpanded && 'rotate-180'
                               )}
                             />
@@ -517,11 +515,11 @@ export function MCP({ initialServerId }: MCPProps) {
                         </button>
 
                         {isExpanded && hasParams && (
-                          <div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] py-[8px]'>
-                            <p className='mb-[6px] font-medium text-[11px] text-[var(--text-muted)] uppercase tracking-wide'>
+                          <div className='border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 py-2'>
+                            <p className='mb-1.5 font-medium text-[var(--text-muted)] text-xs uppercase tracking-wide'>
                               Parameters
                             </p>
-                            <div className='flex flex-col gap-[6px]'>
+                            <div className='flex flex-col gap-1.5'>
                               {Object.entries(tool.inputSchema!.properties!).map(
                                 ([paramName, param]) => {
                                   const isRequired = requiredParams.includes(paramName)
@@ -537,10 +535,10 @@ export function MCP({ initialServerId }: MCPProps) {
                                   return (
                                     <div
                                       key={paramName}
-                                      className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] px-[8px] py-[6px]'
+                                      className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-3)] px-2 py-1.5'
                                     >
-                                      <div className='flex items-center gap-[6px]'>
-                                        <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                                      <div className='flex items-center gap-1.5'>
+                                        <span className='font-medium text-[var(--text-primary)] text-small'>
                                           {paramName}
                                         </span>
                                         <Badge variant='outline' size='sm'>
@@ -553,7 +551,7 @@ export function MCP({ initialServerId }: MCPProps) {
                                         )}
                                       </div>
                                       {paramDesc && (
-                                        <p className='mt-[3px] text-[11px] text-[var(--text-tertiary)] leading-relaxed'>
+                                        <p className='mt-[3px] text-[var(--text-tertiary)] text-xs leading-relaxed'>
                                           {paramDesc}
                                         </p>
                                       )}
@@ -577,7 +575,7 @@ export function MCP({ initialServerId }: MCPProps) {
           <Button onClick={handleBackToList} variant='default'>
             Back
           </Button>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             <Button
               onClick={() => handleRefreshServer(server.id)}
               variant='default'
@@ -623,9 +621,9 @@ export function MCP({ initialServerId }: MCPProps) {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -638,32 +636,30 @@ export function MCP({ initialServerId }: MCPProps) {
             />
           </div>
           <Button onClick={() => setShowAddModal(true)} variant='primary' disabled={serversLoading}>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load MCP servers'}
               </p>
             </div>
           ) : serversLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <McpServerSkeleton />
               <McpServerSkeleton />
               <McpServerSkeleton />
             </div>
           ) : !hasServers ? (
             <div className='flex h-full items-center justify-center'>
-              <p className='text-[14px] text-[var(--text-muted)]'>
-                Click "Add" above to get started
-              </p>
+              <p className='text-[var(--text-muted)] text-sm'>Click "Add" above to get started</p>
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredServers.map((server) => {
                 if (!server?.id) return null
                 const tools = toolsByServer[server.id] || []
@@ -683,7 +679,7 @@ export function MCP({ initialServerId }: MCPProps) {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No servers found matching "{searchTerm}"
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
index 165830fe8b1..58a62e1f52a 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/deleted-item-skeleton.tsx
@@ -5,13 +5,13 @@ import { Skeleton } from '@/components/emcn'
  */
 export function DeletedItemSkeleton() {
   return (
-    <div className='flex items-center gap-[12px] px-[8px] py-[8px]'>
+    <div className='flex items-center gap-3 px-2 py-2'>
       <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-[3px]' />
-      <div className='flex min-w-0 flex-1 flex-col gap-[2px]'>
+      <div className='flex min-w-0 flex-1 flex-col gap-0.5'>
         <Skeleton className='h-[14px] w-[120px]' />
         <Skeleton className='h-[12px] w-[180px]' />
       </div>
-      <Skeleton className='h-[30px] w-[64px] shrink-0 rounded-[6px]' />
+      <Skeleton className='h-[30px] w-[64px] shrink-0 rounded-md' />
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
index 7829a4e8d0e..07050c27595 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/recently-deleted/recently-deleted.tsx
@@ -231,8 +231,8 @@ export function RecentlyDeleted() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
         <Search
           className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
           strokeWidth={2}
@@ -258,25 +258,25 @@ export function RecentlyDeleted() {
 
       <div className='min-h-0 flex-1 overflow-y-auto'>
         {error ? (
-          <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-            <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+          <div className='flex h-full flex-col items-center justify-center gap-2'>
+            <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
               {error instanceof Error ? error.message : 'Failed to load deleted items'}
             </p>
           </div>
         ) : isLoading ? (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <DeletedItemSkeleton />
             <DeletedItemSkeleton />
             <DeletedItemSkeleton />
           </div>
         ) : filtered.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+          <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
             {showNoResults
               ? `No items found matching \u201c${searchTerm}\u201d`
               : 'No deleted items'}
           </div>
         ) : (
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {filtered.map((resource) => {
               const isRestoring = restoringIds.has(resource.id)
               const isRestored = restoredItems.has(resource.id)
@@ -284,15 +284,15 @@ export function RecentlyDeleted() {
               return (
                 <div
                   key={resource.id}
-                  className='flex items-center gap-[12px] rounded-[6px] px-[8px] py-[8px] hover:bg-[var(--bg-hover)]'
+                  className='flex items-center gap-3 rounded-md px-2 py-2 hover-hover:bg-[var(--bg-hover)]'
                 >
                   <ResourceIcon resource={resource} />
 
                   <div className='flex min-w-0 flex-1 flex-col'>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                    <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {resource.name}
                     </span>
-                    <span className='text-[12px] text-[var(--text-tertiary)]'>
+                    <span className='text-[var(--text-tertiary)] text-caption'>
                       {TYPE_LABEL[resource.type]}
                       {' \u00b7 '}
                       Deleted {formatDate(resource.deletedAt)}
@@ -300,8 +300,8 @@ export function RecentlyDeleted() {
                   </div>
 
                   {isRestored ? (
-                    <div className='flex shrink-0 items-center gap-[8px]'>
-                      <span className='text-[13px] text-[var(--text-tertiary)]'>Restored</span>
+                    <div className='flex shrink-0 items-center gap-2'>
+                      <span className='text-[var(--text-tertiary)] text-small'>Restored</span>
                       <Button
                         variant='primary'
                         size='sm'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
index 8a0d001f412..40f0d4ec4af 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/components/skill-modal.tsx
@@ -129,9 +129,9 @@ export function SkillModal({
       <ModalContent size='lg'>
         <ModalHeader>{initialValues ? 'Edit Skill' : 'Create Skill'}</ModalHeader>
         <ModalBody>
-          <div className='flex flex-col gap-[18px]'>
-            <div className='flex flex-col gap-[4px]'>
-              <Label htmlFor='skill-name' className='font-medium text-[14px]'>
+          <div className='flex flex-col gap-4.5'>
+            <div className='flex flex-col gap-1'>
+              <Label htmlFor='skill-name' className='font-medium text-sm'>
                 Name
               </Label>
               <Input
@@ -145,16 +145,16 @@ export function SkillModal({
                 }}
               />
               {errors.name ? (
-                <p className='text-[13px] text-[var(--text-error)]'>{errors.name}</p>
+                <p className='text-[var(--text-error)] text-small'>{errors.name}</p>
               ) : (
-                <span className='text-[11px] text-[var(--text-muted)]'>
+                <span className='text-[var(--text-muted)] text-xs'>
                   Lowercase letters, numbers, and hyphens (e.g. my-skill)
                 </span>
               )}
             </div>
 
-            <div className='flex flex-col gap-[4px]'>
-              <Label htmlFor='skill-description' className='font-medium text-[14px]'>
+            <div className='flex flex-col gap-1'>
+              <Label htmlFor='skill-description' className='font-medium text-sm'>
                 Description
               </Label>
               <Input
@@ -169,12 +169,12 @@ export function SkillModal({
                 maxLength={1024}
               />
               {errors.description && (
-                <p className='text-[13px] text-[var(--text-error)]'>{errors.description}</p>
+                <p className='text-[var(--text-error)] text-small'>{errors.description}</p>
               )}
             </div>
 
-            <div className='flex flex-col gap-[4px]'>
-              <Label htmlFor='skill-content' className='font-medium text-[14px]'>
+            <div className='flex flex-col gap-1'>
+              <Label htmlFor='skill-content' className='font-medium text-sm'>
                 Content
               </Label>
               <Textarea
@@ -186,15 +186,15 @@ export function SkillModal({
                   if (errors.content || errors.general)
                     setErrors((prev) => ({ ...prev, content: undefined, general: undefined }))
                 }}
-                className='min-h-[200px] resize-y font-mono text-[14px]'
+                className='min-h-[200px] resize-y font-mono text-sm'
               />
               {errors.content && (
-                <p className='text-[13px] text-[var(--text-error)]'>{errors.content}</p>
+                <p className='text-[var(--text-error)] text-small'>{errors.content}</p>
               )}
             </div>
 
             {errors.general && (
-              <p className='text-[13px] text-[var(--text-error)]'>{errors.general}</p>
+              <p className='text-[var(--text-error)] text-small'>{errors.general}</p>
             )}
           </div>
         </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
index a88c156ceda..e803f0c6271 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/skills/skills.tsx
@@ -80,9 +80,9 @@ export function Skills() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -96,37 +96,37 @@ export function Skills() {
             />
           </div>
           <Button onClick={() => setShowAddForm(true)} disabled={isLoading} variant='primary'>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load skills'}
               </p>
             </div>
           ) : isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <SkillSkeleton />
               <SkillSkeleton />
               <SkillSkeleton />
             </div>
           ) : showEmptyState ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Add" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredSkills.map((s) => (
-                <div key={s.id} className='flex items-center justify-between gap-[12px]'>
+                <div key={s.id} className='flex items-center justify-between gap-3'>
                   <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                    <span className='truncate font-medium text-[15px]'>{s.name}</span>
-                    <p className='truncate text-[14px] text-[var(--text-muted)]'>{s.description}</p>
+                    <span className='truncate font-medium text-base'>{s.name}</span>
+                    <p className='truncate text-[var(--text-muted)] text-sm'>{s.description}</p>
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     <Button variant='default' onClick={() => setEditingSkill(s)}>
                       Edit
                     </Button>
@@ -141,7 +141,7 @@ export function Skills() {
                 </div>
               ))}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No skills found matching "{searchTerm}"
                 </div>
               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx
index 22106be41cd..e1a4ba899a4 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/credit-balance/credit-balance.tsx
@@ -93,9 +93,9 @@ export function CreditBalance({
 
   return (
     <div className='flex items-center justify-between'>
-      <div className='flex items-center gap-[8px]'>
+      <div className='flex items-center gap-2'>
         <Label>Additional Credits Balance:</Label>
-        <span className='text-[13px] text-[var(--text-secondary)]'>
+        <span className='text-[var(--text-secondary)] text-small'>
           {isLoading ? '...' : `${formatCredits(balance)} credits`}
         </span>
       </div>
@@ -103,7 +103,7 @@ export function CreditBalance({
       {canPurchase && (
         <Modal open={isOpen} onOpenChange={handleOpenChange}>
           <ModalTrigger asChild>
-            <Button variant='default' className='h-[32px] text-[13px]'>
+            <Button variant='default' className='h-[32px] text-small'>
               Add Credits
             </Button>
           </ModalTrigger>
@@ -111,15 +111,15 @@ export function CreditBalance({
             <ModalHeader>Add Credits</ModalHeader>
             <ModalBody>
               {purchaseCredits.isSuccess ? (
-                <p className='text-center text-[13px] text-[var(--text-primary)]'>
+                <p className='text-center text-[var(--text-primary)] text-small'>
                   Credits added successfully!
                 </p>
               ) : (
-                <div className='space-y-[12px]'>
-                  <div className='flex flex-col gap-[8px]'>
+                <div className='space-y-3'>
+                  <div className='flex flex-col gap-2'>
                     <Label htmlFor='credit-amount'>Amount (USD)</Label>
                     <div className='relative'>
-                      <span className='-translate-y-1/2 absolute top-1/2 left-[12px] text-[13px] text-[var(--text-muted)]'>
+                      <span className='-translate-y-1/2 absolute top-1/2 left-[12px] text-[var(--text-muted)] text-small'>
                         $
                       </span>
                       <Input
@@ -129,21 +129,21 @@ export function CreditBalance({
                         value={amount}
                         onChange={(e) => handleAmountChange(e.target.value)}
                         placeholder='50'
-                        className='pl-[28px]'
+                        className='pl-7'
                         disabled={purchaseCredits.isPending}
                       />
                     </div>
                     {dollarAmount > 0 && !displayError && (
-                      <span className='text-[12px] text-[var(--text-secondary)]'>
+                      <span className='text-[var(--text-secondary)] text-caption'>
                         You'll receive {creditPreview.toLocaleString()} credits
                       </span>
                     )}
                     {displayError && (
-                      <span className='text-[13px] text-[var(--text-error)]'>{displayError}</span>
+                      <span className='text-[var(--text-error)] text-small'>{displayError}</span>
                     )}
                   </div>
 
-                  <div className='rounded-[6px] bg-[var(--surface-4)] p-[12px]'>
+                  <div className='rounded-md bg-[var(--surface-4)] p-3'>
                     <p className='text-[var(--text-secondary)]'>
                       Credits are non-refundable and don't expire. They'll be applied automatically
                       to your {entityType === 'organization' ? 'team' : ''} usage.
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx
index cea5d60ce70..fbe199811b5 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/components/plan-card/plan-card.tsx
@@ -44,11 +44,9 @@ export function PlanCard({
     if (typeof price === 'string') {
       return (
         <>
-          <span className='font-medium text-[15px] text-[var(--text-primary)]'>{price}</span>
+          <span className='font-medium text-[var(--text-primary)] text-base'>{price}</span>
           {priceSubtext && (
-            <span className='ml-[4px] text-[13px] text-[var(--text-secondary)]'>
-              {priceSubtext}
-            </span>
+            <span className='ml-1 text-[var(--text-secondary)] text-small'>{priceSubtext}</span>
           )}
         </>
       )
@@ -60,13 +58,13 @@ export function PlanCard({
     return (
       <article
         className={cn(
-          'flex flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]',
+          'flex flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]',
           className
         )}
       >
-        <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
-          <div className='flex items-baseline gap-[8px]'>
-            <span className='font-medium text-[15px] text-[var(--text-primary)]'>{name}</span>
+        <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
+          <div className='flex items-baseline gap-2'>
+            <span className='font-medium text-[var(--text-primary)] text-base'>{name}</span>
             <div className='flex items-baseline'>{renderPrice()}</div>
           </div>
           <Button
@@ -77,13 +75,13 @@ export function PlanCard({
             {isError ? 'Error' : buttonText}
           </Button>
         </div>
-        <ul className='flex flex-wrap items-center gap-x-[16px] gap-y-[8px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[16px]'>
+        <ul className='flex flex-wrap items-center gap-x-4 gap-y-2 rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-4'>
           {features.map((feature, index) => {
             const Icon = feature.icon
             return (
-              <li key={`${feature.text}-${index}`} className='flex items-center gap-[8px]'>
+              <li key={`${feature.text}-${index}`} className='flex items-center gap-2'>
                 <Icon className='h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
-                <span className='text-[13px] text-[var(--text-primary)]'>{feature.text}</span>
+                <span className='text-[var(--text-primary)] text-small'>{feature.text}</span>
               </li>
             )
           })}
@@ -95,36 +93,34 @@ export function PlanCard({
   return (
     <article
       className={cn(
-        'flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]',
+        'flex flex-1 flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]',
         className
       )}
     >
-      <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
-        <span className='font-medium text-[15px] text-[var(--text-primary)]'>{name}</span>
+      <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
+        <span className='font-medium text-[var(--text-primary)] text-base'>{name}</span>
         <div className='flex items-baseline'>{renderPrice()}</div>
       </div>
       <div
         className={cn(
-          'flex rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px]',
+          'flex border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5',
           inlineButton
-            ? 'items-center justify-between gap-[18px] py-[12px]'
-            : 'flex-1 flex-col gap-[18px] py-[16px]'
+            ? 'items-center justify-between gap-4.5 py-3'
+            : 'flex-1 flex-col gap-4.5 py-4'
         )}
       >
         <ul
           className={cn(
-            'flex gap-[14px]',
-            inlineButton
-              ? 'flex-row flex-wrap items-center gap-x-[16px] gap-y-[8px]'
-              : 'flex-1 flex-col'
+            'flex gap-3.5',
+            inlineButton ? 'flex-row flex-wrap items-center gap-x-4 gap-y-2' : 'flex-1 flex-col'
           )}
         >
           {features.map((feature, index) => {
             const Icon = feature.icon
             return (
-              <li key={`${feature.text}-${index}`} className='flex items-center gap-[8px]'>
+              <li key={`${feature.text}-${index}`} className='flex items-center gap-2'>
                 <Icon className='h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
-                <span className='text-[13px] text-[var(--text-primary)]'>{feature.text}</span>
+                <span className='text-[var(--text-primary)] text-small'>{feature.text}</span>
               </li>
             )
           })}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
index b5270573899..d00aad14fd9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/subscription/subscription.tsx
@@ -98,45 +98,45 @@ interface WorkspaceAdmin {
 
 function SubscriptionSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[20px]'>
-      <div className='flex flex-col gap-[12px]'>
+    <div className='flex h-full flex-col gap-5'>
+      <div className='flex flex-col gap-3'>
         <div className='flex items-center justify-between'>
-          <div className='flex flex-col gap-[4px]'>
+          <div className='flex flex-col gap-1'>
             <div className='flex h-[18px] items-center'>
-              <Skeleton className='h-[12px] w-[40px] rounded-[4px]' />
+              <Skeleton className='h-[12px] w-[40px] rounded-sm' />
             </div>
-            <div className='flex h-[21px] items-center gap-[4px]'>
-              <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
-              <span className='font-medium text-[15px] text-[var(--text-primary)]'>/</span>
-              <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
+            <div className='flex h-[21px] items-center gap-1'>
+              <Skeleton className='h-[14px] w-[50px] rounded-sm' />
+              <span className='font-medium text-[var(--text-primary)] text-base'>/</span>
+              <Skeleton className='h-[14px] w-[50px] rounded-sm' />
             </div>
           </div>
-          <div className='flex flex-col items-end gap-[8px]'>
-            <div className='flex w-[100px] items-center gap-[4px]'>
+          <div className='flex flex-col items-end gap-2'>
+            <div className='flex w-[100px] items-center gap-1'>
               {[...Array(5)].map((_, i) => (
-                <Skeleton key={i} className='h-[6px] flex-1 rounded-[2px]' />
+                <Skeleton key={i} className='h-[6px] flex-1 rounded-xs' />
               ))}
             </div>
           </div>
         </div>
       </div>
-      <div className='flex flex-col gap-[10px]'>
-        <div className='grid grid-cols-2 gap-[10px]'>
+      <div className='flex flex-col gap-2.5'>
+        <div className='grid grid-cols-2 gap-2.5'>
           {[0, 1].map((i) => (
             <article
               key={i}
-              className='flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'
+              className='flex flex-1 flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'
             >
-              <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
-                <Skeleton className='h-[14px] w-[32px] rounded-[4px]' />
-                <Skeleton className='h-[14px] w-[50px] rounded-[4px]' />
+              <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
+                <Skeleton className='h-[14px] w-[32px] rounded-sm' />
+                <Skeleton className='h-[14px] w-[50px] rounded-sm' />
               </div>
-              <div className='flex flex-1 flex-col gap-[18px] rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[16px]'>
-                <ul className='flex flex-1 flex-col gap-[14px]'>
+              <div className='flex flex-1 flex-col gap-4.5 rounded-t-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-4'>
+                <ul className='flex flex-1 flex-col gap-3.5'>
                   {[...Array(5)].map((_, j) => (
-                    <li key={j} className='flex items-center gap-[8px]'>
-                      <Skeleton className='h-[12px] w-[12px] flex-shrink-0 rounded-[4px]' />
-                      <Skeleton className='h-[12px] w-[120px] rounded-[4px]' />
+                    <li key={j} className='flex items-center gap-2'>
+                      <Skeleton className='h-[12px] w-[12px] flex-shrink-0 rounded-sm' />
+                      <Skeleton className='h-[12px] w-[120px] rounded-sm' />
                     </li>
                   ))}
                 </ul>
@@ -187,58 +187,56 @@ function CreditPlanCard({
   const perUnit = isTeamPlan ? '/seat' : ''
 
   return (
-    <article className='flex flex-1 flex-col overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='flex items-center justify-between gap-[8px] px-[14px] py-[10px]'>
-        <span className='font-medium text-[14px] text-[var(--text-primary)]'>{name}</span>
-        <div className='flex items-baseline gap-[4px]'>
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+    <article className='flex flex-1 flex-col overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='flex items-center justify-between gap-2 px-3.5 py-2.5'>
+        <span className='font-medium text-[var(--text-primary)] text-sm'>{name}</span>
+        <div className='flex items-baseline gap-1'>
+          <span className='font-medium text-[var(--text-primary)] text-sm'>
             ${isAnnual ? discountedMonthly : dollars}
           </span>
-          <span className='text-[12px] text-[var(--text-secondary)]'>{perUnit}/mo</span>
+          <span className='text-[var(--text-secondary)] text-caption'>{perUnit}/mo</span>
           {isAnnual && (
-            <span className='ml-[2px] text-[11px] text-[var(--text-muted)] line-through'>
-              ${dollars}
-            </span>
+            <span className='ml-0.5 text-[var(--text-muted)] text-xs line-through'>${dollars}</span>
           )}
         </div>
       </div>
 
-      <div className='flex items-center gap-[12px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[10px]'>
+      <div className='flex items-center gap-3 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-2.5'>
         <div className='flex flex-col'>
-          <span className='font-semibold text-[18px] text-[var(--text-primary)]'>
+          <span className='font-semibold text-[var(--text-primary)] text-lg'>
             {credits.toLocaleString()}
           </span>
-          <span className='text-[11px] text-[var(--text-secondary)]'>credits/mo</span>
+          <span className='text-[var(--text-secondary)] text-xs'>credits/mo</span>
         </div>
         <div className='h-[28px] w-[1px] bg-[var(--border-1)]' />
         <div className='flex flex-col'>
-          <span className='font-semibold text-[14px] text-[var(--text-primary)]'>
+          <span className='font-semibold text-[var(--text-primary)] text-sm'>
             +{dailyRefresh.toLocaleString()}
           </span>
-          <span className='text-[11px] text-[var(--text-secondary)]'>daily refresh</span>
+          <span className='text-[var(--text-secondary)] text-xs'>daily refresh</span>
         </div>
       </div>
 
       {features && features.length > 0 && (
-        <ul className='flex flex-col gap-[10px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
+        <ul className='flex flex-col gap-2.5 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
           {features.map((feature, idx) => (
-            <li key={idx} className='flex items-center gap-[8px]'>
+            <li key={idx} className='flex items-center gap-2'>
               <feature.icon className='h-[13px] w-[13px] flex-shrink-0 text-[var(--text-muted)]' />
-              <span className='text-[12px] text-[var(--text-secondary)]'>{feature.text}</span>
+              <span className='text-[var(--text-secondary)] text-caption'>{feature.text}</span>
             </li>
           ))}
         </ul>
       )}
 
       {isCurrentPlan && isLegacyPlan && (
-        <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[8px]'>
+        <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-2'>
           <Badge variant='amber' size='sm' dot>
             You are on an old version of this plan
           </Badge>
         </div>
       )}
 
-      <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[14px]'>
+      <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3.5'>
         {isCurrentPlan ? (
           <Button onClick={onManagePlan} className='w-full' variant='default'>
             {isCancelledAtPeriodEnd ? 'Restore Subscription' : 'Manage plan'}
@@ -560,7 +558,7 @@ export function Subscription() {
   const showTeamCard = visiblePlans.includes('pro') || visiblePlans.includes('team')
 
   return (
-    <div className='flex h-full flex-col gap-[20px]'>
+    <div className='flex h-full flex-col gap-5'>
       {/* Current Plan & Usage Overview */}
       {permissions.canViewUsageInfo ? (
         <UsageHeader
@@ -636,7 +634,7 @@ export function Subscription() {
         />
       ) : (
         <div className='flex items-center'>
-          <span className='font-medium text-[15px] text-[var(--text-primary)]'>
+          <span className='font-medium text-[var(--text-primary)] text-base'>
             {formatPlanName(subscription.plan)}
           </span>
         </div>
@@ -644,17 +642,17 @@ export function Subscription() {
 
       {/* Upgrade Plans */}
       {showUpgradePlans && (
-        <div className='flex flex-col gap-[12px]'>
+        <div className='flex flex-col gap-3'>
           {/* Billing toggle */}
           <div className='flex items-center justify-start'>
-            <div className='flex rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] p-[2px]'>
+            <div className='flex rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] p-0.5'>
               <button
                 type='button'
                 className={cn(
-                  'rounded-[4px] px-[10px] py-[4px] font-medium text-[12px] transition-colors',
+                  'rounded-sm px-2.5 py-1 font-medium text-caption transition-colors',
                   !isAnnual
                     ? 'bg-[var(--surface-3)] text-[var(--text-primary)]'
-                    : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    : 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                 )}
                 onClick={() => setIsAnnual(false)}
               >
@@ -663,15 +661,15 @@ export function Subscription() {
               <button
                 type='button'
                 className={cn(
-                  'flex items-center gap-[4px] rounded-[4px] px-[10px] py-[4px] font-medium text-[12px] transition-colors',
+                  'flex items-center gap-1 rounded-sm px-2.5 py-1 font-medium text-caption transition-colors',
                   isAnnual
                     ? 'bg-[var(--surface-3)] text-[var(--text-primary)]'
-                    : 'text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                    : 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]'
                 )}
                 onClick={() => setIsAnnual(true)}
               >
                 Annual
-                <span className='rounded-[3px] bg-[#10b981] px-[4px] py-[1px] font-semibold text-[10px] text-white'>
+                <span className='rounded-[3px] bg-[#10b981] px-1 py-[1px] font-semibold text-micro text-white'>
                   -15%
                 </span>
               </button>
@@ -701,7 +699,7 @@ export function Subscription() {
             const showProCard = !isOnMaxTier
 
             return (
-              <div className='grid grid-cols-2 gap-[10px]'>
+              <div className='grid grid-cols-2 gap-2.5'>
                 {showProCard && (
                   <CreditPlanCard
                     name='Pro'
@@ -912,7 +910,7 @@ export function Subscription() {
 
       {/* Billing details section */}
       {(subscription.isPaid || (!isLoading && isTeamAdmin)) && (
-        <div className='flex flex-col gap-[14px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[14px] py-[12px]'>
+        <div className='flex flex-col gap-3.5 rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-3.5 py-3'>
           {subscription.isPaid && permissions.canViewUsageInfo && (
             <CreditBalance
               balance={subscriptionData?.data?.creditBalance ?? 0}
@@ -931,7 +929,7 @@ export function Subscription() {
             !permissions.isEnterpriseMember && (
               <div className='flex items-center justify-between'>
                 <Label>{isCancelledAtPeriodEnd ? 'Access Until' : 'Next Billing Date'}</Label>
-                <span className='text-[13px] text-[var(--text-secondary)]'>
+                <span className='text-[var(--text-secondary)] text-small'>
                   {new Date(subscriptionData.data.periodEnd).toLocaleDateString()}
                 </span>
               </div>
@@ -943,7 +941,7 @@ export function Subscription() {
 
           {!isLoading && isTeamAdmin && (
             <div className='flex items-center justify-between'>
-              <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-1.5'>
                 <Label htmlFor='billed-account'>Billed Account</Label>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
@@ -955,7 +953,7 @@ export function Subscription() {
                 </Tooltip.Root>
               </div>
               {workspaceAdmins.length === 0 ? (
-                <div className='rounded-[6px] border border-[var(--border)] border-dashed px-[12px] py-[6px] text-[13px] text-[var(--text-muted)]'>
+                <div className='rounded-md border border-[var(--border)] border-dashed px-3 py-1.5 text-[var(--text-muted)] text-small'>
                   No admins available
                 </div>
               ) : (
@@ -1042,23 +1040,21 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
           </p>
 
           {/* Plan toggle */}
-          <div className='mt-[16px] flex flex-col gap-[4px]'>
-            <Label className='text-[13px]'>Plan</Label>
-            <div className='flex gap-[8px]'>
+          <div className='mt-4 flex flex-col gap-1'>
+            <Label className='text-small'>Plan</Label>
+            <div className='flex gap-2'>
               <button
                 type='button'
                 className={cn(
-                  'flex-1 rounded-[6px] border px-[12px] py-[10px] text-left transition-colors',
+                  'flex-1 rounded-md border px-3 py-2.5 text-left transition-colors',
                   selectedTier === PRO_TIER.credits
                     ? 'border-[var(--accent)] bg-[var(--accent)]/5'
-                    : 'border-[var(--border-1)] hover:border-[var(--border-2)]'
+                    : 'border-[var(--border-1)] hover-hover:border-[var(--border-2)]'
                 )}
                 onClick={() => setSelectedTier(PRO_TIER.credits)}
               >
-                <span className='block font-medium text-[13px] text-[var(--text-primary)]'>
-                  Pro
-                </span>
-                <span className='block text-[12px] text-[var(--text-secondary)]'>
+                <span className='block font-medium text-[var(--text-primary)] text-small'>Pro</span>
+                <span className='block text-[var(--text-secondary)] text-caption'>
                   {PRO_TIER.credits.toLocaleString()} credits/seat &middot; ${PRO_TIER.dollars}
                   /seat/mo
                 </span>
@@ -1066,17 +1062,15 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
               <button
                 type='button'
                 className={cn(
-                  'flex-1 rounded-[6px] border px-[12px] py-[10px] text-left transition-colors',
+                  'flex-1 rounded-md border px-3 py-2.5 text-left transition-colors',
                   selectedTier === MAX_TIER.credits
                     ? 'border-[var(--accent)] bg-[var(--accent)]/5'
-                    : 'border-[var(--border-1)] hover:border-[var(--border-2)]'
+                    : 'border-[var(--border-1)] hover-hover:border-[var(--border-2)]'
                 )}
                 onClick={() => setSelectedTier(MAX_TIER.credits)}
               >
-                <span className='block font-medium text-[13px] text-[var(--text-primary)]'>
-                  Max
-                </span>
-                <span className='block text-[12px] text-[var(--text-secondary)]'>
+                <span className='block font-medium text-[var(--text-primary)] text-small'>Max</span>
+                <span className='block text-[var(--text-secondary)] text-caption'>
                   {MAX_TIER.credits.toLocaleString()} credits/seat &middot; ${MAX_TIER.dollars}
                   /seat/mo
                 </span>
@@ -1085,8 +1079,8 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
           </div>
 
           {/* Seat selector */}
-          <div className='mt-[16px] flex flex-col gap-[4px]'>
-            <Label className='text-[13px]'>Seats</Label>
+          <div className='mt-4 flex flex-col gap-1'>
+            <Label className='text-small'>Seats</Label>
             <Combobox
               options={seatOptions}
               value={selectedSeats > 0 ? selectedSeats.toString() : ''}
@@ -1100,8 +1094,8 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
           </div>
 
           {/* Cost summary */}
-          <div className='mt-[16px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[12px] py-[10px]'>
-            <div className='flex justify-between text-[13px]'>
+          <div className='mt-4 rounded-md border border-[var(--border-1)] bg-[var(--surface-4)] px-3 py-2.5'>
+            <div className='flex justify-between text-small'>
               <span className='text-[var(--text-muted)]'>
                 {selectedSeats} {selectedSeats === 1 ? 'seat' : 'seats'} &times; $
                 {monthlyCostPerSeat}/mo
@@ -1111,11 +1105,11 @@ function TeamPlanModal({ open, onOpenChange, isAnnual, onConfirm }: TeamPlanModa
               </span>
             </div>
             {isAnnual && (
-              <div className='mt-[4px] flex justify-between text-[12px]'>
+              <div className='mt-1 flex justify-between text-caption'>
                 <span className='text-[var(--text-muted)]'>Annual total</span>
                 <span className='text-[var(--text-secondary)]'>
                   ${annualTotal}/yr
-                  <span className='ml-[4px] text-[var(--text-muted)] line-through'>
+                  <span className='ml-1 text-[var(--text-muted)] line-through'>
                     ${totalMonthly * 12}
                   </span>
                 </span>
@@ -1262,31 +1256,31 @@ function ManagePlanModal({
           </p>
 
           {isLegacyPlan && (
-            <Badge variant='amber' size='lg' dot className='mt-[8px]'>
+            <Badge variant='amber' size='lg' dot className='mt-2'>
               You're on an older version of this plan
             </Badge>
           )}
 
-          <div className='mt-[16px] flex flex-col'>
+          <div className='mt-4 flex flex-col'>
             {actions.map((action, i) => (
               <div
                 key={action.title}
                 className={cn(
-                  'flex items-center justify-between py-[12px]',
+                  'flex items-center justify-between py-3',
                   i > 0 && 'border-[var(--border-1)] border-t'
                 )}
               >
                 <div className='min-w-0 flex-1'>
-                  <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+                  <span className='font-medium text-[var(--text-primary)] text-small'>
                     {action.title}
                   </span>
-                  <span className='block text-[12px] text-[var(--text-secondary)]'>
+                  <span className='block text-[var(--text-secondary)] text-caption'>
                     {action.description}
                   </span>
                 </div>
                 <Button
                   variant='primary'
-                  className='ml-[12px] shrink-0'
+                  className='ml-3 shrink-0'
                   onClick={action.onClick}
                   disabled={action.disabled}
                 >
@@ -1297,7 +1291,7 @@ function ManagePlanModal({
           </div>
 
           {error && (
-            <span className='mt-[4px] block text-[12px] text-[var(--text-error)]'>{error}</span>
+            <span className='mt-1 block text-[var(--text-error)] text-caption'>{error}</span>
           )}
         </ModalBody>
         <ModalFooter>
@@ -1333,11 +1327,9 @@ function BillingUsageNotificationsToggle() {
 
   return (
     <div className='flex items-center justify-between'>
-      <div className='flex flex-col gap-[4px]'>
+      <div className='flex flex-col gap-1'>
         <Label htmlFor='usage-notifications'>Usage notifications</Label>
-        <span className='text-[13px] text-[var(--text-muted)]'>
-          Email me when I reach 80% usage
-        </span>
+        <span className='text-[var(--text-muted)] text-small'>Email me when I reach 80% usage</span>
       </div>
       <Switch
         id='usage-notifications'
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx
index 3ec22ad20d1..12b2560eff8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/member-invitation-card/member-invitation-card.tsx
@@ -38,21 +38,21 @@ const PermissionSelector = React.memo<PermissionSelectorProps>(
       >
         <ButtonGroupItem
           value='read'
-          className='h-[22px] min-w-[38px] px-[6px] py-0 text-[11px]'
+          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
           title='View only'
         >
           Read
         </ButtonGroupItem>
         <ButtonGroupItem
           value='write'
-          className='h-[22px] min-w-[38px] px-[6px] py-0 text-[11px]'
+          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
           title='Edit content'
         >
           Write
         </ButtonGroupItem>
         <ButtonGroupItem
           value='admin'
-          className='h-[22px] min-w-[38px] px-[6px] py-0 text-[11px]'
+          className='h-[22px] min-w-[38px] px-1.5 py-0 text-xs'
           title='Full access'
         >
           Admin
@@ -120,16 +120,16 @@ export function MemberInvitationCard({
   }
 
   return (
-    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='px-[14px] py-[10px]'>
-        <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>Invite Team Members</h4>
-        <p className='text-[13px] text-[var(--text-muted)]'>
+    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='px-3.5 py-2.5'>
+        <h4 className='font-medium text-[var(--text-primary)] text-base'>Invite Team Members</h4>
+        <p className='text-[var(--text-muted)] text-small'>
           Add new members to your team and optionally give them access to specific workspaces
         </p>
       </div>
 
-      <div className='flex flex-col gap-[12px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
-        <div className='flex items-start gap-[8px]'>
+      <div className='flex flex-col gap-3 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
+        <div className='flex items-start gap-2'>
           <div className='flex-1'>
             <TagInput
               items={inviteEmails}
@@ -177,15 +177,15 @@ export function MemberInvitationCard({
               className='max-h-[320px] min-w-[240px] max-w-[240px] overflow-y-auto'
             >
               {isLoadingWorkspaces ? (
-                <div className='px-[6px] py-[16px] text-center'>
-                  <p className='text-[13px] text-[var(--text-tertiary)]'>Loading...</p>
+                <div className='px-1.5 py-4 text-center'>
+                  <p className='text-[var(--text-tertiary)] text-small'>Loading...</p>
                 </div>
               ) : userWorkspaces.length === 0 ? (
-                <div className='px-[6px] py-[16px] text-center'>
-                  <p className='text-[13px] text-[var(--text-tertiary)]'>No workspaces available</p>
+                <div className='px-1.5 py-4 text-center'>
+                  <p className='text-[var(--text-tertiary)] text-small'>No workspaces available</p>
                 </div>
               ) : (
-                <div className='flex flex-col gap-[2px]'>
+                <div className='flex flex-col gap-0.5'>
                   {userWorkspaces.map((workspace) => {
                     const isSelected = selectedWorkspaces.some(
                       (w) => w.workspaceId === workspace.id
@@ -195,7 +195,7 @@ export function MemberInvitationCard({
                     )
 
                     return (
-                      <div key={workspace.id} className='flex flex-col gap-[4px]'>
+                      <div key={workspace.id} className='flex flex-col gap-1'>
                         <DropdownMenuItem
                           onSelect={(e) => {
                             e.preventDefault()
@@ -216,8 +216,8 @@ export function MemberInvitationCard({
                           <span className='flex-1 truncate'>{workspace.name}</span>
                         </DropdownMenuItem>
                         {isSelected && (
-                          <div className='ml-[31px] flex items-center gap-[6px] pb-[4px]'>
-                            <span className='text-[11px] text-[var(--text-tertiary)]'>Access:</span>
+                          <div className='ml-[31px] flex items-center gap-1.5 pb-1'>
+                            <span className='text-[var(--text-tertiary)] text-xs'>Access:</span>
                             <PermissionSelector
                               value={
                                 (['read', 'write', 'admin'].includes(
@@ -248,7 +248,7 @@ export function MemberInvitationCard({
         </div>
 
         {invitationError && (
-          <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+          <p className='text-[var(--text-error)] text-small leading-tight'>
             {invitationError instanceof Error && invitationError.message
               ? invitationError.message
               : String(invitationError)}
@@ -256,7 +256,7 @@ export function MemberInvitationCard({
         )}
 
         {inviteSuccess && (
-          <p className='text-[11px] text-[var(--text-success)] leading-tight'>
+          <p className='text-[var(--text-success)] text-xs leading-tight'>
             Invitation sent successfully
             {selectedCount > 0 &&
               ` with access to ${selectedCount} workspace${selectedCount !== 1 ? 's' : ''}`}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
index 9ee29b4c4ab..0686ad070b9 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/no-organization-view/no-organization-view.tsx
@@ -45,20 +45,20 @@ export function NoOrganizationView({
   if (hasTeamPlan || hasEnterprisePlan) {
     return (
       <div>
-        <div className='flex flex-col gap-[20px]'>
+        <div className='flex flex-col gap-5'>
           {/* Header - matching settings page style */}
           <div>
-            <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>
+            <h4 className='font-medium text-[var(--text-primary)] text-base'>
               Create Your Team Workspace
             </h4>
-            <p className='mt-[4px] text-[13px] text-[var(--text-muted)]'>
+            <p className='mt-1 text-[var(--text-muted)] text-small'>
               You're subscribed to a {hasEnterprisePlan ? 'enterprise' : 'team'} plan. Create your
               workspace to start collaborating with your team.
             </p>
           </div>
 
           {/* Form fields - clean layout without card */}
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             {/* Hidden decoy field to prevent browser autofill */}
             <input
               type='text'
@@ -69,7 +69,7 @@ export function NoOrganizationView({
               readOnly
             />
             <div>
-              <Label htmlFor='team-name-field' className='font-medium text-[13px]'>
+              <Label htmlFor='team-name-field' className='font-medium text-small'>
                 Team Name
               </Label>
               <Input
@@ -77,7 +77,7 @@ export function NoOrganizationView({
                 value={orgName}
                 onChange={onOrgNameChange}
                 placeholder='My Team'
-                className='mt-[4px]'
+                className='mt-1'
                 name='team_name_field'
                 autoComplete='off'
                 autoCorrect='off'
@@ -88,11 +88,11 @@ export function NoOrganizationView({
             </div>
 
             <div>
-              <Label htmlFor='orgSlug' className='font-medium text-[13px]'>
+              <Label htmlFor='orgSlug' className='font-medium text-small'>
                 Team URL
               </Label>
-              <div className='mt-[4px] flex items-center'>
-                <div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-[12px] py-[6px] text-[13px] text-[var(--text-muted)]'>
+              <div className='mt-1 flex items-center'>
+                <div className='rounded-l-[6px] border border-[var(--border-1)] border-r-0 bg-[var(--surface-4)] px-3 py-1.5 text-[var(--text-muted)] text-small'>
                   sim.ai/team/
                 </div>
                 <Input
@@ -105,9 +105,9 @@ export function NoOrganizationView({
               </div>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {error && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>{error}</p>
+                <p className='text-[var(--text-error)] text-small leading-tight'>{error}</p>
               )}
               <div className='flex justify-end'>
                 <Button
@@ -131,7 +131,7 @@ export function NoOrganizationView({
               </ModalDescription>
             </ModalHeader>
 
-            <div className='flex flex-col gap-[18px]'>
+            <div className='flex flex-col gap-4.5'>
               {/* Hidden decoy field to prevent browser autofill */}
               <input
                 type='text'
@@ -142,7 +142,7 @@ export function NoOrganizationView({
                 readOnly
               />
               <div>
-                <Label htmlFor='org-name-field' className='font-medium text-[13px]'>
+                <Label htmlFor='org-name-field' className='font-medium text-small'>
                   Organization Name
                 </Label>
                 <Input
@@ -151,7 +151,7 @@ export function NoOrganizationView({
                   value={orgName}
                   onChange={onOrgNameChange}
                   disabled={isCreatingOrg}
-                  className='mt-[4px]'
+                  className='mt-1'
                   name='org_name_field'
                   autoComplete='off'
                   autoCorrect='off'
@@ -162,7 +162,7 @@ export function NoOrganizationView({
               </div>
 
               <div>
-                <Label htmlFor='org-slug-field' className='font-medium text-[13px]'>
+                <Label htmlFor='org-slug-field' className='font-medium text-small'>
                   Organization Slug
                 </Label>
                 <Input
@@ -171,7 +171,7 @@ export function NoOrganizationView({
                   value={orgSlug}
                   onChange={(e) => setOrgSlug(e.target.value)}
                   disabled={isCreatingOrg}
-                  className='mt-[4px]'
+                  className='mt-1'
                   name='org_slug_field'
                   autoComplete='off'
                   autoCorrect='off'
@@ -182,7 +182,7 @@ export function NoOrganizationView({
               </div>
             </div>
 
-            {error && <p className='text-[13px] text-[var(--text-error)] leading-tight'>{error}</p>}
+            {error && <p className='text-[var(--text-error)] text-small leading-tight'>{error}</p>}
 
             <ModalFooter>
               <Button
@@ -207,10 +207,10 @@ export function NoOrganizationView({
   }
 
   return (
-    <div className='flex flex-col gap-[20px]'>
-      <div className='flex flex-col gap-[8px]'>
-        <h3 className='font-medium text-[15px] text-[var(--text-primary)]'>No Team Workspace</h3>
-        <p className='text-[13px] text-[var(--text-secondary)]'>
+    <div className='flex flex-col gap-5'>
+      <div className='flex flex-col gap-2'>
+        <h3 className='font-medium text-[var(--text-primary)] text-base'>No Team Workspace</h3>
+        <p className='text-[var(--text-secondary)] text-small'>
           You don't have a team workspace yet. To collaborate with others, first upgrade to a team
           or enterprise plan.
         </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
index 67b148c2689..01057633c34 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/remove-member-dialog/remove-member-dialog.tsx
@@ -50,18 +50,18 @@ export function RemoveMemberDialog({
           </p>
 
           {!isSelfRemoval && (
-            <div className='mt-[16px]'>
-              <div className='flex items-center gap-[8px]'>
+            <div className='mt-4'>
+              <div className='flex items-center gap-2'>
                 <Checkbox
                   id='reduce-seats'
                   checked={shouldReduceSeats}
                   onCheckedChange={(checked) => onShouldReduceSeatsChange(checked === true)}
                 />
-                <label htmlFor='reduce-seats' className='text-[13px] text-[var(--text-primary)]'>
+                <label htmlFor='reduce-seats' className='text-[var(--text-primary)] text-small'>
                   Also reduce seat count in my subscription
                 </label>
               </div>
-              <p className='mt-[4px] text-[13px] text-[var(--text-muted)]'>
+              <p className='mt-1 text-[var(--text-muted)] text-small'>
                 If selected, your team seat count will be reduced by 1, lowering your monthly
                 billing.
               </p>
@@ -69,8 +69,8 @@ export function RemoveMemberDialog({
           )}
 
           {error && (
-            <div className='mt-[8px]'>
-              <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+            <div className='mt-2'>
+              <p className='text-[var(--text-error)] text-small leading-tight'>
                 {error instanceof Error && error.message ? error.message : String(error)}
               </p>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx
index 13c3cf6e34e..3424c88223f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-members/team-members.tsx
@@ -230,18 +230,18 @@ export function TeamMembers({
   }
 
   return (
-    <div className='flex flex-col gap-[18px]'>
+    <div className='flex flex-col gap-4.5'>
       {/* Header */}
       <div>
-        <h4 className='font-medium text-[15px] text-[var(--text-primary)]'>Team Members</h4>
+        <h4 className='font-medium text-[var(--text-primary)] text-base'>Team Members</h4>
       </div>
 
       {/* Members list */}
-      <div className='flex flex-col gap-[8px]'>
+      <div className='flex flex-col gap-2'>
         {teamItems.map((item) => (
           <div key={item.id} className='flex items-center justify-between'>
             {/* Left section: Avatar + Name/Role + Action buttons */}
-            <div className='flex flex-1 items-center gap-[12px]'>
+            <div className='flex flex-1 items-center gap-3'>
               {/* Avatar */}
               <Avatar className='h-9 w-9'>
                 {item.avatarUrl && <AvatarImage src={item.avatarUrl} alt={item.name} />}
@@ -255,8 +255,8 @@ export function TeamMembers({
 
               {/* Name and email */}
               <div className='min-w-0'>
-                <div className='flex items-center gap-[8px]'>
-                  <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                <div className='flex items-center gap-2'>
+                  <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                     {item.name}
                   </span>
                   {item.type === 'member' && (
@@ -273,7 +273,7 @@ export function TeamMembers({
                     </Badge>
                   )}
                 </div>
-                <div className='truncate text-[14px] text-[var(--text-muted)]'>{item.email}</div>
+                <div className='truncate text-[var(--text-muted)] text-sm'>{item.email}</div>
               </div>
 
               {/* Action buttons for members */}
@@ -293,20 +293,20 @@ export function TeamMembers({
 
             {/* Right section */}
             {isAdminOrOwner && (
-              <div className='ml-[16px] flex flex-col items-end'>
+              <div className='ml-4 flex flex-col items-end'>
                 {item.type === 'member' ? (
                   <>
-                    <div className='text-[13px] text-[var(--text-muted)]'>Usage</div>
-                    <div className='font-medium text-[13px] text-[var(--text-primary)] tabular-nums'>
+                    <div className='text-[var(--text-muted)] text-small'>Usage</div>
+                    <div className='font-medium text-[var(--text-primary)] text-small tabular-nums'>
                       {isLoadingUsage ? (
-                        <span className='inline-block h-3 w-12 animate-pulse rounded-[4px] bg-[var(--surface-4)]' />
+                        <span className='inline-block h-3 w-12 animate-pulse rounded-sm bg-[var(--surface-4)]' />
                       ) : (
                         item.usage
                       )}
                     </div>
                   </>
                 ) : (
-                  <div className='flex items-center gap-[4px]'>
+                  <div className='flex items-center gap-1'>
                     <Button
                       variant='ghost'
                       onClick={() => handleResendInvitation(item.invitation.id)}
@@ -340,7 +340,7 @@ export function TeamMembers({
 
       {/* Leave Organization button */}
       {canLeaveOrganization && (
-        <div className='mt-[4px] border-[var(--border-1)] border-t pt-[16px]'>
+        <div className='mt-1 border-[var(--border-1)] border-t pt-4'>
           <Button
             variant='active'
             onClick={() => {
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
index 3c534acb896..63fdd85717f 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats-overview/team-seats-overview.tsx
@@ -25,17 +25,17 @@ interface TeamSeatsOverviewProps {
 
 function TeamSeatsSkeleton() {
   return (
-    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='flex flex-col gap-[8px] px-[14px] py-[12px]'>
+    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='flex flex-col gap-2 px-3.5 py-3'>
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <Skeleton className='h-5 w-16 rounded-[4px]' />
-            <Skeleton className='h-4 w-20 rounded-[4px]' />
+          <div className='flex items-center gap-2'>
+            <Skeleton className='h-5 w-16 rounded-sm' />
+            <Skeleton className='h-4 w-20 rounded-sm' />
           </div>
-          <div className='flex items-center gap-[4px] text-[13px]'>
-            <Skeleton className='h-4 w-8 rounded-[4px]' />
+          <div className='flex items-center gap-1 text-small'>
+            <Skeleton className='h-4 w-8 rounded-sm' />
             <span className='text-[var(--text-muted)]'>/</span>
-            <Skeleton className='h-4 w-8 rounded-[4px]' />
+            <Skeleton className='h-4 w-8 rounded-sm' />
           </div>
         </div>
         <Skeleton className='h-[6px] w-full rounded-full' />
@@ -60,13 +60,13 @@ export function TeamSeatsOverview({
 
   if (!subscriptionData) {
     return (
-      <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-        <div className='flex flex-col items-center gap-[12px] px-[14px] py-[16px] text-center'>
-          <div className='flex flex-col gap-[4px]'>
-            <p className='font-medium text-[15px] text-[var(--text-primary)]'>
+      <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+        <div className='flex flex-col items-center gap-3 px-3.5 py-4 text-center'>
+          <div className='flex flex-col gap-1'>
+            <p className='font-medium text-[var(--text-primary)] text-base'>
               No Team Subscription Found
             </p>
-            <p className='text-[13px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-small'>
               Your subscription may need to be transferred to this organization.
             </p>
           </div>
@@ -87,12 +87,12 @@ export function TeamSeatsOverview({
   const isEnterprise = checkEnterprisePlan(subscriptionData)
 
   return (
-    <div className='overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-      <div className='flex flex-col gap-[8px] px-[14px] py-[12px]'>
+    <div className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+      <div className='flex flex-col gap-2 px-3.5 py-3'>
         {/* Top row - matching UsageHeader */}
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[8px]'>
-            <span className='font-medium text-[15px] text-[var(--text-primary)]'>Seats</span>
+          <div className='flex items-center gap-2'>
+            <span className='font-medium text-[var(--text-primary)] text-base'>Seats</span>
             {!isEnterprise && (
               <Badge
                 variant='blue-secondary'
@@ -104,7 +104,7 @@ export function TeamSeatsOverview({
               </Badge>
             )}
           </div>
-          <div className='flex items-center gap-[4px] text-[13px] tabular-nums'>
+          <div className='flex items-center gap-1 text-small tabular-nums'>
             <span className='font-medium text-[var(--text-secondary)] tabular-nums'>
               {usedSeats} used
             </span>
@@ -116,7 +116,7 @@ export function TeamSeatsOverview({
         </div>
 
         {/* Pills row - one pill per seat */}
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {Array.from({ length: totalSeats }).map((_, i) => {
             const isFilled = i < usedSeats
             return (
@@ -133,8 +133,8 @@ export function TeamSeatsOverview({
 
         {/* Enterprise message */}
         {isEnterprise && (
-          <div className='pt-[4px] text-center'>
-            <p className='text-[13px] text-[var(--text-muted)]'>
+          <div className='pt-1 text-center'>
+            <p className='text-[var(--text-muted)] text-small'>
               Contact support for enterprise usage limit changes
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx
index 60731dc4517..b6d45e817fd 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/components/team-seats/team-seats.tsx
@@ -70,8 +70,8 @@ export function TeamSeats({
         <ModalBody>
           <p className='text-[var(--text-secondary)]'>{description}</p>
 
-          <div className='mt-[16px] flex flex-col gap-[4px]'>
-            <Label htmlFor='seats' className='text-[13px]'>
+          <div className='mt-4 flex flex-col gap-1'>
+            <Label htmlFor='seats' className='text-small'>
               Number of seats
             </Label>
             <Combobox
@@ -89,22 +89,22 @@ export function TeamSeats({
             />
           </div>
 
-          <p className='mt-[12px] text-[13px] text-[var(--text-muted)]'>
+          <p className='mt-3 text-[var(--text-muted)] text-small'>
             Your team will have {selectedSeats} {selectedSeats === 1 ? 'seat' : 'seats'} with a
             total of {(selectedSeats * seatCredits).toLocaleString()} inference credits per month.
           </p>
 
           {showCostBreakdown && currentSeats !== undefined && (
-            <div className='mt-[16px] rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[12px] py-[10px]'>
-              <div className='flex justify-between text-[13px]'>
+            <div className='mt-4 rounded-md border border-[var(--border-1)] bg-[var(--surface-4)] px-3 py-2.5'>
+              <div className='flex justify-between text-small'>
                 <span className='text-[var(--text-muted)]'>Current seats:</span>
                 <span className='text-[var(--text-primary)]'>{currentSeats}</span>
               </div>
-              <div className='mt-[8px] flex justify-between text-[13px]'>
+              <div className='mt-2 flex justify-between text-small'>
                 <span className='text-[var(--text-muted)]'>New seats:</span>
                 <span className='text-[var(--text-primary)]'>{selectedSeats}</span>
               </div>
-              <div className='mt-[12px] flex justify-between border-[var(--border-1)] border-t pt-[12px] text-[13px]'>
+              <div className='mt-3 flex justify-between border-[var(--border-1)] border-t pt-3 text-small'>
                 <span className='font-medium text-[var(--text-primary)]'>
                   Monthly credit change:
                 </span>
@@ -120,7 +120,7 @@ export function TeamSeats({
           )}
 
           {error && (
-            <p className='mt-[12px] text-[13px] text-[var(--text-error)]'>
+            <p className='mt-3 text-[var(--text-error)] text-small'>
               {error instanceof Error && error.message ? error.message : String(error)}
             </p>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
index f1088791770..569f9f934e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/team-management/team-management.tsx
@@ -290,27 +290,27 @@ export function TeamManagement() {
 
   if (isLoading && !displayOrganization && !(hasTeamPlan || hasEnterprisePlan)) {
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         {/* Team Seats Overview */}
         <div>
-          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4 shadow-xs'>
-            <div className='space-y-[12px]'>
+          <div className='rounded-lg border bg-[var(--surface-3)] p-4 shadow-xs'>
+            <div className='space-y-3'>
               <div className='flex items-center justify-between'>
                 <Skeleton className='h-5 w-24' />
-                <Skeleton className='h-8 w-20 rounded-[6px]' />
+                <Skeleton className='h-8 w-20 rounded-md' />
               </div>
-              <div className='flex items-center gap-[18px]'>
-                <div className='flex flex-col gap-[4px]'>
+              <div className='flex items-center gap-4.5'>
+                <div className='flex flex-col gap-1'>
                   <Skeleton className='h-3 w-16' />
                   <Skeleton className='h-6 w-8' />
                 </div>
                 <div className='h-8 w-px bg-[var(--border)]' />
-                <div className='flex flex-col gap-[4px]'>
+                <div className='flex flex-col gap-1'>
                   <Skeleton className='h-3 w-20' />
                   <Skeleton className='h-6 w-8' />
                 </div>
                 <div className='h-8 w-px bg-[var(--border)]' />
-                <div className='flex flex-col gap-[4px]'>
+                <div className='flex flex-col gap-1'>
                   <Skeleton className='h-3 w-24' />
                   <Skeleton className='h-6 w-12' />
                 </div>
@@ -321,13 +321,13 @@ export function TeamManagement() {
 
         {/* Team Members */}
         <div>
-          <Skeleton className='mb-[12px] h-5 w-32' />
-          <div className='space-y-[8px]'>
+          <Skeleton className='mb-3 h-5 w-32' />
+          <div className='space-y-2'>
             {[...Array(3)].map((_, i) => (
-              <div key={i} className='flex items-center justify-between rounded-[8px] border p-3'>
-                <div className='flex items-center gap-[12px]'>
+              <div key={i} className='flex items-center justify-between rounded-lg border p-3'>
+                <div className='flex items-center gap-3'>
                   <Skeleton className='h-10 w-10 rounded-full' />
-                  <div className='space-y-[4px]'>
+                  <div className='space-y-1'>
                     <Skeleton className='h-4 w-32' />
                     <Skeleton className='h-3 w-24' />
                   </div>
@@ -340,11 +340,11 @@ export function TeamManagement() {
 
         {/* Invite Member Card */}
         <div>
-          <div className='rounded-[8px] border bg-[var(--surface-3)] p-4'>
-            <Skeleton className='mb-[12px] h-5 w-32' />
-            <div className='space-y-[12px]'>
-              <Skeleton className='h-9 w-full rounded-[8px]' />
-              <Skeleton className='h-9 w-full rounded-[8px]' />
+          <div className='rounded-lg border bg-[var(--surface-3)] p-4'>
+            <Skeleton className='mb-3 h-5 w-32' />
+            <div className='space-y-3'>
+              <Skeleton className='h-9 w-full rounded-lg' />
+              <Skeleton className='h-9 w-full rounded-lg' />
             </div>
           </div>
         </div>
@@ -372,7 +372,7 @@ export function TeamManagement() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[20px]'>
+    <div className='flex h-full flex-col gap-5'>
       {/* Seats Overview - Full Width */}
       {adminOrOwner && (
         <div>
@@ -423,11 +423,11 @@ export function TeamManagement() {
       </div>
 
       {/* Additional Info - Subtle and collapsed */}
-      <div className='flex flex-col gap-[10px]'>
+      <div className='flex flex-col gap-2.5'>
         {/* Single Organization Notice */}
         {adminOrOwner && (
-          <div className='rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[14px] py-[10px]'>
-            <p className='text-[13px] text-[var(--text-muted)]'>
+          <div className='rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-3.5 py-2.5'>
+            <p className='text-[var(--text-muted)] text-small'>
               <span className='font-medium'>Note:</span> Users can only be part of one organization
               at a time.
             </p>
@@ -435,8 +435,8 @@ export function TeamManagement() {
         )}
 
         {/* Team Information */}
-        <details className='group overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-          <summary className='flex cursor-pointer items-center justify-between px-[14px] py-[10px] font-medium text-[15px] text-[var(--text-primary)] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+        <details className='group overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+          <summary className='flex cursor-pointer items-center justify-between px-3.5 py-2.5 font-medium text-[var(--text-primary)] text-base hover-hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
             <span>Team Information</span>
             <svg
               className='h-4 w-4 transition-transform group-open:rotate-180'
@@ -452,10 +452,10 @@ export function TeamManagement() {
               />
             </svg>
           </summary>
-          <div className='flex flex-col gap-[8px] border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px] text-[13px]'>
+          <div className='flex flex-col gap-2 border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3 text-small'>
             <div className='flex justify-between'>
               <span className='text-[var(--text-muted)]'>Team ID:</span>
-              <span className='font-mono text-[10px] text-[var(--text-primary)]'>
+              <span className='font-mono text-[var(--text-primary)] text-micro'>
                 {displayOrganization.id}
               </span>
             </div>
@@ -474,8 +474,8 @@ export function TeamManagement() {
 
         {/* Team Billing Information (only show for Team Plan, not Enterprise) */}
         {hasTeamPlan && !hasEnterprisePlan && (
-          <details className='group overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-            <summary className='flex cursor-pointer items-center justify-between px-[14px] py-[10px] font-medium text-[15px] text-[var(--text-primary)] hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
+          <details className='group overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-5)]'>
+            <summary className='flex cursor-pointer items-center justify-between px-3.5 py-2.5 font-medium text-[var(--text-primary)] text-base hover-hover:bg-[var(--surface-4)] group-open:rounded-b-none'>
               <span>Billing Information</span>
               <svg
                 className='h-4 w-4 transition-transform group-open:rotate-180'
@@ -491,8 +491,8 @@ export function TeamManagement() {
                 />
               </svg>
             </summary>
-            <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-[14px] py-[12px]'>
-              <ul className='ml-4 flex list-disc flex-col gap-[8px] text-[13px] text-[var(--text-muted)]'>
+            <div className='border-[var(--border-1)] border-t bg-[var(--surface-4)] px-3.5 py-3'>
+              <ul className='ml-4 flex list-disc flex-col gap-2 text-[var(--text-muted)] text-small'>
                 <li>
                   Your team is billed a minimum of $
                   {((subscriptionData?.seats ?? 0) * costPerSeat).toLocaleString()}/month for{' '}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx
index 0930cceda34..d43113dd593 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/template-profile/template-profile.tsx
@@ -256,26 +256,26 @@ export function TemplateProfile() {
 
   if (isLoading) {
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             {/* Display Skeleton */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[50px]' />
-              <div className='flex items-center gap-[10px]'>
+              <div className='flex items-center gap-2.5'>
                 <Skeleton className='h-9 w-9 flex-shrink-0 rounded-full' />
                 <Skeleton className='h-9 flex-1' />
               </div>
             </div>
 
             {/* About Skeleton */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[35px]' />
               <Skeleton className='min-h-[100px] w-full' />
             </div>
 
             {/* Socials Skeleton */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <Skeleton className='h-5 w-[45px]' />
               <Skeleton className='h-9 w-full' />
               <Skeleton className='h-9 w-full' />
@@ -286,7 +286,7 @@ export function TemplateProfile() {
         </div>
 
         {/* Save Button Skeleton */}
-        <div className='mt-auto flex items-center justify-end gap-[8px]'>
+        <div className='mt-auto flex items-center justify-end gap-2'>
           <Skeleton className='h-9 w-[60px]' />
         </div>
       </div>
@@ -294,14 +294,14 @@ export function TemplateProfile() {
   }
 
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* Scrollable Content */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[18px]'>
+        <div className='flex flex-col gap-4.5'>
           {/* Profile Selection - only show if user has organizations */}
           {organizations.length > 0 && (
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Profile</span>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Profile</span>
               <Combobox
                 options={[
                   { label: 'Personal', value: userId },
@@ -326,14 +326,14 @@ export function TemplateProfile() {
           )}
 
           {/* Display */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Display<span className='ml-[6px] text-[var(--text-secondary)]'>*</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>
+              Display<span className='ml-1.5 text-[var(--text-secondary)]'>*</span>
             </span>
-            <div className='flex items-center gap-[10px]'>
+            <div className='flex items-center gap-2.5'>
               <div className='relative'>
                 <div
-                  className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border transition-all hover:bg-[var(--bg)] ${
+                  className={`group relative flex h-9 w-9 flex-shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full border transition-all hover-hover:bg-[var(--bg)] ${
                     profilePictureUrl && !imageLoadError
                       ? 'border-transparent'
                       : 'border-[var(--border)]'
@@ -359,7 +359,7 @@ export function TemplateProfile() {
                     const initials = getInitials(formData.name)
                     if (initials) {
                       return (
-                        <span className='font-medium text-[15px] text-[var(--text-primary)]'>
+                        <span className='font-medium text-[var(--text-primary)] text-base'>
                           {initials}
                         </span>
                       )
@@ -411,12 +411,12 @@ export function TemplateProfile() {
                 data-form-type='other'
               />
             </div>
-            {uploadError && <p className='text-[13px] text-[var(--text-error)]'>{uploadError}</p>}
+            {uploadError && <p className='text-[var(--text-error)] text-small'>{uploadError}</p>}
           </div>
 
           {/* About */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>About</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>About</span>
             <Textarea
               placeholder='Tell people about yourself or your organization'
               value={formData.about}
@@ -426,8 +426,8 @@ export function TemplateProfile() {
           </div>
 
           {/* Social Links */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Socials</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Socials</span>
 
             <div>
               <div className='relative'>
@@ -436,11 +436,11 @@ export function TemplateProfile() {
                   placeholder='x.com/username'
                   value={formData.xUrl}
                   onChange={(e) => updateField('xUrl', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.xUrl && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>{fieldErrors.xUrl}</p>
+                <p className='mt-1 text-[var(--text-error)] text-small'>{fieldErrors.xUrl}</p>
               )}
             </div>
 
@@ -451,11 +451,11 @@ export function TemplateProfile() {
                   placeholder='linkedin.com/in/username'
                   value={formData.linkedinUrl}
                   onChange={(e) => updateField('linkedinUrl', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.linkedinUrl && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>
+                <p className='mt-1 text-[var(--text-error)] text-small'>
                   {fieldErrors.linkedinUrl}
                 </p>
               )}
@@ -468,13 +468,11 @@ export function TemplateProfile() {
                   placeholder='yourwebsite.com'
                   value={formData.websiteUrl}
                   onChange={(e) => updateField('websiteUrl', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.websiteUrl && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>
-                  {fieldErrors.websiteUrl}
-                </p>
+                <p className='mt-1 text-[var(--text-error)] text-small'>{fieldErrors.websiteUrl}</p>
               )}
             </div>
 
@@ -486,11 +484,11 @@ export function TemplateProfile() {
                   type='email'
                   value={formData.contactEmail}
                   onChange={(e) => updateField('contactEmail', e.target.value)}
-                  className='h-9 w-full pl-[32px]'
+                  className='h-9 w-full pl-8'
                 />
               </div>
               {fieldErrors.contactEmail && (
-                <p className='mt-[4px] text-[13px] text-[var(--text-error)]'>
+                <p className='mt-1 text-[var(--text-error)] text-small'>
                   {fieldErrors.contactEmail}
                 </p>
               )}
@@ -499,8 +497,8 @@ export function TemplateProfile() {
         </div>
       </div>
 
-      <div className='mt-auto flex items-center justify-end gap-[8px]'>
-        {saveError && <p className='mr-auto text-[13px] text-[var(--text-error)]'>{saveError}</p>}
+      <div className='mt-auto flex items-center justify-end gap-2'>
+        {saveError && <p className='mr-auto text-[var(--text-error)] text-small'>{saveError}</p>}
         <Button
           onClick={handleSubmit}
           disabled={saveStatus === 'saving' || !isFormValid}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx
index 6cb1994abf3..6cd8b16901b 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-header/usage-header.tsx
@@ -56,28 +56,24 @@ export function UsageHeader({
   const isOnDemandActive = onDemandState === 'disable'
 
   return (
-    <div className='flex flex-col gap-[12px]'>
+    <div className='flex flex-col gap-3'>
       <div className='flex items-center justify-between'>
-        <div className='flex flex-col gap-[4px]'>
-          <span className='font-medium text-[13px] text-[var(--text-secondary)]'>
+        <div className='flex flex-col gap-1'>
+          <span className='font-medium text-[var(--text-secondary)] text-small'>
             {title}
-            {seatsText && (
-              <span className='ml-[6px] text-[var(--text-tertiary)]'>({seatsText})</span>
-            )}
+            {seatsText && <span className='ml-1.5 text-[var(--text-tertiary)]'>({seatsText})</span>}
           </span>
-          <div className='flex items-center gap-[4px]'>
+          <div className='flex items-center gap-1'>
             {isBlocked ? (
-              <span className='font-medium text-[15px] text-[var(--text-error)]'>
-                Payment failed
-              </span>
+              <span className='font-medium text-[var(--text-error)] text-base'>Payment failed</span>
             ) : (
               <>
-                <span className='font-medium text-[15px] text-[var(--text-primary)] tabular-nums'>
+                <span className='font-medium text-[var(--text-primary)] text-base tabular-nums'>
                   {formatCredits(current)}
                 </span>
-                <span className='font-medium text-[15px] text-[var(--text-primary)]'>/</span>
+                <span className='font-medium text-[var(--text-primary)] text-base'>/</span>
                 {rightContent ?? (
-                  <span className='font-medium text-[15px] text-[var(--text-primary)] tabular-nums'>
+                  <span className='font-medium text-[var(--text-primary)] text-base tabular-nums'>
                     {formatCredits(limit)}
                     {limit < ON_DEMAND_UNLIMITED && ' credits'}
                   </span>
@@ -88,10 +84,7 @@ export function UsageHeader({
         </div>
 
         <div
-          className={cn(
-            'flex flex-col gap-[8px]',
-            showOnDemandBadge ? 'items-center' : 'items-end'
-          )}
+          className={cn('flex flex-col gap-2', showOnDemandBadge ? 'items-center' : 'items-end')}
         >
           {showOnDemandBadge ? (
             <Badge
@@ -114,13 +107,13 @@ export function UsageHeader({
               </Badge>
             )
           )}
-          <div className='flex w-[100px] items-center gap-[4px]'>
+          <div className='flex w-[100px] items-center gap-1'>
             {Array.from({ length: PILL_COUNT }).map((_, i) => {
               const isFilled = i < filledPillsCount
               return (
                 <div
                   key={i}
-                  className='h-[6px] flex-1 rounded-[2px]'
+                  className='h-[6px] flex-1 rounded-xs'
                   style={{
                     backgroundColor: isFilled ? filledColor : USAGE_PILL_COLORS.UNFILLED,
                   }}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx
index 168d8aedba1..f0be6e21397 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/usage-limit/usage-limit.tsx
@@ -174,10 +174,10 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
     const inputWidthCh = Math.max(3, inputValue.length + 2)
 
     return (
-      <div className='flex items-center gap-[6px]'>
+      <div className='flex items-center gap-1.5'>
         {isEditing ? (
           <>
-            <span className='font-medium text-[15px] text-[var(--text-muted)]'>$</span>
+            <span className='font-medium text-[var(--text-muted)] text-base'>$</span>
             <input
               ref={inputRef}
               type='number'
@@ -192,7 +192,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
                 handleSubmit()
               }}
               className={cn(
-                'border-0 bg-transparent p-0 font-medium text-[15px] text-[var(--text-primary)] tabular-nums',
+                'border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-base tabular-nums',
                 'outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0',
                 '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',
                 hasError && 'text-[var(--text-error)]'
@@ -222,7 +222,7 @@ export const UsageLimit = forwardRef<UsageLimitRef, UsageLimitProps>(
           </>
         ) : (
           <>
-            <span className='font-medium text-[15px] text-[var(--text-primary)] tabular-nums'>
+            <span className='font-medium text-[var(--text-primary)] text-base tabular-nums'>
               {formatCredits(pendingLimit !== null ? pendingLimit : currentLimit)}
               {(pendingLimit !== null ? pendingLimit : currentLimit) < ON_DEMAND_UNLIMITED &&
                 ' credits'}
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
index 20d031a246c..7ced52281bd 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/components/workflow-mcp-servers/workflow-mcp-servers.tsx
@@ -302,7 +302,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   if (isLoading) {
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <Skeleton className='h-[24px] w-[200px]' />
         <Skeleton className='h-[100px] w-full' />
         <Skeleton className='h-[150px] w-full' />
@@ -312,8 +312,8 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   if (error || !data) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-        <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+      <div className='flex h-full flex-col items-center justify-center gap-2'>
+        <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
           Failed to load server details
         </p>
         <Button variant='default' onClick={onBack}>
@@ -327,7 +327,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         <SModalTabs
           value={activeServerTab}
           onValueChange={(value) => setActiveServerTab(value as 'workflows' | 'details')}
@@ -340,11 +340,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
 
           <SModalTabsBody className='min-h-[300px]'>
             <SModalTabsContent value='workflows'>
-              <div className='flex flex-col gap-[18px]'>
+              <div className='flex flex-col gap-4.5'>
                 <div className='flex items-center justify-between'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                    Workflows
-                  </span>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>Workflows</span>
                   {showAddDisabledTooltip ? (
                     <Tooltip.Root>
                       <Tooltip.Trigger asChild>
@@ -354,7 +352,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                             onClick={() => setShowAddWorkflow(true)}
                             disabled
                           >
-                            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                            <Plus className='mr-1.5 h-[13px] w-[13px]' />
                             Add
                           </Button>
                         </div>
@@ -369,27 +367,27 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                       onClick={() => setShowAddWorkflow(true)}
                       disabled={!canAddWorkflow}
                     >
-                      <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                      <Plus className='mr-1.5 h-[13px] w-[13px]' />
                       Add
                     </Button>
                   )}
                 </div>
 
                 {tools.length === 0 ? (
-                  <p className='text-[14px] text-[var(--text-muted)]'>
+                  <p className='text-[var(--text-muted)] text-sm'>
                     No workflows added yet. Click "Add" to add a deployed workflow.
                   </p>
                 ) : (
-                  <div className='flex flex-col gap-[8px]'>
+                  <div className='flex flex-col gap-2'>
                     {tools.map((tool) => (
-                      <div key={tool.id} className='flex items-center justify-between gap-[12px]'>
+                      <div key={tool.id} className='flex items-center justify-between gap-3'>
                         <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                          <span className='font-medium text-[15px]'>{tool.toolName}</span>
-                          <p className='truncate text-[14px] text-[var(--text-muted)]'>
+                          <span className='font-medium text-base'>{tool.toolName}</span>
+                          <p className='truncate text-[var(--text-muted)] text-sm'>
                             {tool.toolDescription || 'No description'}
                           </p>
                         </div>
-                        <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                        <div className='flex flex-shrink-0 items-center gap-1'>
                           <Button variant='default' onClick={() => setToolToView(tool)}>
                             Edit
                           </Button>
@@ -407,7 +405,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 )}
 
                 {deployedWorkflows.length === 0 && !isLoadingWorkflows && (
-                  <p className='mt-[4px] text-[11px] text-[var(--text-muted)]'>
+                  <p className='mt-1 text-[var(--text-muted)] text-xs'>
                     Deploy a workflow first to add it to this server.
                   </p>
                 )}
@@ -415,49 +413,45 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
             </SModalTabsContent>
 
             <SModalTabsContent value='details'>
-              <div className='flex flex-col gap-[18px]'>
-                <div className='grid grid-cols-[1fr_1fr_1fr] gap-x-[24px] gap-y-[14px]'>
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+              <div className='flex flex-col gap-4.5'>
+                <div className='grid grid-cols-[1fr_1fr_1fr] gap-x-6 gap-y-3.5'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
                       Server Name
                     </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>{server.name}</p>
+                    <p className='text-[var(--text-secondary)] text-base'>{server.name}</p>
                   </div>
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
                       Transport
                     </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>Streamable-HTTP</p>
+                    <p className='text-[var(--text-secondary)] text-base'>Streamable-HTTP</p>
                   </div>
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
-                      Access
-                    </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>Access</span>
+                    <p className='text-[var(--text-secondary)] text-base'>
                       {server.isPublic ? 'Public' : 'API Key'}
                     </p>
                   </div>
                 </div>
 
                 {server.description?.trim() && (
-                  <div className='flex flex-col gap-[4px]'>
-                    <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+                  <div className='flex flex-col gap-1'>
+                    <span className='font-medium text-[var(--text-primary)] text-sm'>
                       Description
                     </span>
-                    <p className='text-[15px] text-[var(--text-secondary)]'>{server.description}</p>
+                    <p className='text-[var(--text-secondary)] text-base'>{server.description}</p>
                   </div>
                 )}
 
-                <div className='flex flex-col gap-[4px]'>
-                  <span className='font-medium text-[14px] text-[var(--text-primary)]'>URL</span>
-                  <p className='break-all text-[15px] text-[var(--text-secondary)]'>
-                    {mcpServerUrl}
-                  </p>
+                <div className='flex flex-col gap-1'>
+                  <span className='font-medium text-[var(--text-primary)] text-sm'>URL</span>
+                  <p className='break-all text-[var(--text-secondary)] text-base'>{mcpServerUrl}</p>
                 </div>
 
                 <div>
                   <div className='mb-[6.5px] flex items-center justify-between'>
-                    <span className='block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                    <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                       MCP Client
                     </span>
                   </div>
@@ -474,9 +468,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 </div>
 
                 {activeConfigTab === 'sim' ? (
-                  <div className='rounded-[8px] border border-[var(--border-1)] p-[16px]'>
-                    <div className='flex flex-col gap-[12px]'>
-                      <p className='text-[13px] text-[var(--text-secondary)]'>
+                  <div className='rounded-lg border border-[var(--border-1)] p-4'>
+                    <div className='flex flex-col gap-3'>
+                      <p className='text-[var(--text-secondary)] text-small'>
                         Add this MCP server to your workspace so you can use its tools in other
                         workflows via the MCP block.
                       </p>
@@ -514,18 +508,18 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                           'Adding...'
                         ) : addedToWorkspace ? (
                           <>
-                            <Check className='mr-[6px] h-[13px] w-[13px]' />
+                            <Check className='mr-1.5 h-[13px] w-[13px]' />
                             Added to Workspace
                           </>
                         ) : (
                           <>
-                            <Server className='mr-[6px] h-[13px] w-[13px]' />
+                            <Server className='mr-1.5 h-[13px] w-[13px]' />
                             Add to Workspace
                           </>
                         )}
                       </Button>
                       {addToWorkspaceMutation.isError && (
-                        <p className='text-[11px] text-[var(--text-error)]'>
+                        <p className='text-[var(--text-error)] text-xs'>
                           {addToWorkspaceMutation.error?.message || 'Failed to add server'}
                         </p>
                       )}
@@ -534,7 +528,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 ) : (
                   <div>
                     <div className='mb-[6.5px] flex items-center justify-between'>
-                      <span className='block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                      <span className='block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                         Configuration
                       </span>
                       <Button
@@ -554,28 +548,28 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                         code={getConfigSnippet(activeConfigTab, server.isPublic, server.name)}
                         language={activeConfigTab === 'claude-code' ? 'javascript' : 'json'}
                         wrapText
-                        className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+                        className='!min-h-0 rounded-sm border border-[var(--border-1)]'
                       />
                       {activeConfigTab === 'cursor' && (
                         <a
                           href={getCursorInstallUrl(server.isPublic, server.name)}
-                          className='absolute top-[6px] right-2 inline-flex rounded-[6px] bg-[var(--surface-5)] ring-1 ring-[var(--border-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
+                          className='absolute top-1.5 right-2 inline-flex rounded-md bg-[var(--surface-5)] ring-1 ring-[var(--border-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--brand-primary)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]'
                         >
                           <img
                             src='https://cursor.com/deeplink/mcp-install-dark.svg'
                             alt='Add to Cursor'
-                            className='h-[26px] rounded-[6px] align-middle'
+                            className='h-[26px] rounded-md align-middle'
                           />
                         </a>
                       )}
                     </div>
                     {!server.isPublic && (
-                      <p className='mt-[8px] text-[11px] text-[var(--text-muted)]'>
+                      <p className='mt-2 text-[var(--text-muted)] text-xs'>
                         Replace $SIM_API_KEY with your API key, or{' '}
                         <button
                           type='button'
                           onClick={() => setShowCreateApiKeyModal(true)}
-                          className='underline hover:text-[var(--text-secondary)]'
+                          className='underline hover-hover:text-[var(--text-secondary)]'
                         >
                           create one now
                         </button>
@@ -592,7 +586,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
           <Button onClick={onBack} variant='default'>
             Back
           </Button>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             {activeServerTab === 'details' && (
               <>
                 <Button onClick={handleOpenEditServer} variant='default'>
@@ -666,9 +660,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
         <ModalContent size='md'>
           <ModalHeader>{toolToView?.toolName}</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[18px]'>
+            <div className='flex flex-col gap-4.5'>
               <div>
-                <Label className='mb-[6.5px] block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                   Description
                 </Label>
                 <Textarea
@@ -687,19 +681,19 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 const hasParams = properties && Object.keys(properties).length > 0
                 return (
                   <div>
-                    <Label className='mb-[6.5px] block pl-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+                    <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-sm'>
                       Parameters
                     </Label>
                     {hasParams ? (
-                      <div className='flex flex-col gap-[8px]'>
+                      <div className='flex flex-col gap-2'>
                         {Object.entries(properties).map(([name, prop]) => (
                           <div
                             key={name}
-                            className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'
+                            className='overflow-hidden rounded-sm border border-[var(--border-1)]'
                           >
-                            <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
-                              <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                                <span className='block truncate font-medium text-[15px] text-[var(--text-tertiary)]'>
+                            <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
+                              <div className='flex min-w-0 flex-1 items-center gap-2'>
+                                <span className='block truncate font-medium text-[var(--text-tertiary)] text-base'>
                                   {name}
                                 </span>
                                 <Badge variant='type' size='sm'>
@@ -707,9 +701,9 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                                 </Badge>
                               </div>
                             </div>
-                            <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                              <div className='flex flex-col gap-[6px]'>
-                                <Label className='text-[14px]'>Description</Label>
+                            <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                              <div className='flex flex-col gap-1.5'>
+                                <Label className='text-sm'>Description</Label>
                                 <EmcnInput
                                   value={editingParameterDescriptions[name] || ''}
                                   onChange={(e) =>
@@ -726,7 +720,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                         ))}
                       </div>
                     ) : (
-                      <p className='text-[14px] text-[var(--text-muted)]'>
+                      <p className='text-[var(--text-muted)] text-sm'>
                         No inputs configured for this workflow.
                       </p>
                     )}
@@ -821,8 +815,8 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
               as a tool.
             </p>
 
-            <div className='mt-[16px] flex flex-col gap-[8px]'>
-              <Label className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='mt-4 flex flex-col gap-2'>
+              <Label className='font-medium text-[var(--text-secondary)] text-sm'>
                 Select Workflow
               </Label>
               <Combobox
@@ -842,7 +836,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                 }
               />
               {addToolMutation.isError && (
-                <p className='text-[13px] text-[var(--text-error)] leading-tight'>
+                <p className='text-[var(--text-error)] text-small leading-tight'>
                   {addToolMutation.error?.message || 'Failed to add workflow'}
                 </p>
               )}
@@ -881,7 +875,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
         <ModalContent size='lg'>
           <ModalHeader>Edit Server</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
+            <div className='flex flex-col gap-3'>
               <FormField label='Server Name'>
                 <EmcnInput
                   placeholder='e.g., My MCP Server'
@@ -909,7 +903,7 @@ function ServerDetailView({ workspaceId, serverId, onBack }: ServerDetailViewPro
                   <ButtonGroupItem value='public'>Public</ButtonGroupItem>
                 </ButtonGroup>
               </FormField>
-              <p className='text-[11px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-xs'>
                 {editServerIsPublic
                   ? 'Anyone with the URL can call this server without authentication'
                   : 'Requests must include your Sim API key in the X-API-Key header'}
@@ -1046,9 +1040,9 @@ export function WorkflowMcpServers() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1061,41 +1055,39 @@ export function WorkflowMcpServers() {
             />
           </div>
           <Button onClick={() => setShowAddModal(true)} disabled={isLoading} variant='primary'>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Add
           </Button>
         </div>
 
         <div className='min-h-0 flex-1 overflow-y-auto'>
           {error ? (
-            <div className='flex h-full flex-col items-center justify-center gap-[8px]'>
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+            <div className='flex h-full flex-col items-center justify-center gap-2'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {error instanceof Error ? error.message : 'Failed to load MCP servers'}
               </p>
             </div>
           ) : isLoading ? (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <McpServerSkeleton />
               <McpServerSkeleton />
               <McpServerSkeleton />
             </div>
           ) : !hasServers ? (
             <div className='flex h-full items-center justify-center'>
-              <p className='text-[14px] text-[var(--text-muted)]'>
-                Click "Add" above to get started
-              </p>
+              <p className='text-[var(--text-muted)] text-sm'>Click "Add" above to get started</p>
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredServers.map((server) => {
                 const count = server.toolCount || 0
                 const toolsLabel = `${count} tool${count !== 1 ? 's' : ''}`
                 const isDeleting = deletingServers.has(server.id)
                 return (
-                  <div key={server.id} className='flex items-center justify-between gap-[12px]'>
+                  <div key={server.id} className='flex items-center justify-between gap-3'>
                     <div className='flex min-w-0 flex-col justify-center gap-[1px]'>
-                      <div className='flex items-center gap-[6px]'>
-                        <span className='max-w-[200px] truncate font-medium text-[15px]'>
+                      <div className='flex items-center gap-1.5'>
+                        <span className='max-w-[200px] truncate font-medium text-base'>
                           {server.name}
                         </span>
                         {server.isPublic && (
@@ -1104,9 +1096,9 @@ export function WorkflowMcpServers() {
                           </Badge>
                         )}
                       </div>
-                      <p className='truncate text-[14px] text-[var(--text-muted)]'>{toolsLabel}</p>
+                      <p className='truncate text-[var(--text-muted)] text-sm'>{toolsLabel}</p>
                     </div>
-                    <div className='flex flex-shrink-0 items-center gap-[4px]'>
+                    <div className='flex flex-shrink-0 items-center gap-1'>
                       <Button variant='default' onClick={() => setSelectedServerId(server.id)}>
                         Details
                       </Button>
@@ -1122,7 +1114,7 @@ export function WorkflowMcpServers() {
                 )
               })}
               {showNoResults && (
-                <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
                   No servers found matching "{searchTerm}"
                 </div>
               )}
@@ -1135,7 +1127,7 @@ export function WorkflowMcpServers() {
         <ModalContent>
           <ModalHeader>Add New MCP Server</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
+            <div className='flex flex-col gap-3'>
               <FormField label='Server Name'>
                 <EmcnInput
                   placeholder='e.g., My MCP Server'
@@ -1178,7 +1170,7 @@ export function WorkflowMcpServers() {
               </FormField>
 
               <FormField label='Access'>
-                <div className='flex items-center gap-[12px]'>
+                <div className='flex items-center gap-3'>
                   <ButtonGroup
                     value={formData.isPublic ? 'public' : 'private'}
                     onValueChange={(value) =>
@@ -1189,7 +1181,7 @@ export function WorkflowMcpServers() {
                     <ButtonGroupItem value='public'>Public</ButtonGroupItem>
                   </ButtonGroup>
                   {formData.isPublic && (
-                    <span className='text-[11px] text-[var(--text-muted)]'>
+                    <span className='text-[var(--text-muted)] text-xs'>
                       No authentication required
                     </span>
                   )}
@@ -1198,7 +1190,7 @@ export function WorkflowMcpServers() {
             </div>
           </ModalBody>
           <ModalFooter>
-            <Button variant='ghost' onClick={resetForm}>
+            <Button variant='default' onClick={resetForm}>
               Cancel
             </Button>
             <Button
diff --git a/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx b/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx
index 76564966fba..0fab587de01 100644
--- a/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/settings/layout.tsx
@@ -1,7 +1,7 @@
 export default function SettingsLayout({ children }: { children: React.ReactNode }) {
   return (
     <div className='h-full overflow-y-auto [scrollbar-gutter:stable]'>
-      <div className='mx-auto flex min-h-full max-w-[900px] flex-col px-[26px] pt-[36px] pb-[52px]'>
+      <div className='mx-auto flex min-h-full max-w-[900px] flex-col px-[26px] pt-9 pb-[52px]'>
         {children}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
index 6f35e7e3093..1e08d230b13 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/row-modal/row-modal.tsx
@@ -158,7 +158,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
           <ModalHeader>Delete {isSingleRow ? 'Row' : `${deleteCount} Rows`}</ModalHeader>
           <ModalBody>
             {error && (
-              <div className='rounded-[8px] border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-[14px] py-[12px] text-[13px] text-[var(--status-error-text)]'>
+              <div className='rounded-lg border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-3.5 py-3 text-[var(--status-error-text)] text-small'>
                 {error}
               </div>
             )}
@@ -188,15 +188,15 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
     <Modal open={isOpen} onOpenChange={handleClose}>
       <ModalContent size='lg'>
         <ModalHeader>
-          <div className='flex flex-col gap-[4px]'>
-            <h2 className='font-semibold text-[16px]'>{isAddMode ? 'Add New Row' : 'Edit Row'}</h2>
-            <p className='font-normal text-[13px] text-[var(--text-tertiary)]'>
+          <div className='flex flex-col gap-1'>
+            <h2 className='font-semibold text-md'>{isAddMode ? 'Add New Row' : 'Edit Row'}</h2>
+            <p className='font-normal text-[var(--text-tertiary)] text-small'>
               {isAddMode ? 'Fill in the values for' : 'Update values for'} {table?.name ?? 'table'}
             </p>
           </div>
         </ModalHeader>
         <ModalBody className='max-h-[60vh] overflow-y-auto'>
-          <form onSubmit={handleFormSubmit} className='flex flex-col gap-[16px]'>
+          <form onSubmit={handleFormSubmit} className='flex flex-col gap-4'>
             <ErrorMessage error={error} />
 
             {columns.map((column) => (
@@ -209,7 +209,7 @@ export function RowModal({ mode, isOpen, onClose, table, row, rowIds, onSuccess
             ))}
           </form>
         </ModalBody>
-        <ModalFooter className='gap-[10px]'>
+        <ModalFooter className='gap-2.5'>
           <Button
             type='button'
             variant='default'
@@ -244,7 +244,7 @@ function ErrorMessage({ error }: { error: string | null }) {
   if (!error) return null
 
   return (
-    <div className='rounded-[8px] border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-[14px] py-[12px] text-[13px] text-[var(--status-error-text)]'>
+    <div className='rounded-lg border border-[var(--status-error-border)] bg-[var(--status-error-bg)] px-3.5 py-3 text-[var(--status-error-text)] text-small'>
       {error}
     </div>
   )
@@ -258,19 +258,17 @@ interface ColumnFieldProps {
 
 function ColumnField({ column, value, onChange }: ColumnFieldProps) {
   return (
-    <div className='flex flex-col gap-[8px]'>
-      <Label htmlFor={column.name} className='font-medium text-[13px]'>
+    <div className='flex flex-col gap-2'>
+      <Label htmlFor={column.name} className='font-medium text-small'>
         {column.name}
         {column.required && <span className='text-[var(--text-error)]'> *</span>}
         {column.unique && (
-          <span className='ml-[6px] font-normal text-[11px] text-[var(--text-tertiary)]'>
-            (unique)
-          </span>
+          <span className='ml-1.5 font-normal text-[var(--text-tertiary)] text-xs'>(unique)</span>
         )}
       </Label>
 
       {column.type === 'boolean' ? (
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <Checkbox
             id={column.name}
             checked={Boolean(value)}
@@ -278,7 +276,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
           />
           <Label
             htmlFor={column.name}
-            className='font-normal text-[13px] text-[var(--text-tertiary)]'
+            className='font-normal text-[var(--text-tertiary)] text-small'
           >
             {value ? 'True' : 'False'}
           </Label>
@@ -290,7 +288,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
           onChange={(e) => onChange(e.target.value)}
           placeholder='{"key": "value"}'
           rows={4}
-          className='font-mono text-[12px]'
+          className='font-mono text-caption'
           required={column.required}
         />
       ) : column.type === 'date' ? (
@@ -312,7 +310,7 @@ function ColumnField({ column, value, onChange }: ColumnFieldProps) {
         />
       )}
 
-      <div className='text-[12px] text-[var(--text-tertiary)]'>
+      <div className='text-[var(--text-tertiary)] text-caption'>
         Type: {column.type}
         {!column.required && ' (optional)'}
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index 69c25d338f7..0e748546771 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -64,7 +64,7 @@ export function TableFilter({ columns, onApply }: TableFilterProps) {
   }, [rules, onApply])
 
   return (
-    <div className='flex flex-col gap-[6px] p-[8px]'>
+    <div className='flex flex-col gap-1.5 p-2'>
       {rules.map((rule) => (
         <FilterRuleRow
           key={rule.id}
@@ -76,20 +76,20 @@ export function TableFilter({ columns, onApply }: TableFilterProps) {
         />
       ))}
 
-      <div className='flex items-center justify-between gap-[12px]'>
+      <div className='flex items-center justify-between gap-3'>
         <Button
           variant='ghost'
           size='sm'
           onClick={handleAdd}
           className={cn(
-            'border border-[var(--border)] border-dashed px-[8px] py-[3px] text-[11px] text-[var(--text-secondary)]'
+            'border border-[var(--border)] border-dashed px-2 py-[3px] text-[var(--text-secondary)] text-xs'
           )}
         >
-          <Plus className='mr-[4px] h-[10px] w-[10px]' />
+          <Plus className='mr-1 h-[10px] w-[10px]' />
           Add filter
         </Button>
 
-        <Button variant='default' size='sm' onClick={handleApply} className='text-[11px]'>
+        <Button variant='default' size='sm' onClick={handleApply} className='text-xs'>
           Apply filter
         </Button>
       </div>
@@ -107,12 +107,12 @@ interface FilterRuleRowProps {
 
 function FilterRuleRow({ rule, columns, onUpdate, onRemove, onApply }: FilterRuleRowProps) {
   return (
-    <div className='flex items-center gap-[4px]'>
+    <div className='flex items-center gap-1'>
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <button className='flex h-[30px] min-w-[100px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-[8px] text-[11px] text-[var(--text-secondary)] outline-none hover:border-[var(--border-1)]'>
+          <button className='flex h-[30px] min-w-[100px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-2 text-[var(--text-secondary)] text-xs outline-none hover-hover:border-[var(--border-1)]'>
             <span className='truncate'>{rule.column || 'Column'}</span>
-            <ChevronDown className='ml-[4px] h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
+            <ChevronDown className='ml-1 h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
@@ -129,9 +129,9 @@ function FilterRuleRow({ rule, columns, onUpdate, onRemove, onApply }: FilterRul
 
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
-          <button className='flex h-[30px] min-w-[50px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-[8px] text-[11px] text-[var(--text-secondary)] outline-none hover:border-[var(--border-1)]'>
+          <button className='flex h-[30px] min-w-[50px] items-center justify-between rounded-[5px] border border-[var(--border)] bg-transparent px-2 text-[var(--text-secondary)] text-xs outline-none hover-hover:border-[var(--border-1)]'>
             <span>{OPERATOR_LABELS[rule.operator] ?? rule.operator}</span>
-            <ChevronDown className='ml-[4px] h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
+            <ChevronDown className='ml-1 h-[10px] w-[10px] shrink-0 text-[var(--text-icon)]' />
           </button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align='start'>
@@ -154,12 +154,12 @@ function FilterRuleRow({ rule, columns, onUpdate, onRemove, onApply }: FilterRul
           if (e.key === 'Enter') handleApply()
         }}
         placeholder='Enter a value'
-        className='h-[30px] min-w-[160px] flex-1 rounded-[5px] border border-[var(--border)] bg-transparent px-[8px] text-[11px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-subtle)] hover:border-[var(--border-1)] focus:border-[var(--border-1)]'
+        className='h-[30px] min-w-[160px] flex-1 rounded-[5px] border border-[var(--border)] bg-transparent px-2 text-[var(--text-secondary)] text-xs outline-none placeholder:text-[var(--text-subtle)] hover-hover:border-[var(--border-1)] focus:border-[var(--border-1)]'
       />
 
       <button
         onClick={() => onRemove(rule.id)}
-        className='flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[5px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--surface-4)] hover:text-[var(--text-primary)]'
+        className='flex h-[30px] w-[30px] shrink-0 items-center justify-center rounded-[5px] text-[var(--text-tertiary)] transition-colors hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
       >
         <X className='h-[12px] w-[12px]' />
       </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
index e6ce9cb47f9..ec824bda092 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table/table.tsx
@@ -93,15 +93,15 @@ const SKELETON_COL_COUNT = 4
 const SKELETON_ROW_COUNT = 10
 const ROW_HEIGHT_ESTIMATE = 35
 
-const CELL = 'border-[var(--border)] border-r border-b px-[8px] py-[7px] align-middle select-none'
+const CELL = 'border-[var(--border)] border-r border-b px-2 py-[7px] align-middle select-none'
 const CELL_CHECKBOX =
-  'border-[var(--border)] border-r border-b px-[4px] py-[7px] align-middle select-none'
+  'border-[var(--border)] border-r border-b px-1 py-[7px] align-middle select-none'
 const CELL_HEADER =
-  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-[8px] py-[7px] text-left align-middle'
+  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-2 py-[7px] text-left align-middle'
 const CELL_HEADER_CHECKBOX =
-  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-[4px] py-[7px] text-center align-middle'
+  'border-[var(--border)] border-r border-b bg-[var(--bg)] px-1 py-[7px] text-center align-middle'
 const CELL_CONTENT =
-  'relative min-h-[20px] min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[13px]'
+  'relative min-h-[20px] min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-small'
 const SELECTION_OVERLAY =
   'pointer-events-none absolute -top-px -right-px -bottom-px -left-px z-[5] border-[2px] border-[var(--selection)]'
 
@@ -1443,11 +1443,11 @@ export function Table({
 
   if (!isLoadingTable && !tableData) {
     return (
-      <div className='flex h-full flex-col items-center justify-center gap-[12px]'>
+      <div className='flex h-full flex-col items-center justify-center gap-3'>
         <TableX className='h-[32px] w-[32px] text-[var(--text-muted)]' />
-        <div className='flex flex-col items-center gap-[4px]'>
+        <div className='flex flex-col items-center gap-1'>
           <h2 className='font-medium text-[20px] text-[var(--text-secondary)]'>Table not found</h2>
-          <p className='text-[13px] text-[var(--text-muted)]'>
+          <p className='text-[var(--text-muted)] text-small'>
             This table may have been deleted or moved
           </p>
         </div>
@@ -1476,7 +1476,7 @@ export function Table({
       >
         <div className='relative h-fit' style={{ width: `${tableWidth}px` }}>
           <table
-            className='table-fixed border-separate border-spacing-0 text-[13px]'
+            className='table-fixed border-separate border-spacing-0 text-small'
             style={{ width: `${tableWidth}px` }}
           >
             {isLoadingTable ? (
@@ -1495,20 +1495,20 @@ export function Table({
                 <tr>
                   <th className={CELL_HEADER_CHECKBOX}>
                     <div className='flex items-center justify-center'>
-                      <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
+                      <Skeleton className='h-[14px] w-[14px] rounded-xs' />
                     </div>
                   </th>
                   {Array.from({ length: SKELETON_COL_COUNT }).map((_, i) => (
                     <th key={i} className={CELL_HEADER}>
-                      <div className='flex h-[20px] min-w-0 items-center gap-[6px]'>
-                        <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-[2px]' />
+                      <div className='flex h-[20px] min-w-0 items-center gap-1.5'>
+                        <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-xs' />
                         <Skeleton className='h-[14px]' style={{ width: `${56 + i * 16}px` }} />
                       </div>
                     </th>
                   ))}
                   <th className={CELL_HEADER}>
-                    <div className='flex h-[20px] items-center gap-[8px]'>
-                      <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-[2px]' />
+                    <div className='flex h-[20px] items-center gap-2'>
+                      <Skeleton className='h-[14px] w-[14px] shrink-0 rounded-xs' />
                       <Skeleton className='h-[14px] w-[72px]' />
                     </div>
                   </th>
@@ -1765,7 +1765,7 @@ const PositionGapRows = React.memo(
               >
                 <span
                   className={cn(
-                    'text-[11px] text-[var(--text-tertiary)] tabular-nums',
+                    'text-[var(--text-tertiary)] text-xs tabular-nums',
                     isGapChecked ? 'hidden' : 'block group-hover/checkbox:hidden'
                   )}
                 >
@@ -2008,7 +2008,7 @@ const DataRow = React.memo(function DataRow({
       >
         <span
           className={cn(
-            'text-[11px] text-[var(--text-tertiary)] tabular-nums',
+            'text-[var(--text-tertiary)] text-xs tabular-nums',
             isRowSelected ? 'hidden' : 'block group-hover/checkbox:hidden'
           )}
         >
@@ -2259,7 +2259,7 @@ function InlineDateEditor({
         onBlur={handleBlur}
         placeholder='mm/dd/yyyy'
         className={cn(
-          'w-full min-w-0 select-text border-none bg-transparent p-0 text-[13px] text-[var(--text-primary)] outline-none'
+          'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none'
         )}
       />
       <div className='absolute top-full left-0 h-0 w-0'>
@@ -2353,7 +2353,7 @@ function InlineTextEditor({
       onKeyDown={handleKeyDown}
       onBlur={() => doSave('blur')}
       className={cn(
-        'w-full min-w-0 select-text border-none bg-transparent p-0 text-[13px] text-[var(--text-primary)] outline-none'
+        'w-full min-w-0 select-text border-none bg-transparent p-0 text-[var(--text-primary)] text-small outline-none'
       )}
     />
   )
@@ -2383,7 +2383,7 @@ const TableBodySkeleton = React.memo(function TableBodySkeleton({
         <tr key={rowIndex}>
           <td className={cn(CELL_CHECKBOX, 'text-center')}>
             <div className='flex min-h-[20px] items-center justify-center'>
-              <span className='text-[11px] text-[var(--text-tertiary)] tabular-nums'>
+              <span className='text-[var(--text-tertiary)] text-xs tabular-nums'>
                 {rowIndex + 1}
               </span>
             </div>
@@ -2488,7 +2488,7 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
   return (
     <th className='relative border-[var(--border)] border-r border-b bg-[var(--bg)] p-0 text-left align-middle'>
       {isRenaming ? (
-        <div className='flex h-full w-full min-w-0 items-center px-[8px] py-[7px]'>
+        <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
           <ColumnTypeIcon type={column.type} />
           <input
             ref={renameInputRef}
@@ -2500,7 +2500,7 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               if (e.key === 'Escape') onRenameCancel()
             }}
             onBlur={onRenameSubmit}
-            className='ml-[6px] min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[13px] text-[var(--text-primary)] outline-none focus:outline-none focus:ring-0'
+            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-small outline-none focus:outline-none focus:ring-0'
           />
         </div>
       ) : (
@@ -2508,13 +2508,13 @@ const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
           <DropdownMenuTrigger asChild>
             <button
               type='button'
-              className='flex h-full w-full min-w-0 cursor-pointer items-center px-[8px] py-[7px] outline-none'
+              className='flex h-full w-full min-w-0 cursor-pointer items-center px-2 py-[7px] outline-none'
             >
               <ColumnTypeIcon type={column.type} />
-              <span className='ml-[6px] min-w-0 truncate font-medium text-[13px] text-[var(--text-primary)]'>
+              <span className='ml-1.5 min-w-0 truncate font-medium text-[var(--text-primary)] text-small'>
                 {column.name}
               </span>
-              <ChevronDown className='ml-[8px] h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
+              <ChevronDown className='ml-2 h-[7px] w-[9px] shrink-0 text-[var(--text-muted)]' />
             </button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align='start'>
@@ -2597,12 +2597,12 @@ const AddColumnButton = React.memo(function AddColumnButton({
     <th className={CELL_HEADER}>
       <button
         type='button'
-        className='flex h-[20px] cursor-pointer items-center gap-[8px]'
+        className='flex h-[20px] cursor-pointer items-center gap-2'
         onClick={onClick}
         disabled={disabled}
       >
         <Plus className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-        <span className='font-medium text-[13px] text-[var(--text-body)]'>New column</span>
+        <span className='font-medium text-[var(--text-body)] text-small'>New column</span>
       </button>
     </th>
   )
@@ -2610,14 +2610,14 @@ const AddColumnButton = React.memo(function AddColumnButton({
 
 const AddRowButton = React.memo(function AddRowButton({ onClick }: { onClick: () => void }) {
   return (
-    <div className='px-[8px] py-[7px]'>
+    <div className='px-2 py-[7px]'>
       <button
         type='button'
-        className='flex h-[20px] cursor-pointer items-center gap-[8px]'
+        className='flex h-[20px] cursor-pointer items-center gap-2'
         onClick={onClick}
       >
         <Plus className='h-[14px] w-[14px] shrink-0 text-[var(--text-icon)]' />
-        <span className='font-medium text-[13px] text-[var(--text-body)]'>New row</span>
+        <span className='font-medium text-[var(--text-body)] text-small'>New row</span>
       </button>
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx
index a0d5a1719b0..032e14a5043 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/error.tsx
@@ -23,7 +23,7 @@ export default function TableError({ error, reset }: TableErrorProps) {
       loggerName='TableError'
       secondaryAction={{
         label: 'Go back',
-        icon: <ArrowLeft className='mr-[6px] h-[14px] w-[14px]' />,
+        icon: <ArrowLeft className='mr-1.5 h-[14px] w-[14px]' />,
         onClick: () => router.push(`/workspace/${workspaceId}/tables`),
       }}
     />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx
index 3eb4cd58d01..02a5db5882c 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 5
 export default function TableDetailLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[16px] py-[8.5px]'>
+      <div className='border-[var(--border)] border-b px-[16px] py-[8.5px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[8px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -22,7 +22,7 @@ export default function TableDetailLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               {Array.from({ length: COLUMN_COUNT }).map((_, i) => (
                 <th key={i} className='px-[12px] py-[8px] text-left'>
                   <Skeleton className='h-[12px] w-[72px] rounded-[4px]' />
@@ -32,7 +32,7 @@ export default function TableDetailLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 {Array.from({ length: COLUMN_COUNT }).map((_, colIndex) => (
                   <td key={colIndex} className='px-[12px] py-[10px]'>
                     <Skeleton
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx
index 2ce948245ec..eda84842abf 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/loading.tsx
@@ -6,7 +6,7 @@ const COLUMN_COUNT = 6
 export default function TablesLoading() {
   return (
     <div className='flex h-full flex-1 flex-col overflow-hidden bg-[var(--bg)]'>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center justify-between'>
           <div className='flex items-center gap-[12px]'>
             <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
@@ -17,7 +17,7 @@ export default function TablesLoading() {
           </div>
         </div>
       </div>
-      <div className='border-b border-[var(--border)] px-[24px] py-[10px]'>
+      <div className='border-[var(--border)] border-b px-[24px] py-[10px]'>
         <div className='flex items-center'>
           <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
           <Skeleton className='ml-[10px] h-[14px] w-[120px] rounded-[4px]' />
@@ -26,7 +26,7 @@ export default function TablesLoading() {
       <div className='min-h-0 flex-1 overflow-auto'>
         <table className='w-full'>
           <thead>
-            <tr className='border-b border-[var(--border)]'>
+            <tr className='border-[var(--border)] border-b'>
               <th className='w-[40px] px-[12px] py-[8px]'>
                 <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
               </th>
@@ -39,7 +39,7 @@ export default function TablesLoading() {
           </thead>
           <tbody>
             {Array.from({ length: SKELETON_ROW_COUNT }).map((_, rowIndex) => (
-              <tr key={rowIndex} className='border-b border-[var(--border)]'>
+              <tr key={rowIndex} className='border-[var(--border)] border-b'>
                 <td className='w-[40px] px-[12px] py-[10px]'>
                   <Skeleton className='h-[14px] w-[14px] rounded-[2px]' />
                 </td>
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
index a19809e4e06..57a38d97938 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/components/template-card.tsx
@@ -27,30 +27,30 @@ export function TemplateCardSkeleton({ className }: { className?: string }) {
   return (
     <div
       className={cn(
-        'h-[268px] w-full rounded-[8px] bg-[var(--surface-3)] p-[8px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]',
+        'h-[268px] w-full rounded-lg bg-[var(--surface-3)] p-2 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]',
         className
       )}
     >
-      <div className='h-[180px] w-full animate-pulse rounded-[6px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
+      <div className='h-[180px] w-full animate-pulse rounded-md bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
 
-      <div className='mt-[14px] flex items-center justify-between'>
+      <div className='mt-3.5 flex items-center justify-between'>
         <div className='h-4 w-32 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         <div className='flex items-center gap-[-4px]'>
           {Array.from({ length: 3 }).map((_, index) => (
             <div
               key={index}
-              className='h-[18px] w-[18px] animate-pulse rounded-[4px] bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
+              className='h-[18px] w-[18px] animate-pulse rounded-sm bg-[var(--surface-4)] dark:bg-[var(--surface-5)]'
             />
           ))}
         </div>
       </div>
 
-      <div className='mt-[14px] flex items-center justify-between'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='mt-3.5 flex items-center justify-between'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-[20px] w-[20px] animate-pulse rounded-full bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           <div className='h-3 w-20 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
         </div>
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           <div className='h-3 w-6 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
           <div className='h-3 w-3 animate-pulse rounded bg-[var(--surface-4)] dark:bg-[var(--surface-5)]' />
@@ -199,13 +199,13 @@ function TemplateCardInner({
     <div
       onClick={handleCardClick}
       className={cn(
-        'w-full cursor-pointer rounded-[8px] bg-[var(--surface-3)] p-[8px] transition-colors hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:bg-[var(--surface-5)]',
+        'w-full cursor-pointer rounded-lg bg-[var(--surface-3)] p-2 transition-colors hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:bg-[var(--surface-5)]',
         className
       )}
     >
       <div
         ref={previewRef}
-        className='pointer-events-none h-[180px] w-full overflow-hidden rounded-[6px]'
+        className='pointer-events-none h-[180px] w-full overflow-hidden rounded-md'
       >
         {normalizedState && isInView ? (
           <PreviewWorkflow
@@ -223,8 +223,8 @@ function TemplateCardInner({
         )}
       </div>
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <h3 className='truncate pr-[8px] pl-[2px] font-medium text-[16px] text-[var(--text-primary)]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <h3 className='truncate pr-2 pl-0.5 font-medium text-[var(--text-primary)] text-md'>
           {title}
         </h3>
 
@@ -238,7 +238,7 @@ function TemplateCardInner({
                 return (
                   <div
                     key={index}
-                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                    className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                     style={{
                       background: blockConfig.bgColor || 'gray',
                       marginLeft: index > 0 ? '-4px' : '0',
@@ -249,10 +249,10 @@ function TemplateCardInner({
                 )
               })}
               <div
-                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] bg-[var(--surface-7)]'
+                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm bg-[var(--surface-7)]'
                 style={{ marginLeft: '-4px' }}
               >
-                <span className='font-medium text-[10px] text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-primary)] text-micro'>
                   +{blockTypes.length - 3}
                 </span>
               </div>
@@ -265,7 +265,7 @@ function TemplateCardInner({
               return (
                 <div
                   key={index}
-                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                  className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
                   style={{
                     background: blockConfig.bgColor || 'gray',
                     marginLeft: index > 0 ? '-4px' : '0',
@@ -280,13 +280,13 @@ function TemplateCardInner({
       </div>
 
       {description && (
-        <p className='mt-[4px] truncate pl-[2px] text-[12px] text-[var(--text-tertiary)]'>
+        <p className='mt-1 truncate pl-0.5 text-[var(--text-tertiary)] text-caption'>
           {description}
         </p>
       )}
 
-      <div className='mt-[10px] flex items-center justify-between'>
-        <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
+      <div className='mt-2.5 flex items-center justify-between'>
+        <div className='flex min-w-0 flex-1 items-center gap-1.5'>
           {authorImageUrl ? (
             <div className='h-[20px] w-[20px] flex-shrink-0 overflow-hidden rounded-full'>
               <img src={authorImageUrl} alt={author} className='h-full w-full object-cover' />
@@ -296,15 +296,15 @@ function TemplateCardInner({
               <User className='h-[12px] w-[12px] text-[var(--text-tertiary)]' />
             </div>
           )}
-          <div className='flex min-w-0 items-center gap-[4px]'>
-            <span className='truncate font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <div className='flex min-w-0 items-center gap-1'>
+            <span className='truncate font-medium text-[var(--text-tertiary)] text-caption'>
               {author}
             </span>
             {isVerified && <VerifiedBadge size='sm' />}
           </div>
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[6px] font-medium text-[12px] text-[var(--text-tertiary)]'>
+        <div className='flex flex-shrink-0 items-center gap-1.5 font-medium text-[var(--text-tertiary)] text-caption'>
           <User className='h-[12px] w-[12px]' />
           <span>{usageCount}</span>
           <Star
diff --git a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
index 57eec6f2138..8ee323feb87 100644
--- a/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/templates/templates.tsx
@@ -154,21 +154,21 @@ export default function Templates({
   return (
     <div className='flex h-full flex-1 flex-col'>
       <div className='flex flex-1 overflow-hidden'>
-        <div className='flex flex-1 flex-col overflow-auto bg-[var(--bg)] px-[24px] pt-[28px] pb-[24px]'>
+        <div className='flex flex-1 flex-col overflow-auto bg-[var(--bg)] px-6 pt-7 pb-6'>
           <div>
-            <div className='flex items-start gap-[12px]'>
-              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-[6px] border border-[#5BA8D9] bg-[#E8F4FB] dark:border-[#1A5070] dark:bg-[#153347]'>
+            <div className='flex items-start gap-3'>
+              <div className='flex h-[26px] w-[26px] items-center justify-center rounded-md border border-[#5BA8D9] bg-[#E8F4FB] dark:border-[#1A5070] dark:bg-[#153347]'>
                 <Layout className='h-[14px] w-[14px] text-[#5BA8D9] dark:text-[#33b4ff]' />
               </div>
-              <h1 className='font-medium text-[18px]'>Templates</h1>
+              <h1 className='font-medium text-lg'>Templates</h1>
             </div>
-            <p className='mt-[10px] text-[14px] text-[var(--text-tertiary)]'>
+            <p className='mt-2.5 text-[var(--text-tertiary)] text-sm'>
               Grab a template and start building, or make one from scratch.
             </p>
           </div>
 
-          <div className='mt-[14px] flex items-center justify-between'>
-            <div className='flex h-[32px] w-[400px] items-center gap-[6px] rounded-[8px] bg-[var(--surface-4)] px-[8px]'>
+          <div className='mt-3.5 flex items-center justify-between'>
+            <div className='flex h-[32px] w-[400px] items-center gap-1.5 rounded-lg bg-[var(--surface-4)] px-2'>
               <Search className='h-[14px] w-[14px] text-[var(--text-subtle)]' />
               <Input
                 placeholder='Search'
@@ -177,17 +177,17 @@ export default function Templates({
                 className='flex-1 border-0 bg-transparent px-0 font-medium text-[var(--text-secondary)] text-small leading-none placeholder:text-[var(--text-subtle)] focus-visible:ring-0 focus-visible:ring-offset-0'
               />
             </div>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Button
                 variant={activeTab === 'gallery' ? 'active' : 'default'}
-                className='h-[32px] rounded-[6px]'
+                className='h-[32px] rounded-md'
                 onClick={() => setActiveTab('gallery')}
               >
                 Gallery
               </Button>
               <Button
                 variant={activeTab === 'your' ? 'active' : 'default'}
-                className='h-[32px] rounded-[6px]'
+                className='h-[32px] rounded-md'
                 onClick={() => setActiveTab('your')}
               >
                 Your Templates
@@ -195,7 +195,7 @@ export default function Templates({
               {isSuperUser && (
                 <Button
                   variant={activeTab === 'pending' ? 'active' : 'default'}
-                  className='h-[32px] rounded-[6px]'
+                  className='h-[32px] rounded-md'
                   onClick={() => setActiveTab('pending')}
                 >
                   Pending
@@ -204,7 +204,7 @@ export default function Templates({
             </div>
           </div>
 
-          <div className='mt-[24px] grid grid-cols-1 gap-x-[20px] gap-y-[40px] md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+          <div className='mt-6 grid grid-cols-1 gap-x-5 gap-y-10 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
             {loading ? (
               Array.from({ length: 8 }).map((_, index) => (
                 <TemplateCardSkeleton key={`skeleton-${index}`} />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index 6955f013f6a..fc9033220f8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -15,11 +15,11 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
 const ACTION_BUTTON_STYLES = [
-  'h-[23px] w-[23px] rounded-[8px] p-0',
+  'h-[23px] w-[23px] rounded-lg p-0',
   'border border-[var(--border)] bg-[var(--surface-5)]',
   'text-[var(--text-secondary)]',
-  'hover:border-transparent hover:bg-[var(--brand-secondary)] hover:!text-[var(--text-inverse)]',
-  'dark:border-transparent dark:bg-[var(--surface-7)] dark:hover:bg-[var(--brand-secondary)]',
+  'hover-hover:border-transparent hover-hover:bg-[var(--brand-secondary)] hover-hover:!text-[var(--text-inverse)]',
+  'dark:border-transparent dark:bg-[var(--surface-7)] dark:hover-hover:bg-[var(--brand-secondary)]',
 ].join(' ')
 
 const ICON_SIZE = 'h-[11px] w-[11px]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
index 7f240c8d744..a5f6b8fbd99 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/chat.tsx
@@ -891,7 +891,7 @@ export function Chat() {
   return (
     <div
       ref={preventZoomRef}
-      className='fixed z-30 flex flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
+      className='fixed z-30 flex flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-2.5 pt-0.5 pb-2'
       style={{
         left: `${actualPosition.x}px`,
         top: `${actualPosition.y}px`,
@@ -905,21 +905,21 @@ export function Chat() {
     >
       {/* Header with drag handle */}
       <div
-        className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between gap-[10px] bg-[var(--surface-1)] p-0 active:cursor-grabbing'
+        className='flex h-[32px] flex-shrink-0 cursor-grab items-center justify-between gap-2.5 bg-[var(--surface-1)] p-0 active:cursor-grabbing'
         onMouseDown={handleMouseDown}
       >
-        <span className='flex-shrink-0 pr-[2px] font-medium text-[14px] text-[var(--text-primary)]'>
+        <span className='flex-shrink-0 pr-0.5 font-medium text-[var(--text-primary)] text-sm'>
           Chat
         </span>
 
         {/* Start inputs button and output selector - with max-width to prevent overflow */}
         <div
-          className='ml-auto flex min-w-0 flex-shrink items-center gap-[6px]'
+          className='ml-auto flex min-w-0 flex-shrink items-center gap-1.5'
           onMouseDown={(e) => e.stopPropagation()}
         >
           {shouldShowConfigureStartInputsButton && (
             <div
-              className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-[2px] font-medium font-sans text-[12px] text-[var(--text-primary)] hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+              className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
               title='Add chat inputs to Start block'
               onMouseDown={(e) => {
                 e.stopPropagation()
@@ -941,7 +941,7 @@ export function Chat() {
           />
         </div>
 
-        <div className='flex flex-shrink-0 items-center gap-[8px]'>
+        <div className='flex flex-shrink-0 items-center gap-2'>
           {/* More menu with actions */}
           <Popover variant='default' size='sm' open={moreMenuOpen} onOpenChange={setMoreMenuOpen}>
             <PopoverTrigger asChild>
@@ -997,12 +997,12 @@ export function Chat() {
         {/* Messages */}
         <div className='flex-1 overflow-hidden'>
           {workflowMessages.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
               No messages yet
             </div>
           ) : (
             <div ref={scrollAreaRef} className='h-full overflow-y-auto overflow-x-hidden'>
-              <div className='w-full max-w-full space-y-[8px] overflow-hidden py-[8px]'>
+              <div className='w-full max-w-full space-y-2 overflow-hidden py-2'>
                 {workflowMessages.map((message) => (
                   <ChatMessage key={message.id} message={message} />
                 ))}
@@ -1026,12 +1026,12 @@ export function Chat() {
                 <div className='flex items-start gap-2'>
                   <AlertCircle className='mt-0.5 h-3 w-3 shrink-0 text-[var(--text-error)]' />
                   <div className='flex-1'>
-                    <div className='mb-1 font-medium text-[12px] text-[var(--text-error)]'>
+                    <div className='mb-1 font-medium text-[var(--text-error)] text-caption'>
                       File upload error
                     </div>
                     <div className='space-y-1'>
                       {uploadErrors.map((err, idx) => (
-                        <div key={idx} className='text-[10px] text-[var(--text-error)]'>
+                        <div key={idx} className='text-[var(--text-error)] text-micro'>
                           {err}
                         </div>
                       ))}
@@ -1044,13 +1044,13 @@ export function Chat() {
 
           {/* Combined input container */}
           <div
-            className={`rounded-[4px] border bg-[var(--surface-5)] py-0 pr-[6px] pl-[4px] transition-colors ${
+            className={`rounded-sm border bg-[var(--surface-5)] py-0 pr-1.5 pl-1 transition-colors ${
               isDragOver ? 'border-[var(--brand-secondary)]' : 'border-[var(--border-1)]'
             }`}
           >
             {/* File thumbnails */}
             {chatFiles.length > 0 && (
-              <div className='mt-[4px] flex flex-wrap gap-[6px]'>
+              <div className='mt-1 flex flex-wrap gap-1.5'>
                 {chatFiles.map((file) => {
                   const previewUrl = getFilePreviewUrl(file)
 
@@ -1058,10 +1058,10 @@ export function Chat() {
                     <div
                       key={file.id}
                       className={cn(
-                        'group relative flex-shrink-0 overflow-hidden rounded-[6px] bg-[var(--surface-2)]',
+                        'group relative flex-shrink-0 overflow-hidden rounded-md bg-[var(--surface-2)]',
                         previewUrl
                           ? 'h-[40px] w-[40px]'
-                          : 'flex min-w-[80px] max-w-[120px] items-center justify-center px-[8px] py-[2px]'
+                          : 'flex min-w-[80px] max-w-[120px] items-center justify-center px-2 py-0.5'
                       )}
                     >
                       {previewUrl ? (
@@ -1072,7 +1072,7 @@ export function Chat() {
                         />
                       ) : (
                         <div className='min-w-0 flex-1'>
-                          <div className='truncate font-medium text-[10px] text-[var(--white)]'>
+                          <div className='truncate font-medium text-[var(--white)] text-micro'>
                             {file.name}
                           </div>
                           <div className='text-[9px] text-[var(--text-tertiary)]'>
@@ -1108,18 +1108,18 @@ export function Chat() {
                 }}
                 onKeyDown={handleKeyPress}
                 placeholder={isDragOver ? 'Drop files here...' : 'Type a message...'}
-                className='w-full border-0 bg-transparent pr-[56px] pl-[4px] shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                className='w-full border-0 bg-transparent pr-[56px] pl-1 shadow-none focus-visible:ring-0 focus-visible:ring-offset-0'
                 disabled={!activeWorkflowId}
               />
 
               {/* Buttons positioned absolutely on the right */}
-              <div className='-translate-y-1/2 absolute top-1/2 right-[2px] flex items-center gap-[10px]'>
+              <div className='-translate-y-1/2 absolute top-1/2 right-[2px] flex items-center gap-2.5'>
                 <Tooltip.Root>
                   <Tooltip.Trigger asChild>
                     <Badge
                       onClick={() => document.getElementById('floating-chat-file-input')?.click()}
                       className={cn(
-                        '!bg-transparent !border-0 cursor-pointer rounded-[6px] p-[0px]',
+                        '!bg-transparent !border-0 cursor-pointer rounded-md p-[0px]',
                         (!activeWorkflowId || isExecuting || chatFiles.length >= 15) &&
                           'cursor-not-allowed opacity-50'
                       )}
@@ -1133,7 +1133,7 @@ export function Chat() {
                 {isStreaming ? (
                   <Button
                     onClick={handleStopStreaming}
-                    className='!bg-[var(--c-C0C0C0)] hover:!bg-[var(--c-D0D0D0)] h-[22px] w-[22px] rounded-full p-0 transition-colors'
+                    className='!bg-[var(--text-subtle)] hover-hover:!bg-[var(--surface-7)] h-[22px] w-[22px] rounded-full p-0 transition-colors'
                   >
                     <Square className='h-2.5 w-2.5 fill-black text-black' />
                   </Button>
@@ -1149,8 +1149,8 @@ export function Chat() {
                     className={cn(
                       'h-[22px] w-[22px] rounded-full p-0 transition-colors',
                       chatMessage.trim() || chatFiles.length > 0
-                        ? '!bg-[var(--c-C0C0C0)] hover:!bg-[var(--c-D0D0D0)]'
-                        : '!bg-[var(--c-C0C0C0)]'
+                        ? '!bg-[var(--text-subtle)] hover-hover:!bg-[var(--surface-7)]'
+                        : '!bg-[var(--text-subtle)]'
                     )}
                   >
                     <ArrowUp className='h-3.5 w-3.5 text-black' strokeWidth={2.25} />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
index 5fe856c557f..9c46b330959 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/chat-message/chat-message.tsx
@@ -117,7 +117,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
     return (
       <div className='w-full max-w-full overflow-hidden opacity-100 transition-opacity duration-200'>
         {hasAttachments && (
-          <div className='mb-[4px] flex flex-wrap gap-[4px]'>
+          <div className='mb-1 flex flex-wrap gap-1'>
             {message.attachments!.map((attachment) => {
               const hasValidDataUrl =
                 attachment.dataUrl?.trim() && attachment.dataUrl.startsWith('data:')
@@ -126,7 +126,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
               return (
                 <div
                   key={attachment.id}
-                  className={`flex max-w-[150px] items-center gap-[5px] rounded-[6px] bg-[var(--surface-2)] px-[5px] py-[3px] ${
+                  className={`flex max-w-[150px] items-center gap-[5px] rounded-md bg-[var(--surface-2)] px-[5px] py-[3px] ${
                     hasValidDataUrl ? 'cursor-pointer' : ''
                   }`}
                   onClick={(e) => {
@@ -146,7 +146,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
                   ) : (
                     <FileText className='h-[12px] w-[12px] flex-shrink-0 text-[var(--text-tertiary)]' />
                   )}
-                  <span className='truncate text-[10px] text-[var(--text-secondary)]'>
+                  <span className='truncate text-[var(--text-secondary)] text-micro'>
                     {attachment.name}
                   </span>
                 </div>
@@ -156,7 +156,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
         )}
 
         {formattedContent && !formattedContent.startsWith('Uploaded') && (
-          <div className='rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] transition-all duration-200'>
+          <div className='rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 transition-all duration-200'>
             <div className='whitespace-pre-wrap break-words font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem]'>
               <WordWrap text={formattedContent} />
             </div>
@@ -167,7 +167,7 @@ export function ChatMessage({ message }: ChatMessageProps) {
   }
 
   return (
-    <div className='w-full max-w-full overflow-hidden pl-[2px] opacity-100 transition-opacity duration-200'>
+    <div className='w-full max-w-full overflow-hidden pl-0.5 opacity-100 transition-opacity duration-200'>
       <div className='whitespace-pre-wrap break-words font-[470] font-season text-[var(--text-primary)] text-sm leading-[1.25rem]'>
         <WordWrap text={formattedContent} />
         {message.isStreaming && <StreamingIndicator />}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
index 8decb13cf71..5e3d26b62a8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/chat/components/output-select/output-select.tsx
@@ -27,7 +27,7 @@ const TagIcon: React.FC<{
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
-      <span className='!text-white font-bold text-[10px]'>{icon}</span>
+      <span className='!text-white font-bold text-micro'>{icon}</span>
     ) : (
       (() => {
         const IconComponent = icon
@@ -288,9 +288,9 @@ export function OutputSelect({
 
       return {
         sectionElement: (
-          <div className='flex items-center gap-1.5 px-[6px] py-[4px]'>
+          <div className='flex items-center gap-1.5 px-1.5 py-1'>
             <TagIcon icon={blockIcon} color={blockColor} />
-            <span className='font-medium text-[13px]'>{blockName}</span>
+            <span className='font-medium text-small'>{blockName}</span>
           </div>
         ),
         items: outputs.map((output) => ({
@@ -319,7 +319,7 @@ export function OutputSelect({
   return (
     <Combobox
       size='sm'
-      className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
+      className='!w-fit !py-0.5 min-w-[100px] rounded-md px-[9px]'
       groups={comboboxGroups}
       options={[]}
       multiSelect
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
index f115a655f3e..b7e6b12682e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/command-list/command-list.tsx
@@ -179,12 +179,12 @@ export function CommandList() {
       )}
     >
       <div
-        className='pointer-events-auto flex flex-col gap-[8px]'
+        className='pointer-events-auto flex flex-col gap-2'
         onDragOver={handleDragOver}
         onDrop={handleDrop}
       >
         {/* Logo */}
-        <div className='mb-[20px] flex justify-center'>
+        <div className='mb-5 flex justify-center'>
           <Image
             src='/logo/b&w/text/b&w.svg'
             alt='Sim'
@@ -209,17 +209,17 @@ export function CommandList() {
               onClick={() => handleCommandClick(command.label)}
             >
               {/* Left side: Icon and Label */}
-              <div className='flex items-center gap-[8px]'>
+              <div className='flex items-center gap-2'>
                 <Icon className='h-[14px] w-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]' />
-                <span className='font-medium text-[14px] text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'>
+                <span className='font-medium text-[var(--text-tertiary)] text-sm group-hover:text-[var(--text-primary)]'>
                   {command.label}
                 </span>
               </div>
 
               {/* Right side: Keyboard Shortcut */}
-              <div className='flex items-center gap-[4px]'>
+              <div className='flex items-center gap-1'>
                 <Button
-                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-[12px] hover:translate-y-0 hover:text-[var(--text-tertiary)] hover:shadow-[0_2px_0_0_rgba(48,48,48,1)] group-hover:text-[var(--text-primary)] group-hover:shadow-[0_4px_0_0_rgba(48,48,48,1)]'
+                  className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                   variant='3d'
                 >
                   <span>⌘</span>
@@ -227,7 +227,7 @@ export function CommandList() {
                 {shortcuts.map((key, index) => (
                   <Button
                     key={index}
-                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-[12px] hover:translate-y-0 hover:text-[var(--text-tertiary)] hover:shadow-[0_2px_0_0_rgba(48,48,48,1)] group-hover:text-[var(--text-primary)] group-hover:shadow-[0_4px_0_0_rgba(48,48,48,1)]'
+                    className='group-hover:-translate-y-0.5 w-[26px] py-[3px] text-caption hover-hover:translate-y-0 hover-hover:text-[var(--text-tertiary)] hover-hover:shadow-kbd-sm group-hover:text-[var(--text-primary)] group-hover:shadow-kbd'
                     variant='3d'
                   >
                     {key}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
index efbc0741d5c..2f45ea54b1b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/cursors/cursors.tsx
@@ -59,13 +59,13 @@ const CursorsComponent = () => {
           >
             <div className='relative flex items-start'>
               {/* Filled mouse pointer cursor */}
-              <svg className='-mt-[18px]' width={24} height={24} viewBox='0 0 24 24' fill={color}>
+              <svg className='-mt-4.5' width={24} height={24} viewBox='0 0 24 24' fill={color}>
                 <path d='M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z' />
               </svg>
 
               {/* Name tag to the right, background tightly wrapping text */}
               <div
-                className='ml-[-4px] inline-flex max-w-[160px] truncate whitespace-nowrap rounded-[2px] px-1.5 py-[2px] font-medium text-[11px] text-[var(--surface-1)]'
+                className='ml-[-4px] inline-flex max-w-[160px] truncate whitespace-nowrap rounded-xs px-1.5 py-0.5 font-medium text-[var(--surface-1)] text-xs'
                 style={{ backgroundColor: color }}
               >
                 {name}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
index 65f1ef2eb6a..85363b218cc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/diff-controls/diff-controls.tsx
@@ -152,14 +152,14 @@ export const DiffControls = memo(function DiffControls() {
       }}
     >
       <div
-        className='group relative flex h-[30px] overflow-hidden rounded-[4px]'
+        className='group relative flex h-[30px] overflow-hidden rounded-sm'
         style={{ isolation: 'isolate' }}
       >
         {/* Reject side */}
         <button
           onClick={handleReject}
           title='Reject changes'
-          className='relative flex h-full items-center border border-[var(--border)] bg-[var(--surface-4)] pr-[20px] pl-[12px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors hover:border-[var(--border-1)] hover:bg-[var(--surface-6)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-5)]'
+          className='relative flex h-full items-center border border-[var(--border)] bg-[var(--surface-4)] pr-5 pl-3 font-medium text-[var(--text-secondary)] text-small transition-colors hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--surface-5)]'
           style={{
             clipPath: 'polygon(0 0, calc(100% + 10px) 0, 100% 100%, 0 100%)',
             borderRadius: '4px 0 0 4px',
@@ -182,14 +182,14 @@ export const DiffControls = memo(function DiffControls() {
         <button
           onClick={handleAccept}
           title='Accept changes (⇧⌘⏎)'
-          className='-ml-[10px] relative flex h-full items-center border border-[rgba(0,0,0,0.15)] bg-[var(--brand-tertiary-2)] pr-[12px] pl-[20px] font-medium text-[13px] text-[var(--text-inverse)] transition-[background-color,border-color,fill,stroke] hover:brightness-110 dark:border-[rgba(255,255,255,0.1)]'
+          className='-ml-2.5 relative flex h-full items-center border border-[rgba(0,0,0,0.15)] bg-[var(--brand-tertiary-2)] pr-3 pl-5 font-medium text-[var(--text-inverse)] text-small transition-[background-color,border-color,fill,stroke] hover-hover:brightness-110 dark:border-[rgba(255,255,255,0.1)]'
           style={{
             clipPath: 'polygon(10px 0, 100% 0, 100% 100%, 0 100%)',
             borderRadius: '0 4px 4px 0',
           }}
         >
           Accept
-          <kbd className='ml-2 rounded border border-white/20 bg-white/10 px-1.5 py-0.5 font-medium font-sans text-[10px]'>
+          <kbd className='ml-2 rounded border border-white/20 bg-white/10 px-1.5 py-0.5 font-medium font-sans text-micro'>
             ⇧⌘<span className='translate-y-[-1px]'>⏎</span>
           </kbd>
         </button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
index 5c414e170dd..777c0c1352d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/error/index.tsx
@@ -32,13 +32,13 @@ export function ErrorUI({
   if (!fullScreen) {
     return (
       <div className='flex h-full flex-1 items-center justify-center'>
-        <div className='flex flex-col items-center gap-[16px] text-center'>
-          <div className='flex flex-col gap-[8px]'>
-            <h2 className='font-semibold text-[16px] text-[var(--text-primary)]'>{title}</h2>
-            <p className='max-w-[300px] text-[13px] text-[var(--text-tertiary)]'>{message}</p>
+        <div className='flex flex-col items-center gap-4 text-center'>
+          <div className='flex flex-col gap-2'>
+            <h2 className='font-semibold text-[var(--text-primary)] text-md'>{title}</h2>
+            <p className='max-w-[300px] text-[var(--text-tertiary)] text-small'>{message}</p>
           </div>
           <Button variant='default' size='sm' onClick={onReset ?? (() => window.location.reload())}>
-            <RefreshCw className='mr-[6px] h-[14px] w-[14px]' />
+            <RefreshCw className='mr-1.5 h-[14px] w-[14px]' />
             Try again
           </Button>
         </div>
@@ -52,9 +52,9 @@ export function ErrorUI({
 
       <div className='relative flex flex-1'>
         <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='pointer-events-none flex flex-col items-center gap-[16px]'>
-            <h3 className='font-semibold text-[16px] text-[var(--text-primary)]'>{title}</h3>
-            <p className='max-w-sm text-center font-medium text-[14px] text-[var(--text-tertiary)]'>
+          <div className='pointer-events-none flex flex-col items-center gap-4'>
+            <h3 className='font-semibold text-[var(--text-primary)] text-md'>{title}</h3>
+            <p className='max-w-sm text-center font-medium text-[var(--text-tertiary)] text-sm'>
               {message}
             </p>
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
index 4bfa5776e25..128ddf69192 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/note-block/note-block.tsx
@@ -351,7 +351,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
             return (
               <code
                 {...props}
-                className='whitespace-normal rounded bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[#F59E0B] text-xs'
+                className='whitespace-normal rounded bg-[var(--surface-5)] px-1 py-0.5 font-mono text-[var(--amber)] text-xs'
               >
                 {children}
               </code>
@@ -376,7 +376,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
                   href={href}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='mb-1 block break-all text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+                  className='mb-1 block break-all text-[var(--brand-secondary)] underline-offset-2 hover-hover:underline'
                 >
                   {children}
                 </a>
@@ -428,7 +428,7 @@ const NoteMarkdown = memo(function NoteMarkdown({ content }: { content: string }
               href={href}
               target='_blank'
               rel='noopener noreferrer'
-              className='break-all text-[var(--brand-secondary)] underline-offset-2 hover:underline'
+              className='break-all text-[var(--brand-secondary)] underline-offset-2 hover-hover:underline'
             >
               {children}
             </a>
@@ -531,17 +531,17 @@ export const NoteBlock = memo(function NoteBlock({
     <div className='group relative'>
       <div
         className={cn(
-          'note-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+          'note-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
         )}
         onClick={handleClick}
       >
         <ActionBar blockId={id} blockType={type} disabled={!userPermissions.canEdit} />
 
-        <div className='flex items-center justify-between border-[var(--divider)] border-b p-[8px]'>
+        <div className='flex items-center justify-between border-[var(--divider)] border-b p-2'>
           <div className='flex min-w-0 flex-1 items-center'>
             <span
               className={cn(
-                'truncate font-medium text-[16px]',
+                'truncate font-medium text-md',
                 !isEnabled && 'text-[var(--text-muted)]'
               )}
               title={name}
@@ -551,19 +551,17 @@ export const NoteBlock = memo(function NoteBlock({
           </div>
         </div>
 
-        <div className='relative overflow-hidden p-[8px]'>
+        <div className='relative overflow-hidden p-2'>
           <div className='relative max-w-full break-all'>
             {isEmpty ? (
-              <p className='text-[#868686] text-sm'>Add note...</p>
+              <p className='text-[var(--text-placeholder)] text-sm'>Add note...</p>
             ) : (
               <NoteMarkdown content={content} />
             )}
           </div>
         </div>
         {hasRing && (
-          <div
-            className={cn('pointer-events-none absolute inset-0 z-40 rounded-[8px]', ringStyles)}
-          />
+          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
         )}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
index 834d83054f2..29708c37065 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/notifications/notifications.tsx
@@ -41,7 +41,7 @@ function CountdownRing({ onPause }: { onPause: () => void }) {
           variant='ghost'
           onClick={onPause}
           aria-label='Keep notifications visible'
-          className='!p-[4px] -m-[2px] shrink-0 rounded-[5px] hover:bg-[var(--surface-active)]'
+          className='!p-1 -m-0.5 shrink-0 rounded-[5px] hover-hover:bg-[var(--surface-active)]'
         >
           <svg
             width='14'
@@ -236,7 +236,7 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
   }
 
   return (
-    <div ref={preventZoomRef} className='absolute right-[16px] bottom-[16px] z-30 grid'>
+    <div ref={preventZoomRef} className='absolute right-[16px] bottom-4 z-30 grid'>
       {[...visibleNotifications].reverse().map((notification, index, stacked) => {
         const depth = stacked.length - index - 1
         const xOffset = depth * STACK_OFFSET_PX
@@ -255,17 +255,17 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
                 gridArea: '1 / 1',
               } as React.CSSProperties
             }
-            className='w-[240px] self-end overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm'
+            className='w-[240px] self-end overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] shadow-sm'
           >
-            <div className='flex flex-col gap-[8px] p-[8px]'>
-              <div className='flex items-start gap-[8px]'>
-                <div className='line-clamp-2 min-w-0 flex-1 font-medium text-[12px] text-[var(--text-body)]'>
+            <div className='flex flex-col gap-2 p-2'>
+              <div className='flex items-start gap-2'>
+                <div className='line-clamp-2 min-w-0 flex-1 font-medium text-[var(--text-body)] text-caption'>
                   {notification.level === 'error' && (
-                    <span className='mr-[8px] mb-[2px] inline-block h-[8px] w-[8px] rounded-[2px] bg-[var(--text-error)] align-middle' />
+                    <span className='mr-2 mb-0.5 inline-block h-[8px] w-[8px] rounded-xs bg-[var(--text-error)] align-middle' />
                   )}
                   {notification.message}
                 </div>
-                <div className='flex shrink-0 items-start gap-[2px]'>
+                <div className='flex shrink-0 items-start gap-0.5'>
                   {showCountdown && <CountdownRing onPause={pauseAll} />}
                   <Tooltip.Root>
                     <Tooltip.Trigger asChild>
@@ -273,7 +273,7 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
                         variant='ghost'
                         onClick={() => removeNotification(notification.id)}
                         aria-label='Dismiss notification'
-                        className='!p-[4px] -m-[2px] shrink-0 rounded-[5px] hover:bg-[var(--surface-active)]'
+                        className='!p-1 -m-0.5 shrink-0 rounded-[5px] hover-hover:bg-[var(--surface-active)]'
                       >
                         <X className='h-[14px] w-[14px] text-[var(--text-icon)]' />
                       </Button>
@@ -288,7 +288,7 @@ export const Notifications = memo(function Notifications({ embedded }: Notificat
                 <Button
                   variant='active'
                   onClick={() => executeAction(notification.id, notification.action!)}
-                  className='w-full rounded-[5px] px-[8px] py-[4px] font-medium text-[12px]'
+                  className='w-full rounded-[5px] px-2 py-1 font-medium text-caption'
                 >
                   {embedded && notification.action!.type === 'copilot'
                     ? 'Fix in Mothership'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx
index ce623aa8015..139882dd62e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/chat-history-skeleton/chat-history-skeleton.tsx
@@ -12,7 +12,7 @@ export function ChatHistorySkeleton() {
       </PopoverSection>
       <div className='flex flex-col gap-0.5'>
         {[1, 2, 3].map((i) => (
-          <div key={i} className='flex h-[25px] items-center px-[6px]'>
+          <div key={i} className='flex h-[25px] items-center px-1.5'>
             <div className='h-3 w-full animate-pulse rounded bg-muted/40' />
           </div>
         ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/checkpoint-confirmation/checkpoint-confirmation.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/checkpoint-confirmation/checkpoint-confirmation.tsx
index 4475058c832..ed7ea0edce3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/checkpoint-confirmation/checkpoint-confirmation.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/checkpoint-confirmation/checkpoint-confirmation.tsx
@@ -31,8 +31,8 @@ export function CheckpointConfirmation({
   const isRestoreVariant = variant === 'restore'
 
   return (
-    <div className='mt-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] p-[10px]'>
-      <p className='mb-[8px] text-[12px] text-[var(--text-primary)]'>
+    <div className='mt-2 rounded-sm border border-[var(--border)] bg-[var(--surface-4)] p-2.5'>
+      <p className='mb-2 text-[var(--text-primary)] text-caption'>
         {isRestoreVariant ? (
           <>
             Revert to checkpoint? This will restore your workflow to the state saved at this
@@ -43,7 +43,7 @@ export function CheckpointConfirmation({
           'Continue from a previous message?'
         )}
       </p>
-      <div className='flex gap-[8px]'>
+      <div className='flex gap-2'>
         <Button
           onClick={onCancel}
           variant='active'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/file-display/file-display.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/file-display/file-display.tsx
index d3ce40390ce..6b9bedcea9a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/file-display/file-display.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/file-display/file-display.tsx
@@ -107,7 +107,7 @@ export const FileAttachmentDisplay = memo(({ fileAttachments }: FileAttachmentDi
       {fileAttachments.map((file) => (
         <div
           key={file.id}
-          className='group relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-[var(--border-1)] bg-muted/20 transition-all hover:bg-muted/40'
+          className='group relative h-16 w-16 cursor-pointer overflow-hidden rounded-md border border-[var(--border-1)] bg-muted/20 transition-all hover-hover:bg-muted/40'
           onClick={() => handleFileClick(file)}
           title={`${file.filename} (${formatFileSize(file.size)})`}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer/markdown-renderer.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer/markdown-renderer.tsx
index 2f134d03baa..25f8f69f6be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer/markdown-renderer.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/markdown-renderer/markdown-renderer.tsx
@@ -88,7 +88,7 @@ const CodeBlock = memo(function CodeBlock({ code, language }: CodeBlockProps) {
         <span className='font-season text-[var(--text-muted)] text-xs'>{displayLanguage}</span>
         <button
           onClick={handleCopy}
-          className='text-[var(--text-muted)] transition-colors hover:text-[var(--text-tertiary)]'
+          className='text-[var(--text-muted)] transition-colors hover-hover:text-[var(--text-tertiary)]'
           title='Copy'
           type='button'
         >
@@ -124,7 +124,7 @@ const LinkWithPreview = memo(function LinkWithPreview({
       <Tooltip.Trigger asChild>
         <a
           href={href}
-          className='inline break-all text-blue-600 hover:underline dark:text-blue-400'
+          className='inline break-all text-blue-600 hover-hover:underline dark:text-blue-400'
           target='_blank'
           rel='noopener noreferrer'
         >
@@ -163,7 +163,7 @@ const markdownComponents = {
     </h1>
   ),
   h2: ({ children }: React.HTMLAttributes<HTMLHeadingElement>) => (
-    <h2 className='mt-2 mb-1 font-season font-semibold text-[15px] text-[var(--text-primary)] first:mt-0'>
+    <h2 className='mt-2 mb-1 font-season font-semibold text-[var(--text-primary)] text-base first:mt-0'>
       {children}
     </h2>
   ),
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block/thinking-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block/thinking-block.tsx
index 3c95d83d433..8c28c7933c7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block/thinking-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/components/thinking-block/thinking-block.tsx
@@ -108,7 +108,7 @@ const SmoothThinkingText = memo(
     return (
       <div
         ref={textRef}
-        className='[&_*]:!text-[var(--text-muted)] [&_*]:!text-[12px] [&_*]:!leading-[1.4] [&_p]:!m-0 [&_p]:!mb-1 [&_h1]:!text-[12px] [&_h1]:!font-semibold [&_h1]:!m-0 [&_h1]:!mb-1 [&_h2]:!text-[12px] [&_h2]:!font-semibold [&_h2]:!m-0 [&_h2]:!mb-1 [&_h3]:!text-[12px] [&_h3]:!font-semibold [&_h3]:!m-0 [&_h3]:!mb-1 [&_code]:!text-[11px] [&_ul]:!pl-5 [&_ul]:!my-1 [&_ol]:!pl-6 [&_ol]:!my-1 [&_li]:!my-0.5 [&_li]:!py-0 font-season text-[12px] text-[var(--text-muted)]'
+        className='[&_*]:!text-[var(--text-muted)] [&_*]:!text-caption [&_*]:!leading-[1.4] [&_p]:!m-0 [&_p]:!mb-1 [&_h1]:!text-caption [&_h1]:!font-semibold [&_h1]:!m-0 [&_h1]:!mb-1 [&_h2]:!text-caption [&_h2]:!font-semibold [&_h2]:!m-0 [&_h2]:!mb-1 [&_h3]:!text-caption [&_h3]:!font-semibold [&_h3]:!m-0 [&_h3]:!mb-1 [&_code]:!text-xs [&_ul]:!pl-5 [&_ul]:!my-1 [&_ol]:!pl-6 [&_ol]:!my-1 [&_li]:!my-0.5 [&_li]:!py-0 font-season text-[var(--text-muted)] text-caption'
       >
         <CopilotMarkdownRenderer content={displayedContent} />
       </div>
@@ -273,7 +273,7 @@ export function ThinkingBlock({
               return next
             })
           }}
-          className='group inline-flex items-center gap-1 text-left font-[470] font-season text-[var(--text-secondary)] text-sm transition-colors hover:text-[var(--text-primary)]'
+          className='group inline-flex items-center gap-1 text-left font-[470] font-season text-[var(--text-secondary)] text-sm transition-colors hover-hover:text-[var(--text-primary)]'
           type='button'
         >
           <span className='relative inline-block'>
@@ -332,7 +332,7 @@ export function ThinkingBlock({
         onClick={() => {
           setIsExpanded((v) => !v)
         }}
-        className='group inline-flex items-center gap-1 text-left font-[470] font-season text-[var(--text-secondary)] text-sm transition-colors hover:text-[var(--text-primary)]'
+        className='group inline-flex items-center gap-1 text-left font-[470] font-season text-[var(--text-secondary)] text-sm transition-colors hover-hover:text-[var(--text-primary)]'
         type='button'
         disabled={!hasContent}
       >
@@ -355,7 +355,7 @@ export function ThinkingBlock({
           isExpanded ? 'mt-1.5 max-h-[150px] opacity-100' : 'max-h-0 opacity-0'
         )}
       >
-        <div className='[&_*]:!text-[var(--text-muted)] [&_*]:!text-[12px] [&_*]:!leading-[1.4] [&_p]:!m-0 [&_p]:!mb-1 [&_h1]:!text-[12px] [&_h1]:!font-semibold [&_h1]:!m-0 [&_h1]:!mb-1 [&_h2]:!text-[12px] [&_h2]:!font-semibold [&_h2]:!m-0 [&_h2]:!mb-1 [&_h3]:!text-[12px] [&_h3]:!font-semibold [&_h3]:!m-0 [&_h3]:!mb-1 [&_code]:!text-[11px] [&_ul]:!pl-5 [&_ul]:!my-1 [&_ol]:!pl-6 [&_ol]:!my-1 [&_li]:!my-0.5 [&_li]:!py-0 font-season text-[12px] text-[var(--text-muted)]'>
+        <div className='[&_*]:!text-[var(--text-muted)] [&_*]:!text-caption [&_*]:!leading-[1.4] [&_p]:!m-0 [&_p]:!mb-1 [&_h1]:!text-caption [&_h1]:!font-semibold [&_h1]:!m-0 [&_h1]:!mb-1 [&_h2]:!text-caption [&_h2]:!font-semibold [&_h2]:!m-0 [&_h2]:!mb-1 [&_h3]:!text-caption [&_h3]:!font-semibold [&_h3]:!m-0 [&_h3]:!mb-1 [&_code]:!text-xs [&_ul]:!pl-5 [&_ul]:!my-1 [&_ol]:!pl-6 [&_ol]:!my-1 [&_li]:!my-0.5 [&_li]:!py-0 font-season text-[var(--text-muted)] text-caption'>
           <CopilotMarkdownRenderer content={cleanContent} />
         </div>
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
index 0fc34449dec..366947ec71a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/copilot-message/copilot-message.tsx
@@ -330,17 +330,17 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                 onClick={handleMessageClick}
                 onMouseEnter={() => setIsHoveringMessage(true)}
                 onMouseLeave={() => setIsHoveringMessage(false)}
-                className='group relative w-full cursor-pointer rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[6px] py-[6px] transition-all duration-200 hover:border-[var(--surface-7)] hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+                className='group relative w-full cursor-pointer rounded-sm border border-[var(--border-1)] bg-[var(--surface-4)] px-1.5 py-1.5 transition-all duration-200 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-4)] dark:bg-[var(--surface-4)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
               >
                 <div
                   ref={messageContentRef}
-                  className={`relative whitespace-pre-wrap break-words px-[2px] py-1 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem] ${isSendingMessage && isLastUserMessage && isHoveringMessage ? 'pr-7' : ''} ${!isExpanded && needsExpansion ? 'max-h-[60px] overflow-hidden' : 'overflow-visible'}`}
+                  className={`relative whitespace-pre-wrap break-words px-0.5 py-1 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem] ${isSendingMessage && isLastUserMessage && isHoveringMessage ? 'pr-7' : ''} ${!isExpanded && needsExpansion ? 'max-h-[60px] overflow-hidden' : 'overflow-visible'}`}
                 >
                   {buildMentionHighlightNodes(
                     message.content || '',
                     message.contexts || [],
                     (token, key) => (
-                      <span key={key} className='rounded-[4px] bg-[rgba(50,189,126,0.65)] py-[1px]'>
+                      <span key={key} className='rounded-sm bg-[rgba(50,189,126,0.65)] py-[1px]'>
                         {token}
                       </span>
                     )
@@ -354,13 +354,13 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
                 {/* Abort button when hovering and response is generating (only on last user message) */}
                 {isSendingMessage && isHoveringMessage && isLastUserMessage && (
-                  <div className='pointer-events-auto absolute right-[6px] bottom-[6px]'>
+                  <div className='pointer-events-auto absolute right-[6px] bottom-1.5'>
                     <Button
                       onClick={(e) => {
                         e.stopPropagation()
                         abortMessage()
                       }}
-                      className='h-[20px] w-[20px] rounded-full border-0 bg-[var(--c-383838)] p-0 transition-colors hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
+                      className='h-[20px] w-[20px] rounded-full border-0 bg-[var(--divider)] p-0 transition-colors hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
                       title='Stop generation'
                     >
                       <svg
@@ -376,7 +376,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
 
                 {/* Revert button on hover (only when has checkpoints and not generating) */}
                 {!isSendingMessage && hasCheckpoints && isHoveringMessage && (
-                  <div className='pointer-events-auto absolute right-[6px] bottom-[6px]'>
+                  <div className='pointer-events-auto absolute right-[6px] bottom-1.5'>
                     <Button
                       onClick={(e) => {
                         e.stopPropagation()
@@ -418,7 +418,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
               <MessageActions content={message.content} requestId={message.requestId} />
             </div>
           )}
-          <div className='max-w-full space-y-[4px] px-[2px] pb-5'>
+          <div className='max-w-full space-y-1 px-0.5 pb-5'>
             {/* Content blocks in chronological order */}
             {memoizedContentBlocks || (isStreaming && <div className='min-h-0' />)}
 
@@ -441,7 +441,7 @@ const CopilotMessage: FC<CopilotMessageProps> = memo(
                       href={citation.url}
                       target='_blank'
                       rel='noopener noreferrer'
-                      className='inline-flex max-w-full items-center rounded-md border bg-muted/50 px-2 py-1 text-muted-foreground text-xs transition-colors hover:bg-muted hover:text-foreground'
+                      className='inline-flex max-w-full items-center rounded-md border bg-muted/50 px-2 py-1 text-muted-foreground text-xs transition-colors hover-hover:bg-muted hover-hover:text-foreground'
                     >
                       <span className='truncate'>{citation.title}</span>
                     </a>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
index d1b2d119a11..0ef8bba6d47 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/plan-mode-section/plan-mode-section.tsx
@@ -177,20 +177,20 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
 
   return (
     <div
-      className={cn('relative flex flex-col rounded-[4px]', SURFACE_5, className)}
+      className={cn('relative flex flex-col rounded-sm', SURFACE_5, className)}
       style={{ height: `${height}px` }}
     >
       {/* Header with build/edit/save/clear buttons */}
-      <div className='flex flex-shrink-0 items-center justify-between border-[var(--border-1)] border-b py-[6px] pr-[2px] pl-[12px]'>
-        <span className='font-[500] text-[11px] text-[var(--text-secondary)] uppercase tracking-wide'>
+      <div className='flex flex-shrink-0 items-center justify-between border-[var(--border-1)] border-b py-1.5 pr-0.5 pl-3'>
+        <span className='font-[500] text-[var(--text-secondary)] text-xs uppercase tracking-wide'>
           Workflow Plan
         </span>
-        <div className='ml-auto flex items-center gap-[4px]'>
+        <div className='ml-auto flex items-center gap-1'>
           {isEditing ? (
             <>
               <Button
                 variant='ghost'
-                className='h-[18px] w-[18px] p-0 hover:text-[var(--text-primary)]'
+                className='h-[18px] w-[18px] p-0 hover-hover:text-[var(--text-primary)]'
                 onClick={handleCancel}
                 aria-label='Cancel editing'
               >
@@ -198,7 +198,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
               </Button>
               <Button
                 variant='ghost'
-                className='h-[18px] w-[18px] p-0 hover:text-[var(--text-primary)]'
+                className='h-[18px] w-[18px] p-0 hover-hover:text-[var(--text-primary)]'
                 onClick={handleSave}
                 aria-label='Save changes'
               >
@@ -211,7 +211,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
                 <Button
                   variant='default'
                   onClick={onBuildPlan}
-                  className='h-[22px] px-[10px] text-[11px]'
+                  className='h-[22px] px-2.5 text-xs'
                   title='Build workflow from plan'
                 >
                   Build Plan
@@ -220,7 +220,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
               {onSave && (
                 <Button
                   variant='ghost'
-                  className='h-[18px] w-[18px] p-0 hover:text-[var(--text-primary)]'
+                  className='h-[18px] w-[18px] p-0 hover-hover:text-[var(--text-primary)]'
                   onClick={handleEdit}
                   aria-label='Edit workflow plan'
                 >
@@ -230,7 +230,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
               {onClear && (
                 <Button
                   variant='ghost'
-                  className='h-[18px] w-[18px] p-0 hover:text-[var(--text-primary)]'
+                  className='h-[18px] w-[18px] p-0 hover-hover:text-[var(--text-primary)]'
                   onClick={onClear}
                   aria-label='Clear workflow plan'
                 >
@@ -243,13 +243,13 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
       </div>
 
       {/* Scrollable content area */}
-      <div className='flex-1 overflow-y-auto overflow-x-hidden px-[12px] py-[10px]'>
+      <div className='flex-1 overflow-y-auto overflow-x-hidden px-3 py-2.5'>
         {isEditing ? (
           <Textarea
             ref={textareaRef}
             value={editedContent}
             onChange={(e) => setEditedContent(e.target.value)}
-            className='h-full min-h-full w-full resize-none border-0 bg-transparent p-0 font-[470] font-season text-[13px] text-[var(--text-primary)] leading-[1.4rem] outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='h-full min-h-full w-full resize-none border-0 bg-transparent p-0 font-[470] font-season text-[var(--text-primary)] text-small leading-[1.4rem] outline-none ring-0 focus-visible:ring-0 focus-visible:ring-offset-0'
             placeholder='Enter your workflow plan...'
           />
         ) : (
@@ -262,7 +262,7 @@ const PlanModeSection: React.FC<PlanModeSectionProps> = ({
         className={cn(
           'group flex h-[20px] w-full cursor-ns-resize items-center justify-center border-t',
           BORDER_STRONG,
-          'transition-colors hover:bg-[var(--surface-5)]',
+          'transition-colors hover-hover:bg-[var(--surface-5)]',
           isResizing && SURFACE_9
         )}
         onMouseDown={handleResizeStart}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/queued-messages/queued-messages.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/queued-messages/queued-messages.tsx
index 15739fcfb32..390ace65c7d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/queued-messages/queued-messages.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/queued-messages/queued-messages.tsx
@@ -31,21 +31,21 @@ export function QueuedMessages() {
   if (messageQueue.length === 0) return null
 
   return (
-    <div className='mx-[14px] overflow-hidden rounded-t-[4px] border border-[var(--border)] border-b-0 bg-[var(--bg-secondary)]'>
+    <div className='mx-3.5 overflow-hidden rounded-t-[4px] border border-[var(--border)] border-b-0 bg-[var(--bg-secondary)]'>
       {/* Header */}
       <button
         type='button'
         onClick={() => setIsExpanded(!isExpanded)}
-        className='flex w-full items-center justify-between px-[10px] py-[6px] transition-colors hover:bg-[var(--surface-3)]'
+        className='flex w-full items-center justify-between px-2.5 py-1.5 transition-colors hover-hover:bg-[var(--surface-3)]'
       >
-        <div className='flex items-center gap-[6px]'>
+        <div className='flex items-center gap-1.5'>
           {isExpanded ? (
             <ChevronDown className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
           ) : (
             <ChevronRight className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
           )}
-          <span className='font-medium text-[12px] text-[var(--text-primary)]'>Queued</span>
-          <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <span className='font-medium text-[var(--text-primary)] text-caption'>Queued</span>
+          <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
             {messageQueue.length}
           </span>
         </div>
@@ -57,7 +57,7 @@ export function QueuedMessages() {
           {messageQueue.map((msg) => (
             <div
               key={msg.id}
-              className='group flex items-center gap-[8px] border-[var(--border)] border-t px-[10px] py-[6px] hover:bg-[var(--surface-3)]'
+              className='group flex items-center gap-2 border-[var(--border)] border-t px-2.5 py-1.5 hover-hover:bg-[var(--surface-3)]'
             >
               {/* Radio indicator */}
               <div className='flex h-[14px] w-[14px] shrink-0 items-center justify-center'>
@@ -66,18 +66,18 @@ export function QueuedMessages() {
 
               {/* Message content */}
               <div className='min-w-0 flex-1'>
-                <p className='truncate text-[13px] text-[var(--text-primary)]'>{msg.content}</p>
+                <p className='truncate text-[var(--text-primary)] text-small'>{msg.content}</p>
               </div>
 
               {/* Actions - always visible */}
-              <div className='flex shrink-0 items-center gap-[4px]'>
+              <div className='flex shrink-0 items-center gap-1'>
                 <button
                   type='button'
                   onClick={(e) => {
                     e.stopPropagation()
                     handleSendNow(msg.id)
                   }}
-                  className='rounded p-[3px] text-[var(--text-tertiary)] transition-colors hover:bg-[var(--bg-quaternary)] hover:text-[var(--text-primary)]'
+                  className='rounded p-[3px] text-[var(--text-tertiary)] transition-colors hover-hover:bg-[var(--bg-quaternary)] hover-hover:text-[var(--text-primary)]'
                   title='Send now (aborts current stream)'
                 >
                   <ArrowUp className='h-[14px] w-[14px]' />
@@ -88,7 +88,7 @@ export function QueuedMessages() {
                     e.stopPropagation()
                     handleRemove(msg.id)
                   }}
-                  className='rounded p-[3px] text-[var(--text-tertiary)] transition-colors hover:bg-red-500/10 hover:text-red-400'
+                  className='rounded p-[3px] text-[var(--text-tertiary)] transition-colors hover-hover:bg-red-500/10 hover-hover:text-red-400'
                   title='Remove from queue'
                 >
                   <Trash2 className='h-[14px] w-[14px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
index 7355e69cb6d..fd9090cfae5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/todo-list/todo-list.tsx
@@ -70,7 +70,7 @@ export const TodoList = memo(function TodoList({
     >
       {/* Header - always visible */}
       <div className='flex items-center justify-between px-[5.5px] py-[5px]'>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <Button
             variant='ghost'
             onClick={() => setIsCollapsed(!isCollapsed)}
@@ -88,7 +88,7 @@ export const TodoList = memo(function TodoList({
           </span>
         </div>
 
-        <div className='flex flex-1 items-center gap-[8px] pl-[10px]'>
+        <div className='flex flex-1 items-center gap-2 pl-2.5'>
           {/* Progress bar */}
           <div className='h-1.5 flex-1 overflow-hidden rounded-full bg-[var(--border-1)]'>
             <div
@@ -117,7 +117,7 @@ export const TodoList = memo(function TodoList({
             <div
               key={todo.id}
               className={cn(
-                'flex items-start gap-2 px-3 py-1.5 transition-colors hover:bg-[var(--surface-5)]/50 dark:hover:bg-[var(--border-1)]/50',
+                'flex items-start gap-2 px-3 py-1.5 transition-colors hover-hover:bg-[var(--surface-5)]/50 dark:hover-hover:bg-[var(--border-1)]/50',
                 index !== todos.length - 1 && 'border-[var(--border-1)] border-b'
               )}
             >
@@ -140,7 +140,7 @@ export const TodoList = memo(function TodoList({
 
               <span
                 className={cn(
-                  'flex-1 font-base text-[12px] leading-relaxed',
+                  'flex-1 font-base text-caption leading-relaxed',
                   todo.completed
                     ? 'text-[var(--text-muted)] line-through'
                     : 'text-[var(--text-primary)]'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
index 01b6c571468..7f77058112f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/tool-call/tool-call.tsx
@@ -266,23 +266,23 @@ function PlanSteps({
   if (sortedSteps.length === 0) return null
 
   return (
-    <div className='mt-0 overflow-hidden rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
-      <div className='flex items-center gap-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] p-[8px]'>
-        <LayoutList className='ml-[2px] h-3 w-3 flex-shrink-0 text-[var(--text-tertiary)]' />
-        <span className='font-medium text-[12px] text-[var(--text-primary)]'>To-dos</span>
-        <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+    <div className='mt-0 overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)]'>
+      <div className='flex items-center gap-2 border-[var(--border-1)] border-b bg-[var(--surface-2)] p-2'>
+        <LayoutList className='ml-0.5 h-3 w-3 flex-shrink-0 text-[var(--text-tertiary)]' />
+        <span className='font-medium text-[var(--text-primary)] text-caption'>To-dos</span>
+        <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
           {sortedSteps.length}
         </span>
       </div>
-      <div className='flex flex-col gap-[6px] px-[10px] py-[6px]'>
+      <div className='flex flex-col gap-1.5 px-2.5 py-1.5'>
         {sortedSteps.map(([num, title], index) => {
           const isLastStep = index === sortedSteps.length - 1
           return (
-            <div key={num} className='flex items-baseline gap-[6px]'>
-              <span className='w-[14px] flex-shrink-0 text-right text-[12px] text-[var(--text-tertiary)]'>
+            <div key={num} className='flex items-baseline gap-1.5'>
+              <span className='w-[14px] flex-shrink-0 text-right text-[var(--text-tertiary)] text-caption'>
                 {index + 1}.
               </span>
-              <div className='min-w-0 flex-1 text-[12px] text-[var(--text-secondary)] leading-[18px] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[11px] [&_p]:m-0 [&_p]:text-[12px] [&_p]:leading-[18px]'>
+              <div className='min-w-0 flex-1 text-[var(--text-secondary)] text-caption leading-[18px] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-xs [&_p]:m-0 [&_p]:text-caption [&_p]:leading-[18px]'>
                 {streaming && isLastStep ? (
                   <SmoothStreamingText content={title} isStreaming={true} />
                 ) : (
@@ -401,7 +401,7 @@ export function OptionsSelector({
   if (sortedOptions.length === 0) return null
 
   return (
-    <div ref={containerRef} className='flex flex-col gap-[4px] pt-[4px]'>
+    <div ref={containerRef} className='flex flex-col gap-1 pt-1'>
       {sortedOptions.map((option, index) => {
         const isHovered = index === hoveredIndex && !isLocked
         const isChosen = option.key === chosenKey
@@ -423,8 +423,8 @@ export function OptionsSelector({
               if (!isLocked && !streaming && sortedOptions.length === 1) setHoveredIndex(-1)
             }}
             className={clsx(
-              'group flex cursor-pointer items-start gap-2 rounded-[6px] p-1',
-              'hover:bg-[var(--surface-4)]',
+              'group flex cursor-pointer items-start gap-2 rounded-md p-1',
+              'hover-hover:bg-[var(--surface-4)]',
               disabled && !isChosen && 'cursor-not-allowed opacity-50',
               streaming && 'pointer-events-none',
               isLocked && 'cursor-default',
@@ -433,14 +433,14 @@ export function OptionsSelector({
           >
             <Button
               variant='3d'
-              className='group-hover:-translate-y-0.5 group-[.is-hovered]:-translate-y-0.5 w-[22px] py-[2px] text-[11px] group-hover:text-[var(--text-primary)] group-hover:shadow-[0_4px_0_0_rgba(48,48,48,1)] group-[.is-hovered]:text-[var(--text-primary)] group-[.is-hovered]:shadow-[0_4px_0_0_rgba(48,48,48,1)]'
+              className='group-hover:-translate-y-0.5 group-[.is-hovered]:-translate-y-0.5 w-[22px] py-0.5 text-xs group-hover:text-[var(--text-primary)] group-hover:shadow-kbd group-[.is-hovered]:text-[var(--text-primary)] group-[.is-hovered]:shadow-kbd'
             >
               {option.key}
             </Button>
 
             <span
               className={clsx(
-                'min-w-0 flex-1 pt-0.5 font-season text-[12px] text-[var(--text-tertiary)] leading-5 group-hover:text-[var(--text-primary)] group-[.is-hovered]:text-[var(--text-primary)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[11px] [&_p]:m-0 [&_p]:leading-5',
+                'min-w-0 flex-1 pt-0.5 font-season text-[var(--text-tertiary)] text-caption leading-5 group-hover:text-[var(--text-primary)] group-[.is-hovered]:text-[var(--text-primary)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-xs [&_p]:m-0 [&_p]:leading-5',
                 isRejected && 'text-[var(--text-tertiary)] line-through opacity-50'
               )}
             >
@@ -759,7 +759,7 @@ function SubAgentThinkingContent({
   const hasSpecialTags = hasPlan
 
   return (
-    <div className='space-y-[4px]'>
+    <div className='space-y-1'>
       {cleanText.trim() && (
         <ThinkingBlock
           content={cleanText}
@@ -904,7 +904,7 @@ const SubagentContentRenderer = memo(function SubagentContentRenderer({
 
   if (isStreaming || !shouldCollapse) {
     return (
-      <div className='w-full space-y-[4px]'>
+      <div className='w-full space-y-1'>
         {renderCollapsibleContent()}
         {hasPlan && planToRender && <PlanSteps steps={planToRender} streaming={isPlanStreaming} />}
       </div>
@@ -915,7 +915,7 @@ const SubagentContentRenderer = memo(function SubagentContentRenderer({
     <div className='w-full'>
       <button
         onClick={() => setIsExpanded((v) => !v)}
-        className='group inline-flex items-center gap-1 text-left font-[470] font-season text-[var(--text-secondary)] text-sm transition-colors hover:text-[var(--text-primary)]'
+        className='group inline-flex items-center gap-1 text-left font-[470] font-season text-[var(--text-secondary)] text-sm transition-colors hover-hover:text-[var(--text-primary)]'
         type='button'
       >
         <span className='text-[var(--text-tertiary)]'>{durationText}</span>
@@ -931,14 +931,14 @@ const SubagentContentRenderer = memo(function SubagentContentRenderer({
       <div
         className={clsx(
           'overflow-hidden transition-all duration-150 ease-out',
-          isExpanded ? 'mt-1.5 max-h-[5000px] space-y-[4px] opacity-100' : 'max-h-0 opacity-0'
+          isExpanded ? 'mt-1.5 max-h-[5000px] space-y-1 opacity-100' : 'max-h-0 opacity-0'
         )}
       >
         {renderCollapsibleContent()}
       </div>
 
       {hasPlan && planToRender && (
-        <div className='mt-[6px]'>
+        <div className='mt-1.5'>
           <PlanSteps steps={planToRender} />
         </div>
       )}
@@ -1154,8 +1154,8 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
 
     const actionIcons = {
       add: { symbol: '+', color: 'text-[#22c55e]' },
-      edit: { symbol: '~', color: 'text-[#f97316]' },
-      delete: { symbol: '-', color: 'text-[#ef4444]' },
+      edit: { symbol: '~', color: 'text-[var(--orange)]' },
+      delete: { symbol: '-', color: 'text-[var(--text-error)]' },
     }
     const { symbol, color } = actionIcons[type]
 
@@ -1168,23 +1168,23 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
         className='overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)]'
       >
         {/* Block header - gray background like plan/table headers */}
-        <div className='flex items-center justify-between p-[8px]'>
-          <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex items-center justify-between p-2'>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
             {/* Toolbar-style icon: colored square with white icon */}
             <div
-              className='flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-[4px]'
+              className='flex h-5 w-5 flex-shrink-0 items-center justify-center rounded-sm'
               style={{ background: bgColor }}
             >
               {Icon && <Icon className='h-[12px] w-[12px] text-white' />}
             </div>
             <span
-              className={`truncate font-medium text-[14px] ${type === 'delete' ? 'text-[var(--text-tertiary)]' : 'text-[var(--text-primary)]'}`}
+              className={`truncate font-medium text-sm ${type === 'delete' ? 'text-[var(--text-tertiary)]' : 'text-[var(--text-primary)]'}`}
             >
               {change.blockName}
             </span>
           </div>
           {/* Action icon in top right */}
-          <span className={`flex-shrink-0 font-bold font-mono text-[14px] ${color}`}>{symbol}</span>
+          <span className={`flex-shrink-0 font-bold font-mono text-sm ${color}`}>{symbol}</span>
         </div>
 
         {/* Subblock details - dark background like table/plan body */}
@@ -1201,9 +1201,9 @@ const WorkflowEditSummary = memo(function WorkflowEditSummary({
                 displayValue = maskCredentialValue(rawValue)
               }
               return (
-                <div key={sb.id} className='flex items-start gap-1.5 py-0.5 text-[11px]'>
+                <div key={sb.id} className='flex items-start gap-1.5 py-0.5 text-xs'>
                   <span
-                    className={`font-medium ${type === 'edit' ? 'text-[#f97316]' : 'text-[var(--text-tertiary)]'}`}
+                    className={`font-medium ${type === 'edit' ? 'text-[var(--orange)]' : 'text-[var(--text-tertiary)]'}`}
                   >
                     {sb.title}:
                   </span>
@@ -1389,7 +1389,7 @@ function RunSkipButtons({
 
   // Standardized buttons for all interrupt tools: Allow, Always Allow, Skip
   return (
-    <div className='mt-[10px] flex gap-[6px]'>
+    <div className='mt-2.5 flex gap-1.5'>
       <Button onClick={onRun} disabled={isProcessing} variant='primary'>
         {isProcessing ? 'Allowing...' : 'Allow'}
       </Button>
@@ -1569,14 +1569,14 @@ export function ToolCall({
       const url = editedParams.url || ''
       const method = (editedParams.method || '').toUpperCase()
       return (
-        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
+        <div className='w-full overflow-hidden rounded-sm border border-[var(--border-1)] bg-[var(--surface-1)]'>
           <table className='w-full table-fixed bg-transparent'>
             <thead className='bg-transparent'>
               <tr className='border-[var(--border-1)] border-b bg-transparent'>
-                <th className='w-[26%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
+                <th className='w-[26%] border-[var(--border-1)] border-r bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm'>
                   Method
                 </th>
-                <th className='w-[74%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
+                <th className='w-[74%] bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm'>
                   Endpoint
                 </th>
               </tr>
@@ -1584,7 +1584,7 @@ export function ToolCall({
             <tbody className='bg-transparent'>
               <tr className='group relative border-[var(--border-1)] border-t bg-transparent'>
                 <td className='relative w-[26%] border-[var(--border-1)] border-r bg-transparent p-0'>
-                  <div className='px-[10px] py-[8px]'>
+                  <div className='px-2.5 py-2'>
                     <input
                       type='text'
                       value={method || 'GET'}
@@ -1594,7 +1594,7 @@ export function ToolCall({
                   </div>
                 </td>
                 <td className='relative w-[74%] bg-transparent p-0'>
-                  <div className='min-w-0 px-[10px] py-[8px]'>
+                  <div className='min-w-0 px-2.5 py-2'>
                     <input
                       type='text'
                       value={url || ''}
@@ -1631,14 +1631,14 @@ export function ToolCall({
       })
 
       return (
-        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
+        <div className='w-full overflow-hidden rounded-sm border border-[var(--border-1)] bg-[var(--surface-1)]'>
           <table className='w-full table-fixed bg-transparent'>
             <thead className='bg-transparent'>
               <tr className='border-[var(--border-1)] border-b bg-transparent'>
-                <th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
+                <th className='w-[36%] border-[var(--border-1)] border-r bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm'>
                   Name
                 </th>
-                <th className='w-[64%] bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]'>
+                <th className='w-[64%] bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm'>
                   Value
                 </th>
               </tr>
@@ -1646,7 +1646,7 @@ export function ToolCall({
             <tbody className='bg-transparent'>
               {normalizedEntries.length === 0 ? (
                 <tr className='border-[var(--border-1)] border-t bg-transparent'>
-                  <td colSpan={2} className='px-[10px] py-[8px] text-[var(--text-muted)] text-xs'>
+                  <td colSpan={2} className='px-2.5 py-2 text-[var(--text-muted)] text-xs'>
                     No variables provided
                   </td>
                 </tr>
@@ -1657,7 +1657,7 @@ export function ToolCall({
                     className='group relative border-[var(--border-1)] border-t bg-transparent'
                   >
                     <td className='relative w-[36%] border-[var(--border-1)] border-r bg-transparent p-0'>
-                      <div className='px-[10px] py-[8px]'>
+                      <div className='px-2.5 py-2'>
                         <input
                           type='text'
                           value={name}
@@ -1688,7 +1688,7 @@ export function ToolCall({
                       </div>
                     </td>
                     <td className='relative w-[64%] bg-transparent p-0'>
-                      <div className='min-w-0 px-[10px] py-[8px]'>
+                      <div className='min-w-0 px-2.5 py-2'>
                         <input
                           type='text'
                           value={value}
@@ -1734,15 +1734,15 @@ export function ToolCall({
     if (toolCall.name === 'set_global_workflow_variables') {
       const ops = Array.isArray(editedParams.operations) ? (editedParams.operations as any[]) : []
       return (
-        <div className='w-full overflow-hidden rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]'>
+        <div className='w-full overflow-hidden rounded-sm border border-[var(--border-1)] bg-[var(--surface-1)]'>
           <div className='grid grid-cols-3 gap-0 border-[var(--border-1)] border-b bg-[var(--surface-4)] py-1.5'>
-            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
+            <div className='self-start px-2 font-medium font-season text-[var(--text-secondary)] text-micro uppercase tracking-wide'>
               Name
             </div>
-            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
+            <div className='self-start px-2 font-medium font-season text-[var(--text-secondary)] text-micro uppercase tracking-wide'>
               Type
             </div>
-            <div className='self-start px-2 font-medium font-season text-[10px] text-[var(--text-secondary)] uppercase tracking-wide'>
+            <div className='self-start px-2 font-medium font-season text-[var(--text-secondary)] text-micro uppercase tracking-wide'>
               Value
             </div>
           </div>
@@ -1767,7 +1767,7 @@ export function ToolCall({
                     />
                   </div>
                   <div className='self-start px-2'>
-                    <span className='rounded border border-[var(--border-1)] px-1 py-0.5 font-[470] font-season text-[10px] text-[var(--text-primary)]'>
+                    <span className='rounded border border-[var(--border-1)] px-1 py-0.5 font-[470] font-season text-[var(--text-primary)] text-micro'>
                       {String(op.type || '')}
                     </span>
                   </div>
@@ -1864,14 +1864,14 @@ export function ToolCall({
       return (
         <div className='w-full overflow-hidden rounded-md border border-[var(--border-1)] bg-[var(--surface-1)]'>
           {/* Header */}
-          <div className='flex items-center gap-[8px] border-[var(--border-1)] border-b bg-[var(--surface-2)] p-[8px]'>
-            <span className='font-medium text-[12px] text-[var(--text-primary)]'>Edit Input</span>
-            <span className='flex-shrink-0 font-medium text-[12px] text-[var(--text-tertiary)]'>
+          <div className='flex items-center gap-2 border-[var(--border-1)] border-b bg-[var(--surface-2)] p-2'>
+            <span className='font-medium text-[var(--text-primary)] text-caption'>Edit Input</span>
+            <span className='flex-shrink-0 font-medium text-[var(--text-tertiary)] text-caption'>
               {inputEntries.length}
             </span>
           </div>
           {/* Input entries */}
-          <div className='flex flex-col pt-[6px]'>
+          <div className='flex flex-col pt-1.5'>
             {inputEntries.map(([key, value], index) => {
               const isComplex = isComplexValue(value)
               const displayValue = formatValueForDisplay(value)
@@ -1880,12 +1880,12 @@ export function ToolCall({
                 <div
                   key={key}
                   className={clsx(
-                    'flex flex-col gap-[6px] px-[10px] pb-[6px]',
-                    index > 0 && 'mt-[6px] border-[var(--border-1)] border-t pt-[6px]'
+                    'flex flex-col gap-1.5 px-2.5 pb-1.5',
+                    index > 0 && 'mt-1.5 border-[var(--border-1)] border-t pt-1.5'
                   )}
                 >
                   {/* Input key */}
-                  <span className='font-medium text-[11px] text-[var(--text-primary)]'>{key}</span>
+                  <span className='font-medium text-[var(--text-primary)] text-xs'>{key}</span>
                   {/* Value editor */}
                   {isComplex ? (
                     <Code.Container className='max-h-[168px] min-h-[60px]'>
@@ -1941,7 +1941,7 @@ export function ToolCall({
                           setEditedParams({ ...editedParams, [key]: parsedValue })
                         }
                       }}
-                      className='w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)] px-[8px] py-[6px] font-medium font-mono text-[13px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)] focus:outline-none'
+                      className='w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-1)] px-2 py-1.5 font-medium font-mono text-[var(--text-primary)] text-small outline-none transition-colors placeholder:text-[var(--text-muted)] focus:outline-none'
                     />
                   )}
                 </div>
@@ -1978,9 +1978,9 @@ export function ToolCall({
             className='font-[470] font-season text-[var(--text-secondary)] text-sm dark:text-[var(--text-muted)]'
           />
         </div>
-        <div className='mt-[10px]'>{renderPendingDetails()}</div>
+        <div className='mt-2.5'>{renderPendingDetails()}</div>
         {showRemoveAutoAllow && isAutoAllowed && (
-          <div className='mt-[10px]'>
+          <div className='mt-2.5'>
             <Button
               onClick={async () => {
                 await removeAutoAllowedTool(toolCall.name)
@@ -2036,12 +2036,12 @@ export function ToolCall({
           />
         </div>
         {code && (
-          <div className='mt-[10px]'>
+          <div className='mt-2.5'>
             <Code.Viewer code={code} language='javascript' showGutter className='min-h-0' />
           </div>
         )}
         {showRemoveAutoAllow && isAutoAllowed && (
-          <div className='mt-[10px]'>
+          <div className='mt-2.5'>
             <Button
               onClick={async () => {
                 await removeAutoAllowedTool(toolCall.name)
@@ -2100,9 +2100,9 @@ export function ToolCall({
           />
         </div>
       )}
-      {shouldShowDetails && <div className='mt-[10px]'>{renderPendingDetails()}</div>}
+      {shouldShowDetails && <div className='mt-2.5'>{renderPendingDetails()}</div>}
       {showRemoveAutoAllow && isAutoAllowed && (
-        <div className='mt-[10px]'>
+        <div className='mt-2.5'>
           <Button
             onClick={async () => {
               await removeAutoAllowedTool(toolCall.name)
@@ -2123,7 +2123,7 @@ export function ToolCall({
           editedParams={editedParams}
         />
       ) : showMoveToBackground ? (
-        <div className='mt-[10px]'>
+        <div className='mt-2.5'>
           <Button
             onClick={async () => {
               setToolCallState(toolCall, ClientToolCallState.background)
@@ -2137,7 +2137,7 @@ export function ToolCall({
           </Button>
         </div>
       ) : showWake ? (
-        <div className='mt-[10px]'>
+        <div className='mt-2.5'>
           <Button
             onClick={async () => {
               setToolCallState(toolCall, ClientToolCallState.background)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx
index 9968487f40d..1ddb3afb6dc 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/attached-files-display/attached-files-display.tsx
@@ -71,7 +71,7 @@ export function AttachedFilesDisplay({
       {files.map((file) => (
         <div
           key={file.id}
-          className='group relative h-16 w-16 flex-shrink-0 cursor-pointer overflow-hidden rounded-md border bg-muted/20 transition-all hover:bg-muted/40'
+          className='group relative h-16 w-16 flex-shrink-0 cursor-pointer overflow-hidden rounded-md border bg-muted/20 transition-all hover-hover:bg-muted/40'
           title={`${file.name} (${formatFileSize(file.size)})`}
           onClick={() => onFileClick(file)}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/bottom-controls/bottom-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/bottom-controls/bottom-controls.tsx
index f01b583c84d..5291bd42c30 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/bottom-controls/bottom-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/bottom-controls/bottom-controls.tsx
@@ -46,7 +46,7 @@ export function BottomControls({
   return (
     <div className='flex items-center justify-between gap-2'>
       {/* Left side: Mode Selector + Model Selector */}
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
         {!hideModeSelector && (
           <ModeSelector
             mode={mode}
@@ -64,12 +64,12 @@ export function BottomControls({
       </div>
 
       {/* Right side: Attach Button + Send Button */}
-      <div className='flex flex-shrink-0 items-center gap-[10px]'>
+      <div className='flex flex-shrink-0 items-center gap-2.5'>
         <Badge
           onClick={onFileSelect}
           title='Attach file'
           className={cn(
-            'cursor-pointer rounded-[6px] border-0 bg-transparent p-[0px] dark:bg-transparent',
+            'cursor-pointer rounded-md border-0 bg-transparent p-[0px] dark:bg-transparent',
             disabled && 'cursor-not-allowed opacity-50'
           )}
         >
@@ -83,8 +83,8 @@ export function BottomControls({
             className={cn(
               'h-[20px] w-[20px] rounded-full border-0 p-0 transition-colors',
               !isAborting
-                ? 'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
-                : 'bg-[var(--c-383838)] dark:bg-[var(--c-E0E0E0)]'
+                ? 'bg-[var(--divider)] hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
+                : 'bg-[var(--divider)] dark:bg-[var(--border-1)]'
             )}
             title='Stop generation'
           >
@@ -107,8 +107,8 @@ export function BottomControls({
             className={cn(
               'h-[22px] w-[22px] rounded-full border-0 p-0 transition-colors',
               canSubmit
-                ? 'bg-[var(--c-383838)] hover:bg-[var(--c-575757)] dark:bg-[var(--c-E0E0E0)] dark:hover:bg-[var(--c-CFCFCF)]'
-                : 'bg-[var(--c-808080)] dark:bg-[var(--c-808080)]'
+                ? 'bg-[var(--divider)] hover-hover:bg-[var(--text-secondary)] dark:bg-[var(--border-1)] dark:hover-hover:bg-[var(--text-body)]'
+                : 'bg-[var(--text-subtle)] dark:bg-[var(--text-subtle)]'
             )}
           >
             {isLoading ? (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-pills/context-pills.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-pills/context-pills.tsx
index d840255b39f..00b9534edf0 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-pills/context-pills.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/context-pills/context-pills.tsx
@@ -31,14 +31,14 @@ export function ContextPills({ contexts, onRemoveContext }: ContextPillsProps) {
         <Badge
           key={`selctx-${idx}-${ctx.label}`}
           variant='outline'
-          className='inline-flex items-center gap-1 rounded-[6px] px-2 py-[4.5px] text-xs leading-[12px]'
+          className='inline-flex items-center gap-1 rounded-md px-2 py-[4.5px] text-xs leading-[12px]'
           title={ctx.label}
         >
           <span className='max-w-[140px] truncate leading-[12px]'>{ctx.label}</span>
           <button
             type='button'
             onClick={() => onRemoveContext(ctx)}
-            className='text-muted-foreground transition-colors hover:text-foreground'
+            className='text-muted-foreground transition-colors hover-hover:text-foreground'
             title='Remove context'
             aria-label='Remove context'
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/folder-content.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/folder-content.tsx
index 11eb98037d5..a9169f733fd 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/folder-content.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/folder-content.tsx
@@ -10,7 +10,7 @@ import {
 } from '@/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants'
 
 const ICON_CONTAINER =
-  'relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+  'relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
 
 export function BlockIcon({
   bgColor,
@@ -70,16 +70,16 @@ export function renderItemIcon(folderId: MentionFolderId, item: any): ReactNode
 function renderItemSuffix(folderId: MentionFolderId, item: any): ReactNode {
   switch (folderId) {
     case 'templates':
-      return <span className='text-[10px] text-[var(--text-muted)]'>{item.stars}</span>
+      return <span className='text-[var(--text-muted)] text-micro'>{item.stars}</span>
     case 'logs':
       return (
         <>
-          <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
-          <span className='whitespace-nowrap text-[10px]'>
+          <span className='text-[var(--text-tertiary)] text-micro'>·</span>
+          <span className='whitespace-nowrap text-micro'>
             {formatCompactTimestamp(item.createdAt)}
           </span>
-          <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
-          <span className='text-[10px] capitalize'>{(item.trigger || 'manual').toLowerCase()}</span>
+          <span className='text-[var(--text-tertiary)] text-micro'>·</span>
+          <span className='text-micro capitalize'>{(item.trigger || 'manual').toLowerCase()}</span>
         </>
       )
     default:
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
index 89dbafa4b2c..c9a7caed5e8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mention-menu/mention-menu.tsx
@@ -204,7 +204,7 @@ function MentionMenuContent({
   )
 
   return (
-    <PopoverScrollArea ref={menuListRef} className='space-y-[2px]'>
+    <PopoverScrollArea ref={menuListRef} className='space-y-0.5'>
       {isInFolder ? (
         <FolderContent
           folderId={currentFolder as MentionFolderId}
@@ -230,8 +230,8 @@ function MentionMenuContent({
                 <span className='flex-1 truncate'>{item.label}</span>
                 {item.category === 'logs' && (
                   <>
-                    <span className='text-[10px] text-[var(--text-tertiary)]'>·</span>
-                    <span className='whitespace-nowrap text-[10px]'>
+                    <span className='text-[var(--text-tertiary)] text-micro'>·</span>
+                    <span className='whitespace-nowrap text-micro'>
                       {formatCompactTimestamp(item.data.createdAt)}
                     </span>
                   </>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mode-selector/mode-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mode-selector/mode-selector.tsx
index c6cc61ad294..102934b0092 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mode-selector/mode-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/mode-selector/mode-selector.tsx
@@ -96,7 +96,7 @@ export function ModeSelector({ mode, onModeChange, isNearTop, disabled }: ModeSe
           <Badge
             variant='outline'
             className={cn(
-              'cursor-pointer rounded-[6px]',
+              'cursor-pointer rounded-md',
               (disabled || !onModeChange) && 'cursor-not-allowed opacity-50'
             )}
             aria-expanded={open}
@@ -123,7 +123,7 @@ export function ModeSelector({ mode, onModeChange, isNearTop, disabled }: ModeSe
         onOpenAutoFocus={(e) => e.preventDefault()}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
-        <PopoverScrollArea className='space-y-[2px]'>
+        <PopoverScrollArea className='space-y-0.5'>
           <PopoverItem active={mode === 'ask'} onClick={() => handleSelect('ask')}>
             <MessageSquare className='h-3.5 w-3.5' />
             <span>Ask</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/model-selector/model-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/model-selector/model-selector.tsx
index 6268287259b..7780d2a0b3a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/model-selector/model-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/model-selector/model-selector.tsx
@@ -145,7 +145,7 @@ export function ModelSelector({ selectedModel, isNearTop, onModelSelect }: Model
         <div ref={triggerRef} className='min-w-0 max-w-full'>
           <Badge
             variant='outline'
-            className='min-w-0 max-w-full cursor-pointer rounded-[6px]'
+            className='min-w-0 max-w-full cursor-pointer rounded-md'
             title='Choose model'
             aria-expanded={open}
             onMouseDown={(e) => {
@@ -167,7 +167,7 @@ export function ModelSelector({ selectedModel, isNearTop, onModelSelect }: Model
         onOpenAutoFocus={(e) => e.preventDefault()}
         onCloseAutoFocus={(e) => e.preventDefault()}
       >
-        <PopoverScrollArea className='space-y-[2px]'>
+        <PopoverScrollArea className='space-y-0.5'>
           {modelOptions.length > 0 ? (
             modelOptions.map((option) => (
               <PopoverItem
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx
index a51067057fd..3141d6b820f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/components/slash-menu/slash-menu.tsx
@@ -87,7 +87,7 @@ function SlashMenuContent({
   }, [onFolderNavChange, isInFolder, openFolder, closeFolder, setSubmenuActiveIndex])
 
   return (
-    <PopoverScrollArea ref={menuListRef} className='space-y-[2px]'>
+    <PopoverScrollArea ref={menuListRef} className='space-y-0.5'>
       {isInFolder ? (
         <>
           {WEB_COMMANDS.map((cmd, index) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts
index 89173e92b02..72fc8e3027b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/constants.ts
@@ -255,7 +255,7 @@ export const SCROLL_TOLERANCE = 8
 /**
  * Shared CSS classes for menu state text (loading, empty states)
  */
-export const MENU_STATE_TEXT_CLASSES = 'px-[8px] py-[8px] text-[12px] text-[var(--text-muted)]'
+export const MENU_STATE_TEXT_CLASSES = 'px-2 py-2 text-caption text-[var(--text-muted)]'
 
 /**
  * Calculates the next index for circular navigation (wraps around at bounds)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
index c6faff79c3c..78bf6b4657c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/user-input/user-input.tsx
@@ -705,7 +705,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         elements.push(
           <span
             key={`mention-${i}-${range.start}-${range.end}`}
-            className='rounded-[4px] bg-[rgba(50,189,126,0.65)] py-[1px]'
+            className='rounded-sm bg-[rgba(50,189,126,0.65)] py-[1px]'
           >
             {range.token}
           </span>
@@ -732,7 +732,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
         <div
           ref={setInputContainerRef}
           className={cn(
-            'relative w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-4)] px-[6px] py-[6px] transition-colors dark:bg-[var(--surface-4)]',
+            'relative w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-4)] px-1.5 py-1.5 transition-colors dark:bg-[var(--surface-4)]',
             fileAttachments.isDragging && 'ring-[1.75px] ring-[var(--brand-secondary)]'
           )}
           onDragEnter={fileAttachments.handleDragEnter}
@@ -741,8 +741,8 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           onDrop={fileAttachments.handleDrop}
         >
           {/* Top Row: Context controls + Build Workflow button */}
-          <div className='mb-[6px] flex flex-wrap items-center justify-between gap-[6px]'>
-            <div className='flex flex-wrap items-center gap-[6px]'>
+          <div className='mb-1.5 flex flex-wrap items-center justify-between gap-1.5'>
+            <div className='flex flex-wrap items-center gap-1.5'>
               {!disableMentions && (
                 <>
                   <Badge
@@ -750,7 +750,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                     onClick={handleOpenMentionMenuWithAt}
                     title='Insert @'
                     className={cn(
-                      'cursor-pointer rounded-[6px] p-[4.5px]',
+                      'cursor-pointer rounded-md p-[4.5px]',
                       disabled && 'cursor-not-allowed'
                     )}
                   >
@@ -762,11 +762,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
                     onClick={handleOpenSlashMenu}
                     title='Insert /'
                     className={cn(
-                      'cursor-pointer rounded-[6px] p-[4.5px]',
+                      'cursor-pointer rounded-md p-[4.5px]',
                       disabled && 'cursor-not-allowed'
                     )}
                   >
-                    <span className='flex h-3 w-3 items-center justify-center font-medium text-[11px] leading-none'>
+                    <span className='flex h-3 w-3 items-center justify-center font-medium text-xs leading-none'>
                       /
                     </span>
                   </Badge>
@@ -802,11 +802,11 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
           />
 
           {/* Textarea Field with overlay */}
-          <div className='relative mb-[6px]'>
+          <div className='relative mb-1.5'>
             {/* Highlight overlay - must have identical flow as textarea */}
             <div
               ref={overlayRef}
-              className='pointer-events-none absolute top-0 left-0 z-[1] m-0 box-border h-auto max-h-[120px] min-h-[48px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-0 bg-transparent px-[2px] py-1 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem] outline-none [-ms-overflow-style:none] [scrollbar-width:none] [text-rendering:optimizeLegibility] [&::-webkit-scrollbar]:hidden'
+              className='pointer-events-none absolute top-0 left-0 z-[1] m-0 box-border h-auto max-h-[120px] min-h-[48px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-0 bg-transparent px-0.5 py-1 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.25rem] outline-none [-ms-overflow-style:none] [scrollbar-width:none] [text-rendering:optimizeLegibility] [&::-webkit-scrollbar]:hidden'
               aria-hidden='true'
             >
               {renderOverlayContent()}
@@ -830,7 +830,7 @@ const UserInput = forwardRef<UserInputRef, UserInputProps>(
               placeholder={fileAttachments.isDragging ? 'Drop files here...' : effectivePlaceholder}
               disabled={disabled}
               rows={2}
-              className='relative z-[2] m-0 box-border h-auto max-h-[120px] min-h-[48px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent px-[2px] py-1 font-medium font-sans text-sm text-transparent leading-[1.25rem] caret-foreground outline-none [-ms-overflow-style:none] [scrollbar-width:none] [text-rendering:auto] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 dark:placeholder:text-[var(--text-muted)] [&::-webkit-scrollbar]:hidden'
+              className='relative z-[2] m-0 box-border h-auto max-h-[120px] min-h-[48px] w-full resize-none overflow-y-auto overflow-x-hidden break-words border-0 bg-transparent px-0.5 py-1 font-medium font-sans text-sm text-transparent leading-[1.25rem] caret-foreground outline-none [-ms-overflow-style:none] [scrollbar-width:none] [text-rendering:auto] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0 dark:placeholder:text-[var(--text-muted)] [&::-webkit-scrollbar]:hidden'
             />
 
             {/* Mention Menu Portal */}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
index 56d75321153..ba3d66b5567 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/components/welcome/welcome.tsx
@@ -46,7 +46,7 @@ export function Welcome({ onQuestionClick, mode = 'ask' }: WelcomeProps) {
   return (
     <div className='flex w-full flex-col items-center'>
       {/* Unified capability cards */}
-      <div className='flex w-full flex-col items-center gap-[8px]'>
+      <div className='flex w-full flex-col items-center gap-2'>
         {capabilities.map(({ title, question }, idx) => (
           <Button
             key={idx}
@@ -63,7 +63,7 @@ export function Welcome({ onQuestionClick, mode = 'ask' }: WelcomeProps) {
       </div>
 
       {/* Tips */}
-      <p className='pt-[12px] text-center text-[13px] text-[var(--text-secondary)]'>
+      <p className='pt-3 text-center text-[var(--text-secondary)] text-small'>
         Tip: Use <span className='font-medium'>@</span> to reference chats, workflows, knowledge,
         blocks, or templates
       </p>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
index 68bb20b63d7..cbb29f86722 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/copilot/copilot.tsx
@@ -338,11 +338,11 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
         className='flex h-full flex-col overflow-hidden'
       >
         {/* Header */}
-        <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-[8px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
-          <h2 className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+        <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between gap-2 rounded-sm border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
+          <h2 className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-sm'>
             {currentChat?.title || 'New Chat'}
           </h2>
-          <div className='flex items-center gap-[8px]'>
+          <div className='flex items-center gap-2'>
             <Button variant='ghost' className='p-0' onClick={handleStartNewChat}>
               <Plus className='h-[14px] w-[14px]' />
             </Button>
@@ -358,7 +358,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                     <ChatHistorySkeleton />
                   </PopoverScrollArea>
                 ) : groupedChats.length === 0 ? (
-                  <div className='px-[6px] py-[16px] text-center text-[12px] text-muted-foreground'>
+                  <div className='px-1.5 py-4 text-center text-caption text-muted-foreground'>
                     No chats yet
                   </div>
                 ) : (
@@ -385,7 +385,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                                 </span>
                                 <div
                                   className={cn(
-                                    'flex flex-shrink-0 items-center gap-[4px]',
+                                    'flex flex-shrink-0 items-center gap-1',
                                     currentChat?.id !== chat.id &&
                                       'opacity-0 transition-opacity group-hover:opacity-100'
                                   )}
@@ -427,7 +427,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
             {/* Messages area */}
             {messages.length === 0 && !isSendingMessage && !isEditingMessage ? (
               /* Welcome state with input at top */
-              <div className='flex flex-1 flex-col overflow-hidden p-[8px]'>
+              <div className='flex flex-1 flex-col overflow-hidden p-2'>
                 <div className='flex-shrink-0'>
                   <UserInput
                     ref={userInputRef}
@@ -444,7 +444,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                     hasPlanArtifact={Boolean(designDocumentContent)}
                   />
                 </div>
-                <div className='flex-shrink-0 pt-[8px]'>
+                <div className='flex-shrink-0 pt-2'>
                   <Welcome onQuestionClick={handleSubmit} mode={mode} />
                 </div>
               </div>
@@ -453,7 +453,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
               <div className='relative flex flex-1 flex-col overflow-hidden'>
                 {/* Design Document Section - Pinned at top, shown in all modes when available */}
                 {designDocumentContent && (
-                  <div className='flex-shrink-0 px-[8px] pt-[8px]'>
+                  <div className='flex-shrink-0 px-2 pt-2'>
                     <PlanModeSection
                       content={designDocumentContent}
                       onClear={clearPlanArtifact}
@@ -465,10 +465,10 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                 <div className='relative flex-1 overflow-hidden'>
                   <div
                     ref={scrollAreaRef}
-                    className='h-full overflow-y-auto overflow-x-hidden px-[8px]'
+                    className='h-full overflow-y-auto overflow-x-hidden px-2'
                   >
                     <div
-                      className={`w-full max-w-full space-y-[8px] overflow-hidden py-[8px] ${
+                      className={`w-full max-w-full space-y-2 overflow-hidden py-2 ${
                         showPlanTodos && planTodos.length > 0 ? 'pb-14' : 'pb-10'
                       }`}
                     >
@@ -517,7 +517,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                   {/* Todo list from plan tool - overlay at bottom so it's not clipped by scroll area */}
                   {showPlanTodos && planTodos.length > 0 && (
                     <div
-                      className='-translate-x-1/2 absolute bottom-0 left-1/2 z-[2] w-full max-w-full px-[8px]'
+                      className='-translate-x-1/2 absolute bottom-0 left-1/2 z-[2] w-full max-w-full px-2'
                       style={{ maxWidth: `${panelWidth - 18}px` } as React.CSSProperties}
                     >
                       <TodoList
@@ -533,7 +533,7 @@ export const Copilot = forwardRef<CopilotRef, CopilotProps>(({ panelWidth }, ref
                 <QueuedMessages />
 
                 {/* Input area with integrated mode selector */}
-                <div className='flex-shrink-0 px-[8px] pb-[8px]'>
+                <div className='flex-shrink-0 px-2 pb-2'>
                   <UserInput
                     ref={userInputRef}
                     onSubmit={handleSubmit}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
index 61d18e19c45..1d4e5844b49 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/a2a/a2a.tsx
@@ -632,23 +632,23 @@ console.log(data);`
 
   if (isLoading) {
     return (
-      <div className='-mx-1 space-y-[12px] px-1'>
+      <div className='-mx-1 space-y-3 px-1'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[80px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
           <Skeleton className='mt-[6.5px] h-[14px] w-[200px]' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[70px]' />
-          <Skeleton className='h-[80px] w-full rounded-[4px]' />
+          <Skeleton className='h-[80px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[90px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
       </div>
     )
@@ -661,13 +661,13 @@ console.log(data);`
         e.preventDefault()
         handleCreateOrUpdate()
       }}
-      className='-mx-1 space-y-[12px] overflow-y-auto px-1 pb-[16px]'
+      className='-mx-1 space-y-3 overflow-y-auto px-1 pb-4'
     >
       {/* Endpoint URL (shown when agent exists) */}
       {existingAgent && endpoint && (
         <div>
           <div className='mb-[6.5px] flex items-center justify-between'>
-            <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               URL
             </Label>
             <Tooltip.Root>
@@ -691,8 +691,8 @@ console.log(data);`
               </Tooltip.Content>
             </Tooltip.Root>
           </div>
-          <div className='relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--border-1)]'>
-            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
+          <div className='relative flex items-stretch overflow-hidden rounded-sm border border-[var(--border-1)]'>
+            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-1.5 pl-2 font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
               {baseUrl.replace(/^https?:\/\//, '')}/api/a2a/serve/
             </div>
             <div className='relative flex-1'>
@@ -703,7 +703,7 @@ console.log(data);`
               />
             </div>
           </div>
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             The A2A endpoint URL where clients can discover and call your agent
           </p>
         </div>
@@ -713,7 +713,7 @@ console.log(data);`
       <div>
         <Label
           htmlFor='a2a-name'
-          className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+          className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
         >
           Agent name <span className='text-red-500'>*</span>
         </Label>
@@ -724,7 +724,7 @@ console.log(data);`
           placeholder='Enter agent name'
           required
         />
-        <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+        <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
           Human-readable name shown in the Agent Card
         </p>
       </div>
@@ -733,7 +733,7 @@ console.log(data);`
       <div>
         <Label
           htmlFor='a2a-description'
-          className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+          className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
         >
           Description <span className='text-red-500'>*</span>
         </Label>
@@ -749,7 +749,7 @@ console.log(data);`
 
       {/* Access */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Access
         </Label>
         <ButtonGroup
@@ -759,7 +759,7 @@ console.log(data);`
           <ButtonGroupItem value='apiKey'>API Key</ButtonGroupItem>
           <ButtonGroupItem value='none'>Public</ButtonGroupItem>
         </ButtonGroup>
-        <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+        <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
           {authScheme === 'none'
             ? 'Anyone can call this agent without authentication'
             : 'Requires X-API-Key header or API key query parameter'}
@@ -768,17 +768,17 @@ console.log(data);`
 
       {/* Capabilities */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Capabilities
         </Label>
-        <div className='space-y-[8px]'>
-          <div className='flex items-center gap-[8px]'>
+        <div className='space-y-2'>
+          <div className='flex items-center gap-2'>
             <Checkbox
               id='a2a-push'
               checked={pushNotificationsEnabled}
               onCheckedChange={(checked) => setPushNotificationsEnabled(checked === true)}
             />
-            <label htmlFor='a2a-push' className='text-[13px] text-[var(--text-primary)]'>
+            <label htmlFor='a2a-push' className='text-[var(--text-primary)] text-small'>
               Push notifications (webhooks)
             </label>
           </div>
@@ -787,7 +787,7 @@ console.log(data);`
 
       {/* Tags */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Tags
         </Label>
         <TagInput
@@ -814,7 +814,7 @@ console.log(data);`
         <>
           <div>
             <div className='mb-[6.5px] flex items-center justify-between'>
-              <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                 Language
               </Label>
             </div>
@@ -829,11 +829,11 @@ console.log(data);`
 
           <div>
             <div className='mb-[6.5px] flex items-center justify-between'>
-              <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                 Send message
               </Label>
-              <div className='flex items-center gap-[8px]'>
-                <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-2'>
+                <div className='flex items-center gap-1.5'>
                   <Checkbox
                     id='a2a-stream-example'
                     checked={useStreamingExample}
@@ -841,7 +841,7 @@ console.log(data);`
                   />
                   <label
                     htmlFor='a2a-stream-example'
-                    className='text-[12px] text-[var(--text-secondary)]'
+                    className='text-[var(--text-secondary)] text-caption'
                   >
                     Stream
                   </label>
@@ -872,18 +872,18 @@ console.log(data);`
               code={getCurlCommand()}
               language={LANGUAGE_SYNTAX[language]}
               wrapText
-              className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+              className='!min-h-0 rounded-sm border border-[var(--border-1)]'
             />
             <div className='mt-[6.5px] flex items-start justify-between gap-2'>
-              <p className='text-[11px] text-[var(--text-secondary)]'>
+              <p className='text-[var(--text-secondary)] text-xs'>
                 External A2A clients can discover and call your agent. TextPart →{' '}
-                <code className='text-[10px]'>&lt;start.input&gt;</code>, DataPart →{' '}
-                <code className='text-[10px]'>&lt;start.data&gt;</code>, FilePart →{' '}
-                <code className='text-[10px]'>&lt;start.files&gt;</code>.
+                <code className='text-micro'>&lt;start.input&gt;</code>, DataPart →{' '}
+                <code className='text-micro'>&lt;start.data&gt;</code>, FilePart →{' '}
+                <code className='text-micro'>&lt;start.files&gt;</code>.
               </p>
               {missingFields.any && (
                 <div
-                  className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-[2px] font-medium font-sans text-[12px] text-[var(--text-primary)] hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+                  className='flex flex-none cursor-pointer items-center whitespace-nowrap rounded-md border border-[var(--border-1)] bg-[var(--surface-5)] px-[9px] py-0.5 font-medium font-sans text-[var(--text-primary)] text-caption hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
                   title='Add required A2A input fields to Start block'
                   onClick={handleAddA2AInputs}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
index 84d73dcc843..831d80c8353 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/api/api.tsx
@@ -408,28 +408,28 @@ console.log(limits);`
 
   if (isLoading || !info) {
     return (
-      <div className='space-y-[16px]'>
+      <div className='space-y-4'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[62px]' />
-          <Skeleton className='h-[28px] w-[260px] rounded-[4px]' />
+          <Skeleton className='h-[28px] w-[260px] rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[90px]' />
-          <Skeleton className='h-[120px] w-full rounded-[4px]' />
+          <Skeleton className='h-[120px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[180px]' />
-          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+          <Skeleton className='h-[160px] w-full rounded-sm' />
         </div>
       </div>
     )
   }
 
   return (
-    <div className='space-y-[16px]'>
+    <div className='space-y-4'>
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Language
           </Label>
         </div>
@@ -444,7 +444,7 @@ console.log(limits);`
 
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Run workflow
           </Label>
           <Tooltip.Root>
@@ -467,16 +467,16 @@ console.log(limits);`
           code={getSyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
         />
       </div>
 
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Run workflow (stream response)
           </Label>
-          <div className='flex items-center gap-[6px]'>
+          <div className='flex items-center gap-1.5'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
@@ -510,16 +510,16 @@ console.log(limits);`
           code={getStreamCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
         />
       </div>
 
       <div>
         <div className='mb-[6.5px] flex items-center justify-between'>
-          <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Run workflow (async)
           </Label>
-          <div className='flex items-center gap-[6px]'>
+          <div className='flex items-center gap-1.5'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 <Button
@@ -537,7 +537,7 @@ console.log(limits);`
             </Tooltip.Root>
             <Combobox
               size='sm'
-              className='!w-fit !py-[2px] min-w-[100px] rounded-[6px] px-[9px]'
+              className='!w-fit !py-0.5 min-w-[100px] rounded-md px-[9px]'
               options={[
                 { label: 'Execute Job', value: 'execute' },
                 { label: 'Check Status', value: 'status' },
@@ -554,7 +554,7 @@ console.log(limits);`
           code={getAsyncCommand()}
           language={LANGUAGE_SYNTAX[language]}
           wrapText
-          className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+          className='!min-h-0 rounded-sm border border-[var(--border-1)]'
         />
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
index 4df06afaf8c..f50af02f491 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/chat/chat.tsx
@@ -322,13 +322,13 @@ export function ChatDeploy({
         className='-mx-1 space-y-4 overflow-y-auto px-1'
       >
         {errors.general && (
-          <div className='flex items-center gap-2 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-[13px] text-red-400'>
+          <div className='flex items-center gap-2 rounded-md border border-red-500/20 bg-red-500/10 px-3 py-2 text-red-400 text-small'>
             <AlertTriangle className='h-4 w-4 flex-shrink-0' />
             <span>{errors.general}</span>
           </div>
         )}
 
-        <div className='space-y-[12px]'>
+        <div className='space-y-3'>
           <IdentifierInput
             value={formData.identifier}
             onChange={(value) => updateField('identifier', value)}
@@ -341,7 +341,7 @@ export function ChatDeploy({
           <div>
             <Label
               htmlFor='title'
-              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
             >
               Title
             </Label>
@@ -357,7 +357,7 @@ export function ChatDeploy({
           </div>
 
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Output
             </Label>
             <OutputSelect
@@ -387,7 +387,7 @@ export function ChatDeploy({
           <div>
             <Label
               htmlFor='welcomeMessage'
-              className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
             >
               Welcome message
             </Label>
@@ -400,7 +400,7 @@ export function ChatDeploy({
               disabled={chatSubmitting}
               className='min-h-[80px] resize-none'
             />
-            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
               This message will be displayed when users first open the chat
             </p>
           </div>
@@ -455,27 +455,27 @@ export function ChatDeploy({
 function LoadingSkeleton() {
   return (
     <div className='-mx-1 space-y-4 px-1'>
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
           <Skeleton className='mt-[6.5px] h-[14px] w-[320px]' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[30px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[46px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[95px]' />
-          <Skeleton className='h-[28px] w-[170px] rounded-[4px]' />
+          <Skeleton className='h-[28px] w-[170px] rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[115px]' />
-          <Skeleton className='h-[80px] w-full rounded-[4px]' />
+          <Skeleton className='h-[80px] w-full rounded-sm' />
           <Skeleton className='mt-[6.5px] h-[14px] w-[340px]' />
         </div>
       </div>
@@ -527,17 +527,17 @@ function IdentifierInput({
     <div>
       <Label
         htmlFor='chat-url'
-        className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+        className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
       >
         URL
       </Label>
       <div
         className={cn(
-          'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--border-1)]',
+          'relative flex items-stretch overflow-hidden rounded-sm border border-[var(--border-1)]',
           error && 'border-[var(--text-error)]'
         )}
       >
-        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
+        <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-1.5 pl-2 font-medium text-[var(--text-secondary)] text-sm dark:bg-[var(--surface-5)]'>
           {getDomainPrefix()}
         </div>
         <div className='relative flex-1'>
@@ -550,7 +550,7 @@ function IdentifierInput({
             disabled={disabled}
             className={cn(
               'rounded-none border-0 pl-0 shadow-none disabled:bg-transparent disabled:opacity-100',
-              (isChecking || (isValid && value)) && 'pr-[32px]'
+              (isChecking || (isValid && value)) && 'pr-8'
             )}
           />
           {isChecking ? (
@@ -575,8 +575,8 @@ function IdentifierInput({
           )}
         </div>
       </div>
-      {error && <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{error}</p>}
-      <p className='mt-[6.5px] truncate text-[11px] text-[var(--text-secondary)]'>
+      {error && <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{error}</p>}
+      <p className='mt-[6.5px] truncate text-[var(--text-secondary)] text-xs'>
         {isEditingExisting && value ? (
           <>
             Live at:{' '}
@@ -584,7 +584,7 @@ function IdentifierInput({
               href={fullUrl}
               target='_blank'
               rel='noopener noreferrer'
-              className='text-[var(--text-primary)] hover:underline'
+              className='text-[var(--text-primary)] hover-hover:underline'
             >
               {displayUrl}
             </a>
@@ -686,9 +686,9 @@ function AuthSelector({
     : (['public', 'password', 'email'] as const)
 
   return (
-    <div className='space-y-[16px]'>
+    <div className='space-y-4'>
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Access control
         </Label>
         <ButtonGroup
@@ -706,7 +706,7 @@ function AuthSelector({
 
       {authType === 'password' && (
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Password
           </Label>
           <div className='relative'>
@@ -778,7 +778,7 @@ function AuthSelector({
               </Tooltip.Root>
             </div>
           </div>
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             {isExistingChat
               ? 'Leave empty to keep the current password'
               : 'This password will be required to access your chat'}
@@ -788,7 +788,7 @@ function AuthSelector({
 
       {(authType === 'email' || authType === 'sso') && (
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             {authType === 'email' ? 'Allowed emails' : 'Allowed SSO emails'}
           </Label>
           <TagInput
@@ -800,9 +800,9 @@ function AuthSelector({
             disabled={disabled}
           />
           {emailError && (
-            <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{emailError}</p>
+            <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{emailError}</p>
           )}
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             {authType === 'email'
               ? 'Add specific emails or entire domains (@example.com)'
               : 'Add emails or domains that can access via SSO'}
@@ -810,7 +810,7 @@ function AuthSelector({
         </div>
       )}
 
-      {error && <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{error}</p>}
+      {error && <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{error}</p>}
     </div>
   )
 }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx
index 03d20e243f7..61489288beb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/embed-code-generator.tsx
@@ -27,9 +27,9 @@ export function EmbedCodeGenerator({ formUrl }: EmbedCodeGeneratorProps) {
   }, [iframeCode])
 
   return (
-    <div className='pb-[12px]'>
+    <div className='pb-3'>
       <div className='mb-[6.5px] flex items-center justify-between'>
-        <Label className='block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Embed Code
         </Label>
         <Tooltip.Root>
@@ -54,7 +54,7 @@ export function EmbedCodeGenerator({ formUrl }: EmbedCodeGeneratorProps) {
         code={iframeCode}
         language='javascript'
         wrapText
-        className='!min-h-0 rounded-[4px] border border-[var(--border-1)]'
+        className='!min-h-0 rounded-sm border border-[var(--border-1)]'
       />
     </div>
   )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx
index 8faafe3db21..42f2850930b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/components/form-builder.tsx
@@ -29,7 +29,7 @@ function CharacterCounter({ current, max, className }: CharacterCounterProps) {
   return (
     <span
       className={cn(
-        'text-[10px] tabular-nums transition-colors',
+        'text-micro tabular-nums transition-colors',
         isAtLimit
           ? 'text-[var(--text-error)]'
           : isNearLimit
@@ -189,10 +189,10 @@ export function FormBuilder({
   )
 
   return (
-    <div className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'>
+    <div className='overflow-hidden rounded-sm border border-[var(--border-1)]'>
       {/* Header */}
-      <div className='border-[var(--border-1)] border-b px-[10px] py-[8px]'>
-        <div className='flex items-center gap-[6px]'>
+      <div className='border-[var(--border-1)] border-b px-2.5 py-2'>
+        <div className='flex items-center gap-1.5'>
           <input
             type='text'
             value={title}
@@ -206,7 +206,7 @@ export function FormBuilder({
             placeholder='Form Title'
             maxLength={MAX_LENGTHS.FORM_TITLE}
             className={cn(
-              'min-w-0 flex-1 bg-transparent font-medium text-[14px] text-[var(--text-primary)] outline-none',
+              'min-w-0 flex-1 bg-transparent font-medium text-[var(--text-primary)] text-sm outline-none',
               'placeholder:text-[var(--text-muted)]',
               titleError && 'text-[var(--text-error)]'
             )}
@@ -215,10 +215,8 @@ export function FormBuilder({
             <CharacterCounter current={title.length} max={MAX_LENGTHS.FORM_TITLE} />
           )}
         </div>
-        {titleError && (
-          <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{titleError}</p>
-        )}
-        <div className='mt-[4px] flex items-center gap-[6px]'>
+        {titleError && <p className='mt-1 text-[var(--text-error)] text-caption'>{titleError}</p>}
+        <div className='mt-1 flex items-center gap-1.5'>
           <input
             type='text'
             value={description}
@@ -231,7 +229,7 @@ export function FormBuilder({
             onBlur={() => setFocusedInput(null)}
             placeholder='Description'
             maxLength={MAX_LENGTHS.FORM_DESCRIPTION}
-            className='min-w-0 flex-1 bg-transparent text-[12px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-muted)]'
+            className='min-w-0 flex-1 bg-transparent text-[var(--text-secondary)] text-caption outline-none placeholder:text-[var(--text-muted)]'
           />
           {focusedInput === 'description' && (
             <CharacterCounter current={description.length} max={MAX_LENGTHS.FORM_DESCRIPTION} />
@@ -257,7 +255,7 @@ export function FormBuilder({
                 itemRefs.current[index] = el
               }}
               className={cn(
-                'relative border-[var(--border-1)] border-b px-[10px] py-[8px] last:border-b-0',
+                'relative border-[var(--border-1)] border-b px-2.5 py-2 last:border-b-0',
                 draggedIndex === index && 'opacity-40'
               )}
             >
@@ -270,13 +268,13 @@ export function FormBuilder({
               )}
 
               {/* Label row */}
-              <div className='flex items-center gap-[6px]'>
+              <div className='flex items-center gap-1.5'>
                 {/* Grip handle - larger hit area with negative margins */}
                 <div
                   draggable
                   onDragStart={(e) => handleDragStart(e, index)}
                   onDragEnd={handleDragEnd}
-                  className='-my-[6px] -ml-[6px] flex cursor-grab items-center py-[6px] pl-[6px] text-[var(--text-muted)] hover:text-[var(--text-tertiary)] active:cursor-grabbing'
+                  className='-my-1.5 -ml-1.5 flex cursor-grab items-center py-1.5 pl-1.5 text-[var(--text-muted)] hover-hover:text-[var(--text-tertiary)] active:cursor-grabbing'
                 >
                   <GripVertical className='h-[12px] w-[12px]' />
                 </div>
@@ -292,13 +290,13 @@ export function FormBuilder({
                   onBlur={() => setFocusedInput(null)}
                   placeholder='Label'
                   maxLength={MAX_LENGTHS.FIELD_LABEL}
-                  className='min-w-0 flex-1 bg-transparent font-medium text-[13px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)]'
+                  className='min-w-0 flex-1 bg-transparent font-medium text-[var(--text-primary)] text-small outline-none placeholder:text-[var(--text-muted)]'
                 />
                 {focusedInput === `field-label-${index}` && (
                   <CharacterCounter current={config.label.length} max={MAX_LENGTHS.FIELD_LABEL} />
                 )}
-                <div className='flex items-center gap-[6px]'>
-                  <span className='text-[11px] text-[var(--text-tertiary)]'>Required</span>
+                <div className='flex items-center gap-1.5'>
+                  <span className='text-[var(--text-tertiary)] text-xs'>Required</span>
                   <Switch
                     checked={config.required ?? false}
                     onCheckedChange={(checked) => updateFieldConfig(index, { required: checked })}
@@ -307,7 +305,7 @@ export function FormBuilder({
               </div>
 
               {/* Help text */}
-              <div className='mt-[4px] flex items-center gap-[6px] pl-[18px]'>
+              <div className='mt-1 flex items-center gap-1.5 pl-4.5'>
                 <input
                   type='text'
                   value={config.description || ''}
@@ -320,7 +318,7 @@ export function FormBuilder({
                   onBlur={() => setFocusedInput(null)}
                   placeholder='Description...'
                   maxLength={MAX_LENGTHS.FIELD_DESCRIPTION}
-                  className='min-w-0 flex-1 bg-transparent text-[11px] text-[var(--text-secondary)] outline-none placeholder:text-[var(--text-muted)]'
+                  className='min-w-0 flex-1 bg-transparent text-[var(--text-secondary)] text-xs outline-none placeholder:text-[var(--text-muted)]'
                 />
                 {focusedInput === `field-desc-${index}` && (
                   <CharacterCounter
@@ -331,15 +329,15 @@ export function FormBuilder({
               </div>
 
               {/* Field mapping */}
-              <div className='mt-[6px] ml-[18px] flex items-center justify-between border-[var(--border-1)] border-t border-dashed pt-[6px]'>
-                <span className='text-[10px] text-[var(--text-muted)]'>
+              <div className='mt-1.5 ml-4.5 flex items-center justify-between border-[var(--border-1)] border-t border-dashed pt-1.5'>
+                <span className='text-[var(--text-muted)] text-micro'>
                   {config.name ? (
                     <>
                       maps to <code>{config.name}</code>
                     </>
                   ) : null}
                 </span>
-                <span className='text-[10px] text-[var(--text-muted)]'>{config.type}</span>
+                <span className='text-[var(--text-muted)] text-micro'>{config.type}</span>
               </div>
             </div>
           )
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx
index 193932eaec4..a58c6a8eb31 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/form/form.tsx
@@ -320,15 +320,15 @@ export function FormDeploy({
   if (isLoading) {
     return (
       <div className='-mx-1 space-y-4 px-1'>
-        <div className='space-y-[12px]'>
+        <div className='space-y-3'>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[26px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
             <Skeleton className='mt-[6.5px] h-[14px] w-[320px]' />
           </div>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[30px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
         </div>
       </div>
@@ -337,7 +337,7 @@ export function FormDeploy({
 
   if (inputFields.length === 0) {
     return (
-      <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-secondary)]'>
+      <div className='flex h-full items-center justify-center text-[var(--text-secondary)] text-small'>
         Add input fields to the Start block to create a form.
       </div>
     )
@@ -348,19 +348,19 @@ export function FormDeploy({
 
   return (
     <form id='form-deploy-form' onSubmit={handleSubmit} className='-mx-1 space-y-4 px-1'>
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         {/* URL Input - matching chat style */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             URL
           </Label>
           <div
             className={cn(
-              'relative flex items-stretch overflow-hidden rounded-[4px] border border-[var(--border-1)]',
+              'relative flex items-stretch overflow-hidden rounded-sm border border-[var(--border-1)]',
               (identifierError || errors.identifier) && 'border-[var(--text-error)]'
             )}
           >
-            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-[6px] pl-[8px] font-medium text-[var(--text-secondary)] text-sm'>
+            <div className='flex items-center whitespace-nowrap bg-[var(--surface-5)] pr-1.5 pl-2 font-medium text-[var(--text-secondary)] text-sm'>
               {getDomainPrefix()}
             </div>
             <div className='relative flex-1'>
@@ -373,8 +373,7 @@ export function FormDeploy({
                 placeholder='my-form'
                 className={cn(
                   'rounded-none border-0 pl-0 shadow-none',
-                  (isCheckingIdentifier || (identifierValidationPassed && identifier)) &&
-                    'pr-[32px]'
+                  (isCheckingIdentifier || (identifierValidationPassed && identifier)) && 'pr-8'
                 )}
               />
               {isCheckingIdentifier ? (
@@ -399,11 +398,11 @@ export function FormDeploy({
             </div>
           </div>
           {(identifierError || errors.identifier) && (
-            <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>
+            <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>
               {identifierError || errors.identifier}
             </p>
           )}
-          <p className='mt-[6.5px] truncate text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] truncate text-[var(--text-secondary)] text-xs'>
             {existingForm && identifier ? (
               <>
                 Live at:{' '}
@@ -411,7 +410,7 @@ export function FormDeploy({
                   href={fullUrl}
                   target='_blank'
                   rel='noopener noreferrer'
-                  className='text-[var(--text-primary)] hover:underline'
+                  className='text-[var(--text-primary)] hover-hover:underline'
                 >
                   {displayUrl}
                 </a>
@@ -424,7 +423,7 @@ export function FormDeploy({
 
         {/* Form Builder Preview */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Form builder
           </Label>
           <FormBuilder
@@ -443,7 +442,7 @@ export function FormDeploy({
 
         {/* Access Control */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Access control
           </Label>
           <ButtonGroup
@@ -458,7 +457,7 @@ export function FormDeploy({
 
         {authType === 'password' && (
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Password
             </Label>
             <div className='relative'>
@@ -472,7 +471,7 @@ export function FormDeploy({
                 placeholder={
                   existingForm?.hasPassword ? 'Enter new password to change' : 'Enter password'
                 }
-                className='pr-[32px]'
+                className='pr-8'
               />
               <button
                 type='button'
@@ -483,9 +482,9 @@ export function FormDeploy({
               </button>
             </div>
             {errors.password && (
-              <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{errors.password}</p>
+              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.password}</p>
             )}
-            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
               {existingForm?.hasPassword
                 ? 'Leave empty to keep the current password'
                 : 'This password will be required to access your form'}
@@ -495,7 +494,7 @@ export function FormDeploy({
 
         {authType === 'email' && (
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Allowed emails
             </Label>
             <TagInput
@@ -520,9 +519,9 @@ export function FormDeploy({
               placeholderWithTags='Add another'
             />
             {errors.emails && (
-              <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{errors.emails}</p>
+              <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.emails}</p>
             )}
-            <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+            <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
               Add specific emails or entire domains (@example.com)
             </p>
           </div>
@@ -530,7 +529,7 @@ export function FormDeploy({
 
         {/* Thank You Message */}
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Thank you message
           </Label>
           <Textarea
@@ -540,7 +539,7 @@ export function FormDeploy({
             rows={2}
             className='min-h-[60px] resize-none'
           />
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             This message will be displayed after form submission
           </p>
         </div>
@@ -551,7 +550,7 @@ export function FormDeploy({
         )}
 
         {errors.general && (
-          <p className='mt-[6.5px] text-[12px] text-[var(--text-error)]'>{errors.general}</p>
+          <p className='mt-[6.5px] text-[var(--text-error)] text-caption'>{errors.general}</p>
         )}
 
         <button type='button' data-delete-trigger onClick={handleDelete} className='hidden' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
index f86f7eaf9e7..c701e0bbb6e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/api-info-modal.tsx
@@ -214,9 +214,9 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
           <ModalHeader>
             <span>Edit API Info</span>
           </ModalHeader>
-          <ModalBody className='space-y-[12px]'>
+          <ModalBody className='space-y-3'>
             <div>
-              <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+              <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                 Description
               </Label>
               <Textarea
@@ -229,7 +229,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
 
             {!isPublicApiDisabled && (
               <div>
-                <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+                <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                   Access
                 </Label>
                 <ButtonGroup
@@ -239,7 +239,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                   <ButtonGroupItem value='api_key'>API Key</ButtonGroupItem>
                   <ButtonGroupItem value='public'>Public</ButtonGroupItem>
                 </ButtonGroup>
-                <p className='mt-1 text-[12px] text-[var(--text-secondary)]'>
+                <p className='mt-1 text-[var(--text-secondary)] text-caption'>
                   {accessMode === 'public'
                     ? 'Anyone can call this API without authentication. You will be billed for all usage.'
                     : 'Requires a valid API key to call this endpoint.'}
@@ -249,18 +249,18 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
 
             {inputFormat.length > 0 && (
               <div>
-                <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+                <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
                   Parameters ({inputFormat.length})
                 </Label>
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   {inputFormat.map((field) => (
                     <div
                       key={field.name}
-                      className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'
+                      className='overflow-hidden rounded-sm border border-[var(--border-1)]'
                     >
-                      <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
-                        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                          <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+                      <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
+                        <div className='flex min-w-0 flex-1 items-center gap-2'>
+                          <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
                             {field.name}
                           </span>
                           <Badge variant='type' size='sm'>
@@ -268,9 +268,9 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
                           </Badge>
                         </div>
                       </div>
-                      <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                        <div className='flex flex-col gap-[6px]'>
-                          <Label className='text-[13px]'>Description</Label>
+                      <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                        <div className='flex flex-col gap-1.5'>
+                          <Label className='text-small'>Description</Label>
                           <Input
                             value={paramDescriptions[field.name] || ''}
                             onChange={(e) =>
@@ -288,7 +288,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
           </ModalBody>
           <ModalFooter>
             {saveError && (
-              <p className='mr-auto text-[12px] text-[var(--text-error)]'>{saveError}</p>
+              <p className='mr-auto text-[var(--text-error)] text-caption'>{saveError}</p>
             )}
             <Button variant='default' onClick={handleCloseAttempt} disabled={isSaving}>
               Cancel
@@ -306,7 +306,7 @@ export function ApiInfoModal({ open, onOpenChange, workflowId }: ApiInfoModalPro
             <span>Unsaved Changes</span>
           </ModalHeader>
           <ModalBody>
-            <p className='text-[14px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-sm'>
               You have unsaved changes. Are you sure you want to discard them?
             </p>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
index edb2a6e12ad..0501948f850 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/version-description-modal.tsx
@@ -93,7 +93,7 @@ export function VersionDescriptionModal({
           <ModalHeader>
             <span>Version Description</span>
           </ModalHeader>
-          <ModalBody className='space-y-[10px]'>
+          <ModalBody className='space-y-2.5'>
             <div className='flex items-center justify-between'>
               <p className='text-[var(--text-secondary)]'>
                 {currentDescription ? 'Edit the' : 'Add a'} description for{' '}
@@ -101,7 +101,7 @@ export function VersionDescriptionModal({
               </p>
               <Button
                 variant='active'
-                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                className='-my-1 h-5 px-2 py-0 text-xs'
                 onClick={handleGenerateDescription}
                 disabled={isGenerating || updateMutation.isPending}
               >
@@ -118,12 +118,12 @@ export function VersionDescriptionModal({
             />
             <div className='flex items-center justify-between'>
               {(updateMutation.error || generateMutation.error) && (
-                <p className='text-[12px] text-[var(--text-error)]'>
+                <p className='text-[var(--text-error)] text-caption'>
                   {updateMutation.error?.message || generateMutation.error?.message}
                 </p>
               )}
               {!updateMutation.error && !generateMutation.error && <div />}
-              <p className='text-[11px] text-[var(--text-tertiary)]'>{description.length}/2000</p>
+              <p className='text-[var(--text-tertiary)] text-xs'>{description.length}/2000</p>
             </div>
           </ModalBody>
           <ModalFooter>
@@ -151,7 +151,7 @@ export function VersionDescriptionModal({
             <span>Unsaved Changes</span>
           </ModalHeader>
           <ModalBody>
-            <p className='text-[14px] text-[var(--text-secondary)]'>
+            <p className='text-[var(--text-secondary)] text-sm'>
               You have unsaved changes. Are you sure you want to discard them?
             </p>
           </ModalBody>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
index b986b58de62..6d04ae6f365 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/components/versions.tsx
@@ -17,8 +17,8 @@ import type { WorkflowDeploymentVersionResponse } from '@/lib/workflows/persiste
 import { useUpdateDeploymentVersion } from '@/hooks/queries/deployments'
 import { VersionDescriptionModal } from './version-description-modal'
 
-const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-[12px]'
-const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-[12px]'
+const HEADER_TEXT_CLASS = 'font-medium text-[var(--text-tertiary)] text-caption'
+const ROW_TEXT_CLASS = 'font-medium text-[var(--text-primary)] text-caption'
 const COLUMN_BASE_CLASS = 'flex-shrink-0'
 
 const COLUMN_WIDTHS = {
@@ -136,8 +136,8 @@ export function Versions({
 
   if (versionsLoading && versions.length === 0) {
     return (
-      <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
-        <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+      <div className='overflow-hidden rounded-sm border border-[var(--border)]'>
+        <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-4'>
           <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
             <Skeleton className='h-[12px] w-[50px]' />
           </div>
@@ -151,10 +151,10 @@ export function Versions({
         </div>
         <div className='bg-[var(--surface-2)]'>
           {[0, 1].map((i) => (
-            <div key={i} className='flex h-[36px] items-center px-[16px]'>
-              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
-                <div className='flex items-center gap-[16px]'>
-                  <Skeleton className='h-[6px] w-[6px] rounded-[2px]' />
+            <div key={i} className='flex h-[36px] items-center px-4'>
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-2')}>
+                <div className='flex items-center gap-4'>
+                  <Skeleton className='h-[6px] w-[6px] rounded-xs' />
                   <Skeleton className='h-[12px] w-[60px]' />
                 </div>
               </div>
@@ -168,11 +168,11 @@ export function Versions({
                 className={clsx(
                   COLUMN_WIDTHS.ACTIONS,
                   COLUMN_BASE_CLASS,
-                  'flex justify-end gap-[2px]'
+                  'flex justify-end gap-0.5'
                 )}
               >
-                <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
-                <Skeleton className='h-[20px] w-[20px] rounded-[4px]' />
+                <Skeleton className='h-[20px] w-[20px] rounded-sm' />
+                <Skeleton className='h-[20px] w-[20px] rounded-sm' />
               </div>
             </div>
           ))}
@@ -183,15 +183,15 @@ export function Versions({
 
   if (versions.length === 0) {
     return (
-      <div className='flex h-[120px] items-center justify-center rounded-[4px] border border-[var(--border)] text-[#8D8D8D] text-[13px]'>
+      <div className='flex h-[120px] items-center justify-center rounded-sm border border-[var(--border)] text-[var(--text-placeholder)] text-small'>
         No deployments yet
       </div>
     )
   }
 
   return (
-    <div className='overflow-hidden rounded-[4px] border border-[var(--border)]'>
-      <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-[16px]'>
+    <div className='overflow-hidden rounded-sm border border-[var(--border)]'>
+      <div className='flex h-[30px] items-center bg-[var(--surface-1)] px-4'>
         <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS)}>
           <span className={HEADER_TEXT_CLASS}>Version</span>
         </div>
@@ -212,18 +212,18 @@ export function Versions({
             <div
               key={v.id}
               className={clsx(
-                'flex h-[36px] cursor-pointer items-center px-[16px] transition-colors duration-100',
+                'flex h-[36px] cursor-pointer items-center px-4 transition-colors duration-100',
                 isSelected
-                  ? 'bg-[var(--accent)]/10 hover:bg-[var(--accent)]/15'
-                  : 'hover:bg-[var(--surface-6)] dark:hover:bg-[var(--border)]'
+                  ? 'bg-[var(--accent)]/10 hover-hover:bg-[var(--accent)]/15'
+                  : 'hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--border)]'
               )}
               onClick={() => handleRowClick(v.version)}
             >
-              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-[8px]')}>
-                <div className='flex items-center gap-[16px]'>
+              <div className={clsx(COLUMN_WIDTHS.VERSION, COLUMN_BASE_CLASS, 'min-w-0 pr-2')}>
+                <div className='flex items-center gap-4'>
                   <div
                     className={clsx(
-                      'h-[6px] w-[6px] shrink-0 rounded-[2px]',
+                      'h-[6px] w-[6px] shrink-0 rounded-xs',
                       v.isActive ? 'bg-[#4ADE80]' : 'bg-[#B7B7B7]'
                     )}
                     title={v.isActive ? 'Live' : 'Inactive'}
@@ -245,7 +245,7 @@ export function Versions({
                       onClick={(e) => e.stopPropagation()}
                       onBlur={() => handleSaveRename(v.version)}
                       className={clsx(
-                        'w-full border-0 bg-transparent p-0 font-medium text-[12px] leading-5 outline-none',
+                        'w-full border-0 bg-transparent p-0 font-medium text-caption leading-5 outline-none',
                         'text-[var(--text-primary)] focus:outline-none focus:ring-0'
                       )}
                       maxLength={100}
@@ -257,7 +257,7 @@ export function Versions({
                     />
                   ) : (
                     <span
-                      className={clsx('block flex items-center gap-[4px] truncate', ROW_TEXT_CLASS)}
+                      className={clsx('block flex items-center gap-1 truncate', ROW_TEXT_CLASS)}
                     >
                       <span className='truncate'>{v.name || `v${v.version}`}</span>
                       {v.isActive && <span className='text-[var(--text-tertiary)]'> (live)</span>}
@@ -289,7 +289,7 @@ export function Versions({
                 className={clsx(
                   COLUMN_WIDTHS.ACTIONS,
                   COLUMN_BASE_CLASS,
-                  'flex items-center justify-end gap-[2px]'
+                  'flex items-center justify-end gap-0.5'
                 )}
                 onClick={(e) => e.stopPropagation()}
               >
@@ -300,7 +300,7 @@ export function Versions({
                       className={clsx(
                         '!p-1',
                         !v.description &&
-                          'text-[var(--text-quaternary)] hover:text-[var(--text-tertiary)]'
+                          'text-[var(--text-quaternary)] hover-hover:text-[var(--text-tertiary)]'
                       )}
                       onClick={() => handleOpenDescriptionModal(v.version)}
                     >
@@ -309,9 +309,9 @@ export function Versions({
                   </Tooltip.Trigger>
                   <Tooltip.Content side='top' className='max-w-[240px]'>
                     {v.description ? (
-                      <p className='line-clamp-3 text-[12px]'>{v.description}</p>
+                      <p className='line-clamp-3 text-caption'>{v.description}</p>
                     ) : (
-                      <p className='text-[12px]'>Add description</p>
+                      <p className='text-caption'>Add description</p>
                     )}
                   </Tooltip.Content>
                 </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
index cd46688c516..695d6c95cf5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/general/general.tsx
@@ -125,18 +125,18 @@ export function GeneralDeploy({
 
   if (showLoadingSkeleton) {
     return (
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <div className='relative mb-[6.5px]'>
             <Skeleton className='h-[16px] w-[90px]' />
           </div>
-          <div className='h-[260px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+          <div className='h-[260px] w-full overflow-hidden rounded-sm border border-[var(--border)]'>
             <Skeleton className='h-full w-full rounded-none' />
           </div>
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[60px]' />
-          <div className='h-[120px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'>
+          <div className='h-[120px] w-full overflow-hidden rounded-sm border border-[var(--border)]'>
             <Skeleton className='h-full w-full rounded-none' />
           </div>
         </div>
@@ -146,10 +146,10 @@ export function GeneralDeploy({
 
   return (
     <>
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <div className='relative mb-[6.5px]'>
-            <Label className='block truncate pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='block truncate pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {previewMode === 'selected' && selectedVersionInfo
                 ? selectedVersionInfo.name || `v${selectedVersion}`
                 : 'Live Workflow'}
@@ -173,7 +173,7 @@ export function GeneralDeploy({
           </div>
 
           <div
-            className='relative h-[260px] w-full overflow-hidden rounded-[4px] border border-[var(--border)]'
+            className='relative h-[260px] w-full overflow-hidden rounded-sm border border-[var(--border)]'
             onWheelCapture={(e) => {
               if (e.ctrlKey || e.metaKey) return
               e.stopPropagation()
@@ -197,7 +197,7 @@ export function GeneralDeploy({
                       type='button'
                       variant='default'
                       onClick={() => setShowExpandedPreview(true)}
-                      className='absolute right-[8px] bottom-[8px] z-10 h-[28px] w-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-3)]'
+                      className='absolute right-[8px] bottom-2 z-10 h-[28px] w-[28px] cursor-pointer border border-[var(--border)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-3)]'
                     >
                       <Expand className='h-[14px] w-[14px]' />
                     </Button>
@@ -206,7 +206,7 @@ export function GeneralDeploy({
                 </Tooltip.Root>
               </>
             ) : (
-              <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+              <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
                 Deploy your workflow to see a preview
               </div>
             )}
@@ -214,7 +214,7 @@ export function GeneralDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Versions
           </Label>
           <Versions
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
index 0a95d9fd6be..88763fb4fe5 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/mcp/mcp.tsx
@@ -435,7 +435,7 @@ export function McpDeploy({
 
   if (!isDeployed) {
     return (
-      <div className='flex h-full items-center justify-center text-[13px] text-[var(--text-muted)]'>
+      <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-small'>
         Deploy your workflow first to add it as an MCP tool.
       </div>
     )
@@ -444,18 +444,18 @@ export function McpDeploy({
   if (isLoadingServers) {
     return (
       <div className='-mx-1 space-y-4 px-1'>
-        <div className='space-y-[12px]'>
+        <div className='space-y-3'>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[70px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[80px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
           <div>
             <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-            <Skeleton className='h-[34px] w-full rounded-[4px]' />
+            <Skeleton className='h-[34px] w-full rounded-sm' />
           </div>
         </div>
       </div>
@@ -465,7 +465,7 @@ export function McpDeploy({
   if (servers.length === 0) {
     return (
       <div className='flex h-full flex-col items-center justify-center gap-3'>
-        <p className='text-[13px] text-[var(--text-muted)]'>
+        <p className='text-[var(--text-muted)] text-small'>
           Create an MCP Server in Settings → MCP Servers first.
         </p>
         <Button
@@ -481,7 +481,7 @@ export function McpDeploy({
   return (
     <form
       id='mcp-deploy-form'
-      className='-mx-1 space-y-[12px] px-1'
+      className='-mx-1 space-y-3 px-1'
       onSubmit={(e) => {
         e.preventDefault()
         handleSave()
@@ -501,7 +501,7 @@ export function McpDeploy({
       ))}
 
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Tool name
         </Label>
         <Input
@@ -509,13 +509,13 @@ export function McpDeploy({
           onChange={(e) => setToolName(e.target.value)}
           placeholder='e.g., book_flight'
         />
-        <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+        <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
           Use lowercase letters, numbers, and underscores only
         </p>
       </div>
 
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Description
         </Label>
         <Textarea
@@ -528,18 +528,18 @@ export function McpDeploy({
 
       {inputFormat.length > 0 && (
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Parameters ({inputFormat.length})
           </Label>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             {inputFormat.map((field) => (
               <div
                 key={field.name}
-                className='overflow-hidden rounded-[4px] border border-[var(--border-1)]'
+                className='overflow-hidden rounded-sm border border-[var(--border-1)]'
               >
-                <div className='flex items-center justify-between bg-[var(--surface-4)] px-[10px] py-[5px]'>
-                  <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                    <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+                <div className='flex items-center justify-between bg-[var(--surface-4)] px-2.5 py-[5px]'>
+                  <div className='flex min-w-0 flex-1 items-center gap-2'>
+                    <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
                       {field.name}
                     </span>
                     <Badge variant='type' size='sm'>
@@ -547,9 +547,9 @@ export function McpDeploy({
                     </Badge>
                   </div>
                 </div>
-                <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                  <div className='flex flex-col gap-[6px]'>
-                    <Label className='text-[13px]'>Description</Label>
+                <div className='rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Description</Label>
                     <Input
                       value={parameterDescriptions[field.name] || ''}
                       onChange={(e) =>
@@ -569,7 +569,7 @@ export function McpDeploy({
       )}
 
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           Servers
         </Label>
         <Combobox
@@ -586,16 +586,16 @@ export function McpDeploy({
           }
         />
         {!toolName.trim() && (
-          <p className='mt-[6.5px] text-[11px] text-[var(--text-secondary)]'>
+          <p className='mt-[6.5px] text-[var(--text-secondary)] text-xs'>
             Enter a tool name to select servers
           </p>
         )}
       </div>
 
       {saveErrors.length > 0 && (
-        <div className='mt-[6.5px] flex flex-col gap-[2px]'>
+        <div className='mt-[6.5px] flex flex-col gap-0.5'>
           {saveErrors.map((error) => (
-            <p key={error} className='text-[12px] text-[var(--text-error)]'>
+            <p key={error} className='text-[var(--text-error)] text-caption'>
               {error}
             </p>
           ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
index ce03a8a93b7..9a749b7d612 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/components/deploy-modal/components/template/template.tsx
@@ -205,26 +205,26 @@ export function TemplateDeploy({
 
   if (isLoadingTemplate) {
     return (
-      <div className='space-y-[12px]'>
+      <div className='space-y-3'>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[40px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[76px]' />
-          <Skeleton className='h-[160px] w-full rounded-[4px]' />
+          <Skeleton className='h-[160px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[50px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
         <div>
           <Skeleton className='mb-[6.5px] h-[16px] w-[32px]' />
-          <Skeleton className='h-[34px] w-full rounded-[4px]' />
+          <Skeleton className='h-[34px] w-full rounded-sm' />
         </div>
       </div>
     )
@@ -232,15 +232,15 @@ export function TemplateDeploy({
 
   return (
     <div className='space-y-4'>
-      <form id='template-deploy-form' onSubmit={handleSubmit} className='space-y-[12px]'>
+      <form id='template-deploy-form' onSubmit={handleSubmit} className='space-y-3'>
         {existingTemplate?.state && (
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               Live Template
             </Label>
             <div
               ref={previewContainerRef}
-              className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-[4px] border border-[var(--border)]'
+              className='[&_*]:!cursor-default relative h-[260px] w-full cursor-default overflow-hidden rounded-sm border border-[var(--border)]'
               onWheelCapture={(e) => {
                 if (e.ctrlKey || e.metaKey) return
                 e.stopPropagation()
@@ -252,7 +252,7 @@ export function TemplateDeploy({
         )}
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Name <span className='text-[var(--text-error)]'>*</span>
           </Label>
           <Input
@@ -264,7 +264,7 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Tagline
           </Label>
           <Input
@@ -277,7 +277,7 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Description
           </Label>
           <Textarea
@@ -290,12 +290,12 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Creator <span className='text-[var(--text-error)]'>*</span>
           </Label>
           {creatorProfiles.length === 0 && !loadingCreators ? (
-            <div className='space-y-[8px]'>
-              <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <div className='space-y-2'>
+              <p className='text-[var(--text-tertiary)] text-caption'>
                 A creator profile is required to publish templates.
               </p>
               <Button
@@ -304,7 +304,7 @@ export function TemplateDeploy({
                 onClick={() => {
                   navigateToSettings({ section: 'template-profile' })
                 }}
-                className='gap-[8px]'
+                className='gap-2'
               >
                 <span>Create Template Profile</span>
               </Button>
@@ -327,7 +327,7 @@ export function TemplateDeploy({
         </div>
 
         <div>
-          <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+          <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
             Tags
           </Label>
           <TagInput
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
index b04f2ed5ccd..3285337ab96 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/deploy/deploy.tsx
@@ -90,7 +90,7 @@ export function Deploy({ activeWorkflowId, userPermissions, className }: DeployP
         <Tooltip.Trigger asChild>
           <span>
             <Button
-              className='h-[30px] gap-[6px] px-[10px]'
+              className='h-[30px] gap-1.5 px-2.5'
               variant={
                 isRegistryLoading ? 'active' : changeDetected || !isDeployed ? 'tertiary' : 'active'
               }
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
index f73b4965d2a..38b79c98e97 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/components/field-item/field-item.tsx
@@ -78,7 +78,7 @@ export function FieldItem({
       onDragStart={handleDragStart}
       onClick={handleClick}
       className={clsx(
-        'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
+        'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
         hasChildren && 'cursor-pointer'
       )}
     >
@@ -90,7 +90,7 @@ export function FieldItem({
       >
         {field.name}
       </span>
-      <Badge className='flex-shrink-0 rounded-[4px] px-[6px] py-[1px] font-mono text-[11px]'>
+      <Badge className='flex-shrink-0 rounded-sm px-1.5 py-[1px] font-mono text-xs'>
         {field.type}
       </Badge>
       {hasChildren && (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
index b86a912105d..e2e5f0e8cb9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/connection-blocks/connection-blocks.tsx
@@ -79,18 +79,18 @@ function ConnectionItem({
   }
 
   return (
-    <div className='mb-[2px] last:mb-0' ref={connectionRef}>
+    <div className='mb-0.5 last:mb-0' ref={connectionRef}>
       <div
         draggable
         onDragStart={(e) => onConnectionDragStart(e, connection)}
         className={clsx(
-          'group flex h-[26px] cursor-grab items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
+          'group flex h-[26px] cursor-grab items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
           hasFields && 'cursor-pointer'
         )}
         onClick={() => hasFields && onToggleExpand(connection.id)}
       >
         <div
-          className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+          className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
           style={{ background: bgColor }}
         >
           {Icon && (
@@ -122,8 +122,8 @@ function ConnectionItem({
       </div>
 
       {isExpanded && hasFields && (
-        <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-          <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+        <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+          <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
           {renderFieldTree(fields, '', 0, connection)}
         </div>
       )}
@@ -262,8 +262,8 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
               onToggleExpand={(p) => toggleFieldExpansion(connection.id, p)}
             />
             {hasChildren && expanded && (
-              <div className='relative mt-[2px] ml-[6px] space-y-[2px] pl-[10px]'>
-                <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+              <div className='relative mt-0.5 ml-1.5 space-y-0.5 pl-2.5'>
+                <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                 {renderFieldTree(field.children!, fieldPath, level + 1, connection)}
               </div>
             )}
@@ -279,7 +279,7 @@ export function ConnectionBlocks({ connections, currentBlockId }: ConnectionBloc
   }
 
   return (
-    <div ref={scrollContainerRef} className='space-y-[2px]'>
+    <div ref={scrollContainerRef} className='space-y-0.5'>
       {connections.map((connection) => {
         const mergedSubBlocks = getMergedSubBlocks(connection.id)
         const sourceBlock = blocks[connection.id]
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
index af7d63c168c..f288eec621e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/code/code.tsx
@@ -733,8 +733,8 @@ export const Code = memo(function Code({
           className={cn(
             'text-right text-xs tabular-nums leading-[21px]',
             isActive
-              ? 'text-[var(--text-primary)] dark:text-[#eeeeee]'
-              : 'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+              ? 'text-[var(--text-primary)] dark:text-[var(--code-foreground)]'
+              : 'text-[var(--text-muted)] dark:text-[var(--code-line-number)]'
           )}
         >
           {lineNumber}
@@ -759,7 +759,7 @@ export const Code = memo(function Code({
           key={'1-0'}
           className={cn(
             'text-right text-xs tabular-nums leading-[21px]',
-            'text-[var(--text-muted)] dark:text-[#a8a8a8]'
+            'text-[var(--text-muted)] dark:text-[var(--code-line-number)]'
           )}
         >
           1
@@ -782,7 +782,7 @@ export const Code = memo(function Code({
           className={cn(
             'h-8 w-8 p-0',
             'text-muted-foreground/60 transition-all duration-200',
-            'hover:scale-105 hover:bg-muted/50 hover:text-foreground',
+            'hover-hover:scale-105 hover-hover:bg-muted/50 hover-hover:text-foreground',
             'active:scale-95'
           )}
           aria-label='Copy code'
@@ -816,7 +816,7 @@ export const Code = memo(function Code({
                 onClick={isPromptVisible ? hidePromptInline : showPromptInline}
                 disabled={isAiLoading || isAiStreaming}
                 aria-label='Generate code with AI'
-                className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow'
+                className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
               >
                 <Wand2 className='h-4 w-4' />
               </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
index d28bf328837..66d4de3c082 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/combobox/combobox.tsx
@@ -453,7 +453,7 @@ export const ComboBox = memo(function ComboBox({
     const displayLabel = inputValue
     return (
       <div className='flex w-full items-center truncate [scrollbar-width:none]'>
-        {SelectedIcon && <SelectedIcon className='mr-[8px] h-3 w-3 flex-shrink-0' />}
+        {SelectedIcon && <SelectedIcon className='mr-2 h-3 w-3 flex-shrink-0' />}
         <div className='truncate'>
           {formatDisplayText(displayLabel, {
             accessiblePrefixes,
@@ -568,7 +568,7 @@ export const ComboBox = memo(function ComboBox({
               inputRef={ref as React.RefObject<HTMLInputElement>}
               filterOptions
               searchable={config.searchable}
-              className={cn('allow-scroll overflow-x-auto', selectedOptionIcon && 'pl-[28px]')}
+              className={cn('allow-scroll overflow-x-auto', selectedOptionIcon && 'pl-7')}
               inputProps={comboboxInputProps}
               isLoading={isLoadingOptions}
               error={fetchError}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
index 7f2a1d05468..6bd6837769c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/condition-input/condition-input.tsx
@@ -830,26 +830,26 @@ export function ConditionInput({
   }
 
   return (
-    <div className='space-y-[8px]' ref={containerRef}>
+    <div className='space-y-2' ref={containerRef}>
       {conditionalBlocks.map((block, index) => (
         <div
           key={block.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[#1F1F1F]'
+          className='group relative overflow-visible rounded-sm border border-[var(--border-1)] bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'
         >
           <div
             className={cn(
-              'flex items-center justify-between overflow-hidden bg-transparent px-[10px] py-[5px]',
+              'flex items-center justify-between overflow-hidden bg-transparent px-2.5 py-[5px]',
               isRouterMode
                 ? 'rounded-t-[4px] border-[var(--border-1)] border-b'
                 : block.title === 'else'
-                  ? 'rounded-[4px] border-0'
+                  ? 'rounded-sm border-0'
                   : 'rounded-t-[4px] border-[var(--border-1)] border-b'
             )}
           >
-            <span className='font-medium text-[14px] text-[var(--text-tertiary)]'>
+            <span className='font-medium text-[var(--text-tertiary)] text-sm'>
               {isRouterMode ? `Route ${index + 1}` : block.title}
             </span>
-            <div className='flex items-center gap-[8px]'>
+            <div className='flex items-center gap-2'>
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
                   <Button
@@ -914,7 +914,7 @@ export function ConditionInput({
                     disabled={
                       isPreview || disabled || conditionalBlocks.length <= (isRouterMode ? 1 : 2)
                     }
-                    className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+                    className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
                   >
                     <Trash className='h-[14px] w-[14px]' />
                     <span className='sr-only'>Delete Block</span>
@@ -992,7 +992,7 @@ export function ConditionInput({
               {/* Custom resize handle */}
               {!isPreview && !disabled && (
                 <div
-                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
+                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                   onMouseDown={(e) => startRouterResize(e, block.id)}
                   onDragStart={(e) => {
                     e.preventDefault()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
index acb70f0d49d..18b38c65161 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/components/oauth-required-modal.tsx
@@ -131,35 +131,35 @@ export function OAuthRequiredModal({
       <ModalContent size='md'>
         <ModalHeader>Connect {providerName}</ModalHeader>
         <ModalBody>
-          <div className='flex flex-col gap-[16px]'>
-            <div className='flex items-center gap-[14px]'>
-              <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-[8px] bg-[var(--surface-5)]'>
+          <div className='flex flex-col gap-4'>
+            <div className='flex items-center gap-3.5'>
+              <div className='flex h-[40px] w-[40px] flex-shrink-0 items-center justify-center rounded-lg bg-[var(--surface-5)]'>
                 <ProviderIcon className='h-[18px] w-[18px]' />
               </div>
               <div className='flex-1'>
-                <p className='font-medium text-[13px] text-[var(--text-primary)]'>
+                <p className='font-medium text-[var(--text-primary)] text-small'>
                   Connect your {providerName} account
                 </p>
-                <p className='text-[12px] text-[var(--text-tertiary)]'>
+                <p className='text-[var(--text-tertiary)] text-caption'>
                   The "{toolName}" tool requires access to your account
                 </p>
               </div>
             </div>
 
             {displayScopes.length > 0 && (
-              <div className='rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)]'>
-                <div className='border-[var(--border-1)] border-b px-[14px] py-[10px]'>
-                  <h4 className='font-medium text-[12px] text-[var(--text-primary)]'>
+              <div className='rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)]'>
+                <div className='border-[var(--border-1)] border-b px-3.5 py-2.5'>
+                  <h4 className='font-medium text-[var(--text-primary)] text-caption'>
                     Permissions requested
                   </h4>
                 </div>
-                <ul className='max-h-[330px] space-y-[10px] overflow-y-auto px-[14px] py-[12px]'>
+                <ul className='max-h-[330px] space-y-2.5 overflow-y-auto px-3.5 py-3'>
                   {displayScopes.map((scope) => (
-                    <li key={scope} className='flex items-start gap-[10px]'>
-                      <div className='mt-[2px] flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
+                    <li key={scope} className='flex items-start gap-2.5'>
+                      <div className='mt-0.5 flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                         <Check className='h-[10px] w-[10px] text-[var(--text-primary)]' />
                       </div>
-                      <div className='flex flex-1 items-center gap-[8px] text-[12px] text-[var(--text-primary)]'>
+                      <div className='flex flex-1 items-center gap-2 text-[var(--text-primary)] text-caption'>
                         <span>{getScopeDescription(scope)}</span>
                         {newScopesSet.has(scope) && (
                           <Badge variant='amber' size='sm'>
@@ -173,7 +173,7 @@ export function OAuthRequiredModal({
               </div>
             )}
 
-            {error && <p className='text-[12px] text-[var(--text-error)]'>{error}</p>}
+            {error && <p className='text-[var(--text-error)] text-caption'>{error}</p>}
           </div>
         </ModalBody>
         <ModalFooter>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
index 43b0ee36311..9f06429f70e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/credential-selector/credential-selector.tsx
@@ -384,19 +384,19 @@ export function CredentialSelector({
         filterOptions={true}
         isLoading={credentialsLoading}
         overlayContent={overlayContent}
-        className={overlayContent ? 'pl-[28px]' : ''}
+        className={overlayContent ? 'pl-7' : ''}
       />
 
       {needsUpdate && (
-        <div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
-          <div className='flex items-center font-medium text-[12px]'>
-            <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+        <div className='mt-2 flex flex-col gap-1 rounded-sm border bg-[var(--surface-2)] px-2 py-1.5'>
+          <div className='flex items-center font-medium text-caption'>
+            <span className='mr-1.5 inline-block h-[6px] w-[6px] rounded-xs bg-amber-500' />
             Additional permissions required
           </div>
           <Button
             variant='active'
             onClick={() => setShowOAuthModal(true)}
-            className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+            className='w-full px-2 py-1 font-medium text-caption'
           >
             Update access
           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
index 405599aa9a5..067b2c29753 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/document-tag-entry/document-tag-entry.tsx
@@ -223,7 +223,7 @@ export function DocumentTagEntry({
 
   if (!isLoading && tagDefinitions.length === 0 && knowledgeBaseId) {
     return (
-      <div className='flex h-32 items-center justify-center rounded-[4px] border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[#1F1F1F]'>
+      <div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
         <div className='text-center'>
           <p className='font-medium text-[var(--text-secondary)] text-sm'>
             No tags defined for this knowledge base
@@ -242,11 +242,11 @@ export function DocumentTagEntry({
    */
   const renderTagHeader = (tag: DocumentTag, index: number) => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => toggleCollapse(tag.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {tag.collapsed ? tag.tagName || `Tag ${index + 1}` : `Tag ${index + 1}`}
         </span>
         {tag.collapsed && tag.tagName && (
@@ -255,7 +255,7 @@ export function DocumentTagEntry({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button
           variant='ghost'
           onClick={addTag}
@@ -269,7 +269,7 @@ export function DocumentTagEntry({
           variant='ghost'
           onClick={() => removeTag(tag.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Tag</span>
@@ -327,7 +327,7 @@ export function DocumentTagEntry({
             if (el) overlayRefs.current[cellKey] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
         >
@@ -369,9 +369,9 @@ export function DocumentTagEntry({
     }))
 
     return (
-      <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Tag</Label>
+      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Tag</Label>
           <Combobox
             options={tagOptions}
             value={tag.tagName}
@@ -381,8 +381,8 @@ export function DocumentTagEntry({
           />
         </div>
 
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Value</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Value</Label>
           {renderValueInput(tag)}
         </div>
       </div>
@@ -390,13 +390,13 @@ export function DocumentTagEntry({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {tags.map((tag, index) => (
         <div
           key={tag.id}
           data-tag-id={tag.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-1)]',
+            'rounded-sm border border-[var(--border-1)]',
             tag.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
index 8427ba71e71..cf2fadff44f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/dropdown/dropdown.tsx
@@ -463,10 +463,7 @@ export const Dropdown = memo(function Dropdown({
     return (
       <div className='flex items-center gap-1 overflow-hidden whitespace-nowrap'>
         {multiValues.map((selectedValue: string) => (
-          <Badge
-            key={selectedValue}
-            className='shrink-0 rounded-[8px] py-[4px] text-[12px] leading-none'
-          >
+          <Badge key={selectedValue} className='shrink-0 rounded-lg py-1 text-caption leading-none'>
             {(optionMap.get(selectedValue) || selectedValue).toLowerCase()}
           </Badge>
         ))}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
index f4bc3f68ff1..447752868e7 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/eval-input/eval-input.tsx
@@ -127,11 +127,9 @@ export function EvalInput({
   }
 
   const renderMetricHeader = (metric: EvalMetric, index: number) => (
-    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-[10px] py-[5px]'>
-      <span className='font-medium text-[14px] text-[var(--text-tertiary)]'>
-        Metric {index + 1}
-      </span>
-      <div className='flex items-center gap-[8px]'>
+    <div className='flex items-center justify-between overflow-hidden rounded-t-[4px] border-[var(--border-1)] border-b bg-[var(--surface-4)] px-2.5 py-[5px]'>
+      <span className='font-medium text-[var(--text-tertiary)] text-sm'>Metric {index + 1}</span>
+      <div className='flex items-center gap-2'>
         <Tooltip.Root key={`add-${metric.id}`}>
           <Tooltip.Trigger asChild>
             <Button
@@ -153,7 +151,7 @@ export function EvalInput({
               variant='ghost'
               onClick={() => removeMetric(metric.id)}
               disabled={isPreview || disabled || metrics.length === 1}
-              className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+              className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
             >
               <Trash className='h-[14px] w-[14px]' />
               <span className='sr-only'>Delete Metric</span>
@@ -166,18 +164,18 @@ export function EvalInput({
   )
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {metrics.map((metric, index) => (
         <div
           key={metric.id}
           data-metric-id={metric.id}
-          className='group relative overflow-visible rounded-[4px] border border-[var(--border-1)]'
+          className='group relative overflow-visible rounded-sm border border-[var(--border-1)]'
         >
           {renderMetricHeader(metric, index)}
 
-          <div className='flex flex-col gap-[8px] border-[var(--border-1)] px-[10px] pt-[6px] pb-[10px]'>
-            <div key={`name-${metric.id}`} className='flex flex-col gap-[6px]'>
-              <Label className='text-[13px]'>Name</Label>
+          <div className='flex flex-col gap-2 border-[var(--border-1)] px-2.5 pt-1.5 pb-2.5'>
+            <div key={`name-${metric.id}`} className='flex flex-col gap-1.5'>
+              <Label className='text-small'>Name</Label>
               <Input
                 name='name'
                 value={metric.name}
@@ -187,8 +185,8 @@ export function EvalInput({
               />
             </div>
 
-            <div key={`description-${metric.id}`} className='flex flex-col gap-[6px]'>
-              <Label className='text-[13px]'>Description</Label>
+            <div key={`description-${metric.id}`} className='flex flex-col gap-1.5'>
+              <Label className='text-small'>Description</Label>
               <div className='relative'>
                 {(() => {
                   const fieldState = inputController.fieldHelpers.getFieldState(metric.id)
@@ -227,7 +225,7 @@ export function EvalInput({
                           if (el) descriptionOverlayRefs.current[metric.id] = el
                         }}
                         className={cn(
-                          'absolute inset-0 overflow-auto bg-transparent px-[8px] py-[8px] font-medium font-sans text-[#eeeeee] text-sm',
+                          'absolute inset-0 overflow-auto bg-transparent px-2 py-2 font-medium font-sans text-[var(--code-foreground)] text-sm',
                           !(isPreview || disabled) && 'pointer-events-none'
                         )}
                       >
@@ -258,9 +256,9 @@ export function EvalInput({
               </div>
             </div>
 
-            <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-[8px]'>
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='text-[13px]'>Min Value</Label>
+            <div key={`range-${metric.id}`} className='grid grid-cols-2 gap-2'>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='text-small'>Min Value</Label>
                 <Input
                   type='text'
                   value={metric.range.min}
@@ -272,8 +270,8 @@ export function EvalInput({
                   name='eval-range-min'
                 />
               </div>
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='text-[13px]'>Max Value</Label>
+              <div className='flex flex-col gap-1.5'>
+                <Label className='text-small'>Max Value</Label>
                 <Input
                   type='text'
                   value={metric.range.max}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index b46467aa3b5..466719a1b39 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -124,7 +124,7 @@ function SingleFileSelector({
         {isDeleting ? (
           <div className='h-4 w-4 animate-spin rounded-full border-[1.5px] border-current border-t-transparent' />
         ) : (
-          <X className='h-4 w-4 opacity-50 hover:opacity-100' />
+          <X className='h-4 w-4 opacity-50 hover-hover:opacity-100' />
         )}
       </Button>
     </div>
@@ -553,9 +553,9 @@ export function FileUpload({
     return (
       <div
         key={fileKey}
-        className='relative rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover:bg-[var(--border-1)]'
+        className='relative rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:bg-[var(--surface-5)] dark:hover-hover:bg-[var(--border-1)]'
       >
-        <div className='truncate pr-[24px] text-sm' title={file.name}>
+        <div className='truncate pr-6 text-sm' title={file.name}>
           <span className='text-[var(--text-primary)]'>{truncateMiddle(file.name)}</span>
           <span className='ml-2 text-[var(--text-muted)]'>({formatFileSize(file.size)})</span>
         </div>
@@ -580,7 +580,7 @@ export function FileUpload({
     return (
       <div
         key={file.id}
-        className='flex items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] dark:bg-[var(--surface-5)]'
+        className='flex items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 dark:bg-[var(--surface-5)]'
       >
         <div className='flex-1 truncate pr-2 text-sm'>
           <span className='text-[var(--text-primary)]'>{file.name}</span>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
index a1894292b25..9bb08d4ebb8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/components/filter-rule-row.tsx
@@ -81,11 +81,11 @@ export function FilterRuleRow({
 
   const renderHeader = () => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => onToggleCollapse(rule.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {rule.collapsed && rule.column ? getColumnLabel(rule.column) : `Condition ${index + 1}`}
         </span>
         {rule.collapsed && rule.column && (
@@ -94,7 +94,7 @@ export function FilterRuleRow({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add Condition</span>
@@ -103,7 +103,7 @@ export function FilterRuleRow({
           variant='ghost'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Condition</span>
@@ -138,7 +138,7 @@ export function FilterRuleRow({
       <div
         ref={overlayRef}
         className={cn(
-          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+          'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
           !isReadOnly && 'pointer-events-none'
         )}
       >
@@ -165,10 +165,10 @@ export function FilterRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
+    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
       {index > 0 && (
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Logic</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Logic</Label>
           <Combobox
             options={logicalOptions}
             value={rule.logicalOperator}
@@ -178,8 +178,8 @@ export function FilterRuleRow({
         </div>
       )}
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Column</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Column</Label>
         <Combobox
           options={columns}
           value={rule.column}
@@ -189,8 +189,8 @@ export function FilterRuleRow({
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Operator</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Operator</Label>
         <Combobox
           options={comparisonOptions}
           value={rule.operator}
@@ -200,8 +200,8 @@ export function FilterRuleRow({
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Value</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Value</Label>
         {renderValueInput()}
       </div>
     </div>
@@ -211,7 +211,7 @@ export function FilterRuleRow({
     <div
       data-filter-id={rule.id}
       className={cn(
-        'rounded-[4px] border border-[var(--border-1)]',
+        'rounded-sm border border-[var(--border-1)]',
         rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
index 4703b7f41a1..147b9f3f6c3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/filter-builder/filter-builder.tsx
@@ -92,7 +92,7 @@ export function FilterBuilder({
   )
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {rules.map((rule, index) => (
         <FilterRuleRow
           key={rule.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
index d9096c36f32..5f93afb87e4 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/grouped-checkbox-list/grouped-checkbox-list.tsx
@@ -107,8 +107,8 @@ export function GroupedCheckboxList({
           variant='ghost'
           disabled={disabled}
           className={cn(
-            'flex w-full cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
-            'hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]'
+            'flex w-full cursor-pointer items-center justify-between rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-[var(--text-primary)] text-sm outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:bg-[var(--surface-5)]',
+            'hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]'
           )}
         >
           <span className='flex flex-1 items-center gap-2 truncate text-[var(--text-muted)]'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
index 73563ba9bf9..2f6945a48be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/input-mapping/input-mapping.tsx
@@ -117,7 +117,7 @@ export function InputMapping({
 
   if (!selectedWorkflowId) {
     return (
-      <div className='flex h-32 items-center justify-center rounded-[4px] border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[#1F1F1F]'>
+      <div className='flex h-32 items-center justify-center rounded-sm border border-[var(--border-1)] border-dashed bg-[var(--surface-3)] dark:bg-[var(--code-bg)]'>
         <div className='text-center'>
           <p className='font-medium text-[var(--text-secondary)] text-sm'>No workflow selected</p>
           <p className='mt-1 text-[var(--text-muted)] text-xs'>
@@ -130,7 +130,7 @@ export function InputMapping({
 
   if (isLoading) {
     return (
-      <div className='space-y-[8px]'>
+      <div className='space-y-2'>
         <InputMappingField
           key='loading'
           fieldName='loading...'
@@ -154,7 +154,7 @@ export function InputMapping({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {childInputFields.map((field) => (
         <InputMappingField
           key={field.name}
@@ -218,16 +218,16 @@ function InputMappingField({
   return (
     <div
       className={cn(
-        'rounded-[4px] border border-[var(--border-1)]',
+        'rounded-sm border border-[var(--border-1)]',
         collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
       <div
-        className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+        className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
         onClick={onToggleCollapse}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-          <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
+          <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
             {fieldName}
           </span>
           {fieldType && (
@@ -239,9 +239,9 @@ function InputMappingField({
       </div>
 
       {!collapsed && (
-        <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-          <div className='flex flex-col gap-[6px]'>
-            <Label className='text-[13px]'>Value</Label>
+        <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+          <div className='flex flex-col gap-1.5'>
+            <Label className='text-small'>Value</Label>
             <div className='relative'>
               <Input
                 ref={(el) => {
@@ -274,7 +274,7 @@ function InputMappingField({
                   if (el) overlayRefs.current.set(fieldId, el)
                 }}
                 className={cn(
-                  'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                  'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
                   !disabled && 'pointer-events-none'
                 )}
                 style={{ overflowX: 'auto' }}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
index 4f45aee71f3..3e8cd69ef87 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-base-selector/knowledge-base-selector.tsx
@@ -164,15 +164,15 @@ export function KnowledgeBaseSelector({
           {selectedKnowledgeBases.map((kb) => (
             <div
               key={kb.id}
-              className='inline-flex items-center rounded-md border border-[#00B0B0]/20 bg-[#00B0B0]/10 px-2 py-1 text-xs'
+              className='inline-flex items-center rounded-md border border-[var(--brand-knowledge)]/20 bg-[var(--brand-knowledge)]/10 px-2 py-1 text-xs'
             >
-              <PackageSearchIcon className='mr-1 h-3 w-3 text-[#00B0B0]' />
-              <span className='font-medium text-[#00B0B0]'>{kb.name}</span>
+              <PackageSearchIcon className='mr-1 h-3 w-3 text-[var(--brand-knowledge)]' />
+              <span className='font-medium text-[var(--brand-knowledge)]'>{kb.name}</span>
               {!disabled && !isPreview && (
                 <button
                   type='button'
                   onClick={() => handleRemoveKnowledgeBase(kb.id)}
-                  className='ml-1 text-[#00B0B0]/60 hover:text-[#00B0B0]'
+                  className='ml-1 text-[var(--brand-knowledge)]/60 hover-hover:text-[var(--brand-knowledge)]'
                   aria-label={`Remove ${kb.name}`}
                 >
                   <X className='h-3 w-3' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
index 2d36e69de5e..ad3c5478845 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/knowledge-tag-filters/knowledge-tag-filters.tsx
@@ -235,11 +235,11 @@ export function KnowledgeTagFilters({
    */
   const renderFilterHeader = (filter: TagFilter, index: number) => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => toggleCollapse(filter.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {filter.collapsed ? filter.tagName || `Filter ${index + 1}` : `Filter ${index + 1}`}
         </span>
         {filter.collapsed && filter.tagName && (
@@ -248,7 +248,7 @@ export function KnowledgeTagFilters({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={addFilter} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add Filter</span>
@@ -257,7 +257,7 @@ export function KnowledgeTagFilters({
           variant='ghost'
           onClick={() => removeFilter(filter.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Filter</span>
@@ -315,7 +315,7 @@ export function KnowledgeTagFilters({
             if (el) overlayRefs.current[cellKey] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
         >
@@ -360,9 +360,9 @@ export function KnowledgeTagFilters({
     const isBetween = filter.operator === 'between'
 
     return (
-      <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Tag</Label>
+      <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Tag</Label>
           <Combobox
             options={tagOptions}
             value={filter.tagName}
@@ -372,8 +372,8 @@ export function KnowledgeTagFilters({
           />
         </div>
 
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Operator</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Operator</Label>
           <Combobox
             options={operatorOptions}
             value={filter.operator}
@@ -383,8 +383,8 @@ export function KnowledgeTagFilters({
           />
         </div>
 
-        <div className='flex flex-col gap-[6px]'>
-          <Label className='text-[13px]'>Value</Label>
+        <div className='flex flex-col gap-1.5'>
+          <Label className='text-small'>Value</Label>
           {isBetween ? (
             <div className='flex items-center gap-2'>
               <div className='flex-1'>{renderValueInput(filter, 'tagValue')}</div>
@@ -400,13 +400,13 @@ export function KnowledgeTagFilters({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {filters.map((filter, index) => (
         <div
           key={filter.id}
           data-filter-id={filter.id}
           className={cn(
-            'rounded-[4px] border border-[var(--border-1)]',
+            'rounded-sm border border-[var(--border-1)]',
             filter.collapsed ? 'overflow-hidden' : 'overflow-visible'
           )}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
index 406441880f2..c5090e8b2df 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/long-input/long-input.tsx
@@ -347,7 +347,7 @@ export function LongInput({
               <div
                 ref={overlayRef}
                 className={cn(
-                  'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm',
+                  'absolute inset-0 box-border overflow-auto whitespace-pre-wrap break-words border border-transparent bg-transparent px-2 py-2 font-medium font-sans text-sm',
                   (isPreview || disabled) && 'opacity-50',
                   !(isPreview || disabled) && 'pointer-events-none'
                 )}
@@ -377,7 +377,7 @@ export function LongInput({
                     }
                     disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
                     aria-label='Generate content with AI'
-                    className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow'
+                    className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
                   >
                     <Wand2 className='h-4 w-4' />
                   </Button>
@@ -387,7 +387,7 @@ export function LongInput({
               {/* Custom resize handle */}
               {!wandHook.isStreaming && (
                 <div
-                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
+                  className='absolute right-1 bottom-1 flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                   onMouseDown={startResize}
                   onDragStart={(e) => {
                     e.preventDefault()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
index aabf0c7f43f..d197ba041da 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/mcp-dynamic-args/mcp-dynamic-args.tsx
@@ -344,10 +344,10 @@ export function McpDynamicArgs({
 
             return (
               <div key={paramName} className='subblock-row'>
-                <div className='subblock-content flex flex-col gap-[10px]'>
+                <div className='subblock-content flex flex-col gap-2.5'>
                   {showLabel && (
-                    <div className='flex items-center justify-between gap-[6px] pl-[2px]'>
-                      <Label className='flex items-baseline gap-[6px] whitespace-nowrap'>
+                    <div className='flex items-center justify-between gap-1.5 pl-0.5'>
+                      <Label className='flex items-baseline gap-1.5 whitespace-nowrap'>
                         {formatParameterLabel(paramName)}
                         {toolSchema.required?.includes(paramName) && (
                           <span className='ml-0.5'>*</span>
@@ -358,7 +358,7 @@ export function McpDynamicArgs({
                   {renderParameterInput(paramName, paramSchema as any)}
                 </div>
                 {showDivider && (
-                  <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                  <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                     <div
                       className='h-[1.25px]'
                       style={{
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index 69ed53a5c0b..7274f8fc7ed 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -523,12 +523,12 @@ export function MessagesInput({
   }, [currentMessages.length])
 
   return (
-    <div className='flex w-full flex-col gap-[10px]'>
+    <div className='flex w-full flex-col gap-2.5'>
       {currentMessages.map((message, index) => (
         <div
           key={`message-${index}`}
           className={cn(
-            'relative flex w-full flex-col rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
+            'relative flex w-full flex-col rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] transition-colors dark:bg-[var(--surface-5)]',
             disabled && 'opacity-50'
           )}
         >
@@ -567,7 +567,7 @@ export function MessagesInput({
               <>
                 {/* Header with role label and add button */}
                 <div
-                  className='flex cursor-pointer items-center justify-between px-[8px] pt-[6px]'
+                  className='flex cursor-pointer items-center justify-between px-2 pt-1.5'
                   onClick={(e) => handleHeaderClick(index, e)}
                 >
                   <Popover
@@ -579,9 +579,9 @@ export function MessagesInput({
                         type='button'
                         disabled={isPreview || disabled}
                         className={cn(
-                          'group -ml-1.5 -my-1 flex items-center gap-1 rounded px-1.5 py-1 font-medium text-[13px] text-[var(--text-primary)] leading-none transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-secondary)]',
+                          'group -ml-1.5 -my-1 flex items-center gap-1 rounded px-1.5 py-1 font-medium text-[var(--text-primary)] text-small leading-none transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-secondary)]',
                           (isPreview || disabled) &&
-                            'cursor-default hover:bg-transparent hover:text-[var(--text-primary)]'
+                            'cursor-default hover-hover:bg-transparent hover-hover:text-[var(--text-primary)]'
                         )}
                         onClick={(e) => e.stopPropagation()}
                         aria-label='Select message role'
@@ -598,7 +598,7 @@ export function MessagesInput({
                       </button>
                     </PopoverTrigger>
                     <PopoverContent minWidth={140} align='start'>
-                      <div className='flex flex-col gap-[2px]'>
+                      <div className='flex flex-col gap-0.5'>
                         {(['system', 'user', 'assistant'] as const).map((role) => (
                           <PopoverItem
                             key={role}
@@ -679,7 +679,7 @@ export function MessagesInput({
                     ref={(el) => {
                       textareaRefs.current[fieldId] = el
                     }}
-                    className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
+                    className='relative z-[2] m-0 box-border h-auto min-h-[80px] w-full resize-none overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-2 py-2 font-medium font-sans text-sm text-transparent leading-[1.5] caret-[var(--text-primary)] outline-none [-ms-overflow-style:none] [scrollbar-width:none] placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none disabled:cursor-not-allowed [&::-webkit-scrollbar]:hidden'
                     placeholder='Enter message content...'
                     value={message.content}
                     onChange={fieldHandlers.onChange}
@@ -720,7 +720,7 @@ export function MessagesInput({
                       overlayRefs.current[fieldId] = el
                     }}
                     className={cn(
-                      'absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-[8px] py-[8px] font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                      'absolute top-0 left-0 z-[1] m-0 box-border w-full overflow-y-auto overflow-x-hidden whitespace-pre-wrap break-words border-none bg-transparent px-2 py-2 font-medium font-sans text-[var(--text-primary)] text-sm leading-[1.5] [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                       !(isPreview || disabled) && 'pointer-events-none'
                     )}
                   >
@@ -758,7 +758,7 @@ export function MessagesInput({
 
                   {!isPreview && !disabled && (
                     <div
-                      className='absolute right-1 bottom-1 z-[3] flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
+                      className='absolute right-1 bottom-1 z-[3] flex h-4 w-4 cursor-ns-resize items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] dark:bg-[var(--surface-5)]'
                       onMouseDown={(e) => handleResizeStart(fieldId, e)}
                       onDragStart={(e) => {
                         e.preventDefault()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx
index 05136190533..90500e6ff1a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/schedule-info/schedule-info.tsx
@@ -74,12 +74,12 @@ export function ScheduleInfo({ blockId, isPreview = false }: ScheduleInfoProps)
             ) : null}
           </div>
           {failedCount >= MAX_CONSECUTIVE_FAILURES && isDisabled && (
-            <p className='text-[12px] text-[var(--text-tertiary)]'>
+            <p className='text-[var(--text-tertiary)] text-caption'>
               Disabled after {MAX_CONSECUTIVE_FAILURES} consecutive failures
             </p>
           )}
           {redeployMutation.isError && (
-            <p className='text-[12px] text-[var(--text-error)]'>
+            <p className='text-[var(--text-error)] text-caption'>
               Failed to redeploy. Please try again.
             </p>
           )}
@@ -88,7 +88,7 @@ export function ScheduleInfo({ blockId, isPreview = false }: ScheduleInfoProps)
 
       {/* Schedule info - only show when active */}
       {!isDisabled && (
-        <div className='text-[12px] text-[var(--text-tertiary)]'>
+        <div className='text-[var(--text-tertiary)] text-caption'>
           {schedule?.cronExpression && (
             <span>{parseCronToHumanReadable(schedule.cronExpression, timezone)}</span>
           )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index 44fd568fc86..f0445fd7d54 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -173,7 +173,7 @@ export function SelectorCombobox({
                 className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 h-6 w-6 p-0'
                 onClick={handleClear}
               >
-                <X className='h-4 w-4 opacity-50 hover:opacity-100' />
+                <X className='h-4 w-4 opacity-50 hover-hover:opacity-100' />
               </Button>
             )}
           </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
index 6e7577cd8c2..ba5ff8461b1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/short-input/short-input.tsx
@@ -370,7 +370,7 @@ export const ShortInput = memo(function ShortInput({
                 <div
                   ref={overlayRef}
                   className={cn(
-                    'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+                    'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 pr-3 font-medium font-sans text-foreground text-sm [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
                     (isPreview || disabled) && 'opacity-50',
                     !(isPreview || disabled) && 'pointer-events-none'
                   )}
@@ -393,7 +393,7 @@ export const ShortInput = memo(function ShortInput({
               }
               disabled={wandHook.isLoading || wandHook.isStreaming || disabled}
               aria-label='Generate content with AI'
-              className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow'
+              className='h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow'
             >
               <Wand2 className='h-4 w-4' />
             </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
index 455eceb5d23..3f42e3c3313 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/skill-input/skill-input.tsx
@@ -117,7 +117,7 @@ export function SkillInput({
 
   return (
     <>
-      <div className='w-full space-y-[8px]'>
+      <div className='w-full space-y-2'>
         <Combobox
           options={[]}
           groups={skillGroups}
@@ -136,28 +136,28 @@ export function SkillInput({
             return (
               <div
                 key={stored.skillId}
-                className='group relative flex flex-col overflow-hidden rounded-[4px] border border-[var(--border-1)] transition-all duration-200 ease-in-out'
+                className='group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out'
               >
                 <div
-                  className='flex cursor-pointer items-center justify-between gap-[8px] rounded-t-[4px] bg-[var(--surface-4)] px-[8px] py-[6.5px]'
+                  className='flex cursor-pointer items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]'
                   onClick={() => {
                     if (fullSkill && !disabled && !isPreview) {
                       setEditingSkill(fullSkill)
                     }
                   }}
                 >
-                  <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+                  <div className='flex min-w-0 flex-1 items-center gap-2'>
                     <div
-                      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
                       style={{ backgroundColor: '#e0e0e0' }}
                     >
-                      <AgentSkillsIcon className='h-[10px] w-[10px] text-[#333]' />
+                      <AgentSkillsIcon className='h-[10px] w-[10px] text-[var(--border)]' />
                     </div>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                    <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {resolveSkillName(stored)}
                     </span>
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     {!disabled && !isPreview && (
                       <button
                         type='button'
@@ -165,7 +165,7 @@ export function SkillInput({
                           e.stopPropagation()
                           handleRemove(stored.skillId)
                         }}
-                        className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                        className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                         aria-label='Remove skill'
                       >
                         <XIcon className='h-[13px] w-[13px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
index 77d238e88e1..e79bb42752a 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/components/sort-rule-row.tsx
@@ -38,11 +38,11 @@ export function SortRuleRow({
 
   const renderHeader = () => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => onToggleCollapse(rule.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {rule.collapsed && rule.column ? getColumnLabel(rule.column) : `Sort ${index + 1}`}
         </span>
         {rule.collapsed && rule.column && (
@@ -51,7 +51,7 @@ export function SortRuleRow({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={onAdd} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add Sort</span>
@@ -60,7 +60,7 @@ export function SortRuleRow({
           variant='ghost'
           onClick={() => onRemove(rule.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Sort</span>
@@ -70,9 +70,9 @@ export function SortRuleRow({
   )
 
   const renderContent = () => (
-    <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Column</Label>
+    <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Column</Label>
         <Combobox
           options={columns}
           value={rule.column}
@@ -82,8 +82,8 @@ export function SortRuleRow({
         />
       </div>
 
-      <div className='flex flex-col gap-[6px]'>
-        <Label className='text-[13px]'>Direction</Label>
+      <div className='flex flex-col gap-1.5'>
+        <Label className='text-small'>Direction</Label>
         <Combobox
           options={directionOptions}
           value={rule.direction}
@@ -99,7 +99,7 @@ export function SortRuleRow({
     <div
       data-sort-id={rule.id}
       className={cn(
-        'rounded-[4px] border border-[var(--border-1)]',
+        'rounded-sm border border-[var(--border-1)]',
         rule.collapsed ? 'overflow-hidden' : 'overflow-visible'
       )}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
index 89705d40bbb..95170154f18 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/sort-builder/sort-builder.tsx
@@ -87,7 +87,7 @@ export function SortBuilder({
   )
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {rules.map((rule, index) => (
         <SortRuleRow
           key={rule.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
index 0d8f69be82e..b2b8b96aa45 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/starter/input-format.tsx
@@ -10,6 +10,8 @@ import {
   Combobox,
   type ComboboxOption,
   calculateGutterWidth,
+  Expandable,
+  ExpandableContent,
   getCodeEditorProps,
   highlight,
   Input,
@@ -270,7 +272,7 @@ export function FieldFormat({
             if (el) nameOverlayRefs.current[field.id] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
           style={{ scrollbarWidth: 'none' }}
@@ -306,11 +308,11 @@ export function FieldFormat({
    */
   const renderFieldHeader = (field: Field, index: number) => (
     <div
-      className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+      className='flex cursor-pointer items-center justify-between rounded-t-[3px] bg-[var(--surface-4)] px-2.5 py-[5px]'
       onClick={() => toggleCollapse(field.id)}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-        <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
+        <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
           {field.name || `${title} ${index + 1}`}
         </span>
         {field.name && showType && (
@@ -319,7 +321,7 @@ export function FieldFormat({
           </Badge>
         )}
       </div>
-      <div className='flex items-center gap-[8px] pl-[8px]' onClick={(e) => e.stopPropagation()}>
+      <div className='flex items-center gap-2 pl-2' onClick={(e) => e.stopPropagation()}>
         <Button variant='ghost' onClick={addField} disabled={isReadOnly} className='h-auto p-0'>
           <Plus className='h-[14px] w-[14px]' />
           <span className='sr-only'>Add {title}</span>
@@ -328,7 +330,7 @@ export function FieldFormat({
           variant='ghost'
           onClick={() => removeField(field.id)}
           disabled={isReadOnly}
-          className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+          className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)] hover-hover:opacity-90'
         >
           <Trash className='h-[14px] w-[14px]' />
           <span className='sr-only'>Delete Field</span>
@@ -518,7 +520,7 @@ export function FieldFormat({
             if (el) overlayRefs.current[field.id] = el
           }}
           className={cn(
-            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+            'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
             !isReadOnly && 'pointer-events-none'
           )}
           style={{ scrollbarWidth: 'none' }}
@@ -539,57 +541,56 @@ export function FieldFormat({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {fields.map((field, index) => (
         <div
           key={field.id}
           data-field-id={field.id}
-          className={cn(
-            'rounded-[4px] border border-[var(--border-1)]',
-            field.collapsed ? 'overflow-hidden' : 'overflow-visible'
-          )}
+          className='overflow-hidden rounded-sm border border-[var(--border-1)]'
         >
           {renderFieldHeader(field, index)}
 
-          {!field.collapsed && (
-            <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-              <div className='flex flex-col gap-[6px]'>
-                <Label className='text-[13px]'>Name</Label>
-                <div className='relative'>{renderNameInput(field)}</div>
-              </div>
-
-              {showType && (
-                <div className='flex flex-col gap-[6px]'>
-                  <Label className='text-[13px]'>Type</Label>
-                  <Combobox
-                    options={TYPE_OPTIONS}
-                    value={field.type}
-                    onChange={(value) => updateField(field.id, 'type', value)}
-                    disabled={isReadOnly}
-                  />
+          <Expandable expanded={!field.collapsed}>
+            <ExpandableContent>
+              <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                <div className='flex flex-col gap-1.5'>
+                  <Label className='text-small'>Name</Label>
+                  <div className='relative'>{renderNameInput(field)}</div>
                 </div>
-              )}
-
-              {showDescription && (
-                <div className='flex flex-col gap-[6px]'>
-                  <Label className='text-[13px]'>Description</Label>
-                  <Input
-                    value={field.description ?? ''}
-                    onChange={(e) => updateField(field.id, 'description', e.target.value)}
-                    placeholder={descriptionPlaceholder}
-                    disabled={isReadOnly}
-                  />
-                </div>
-              )}
 
-              {showValue && (
-                <div className='flex flex-col gap-[6px]'>
-                  <Label className='text-[13px]'>Value</Label>
-                  <div className='relative'>{renderValueInput(field)}</div>
-                </div>
-              )}
-            </div>
-          )}
+                {showType && (
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Type</Label>
+                    <Combobox
+                      options={TYPE_OPTIONS}
+                      value={field.type}
+                      onChange={(value) => updateField(field.id, 'type', value)}
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                )}
+
+                {showDescription && (
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Description</Label>
+                    <Input
+                      value={field.description ?? ''}
+                      onChange={(e) => updateField(field.id, 'description', e.target.value)}
+                      placeholder={descriptionPlaceholder}
+                      disabled={isReadOnly}
+                    />
+                  </div>
+                )}
+
+                {showValue && (
+                  <div className='flex flex-col gap-1.5'>
+                    <Label className='text-small'>Value</Label>
+                    <div className='relative'>{renderValueInput(field)}</div>
+                  </div>
+                )}
+              </div>
+            </ExpandableContent>
+          </Expandable>
         </div>
       ))}
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
index 7cf9c71c725..7a155228616 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx
@@ -153,7 +153,7 @@ export function Table({
           <th
             key={column}
             className={cn(
-              'bg-transparent px-[10px] py-[5px] text-left font-medium text-[14px] text-[var(--text-tertiary)]',
+              'bg-transparent px-2.5 py-[5px] text-left font-medium text-[var(--text-tertiary)] text-sm',
               index < columns.length - 1 && 'border-[var(--border-1)] border-r'
             )}
           >
@@ -246,7 +246,7 @@ export function Table({
             onFocus={handlers.onFocus}
             disabled={isPreview || disabled}
             autoComplete='off'
-            className='w-full border-0 bg-transparent px-[10px] py-[8px] font-medium text-sm text-transparent leading-[21px] caret-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='w-full border-0 bg-transparent px-2.5 py-2 font-medium text-sm text-transparent leading-[21px] caret-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus-visible:ring-0 focus-visible:ring-offset-0'
           />
           <div
             ref={(el) => {
@@ -255,7 +255,7 @@ export function Table({
             data-overlay={cellKey}
             className='scrollbar-hide pointer-events-none absolute top-0 right-[10px] bottom-0 left-[10px] overflow-x-auto overflow-y-hidden bg-transparent'
           >
-            <div className='whitespace-pre py-[8px] font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
+            <div className='whitespace-pre py-2 font-medium text-[var(--text-primary)] text-sm leading-[21px]'>
               {formatDisplayText(cellValue, {
                 accessiblePrefixes,
                 highlightAll: !accessiblePrefixes,
@@ -316,7 +316,7 @@ export function Table({
 
   return (
     <div className='relative'>
-      <div className='overflow-visible rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-2)] dark:bg-[#1F1F1F]'>
+      <div className='overflow-visible rounded-sm border border-[var(--border-1)] bg-[var(--surface-2)] dark:bg-[var(--code-bg)]'>
         <table className='w-full bg-transparent'>
           {renderHeader()}
           <tbody className='bg-transparent'>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
index b3b12c12018..cd341cd8bce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tag-dropdown/tag-dropdown.tsx
@@ -398,7 +398,7 @@ const TagIcon: React.FC<{
     style={{ background: color }}
   >
     {typeof icon === 'string' ? (
-      <span className='!text-white font-bold text-[10px]'>{icon}</span>
+      <span className='!text-white font-bold text-micro'>{icon}</span>
     ) : (
       (() => {
         const IconComponent = icon
@@ -530,7 +530,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
           >
             <span className='flex-1 truncate'>{child.display}</span>
             {childType && childType !== 'any' && (
-              <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>
+              <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
                 {childType}
               </span>
             )}
@@ -565,7 +565,7 @@ const FolderContentsInner: React.FC<FolderContentsProps> = ({
             }}
           >
             <span className='flex-1 truncate'>{nestedChild.display}</span>
-            <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>{'>'}</span>
+            <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>{'>'}</span>
           </PopoverItem>
         )
       })}
@@ -729,7 +729,7 @@ const NestedTagRenderer: React.FC<NestedTagRendererProps> = ({
     >
       <span className='flex-1 truncate'>{nestedTag.display}</span>
       {tagDescription && tagDescription !== 'any' && (
-        <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>
+        <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
           {tagDescription}
         </span>
       )}
@@ -799,7 +799,7 @@ const VariableTagItem: React.FC<{
         {tag.startsWith(TAG_PREFIXES.VARIABLE) ? tag.substring(TAG_PREFIXES.VARIABLE.length) : tag}
       </span>
       {variableInfo && (
-        <span className='ml-auto text-[10px] text-[var(--text-muted-inverse)]'>
+        <span className='ml-auto text-[var(--text-muted-inverse)] text-micro'>
           {variableInfo.type}
         </span>
       )}
@@ -1786,7 +1786,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
           <PopoverScrollArea ref={scrollAreaRef}>
             <TagDropdownBackButton setSelectedIndex={setSelectedIndex} />
             {flatTagList.length === 0 ? (
-              <div className='px-[6px] py-[8px] text-[12px] text-[var(--white)]/60'>
+              <div className='px-1.5 py-2 text-[var(--white)]/60 text-caption'>
                 No matching tags found
               </div>
             ) : (
@@ -1794,7 +1794,7 @@ export const TagDropdown: React.FC<TagDropdownProps> = ({
                 {variableTags.length > 0 && (
                   <>
                     <PopoverSection rootOnly>
-                      <div className='flex items-center gap-[6px]'>
+                      <div className='flex items-center gap-1.5'>
                         <TagIcon icon='V' color={BLOCK_COLORS.VARIABLE} />
                         Variables
                       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
index 81d57214831..85f045f84be 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/text/text.tsx
@@ -33,7 +33,7 @@ export function Text({ blockId, subBlockId, content, className }: TextProps) {
         className={`rounded-md border bg-[var(--surface-2)] p-4 shadow-sm ${className || ''}`}
       >
         <div
-          className='max-w-none break-words text-[var(--text-secondary)] text-sm [&_a]:text-[var(--brand-secondary)] [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover:brightness-110 [&_code]:rounded [&_code]:bg-[var(--surface-5)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[var(--text-tertiary)] [&_code]:text-xs [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] [&_ul]:ml-5 [&_ul]:list-disc [&_ul]:marker:text-[var(--text-muted)]'
+          className='max-w-none break-words text-[var(--text-secondary)] text-sm [&_a]:text-[var(--brand-secondary)] [&_a]:underline [&_a]:underline-offset-2 [&_a]:hover-hover:brightness-110 [&_code]:rounded [&_code]:bg-[var(--surface-5)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:text-[var(--text-tertiary)] [&_code]:text-xs [&_strong]:font-medium [&_strong]:text-[var(--text-primary)] [&_ul]:ml-5 [&_ul]:list-disc [&_ul]:marker:text-[var(--text-muted)]'
           dangerouslySetInnerHTML={{ __html: content }}
         />
       </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
index 73b9603e241..57df7016b7b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/code-editor/code-editor.tsx
@@ -118,7 +118,7 @@ export function CodeEditor({
             className={cn(
               'text-xs tabular-nums',
               `leading-[${CODE_LINE_HEIGHT_PX}px]`,
-              i > 0 ? 'invisible' : 'text-[#a8a8a8]'
+              i > 0 ? 'invisible' : 'text-[var(--code-line-number)]'
             )}
           >
             {lineNumber}
@@ -194,7 +194,7 @@ export function CodeEditor({
           onClick={onWandClick}
           disabled={wandButtonDisabled}
           aria-label='Generate with AI'
-          className='absolute top-2 right-3 z-10 h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground opacity-0 shadow-sm transition-all duration-200 hover:border-primary/20 hover:bg-muted hover:text-foreground hover:shadow group-hover:opacity-100'
+          className='absolute top-2 right-3 z-10 h-8 w-8 rounded-full border border-transparent bg-muted/80 text-muted-foreground opacity-0 shadow-sm transition-all duration-200 hover-hover:border-primary/20 hover-hover:bg-muted hover-hover:text-foreground hover-hover:shadow group-hover:opacity-100'
         >
           <Wand2 className='h-4 w-4' />
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
index 3a057b51539..a39a1cf2107 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/custom-tool-modal/custom-tool-modal.tsx
@@ -827,28 +827,28 @@ try {
               <ModalTabsContent value='schema'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <Label htmlFor='json-schema' className='font-medium text-[13px]'>
+                    <Label htmlFor='json-schema' className='font-medium text-small'>
                       JSON Schema
                     </Label>
                     {schemaError && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-caption'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{schemaError}</span>
                       </div>
                     )}
                   </div>
-                  <div className='flex min-w-0 items-center justify-end gap-[4px]'>
+                  <div className='flex min-w-0 items-center justify-end gap-1'>
                     {!isSchemaPromptActive ? (
                       <Button
                         variant='active'
-                        className='-my-1 h-5 px-2 py-0 text-[11px]'
+                        className='-my-1 h-5 px-2 py-0 text-xs'
                         onClick={handleSchemaWandClick}
                         disabled={schemaGeneration.isLoading || schemaGeneration.isStreaming}
                       >
                         Generate
                       </Button>
                     ) : (
-                      <div className='-my-1 flex items-center gap-[4px]'>
+                      <div className='-my-1 flex items-center gap-1'>
                         <Input
                           ref={schemaPromptInputRef}
                           value={schemaGeneration.isStreaming ? 'Generating...' : schemaPromptInput}
@@ -857,7 +857,7 @@ try {
                           onKeyDown={handleSchemaPromptKeyDown}
                           disabled={schemaGeneration.isStreaming}
                           className={cn(
-                            'h-5 max-w-[200px] flex-1 text-[11px]',
+                            'h-5 max-w-[200px] flex-1 text-xs',
                             schemaGeneration.isStreaming && 'text-muted-foreground'
                           )}
                           placeholder='Generate...'
@@ -919,28 +919,28 @@ try {
               <ModalTabsContent value='code'>
                 <div className='mb-1 flex min-h-6 items-center justify-between gap-2'>
                   <div className='flex min-w-0 items-center gap-2'>
-                    <Label htmlFor='function-code' className='font-medium text-[13px]'>
+                    <Label htmlFor='function-code' className='font-medium text-small'>
                       Code
                     </Label>
                     {codeError && !codeGeneration.isStreaming && (
-                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[12px] text-[var(--text-error)]'>
+                      <div className='ml-2 flex min-w-0 items-center gap-1 text-[var(--text-error)] text-caption'>
                         <AlertCircle className='h-3 w-3 flex-shrink-0' />
                         <span className='truncate'>{codeError}</span>
                       </div>
                     )}
                   </div>
-                  <div className='flex min-w-0 items-center justify-end gap-[4px]'>
+                  <div className='flex min-w-0 items-center justify-end gap-1'>
                     {!isCodePromptActive ? (
                       <Button
                         variant='active'
-                        className='-my-1 h-5 px-2 py-0 text-[11px]'
+                        className='-my-1 h-5 px-2 py-0 text-xs'
                         onClick={handleCodeWandClick}
                         disabled={codeGeneration.isLoading || codeGeneration.isStreaming}
                       >
                         Generate
                       </Button>
                     ) : (
-                      <div className='-my-1 flex items-center gap-[4px]'>
+                      <div className='-my-1 flex items-center gap-1'>
                         <Input
                           ref={codePromptInputRef}
                           value={codeGeneration.isStreaming ? 'Generating...' : codePromptInput}
@@ -949,7 +949,7 @@ try {
                           onKeyDown={handleCodePromptKeyDown}
                           disabled={codeGeneration.isStreaming}
                           className={cn(
-                            'h-5 max-w-[200px] flex-1 text-[11px]',
+                            'h-5 max-w-[200px] flex-1 text-xs',
                             codeGeneration.isStreaming && 'text-muted-foreground'
                           )}
                           placeholder='Generate...'
@@ -974,7 +974,7 @@ try {
                   </div>
                 </div>
                 {schemaParameters.length > 0 && (
-                  <div className='mb-2 rounded-[6px] border bg-[var(--surface-2)] p-2'>
+                  <div className='mb-2 rounded-md border bg-[var(--surface-2)] p-2'>
                     <div className='flex flex-wrap items-center gap-1.5 text-xs'>
                       <span className='font-medium text-[var(--text-tertiary)]'>
                         Available parameters:
@@ -1106,7 +1106,7 @@ try {
                                 {param.name}
                               </span>
                               {param.type && param.type !== 'any' && (
-                                <span className='ml-auto text-[10px] text-[var(--text-secondary)]'>
+                                <span className='ml-auto text-[var(--text-secondary)] text-micro'>
                                   {param.type}
                                 </span>
                               )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
index 930768fbc7c..bcc76c48f10 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/credential-selector.tsx
@@ -242,19 +242,19 @@ export function ToolCredentialSelector({
         filterOptions={true}
         isLoading={credentialsLoading}
         overlayContent={overlayContent}
-        className={selectedId ? 'pl-[28px]' : ''}
+        className={selectedId ? 'pl-7' : ''}
       />
 
       {needsUpdate && (
-        <div className='mt-[8px] flex flex-col gap-[4px] rounded-[4px] border bg-[var(--surface-2)] px-[8px] py-[6px]'>
-          <div className='flex items-center font-medium text-[12px]'>
-            <span className='mr-[6px] inline-block h-[6px] w-[6px] rounded-[2px] bg-amber-500' />
+        <div className='mt-2 flex flex-col gap-1 rounded-sm border bg-[var(--surface-2)] px-2 py-1.5'>
+          <div className='flex items-center font-medium text-caption'>
+            <span className='mr-1.5 inline-block h-[6px] w-[6px] rounded-xs bg-amber-500' />
             Additional permissions required
           </div>
           <Button
             variant='active'
             onClick={() => setShowOAuthModal(true)}
-            className='w-full px-[8px] py-[4px] font-medium text-[12px]'
+            className='w-full px-2 py-1 font-medium text-caption'
           >
             Update access
           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
index d6fc5a3e243..3db7ea0f827 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/components/tools/parameter.tsx
@@ -85,24 +85,24 @@ export function ParameterWithLabel({
   const isStreaming = wandControlRef.current?.isWandStreaming ?? false
 
   return (
-    <div key={paramId} className='relative min-w-0 space-y-[6px]'>
-      <div className='flex items-center justify-between gap-[6px] pl-[2px]'>
-        <Label className='flex items-baseline gap-[6px] whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
+    <div key={paramId} className='relative min-w-0 space-y-1.5'>
+      <div className='flex items-center justify-between gap-1.5 pl-0.5'>
+        <Label className='flex items-baseline gap-1.5 whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
           {title}
           {isRequired && visibility === 'user-only' && <span className='ml-0.5'>*</span>}
         </Label>
-        <div className='flex min-w-0 flex-1 items-center justify-end gap-[6px]'>
+        <div className='flex min-w-0 flex-1 items-center justify-end gap-1.5'>
           {showWand &&
             (!isSearchActive ? (
               <Button
                 variant='active'
-                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                className='-my-1 h-5 px-2 py-0 text-xs'
                 onClick={handleSearchClick}
               >
                 Generate
               </Button>
             ) : (
-              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-[4px]'>
+              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-1'>
                 <Input
                   ref={searchInputRef}
                   value={isStreaming ? 'Generating...' : searchQuery}
@@ -123,7 +123,7 @@ export function ParameterWithLabel({
                   }}
                   disabled={isStreaming}
                   className={cn(
-                    'h-5 min-w-[80px] flex-1 text-[11px]',
+                    'h-5 min-w-[80px] flex-1 text-xs',
                     isStreaming && 'text-muted-foreground'
                   )}
                   placeholder='Generate with AI...'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
index d502415b57a..5e823290dda 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/tool-input/tool-input.tsx
@@ -436,7 +436,7 @@ function createToolIcon(
 ) {
   return (
     <div
-      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+      className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
       style={{ background: bgColor }}
     >
       <IconComponent className='h-[10px] w-[10px] text-white' />
@@ -1536,7 +1536,7 @@ export const ToolInput = memo(function ToolInput({
   ])
 
   return (
-    <div className='w-full space-y-[8px]'>
+    <div className='w-full space-y-2'>
       <Combobox
         options={[]}
         groups={toolGroups}
@@ -1665,7 +1665,7 @@ export const ToolInput = memo(function ToolInput({
             <div
               key={`${tool.customToolId || tool.toolId || toolIndex}-${toolIndex}`}
               className={cn(
-                'group relative flex flex-col overflow-hidden rounded-[4px] border border-[var(--border-1)] transition-all duration-200 ease-in-out',
+                'group relative flex flex-col overflow-hidden rounded-sm border border-[var(--border-1)] transition-all duration-200 ease-in-out',
                 draggedIndex === toolIndex ? 'scale-95 opacity-40' : '',
                 dragOverIndex === toolIndex && draggedIndex !== toolIndex && draggedIndex !== null
                   ? 'translate-y-1 transform border-t-2 border-t-muted-foreground/40'
@@ -1680,7 +1680,7 @@ export const ToolInput = memo(function ToolInput({
             >
               <div
                 className={cn(
-                  'flex items-center justify-between gap-[8px] rounded-t-[4px] bg-[var(--surface-4)] px-[8px] py-[6.5px]',
+                  'flex items-center justify-between gap-2 rounded-t-[4px] bg-[var(--surface-4)] px-2 py-[6.5px]',
                   (isCustomTool || hasToolBody) && 'cursor-pointer'
                 )}
                 onClick={() => {
@@ -1691,9 +1691,9 @@ export const ToolInput = memo(function ToolInput({
                   }
                 }}
               >
-                <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+                <div className='flex min-w-0 flex-1 items-center gap-2'>
                   <div
-                    className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+                    className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
                     style={{
                       backgroundColor: isCustomTool
                         ? '#3B82F6'
@@ -1717,7 +1717,7 @@ export const ToolInput = memo(function ToolInput({
                       />
                     )}
                   </div>
-                  <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                  <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                     {isCustomTool ? customToolTitle : tool.title}
                   </span>
                   {isMcpTool &&
@@ -1754,7 +1754,7 @@ export const ToolInput = memo(function ToolInput({
                       <WorkflowToolDeployBadge workflowId={tool.params.workflowId} />
                     )}
                 </div>
-                <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                <div className='flex flex-shrink-0 items-center gap-2'>
                   {supportsToolControl && !(isMcpTool && isMcpToolUnavailable(tool)) && (
                     <Popover
                       open={usageControlPopoverIndex === toolIndex}
@@ -1762,7 +1762,7 @@ export const ToolInput = memo(function ToolInput({
                     >
                       <PopoverTrigger asChild>
                         <button
-                          className='flex items-center justify-center font-medium text-[12px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                          className='flex items-center justify-center font-medium text-[var(--text-tertiary)] text-caption transition-colors hover-hover:text-[var(--text-primary)]'
                           onClick={(e: React.MouseEvent) => e.stopPropagation()}
                           aria-label='Tool usage control'
                         >
@@ -1777,7 +1777,7 @@ export const ToolInput = memo(function ToolInput({
                         align='end'
                         sideOffset={8}
                         onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                        className='gap-[2px]'
+                        className='gap-0.5'
                         border
                       >
                         <PopoverItem
@@ -1831,7 +1831,7 @@ export const ToolInput = memo(function ToolInput({
                             e.stopPropagation()
                             setMcpRemovePopoverIndex(toolIndex)
                           }}
-                          className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                          className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                           aria-label='Remove tool'
                         >
                           <XIcon className='h-[13px] w-[13px]' />
@@ -1842,7 +1842,7 @@ export const ToolInput = memo(function ToolInput({
                         align='end'
                         sideOffset={8}
                         onClick={(e: React.MouseEvent) => e.stopPropagation()}
-                        className='gap-[2px]'
+                        className='gap-0.5'
                         border
                       >
                         <PopoverItem
@@ -1869,7 +1869,7 @@ export const ToolInput = memo(function ToolInput({
                         e.stopPropagation()
                         handleRemoveTool(toolIndex)
                       }}
-                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                      className='flex items-center justify-center text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-primary)]'
                       aria-label='Remove tool'
                     >
                       <XIcon className='h-[13px] w-[13px]' />
@@ -1879,15 +1879,15 @@ export const ToolInput = memo(function ToolInput({
               </div>
 
               {!isCustomTool && isExpandedForDisplay && (
-                <div className='flex flex-col gap-[10px] overflow-visible rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[8px] py-[8px]'>
+                <div className='flex flex-col gap-2.5 overflow-visible rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2 py-2'>
                   {/* Operation dropdown for tools with multiple operations */}
                   {(() => {
                     const hasOperations = hasMultipleOperations(tool.type)
                     const operationOptions = hasOperations ? getOperationOptions(tool.type) : []
 
                     return hasOperations && operationOptions.length > 0 ? (
-                      <div className='relative space-y-[6px]'>
-                        <div className='font-medium text-[13px] text-[var(--text-primary)]'>
+                      <div className='relative space-y-1.5'>
+                        <div className='font-medium text-[var(--text-primary)] text-small'>
                           Operation
                         </div>
                         <Combobox
@@ -2012,9 +2012,7 @@ export const ToolInput = memo(function ToolInput({
                         )
                       })
 
-                      return (
-                        <div className='flex flex-col gap-[14px] pt-[4px]'>{renderedElements}</div>
-                      )
+                      return <div className='flex flex-col gap-3.5 pt-1'>{renderedElements}</div>
                     }
 
                     const filteredParams = displayParams.filter((param) =>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
index 3ca20f572f0..0bcca5e0517 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/variables-input/variables-input.tsx
@@ -321,9 +321,9 @@ export function VariablesInput({
   }
 
   return (
-    <div className='space-y-[8px]'>
+    <div className='space-y-2'>
       {assignments.length > 0 && (
-        <div className='space-y-[8px]'>
+        <div className='space-y-2'>
           {assignments.map((assignment, index) => {
             const collapsed = collapsedAssignments[assignment.id] || false
             const availableVars = getAvailableVariablesFor(assignment.id)
@@ -333,16 +333,16 @@ export function VariablesInput({
                 key={assignment.id}
                 data-assignment-id={assignment.id}
                 className={cn(
-                  'rounded-[4px] border border-[var(--border-1)]',
+                  'rounded-sm border border-[var(--border-1)]',
                   collapsed ? 'overflow-hidden' : 'overflow-visible'
                 )}
               >
                 <div
-                  className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+                  className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
                   onClick={() => toggleCollapse(assignment.id)}
                 >
-                  <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-                    <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+                  <div className='flex min-w-0 flex-1 items-center gap-2'>
+                    <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
                       {assignment.variableName || `Variable ${index + 1}`}
                     </span>
                     {assignment.variableName && (
@@ -352,7 +352,7 @@ export function VariablesInput({
                     )}
                   </div>
                   <div
-                    className='flex items-center gap-[8px] pl-[8px]'
+                    className='flex items-center gap-2 pl-2'
                     onClick={(e) => e.stopPropagation()}
                   >
                     <Button
@@ -368,7 +368,7 @@ export function VariablesInput({
                       variant='ghost'
                       onClick={() => removeAssignment(assignment.id)}
                       disabled={isReadOnly}
-                      className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+                      className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
                     >
                       <Trash className='h-[14px] w-[14px]' />
                       <span className='sr-only'>Delete Variable</span>
@@ -377,9 +377,9 @@ export function VariablesInput({
                 </div>
 
                 {!collapsed && (
-                  <div className='flex flex-col gap-[8px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'>
-                    <div className='flex flex-col gap-[6px]'>
-                      <Label className='text-[13px]'>Variable</Label>
+                  <div className='flex flex-col gap-2 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label className='text-small'>Variable</Label>
                       <Combobox
                         options={availableVars.map((v) => ({ label: v.name, value: v.id }))}
                         value={assignment.variableId || ''}
@@ -389,8 +389,8 @@ export function VariablesInput({
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[6px]'>
-                      <Label className='text-[13px]'>Value</Label>
+                    <div className='flex flex-col gap-1.5'>
+                      <Label className='text-small'>Value</Label>
                       {assignment.type === 'boolean' ? (
                         <Combobox
                           options={BOOLEAN_OPTIONS}
@@ -518,7 +518,7 @@ export function VariablesInput({
                               if (el) overlayRefs.current[assignment.id] = el
                             }}
                             className={cn(
-                              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                              'absolute inset-0 flex items-center overflow-x-auto bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
                               !isReadOnly && 'pointer-events-none'
                             )}
                             style={{ scrollbarWidth: 'none' }}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
index d723dfb6122..8adb5e5e27d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/sub-block.tsx
@@ -245,8 +245,8 @@ const renderLabel = (
   const canonicalToggleDisabledResolved = canonicalToggleIsDisabled ?? canonicalToggle?.disabled
 
   return (
-    <div className='flex items-center justify-between gap-[6px] pl-[2px]'>
-      <Label className='flex items-baseline gap-[6px] whitespace-nowrap'>
+    <div className='flex items-center justify-between gap-1.5 pl-0.5'>
+      <Label className='flex items-baseline gap-1.5 whitespace-nowrap'>
         {config.title}
         {required && <span className='ml-0.5'>*</span>}
         {labelSuffix}
@@ -266,7 +266,7 @@ const renderLabel = (
             </Tooltip.Root>
           )}
       </Label>
-      <div className='flex min-w-0 flex-1 items-center justify-end gap-[6px]'>
+      <div className='flex min-w-0 flex-1 items-center justify-end gap-1.5'>
         {showCopy && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
@@ -293,13 +293,13 @@ const renderLabel = (
             {!wandState.isSearchActive ? (
               <Button
                 variant='active'
-                className='-my-1 h-5 px-2 py-0 text-[11px]'
+                className='-my-1 h-5 px-2 py-0 text-xs'
                 onClick={wandState.onSearchClick}
               >
                 Generate
               </Button>
             ) : (
-              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-[4px]'>
+              <div className='-my-1 flex min-w-[120px] max-w-[280px] flex-1 items-center gap-1'>
                 <Input
                   ref={wandState.searchInputRef}
                   value={wandState.isStreaming ? 'Generating...' : wandState.searchQuery}
@@ -325,7 +325,7 @@ const renderLabel = (
                   }}
                   disabled={wandState.isStreaming}
                   className={cn(
-                    'h-5 min-w-[80px] flex-1 text-[11px]',
+                    'h-5 min-w-[80px] flex-1 text-xs',
                     wandState.isStreaming && 'text-muted-foreground'
                   )}
                   placeholder='Generate with AI...'
@@ -1148,7 +1148,7 @@ function SubBlockComponent({
   }
 
   return (
-    <div onMouseDown={handleMouseDown} className='subblock-content flex flex-col gap-[10px]'>
+    <div onMouseDown={handleMouseDown} className='subblock-content flex flex-col gap-2.5'>
       {renderLabel(
         config,
         isValidJson,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
index 4a8a8dee19a..4fd5c7b77cf 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/subflow-editor/subflow-editor.tsx
@@ -68,10 +68,10 @@ export function SubflowEditor({
     <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
       {/* Subflow Editor Section */}
       <div ref={subBlocksRef} className='subblocks-section flex flex-1 flex-col overflow-hidden'>
-        <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[9px] pb-[8px]'>
+        <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-[9px] pb-2'>
           {/* Type Selection */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {currentBlock.type === 'loop' ? 'Loop Type' : 'Parallel Type'}
             </Label>
             <Combobox
@@ -84,7 +84,7 @@ export function SubflowEditor({
           </div>
 
           {/* Dashed Line Separator */}
-          <div className='px-[2px] pt-[16px] pb-[10px]'>
+          <div className='px-0.5 pt-4 pb-2.5'>
             <div
               className='h-[1.25px]'
               style={{
@@ -96,7 +96,7 @@ export function SubflowEditor({
 
           {/* Configuration */}
           <div>
-            <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+            <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
               {isCountMode
                 ? `${currentBlock.type === 'loop' ? 'Loop' : 'Parallel'} Iterations`
                 : isConditionMode
@@ -113,9 +113,9 @@ export function SubflowEditor({
                   onBlur={handleSubflowIterationsSave}
                   onKeyDown={(e) => e.key === 'Enter' && handleSubflowIterationsSave()}
                   disabled={!userCanEdit}
-                  className='mb-[4px]'
+                  className='mb-1'
                 />
-                <div className='text-[10px] text-muted-foreground'>
+                <div className='text-micro text-muted-foreground'>
                   Enter a number between 1 and {subflowConfig.maxIterations}
                 </div>
               </div>
@@ -180,7 +180,7 @@ export function SubflowEditor({
 
           {/* Connections Header with Chevron */}
           <div
-            className='flex flex-shrink-0 cursor-pointer items-center gap-[8px] px-[10px] pt-[5px] pb-[5px]'
+            className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
             onClick={toggleConnectionsCollapsed}
             onKeyDown={(e) => {
               if (e.key === 'Enter' || e.key === ' ') {
@@ -198,11 +198,11 @@ export function SubflowEditor({
                 (!isConnectionsAtMinHeight ? ' rotate-180' : '')
               }
             />
-            <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
+            <div className='font-medium text-[var(--text-primary)] text-small'>Connections</div>
           </div>
 
           {/* Connections Content - Always visible */}
-          <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px] pb-[8px]'>
+          <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
             <ConnectionBlocks connections={incomingConnections} currentBlockId={currentBlock.id} />
           </div>
         </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 35d7bc5c673..b149f57d303 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -319,11 +319,11 @@ export function Editor() {
   return (
     <div className='flex h-full flex-col'>
       {/* Header */}
-      <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'>
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+      <div className='mx-[-1px] flex flex-shrink-0 items-center justify-between rounded-none border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           {(blockConfig || isSubflow) && currentBlock?.type !== 'note' && (
             <div
-              className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px]'
+              className='flex h-[18px] w-[18px] items-center justify-center rounded-sm'
               style={{ background: isSubflow ? subflowConfig?.bgColor : blockConfig?.bgColor }}
             >
               <IconComponent
@@ -346,11 +346,11 @@ export function Editor() {
                   handleCancelRename()
                 }
               }}
-              className='min-w-0 flex-1 truncate bg-transparent pr-[8px] font-medium text-[14px] text-[var(--text-primary)] outline-none'
+              className='min-w-0 flex-1 truncate bg-transparent pr-2 font-medium text-[var(--text-primary)] text-sm outline-none'
             />
           ) : (
             <h2
-              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-[8px] font-medium text-[14px] text-[var(--text-primary)]'
+              className='min-w-0 flex-1 cursor-pointer select-none truncate pr-2 font-medium text-[var(--text-primary)] text-sm'
               title={title}
               onDoubleClick={handleStartRename}
               onMouseDown={(e) => {
@@ -363,7 +363,7 @@ export function Editor() {
             </h2>
           )}
         </div>
-        <div className='flex shrink-0 items-center gap-[8px]'>
+        <div className='flex shrink-0 items-center gap-2'>
           {/* Locked indicator - clickable to unlock if user has admin permissions, block is locked directly, and not locked by an ancestor */}
           {isLocked && currentBlock && (
             <Tooltip.Root>
@@ -454,7 +454,7 @@ export function Editor() {
       </div>
 
       {!currentBlockId || !currentBlock ? (
-        <div className='flex flex-1 items-center justify-center text-[#8D8D8D] text-[13px]'>
+        <div className='flex flex-1 items-center justify-center text-[var(--text-placeholder)] text-small'>
           Select a block to edit
         </div>
       ) : isSubflow ? (
@@ -478,15 +478,15 @@ export function Editor() {
             ref={subBlocksRef}
             className='subblocks-section flex flex-1 flex-col overflow-hidden'
           >
-            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[8px] pt-[12px] pb-[8px] [overflow-anchor:none]'>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-2 pt-3 pb-2 [overflow-anchor:none]'>
               {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
               {isWorkflowBlock && childWorkflowId && (
                 <>
                   <div className='subblock-content flex flex-col gap-[9.5px]'>
-                    <div className='pl-[2px] font-medium text-[13px] text-[var(--text-primary)] leading-none'>
+                    <div className='pl-0.5 font-medium text-[var(--text-primary)] text-small leading-none'>
                       Workflow Preview
                     </div>
-                    <div className='relative h-[160px] overflow-hidden rounded-[4px] border border-[var(--border)]'>
+                    <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                       {isLoadingChildWorkflow ? (
                         <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
                           <Loader2 className='h-5 w-5 animate-spin text-[var(--text-tertiary)]' />
@@ -511,7 +511,7 @@ export function Editor() {
                                 type='button'
                                 variant='ghost'
                                 onClick={handleOpenChildWorkflow}
-                                className='absolute right-[6px] bottom-[6px] z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover:bg-[var(--surface-4)]'
+                                className='absolute right-[6px] bottom-1.5 z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
                               >
                                 <ExternalLink className='h-[12px] w-[12px]' />
                               </Button>
@@ -521,20 +521,20 @@ export function Editor() {
                         </>
                       ) : (
                         <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                          <span className='text-[13px] text-[var(--text-tertiary)]'>
+                          <span className='text-[var(--text-tertiary)] text-small'>
                             Unable to load preview
                           </span>
                         </div>
                       )}
                     </div>
                   </div>
-                  <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                  <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                     <div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
                   </div>
                 </>
               )}
               {subBlocks.length === 0 && !isWorkflowBlock ? (
-                <div className='flex h-full items-center justify-center text-center text-[#8D8D8D] text-[13px]'>
+                <div className='flex h-full items-center justify-center text-center text-[var(--text-placeholder)] text-small'>
                   This block has no subblocks
                 </div>
               ) : (
@@ -592,7 +592,7 @@ export function Editor() {
                           }
                         />
                         {showDivider && (
-                          <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                          <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                             <div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
                           </div>
                         )}
@@ -601,12 +601,12 @@ export function Editor() {
                   })}
 
                   {hasAdvancedOnlyFields && canEditBlock && (
-                    <div className='flex items-center gap-[10px] px-[2px] pt-[14px] pb-[12px]'>
+                    <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
                       <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
                       <button
                         type='button'
                         onClick={handleToggleAdvancedMode}
-                        className='flex items-center gap-[6px] whitespace-nowrap font-medium text-[13px] text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+                        className='flex items-center gap-1.5 whitespace-nowrap font-medium text-[var(--text-secondary)] text-small hover-hover:text-[var(--text-primary)]'
                       >
                         {displayAdvancedOptions
                           ? 'Hide additional fields'
@@ -619,9 +619,9 @@ export function Editor() {
                     </div>
                   )}
                   {hasAdvancedOnlyFields && !canEditBlock && displayAdvancedOptions && (
-                    <div className='flex items-center gap-[10px] px-[2px] pt-[14px] pb-[12px]'>
+                    <div className='flex items-center gap-2.5 px-0.5 pt-3.5 pb-3'>
                       <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
-                      <span className='whitespace-nowrap font-medium text-[13px] text-[var(--text-secondary)]'>
+                      <span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-small'>
                         Additional fields
                       </span>
                       <div className='h-[1.25px] flex-1' style={DASHED_DIVIDER_STYLE} />
@@ -646,7 +646,7 @@ export function Editor() {
                           allowExpandInPreview={false}
                         />
                         {index < advancedOnlySubBlocks.length - 1 && (
-                          <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                          <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                             <div className='h-[1.25px]' style={DASHED_DIVIDER_STYLE} />
                           </div>
                         )}
@@ -677,7 +677,7 @@ export function Editor() {
 
               {/* Connections Header with Chevron */}
               <div
-                className='flex flex-shrink-0 cursor-pointer items-center gap-[8px] px-[10px] pt-[5px] pb-[5px]'
+                className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
                 onClick={toggleConnectionsCollapsed}
                 onKeyDown={(e) => {
                   if (e.key === 'Enter' || e.key === ' ') {
@@ -697,13 +697,11 @@ export function Editor() {
                     (!isConnectionsAtMinHeight ? ' rotate-180' : '')
                   }
                 />
-                <div className='font-medium text-[13px] text-[var(--text-primary)]'>
-                  Connections
-                </div>
+                <div className='font-medium text-[var(--text-primary)] text-small'>Connections</div>
               </div>
 
               {/* Connections Content - Always visible */}
-              <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px] pb-[8px]'>
+              <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
                 <ConnectionBlocks
                   connections={incomingConnections}
                   currentBlockId={currentBlock.id}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
index 991aafe4e92..66090005ba2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx
@@ -108,14 +108,14 @@ const ToolbarItem = memo(function ToolbarItem({
       onClick={handleClick}
       onContextMenu={handleContextMenu}
       className={clsx(
-        'group flex h-[28px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px]',
-        'cursor-pointer hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover:bg-[var(--surface-5)]',
+        'group flex h-[28px] items-center gap-2 rounded-lg px-1.5 text-sm',
+        'cursor-pointer hover-hover:bg-[var(--surface-6)] active:cursor-grabbing dark:hover-hover:bg-[var(--surface-5)]',
         'focus-visible:bg-[var(--surface-6)] focus-visible:outline-none dark:focus-visible:bg-[var(--surface-5)]'
       )}
       onKeyDown={handleKeyDown}
     >
       <div
-        className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+        className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
         style={{ background: item.bgColor }}
       >
         {Icon && (
@@ -707,11 +707,11 @@ export const Toolbar = memo(
       >
         {/* Header */}
         <div
-          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-[4px] border border-[var(--border)] bg-[var(--surface-4)] px-[12px] py-[6px]'
+          className='mx-[-1px] flex flex-shrink-0 cursor-pointer items-center justify-between rounded-sm border border-[var(--border)] bg-[var(--surface-4)] px-3 py-1.5'
           onClick={handleSearchClick}
         >
-          <h2 className='font-medium text-[14px] text-[var(--text-primary)]'>Toolbar</h2>
-          <div className='flex shrink-0 items-center gap-[8px]'>
+          <h2 className='font-medium text-[var(--text-primary)] text-sm'>Toolbar</h2>
+          <div className='flex shrink-0 items-center gap-2'>
             {!isSearchActive ? (
               <Button
                 variant='ghost'
@@ -728,7 +728,7 @@ export const Toolbar = memo(
                 value={searchQuery}
                 onChange={(e) => setSearchQuery(e.target.value)}
                 onBlur={handleSearchBlur}
-                className='w-full border-none bg-transparent pr-[2px] text-right font-medium text-[13px] text-[var(--text-primary)] placeholder:text-[#737373] focus:outline-none'
+                className='w-full border-none bg-transparent pr-0.5 text-right font-medium text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
               />
             )}
           </div>
@@ -746,12 +746,12 @@ export const Toolbar = memo(
           >
             <div
               ref={triggersHeaderRef}
-              className='px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='px-2.5 pt-[5px] pb-[5px] font-medium text-[var(--text-primary)] text-small'
             >
               Triggers
             </div>
-            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-              <div ref={triggersContentRef} className='space-y-[2px] pb-[8px]'>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5'>
+              <div ref={triggersContentRef} className='space-y-0.5 pb-2'>
                 {filteredTriggers.map((trigger, index) => (
                   <ToolbarItem
                     key={trigger.type}
@@ -780,12 +780,12 @@ export const Toolbar = memo(
             <div
               ref={blocksHeaderRef}
               onClick={handleBlocksHeaderClick}
-              className='cursor-pointer px-[10px] pt-[5px] pb-[5px] font-medium text-[13px] text-[var(--text-primary)]'
+              className='cursor-pointer px-2.5 pt-[5px] pb-[5px] font-medium text-[var(--text-primary)] text-small'
             >
               Blocks
             </div>
-            <div className='flex-1 overflow-y-auto overflow-x-hidden px-[6px]'>
-              <div className='space-y-[2px] pb-[8px]'>
+            <div className='flex-1 overflow-y-auto overflow-x-hidden px-1.5'>
+              <div className='space-y-0.5 pb-2'>
                 {filteredBlocks.map((block, index) => (
                   <ToolbarItem
                     key={block.type}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
index eee761a21f2..7298ffd2030 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx
@@ -398,11 +398,11 @@ export const Panel = memo(function Panel() {
         className='panel-container relative shrink-0 overflow-hidden bg-[var(--bg)]'
         aria-label='Workflow panel'
       >
-        <div className='flex h-full flex-col border-[var(--border)] border-l pt-[14px]'>
+        <div className='flex h-full flex-col border-[var(--border)] border-l pt-3.5'>
           {/* Header */}
-          <div className='flex flex-shrink-0 items-center justify-between px-[8px]'>
+          <div className='flex flex-shrink-0 items-center justify-between px-2'>
             {/* More and Chat */}
-            <div className='flex gap-[6px]'>
+            <div className='flex gap-1.5'>
               <DropdownMenu open={isMenuOpen} onOpenChange={setIsMenuOpen}>
                 <DropdownMenuTrigger asChild>
                   <Button className='h-[30px] w-[30px] rounded-[5px]'>
@@ -465,10 +465,10 @@ export const Panel = memo(function Panel() {
             </div>
 
             {/* Deploy and Run */}
-            <div className='flex gap-[6px]'>
+            <div className='flex gap-1.5'>
               <Deploy activeWorkflowId={activeWorkflowId} userPermissions={userPermissions} />
               <Button
-                className='h-[30px] gap-[8px] px-[10px]'
+                className='h-[30px] gap-2 px-2.5'
                 variant={isExecuting ? 'active' : 'tertiary'}
                 onClick={isExecuting ? cancelWorkflow : () => runWorkflow()}
                 disabled={!isExecuting && isButtonDisabled}
@@ -484,14 +484,14 @@ export const Panel = memo(function Panel() {
           </div>
 
           {/* Tabs */}
-          <div className='flex flex-shrink-0 items-center justify-between px-[8px] pt-[14px]'>
-            <div className='flex gap-[4px]'>
+          <div className='flex flex-shrink-0 items-center justify-between px-2 pt-3.5'>
+            <div className='flex gap-1'>
               {!permissionConfig.hideCopilot && (
                 <Button
-                  className={`h-[28px] truncate rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                  className={`h-[28px] truncate rounded-md border px-2 py-[5px] text-[12.5px] ${
                     _hasHydrated && activeTab === 'copilot'
                       ? 'border-[var(--border-1)]'
-                      : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                      : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                   }`}
                   variant={_hasHydrated && activeTab === 'copilot' ? 'active' : 'ghost'}
                   onClick={() => handleTabClick('copilot')}
@@ -501,10 +501,10 @@ export const Panel = memo(function Panel() {
                 </Button>
               )}
               <Button
-                className={`h-[28px] rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                className={`h-[28px] rounded-md border px-2 py-[5px] text-[12.5px] ${
                   _hasHydrated && activeTab === 'toolbar'
                     ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                 }`}
                 variant={_hasHydrated && activeTab === 'toolbar' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('toolbar')}
@@ -513,10 +513,10 @@ export const Panel = memo(function Panel() {
                 Toolbar
               </Button>
               <Button
-                className={`h-[28px] rounded-[6px] border px-[8px] py-[5px] text-[12.5px] ${
+                className={`h-[28px] rounded-md border px-2 py-[5px] text-[12.5px] ${
                   _hasHydrated && activeTab === 'editor'
                     ? 'border-[var(--border-1)]'
-                    : 'border-transparent hover:border-[var(--border-1)] hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+                    : 'border-transparent hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
                 }`}
                 variant={_hasHydrated && activeTab === 'editor' ? 'active' : 'ghost'}
                 onClick={() => handleTabClick('editor')}
@@ -528,7 +528,7 @@ export const Panel = memo(function Panel() {
           </div>
 
           {/* Tab Content - Keep all tabs mounted but hidden to preserve state */}
-          <div className='flex-1 overflow-hidden pt-[12px]'>
+          <div className='flex-1 overflow-hidden pt-3'>
             {!permissionConfig.hideCopilot && (
               <div
                 className={
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
index 68f179ffd9b..a3665091a11 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/subflows/subflow-node.tsx
@@ -42,9 +42,9 @@ const getHandleClasses = (position: 'left' | 'right') => {
   const colorClasses = '!bg-[var(--workflow-edge)]'
 
   const positionClasses = {
-    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
+    left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover-hover:!left-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-l-full',
     right:
-      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full',
+      '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover-hover:!right-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-r-full',
   }
 
   return cn(baseClasses, colorClasses, positionClasses[position])
@@ -149,7 +149,7 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
   return (
     <div className='group pointer-events-none relative'>
       <div
-        className='relative select-none rounded-[8px] border border-[var(--border-1)] transition-block-bg'
+        className='relative select-none rounded-lg border border-[var(--border-1)] transition-block-bg'
         style={{
           width: data.width || 500,
           height: data.height || 300,
@@ -171,19 +171,19 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
         {/* Header Section */}
         <div
           onClick={() => setCurrentBlockId(id)}
-          className='workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px] [&:active]:cursor-grabbing'
+          className='workflow-drag-handle flex cursor-grab items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-2 pr-3 pl-2 [&:active]:cursor-grabbing'
           style={{ pointerEvents: 'auto' }}
         >
-          <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
+          <div className='flex min-w-0 flex-1 items-center gap-2.5'>
             <div
-              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
               style={{ backgroundColor: isEnabled ? blockIconBg : 'gray' }}
             >
               <BlockIcon className='h-[16px] w-[16px] text-white' />
             </div>
             <span
               className={cn(
-                'truncate font-medium text-[16px]',
+                'truncate font-medium text-md',
                 !isEnabled && 'text-[var(--text-muted)]'
               )}
               title={blockName}
@@ -211,25 +211,25 @@ export const SubflowNodeComponent = memo(({ data, id, selected }: NodeProps<Subf
 
         {!isPreview && (
           <div
-            className='absolute right-[8px] bottom-[8px] z-20 flex h-[32px] w-[32px] cursor-se-resize items-center justify-center text-muted-foreground'
+            className='absolute right-[8px] bottom-2 z-20 flex h-[32px] w-[32px] cursor-se-resize items-center justify-center text-muted-foreground'
             style={{ pointerEvents: 'auto' }}
           />
         )}
 
         <div
-          className='relative h-[calc(100%-50px)] pt-[16px] pr-[80px] pb-[16px] pl-[16px]'
+          className='relative h-[calc(100%-50px)] pt-4 pr-[80px] pb-4 pl-4'
           data-dragarea='true'
           style={{ pointerEvents: 'none' }}
         >
           {/* Subflow Start */}
           <div
-            className='absolute top-[16px] left-[16px] flex items-center justify-center rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] px-[12px] py-[6px]'
+            className='absolute top-4 left-[16px] flex items-center justify-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] px-3 py-1.5'
             style={{ pointerEvents: isPreview ? 'none' : 'auto' }}
             data-parent-id={id}
             data-node-role={`${data.kind}-start`}
             data-extent='parent'
           >
-            <span className='font-medium text-[14px] text-[var(--text-primary)]'>Start</span>
+            <span className='font-medium text-[var(--text-primary)] text-sm'>Start</span>
 
             <Handle
               type='source'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
index 3362e28de4c..47792621d79 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/filter-popover/filter-popover.tsx
@@ -74,7 +74,7 @@ export const FilterPopover = memo(function FilterPopover({
           onClick={() => toggleStatus('error')}
         >
           <div
-            className='h-[6px] w-[6px] rounded-[2px]'
+            className='h-[6px] w-[6px] rounded-xs'
             style={{ backgroundColor: 'var(--text-error)' }}
           />
           <span className='flex-1'>Error</span>
@@ -85,7 +85,7 @@ export const FilterPopover = memo(function FilterPopover({
           onClick={() => toggleStatus('info')}
         >
           <div
-            className='h-[6px] w-[6px] rounded-[2px]'
+            className='h-[6px] w-[6px] rounded-xs'
             style={{ backgroundColor: 'var(--terminal-status-info-color)' }}
           />
           <span className='flex-1'>Info</span>
@@ -93,7 +93,7 @@ export const FilterPopover = memo(function FilterPopover({
 
         {uniqueBlocks.length > 0 && (
           <>
-            <PopoverDivider className='my-[4px]' />
+            <PopoverDivider className='my-1' />
             <PopoverSection className='!mt-0'>Blocks</PopoverSection>
             <PopoverScrollArea className='max-h-[100px]'>
               {uniqueBlocks.map((block) => {
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
index 853c7dbaef9..d5633599e34 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/components/structured-output.tsx
@@ -60,16 +60,15 @@ const BADGE_VARIANTS: Record<ValueType, BadgeVariant> = {
  * Styling constants matching the original non-virtualized implementation.
  */
 const STYLES = {
-  row: 'group flex min-h-[30px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[8px] -mx-[8px] hover:bg-[var(--surface-active)]',
+  row: 'group flex min-h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 -mx-2 hover-hover:bg-[var(--surface-active)]',
   chevron:
     'h-[7px] w-[9px] flex-shrink-0 text-[var(--text-muted)] transition-transform duration-100',
-  keyName: 'font-base text-[14px] text-[var(--text-primary)]',
-  badge: 'rounded-[4px] px-[4px] py-[0px] text-[11px]',
-  summary: 'text-[14px] text-[var(--text-secondary)]',
-  indent:
-    'mt-[2px] ml-[3px] flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[9px]',
-  value: 'min-w-0 py-[2px] text-[14px] text-[var(--text-primary)]',
-  emptyValue: 'py-[2px] text-[14px] text-[var(--text-secondary)]',
+  keyName: 'font-base text-sm text-[var(--text-primary)]',
+  badge: 'rounded-sm px-1 py-[0px] text-xs',
+  summary: 'text-sm text-[var(--text-secondary)]',
+  indent: 'mt-0.5 ml-[3px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[9px]',
+  value: 'min-w-0 py-0.5 text-sm text-[var(--text-primary)]',
+  emptyValue: 'py-0.5 text-sm text-[var(--text-secondary)]',
   matchHighlight: 'bg-yellow-200/60 dark:bg-yellow-500/40',
   currentMatchHighlight: 'bg-orange-400',
 } as const
@@ -817,7 +816,7 @@ export const StructuredOutput = memo(function StructuredOutput({
     return () => cancelAnimationFrame(rafId)
   }, [currentMatchIndex, allMatchPaths.length, expandedPaths, useVirtualization])
 
-  const containerClass = cn('flex flex-col pl-[20px]', wrapText && 'overflow-x-hidden', className)
+  const containerClass = cn('flex flex-col pl-5', wrapText && 'overflow-x-hidden', className)
   const virtualizedContainerClass = cn('relative', wrapText && 'overflow-x-hidden', className)
   const listClass = wrapText ? 'overflow-x-hidden' : 'overflow-x-auto'
 
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
index e1952717922..20979de5d04 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/components/output-panel/output-panel.tsx
@@ -284,7 +284,7 @@ export const OutputPanel = React.memo(function OutputPanel({
       >
         {/* Horizontal Resize Handle */}
         <div
-          className='-ml-[4px] absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
+          className='-ml-1 absolute top-0 bottom-0 left-0 z-20 w-[8px] cursor-ew-resize'
           onMouseDown={handleOutputPanelResizeMouseDown}
           role='separator'
           aria-label='Resize output panel'
@@ -293,14 +293,14 @@ export const OutputPanel = React.memo(function OutputPanel({
 
         {/* Header */}
         <div
-          className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-[16px] pl-[10px]'
+          className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-2.5'
           onClick={handleHeaderClick}
         >
           <div className='flex items-center'>
             <Button
               variant='ghost'
               className={clsx(
-                'px-[8px] py-[6px] text-small',
+                'px-2 py-1.5 text-small',
                 !showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-icon)]'
               )}
               onClick={handleOutputButtonClick}
@@ -312,7 +312,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               <Button
                 variant='ghost'
                 className={clsx(
-                  'px-[8px] py-[6px] text-small',
+                  'px-2 py-1.5 text-small',
                   showInput ? '!text-[var(--text-primary)]' : '!text-[var(--text-icon)]'
                 )}
                 onClick={handleInputButtonClick}
@@ -322,7 +322,7 @@ export const OutputPanel = React.memo(function OutputPanel({
               </Button>
             )}
           </div>
-          <div className='flex flex-shrink-0 items-center gap-[8px]'>
+          <div className='flex flex-shrink-0 items-center gap-2'>
             {isOutputSearchActive ? (
               <Tooltip.Root>
                 <Tooltip.Trigger asChild>
@@ -472,7 +472,7 @@ export const OutputPanel = React.memo(function OutputPanel({
                 collisionPadding={0}
                 onClick={(e) => e.stopPropagation()}
                 style={{ minWidth: '140px', maxWidth: '160px' }}
-                className='gap-[2px]'
+                className='gap-0.5'
               >
                 <PopoverItem
                   active={structuredView}
@@ -500,7 +500,7 @@ export const OutputPanel = React.memo(function OutputPanel({
         {/* Search Overlay */}
         {isOutputSearchActive && (
           <div
-            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-[6px] rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-[6px] shadow-sm'
+            className='absolute top-[30px] right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-b-[4px] border border-[var(--border)] border-t-0 bg-[var(--bg)] px-1.5 shadow-sm'
             onClick={(e) => e.stopPropagation()}
             data-toolbar-root
             data-search-active='true'
@@ -511,11 +511,11 @@ export const OutputPanel = React.memo(function OutputPanel({
               value={outputSearchQuery}
               onChange={(e) => setOutputSearchQuery(e.target.value)}
               placeholder='Search...'
-              className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+              className='mr-0.5 h-[23px] w-[94px] text-caption'
             />
             <span
               className={clsx(
-                'w-[58px] font-medium text-[11px]',
+                'w-[58px] font-medium text-xs',
                 matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
               )}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
index 735fd1ac9fb..46912ea96f6 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/terminal.tsx
@@ -115,16 +115,16 @@ const BlockRow = memo(function BlockRow({
         onSelect(entry)
       }}
     >
-      <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+      <div className='flex min-w-0 flex-1 items-center gap-2'>
         <div
-          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+          className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
           style={{ background: bgColor }}
         >
           {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
         </div>
         <span
           className={clsx(
-            'min-w-0 truncate font-base text-[14px]',
+            'min-w-0 truncate font-base text-sm',
             hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
           )}
         >
@@ -133,7 +133,7 @@ const BlockRow = memo(function BlockRow({
       </div>
       <span
         className={clsx(
-          'flex-shrink-0 font-base text-[14px]',
+          'flex-shrink-0 font-base text-sm',
           !isRunning && 'text-[var(--text-secondary)]'
         )}
       >
@@ -187,10 +187,10 @@ const IterationNodeRow = memo(function IterationNodeRow({
           onToggle()
         }}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-[14px]',
+              'min-w-0 truncate font-base text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -207,7 +207,7 @@ const IterationNodeRow = memo(function IterationNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-[14px]',
+            'flex-shrink-0 font-base text-sm',
             !hasRunningChild && 'text-[var(--text-secondary)]'
           )}
         >
@@ -282,16 +282,16 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
           onToggleNode(nodeId)
         }}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
             {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
           </div>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-[14px]',
+              'min-w-0 truncate font-base text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -308,7 +308,7 @@ const SubflowNodeRow = memo(function SubflowNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-[14px]',
+            'flex-shrink-0 font-base text-sm',
             !hasRunningDescendant && 'text-[var(--text-secondary)]'
           )}
         >
@@ -393,16 +393,16 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
           if (hasChildren) onToggleNode(nodeId)
         }}
       >
-        <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+        <div className='flex min-w-0 flex-1 items-center gap-2'>
           <div
-            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ background: bgColor }}
           >
             {BlockIcon && <BlockIcon className='h-[10px] w-[10px] text-white' />}
           </div>
           <span
             className={clsx(
-              'min-w-0 truncate font-base text-[14px]',
+              'min-w-0 truncate font-base text-sm',
               hasError ? 'text-[var(--text-error)]' : 'text-[var(--text-primary)]'
             )}
           >
@@ -419,7 +419,7 @@ const WorkflowNodeRow = memo(function WorkflowNodeRow({
         </div>
         <span
           className={clsx(
-            'flex-shrink-0 font-base text-[14px]',
+            'flex-shrink-0 font-base text-sm',
             !hasRunningDescendant && 'text-[var(--text-secondary)]'
           )}
         >
@@ -535,12 +535,12 @@ const ExecutionGroupRow = memo(function ExecutionGroupRow({
   onToggleNode: (nodeId: string) => void
 }) {
   return (
-    <div className='flex flex-col px-[6px]'>
+    <div className='flex flex-col px-1.5'>
       {/* Separator between executions */}
-      {showSeparator && <div className='mx-[4px] mb-[6px] border-[var(--border)] border-t' />}
+      {showSeparator && <div className='mx-1 mb-1.5 border-[var(--border)] border-t' />}
 
       {/* Entry tree */}
-      <div className='ml-[4px] flex flex-col gap-[2px] pb-[6px]'>
+      <div className='ml-1 flex flex-col gap-0.5 pb-1.5'>
         {group.entryTree.map((node) => (
           <EntryNodeRow
             key={node.entry.id}
@@ -1261,7 +1261,7 @@ export const Terminal = memo(function Terminal() {
           >
             {/* Header */}
             <div
-              className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-[16px] pl-[16px]'
+              className='group flex h-[30px] flex-shrink-0 cursor-pointer items-center justify-between bg-[var(--bg)] pr-4 pl-4'
               onClick={handleHeaderClick}
             >
               {/* Left side - Logs label */}
@@ -1269,7 +1269,7 @@ export const Terminal = memo(function Terminal() {
 
               {/* Right side - Icons and options */}
               {!selectedEntry && (
-                <div className='flex items-center gap-[8px]'>
+                <div className='flex items-center gap-2'>
                   {/* Sort toggle */}
                   {allWorkflowEntries.length > 0 && (
                     <Tooltip.Root>
@@ -1395,7 +1395,7 @@ export const Terminal = memo(function Terminal() {
                       collisionPadding={0}
                       onClick={(e) => e.stopPropagation()}
                       style={{ minWidth: '140px', maxWidth: '160px' }}
-                      className='gap-[2px]'
+                      className='gap-0.5'
                     >
                       <PopoverItem
                         active={openOnRun}
@@ -1424,7 +1424,7 @@ export const Terminal = memo(function Terminal() {
             {/* Execution list */}
             <div ref={logsContainerRef} className='flex-1 overflow-y-auto overflow-x-hidden'>
               {executionGroups.length === 0 ? (
-                <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+                <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
                   No logs yet
                 </div>
               ) : (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
index 45c7edc9e89..0c97956e2ce 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/terminal/types.ts
@@ -50,15 +50,14 @@ export interface BlockInfo {
  * Common row styling classes for terminal components
  */
 export const ROW_STYLES = {
-  base: 'group flex cursor-pointer items-center justify-between gap-[8px] rounded-[8px] px-[8px]',
+  base: 'group flex cursor-pointer items-center justify-between gap-2 rounded-lg px-2',
   selected: 'bg-[var(--surface-active)]',
   hover: 'hover:bg-[var(--surface-active)]',
-  nested:
-    'mt-[2px] ml-[3px] flex min-w-0 flex-col gap-[2px] border-[var(--border)] border-l pl-[9px]',
+  nested: 'mt-0.5 ml-[3px] flex min-w-0 flex-col gap-0.5 border-[var(--border)] border-l pl-[9px]',
   iconButton: '!p-1.5 -m-1.5',
 } as const
 
 /**
  * Common badge styling for status badges
  */
-export const BADGE_STYLE = 'rounded-[4px] px-[4px] py-[0px] text-[11px]'
+export const BADGE_STYLE = 'rounded-sm px-1 py-[0px] text-xs'
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx
index 92b527ddbe0..cbbd2774f0b 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/training-modal/training-modal.tsx
@@ -359,16 +359,14 @@ export function TrainingModal() {
           <ModalBody className='flex min-h-[400px] flex-col overflow-hidden'>
             {/* Recording Banner */}
             {isTraining && (
-              <div className='mb-[16px] rounded-[8px] border bg-orange-50 p-[12px] dark:bg-orange-950/30'>
-                <p className='mb-[8px] font-medium text-[13px] text-orange-700 dark:text-orange-300'>
+              <div className='mb-4 rounded-lg border bg-orange-50 p-3 dark:bg-orange-950/30'>
+                <p className='mb-2 font-medium text-orange-700 text-small dark:text-orange-300'>
                   Recording: {currentTitle}
                 </p>
-                <p className='mb-[12px] text-[12px] text-[var(--text-secondary)]'>
-                  {currentPrompt}
-                </p>
-                <div className='flex gap-[8px]'>
+                <p className='mb-3 text-[var(--text-secondary)] text-caption'>{currentPrompt}</p>
+                <div className='flex gap-2'>
                   <Button variant='default' onClick={cancelTraining} className='flex-1'>
-                    <X className='mr-[6px] h-[14px] w-[14px]' />
+                    <X className='mr-1.5 h-[14px] w-[14px]' />
                     Cancel
                   </Button>
                   <Button
@@ -379,12 +377,12 @@ export function TrainingModal() {
                     }}
                     className='flex-1'
                   >
-                    <Check className='mr-[6px] h-[14px] w-[14px]' />
+                    <Check className='mr-1.5 h-[14px] w-[14px]' />
                     Save Dataset
                   </Button>
                 </div>
                 {startSnapshot && (
-                  <div className='mt-[8px] flex items-center gap-[12px] text-[12px]'>
+                  <div className='mt-2 flex items-center gap-3 text-caption'>
                     <span className='text-orange-600 dark:text-orange-400'>Starting state:</span>
                     <span className='text-[var(--text-primary)]'>
                       {Object.keys(startSnapshot.blocks).length} blocks
@@ -399,8 +397,8 @@ export function TrainingModal() {
             )}
 
             {/* New Training Session Tab */}
-            <ModalTabsContent value='new' className='flex flex-col gap-[16px]'>
-              <div className='flex items-center gap-[16px] text-[13px]'>
+            <ModalTabsContent value='new' className='flex flex-col gap-4'>
+              <div className='flex items-center gap-4 text-small'>
                 <span className='text-[var(--text-muted)]'>Current workflow:</span>
                 <span className='text-[var(--text-primary)]'>
                   {currentWorkflow.getBlockCount()} blocks
@@ -411,7 +409,7 @@ export function TrainingModal() {
                 </span>
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='title'>Title</Label>
                 <Input
                   id='title'
@@ -422,7 +420,7 @@ export function TrainingModal() {
                 />
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='prompt'>Training Prompt</Label>
                 <Textarea
                   id='prompt'
@@ -431,7 +429,7 @@ export function TrainingModal() {
                   onChange={(e) => setLocalPrompt(e.target.value)}
                   rows={3}
                 />
-                <p className='text-[12px] text-[var(--text-muted)]'>
+                <p className='text-[var(--text-muted)] text-caption'>
                   Describe what the next sequence of edits aim to achieve
                 </p>
               </div>
@@ -447,34 +445,34 @@ export function TrainingModal() {
             </ModalTabsContent>
 
             {/* Datasets Tab */}
-            <ModalTabsContent value='datasets' className='flex flex-col gap-[16px]'>
+            <ModalTabsContent value='datasets' className='flex flex-col gap-4'>
               {datasets.length === 0 ? (
-                <div className='py-[32px] text-center text-[13px] text-[var(--text-muted)]'>
+                <div className='py-8 text-center text-[var(--text-muted)] text-small'>
                   No training datasets yet. Start a new session to create one.
                 </div>
               ) : (
                 <>
                   <div className='flex items-center justify-between'>
-                    <div className='flex items-center gap-[12px]'>
+                    <div className='flex items-center gap-3'>
                       <Checkbox
                         checked={datasets.length > 0 && selectedDatasets.size === datasets.length}
                         onCheckedChange={toggleSelectAll}
                         disabled={datasets.length === 0}
                       />
-                      <p className='text-[13px] text-[var(--text-muted)]'>
+                      <p className='text-[var(--text-muted)] text-small'>
                         {selectedDatasets.size > 0
                           ? `${selectedDatasets.size} of ${datasets.length} selected`
                           : `${datasets.length} dataset${datasets.length !== 1 ? 's' : ''} recorded`}
                       </p>
                     </div>
-                    <div className='flex gap-[8px]'>
+                    <div className='flex gap-2'>
                       {selectedDatasets.size > 0 && (
                         <Button
                           variant='primary'
                           onClick={handleSendSelected}
                           disabled={sendingSelected}
                         >
-                          <Send className='mr-[6px] h-[12px] w-[12px]' />
+                          <Send className='mr-1.5 h-[12px] w-[12px]' />
                           {sendingSelected
                             ? 'Sending...'
                             : `Send ${selectedDatasets.size} Selected`}
@@ -485,7 +483,7 @@ export function TrainingModal() {
                         onClick={handleSendAll}
                         disabled={datasets.length === 0 || sendingAll}
                       >
-                        <Send className='mr-[6px] h-[12px] w-[12px]' />
+                        <Send className='mr-1.5 h-[12px] w-[12px]' />
                         {sendingAll ? 'Sending...' : 'Send All'}
                       </Button>
                       <Button
@@ -493,7 +491,7 @@ export function TrainingModal() {
                         onClick={handleExportAll}
                         disabled={datasets.length === 0}
                       >
-                        <Upload className='mr-[6px] h-[12px] w-[12px]' />
+                        <Upload className='mr-1.5 h-[12px] w-[12px]' />
                         Export
                       </Button>
                       <Button
@@ -501,24 +499,24 @@ export function TrainingModal() {
                         onClick={clearDatasets}
                         disabled={datasets.length === 0}
                       >
-                        <Trash2 className='mr-[6px] h-[12px] w-[12px]' />
+                        <Trash2 className='mr-1.5 h-[12px] w-[12px]' />
                         Clear
                       </Button>
                     </div>
                   </div>
 
                   <div className='max-h-[320px] overflow-y-auto'>
-                    <div className='flex flex-col gap-[8px]'>
+                    <div className='flex flex-col gap-2'>
                       {datasets.map((dataset, index) => (
                         <div
                           key={dataset.id}
-                          className='rounded-[8px] border bg-[var(--surface-3)] transition-colors hover:bg-[var(--surface-4)]'
+                          className='rounded-lg border bg-[var(--surface-3)] transition-colors hover-hover:bg-[var(--surface-4)]'
                         >
-                          <div className='flex items-start p-[12px]'>
+                          <div className='flex items-start p-3'>
                             <Checkbox
                               checked={selectedDatasets.has(dataset.id)}
                               onCheckedChange={() => toggleDatasetSelection(dataset.id)}
-                              className='mt-[2px] mr-[12px]'
+                              className='mt-0.5 mr-3'
                             />
                             <button
                               className='flex flex-1 items-center justify-between text-left'
@@ -529,21 +527,21 @@ export function TrainingModal() {
                               }
                             >
                               <div className='flex-1'>
-                                <p className='font-medium text-[14px] text-[var(--text-primary)]'>
+                                <p className='font-medium text-[var(--text-primary)] text-sm'>
                                   {dataset.title}
                                 </p>
-                                <p className='text-[12px] text-[var(--text-muted)]'>
+                                <p className='text-[var(--text-muted)] text-caption'>
                                   {dataset.prompt.substring(0, 50)}
                                   {dataset.prompt.length > 50 ? '...' : ''}
                                 </p>
                               </div>
-                              <div className='flex items-center gap-[12px]'>
+                              <div className='flex items-center gap-3'>
                                 {dataset.sentAt && (
-                                  <span className='inline-flex items-center rounded-full bg-green-50 px-[8px] py-[2px] text-[11px] text-green-700 ring-1 ring-green-600/20 ring-inset dark:bg-green-900/20 dark:text-green-300'>
-                                    <CheckCircle2 className='mr-[4px] h-[10px] w-[10px]' /> Sent
+                                  <span className='inline-flex items-center rounded-full bg-green-50 px-2 py-0.5 text-green-700 text-xs ring-1 ring-green-600/20 ring-inset dark:bg-green-900/20 dark:text-green-300'>
+                                    <CheckCircle2 className='mr-1 h-[10px] w-[10px]' /> Sent
                                   </span>
                                 )}
-                                <span className='text-[12px] text-[var(--text-muted)]'>
+                                <span className='text-[var(--text-muted)] text-caption'>
                                   {dataset.editSequence.length} ops
                                 </span>
                                 <ChevronDown
@@ -557,21 +555,21 @@ export function TrainingModal() {
                           </div>
 
                           {expandedDataset === dataset.id && (
-                            <div className='flex flex-col gap-[12px] border-t px-[12px] pt-[12px] pb-[16px]'>
+                            <div className='flex flex-col gap-3 border-t px-3 pt-3 pb-4'>
                               <div>
-                                <p className='mb-[4px] font-medium text-[13px] text-[var(--text-primary)]'>
+                                <p className='mb-1 font-medium text-[var(--text-primary)] text-small'>
                                   Prompt
                                 </p>
-                                <p className='text-[13px] text-[var(--text-secondary)]'>
+                                <p className='text-[var(--text-secondary)] text-small'>
                                   {dataset.prompt}
                                 </p>
                               </div>
 
                               <div>
-                                <p className='mb-[4px] font-medium text-[13px] text-[var(--text-primary)]'>
+                                <p className='mb-1 font-medium text-[var(--text-primary)] text-small'>
                                   Statistics
                                 </p>
-                                <div className='grid grid-cols-2 gap-[8px] text-[13px]'>
+                                <div className='grid grid-cols-2 gap-2 text-small'>
                                   <div>
                                     <span className='text-[var(--text-muted)]'>Duration:</span>{' '}
                                     <span className='text-[var(--text-secondary)]'>
@@ -604,11 +602,11 @@ export function TrainingModal() {
                               </div>
 
                               <div>
-                                <p className='mb-[4px] font-medium text-[13px] text-[var(--text-primary)]'>
+                                <p className='mb-1 font-medium text-[var(--text-primary)] text-small'>
                                   Edit Sequence
                                 </p>
-                                <div className='max-h-[100px] overflow-y-auto rounded-[6px] border bg-[var(--surface-5)] p-[8px]'>
-                                  <ul className='flex flex-col gap-[4px] font-mono text-[11px]'>
+                                <div className='max-h-[100px] overflow-y-auto rounded-md border bg-[var(--surface-5)] p-2'>
+                                  <ul className='flex flex-col gap-1 font-mono text-xs'>
                                     {formatEditSequence(dataset.editSequence).map((desc, i) => (
                                       <li key={i} className='text-[var(--text-secondary)]'>
                                         {desc}
@@ -618,7 +616,7 @@ export function TrainingModal() {
                                 </div>
                               </div>
 
-                              <div className='flex gap-[8px]'>
+                              <div className='flex gap-2'>
                                 <Button
                                   variant={
                                     sentDatasets.has(dataset.id)
@@ -641,17 +639,17 @@ export function TrainingModal() {
                                     'Sending...'
                                   ) : sentDatasets.has(dataset.id) ? (
                                     <>
-                                      <CheckCircle2 className='mr-[6px] h-[12px] w-[12px]' />
+                                      <CheckCircle2 className='mr-1.5 h-[12px] w-[12px]' />
                                       Sent
                                     </>
                                   ) : failedDatasets.has(dataset.id) ? (
                                     <>
-                                      <XCircle className='mr-[6px] h-[12px] w-[12px]' />
+                                      <XCircle className='mr-1.5 h-[12px] w-[12px]' />
                                       Failed
                                     </>
                                   ) : (
                                     <>
-                                      <Send className='mr-[6px] h-[12px] w-[12px]' />
+                                      <Send className='mr-1.5 h-[12px] w-[12px]' />
                                       Send
                                     </>
                                   )}
@@ -660,7 +658,7 @@ export function TrainingModal() {
                                   variant='default'
                                   onClick={() => setViewingDataset(dataset.id)}
                                 >
-                                  <Eye className='mr-[6px] h-[12px] w-[12px]' />
+                                  <Eye className='mr-1.5 h-[12px] w-[12px]' />
                                   View
                                 </Button>
                                 <Button
@@ -669,12 +667,12 @@ export function TrainingModal() {
                                 >
                                   {copiedId === dataset.id ? (
                                     <>
-                                      <Check className='mr-[6px] h-[12px] w-[12px]' />
+                                      <Check className='mr-1.5 h-[12px] w-[12px]' />
                                       Copied!
                                     </>
                                   ) : (
                                     <>
-                                      <Clipboard className='mr-[6px] h-[12px] w-[12px]' />
+                                      <Clipboard className='mr-1.5 h-[12px] w-[12px]' />
                                       Copy
                                     </>
                                   )}
@@ -682,8 +680,8 @@ export function TrainingModal() {
                               </div>
 
                               {viewingDataset === dataset.id && (
-                                <div className='rounded-[6px] border bg-[var(--surface-5)] p-[12px]'>
-                                  <pre className='max-h-[200px] overflow-auto text-[11px] text-[var(--text-secondary)]'>
+                                <div className='rounded-md border bg-[var(--surface-5)] p-3'>
+                                  <pre className='max-h-[200px] overflow-auto text-[var(--text-secondary)] text-xs'>
                                     {JSON.stringify(
                                       {
                                         prompt: dataset.prompt,
@@ -707,8 +705,8 @@ export function TrainingModal() {
             </ModalTabsContent>
 
             {/* Send Live State Tab */}
-            <ModalTabsContent value='live' className='flex flex-col gap-[16px]'>
-              <div className='flex items-center gap-[16px] text-[13px]'>
+            <ModalTabsContent value='live' className='flex flex-col gap-4'>
+              <div className='flex items-center gap-4 text-small'>
                 <span className='text-[var(--text-muted)]'>Current workflow:</span>
                 <span className='text-[var(--text-primary)]'>
                   {currentWorkflow.getBlockCount()} blocks
@@ -719,7 +717,7 @@ export function TrainingModal() {
                 </span>
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='live-title'>Title</Label>
                 <Input
                   id='live-title'
@@ -728,12 +726,12 @@ export function TrainingModal() {
                   onChange={(e) => setLiveWorkflowTitle(e.target.value)}
                   className='h-9'
                 />
-                <p className='text-[12px] text-[var(--text-muted)]'>
+                <p className='text-[var(--text-muted)] text-caption'>
                   A short title identifying this workflow
                 </p>
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <Label htmlFor='live-description'>Description</Label>
                 <Textarea
                   id='live-description'
@@ -742,7 +740,7 @@ export function TrainingModal() {
                   onChange={(e) => setLiveWorkflowDescription(e.target.value)}
                   rows={3}
                 />
-                <p className='text-[12px] text-[var(--text-muted)]'>
+                <p className='text-[var(--text-muted)] text-caption'>
                   Explain the purpose and functionality of this workflow
                 </p>
               </div>
@@ -758,41 +756,41 @@ export function TrainingModal() {
                 variant='primary'
                 className={cn(
                   'w-full',
-                  liveWorkflowSent && '!bg-green-600 !text-white hover:!bg-green-700',
-                  liveWorkflowFailed && '!bg-red-600 !text-white hover:!bg-red-700'
+                  liveWorkflowSent && '!bg-green-600 !text-white hover-hover:!bg-green-700',
+                  liveWorkflowFailed && '!bg-red-600 !text-white hover-hover:!bg-red-700'
                 )}
               >
                 {sendingLiveWorkflow ? (
                   'Sending...'
                 ) : liveWorkflowSent ? (
                   <>
-                    <CheckCircle2 className='mr-[6px] h-[14px] w-[14px]' />
+                    <CheckCircle2 className='mr-1.5 h-[14px] w-[14px]' />
                     Sent Successfully
                   </>
                 ) : liveWorkflowFailed ? (
                   <>
-                    <XCircle className='mr-[6px] h-[14px] w-[14px]' />
+                    <XCircle className='mr-1.5 h-[14px] w-[14px]' />
                     Failed - Try Again
                   </>
                 ) : (
                   <>
-                    <Send className='mr-[6px] h-[14px] w-[14px]' />
+                    <Send className='mr-1.5 h-[14px] w-[14px]' />
                     Send Live Workflow State
                   </>
                 )}
               </Button>
 
               {liveWorkflowSent && (
-                <div className='rounded-[8px] border bg-green-50 p-[12px] dark:bg-green-950/30'>
-                  <p className='text-[13px] text-green-700 dark:text-green-300'>
+                <div className='rounded-lg border bg-green-50 p-3 dark:bg-green-950/30'>
+                  <p className='text-green-700 text-small dark:text-green-300'>
                     Workflow state sent successfully!
                   </p>
                 </div>
               )}
 
               {liveWorkflowFailed && (
-                <div className='rounded-[8px] border bg-red-50 p-[12px] dark:bg-red-950/30'>
-                  <p className='text-[13px] text-red-700 dark:text-red-300'>
+                <div className='rounded-lg border bg-red-50 p-3 dark:bg-red-950/30'>
+                  <p className='text-red-700 text-small dark:text-red-300'>
                     Failed to send workflow state. Please try again.
                   </p>
                 </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
index 08b09689604..d8251ff9792 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/variables/variables.tsx
@@ -284,7 +284,7 @@ export function Variables() {
       const isCollapsed = collapsedById[variable.id] ?? false
       return (
         <div
-          className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-[10px] py-[5px]'
+          className='flex cursor-pointer items-center justify-between rounded-t-[4px] bg-[var(--surface-4)] px-2.5 py-[5px]'
           onClick={() => toggleCollapsed(variable.id)}
           onKeyDown={(e) => handleHeaderKeyDown(e, variable.id)}
           role='button'
@@ -292,8 +292,8 @@ export function Variables() {
           aria-expanded={!isCollapsed}
           aria-controls={`variable-content-${variable.id}`}
         >
-          <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
-            <span className='block truncate font-medium text-[14px] text-[var(--text-tertiary)]'>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
+            <span className='block truncate font-medium text-[var(--text-tertiary)] text-sm'>
               {variable.name || `Variable ${index + 1}`}
             </span>
             {variable.name && (
@@ -308,7 +308,7 @@ export function Variables() {
               e.stopPropagation()
               handleRemoveVariable(variable.id)
             }}
-            className='h-auto p-0 text-[var(--text-error)] hover:text-[var(--text-error)]'
+            className='h-auto p-0 text-[var(--text-error)] hover-hover:text-[var(--text-error)]'
             aria-label={`Delete ${variable.name || `variable ${index + 1}`}`}
           >
             <Trash style={{ width: `${ICON_SIZE}px`, height: `${ICON_SIZE}px` }} />
@@ -393,7 +393,7 @@ export function Variables() {
   return (
     <div
       ref={preventZoomRef}
-      className='fixed z-30 flex flex-col overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] px-[10px] pt-[2px] pb-[8px]'
+      className='fixed z-30 flex flex-col overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--surface-1)] px-2.5 pt-0.5 pb-2'
       style={{
         left: `${actualPosition.x}px`,
         top: `${actualPosition.y}px`,
@@ -411,11 +411,11 @@ export function Variables() {
         onMouseDown={handleMouseDown}
       >
         <div className='flex items-center'>
-          <span className='flex-shrink-0 font-medium text-[14px] text-[var(--text-primary)]'>
+          <span className='flex-shrink-0 font-medium text-[var(--text-primary)] text-sm'>
             Variables
           </span>
         </div>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <Button
             variant='ghost'
             className='!p-1.5 -m-1.5'
@@ -439,19 +439,19 @@ export function Variables() {
       </div>
 
       {/* Content */}
-      <div className='flex flex-1 flex-col overflow-hidden pt-[8px]'>
+      <div className='flex flex-1 flex-col overflow-hidden pt-2'>
         {workflowVariables.length === 0 ? (
-          <div className='flex h-full items-center justify-center text-[#8D8D8D] text-[13px]'>
+          <div className='flex h-full items-center justify-center text-[var(--text-placeholder)] text-small'>
             {STRINGS.emptyState}
           </div>
         ) : (
           <div className='h-full overflow-y-auto overflow-x-hidden'>
-            <div className='w-full max-w-full space-y-[8px] overflow-hidden'>
+            <div className='w-full max-w-full space-y-2 overflow-hidden'>
               {workflowVariables.map((variable, index) => (
                 <div
                   key={variable.id}
                   className={cn(
-                    'rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-1)]',
+                    'rounded-sm border border-[var(--border-1)] bg-[var(--surface-1)]',
                     (collapsedById[variable.id] ?? false) ? 'overflow-hidden' : 'overflow-visible'
                   )}
                 >
@@ -460,10 +460,10 @@ export function Variables() {
                   {!(collapsedById[variable.id] ?? false) && (
                     <div
                       id={`variable-content-${variable.id}`}
-                      className='flex flex-col gap-[6px] rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-[10px] pt-[6px] pb-[10px]'
+                      className='flex flex-col gap-1.5 rounded-b-[4px] border-[var(--border-1)] border-t bg-[var(--surface-2)] px-2.5 pt-1.5 pb-2.5'
                     >
-                      <div className='flex flex-col gap-[4px]'>
-                        <Label className='text-[13px]'>{STRINGS.labels.name}</Label>
+                      <div className='flex flex-col gap-1'>
+                        <Label className='text-small'>{STRINGS.labels.name}</Label>
                         <Input
                           name='name'
                           autoComplete='off'
@@ -480,8 +480,8 @@ export function Variables() {
                         )}
                       </div>
 
-                      <div className='space-y-[4px]'>
-                        <Label className='text-[13px]'>{STRINGS.labels.type}</Label>
+                      <div className='space-y-1'>
+                        <Label className='text-small'>{STRINGS.labels.type}</Label>
                         <Combobox
                           options={TYPE_OPTIONS}
                           value={variable.type}
@@ -489,8 +489,8 @@ export function Variables() {
                         />
                       </div>
 
-                      <div className='space-y-[4px]'>
-                        <Label className='text-[13px]'>{STRINGS.labels.value}</Label>
+                      <div className='space-y-1'>
+                        <Label className='text-small'>{STRINGS.labels.value}</Label>
                         <div className='relative'>{renderValueInput(variable)}</div>
                       </div>
                     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
index ebd5e9a1a36..97cc72eb9df 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/wand-prompt-bar/wand-prompt-bar.tsx
@@ -115,7 +115,7 @@ export function WandPromptBar({
           variant='ghost'
           size='icon'
           onClick={handleCancel}
-          className='h-8 w-8 rounded-full text-muted-foreground hover:bg-accent/50 hover:text-foreground'
+          className='h-8 w-8 rounded-full text-muted-foreground hover-hover:bg-accent/50 hover-hover:text-foreground'
         >
           <XIcon className='h-4 w-4' />
         </Button>
@@ -125,7 +125,7 @@ export function WandPromptBar({
             variant='ghost'
             size='icon'
             onClick={() => onSubmit(promptValue)}
-            className='h-8 w-8 rounded-full text-muted-foreground hover:bg-primary/10 hover:text-foreground'
+            className='h-8 w-8 rounded-full text-muted-foreground hover-hover:bg-primary/10 hover-hover:text-foreground'
             disabled={isLoading || isStreaming || !promptValue.trim()}
           >
             <SendIcon className='h-4 w-4' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
index a3644fe1671..822747d4389 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-block/workflow-block.tsx
@@ -828,9 +828,9 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <div className='flex items-center gap-[8px]'>
+    <div className='flex items-center gap-2'>
       <span
-        className='min-w-0 truncate text-[14px] text-[var(--text-tertiary)] capitalize'
+        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
         title={title}
       >
         {title}
@@ -838,7 +838,7 @@ const SubBlockRow = memo(function SubBlockRow({
       {displayValue !== undefined && (
         <span
           className={cn(
-            'flex-1 truncate text-right text-[14px] text-[var(--text-primary)]',
+            'flex-1 truncate text-right text-[var(--text-primary)] text-sm',
             isMonospaceField && 'font-mono'
           )}
           title={displayValue}
@@ -1090,12 +1090,12 @@ export const WorkflowBlock = memo(function WorkflowBlock({
     const colorClasses = isError ? '!bg-[var(--text-error)]' : '!bg-[var(--workflow-edge)]'
 
     const positionClasses = {
-      left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover:!left-[-11px] hover:!w-[10px] hover:!rounded-l-full',
+      left: '!left-[-8px] !h-5 !w-[7px] !rounded-l-[2px] !rounded-r-none hover-hover:!left-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-l-full',
       right:
-        '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover:!right-[-11px] hover:!w-[10px] hover:!rounded-r-full',
-      top: '!top-[-8px] !h-[7px] !w-5 !rounded-t-[2px] !rounded-b-none hover:!top-[-11px] hover:!h-[10px] hover:!rounded-t-full',
+        '!right-[-8px] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none hover-hover:!right-[-11px] hover-hover:!w-[10px] hover-hover:!rounded-r-full',
+      top: '!top-[-8px] !h-[7px] !w-5 !rounded-t-[2px] !rounded-b-none hover-hover:!top-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-t-full',
       bottom:
-        '!bottom-[-8px] !h-[7px] !w-5 !rounded-b-[2px] !rounded-t-none hover:!bottom-[-11px] hover:!h-[10px] hover:!rounded-b-full',
+        '!bottom-[-8px] !h-[7px] !w-5 !rounded-b-[2px] !rounded-t-none hover-hover:!bottom-[-11px] hover-hover:!h-[10px] hover-hover:!rounded-b-full',
     }
 
     return cn(baseClasses, colorClasses, positionClasses[position])
@@ -1194,7 +1194,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         ref={contentRef}
         onClick={handleClick}
         className={cn(
-          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
+          'workflow-drag-handle relative z-[20] w-[250px] cursor-grab select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] [&:active]:cursor-grabbing'
         )}
       >
         {isPending && (
@@ -1228,13 +1228,13 @@ export const WorkflowBlock = memo(function WorkflowBlock({
 
         <div
           className={cn(
-            'flex items-center justify-between p-[8px]',
+            'flex items-center justify-between p-2',
             hasContentBelowHeader && 'border-[var(--border-1)] border-b'
           )}
         >
-          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
+          <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
             <div
-              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
               style={{
                 background: isEnabled ? config.bgColor : 'gray',
               }}
@@ -1243,7 +1243,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
             </div>
             <span
               className={cn(
-                'truncate font-medium text-[16px]',
+                'truncate font-medium text-md',
                 !isEnabled && runPathStatus !== 'success' && 'text-[var(--text-muted)]'
               )}
               title={name}
@@ -1352,7 +1352,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
               </Tooltip.Root>
             )}
             {/* {isActive && (
-              <div className='mr-[2px] ml-2 flex h-[16px] w-[16px] items-center justify-center'>
+              <div className='mr-0.5 ml-2 flex h-[16px] w-[16px] items-center justify-center'>
                 <div
                   className='h-full w-full animate-spin-slow rounded-full border-[2.5px] border-[rgba(255,102,0,0.25)] border-t-[var(--warning)]'
                   aria-hidden='true'
@@ -1363,7 +1363,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
         </div>
 
         {hasContentBelowHeader && (
-          <div className='flex flex-col gap-[8px] p-[8px]'>
+          <div className='flex flex-col gap-2 p-2'>
             {type === 'condition' ? (
               conditionRows.map((cond) => (
                 <SubBlockRow key={cond.id} title={cond.title} value={getDisplayValue(cond.value)} />
@@ -1556,9 +1556,7 @@ export const WorkflowBlock = memo(function WorkflowBlock({
           </>
         )}
         {hasRing && (
-          <div
-            className={cn('pointer-events-none absolute inset-0 z-40 rounded-[8px]', ringStyles)}
-          />
+          <div className={cn('pointer-events-none absolute inset-0 z-40 rounded-lg', ringStyles)} />
         )}
       </div>
     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
index 53b0d88eb51..8dcb53b2d14 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/workflow-controls/workflow-controls.tsx
@@ -86,7 +86,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
   return (
     <>
       <div
-        className='absolute bottom-[16px] left-[16px] z-10 flex h-[36px] items-center gap-[2px] rounded-[8px] border border-[var(--border)] bg-[var(--surface-1)] p-[4px]'
+        className='absolute bottom-4 left-[16px] z-10 flex h-[36px] items-center gap-0.5 rounded-lg border border-[var(--border)] bg-[var(--surface-1)] p-1'
         onContextMenu={handleContextMenu}
       >
         {/* Canvas Mode Selector */}
@@ -98,9 +98,9 @@ export const WorkflowControls = memo(function WorkflowControls() {
         >
           <Tooltip.Root>
             <PopoverTrigger asChild>
-              <div className='flex cursor-pointer items-center gap-[4px]'>
+              <div className='flex cursor-pointer items-center gap-1'>
                 <Tooltip.Trigger asChild>
-                  <Button className='h-[28px] w-[28px] rounded-[6px] p-0' variant='active'>
+                  <Button className='h-[28px] w-[28px] rounded-md p-0' variant='active'>
                     {mode === 'hand' ? (
                       <Hand className='h-[14px] w-[14px]' />
                     ) : (
@@ -108,7 +108,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
                     )}
                   </Button>
                 </Tooltip.Trigger>
-                <Button className='-m-[4px] !p-[6px] group' variant='ghost'>
+                <Button className='-m-1 !p-1.5 group' variant='ghost'>
                   <ChevronDown
                     className={`h-[8px] w-[10px] text-[var(--text-muted)] transition-transform duration-100 group-hover:text-[var(--text-secondary)] ${isCanvasModeOpen ? 'rotate-180' : ''}`}
                   />
@@ -139,13 +139,13 @@ export const WorkflowControls = memo(function WorkflowControls() {
           </PopoverContent>
         </Popover>
 
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
+        <div className='mx-1 h-[20px] w-[1px] bg-[var(--border)]' />
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+              className='h-[28px] w-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={undo}
               disabled={!canUndo}
             >
@@ -161,7 +161,7 @@ export const WorkflowControls = memo(function WorkflowControls() {
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+              className='h-[28px] w-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={redo}
               disabled={!canRedo}
             >
@@ -173,13 +173,13 @@ export const WorkflowControls = memo(function WorkflowControls() {
           </Tooltip.Content>
         </Tooltip.Root>
 
-        <div className='mx-[4px] h-[20px] w-[1px] bg-[var(--border)]' />
+        <div className='mx-1 h-[20px] w-[1px] bg-[var(--border)]' />
 
         <Tooltip.Root>
           <Tooltip.Trigger asChild>
             <Button
               variant='ghost'
-              className='h-[28px] w-[28px] rounded-[6px] p-0 hover:bg-[var(--surface-5)]'
+              className='h-[28px] w-[28px] rounded-md p-0 hover-hover:bg-[var(--surface-5)]'
               onClick={handleFitToView}
             >
               <Scan className='h-[16px] w-[16px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index f2f6c40a0c4..222eaccd171 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -190,7 +190,7 @@ function CollapsibleSection({
   const [isExpanded, setIsExpanded] = useState(defaultExpanded)
 
   return (
-    <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+    <div className='flex min-w-0 flex-col gap-2 overflow-hidden border-[var(--border)] border-b px-3 py-2.5'>
       <div
         className='group flex cursor-pointer items-center justify-between'
         onClick={() => setIsExpanded(!isExpanded)}
@@ -207,7 +207,7 @@ function CollapsibleSection({
       >
         <span
           className={cn(
-            'font-medium text-[12px] transition-colors',
+            'font-medium text-caption transition-colors',
             isError
               ? 'text-[var(--text-error)]'
               : 'text-[var(--text-tertiary)] group-hover:text-[var(--text-primary)]'
@@ -228,8 +228,8 @@ function CollapsibleSection({
       {isExpanded && (
         <>
           {isEmpty ? (
-            <div className='rounded-[6px] bg-[var(--surface-3)] px-[10px] py-[8px]'>
-              <span className='text-[12px] text-[var(--text-tertiary)]'>{emptyMessage}</span>
+            <div className='rounded-md bg-[var(--surface-3)] px-2.5 py-2'>
+              <span className='text-[var(--text-tertiary)] text-caption'>{emptyMessage}</span>
             </div>
           ) : (
             children
@@ -332,7 +332,7 @@ function ConnectionsSection({
 
       {/* Header with Chevron */}
       <div
-        className='flex flex-shrink-0 cursor-pointer items-center gap-[8px] px-[10px] pt-[5px] pb-[5px]'
+        className='flex flex-shrink-0 cursor-pointer items-center gap-2 px-2.5 pt-[5px] pb-[5px]'
         onClick={onToggleCollapsed}
         onKeyDown={(e) => {
           if (e.key === 'Enter' || e.key === ' ') {
@@ -347,11 +347,11 @@ function ConnectionsSection({
         <ChevronUp
           className={cn('h-[14px] w-[14px] transition-transform', !isAtMinHeight && 'rotate-180')}
         />
-        <div className='font-medium text-[13px] text-[var(--text-primary)]'>Connections</div>
+        <div className='font-medium text-[var(--text-primary)] text-small'>Connections</div>
       </div>
 
       {/* Content - styled like ConnectionBlocks */}
-      <div className='flex-1 space-y-[2px] overflow-y-auto overflow-x-hidden px-[6px] pb-[8px]'>
+      <div className='flex-1 space-y-0.5 overflow-y-auto overflow-x-hidden px-1.5 pb-2'>
         {connections.map((connection) => {
           const blockConfig = getBlock(connection.blockType)
           const Icon = blockConfig?.icon
@@ -360,17 +360,17 @@ function ConnectionsSection({
           const hasFields = connection.fields.length > 0
 
           return (
-            <div key={connection.blockId} className='mb-[2px] last:mb-0'>
+            <div key={connection.blockId} className='mb-0.5 last:mb-0'>
               {/* Block header - styled like ConnectionItem */}
               <div
                 className={cn(
-                  'group flex h-[26px] items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
+                  'group flex h-[26px] items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]',
                   hasFields && 'cursor-pointer'
                 )}
                 onClick={() => hasFields && toggleBlock(connection.blockId)}
               >
                 <div
-                  className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                  className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
                   style={{ background: bgColor }}
                 >
                   {Icon && (
@@ -404,12 +404,12 @@ function ConnectionsSection({
 
               {/* Fields - styled like FieldItem but showing resolved values */}
               {isExpanded && hasFields && (
-                <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-                  <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+                <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+                  <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                   {connection.fields.map((field) => (
                     <div
                       key={field.tag}
-                      className='group flex min-h-[26px] flex-wrap items-baseline gap-x-[8px] gap-y-[2px] rounded-[8px] px-[6px] py-[4px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                      className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                       onContextMenu={(e) => handleValueContextMenu(e, field.value)}
                     >
                       <span
@@ -433,12 +433,12 @@ function ConnectionsSection({
 
         {/* Workflow Variables */}
         {workflowVars.length > 0 && (
-          <div className='mb-[2px] last:mb-0'>
+          <div className='mb-0.5 last:mb-0'>
             <div
-              className='group flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+              className='group flex h-[26px] cursor-pointer items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
               onClick={() => setExpandedVariables(!expandedVariables)}
             >
-              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-[#8B5CF6]'>
+              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#8B5CF6]'>
                 <span className='font-bold text-[9px] text-white'>V</span>
               </div>
               <span
@@ -458,12 +458,12 @@ function ConnectionsSection({
               />
             </div>
             {expandedVariables && (
-              <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-                <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+              <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+                <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                 {workflowVars.map((v) => (
                   <div
                     key={v.ref}
-                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-[8px] gap-y-[2px] rounded-[8px] px-[6px] py-[4px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                     onContextMenu={(e) => handleValueContextMenu(e, v.value)}
                   >
                     <span className='flex-shrink-0 font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
@@ -479,12 +479,12 @@ function ConnectionsSection({
 
         {/* Secrets */}
         {envVars.length > 0 && (
-          <div className='mb-[2px] last:mb-0'>
+          <div className='mb-0.5 last:mb-0'>
             <div
-              className='group flex h-[26px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[6px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+              className='group flex h-[26px] cursor-pointer items-center gap-2 rounded-lg px-1.5 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
               onClick={() => setExpandedEnvVars(!expandedEnvVars)}
             >
-              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px] bg-[#6B7280]'>
+              <div className='relative flex h-[14px] w-[14px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm bg-[#6B7280]'>
                 <span className='font-bold text-[9px] text-white'>E</span>
               </div>
               <span
@@ -504,12 +504,12 @@ function ConnectionsSection({
               />
             </div>
             {expandedEnvVars && (
-              <div className='relative mt-[2px] ml-[12px] space-y-[2px] pl-[10px]'>
-                <div className='pointer-events-none absolute top-[4px] bottom-[4px] left-0 w-px bg-[var(--border)]' />
+              <div className='relative mt-0.5 ml-3 space-y-0.5 pl-2.5'>
+                <div className='pointer-events-none absolute top-1 bottom-1 left-0 w-px bg-[var(--border)]' />
                 {envVars.map((v) => (
                   <div
                     key={v.ref}
-                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-[8px] gap-y-[2px] rounded-[8px] px-[6px] py-[4px] text-[14px] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]'
+                    className='group flex min-h-[26px] flex-wrap items-baseline gap-x-2 gap-y-0.5 rounded-lg px-1.5 py-1 text-sm hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]'
                   >
                     <span className='flex-shrink-0 font-medium text-[var(--text-secondary)] group-hover:text-[var(--text-primary)]'>
                       {v.name}
@@ -622,10 +622,10 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
   }
 
   return (
-    <div className='flex-1 overflow-y-auto overflow-x-hidden pt-[8px] pb-[8px]'>
+    <div className='flex-1 overflow-y-auto overflow-x-hidden pt-2 pb-2'>
       {/* Type Selection - matches SubflowEditor */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           {isLoop ? 'Loop Type' : 'Parallel Type'}
         </Label>
         <Combobox
@@ -638,7 +638,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
       </div>
 
       {/* Dashed Line Separator - matches SubflowEditor */}
-      <div className='px-[2px] pt-[16px] pb-[10px]'>
+      <div className='px-0.5 pt-4 pb-2.5'>
         <div
           className='h-[1.25px]'
           style={{
@@ -650,7 +650,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
 
       {/* Configuration - matches SubflowEditor */}
       <div>
-        <Label className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'>
+        <Label className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'>
           {getConfigLabel()}
         </Label>
 
@@ -661,9 +661,9 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
               value={iterations.toString()}
               onChange={() => {}}
               disabled
-              className='mb-[4px]'
+              className='mb-1'
             />
-            <div className='text-[10px] text-muted-foreground'>
+            <div className='text-micro text-muted-foreground'>
               Enter a number between 1 and {config.maxIterations}
             </div>
           </div>
@@ -675,7 +675,7 @@ function SubflowConfigDisplay({ block, loop, parallel }: SubflowConfigDisplayPro
                   {isConditionMode ? '<counter.value> < 10' : "['item1', 'item2', 'item3']"}
                 </Code.Placeholder>
                 <div
-                  className='min-h-[24px] whitespace-pre-wrap break-all px-[12px] py-[8px] font-mono text-[13px] text-[var(--text-secondary)]'
+                  className='min-h-[24px] whitespace-pre-wrap break-all px-3 py-2 font-mono text-[var(--text-secondary)] text-small'
                   style={{ pointerEvents: 'none' }}
                 >
                   {editorValue || (
@@ -1093,18 +1093,18 @@ function PreviewEditorContent({
     return (
       <div className='relative flex h-full w-80 flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
         {/* Header - styled like subflow header */}
-        <div className='mx-[-1px] flex flex-shrink-0 items-center gap-[8px] rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-[12px] py-[6px]'>
+        <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
           <div
-            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ backgroundColor: subflowBgColor }}
           >
             <SubflowIcon className='h-[12px] w-[12px] text-white' />
           </div>
-          <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+          <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-sm'>
             {subflowName}
           </span>
           {onClose && (
-            <Button variant='ghost' className='!p-[4px] flex-shrink-0' onClick={onClose}>
+            <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
               <X className='h-[14px] w-[14px]' />
             </Button>
           )}
@@ -1113,7 +1113,7 @@ function PreviewEditorContent({
         {/* Subflow Configuration */}
         <div className='flex flex-1 flex-col overflow-hidden pt-[0px]'>
           <div className='flex-1 overflow-y-auto overflow-x-hidden'>
-            <div className='readonly-preview px-[8px]'>
+            <div className='readonly-preview px-2'>
               <style>{READONLY_PREVIEW_STYLES}</style>
               <SubflowConfigDisplay block={block} loop={loopConfig} parallel={parallelConfig} />
             </div>
@@ -1126,14 +1126,14 @@ function PreviewEditorContent({
   if (!blockConfig) {
     return (
       <div className='flex h-full w-80 flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
-        <div className='mx-[-1px] flex items-center gap-[8px] rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-[12px] py-[6px]'>
-          <div className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px] bg-[var(--surface-3)]' />
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+        <div className='mx-[-1px] flex items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
+          <div className='flex h-[18px] w-[18px] items-center justify-center rounded-sm bg-[var(--surface-3)]' />
+          <span className='font-medium text-[var(--text-primary)] text-sm'>
             {block.name || 'Unknown Block'}
           </span>
         </div>
-        <div className='p-[12px]'>
-          <p className='text-[13px] text-[var(--text-secondary)]'>Block configuration not found.</p>
+        <div className='p-3'>
+          <p className='text-[var(--text-secondary)] text-small'>Block configuration not found.</p>
         </div>
       </div>
     )
@@ -1180,10 +1180,10 @@ function PreviewEditorContent({
   return (
     <div className='relative flex h-full w-80 flex-col overflow-hidden border-[var(--border)] border-l bg-[var(--surface-1)]'>
       {/* Header - styled like editor */}
-      <div className='mx-[-1px] flex flex-shrink-0 items-center gap-[8px] rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-[12px] py-[6px]'>
+      <div className='mx-[-1px] flex flex-shrink-0 items-center gap-2 rounded-b-[4px] border-[var(--border)] border-x border-b bg-[var(--surface-4)] px-3 py-1.5'>
         {block.type !== 'note' && (
           <div
-            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px]'
+            className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm'
             style={{ backgroundColor: blockConfig.bgColor }}
           >
             <IconComponent
@@ -1192,11 +1192,11 @@ function PreviewEditorContent({
             />
           </div>
         )}
-        <span className='min-w-0 flex-1 truncate font-medium text-[14px] text-[var(--text-primary)]'>
+        <span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-sm'>
           {block.name || blockConfig.name}
         </span>
         {onClose && (
-          <Button variant='ghost' className='!p-[4px] flex-shrink-0' onClick={onClose}>
+          <Button variant='ghost' className='!p-1 flex-shrink-0' onClick={onClose}>
             <X className='h-[14px] w-[14px]' />
           </Button>
         )}
@@ -1209,7 +1209,7 @@ function PreviewEditorContent({
           <div className='flex-1 overflow-y-auto overflow-x-hidden'>
             {/* Not Executed Banner - shown when in execution mode but block wasn't executed */}
             {isBlockNotExecuted && (
-              <div className='flex min-w-0 flex-col gap-[8px] overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+              <div className='flex min-w-0 flex-col gap-2 overflow-hidden border-[var(--border)] border-b px-3 py-2.5'>
                 <div className='flex items-center justify-between'>
                   <Badge variant='gray-secondary' size='sm' dot>
                     Not Executed
@@ -1220,14 +1220,14 @@ function PreviewEditorContent({
 
             {/* Execution Status & Duration Header */}
             {executionData && (executionData.status || executionData.durationMs !== undefined) && (
-              <div className='flex min-w-0 items-center justify-between overflow-hidden border-[var(--border)] border-b px-[12px] py-[10px]'>
+              <div className='flex min-w-0 items-center justify-between overflow-hidden border-[var(--border)] border-b px-3 py-2.5'>
                 {executionData.status && (
                   <Badge variant={statusVariant} size='sm' dot>
                     <span className='capitalize'>{executionData.status}</span>
                   </Badge>
                 )}
                 {executionData.durationMs !== undefined && (
-                  <span className='font-medium text-[12px] text-[var(--text-tertiary)]'>
+                  <span className='font-medium text-[var(--text-tertiary)] text-caption'>
                     {formatDuration(executionData.durationMs, { precision: 2 })}
                   </span>
                 )}
@@ -1253,7 +1253,7 @@ function PreviewEditorContent({
                   <Code.Viewer
                     code={formatValueAsJson(executionData.input)}
                     language='json'
-                    className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]'
+                    className='!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]'
                     wrapText={wrapText}
                     searchQuery={isSearchActive ? searchQuery : undefined}
                     currentMatchIndex={currentMatchIndex}
@@ -1261,7 +1261,7 @@ function PreviewEditorContent({
                   />
                   {/* Action buttons overlay */}
                   {!isSearchActive && (
-                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <Button
@@ -1271,7 +1271,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.input), 'input')
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'input' ? (
                               <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -1293,7 +1293,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='h-[10px] w-[10px]' />
                           </Button>
@@ -1323,7 +1323,7 @@ function PreviewEditorContent({
                     code={formatValueAsJson(executionData.output)}
                     language='json'
                     className={cn(
-                      '!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-[6px] border-0 [word-break:break-all]',
+                      '!bg-[var(--surface-3)] max-h-[300px] min-h-0 max-w-full rounded-md border-0 [word-break:break-all]',
                       executionData.status === 'error' && 'text-[var(--text-error)]'
                     )}
                     wrapText={wrapText}
@@ -1333,7 +1333,7 @@ function PreviewEditorContent({
                   />
                   {/* Action buttons overlay */}
                   {!isSearchActive && (
-                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-[4px]'>
+                    <div className='absolute top-[7px] right-[6px] z-10 flex gap-1'>
                       <Tooltip.Root>
                         <Tooltip.Trigger asChild>
                           <Button
@@ -1343,7 +1343,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               handleCopySection(formatValueAsJson(executionData.output), 'output')
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             {copiedSection === 'output' ? (
                               <Check className='h-[10px] w-[10px] text-[var(--text-success)]' />
@@ -1365,7 +1365,7 @@ function PreviewEditorContent({
                               e.stopPropagation()
                               activateSearch()
                             }}
-                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover:bg-[var(--surface-4)]'
+                            className='h-[20px] w-[20px] cursor-pointer border border-[var(--border-1)] bg-transparent p-0 backdrop-blur-sm hover-hover:bg-[var(--surface-4)]'
                           >
                             <Search className='h-[10px] w-[10px]' />
                           </Button>
@@ -1380,12 +1380,12 @@ function PreviewEditorContent({
 
             {/* Workflow Preview - only for workflow blocks with a selected child workflow */}
             {isWorkflowBlock && childWorkflowId && (
-              <div className='px-[8px] pt-[12px]'>
+              <div className='px-2 pt-3'>
                 <div className='subblock-content flex flex-col gap-[9.5px]'>
-                  <div className='pl-[2px] font-medium text-[13px] text-[var(--text-primary)] leading-none'>
+                  <div className='pl-0.5 font-medium text-[var(--text-primary)] text-small leading-none'>
                     Workflow Preview
                   </div>
-                  <div className='relative h-[160px] overflow-hidden rounded-[4px] border border-[var(--border)]'>
+                  <div className='relative h-[160px] overflow-hidden rounded-sm border border-[var(--border)]'>
                     {resolvedIsLoadingChildWorkflow ? (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
                         <div
@@ -1418,7 +1418,7 @@ function PreviewEditorContent({
                               type='button'
                               variant='ghost'
                               onClick={handleExpandChildWorkflow}
-                              className='absolute right-[6px] bottom-[6px] z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover:bg-[var(--surface-4)]'
+                              className='absolute right-[6px] bottom-1.5 z-10 h-[24px] w-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
                             >
                               {isExecutionMode && onDrillDown ? (
                                 <Maximize2 className='h-[12px] w-[12px]' />
@@ -1434,7 +1434,7 @@ function PreviewEditorContent({
                       </>
                     ) : (
                       <div className='flex h-full items-center justify-center bg-[var(--surface-3)]'>
-                        <span className='text-[13px] text-[var(--text-tertiary)]'>
+                        <span className='text-[var(--text-tertiary)] text-small'>
                           {isBlockNotExecuted
                             ? 'Not Executed'
                             : isMissingChildWorkflow
@@ -1445,7 +1445,7 @@ function PreviewEditorContent({
                     )}
                   </div>
                 </div>
-                <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                   <div
                     className='h-[1.25px]'
                     style={{
@@ -1458,7 +1458,7 @@ function PreviewEditorContent({
             )}
 
             {/* Subblock Values - Using SubBlock components in preview mode */}
-            <div className='readonly-preview px-[8px] pt-[12px] pb-[8px]'>
+            <div className='readonly-preview px-2 pt-3 pb-2'>
               <style>{READONLY_PREVIEW_STYLES}</style>
               {visibleSubBlocks.length > 0 ? (
                 <div className='flex flex-col'>
@@ -1476,7 +1476,7 @@ function PreviewEditorContent({
                         disabled={true}
                       />
                       {index < visibleSubBlocks.length - 1 && (
-                        <div className='subblock-divider px-[2px] pt-[16px] pb-[13px]'>
+                        <div className='subblock-divider px-0.5 pt-4 pb-[13px]'>
                           <div
                             className='h-[1.25px]'
                             style={{
@@ -1490,8 +1490,8 @@ function PreviewEditorContent({
                   ))}
                 </div>
               ) : (
-                <div className='py-[16px] text-center'>
-                  <p className='text-[13px] text-[var(--text-secondary)]'>
+                <div className='py-4 text-center'>
+                  <p className='text-[var(--text-secondary)] text-small'>
                     No configurable fields for this block.
                   </p>
                 </div>
@@ -1521,7 +1521,7 @@ function PreviewEditorContent({
       {/* Search Overlay */}
       {isSearchActive && (
         <div
-          className='absolute top-[40px] right-[8px] z-30 flex h-[34px] items-center gap-[6px] rounded-[4px] border border-[var(--border)] bg-[var(--surface-1)] px-[6px] shadow-sm'
+          className='absolute top-10 right-[8px] z-30 flex h-[34px] items-center gap-1.5 rounded-sm border border-[var(--border)] bg-[var(--surface-1)] px-1.5 shadow-sm'
           onClick={(e) => e.stopPropagation()}
         >
           <Input
@@ -1530,11 +1530,11 @@ function PreviewEditorContent({
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             placeholder='Search...'
-            className='mr-[2px] h-[23px] w-[94px] text-[12px]'
+            className='mr-0.5 h-[23px] w-[94px] text-caption'
           />
           <span
             className={cn(
-              'min-w-[45px] text-center text-[11px]',
+              'min-w-[45px] text-center text-xs',
               matchCount > 0 ? 'text-[var(--text-secondary)]' : 'text-[var(--text-tertiary)]'
             )}
           >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
index a55934a0e29..7f0ea834440 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/block/block.tsx
@@ -29,8 +29,8 @@ interface SubBlockValueEntry {
  * Extracted to avoid recreating style objects on each render.
  */
 const HANDLE_STYLES = {
-  horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-[2px]',
-  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-[2px]',
+  horizontal: '!border-none !bg-[var(--surface-7)] !h-5 !w-[7px] !rounded-xs',
+  vertical: '!border-none !bg-[var(--surface-7)] !h-[7px] !w-5 !rounded-xs',
   right:
     '!z-[10] !border-none !bg-[var(--workflow-edge)] !h-5 !w-[7px] !rounded-r-[2px] !rounded-l-none',
   error:
@@ -243,16 +243,16 @@ const SubBlockRow = memo(function SubBlockRow({
   const displayValue = maskedValue || hydratedName || (isSelectorType && value ? '-' : value)
 
   return (
-    <div className='flex items-center gap-[8px]'>
+    <div className='flex items-center gap-2'>
       <span
-        className='min-w-0 truncate text-[14px] text-[var(--text-tertiary)] capitalize'
+        className='min-w-0 truncate text-[var(--text-tertiary)] text-sm capitalize'
         title={title}
       >
         {title}
       </span>
       {displayValue !== undefined && (
         <span
-          className='flex-1 truncate text-right text-[14px] text-[var(--text-primary)]'
+          className='flex-1 truncate text-right text-[var(--text-primary)] text-sm'
           title={displayValue}
         >
           {displayValue}
@@ -432,18 +432,18 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
   const hasSuccess = executionStatus === 'success'
 
   return (
-    <div className='relative w-[250px] select-none rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)]'>
+    <div className='relative w-[250px] select-none rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)]'>
       {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-secondary)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-secondary)]' />
       )}
       {/* Success ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasSuccess && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-tertiary-2)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-tertiary-2)]' />
       )}
       {/* Error ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasError && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--text-error)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--text-error)]' />
       )}
 
       {/* Target handle - not shown for triggers/starters */}
@@ -463,19 +463,19 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
 
       {/* Header - matches WorkflowBlock structure */}
       <div
-        className={`flex items-center justify-between p-[8px] ${hasContentBelowHeader ? 'border-[var(--border-1)] border-b' : ''}`}
+        className={`flex items-center justify-between p-2 ${hasContentBelowHeader ? 'border-[var(--border-1)] border-b' : ''}`}
       >
-        <div className='relative z-10 flex min-w-0 flex-1 items-center gap-[10px]'>
+        <div className='relative z-10 flex min-w-0 flex-1 items-center gap-2.5'>
           {!isNoteBlock && (
             <div
-              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+              className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
               style={{ background: enabled ? blockConfig.bgColor : 'gray' }}
             >
               <IconComponent className='h-[16px] w-[16px] text-white' />
             </div>
           )}
           <span
-            className={`truncate font-medium text-[16px] ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
+            className={`truncate font-medium text-md ${!enabled ? 'text-[var(--text-muted)]' : ''}`}
             title={name}
           >
             {name}
@@ -485,7 +485,7 @@ function WorkflowPreviewBlockInner({ data }: NodeProps<WorkflowPreviewBlockData>
 
       {/* Content area with subblocks */}
       {hasContentBelowHeader && (
-        <div className='flex flex-col gap-[8px] p-[8px]'>
+        <div className='flex flex-col gap-2 p-2'>
           {type === 'condition' ? (
             conditionRows.map((cond) => (
               <SubBlockRow
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
index e939b592ad6..08cea503a8d 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-workflow/components/subflow/subflow.tsx
@@ -59,7 +59,7 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
 
   return (
     <div
-      className='relative select-none rounded-[8px] border border-[var(--border-1)]'
+      className='relative select-none rounded-lg border border-[var(--border-1)]'
       style={{
         width,
         height,
@@ -67,15 +67,15 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
     >
       {/* Selection ring overlay (takes priority over execution rings) */}
       {isPreviewSelected && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-secondary)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-secondary)]' />
       )}
       {/* Success ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasSuccess && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--brand-tertiary-2)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--brand-tertiary-2)]' />
       )}
       {/* Error ring overlay (only shown if not selected) */}
       {!isPreviewSelected && hasError && (
-        <div className='pointer-events-none absolute inset-0 z-40 rounded-[8px] ring-[1.75px] ring-[var(--text-error)]' />
+        <div className='pointer-events-none absolute inset-0 z-40 rounded-lg ring-[1.75px] ring-[var(--text-error)]' />
       )}
 
       {/* Target handle on left (input to the subflow) */}
@@ -92,19 +92,16 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
       />
 
       {/* Header - matches actual subflow header structure */}
-      <div className='flex items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-[8px] pr-[12px] pl-[8px]'>
-        <div className='flex min-w-0 flex-1 items-center gap-[10px]'>
+      <div className='flex items-center justify-between rounded-t-[8px] border-[var(--border)] border-b bg-[var(--surface-2)] py-2 pr-3 pl-2'>
+        <div className='flex min-w-0 flex-1 items-center gap-2.5'>
           <div
-            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-[6px]'
+            className='flex h-[24px] w-[24px] flex-shrink-0 items-center justify-center rounded-md'
             style={{ backgroundColor: enabled ? blockIconBg : 'var(--surface-4)' }}
           >
             <BlockIcon className='h-[16px] w-[16px] text-white' />
           </div>
           <span
-            className={cn(
-              'truncate font-medium text-[16px]',
-              !enabled && 'text-[var(--text-muted)]'
-            )}
+            className={cn('truncate font-medium text-md', !enabled && 'text-[var(--text-muted)]')}
             title={blockName}
           >
             {blockName}
@@ -115,12 +112,12 @@ function WorkflowPreviewSubflowInner({ data }: NodeProps<WorkflowPreviewSubflowD
 
       {/* Content area - matches workflow structure */}
       <div
-        className='h-[calc(100%-50px)] pt-[16px] pr-[80px] pb-[16px] pl-[16px]'
+        className='h-[calc(100%-50px)] pt-4 pr-[80px] pb-4 pl-4'
         style={{ position: 'relative' }}
       >
         {/* Subflow Start - connects to first block in subflow */}
-        <div className='absolute top-[16px] left-[16px] flex items-center justify-center rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-2)] px-[12px] py-[6px]'>
-          <span className='font-medium text-[14px] text-[var(--text-primary)]'>Start</span>
+        <div className='absolute top-4 left-[16px] flex items-center justify-center rounded-lg border border-[var(--border-1)] bg-[var(--surface-2)] px-3 py-1.5'>
+          <span className='font-medium text-[var(--text-primary)] text-sm'>Start</span>
           <Handle
             type='source'
             position={Position.Right}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
index 890a5a7d4dc..ac19ec9d1d1 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/preview.tsx
@@ -244,28 +244,28 @@ export function Preview({
       style={{ height, width }}
       className={cn(
         'relative flex overflow-hidden',
-        showBorder && 'rounded-[4px] border border-[var(--border)]',
+        showBorder && 'rounded-sm border border-[var(--border)]',
         className
       )}
     >
       {isNested && (
-        <div className='absolute top-[12px] left-[12px] z-20 flex items-center gap-[6px]'>
+        <div className='absolute top-3 left-[12px] z-20 flex items-center gap-1.5'>
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
               <Button
                 variant='ghost'
                 onClick={handleGoBack}
-                className='flex h-[28px] items-center gap-[5px] rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] text-[var(--text-secondary)] shadow-sm hover:bg-[var(--surface-4)] hover:text-[var(--text-primary)]'
+                className='flex h-[28px] items-center gap-[5px] rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 text-[var(--text-secondary)] shadow-sm hover-hover:bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)]'
               >
                 <ArrowLeft className='h-[12px] w-[12px]' />
-                <span className='font-medium text-[12px]'>Back</span>
+                <span className='font-medium text-caption'>Back</span>
               </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='bottom'>Go back to parent workflow</Tooltip.Content>
           </Tooltip.Root>
           {currentWorkflowName && (
-            <div className='flex h-[28px] max-w-[200px] items-center rounded-[6px] border border-[var(--border)] bg-[var(--surface-2)] px-[10px] shadow-sm'>
-              <span className='truncate font-medium text-[12px] text-[var(--text-secondary)]'>
+            <div className='flex h-[28px] max-w-[200px] items-center rounded-md border border-[var(--border)] bg-[var(--surface-2)] px-2.5 shadow-sm'>
+              <span className='truncate font-medium text-[var(--text-secondary)] text-caption'>
                 {currentWorkflowName}
               </span>
             </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
index ff61e2ed52b..970e263a118 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.tsx
@@ -32,7 +32,7 @@ export function CollapsedSidebarMenu({
   className,
 }: CollapsedSidebarMenuProps) {
   return (
-    <div className={cn('flex flex-col px-[8px]', className)}>
+    <div className={cn('flex flex-col px-2', className)}>
       <DropdownMenu
         open={hover.isOpen}
         onOpenChange={(open) => {
@@ -46,7 +46,7 @@ export function CollapsedSidebarMenu({
             <button
               type='button'
               aria-label={ariaLabel}
-              className='mx-[2px] flex h-[30px] items-center rounded-[8px] px-[8px] hover:bg-[var(--surface-active)]'
+              className='mx-0.5 flex h-[30px] items-center rounded-lg px-2 hover-hover:bg-[var(--surface-active)]'
               onClick={onClick}
             >
               {icon}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
index c017e6162e8..e489a4065cb 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/help-modal/help-modal.tsx
@@ -127,8 +127,8 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
             element.hasAttribute('data-radix-popover-content') ||
             (element.hasAttribute('role') && element.getAttribute('role') === 'dialog') ||
             element.querySelector('[role="listbox"]') !== null ||
-            element.classList.contains('rounded-[8px]') ||
-            element.classList.contains('rounded-[4px]')
+            element.classList.contains('rounded-lg') ||
+            element.classList.contains('rounded-sm')
 
           if (hasPopoverStructure && element.offsetParent !== null) {
             element.style.zIndex = '10000101'
@@ -430,8 +430,8 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
         <form onSubmit={handleSubmit(onSubmit)} className='flex min-h-0 flex-1 flex-col'>
           <ModalBody>
             <div ref={scrollContainerRef} className='min-h-0 flex-1 overflow-y-auto'>
-              <div className='space-y-[12px]'>
-                <div className='flex flex-col gap-[8px]'>
+              <div className='space-y-3'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='type'>Request</Label>
                   <Combobox
                     id='type'
@@ -446,7 +446,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='subject'>Subject</Label>
                   <Input
                     id='subject'
@@ -456,7 +456,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label htmlFor='message'>Message</Label>
                   <Textarea
                     id='message'
@@ -467,7 +467,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                   />
                 </div>
 
-                <div className='flex flex-col gap-[8px]'>
+                <div className='flex flex-col gap-2'>
                   <Label>Attach Images (Optional)</Label>
                   <Button
                     type='button'
@@ -478,7 +478,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                     onDragLeave={handleDragLeave}
                     onDrop={handleDrop}
                     className={cn(
-                      '!bg-[var(--surface-1)] hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-[10px]',
+                      '!bg-[var(--surface-1)] hover-hover:!bg-[var(--surface-4)] w-full justify-center border border-[var(--border-1)] border-dashed py-2.5',
                       {
                         'border-[var(--surface-7)]': isDragging,
                       }
@@ -492,11 +492,11 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                       className='hidden'
                       multiple
                     />
-                    <div className='flex flex-col gap-[2px] text-center'>
+                    <div className='flex flex-col gap-0.5 text-center'>
                       <span className='text-[var(--text-primary)]'>
                         {isDragging ? 'Drop images here' : 'Drop images here or click to browse'}
                       </span>
-                      <span className='text-[11px] text-[var(--text-tertiary)]'>
+                      <span className='text-[var(--text-tertiary)] text-xs'>
                         PNG, JPEG, WebP, GIF (max 20MB each)
                       </span>
                     </div>
@@ -509,7 +509,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                     <div className='grid grid-cols-2 gap-3'>
                       {images.map((image, index) => (
                         <div
-                          className='group relative overflow-hidden rounded-[4px] border'
+                          className='group relative overflow-hidden rounded-sm border'
                           key={index}
                         >
                           <div className='relative flex max-h-[120px] min-h-[80px] w-full items-center justify-center'>
@@ -529,7 +529,7 @@ export function HelpModal({ open, onOpenChange, workflowId, workspaceId }: HelpM
                               <X className='h-[18px] w-[18px] text-white' />
                             </button>
                           </div>
-                          <div className='truncate p-[6px] text-[12px]'>{image.name}</div>
+                          <div className='truncate p-1.5 text-caption'>{image.name}</div>
                         </div>
                       ))}
                     </div>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
index 077516f2fd0..7e240a41c00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/search-modal/search-modal.tsx
@@ -366,18 +366,18 @@ export function SearchModal({
         style={{ left: '50%' }}
       >
         <Command label='Search' shouldFilter={false}>
-          <div className='mx-[8px] mt-[8px] mb-[4px] flex items-center gap-[6px] rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] dark:bg-[var(--surface-4)]'>
+          <div className='mx-2 mt-2 mb-1 flex items-center gap-1.5 rounded-lg border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
             <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-muted)]' />
             <Command.Input
               ref={inputRef}
               autoFocus
               onValueChange={handleSearchChange}
               placeholder='Search anything...'
-              className='w-full bg-transparent py-[6px] font-base text-[14px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
+              className='w-full bg-transparent py-1.5 font-base text-[var(--text-primary)] text-sm outline-none placeholder:text-[var(--text-muted)] focus:outline-none'
             />
           </div>
-          <Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-[8px] [&_[cmdk-group]+[cmdk-group]]:mt-[10px]'>
-            <Command.Empty className='flex items-center justify-center px-[16px] py-[24px] text-[14px] text-[var(--text-subtle)]'>
+          <Command.List className='scrollbar-thin scrollbar-thumb-border scrollbar-track-transparent max-h-[400px] overflow-y-auto overflow-x-hidden p-2 [&_[cmdk-group]+[cmdk-group]]:mt-2.5'>
+            <Command.Empty className='flex items-center justify-center px-4 py-6 text-[var(--text-subtle)] text-sm'>
               No results found.
             </Command.Empty>
 
@@ -439,10 +439,10 @@ export function SearchModal({
                     key={workflow.id}
                     value={`${workflow.name} workflow-${workflow.id}`}
                     onSelect={() => handleWorkflowSelect(workflow)}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                    className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                   >
                     <div
-                      className='h-[14px] w-[14px] flex-shrink-0 rounded-[4px] border-[2px]'
+                      className='h-[14px] w-[14px] flex-shrink-0 rounded-sm border-[2px]'
                       style={{
                         backgroundColor: workflow.color,
                         borderColor: `${workflow.color}60`,
@@ -468,7 +468,7 @@ export function SearchModal({
                       router.push(task.href)
                       onOpenChange(false)
                     }}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                    className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                   >
                     <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                       <Blimp className='h-[14px] w-[14px] text-[var(--text-icon)]' />
@@ -503,7 +503,7 @@ export function SearchModal({
                     key={workspace.id}
                     value={`${workspace.name} workspace-${workspace.id}`}
                     onSelect={() => handleWorkspaceSelect(workspace)}
-                    className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                    className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                   >
                     <span className='truncate font-base text-[var(--text-body)]'>
                       {workspace.name}
@@ -540,7 +540,7 @@ export function SearchModal({
                       key={page.id}
                       value={`${page.name} page-${page.id}`}
                       onSelect={() => handlePageSelect(page)}
-                      className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+                      className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
                     >
                       <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                         <Icon className='h-[14px] w-[14px] text-[var(--text-icon)]' />
@@ -549,7 +549,7 @@ export function SearchModal({
                         {page.name}
                       </span>
                       {page.shortcut && (
-                        <span className='ml-auto flex-shrink-0 font-base text-[13px] text-[var(--text-subtle)]'>
+                        <span className='ml-auto flex-shrink-0 font-base text-[var(--text-subtle)] text-small'>
                           {page.shortcut}
                         </span>
                       )}
@@ -567,7 +567,7 @@ export function SearchModal({
 }
 
 const groupHeadingClassName =
-  '[&_[cmdk-group-heading]]:px-[8px] [&_[cmdk-group-heading]]:pt-[2px] [&_[cmdk-group-heading]]:pb-[6px] [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-[12px] [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
+  '[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:pt-0.5 [&_[cmdk-group-heading]]:pb-1.5 [&_[cmdk-group-heading]]:font-base [&_[cmdk-group-heading]]:text-caption [&_[cmdk-group-heading]]:text-[var(--text-icon)]'
 
 interface CommandItemProps {
   value: string
@@ -593,10 +593,10 @@ const MemoizedCommandItem = memo(
       <Command.Item
         value={value}
         onSelect={onSelect}
-        className='group flex h-[30px] w-full cursor-pointer items-center gap-[8px] rounded-[8px] border border-transparent px-[8px] text-left text-[14px] aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
+        className='group flex h-[30px] w-full cursor-pointer items-center gap-2 rounded-lg border border-transparent px-2 text-left text-sm aria-selected:border-[var(--border-1)] aria-selected:bg-[var(--surface-5)] data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 dark:aria-selected:bg-[var(--surface-4)]'
       >
         <div
-          className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+          className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
           style={{ background: showColoredIcon ? bgColor : 'transparent' }}
         >
           <Icon
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
index f1312bf5965..e581ac512c9 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/settings-sidebar/settings-sidebar.tsx
@@ -180,13 +180,13 @@ export function SettingsSidebar({
   return (
     <>
       {/* Back button */}
-      <div className='mt-[10px] flex flex-shrink-0 flex-col gap-[2px] px-[8px]'>
+      <div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
         <Tooltip.Root key={`back-${isCollapsed}`}>
           <Tooltip.Trigger asChild>
             <button
               type='button'
               onClick={handleBack}
-              className='group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]'
+              className='group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-active)]'
             >
               <div className='flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center text-[var(--text-icon)]'>
                 <ChevronDown className='h-[10px] w-[10px] rotate-90' />
@@ -205,7 +205,7 @@ export function SettingsSidebar({
       {/* Settings sections */}
       <div
         className={cn(
-          'mt-[14px] flex flex-1 flex-col gap-[14px]',
+          'mt-3.5 flex flex-1 flex-col gap-3.5',
           !isCollapsed && 'overflow-y-auto overflow-x-hidden'
         )}
       >
@@ -213,10 +213,10 @@ export function SettingsSidebar({
           isCollapsed ? (
             <>
               {SKELETON_SECTIONS.map((count, sectionIdx) => (
-                <div key={sectionIdx} className='flex flex-col gap-[2px] px-[8px]'>
+                <div key={sectionIdx} className='flex flex-col gap-0.5 px-2'>
                   {Array.from({ length: count }, (_, i) => (
-                    <div key={i} className='mx-[2px] flex h-[30px] items-center px-[8px]'>
-                      <Skeleton className='h-[16px] w-[16px] rounded-[4px]' />
+                    <div key={i} className='mx-0.5 flex h-[30px] items-center px-2'>
+                      <Skeleton className='h-[16px] w-[16px] rounded-sm' />
                     </div>
                   ))}
                 </div>
@@ -225,13 +225,13 @@ export function SettingsSidebar({
           ) : (
             Array.from({ length: 3 }, (_, i) => (
               <div key={i} className='sidebar-collapse-hide flex flex-shrink-0 flex-col'>
-                <div className='px-[16px] pb-[6px]'>
-                  <Skeleton className='h-[14px] w-[64px] rounded-[4px]' />
+                <div className='px-4 pb-1.5'>
+                  <Skeleton className='h-[14px] w-[64px] rounded-sm' />
                 </div>
-                <div className='flex flex-col gap-[2px] px-[8px]'>
+                <div className='flex flex-col gap-0.5 px-2'>
                   {Array.from({ length: i === 0 ? 3 : 2 }, (_, j) => (
-                    <div key={j} className='mx-[2px] flex h-[30px] items-center px-[8px]'>
-                      <Skeleton className='h-[24px] w-full rounded-[4px]' />
+                    <div key={j} className='mx-0.5 flex h-[30px] items-center px-2'>
+                      <Skeleton className='h-[24px] w-full rounded-sm' />
                     </div>
                   ))}
                 </div>
@@ -245,15 +245,15 @@ export function SettingsSidebar({
 
             return (
               <div key={key} className='flex flex-shrink-0 flex-col'>
-                <div className='px-[16px] pb-[6px]'>
+                <div className='px-4 pb-1.5'>
                   <div className='font-base text-[var(--text-icon)] text-small'>{title}</div>
                 </div>
-                <div className='flex flex-col gap-[2px] px-[8px]'>
+                <div className='flex flex-col gap-0.5 px-2'>
                   {sectionItems.map((item) => {
                     const Icon = item.icon
                     const active = activeSection === item.id
                     const itemClassName = cn(
-                      'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]',
+                      'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-active)]',
                       active && 'bg-[var(--surface-active)]'
                     )
                     const content = (
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
index b8315cb56f2..8f65e9b0283 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/usage-indicator/usage-indicator.tsx
@@ -402,18 +402,18 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
 
   if (isLoading && !subscriptionData) {
     return (
-      <div className='flex flex-shrink-0 flex-col gap-[8px] border-t px-[13.5px] pt-[8px] pb-[10px]'>
+      <div className='flex flex-shrink-0 flex-col gap-2 border-t px-[13.5px] pt-2 pb-2.5'>
         <div className='flex h-[18px] items-center justify-between'>
-          <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
-            <Skeleton className='h-[12px] w-[28px] rounded-[4px]' />
+          <div className='flex min-w-0 flex-1 items-center gap-1.5'>
+            <Skeleton className='h-[12px] w-[28px] rounded-sm' />
             <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
-            <Skeleton className='h-[12px] w-[90px] rounded-[4px]' />
+            <Skeleton className='h-[12px] w-[90px] rounded-sm' />
           </div>
-          <Skeleton className='h-[16px] w-[50px] rounded-[6px]' />
+          <Skeleton className='h-[16px] w-[50px] rounded-md' />
         </div>
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {Array.from({ length: pillCount }).map((_, i) => (
-            <Skeleton key={i} className='h-[6px] flex-1 rounded-[2px]' />
+            <Skeleton key={i} className='h-[6px] flex-1 rounded-xs' />
           ))}
         </div>
       </div>
@@ -466,9 +466,9 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
 
   if (isEnterpriseMember) {
     return (
-      <div className='flex flex-shrink-0 flex-col border-t px-[13.5px] pt-[8px] pb-[10px]'>
+      <div className='flex flex-shrink-0 flex-col border-t px-[13.5px] pt-2 pb-2.5'>
         <div className='flex h-[18px] items-center'>
-          <span className='font-base text-[12px] text-[var(--text-primary)]'>
+          <span className='font-base text-[var(--text-primary)] text-caption'>
             {PLAN_NAMES[planType]}
           </span>
         </div>
@@ -479,7 +479,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
   return (
     <>
       <div
-        className='group flex flex-shrink-0 cursor-pointer flex-col gap-[8px] border-t px-[13.5px] pt-[8px] pb-[10px]'
+        className='group flex flex-shrink-0 cursor-pointer flex-col gap-2 border-t px-[13.5px] pt-2 pb-2.5'
         onClick={handleClick}
         onContextMenu={handleContextMenuWithCheck}
         onMouseEnter={() => setIsHovered(true)}
@@ -487,27 +487,27 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
       >
         {/* Top row */}
         <div className='flex h-[18px] items-center justify-between'>
-          <div className='flex min-w-0 flex-1 items-center gap-[6px]'>
+          <div className='flex min-w-0 flex-1 items-center gap-1.5'>
             {showPlanText && (
               <>
-                <span className='flex-shrink-0 font-base text-[12px] text-[var(--text-primary)]'>
+                <span className='flex-shrink-0 font-base text-[var(--text-primary)] text-caption'>
                   {PLAN_NAMES[planType]}
                 </span>
                 <div className='h-[14px] w-[1.5px] flex-shrink-0 bg-[var(--divider)]' />
               </>
             )}
-            <div className='flex min-w-0 flex-1 items-center gap-[4px]'>
+            <div className='flex min-w-0 flex-1 items-center gap-1'>
               {statusText.isError ? (
-                <span className='font-base text-[12px] text-[var(--text-error)]'>
+                <span className='font-base text-[var(--text-error)] text-caption'>
                   {statusText.text}
                 </span>
               ) : (
                 <>
-                  <span className='font-base text-[12px] text-[var(--text-secondary)] tabular-nums'>
+                  <span className='font-base text-[var(--text-secondary)] text-caption tabular-nums'>
                     {dollarsToCredits(usage.current).toLocaleString()}
                   </span>
-                  <span className='font-base text-[12px] text-[var(--text-secondary)]'>/</span>
-                  <span className='font-base text-[12px] text-[var(--text-secondary)] tabular-nums'>
+                  <span className='font-base text-[var(--text-secondary)] text-caption'>/</span>
+                  <span className='font-base text-[var(--text-secondary)] text-caption tabular-nums'>
                     {dollarsToCredits(usage.limit).toLocaleString()} credits
                   </span>
                 </>
@@ -522,7 +522,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
         </div>
 
         {/* Pills row */}
-        <div className='flex items-center gap-[4px]'>
+        <div className='flex items-center gap-1'>
           {Array.from({ length: pillCount }).map((_, i) => {
             const isFilled = i < filledPillsCount
             const baseColor = isFilled ? filledColor : USAGE_PILL_COLORS.UNFILLED
@@ -545,7 +545,7 @@ export function UsageIndicator({ onClick }: UsageIndicatorProps) {
             return (
               <div
                 key={i}
-                className='h-[6px] flex-1 rounded-[2px]'
+                className='h-[6px] flex-1 rounded-xs'
                 style={{
                   backgroundColor,
                   backgroundImage,
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
index ae179d5d79f..d53bc469e56 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/context-menu/context-menu.tsx
@@ -39,7 +39,7 @@ function ColorGrid({
   hexInput,
   setHexInput,
   onColorChange,
-  buttonRefs,
+  buttonRefs: cellButtonRefs,
 }: {
   hexInput: string
   setHexInput: (color: string) => void
@@ -47,7 +47,6 @@ function ColorGrid({
   buttonRefs: RefObject<(HTMLButtonElement | null)[]>
 }) {
   const [focusedIndex, setFocusedIndex] = useState(-1)
-  const gridRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
     const selectedIndex = WORKFLOW_COLORS.findIndex(
@@ -56,9 +55,9 @@ function ColorGrid({
     const idx = selectedIndex >= 0 ? selectedIndex : 0
     setFocusedIndex(idx)
     requestAnimationFrame(() => {
-      buttonRefs.current[idx]?.focus()
+      cellButtonRefs.current[idx]?.focus()
     })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- initial roving focus when submenu content mounts
   }, [])
 
   const handleKeyDown = useCallback(
@@ -96,19 +95,19 @@ function ColorGrid({
 
       if (newIndex !== index) {
         setFocusedIndex(newIndex)
-        buttonRefs.current[newIndex]?.focus()
+        cellButtonRefs.current[newIndex]?.focus()
       }
     },
     [setHexInput, onColorChange]
   )
 
   return (
-    <div ref={gridRef} className='grid grid-cols-6 gap-[4px]' role='grid'>
+    <div className='grid grid-cols-6 gap-1' role='grid'>
       {WORKFLOW_COLORS.map(({ color, name }, index) => (
         <button
           key={color}
           ref={(el) => {
-            buttonRefs.current[index] = el
+            cellButtonRefs.current[index] = el
           }}
           type='button'
           role='gridcell'
@@ -121,7 +120,7 @@ function ColorGrid({
           onKeyDown={(e) => handleKeyDown(e, index)}
           onFocus={() => setFocusedIndex(index)}
           className={cn(
-            'h-[16px] w-[16px] rounded-[4px] border border-black/10 outline-none transition-shadow duration-150',
+            'h-[16px] w-[16px] rounded-sm border border-black/10 outline-none transition-shadow duration-150',
             (focusedIndex === index ||
               (focusedIndex === -1 && hexInput.toLowerCase() === color.toLowerCase())) &&
               'shadow-[0_0_0_1.5px_var(--bg),0_0_0_3px_var(--text-icon)]'
@@ -182,17 +181,17 @@ function ColorPickerSubmenu({
         <Palette />
         Change color
       </DropdownMenuSubTrigger>
-      <DropdownMenuSubContent className='p-[8px]' onPointerDownOutside={(e) => e.preventDefault()}>
-        <div className='flex w-[120px] flex-col gap-[8px] p-[2px]'>
+      <DropdownMenuSubContent className='p-2' onPointerDownOutside={(e) => e.preventDefault()}>
+        <div className='flex w-[120px] flex-col gap-2 p-0.5'>
           <ColorGrid
             hexInput={hexInput}
             setHexInput={setHexInput}
             onColorChange={onColorChange}
             buttonRefs={buttonRefs}
           />
-          <div className='flex items-center gap-[4px]'>
+          <div className='flex items-center gap-1'>
             <div
-              className='h-[16px] w-[16px] flex-shrink-0 rounded-[4px] border border-black/10'
+              className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border border-black/10'
               style={{
                 backgroundColor: isValidHex(hexInput) ? normalizeHex(hexInput) : '#ffffff',
               }}
@@ -204,7 +203,7 @@ function ColorPickerSubmenu({
               onKeyDown={handleHexKeyDown}
               onFocus={handleHexFocus}
               onClick={(e) => e.stopPropagation()}
-              className='h-[20px] min-w-0 flex-1 rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] font-medium text-[11px] text-[var(--text-primary)] uppercase transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+              className='h-[20px] min-w-0 flex-1 rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 font-medium text-[var(--text-primary)] text-xs uppercase transition-colors focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
             />
             <Button
               variant='primary'
@@ -324,6 +323,7 @@ export function ContextMenu({
 
   const handleHexKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLInputElement>) => {
+      e.stopPropagation()
       if (e.key === 'Enter') {
         e.preventDefault()
         handleHexSubmit()
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
index f2263b30923..3b2efbff0f2 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/folder-item/folder-item.tsx
@@ -447,8 +447,8 @@ export function FolderItem({
         aria-expanded={isExpanded}
         aria-label={`${folder.name} folder, ${isExpanded ? 'expanded' : 'collapsed'}`}
         className={clsx(
-          'group mx-[2px] flex h-[30px] cursor-pointer items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
-          !isAnyDragActive && 'hover:bg-[var(--surface-active)]',
+          'group mx-0.5 flex h-[30px] cursor-pointer items-center gap-2 rounded-lg px-2 text-sm',
+          !isAnyDragActive && 'hover-hover:bg-[var(--surface-active)]',
           isSelected ? 'bg-[var(--surface-active)]' : '',
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
@@ -485,7 +485,7 @@ export function FolderItem({
             onChange={(e) => setEditValue(e.target.value)}
             onKeyDown={handleRenameKeyDown}
             onBlur={handleInputBlur}
-            className='min-w-0 flex-1 border-0 bg-transparent p-0 font-base text-[14px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+            className='min-w-0 flex-1 border-0 bg-transparent p-0 font-base text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
             maxLength={50}
             disabled={isRenaming}
             onClick={(e) => {
@@ -498,7 +498,7 @@ export function FolderItem({
             spellCheck='false'
           />
         ) : (
-          <div className='flex min-w-0 flex-1 items-center gap-[8px]'>
+          <div className='flex min-w-0 flex-1 items-center gap-2'>
             <span
               className='min-w-0 flex-1 truncate font-base text-[var(--text-body)]'
               onDoubleClick={handleDoubleClick}
@@ -511,7 +511,7 @@ export function FolderItem({
               onPointerDown={handleMorePointerDown}
               onClick={handleMoreClick}
               className={clsx(
-                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)]',
+                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity hover-hover:bg-[var(--surface-7)]',
                 !isAnyDragActive && 'group-hover:opacity-100'
               )}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
index d602c4b5582..a8020e2f83f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/components/workflow-item/workflow-item.tsx
@@ -385,9 +385,9 @@ export function WorkflowItem({
         href={`/workspace/${workspaceId}/w/${workflow.id}`}
         data-item-id={workflow.id}
         className={clsx(
-          'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px]',
+          'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm',
           active && 'bg-[var(--surface-active)]',
-          !active && !isAnyDragActive && 'hover:bg-[var(--surface-active)]',
+          !active && !isAnyDragActive && 'hover-hover:bg-[var(--surface-active)]',
           isSelected && selectedWorkflows.size > 1 && !active && 'bg-[var(--surface-active)]',
           (isDragging || (isAnyDragActive && isSelected)) && 'opacity-50'
         )}
@@ -398,7 +398,7 @@ export function WorkflowItem({
         onContextMenu={handleContextMenu}
       >
         <div
-          className='h-[16px] w-[16px] flex-shrink-0 rounded-[4px] border-[2.5px]'
+          className='h-[16px] w-[16px] flex-shrink-0 rounded-sm border-[2.5px]'
           style={{
             backgroundColor: workflow.color,
             borderColor: `${workflow.color}60`,
@@ -406,7 +406,7 @@ export function WorkflowItem({
           }}
         />
         <div className='min-w-0 flex-1'>
-          <div className='flex min-w-0 items-center gap-[8px]'>
+          <div className='flex min-w-0 items-center gap-2'>
             {isEditing ? (
               <input
                 ref={inputRef}
@@ -414,7 +414,7 @@ export function WorkflowItem({
                 onChange={(e) => setEditValue(e.target.value)}
                 onKeyDown={handleKeyDown}
                 onBlur={handleInputBlur}
-                className='w-full min-w-0 border-0 bg-transparent p-0 font-base text-[14px] text-[var(--text-body)] outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
+                className='w-full min-w-0 border-0 bg-transparent p-0 font-base text-[var(--text-body)] text-sm outline-none focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0'
                 maxLength={100}
                 disabled={isRenaming}
                 onClick={(e) => {
@@ -445,7 +445,7 @@ export function WorkflowItem({
               onPointerDown={handleMorePointerDown}
               onClick={handleMoreClick}
               className={clsx(
-                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)]',
+                'flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity hover-hover:bg-[var(--surface-7)]',
                 !isAnyDragActive && 'group-hover:opacity-100'
               )}
             >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
index cddb472a6d4..cdc8d8c1c4f 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workflow-list/workflow-list.tsx
@@ -443,7 +443,7 @@ export const WorkflowList = memo(function WorkflowList({
           <DropIndicatorLine show={showBefore} level={level} position='before' />
           <div
             className={clsx(
-              'pointer-events-none absolute inset-0 z-10 rounded-[4px]',
+              'pointer-events-none absolute inset-0 z-10 rounded-sm',
               showInside && isDragging ? 'bg-[var(--text-subtle)] opacity-10' : 'hidden'
             )}
           />
@@ -468,7 +468,7 @@ export const WorkflowList = memo(function WorkflowList({
                 className='pointer-events-none absolute top-0 bottom-0 w-px bg-[var(--border)]'
                 style={{ left: `${level * TREE_SPACING.INDENT_PER_LEVEL + 12}px` }}
               />
-              <div className='mt-[2px] space-y-[2px] pl-[2px]'>
+              <div className='mt-0.5 space-y-0.5 pl-0.5'>
                 {childItems.map((item) =>
                   item.type === 'folder'
                     ? renderFolderSection(item.data as FolderTreeNode, level + 1, folder.id)
@@ -550,7 +550,7 @@ export const WorkflowList = memo(function WorkflowList({
       const target = e.target as HTMLElement
       const isOnEmptyArea =
         target === e.currentTarget ||
-        target.classList.contains('space-y-[2px]') ||
+        target.classList.contains('space-y-0.5') ||
         target.closest('[data-empty-area]')
       if (!isOnEmptyArea) return
       if (!onCreateWorkflow && !onCreateFolder) return
@@ -562,19 +562,19 @@ export const WorkflowList = memo(function WorkflowList({
   return (
     <SidebarDragContext.Provider value={dragContextValue}>
       <div
-        className='flex min-h-full flex-col pb-[8px]'
+        className='flex min-h-full flex-col pb-2'
         onClick={handleContainerClick}
         onContextMenu={handleContainerContextMenu}
         data-empty-area
       >
         <div
-          className={clsx('relative flex-1 rounded-[4px]', !hasRootItems && 'min-h-[26px]')}
+          className={clsx('relative flex-1 rounded-sm', !hasRootItems && 'min-h-[26px]')}
           {...rootDropZoneHandlers}
           data-empty-area
         >
           <div
             className={clsx(
-              'pointer-events-none absolute inset-0 z-10 rounded-[4px]',
+              'pointer-events-none absolute inset-0 z-10 rounded-sm',
               showRootInside && isDragging ? 'bg-[var(--text-subtle)] opacity-10' : 'hidden'
             )}
           />
@@ -584,7 +584,7 @@ export const WorkflowList = memo(function WorkflowList({
               {...createEdgeDropZone(firstItemId, 'before')}
             />
           )}
-          <div className='space-y-[2px]' data-empty-area>
+          <div className='space-y-0.5' data-empty-area>
             {rootItems.map((item) =>
               item.type === 'folder'
                 ? renderFolderSection(item.data as FolderTreeNode, 0, null)
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
index aafe95c6226..7cc22d65827 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/components/permissions-table.tsx
@@ -10,14 +10,14 @@ import type { UserPermissions } from './types'
 
 const PermissionsTableSkeleton = () => (
   <div className='scrollbar-hide max-h-[300px] overflow-y-auto'>
-    <div className='flex items-center justify-between gap-[8px] py-[8px]'>
+    <div className='flex items-center justify-between gap-2 py-2'>
       <div className='min-w-0 flex-1'>
-        <div className='flex items-center gap-[8px]'>
-          <Skeleton className='h-[14px] w-40 rounded-[4px]' />
+        <div className='flex items-center gap-2'>
+          <Skeleton className='h-[14px] w-40 rounded-sm' />
         </div>
       </div>
       <div className='flex flex-shrink-0 items-center'>
-        <div className='inline-flex gap-[2px]'>
+        <div className='inline-flex gap-0.5'>
           <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
           <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
           <Skeleton className='h-[28px] w-[44px] rounded-[5px]' />
@@ -141,17 +141,17 @@ export const PermissionsTable = ({
 
   if (isSaving) {
     return (
-      <div className='space-y-[12px]'>
-        <h3 className='font-medium text-[14px] text-[var(--text-primary)]'>Member Permissions</h3>
-        <div className='rounded-[8px] border border-[var(--border-1)] bg-[var(--surface-3)]'>
-          <div className='flex items-center justify-center py-[48px]'>
-            <div className='flex items-center gap-[8px] text-[var(--text-secondary)]'>
+      <div className='space-y-3'>
+        <h3 className='font-medium text-[var(--text-primary)] text-sm'>Member Permissions</h3>
+        <div className='rounded-lg border border-[var(--border-1)] bg-[var(--surface-3)]'>
+          <div className='flex items-center justify-center py-12'>
+            <div className='flex items-center gap-2 text-[var(--text-secondary)]'>
               <Loader2 className='h-[16px] w-[16px] animate-spin' />
-              <span className='font-medium text-[13px]'>Saving permission changes...</span>
+              <span className='font-medium text-small'>Saving permission changes...</span>
             </div>
           </div>
         </div>
-        <p className='flex min-h-[2rem] items-start text-[12px] text-[var(--text-tertiary)]'>
+        <p className='flex min-h-[2rem] items-start text-[var(--text-tertiary)] text-caption'>
           Please wait while we update the permissions.
         </p>
       </div>
@@ -191,14 +191,14 @@ export const PermissionsTable = ({
                 : `new-${user.email}`
 
             return (
-              <div key={uniqueKey} className='flex items-center justify-between gap-[8px] py-[8px]'>
+              <div key={uniqueKey} className='flex items-center justify-between gap-2 py-2'>
                 <div className='min-w-0 flex-1'>
-                  <div className='flex items-center gap-[8px]'>
-                    <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                  <div className='flex items-center gap-2'>
+                    <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                       {user.email}
                     </span>
                     {isPendingInvitation && (
-                      <Badge variant='default' className='gap-[4px] text-[12px]'>
+                      <Badge variant='default' className='gap-1 text-caption'>
                         {resendingInvitationIds &&
                         user.invitationId &&
                         resendingInvitationIds[user.invitationId] ? (
@@ -213,7 +213,7 @@ export const PermissionsTable = ({
                       </Badge>
                     )}
                     {hasChanges && (
-                      <Badge variant='default' className='text-[12px]'>
+                      <Badge variant='default' className='text-caption'>
                         Modified
                       </Badge>
                     )}
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
index 117817f1c30..e9d3e713fbe 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/components/invite-modal/invite-modal.tsx
@@ -481,11 +481,11 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
           autoComplete='off'
         >
           <ModalBody>
-            <div className='space-y-[12px]'>
+            <div className='space-y-3'>
               <div>
                 <Label
                   htmlFor='invite-field'
-                  className='mb-[6.5px] block pl-[2px] font-medium text-[13px] text-[var(--text-primary)]'
+                  className='mb-[6.5px] block pl-0.5 font-medium text-[var(--text-primary)] text-small'
                 >
                   Email Addresses
                 </Label>
@@ -535,10 +535,10 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
                 />
               </div>
               {errorMessage && (
-                <p className='mt-[4px] text-[12px] text-[var(--text-error)]'>{errorMessage}</p>
+                <p className='mt-1 text-[var(--text-error)] text-caption'>{errorMessage}</p>
               )}
             </div>
-            <div className='mt-[8px]'>
+            <div className='mt-2'>
               <PermissionsTable
                 userPermissions={userPermissions}
                 onPermissionChange={handlePermissionChange}
@@ -561,7 +561,7 @@ export function InviteModal({ open, onOpenChange, workspaceName }: InviteModalPr
 
           <ModalFooter className='justify-between'>
             <div
-              className={`flex gap-[8px] ${hasPendingChanges && userPerms.canAdmin ? '' : 'pointer-events-none invisible'}`}
+              className={`flex gap-2 ${hasPendingChanges && userPerms.canAdmin ? '' : 'pointer-events-none invisible'}`}
               aria-hidden={!(hasPendingChanges && userPerms.canAdmin)}
             >
               <Button
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
index c932493470e..dc510f27b73 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/workspace-header/workspace-header.tsx
@@ -333,8 +333,8 @@ export function WorkspaceHeader({
                 type='button'
                 aria-label='Switch workspace'
                 className={cn(
-                  'group flex h-[32px] min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] pl-[5px] transition-colors hover:bg-[var(--surface-5)]',
-                  isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-[8px] pr-[8px]'
+                  'group flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-[5px] transition-colors hover-hover:bg-[var(--surface-5)]',
+                  isCollapsed ? 'w-[32px]' : 'w-full cursor-pointer gap-2 pr-2'
                 )}
                 title={activeWorkspace?.name || 'Loading...'}
                 onContextMenu={(e) => {
@@ -344,7 +344,7 @@ export function WorkspaceHeader({
                 }}
               >
                 <div
-                  className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] font-medium text-[12px] text-white leading-none'
+                  className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-caption text-white leading-none'
                   style={{
                     backgroundColor: activeWorkspaceFull?.color || 'var(--brand-tertiary-2)',
                   }}
@@ -353,7 +353,7 @@ export function WorkspaceHeader({
                 </div>
                 {!isCollapsed && (
                   <>
-                    <span className='min-w-0 flex-1 truncate text-left font-base text-[14px] text-[var(--text-primary)]'>
+                    <span className='min-w-0 flex-1 truncate text-left font-base text-[var(--text-primary)] text-sm'>
                       {activeWorkspace?.name || 'Loading...'}
                     </span>
                     <ChevronDown className='sidebar-collapse-hide h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)] group-hover:text-[var(--text-secondary)]' />
@@ -381,14 +381,14 @@ export function WorkspaceHeader({
               onCloseAutoFocus={(e) => e.preventDefault()}
             >
               {isWorkspacesLoading ? (
-                <div className='px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-secondary)]'>
+                <div className='px-2 py-[5px] font-medium text-[var(--text-secondary)] text-caption'>
                   Loading workspaces...
                 </div>
               ) : (
                 <>
-                  <div className='flex items-center gap-[8px] px-[2px] py-[2px]'>
+                  <div className='flex items-center gap-2 px-0.5 py-0.5'>
                     <div
-                      className='flex h-[32px] w-[32px] flex-shrink-0 items-center justify-center rounded-[6px] font-medium text-[12px] text-white'
+                      className='flex h-[32px] w-[32px] flex-shrink-0 items-center justify-center rounded-md font-medium text-caption text-white'
                       style={{
                         backgroundColor: activeWorkspaceFull?.color || 'var(--brand-tertiary-2)',
                       }}
@@ -396,21 +396,19 @@ export function WorkspaceHeader({
                       {workspaceInitial}
                     </div>
                     <div className='flex min-w-0 flex-col'>
-                      <span className='truncate font-medium text-[13px] text-[var(--text-primary)]'>
+                      <span className='truncate font-medium text-[var(--text-primary)] text-small'>
                         {activeWorkspace?.name || 'Loading...'}
                       </span>
-                      <span className='text-[11px] text-[var(--text-tertiary)]'>
-                        {planDisplayName}
-                      </span>
+                      <span className='text-[var(--text-tertiary)] text-xs'>{planDisplayName}</span>
                     </div>
                   </div>
 
-                  <DropdownMenuGroup className='mt-[4px] min-h-0 flex-1'>
-                    <div className='flex max-h-[130px] flex-col gap-[2px] overflow-y-auto'>
+                  <DropdownMenuGroup className='mt-1 min-h-0 flex-1'>
+                    <div className='flex max-h-[130px] flex-col gap-0.5 overflow-y-auto'>
                       {workspaces.map((workspace) => (
                         <div key={workspace.id}>
                           {editingWorkspaceId === workspace.id ? (
-                            <div className='flex items-center gap-[8px] rounded-[5px] bg-[var(--surface-active)] px-[8px] py-[5px]'>
+                            <div className='flex items-center gap-2 rounded-[5px] bg-[var(--surface-active)] px-2 py-[5px]'>
                               <input
                                 ref={(el) => {
                                   if (el && !hasInputFocusedRef.current) {
@@ -450,7 +448,7 @@ export function WorkspaceHeader({
                                   }
                                   setEditingWorkspaceId(null)
                                 }}
-                                className='w-full border-0 bg-transparent p-0 font-medium text-[12px] text-[var(--text-primary)] outline-none selection:bg-[#add6ff] selection:text-[#1b1b1b] focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:selection:bg-[#264f78] dark:selection:text-white'
+                                className='w-full border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-caption outline-none selection:bg-[#add6ff] selection:text-[var(--bg)] focus:outline-none focus:ring-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 dark:selection:bg-[var(--brand-blue-dark)] dark:selection:text-white'
                                 maxLength={100}
                                 autoComplete='off'
                                 autoCorrect='off'
@@ -465,7 +463,7 @@ export function WorkspaceHeader({
                           ) : (
                             <div
                               className={cn(
-                                'group flex cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors hover:bg-[var(--surface-active)]',
+                                'group flex cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]',
                                 workspace.id === workspaceId && 'bg-[var(--surface-active)]'
                               )}
                               onClick={() => onWorkspaceSwitch(workspace)}
@@ -484,7 +482,7 @@ export function WorkspaceHeader({
                                   const rect = e.currentTarget.getBoundingClientRect()
                                   openContextMenuAt(workspace, rect.right, rect.top)
                                 }}
-                                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-[4px] opacity-0 transition-opacity hover:bg-[var(--surface-7)] group-hover:opacity-100'
+                                className='flex h-[18px] w-[18px] flex-shrink-0 items-center justify-center rounded-sm opacity-0 transition-opacity hover-hover:bg-[var(--surface-7)] group-hover:opacity-100'
                               >
                                 <MoreHorizontal className='h-[14px] w-[14px] text-[var(--text-tertiary)]' />
                               </button>
@@ -495,10 +493,10 @@ export function WorkspaceHeader({
                     </div>
                   </DropdownMenuGroup>
 
-                  <div className='mt-[4px] flex flex-col gap-[2px]'>
+                  <div className='mt-1 flex flex-col gap-0.5'>
                     <button
                       type='button'
-                      className='flex w-full cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors hover:bg-[var(--surface-active)] disabled:pointer-events-none disabled:opacity-50'
+                      className='flex w-full cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)] disabled:pointer-events-none disabled:opacity-50'
                       onClick={(e) => {
                         e.stopPropagation()
                         setIsWorkspaceMenuOpen(false)
@@ -516,7 +514,7 @@ export function WorkspaceHeader({
                       <DropdownMenuSeparator />
                       <button
                         type='button'
-                        className='flex w-full cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors hover:bg-[var(--surface-active)]'
+                        className='flex w-full cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors hover-hover:bg-[var(--surface-active)]'
                         onClick={() => {
                           setIsInviteModalOpen(true)
                           setIsWorkspaceMenuOpen(false)
@@ -536,21 +534,21 @@ export function WorkspaceHeader({
             type='button'
             aria-label='Switch workspace'
             className={cn(
-              'flex h-[32px] min-w-0 items-center rounded-[8px] border border-[var(--border)] bg-[var(--surface-2)] pl-[5px]',
-              isCollapsed ? 'w-[32px]' : 'w-full gap-[8px] pr-[8px]'
+              'flex h-[32px] min-w-0 items-center rounded-lg border border-[var(--border)] bg-[var(--surface-2)] pl-[5px]',
+              isCollapsed ? 'w-[32px]' : 'w-full gap-2 pr-2'
             )}
             title={activeWorkspace?.name || 'Loading...'}
             disabled
           >
             <div
-              className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-[4px] font-medium text-[12px] text-white leading-none'
+              className='flex h-[20px] w-[20px] flex-shrink-0 items-center justify-center rounded-sm font-medium text-caption text-white leading-none'
               style={{ backgroundColor: activeWorkspaceFull?.color || 'var(--brand-tertiary-2)' }}
             >
               {workspaceInitial}
             </div>
             {!isCollapsed && (
               <>
-                <span className='min-w-0 flex-1 truncate text-left font-base text-[14px] text-[var(--text-primary)]'>
+                <span className='min-w-0 flex-1 truncate text-left font-base text-[var(--text-primary)] text-sm'>
                   {activeWorkspace?.name || 'Loading...'}
                 </span>
                 <ChevronDown className='sidebar-collapse-hide h-[8px] w-[10px] flex-shrink-0 text-[var(--text-muted)]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
index 211773f2c80..d2c40f52401 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/sidebar/sidebar.tsx
@@ -81,8 +81,8 @@ const logger = createLogger('Sidebar')
 
 function SidebarItemSkeleton() {
   return (
-    <div className='sidebar-collapse-hide mx-[2px] flex h-[30px] items-center px-[8px]'>
-      <Skeleton className='h-[24px] w-full rounded-[4px]' />
+    <div className='sidebar-collapse-hide mx-0.5 flex h-[30px] items-center px-2'>
+      <Skeleton className='h-[24px] w-full rounded-sm' />
     </div>
   )
 }
@@ -116,7 +116,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
         <Link
           href={task.href}
           className={cn(
-            'group mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]',
+            'group mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-sm hover-hover:bg-[var(--surface-active)]',
             (isCurrentRoute || isSelected) && 'bg-[var(--surface-active)]'
           )}
           onClick={(e) => {
@@ -146,7 +146,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
                 <span className='absolute h-[7px] w-[7px] rounded-full bg-amber-400 group-hover:hidden' />
               )}
               {!isActive && isUnread && !isCurrentRoute && (
-                <span className='absolute h-[7px] w-[7px] rounded-full bg-[#33C482] group-hover:hidden' />
+                <span className='absolute h-[7px] w-[7px] rounded-full bg-[var(--brand-tertiary-2)] group-hover:hidden' />
               )}
               <button
                 type='button'
@@ -157,7 +157,7 @@ const SidebarTaskItem = memo(function SidebarTaskItem({
                   e.stopPropagation()
                   onMoreClick(e, task.id)
                 }}
-                className='flex h-[18px] w-[18px] items-center justify-center rounded-[4px] opacity-0 hover:bg-[var(--surface-7)] group-hover:opacity-100'
+                className='flex h-[18px] w-[18px] items-center justify-center rounded-sm opacity-0 hover-hover:bg-[var(--surface-7)] group-hover:opacity-100'
               >
                 <MoreHorizontal className='h-[16px] w-[16px] text-[var(--text-icon)]' />
               </button>
@@ -195,7 +195,7 @@ const SidebarNavItem = memo(function SidebarNavItem({
 }) {
   const Icon = item.icon
   const baseClasses =
-    'group flex h-[30px] items-center gap-[8px] rounded-[8px] mx-[2px] px-[8px] text-[14px] hover:bg-[var(--surface-active)]'
+    'group flex h-[30px] items-center gap-2 rounded-lg mx-0.5 px-2 text-sm hover-hover:bg-[var(--surface-active)]'
   const activeClasses = active ? 'bg-[var(--surface-active)]' : ''
 
   const element = item.onClick ? (
@@ -972,16 +972,16 @@ export const Sidebar = memo(function Sidebar() {
         aria-label='Workspace sidebar'
         onClick={handleSidebarClick}
       >
-        <div className='flex h-full flex-col pt-[12px]'>
+        <div className='flex h-full flex-col pt-3'>
           {/* Top bar: Logo + Collapse toggle */}
-          <div className='flex flex-shrink-0 items-center pr-[8px] pb-[8px] pl-[10px]'>
+          <div className='flex flex-shrink-0 items-center pr-2 pb-2 pl-2.5'>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
                 {showCollapsedContent ? (
                   <button
                     type='button'
                     onClick={toggleCollapsed}
-                    className='group flex h-[30px] w-[30px] items-center justify-center rounded-[8px] hover:bg-[var(--surface-active)]'
+                    className='group flex h-[30px] w-[30px] items-center justify-center rounded-lg hover-hover:bg-[var(--surface-active)]'
                     aria-label='Expand sidebar'
                   >
                     {brand.logoUrl ? (
@@ -1001,7 +1001,7 @@ export const Sidebar = memo(function Sidebar() {
                 ) : (
                   <Link
                     href={`/workspace/${workspaceId}/home`}
-                    className='flex h-[30px] w-[30px] items-center justify-center rounded-[8px] hover:bg-[var(--surface-active)]'
+                    className='flex h-[30px] w-[30px] items-center justify-center rounded-lg hover-hover:bg-[var(--surface-active)]'
                   >
                     {brand.logoUrl ? (
                       <Image
@@ -1030,7 +1030,7 @@ export const Sidebar = memo(function Sidebar() {
                   type='button'
                   onClick={toggleCollapsed}
                   className={cn(
-                    'sidebar-collapse-btn ml-auto flex h-[30px] items-center justify-center overflow-hidden rounded-[8px] transition-all duration-200 hover:bg-[var(--surface-active)]',
+                    'sidebar-collapse-btn ml-auto flex h-[30px] items-center justify-center overflow-hidden rounded-lg transition-all duration-200 hover-hover:bg-[var(--surface-active)]',
                     isCollapsed ? 'w-0 opacity-0' : 'w-[30px] opacity-100'
                   )}
                   aria-label='Collapse sidebar'
@@ -1047,7 +1047,7 @@ export const Sidebar = memo(function Sidebar() {
           </div>
 
           {/* Workspace Header */}
-          <div className='flex-shrink-0 px-[10px]'>
+          <div className='flex-shrink-0 px-2.5'>
             <WorkspaceHeader
               activeWorkspace={activeWorkspace}
               workspaceId={workspaceId}
@@ -1079,7 +1079,7 @@ export const Sidebar = memo(function Sidebar() {
           ) : (
             <>
               {/* Top Navigation: Home, Search */}
-              <div className='mt-[10px] flex flex-shrink-0 flex-col gap-[2px] px-[8px]'>
+              <div className='mt-2.5 flex flex-shrink-0 flex-col gap-0.5 px-2'>
                 {topNavItems.map((item) => (
                   <SidebarNavItem
                     key={`${item.id}-${isCollapsed}`}
@@ -1092,11 +1092,11 @@ export const Sidebar = memo(function Sidebar() {
               </div>
 
               {/* Workspace */}
-              <div className='mt-[14px] flex flex-shrink-0 flex-col pb-[8px]'>
-                <div className='px-[16px] pb-[6px]'>
+              <div className='mt-3.5 flex flex-shrink-0 flex-col pb-2'>
+                <div className='px-4 pb-1.5'>
                   <div className='font-base text-[var(--text-icon)] text-small'>Workspace</div>
                 </div>
-                <div className='flex flex-col gap-[2px] px-[8px]'>
+                <div className='flex flex-col gap-0.5 px-2'>
                   {workspaceNavItems.map((item) => (
                     <SidebarNavItem
                       key={`${item.id}-${isCollapsed}`}
@@ -1119,15 +1119,15 @@ export const Sidebar = memo(function Sidebar() {
               >
                 {/* Tasks */}
                 <div className='flex flex-shrink-0 flex-col'>
-                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-[16px]'>
+                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
                     <div className='font-base text-[var(--text-icon)] text-small'>All tasks</div>
                     {!isCollapsed && (
-                      <div className='flex items-center justify-center gap-[8px]'>
+                      <div className='flex items-center justify-center gap-2'>
                         <Tooltip.Root>
                           <Tooltip.Trigger asChild>
                             <Button
                               variant='ghost'
-                              className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                              className='h-[18px] w-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-active)]'
                               onClick={() => navigateToPage(`/workspace/${workspaceId}/home`)}
                             >
                               <Plus className='h-[16px] w-[16px]' />
@@ -1148,7 +1148,7 @@ export const Sidebar = memo(function Sidebar() {
                       hover={tasksHover}
                       onClick={() => navigateToPage(`/workspace/${workspaceId}/home`)}
                       ariaLabel='Tasks'
-                      className='mt-[6px]'
+                      className='mt-1.5'
                     >
                       {tasksLoading ? (
                         <DropdownMenuItem disabled>
@@ -1165,7 +1165,7 @@ export const Sidebar = memo(function Sidebar() {
                                   <span className='-bottom-[1px] -right-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-amber-400' />
                                 )}
                                 {!task.isActive && task.isUnread && (
-                                  <span className='-bottom-[1px] -right-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[#33C482]' />
+                                  <span className='-bottom-[1px] -right-[1px] absolute h-[6px] w-[6px] rounded-full border border-[var(--surface-1)] bg-[var(--brand-tertiary-2)]' />
                                 )}
                               </span>
                               <span>{task.name}</span>
@@ -1175,7 +1175,7 @@ export const Sidebar = memo(function Sidebar() {
                       )}
                     </CollapsedSidebarMenu>
                   ) : (
-                    <div className='mt-[6px] flex flex-col gap-[2px] px-[8px]'>
+                    <div className='mt-1.5 flex flex-col gap-0.5 px-2'>
                       {tasksLoading ? (
                         <SidebarItemSkeleton />
                       ) : (
@@ -1189,7 +1189,7 @@ export const Sidebar = memo(function Sidebar() {
                               return (
                                 <div
                                   key={task.id}
-                                  className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] bg-[var(--surface-active)] px-[8px] text-[14px]'
+                                  className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg bg-[var(--surface-active)] px-2 text-sm'
                                 >
                                   <Blimp className='h-[16px] w-[16px] flex-shrink-0 text-[var(--text-icon)]' />
                                   <input
@@ -1198,7 +1198,7 @@ export const Sidebar = memo(function Sidebar() {
                                     onChange={(e) => setRenameValue(e.target.value)}
                                     onKeyDown={handleRenameKeyDown}
                                     onBlur={handleSaveTaskRename}
-                                    className='min-w-0 flex-1 border-none bg-transparent font-base text-[14px] text-[var(--text-body)] outline-none'
+                                    className='min-w-0 flex-1 border-none bg-transparent font-base text-[var(--text-body)] text-sm outline-none'
                                   />
                                 </div>
                               )
@@ -1224,7 +1224,7 @@ export const Sidebar = memo(function Sidebar() {
                             <button
                               type='button'
                               onClick={() => setVisibleTaskCount((prev) => prev + 5)}
-                              className='mx-[2px] flex h-[30px] items-center gap-[8px] rounded-[8px] px-[8px] text-[14px] text-[var(--text-icon)] hover:bg-[var(--surface-active)]'
+                              className='mx-0.5 flex h-[30px] items-center gap-2 rounded-lg px-2 text-[var(--text-icon)] text-sm hover-hover:bg-[var(--surface-active)]'
                             >
                               <MoreHorizontal className='h-[16px] w-[16px] flex-shrink-0' />
                               <span className='font-base'>See more</span>
@@ -1237,18 +1237,18 @@ export const Sidebar = memo(function Sidebar() {
                 </div>
 
                 {/* Workflows */}
-                <div className='workflows-section relative mt-[14px] flex flex-col'>
-                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-[16px]'>
+                <div className='workflows-section relative mt-3.5 flex flex-col'>
+                  <div className='flex h-[18px] flex-shrink-0 items-center justify-between px-4'>
                     <div className='font-base text-[var(--text-icon)] text-small'>Workflows</div>
                     {!isCollapsed && (
-                      <div className='flex items-center justify-center gap-[8px]'>
+                      <div className='flex items-center justify-center gap-2'>
                         <DropdownMenu>
                           <Tooltip.Root>
                             <Tooltip.Trigger asChild>
                               <DropdownMenuTrigger asChild>
                                 <Button
                                   variant='ghost'
-                                  className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                                  className='h-[18px] w-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-active)]'
                                   disabled={!canEdit}
                                 >
                                   {isImporting || isCreatingFolder ? (
@@ -1288,7 +1288,7 @@ export const Sidebar = memo(function Sidebar() {
                           <Tooltip.Trigger asChild>
                             <Button
                               variant='ghost'
-                              className='h-[18px] w-[18px] rounded-[4px] p-0 hover:bg-[var(--surface-active)]'
+                              className='h-[18px] w-[18px] rounded-sm p-0 hover-hover:bg-[var(--surface-active)]'
                               onClick={handleCreateWorkflow}
                               disabled={isCreatingWorkflow || !canEdit}
                             >
@@ -1317,7 +1317,7 @@ export const Sidebar = memo(function Sidebar() {
                       hover={workflowsHover}
                       onClick={handleCreateWorkflow}
                       ariaLabel='Workflows'
-                      className='mt-[6px]'
+                      className='mt-1.5'
                     >
                       {workflowsLoading && regularWorkflows.length === 0 ? (
                         <DropdownMenuItem disabled>
@@ -1352,7 +1352,7 @@ export const Sidebar = memo(function Sidebar() {
                       )}
                     </CollapsedSidebarMenu>
                   ) : (
-                    <div className='mt-[6px] px-[8px]'>
+                    <div className='mt-1.5 px-2'>
                       {workflowsLoading && regularWorkflows.length === 0 && <SidebarItemSkeleton />}
                       <WorkflowList
                         workspaceId={workspaceId}
@@ -1375,7 +1375,7 @@ export const Sidebar = memo(function Sidebar() {
               {/* Footer */}
               <div
                 className={cn(
-                  'flex flex-shrink-0 flex-col gap-[2px] border-t px-[8px] pt-[9px] pb-[8px] transition-colors duration-150',
+                  'flex flex-shrink-0 flex-col gap-0.5 border-t px-2 pt-[9px] pb-2 transition-colors duration-150',
                   !hasOverflowBottom && 'border-transparent'
                 )}
               >
diff --git a/apps/sim/components/emcn/components/avatar/avatar.tsx b/apps/sim/components/emcn/components/avatar/avatar.tsx
index 9500f7ecbeb..e2362a85164 100644
--- a/apps/sim/components/emcn/components/avatar/avatar.tsx
+++ b/apps/sim/components/emcn/components/avatar/avatar.tsx
@@ -31,10 +31,10 @@ const avatarStatusVariants = cva(
   {
     variants: {
       status: {
-        online: 'bg-[#16a34a]',
+        online: 'bg-[var(--brand-tertiary)]',
         offline: 'bg-[var(--text-muted)]',
-        busy: 'bg-[#dc2626]',
-        away: 'bg-[#f59e0b]',
+        busy: 'bg-[var(--error)]',
+        away: 'bg-[var(--amber)]',
       },
       size: {
         xs: 'h-1.5 w-1.5 border',
diff --git a/apps/sim/components/emcn/components/badge/badge.tsx b/apps/sim/components/emcn/components/badge/badge.tsx
index 837bb85fe4e..5a236e9b215 100644
--- a/apps/sim/components/emcn/components/badge/badge.tsx
+++ b/apps/sim/components/emcn/components/badge/badge.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 /** Shared base styles for status color badge variants */
-const STATUS_BASE = 'gap-[6px] rounded-[6px]'
+const STATUS_BASE = 'gap-1.5 rounded-md'
 
 const badgeVariants = cva(
   'inline-flex items-center font-medium focus:outline-none transition-colors',
@@ -13,10 +13,10 @@ const badgeVariants = cva(
     variants: {
       variant: {
         default:
-          'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover:text-[var(--text-primary)] hover:border-[var(--border-1)] hover:bg-[var(--surface-6)] dark:hover:bg-[var(--surface-5)]',
+          'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]',
         outline:
-          'gap-[4px] rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-5)] dark:hover:bg-transparent dark:hover:border-[var(--surface-6)]',
-        type: 'gap-[4px] rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]',
+          'gap-1 rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:bg-transparent dark:hover-hover:border-[var(--surface-6)]',
+        type: 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]',
         green: `${STATUS_BASE} bg-[#bbf7d0] text-[#15803d] dark:bg-[rgba(34,197,94,0.2)] dark:text-[#86efac]`,
         red: `${STATUS_BASE} bg-[#fecaca] text-[var(--text-error)] dark:bg-[#551a1a] dark:text-[var(--text-error)]`,
         gray: `${STATUS_BASE} bg-[#e7e5e4] text-[#57534e] dark:bg-[var(--terminal-status-info-bg)] dark:text-[var(--terminal-status-info-color)]`,
@@ -31,9 +31,9 @@ const badgeVariants = cva(
         'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`,
       },
       size: {
-        sm: 'px-[7px] py-[1px] text-[11px]',
-        md: 'px-[9px] py-[2px] text-[12px]',
-        lg: 'px-[9px] py-[2.25px] text-[12px]',
+        sm: 'px-[7px] py-[1px] text-xs',
+        md: 'px-[9px] py-0.5 text-caption',
+        lg: 'px-[9px] py-[2.25px] text-caption',
       },
     },
     defaultVariants: {
@@ -109,7 +109,7 @@ function Badge({
   return (
     <div className={cn(badgeVariants({ variant, size }), className)} {...props}>
       {isStatusVariant && dot && (
-        <div className={cn('rounded-[2px] bg-current', DOT_SIZES[effectiveSize])} />
+        <div className={cn('rounded-xs bg-current', DOT_SIZES[effectiveSize])} />
       )}
       {Icon && <Icon className={ICON_SIZES[effectiveSize]} />}
       {children}
diff --git a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
index ae2167f2915..7d3bfede860 100644
--- a/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
+++ b/apps/sim/components/emcn/components/breadcrumb/breadcrumb.tsx
@@ -19,27 +19,23 @@ export interface BreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
  */
 function Breadcrumb({ items, className, ...props }: BreadcrumbProps) {
   return (
-    <nav
-      aria-label='Breadcrumb'
-      className={cn('flex items-center gap-[6px]', className)}
-      {...props}
-    >
+    <nav aria-label='Breadcrumb' className={cn('flex items-center gap-1.5', className)} {...props}>
       {items.map((item, index) => {
         const isLast = index === items.length - 1
 
         return (
-          <div key={`${item.label}-${index}`} className='flex items-center gap-[6px]'>
+          <div key={`${item.label}-${index}`} className='flex items-center gap-1.5'>
             {item.href && !isLast ? (
               <Link
                 href={item.href}
-                className='block max-w-[200px] truncate font-medium text-[14px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-primary)]'
+                className='block max-w-[200px] truncate font-medium text-[var(--text-tertiary)] text-sm transition-colors hover-hover:text-[var(--text-primary)]'
               >
                 {item.label}
               </Link>
             ) : (
               <span
                 className={cn(
-                  'block max-w-[200px] truncate font-medium text-[14px]',
+                  'block max-w-[200px] truncate font-medium text-sm',
                   isLast ? 'text-[var(--text-primary)]' : 'text-[var(--text-tertiary)]'
                 )}
               >
diff --git a/apps/sim/components/emcn/components/button-group/button-group.tsx b/apps/sim/components/emcn/components/button-group/button-group.tsx
index a9c6f22474f..9be9c842bc6 100644
--- a/apps/sim/components/emcn/components/button-group/button-group.tsx
+++ b/apps/sim/components/emcn/components/button-group/button-group.tsx
@@ -17,7 +17,7 @@ const buttonGroupVariants = cva('inline-flex', {
   variants: {
     gap: {
       none: 'gap-0',
-      sm: 'gap-[2px]',
+      sm: 'gap-0.5',
     },
   },
   defaultVariants: {
@@ -100,13 +100,13 @@ function ButtonGroup({
 }
 
 const buttonGroupItemVariants = cva(
-  'inline-flex items-center justify-center font-medium transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-[8px] py-[4px] text-[12px] border',
+  'inline-flex items-center justify-center font-medium transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border',
   {
     variants: {
       active: {
-        true: 'bg-[#1D1D1D] text-[var(--text-inverse)] border-[#1D1D1D] hover:bg-[#2A2A2A] hover:border-[#2A2A2A] dark:bg-white dark:border-white dark:hover:bg-[#E0E0E0] dark:hover:border-[#E0E0E0]',
+        true: 'bg-[var(--text-primary)] text-[var(--text-inverse)] border-[var(--text-primary)] hover-hover:bg-[var(--surface-4)] hover-hover:border-[var(--border)] dark:bg-white dark:text-[var(--bg)] dark:border-white dark:hover-hover:bg-[var(--border-1)] dark:hover-hover:text-[var(--text-inverse)] dark:hover-hover:border-[var(--border-1)]',
         false:
-          'bg-[var(--surface-4)] text-[var(--text-secondary)] border-[var(--border)] hover:text-[var(--text-primary)] hover:bg-[var(--surface-6)] hover:border-[var(--border-1)]',
+          'bg-[var(--surface-4)] text-[var(--text-secondary)] border-[var(--border)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-6)] hover-hover:border-[var(--border-1)]',
       },
       position: {
         only: 'rounded-[5px]',
diff --git a/apps/sim/components/emcn/components/button/button.tsx b/apps/sim/components/emcn/components/button/button.tsx
index 02de7fe269e..a2992292de5 100644
--- a/apps/sim/components/emcn/components/button/button.tsx
+++ b/apps/sim/components/emcn/components/button/button.tsx
@@ -3,35 +3,37 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 const buttonVariants = cva(
-  'inline-flex items-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
+  'inline-flex items-center justify-center font-medium transition-colors active:scale-[0.97] disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]',
   {
     variants: {
       variant: {
         default:
-          'bg-[var(--surface-4)] hover:bg-[var(--surface-6)] border border-[var(--border)] hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]',
+          'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] bg-[var(--surface-4)] hover-hover:bg-[var(--surface-6)] border border-[var(--border)] hover-hover:border-[var(--border-1)] dark:hover-hover:bg-[var(--surface-5)]',
         active:
-          'bg-[var(--surface-5)] hover:bg-[var(--surface-7)] text-[var(--text-primary)] border border-[var(--border-1)] dark:hover:bg-[var(--border-1)]',
-        '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-1)] shadow-[0_2px_0_0_var(--border-1)] hover:shadow-[0_4px_0_0_var(--border-1)] transition-all hover:-translate-y-0.5 hover:text-[var(--text-primary)]',
+          'bg-[var(--surface-5)] hover-hover:bg-[var(--surface-7)] text-[var(--text-primary)] border border-[var(--border-1)] dark:hover-hover:bg-[var(--border-1)]',
+        '3d': 'text-[var(--text-tertiary)] border-t border-l border-r border-[var(--border-1)] shadow-[0_2px_0_0_var(--border-1)] hover-hover:shadow-[0_4px_0_0_var(--border-1)] transition-[transform,box-shadow,color] hover-hover:-translate-y-0.5 hover-hover:text-[var(--text-primary)]',
         outline:
-          'border border-[var(--text-muted)] bg-transparent hover:border-[var(--text-secondary)]',
+          'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] border border-[var(--text-muted)] bg-transparent hover-hover:border-[var(--text-secondary)]',
         primary:
-          'bg-[#1D1D1D] text-[var(--text-inverse)] hover:text-[var(--text-inverse)] hover:bg-[#2A2A2A] dark:bg-white dark:hover:bg-[#E0E0E0]',
-        destructive: 'bg-[var(--text-error)] text-white hover:text-white hover:brightness-106',
+          'bg-[var(--text-primary)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[var(--surface-4)] dark:bg-white dark:text-[var(--bg)] dark:hover-hover:bg-[var(--border-1)] dark:hover-hover:text-[var(--text-inverse)]',
+        destructive:
+          'bg-[var(--text-error)] text-white hover-hover:text-white hover-hover:brightness-106',
         secondary: 'bg-[var(--brand-secondary)] text-[var(--text-primary)]',
         tertiary:
-          '!bg-[var(--brand-tertiary-2)] !text-[var(--text-inverse)] hover:!text-[var(--text-inverse)] hover:!bg-[#2DAC72] dark:!bg-[var(--brand-tertiary-2)] dark:hover:!bg-[#2DAC72] dark:!text-[var(--text-inverse)] dark:hover:!text-[var(--text-inverse)]',
-        ghost: '',
-        subtle: 'text-[var(--text-body)] hover:text-[var(--text-body)] hover:bg-[var(--surface-4)]',
-        'ghost-secondary': 'text-[var(--text-muted)]',
+          'bg-[var(--brand-tertiary-2)] text-[var(--text-inverse)] hover-hover:text-[var(--text-inverse)] hover-hover:bg-[#2DAC72] dark:bg-[var(--brand-tertiary-2)] dark:hover-hover:bg-[#2DAC72] dark:text-[var(--text-inverse)] dark:hover-hover:text-[var(--text-inverse)]',
+        ghost: 'text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
+        subtle:
+          'text-[var(--text-body)] hover-hover:text-[var(--text-body)] hover-hover:bg-[var(--surface-4)]',
+        'ghost-secondary': 'text-[var(--text-muted)] hover-hover:text-[var(--text-primary)]',
         /** Branded button - requires branded-button-gradient or branded-button-custom class for colors */
         branded:
-          'rounded-[10px] border text-white hover:text-white text-[15px] transition-all duration-200',
+          'rounded-[10px] border text-white hover-hover:text-white text-base transition-[transform,background-color,color,border-color] duration-200',
       },
       size: {
-        sm: 'px-[6px] py-[4px] text-[11px]',
-        md: 'px-[8px] py-[6px] text-[12px]',
+        sm: 'px-1.5 py-1 text-xs',
+        md: 'px-2 py-1.5 text-caption',
         /** Branded size - matches login form button padding */
-        branded: 'py-[6px] pr-[10px] pl-[12px]',
+        branded: 'py-1.5 pr-2.5 pl-3',
       },
     },
     defaultVariants: {
diff --git a/apps/sim/components/emcn/components/checkbox/checkbox.tsx b/apps/sim/components/emcn/components/checkbox/checkbox.tsx
index 1a3c0d6fa92..6ce4b264c44 100644
--- a/apps/sim/components/emcn/components/checkbox/checkbox.tsx
+++ b/apps/sim/components/emcn/components/checkbox/checkbox.tsx
@@ -24,8 +24,9 @@ import { cn } from '@/lib/core/utils/cn'
  */
 const checkboxVariants = cva(
   [
-    'peer flex shrink-0 cursor-pointer items-center justify-center rounded-[4px] border transition-colors',
+    'relative peer flex shrink-0 cursor-pointer items-center justify-center rounded-sm border transition-colors',
     'border-[var(--border-1)] bg-transparent',
+    'before:absolute before:inset-[-12px] before:content-[""]',
     'focus-visible:outline-none',
     'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50',
     'data-[state=checked]:border-[var(--text-primary)] data-[state=checked]:bg-[var(--text-primary)]',
diff --git a/apps/sim/components/emcn/components/code/code.css b/apps/sim/components/emcn/components/code/code.css
index be90a337a40..e4ae11111c4 100644
--- a/apps/sim/components/emcn/components/code/code.css
+++ b/apps/sim/components/emcn/components/code/code.css
@@ -3,149 +3,152 @@
  * Cursor/VS Code base colors with Sim's vibrant saturation.
  * Colors aligned to Sim brand where applicable.
  * Applied to elements with .code-editor-theme class.
+ *
+ * Uses double-class specificity (.code-editor-theme.code-editor-theme)
+ * to override PrismJS defaults without !important.
  */
 
 /**
  * Light mode token colors - Cursor style with Sim vibrancy
  */
-.code-editor-theme .token.comment,
-.code-editor-theme .token.block-comment,
-.code-editor-theme .token.prolog,
-.code-editor-theme .token.doctype,
-.code-editor-theme .token.cdata {
-  color: #16a34a !important;
+.code-editor-theme.code-editor-theme .token.comment,
+.code-editor-theme.code-editor-theme .token.block-comment,
+.code-editor-theme.code-editor-theme .token.prolog,
+.code-editor-theme.code-editor-theme .token.doctype,
+.code-editor-theme.code-editor-theme .token.cdata {
+  color: #16a34a;
 }
 
-.code-editor-theme .token.punctuation {
-  color: #383838 !important;
+.code-editor-theme.code-editor-theme .token.punctuation {
+  color: #383838;
 }
 
-.code-editor-theme .token.property,
-.code-editor-theme .token.attr-name,
-.code-editor-theme .token.variable {
-  color: #0891b2 !important;
+.code-editor-theme.code-editor-theme .token.property,
+.code-editor-theme.code-editor-theme .token.attr-name,
+.code-editor-theme.code-editor-theme .token.variable {
+  color: #0891b2;
 }
 
-.code-editor-theme .token.tag,
-.code-editor-theme .token.boolean,
-.code-editor-theme .token.number,
-.code-editor-theme .token.constant {
-  color: #16a34a !important;
+.code-editor-theme.code-editor-theme .token.tag,
+.code-editor-theme.code-editor-theme .token.boolean,
+.code-editor-theme.code-editor-theme .token.number,
+.code-editor-theme.code-editor-theme .token.constant {
+  color: #16a34a;
 }
 
-.code-editor-theme .token.string,
-.code-editor-theme .token.char,
-.code-editor-theme .token.builtin,
-.code-editor-theme .token.inserted {
-  color: #b45309 !important;
+.code-editor-theme.code-editor-theme .token.string,
+.code-editor-theme.code-editor-theme .token.char,
+.code-editor-theme.code-editor-theme .token.builtin,
+.code-editor-theme.code-editor-theme .token.inserted {
+  color: #b45309;
 }
 
-.code-editor-theme .token.operator,
-.code-editor-theme .token.entity,
-.code-editor-theme .token.url {
-  color: #383838 !important;
+.code-editor-theme.code-editor-theme .token.operator,
+.code-editor-theme.code-editor-theme .token.entity,
+.code-editor-theme.code-editor-theme .token.url {
+  color: #383838;
 }
 
-.code-editor-theme .token.atrule,
-.code-editor-theme .token.attr-value,
-.code-editor-theme .token.keyword {
-  color: #2f55ff !important;
+.code-editor-theme.code-editor-theme .token.atrule,
+.code-editor-theme.code-editor-theme .token.attr-value,
+.code-editor-theme.code-editor-theme .token.keyword {
+  color: #2f55ff;
 }
 
-.code-editor-theme .token.function,
-.code-editor-theme .token.class-name {
-  color: #ca8a04 !important;
+.code-editor-theme.code-editor-theme .token.function,
+.code-editor-theme.code-editor-theme .token.class-name {
+  color: #ca8a04;
 }
 
-.code-editor-theme .token.regex,
-.code-editor-theme .token.important {
-  color: #e11d48 !important;
+.code-editor-theme.code-editor-theme .token.regex,
+.code-editor-theme.code-editor-theme .token.important {
+  color: #e11d48;
 }
 
-.code-editor-theme .token.symbol {
-  color: #383838 !important;
+.code-editor-theme.code-editor-theme .token.symbol {
+  color: #383838;
 }
 
-.code-editor-theme .token.deleted {
-  color: #dc2626 !important;
+.code-editor-theme.code-editor-theme .token.deleted {
+  color: #dc2626;
 }
 
 /* Blue accents for <var> and {{ENV}} placeholders - light mode */
-.code-editor-theme .text-blue-500 {
-  color: #1d4ed8 !important;
+.code-editor-theme.code-editor-theme .text-blue-500 {
+  color: #1d4ed8;
 }
 
 /**
  * Dark mode token colors - Cursor style with Sim vibrancy
  */
-.dark .code-editor-theme .token.comment,
-.dark .code-editor-theme .token.block-comment,
-.dark .code-editor-theme .token.prolog,
-.dark .code-editor-theme .token.doctype,
-.dark .code-editor-theme .token.cdata {
-  color: #6ec97d !important;
+.dark .code-editor-theme.code-editor-theme .token.comment,
+.dark .code-editor-theme.code-editor-theme .token.block-comment,
+.dark .code-editor-theme.code-editor-theme .token.prolog,
+.dark .code-editor-theme.code-editor-theme .token.doctype,
+.dark .code-editor-theme.code-editor-theme .token.cdata {
+  color: #6ec97d;
 }
 
-.dark .code-editor-theme .token.punctuation {
-  color: #d4d4d4 !important;
+.dark .code-editor-theme.code-editor-theme .token.punctuation {
+  color: #d4d4d4;
 }
 
-.dark .code-editor-theme .token.property,
-.dark .code-editor-theme .token.attr-name,
-.dark .code-editor-theme .token.variable {
-  color: #4fc3f7 !important;
+.dark .code-editor-theme.code-editor-theme .token.property,
+.dark .code-editor-theme.code-editor-theme .token.attr-name,
+.dark .code-editor-theme.code-editor-theme .token.variable {
+  color: #4fc3f7;
 }
 
-.dark .code-editor-theme .token.tag,
-.dark .code-editor-theme .token.boolean,
-.dark .code-editor-theme .token.number,
-.dark .code-editor-theme .token.constant {
-  color: #a5d6a7 !important;
+.dark .code-editor-theme.code-editor-theme .token.tag,
+.dark .code-editor-theme.code-editor-theme .token.boolean,
+.dark .code-editor-theme.code-editor-theme .token.number,
+.dark .code-editor-theme.code-editor-theme .token.constant {
+  color: #a5d6a7;
 }
 
-.dark .code-editor-theme .token.string,
-.dark .code-editor-theme .token.char,
-.dark .code-editor-theme .token.builtin,
-.dark .code-editor-theme .token.inserted {
-  color: #f39c6b !important;
+.dark .code-editor-theme.code-editor-theme .token.string,
+.dark .code-editor-theme.code-editor-theme .token.char,
+.dark .code-editor-theme.code-editor-theme .token.builtin,
+.dark .code-editor-theme.code-editor-theme .token.inserted {
+  color: #f39c6b;
 }
 
-.dark .code-editor-theme .token.operator,
-.dark .code-editor-theme .token.entity,
-.dark .code-editor-theme .token.url {
-  color: #d4d4d4 !important;
+.dark .code-editor-theme.code-editor-theme .token.operator,
+.dark .code-editor-theme.code-editor-theme .token.entity,
+.dark .code-editor-theme.code-editor-theme .token.url {
+  color: #d4d4d4;
 }
 
-.dark .code-editor-theme .token.atrule,
-.dark .code-editor-theme .token.attr-value,
-.dark .code-editor-theme .token.keyword {
-  color: #2fa1ff !important;
+.dark .code-editor-theme.code-editor-theme .token.atrule,
+.dark .code-editor-theme.code-editor-theme .token.attr-value,
+.dark .code-editor-theme.code-editor-theme .token.keyword {
+  color: #2fa1ff;
 }
 
-.dark .code-editor-theme .token.function,
-.dark .code-editor-theme .token.class-name {
-  color: #fbbf24 !important;
+.dark .code-editor-theme.code-editor-theme .token.function,
+.dark .code-editor-theme.code-editor-theme .token.class-name {
+  color: #fbbf24;
 }
 
-.dark .code-editor-theme .token.regex,
-.dark .code-editor-theme .token.important {
-  color: #f87171 !important;
+.dark .code-editor-theme.code-editor-theme .token.regex,
+.dark .code-editor-theme.code-editor-theme .token.important {
+  color: #f87171;
 }
 
-.dark .code-editor-theme .token.symbol {
-  color: #d4d4d4 !important;
+.dark .code-editor-theme.code-editor-theme .token.symbol {
+  color: #d4d4d4;
 }
 
-.dark .code-editor-theme .token.deleted {
-  color: #f87171 !important;
+.dark .code-editor-theme.code-editor-theme .token.deleted {
+  color: #f87171;
 }
 
 /* Blue accents for <var> and {{ENV}} placeholders - dark mode */
-.dark .code-editor-theme .text-blue-500 {
-  color: #35b6ff !important;
+.dark .code-editor-theme.code-editor-theme .text-blue-500 {
+  color: #35b6ff;
 }
 
 /* Ensure transparent backgrounds */
-.code-editor-theme .token {
-  background: transparent !important;
+.code-editor-theme.code-editor-theme .token {
+  background: transparent;
 }
diff --git a/apps/sim/components/emcn/components/code/code.tsx b/apps/sim/components/emcn/components/code/code.tsx
index 94f865b01ed..51c0765e2b9 100644
--- a/apps/sim/components/emcn/components/code/code.tsx
+++ b/apps/sim/components/emcn/components/code/code.tsx
@@ -329,7 +329,7 @@ const CollapseButton = memo(function CollapseButton({ isCollapsed, onClick }: Co
     <button
       type='button'
       onClick={onClick}
-      className='flex h-[21px] w-[12px] cursor-pointer items-center justify-center border-none bg-transparent p-0 text-[var(--text-muted)] hover:text-[var(--text-secondary)]'
+      className='flex h-[21px] w-[12px] cursor-pointer items-center justify-center border-none bg-transparent p-0 text-[var(--text-muted)] hover-hover:text-[var(--text-secondary)]'
       aria-label={isCollapsed ? 'Expand' : 'Collapse'}
     >
       <ChevronRight
@@ -376,9 +376,9 @@ function Container({ children, className, style, onDragOver, onDrop }: CodeConta
     <div
       className={cn(
         // Base container styling
-        'group relative min-h-[100px] rounded-[4px] border border-[var(--border-1)]',
+        'group relative min-h-[100px] rounded-sm border border-[var(--border-1)]',
         'bg-[var(--surface-1)] font-medium font-mono text-sm transition-colors',
-        'dark:bg-[#1F1F1F]',
+        'dark:bg-[var(--code-bg)]',
         // Overflow handling for long content
         'overflow-x-auto overflow-y-auto',
         className
@@ -441,7 +441,7 @@ export function getCodeEditorProps(options?: {
     className: cn(
       // Base editor classes
       'bg-transparent font-[inherit] text-[inherit] font-medium',
-      'text-[var(--text-primary)] dark:text-[#eeeeee]',
+      'text-[var(--text-primary)] dark:text-[var(--code-foreground)]',
       'leading-[21px] outline-none focus:outline-none',
       'min-h-[106px]',
       // Streaming/disabled states
@@ -452,8 +452,8 @@ export function getCodeEditorProps(options?: {
       'border-none bg-transparent outline-none resize-none',
       'focus:outline-none focus:ring-0',
       // Selection styling - light and dark modes
-      'selection:bg-[#add6ff] selection:text-[#1b1b1b]',
-      'dark:selection:bg-[#264f78] dark:selection:text-white',
+      'selection:bg-[#add6ff] selection:text-[var(--bg)]',
+      'dark:selection:bg-[var(--brand-blue-dark)] dark:selection:text-white',
       // Caret color - adapts to mode
       'caret-[var(--text-primary)] dark:caret-white',
       // Font smoothing
@@ -488,7 +488,7 @@ function Gutter({ children, width, className, style }: CodeGutterProps) {
       className={cn(
         'absolute top-0 bottom-0 left-0',
         'flex select-none flex-col items-end overflow-hidden',
-        'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[#1F1F1F]',
+        'rounded-l-[4px] bg-[var(--surface-1)] dark:bg-[var(--code-bg)]',
         'pr-0.5',
         className
       )}
@@ -613,7 +613,7 @@ function CodeRow({ index, style, ...props }: RowComponentProps<CodeRowProps>) {
     <div style={style} className={cn('flex', wrapText && 'overflow-hidden')} data-row-index={index}>
       {showGutter && (
         <div
-          className='flex-shrink-0 select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
+          className='flex-shrink-0 select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[var(--code-line-number)]'
           style={{ width: gutterWidth, marginLeft: leftOffset, ...gutterStyle }}
         >
           {line.lineNumber}
@@ -634,7 +634,7 @@ function CodeRow({ index, style, ...props }: RowComponentProps<CodeRowProps>) {
       )}
       <pre
         className={cn(
-          'm-0 flex-1 pr-2 pl-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]',
+          'm-0 flex-1 pr-2 pl-2 font-mono text-[var(--text-primary)] text-small leading-[21px] dark:text-[var(--code-foreground)]',
           wrapText ? 'min-w-0 whitespace-pre-wrap break-words' : 'whitespace-pre'
         )}
         dangerouslySetInnerHTML={{ __html: line.html || '&nbsp;' }}
@@ -676,10 +676,10 @@ function applySearchHighlightingToLine(
         matchesInLine++
 
         const bgClass = isCurrentMatch
-          ? 'bg-[#F6AD55] text-[#1a1a1a] dark:bg-[#F6AD55] dark:text-[#1a1a1a]'
+          ? 'bg-[#F6AD55] text-[var(--text-primary)] dark:bg-[#F6AD55] dark:text-[var(--text-primary)]'
           : 'bg-[#FCD34D]/40 dark:bg-[#FCD34D]/30'
 
-        return `<mark class="${bgClass} rounded-[2px]" data-search-match>${match}</mark>`
+        return `<mark class="${bgClass} rounded-xs" data-search-match>${match}</mark>`
       })
     })
     .join('')
@@ -764,10 +764,10 @@ function applySearchHighlighting(
         matchCounter.count++
 
         const bgClass = isCurrentMatch
-          ? 'bg-[#F6AD55] text-[#1a1a1a] dark:bg-[#F6AD55] dark:text-[#1a1a1a]'
+          ? 'bg-[#F6AD55] text-[var(--text-primary)] dark:bg-[#F6AD55] dark:text-[var(--text-primary)]'
           : 'bg-[#FCD34D]/40 dark:bg-[#FCD34D]/30'
 
-        return `<mark class="${bgClass} rounded-[2px]" data-search-match>${match}</mark>`
+        return `<mark class="${bgClass} rounded-xs" data-search-match>${match}</mark>`
       })
     })
     .join('')
@@ -983,9 +983,9 @@ const VirtualizedViewerInner = memo(function VirtualizedViewerInner({
     <div
       ref={setRefs}
       className={cn(
-        'code-editor-theme relative rounded-[4px] border border-[var(--border-1)]',
+        'code-editor-theme relative rounded-sm border border-[var(--border-1)]',
         'bg-[var(--surface-1)] font-medium font-mono text-sm',
-        'dark:bg-[#1F1F1F]',
+        'dark:bg-[var(--code-bg)]',
         className
       )}
       style={{ height: containerHeight }}
@@ -1135,7 +1135,7 @@ const ViewerInner = memo(function ViewerInner({
               return (
                 <Fragment key={idx}>
                   <div
-                    className='select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[#a8a8a8]'
+                    className='select-none pr-0.5 text-right text-[var(--text-muted)] text-xs tabular-nums leading-[21px] dark:text-[var(--code-line-number)]'
                     style={gutterStyle}
                   >
                     {lineNumber}
@@ -1152,7 +1152,7 @@ const ViewerInner = memo(function ViewerInner({
                   )}
                   <pre
                     className={cn(
-                      'm-0 min-w-0 pr-2 pl-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]',
+                      'm-0 min-w-0 pr-2 pl-2 font-mono text-[var(--text-primary)] text-small leading-[21px] dark:text-[var(--code-foreground)]',
                       whitespaceClass
                     )}
                     dangerouslySetInnerHTML={{ __html: html }}
@@ -1173,7 +1173,7 @@ const ViewerInner = memo(function ViewerInner({
         <pre
           className={cn(
             whitespaceClass,
-            'p-2 font-mono text-[13px] text-[var(--text-primary)] leading-[21px] dark:text-[#eeeeee]'
+            'p-2 font-mono text-[var(--text-primary)] text-small leading-[21px] dark:text-[var(--code-foreground)]'
           )}
           style={{ paddingLeft: paddingLeft > 0 ? paddingLeft : undefined }}
           dangerouslySetInnerHTML={{ __html: highlightedCode }}
diff --git a/apps/sim/components/emcn/components/combobox/combobox.tsx b/apps/sim/components/emcn/components/combobox/combobox.tsx
index e9cbeebd855..ad2faee72ce 100644
--- a/apps/sim/components/emcn/components/combobox/combobox.tsx
+++ b/apps/sim/components/emcn/components/combobox/combobox.tsx
@@ -21,15 +21,15 @@ import { Input } from '../input/input'
 import { Popover, PopoverAnchor, PopoverContent, PopoverScrollArea } from '../popover/popover'
 
 const comboboxVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]',
   {
     variants: {
       variant: {
         default: '',
       },
       size: {
-        sm: 'py-[5px] text-[12px]',
-        md: 'py-[6px] text-sm',
+        sm: 'py-[5px] text-caption',
+        md: 'py-1.5 text-sm',
       },
     },
     defaultVariants: {
@@ -187,11 +187,19 @@ const Combobox = memo(
       const searchInputRef = useRef<HTMLInputElement>(null)
       const containerRef = useRef<HTMLDivElement>(null)
       const dropdownRef = useRef<HTMLDivElement>(null)
+      const blurTimeoutRef = useRef<ReturnType<typeof setTimeout>>(null)
       const internalInputRef = useRef<HTMLInputElement>(null)
       const inputRef = externalInputRef || internalInputRef
 
       const effectiveSelectedValue = selectedValue ?? value
 
+      // Cleanup blur timeout on unmount
+      useEffect(() => {
+        return () => {
+          if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current)
+        }
+      }, [])
+
       // Flatten groups into options if groups are provided
       const allOptions = useMemo(() => {
         if (groups) {
@@ -328,8 +336,10 @@ const Combobox = memo(
        * Handles blur for editable mode
        */
       const handleBlur = useCallback(() => {
+        // Clear any pending blur timeout
+        if (blurTimeoutRef.current) clearTimeout(blurTimeoutRef.current)
         // Delay to allow dropdown clicks
-        setTimeout(() => {
+        blurTimeoutRef.current = setTimeout(() => {
           const activeElement = document.activeElement
           // Check if focus is in the container, dropdown, or search input
           const isInContainer = containerRef.current?.contains(activeElement)
@@ -510,9 +520,9 @@ const Combobox = memo(
                     <Input
                       ref={inputRef}
                       className={cn(
-                        'w-full pr-[40px] font-medium transition-colors hover:bg-[var(--surface-7)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+                        'w-full pr-10 font-medium transition-colors hover-hover:bg-[var(--surface-7)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]',
                         (overlayContent || SelectedIcon) && 'text-transparent caret-foreground',
-                        SelectedIcon && !overlayContent && 'pl-[28px]',
+                        SelectedIcon && !overlayContent && 'pl-7',
                         className
                       )}
                       placeholder={placeholder}
@@ -527,7 +537,7 @@ const Combobox = memo(
                     {(overlayContent || SelectedIcon) && (
                       <div
                         className={cn(
-                          'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-[8px] py-[6px] font-medium font-sans text-sm',
+                          'pointer-events-none absolute top-0 right-[42px] bottom-0 left-0 flex items-center bg-transparent px-2 py-1.5 font-medium font-sans text-sm',
                           disabled && 'opacity-50'
                         )}
                       >
@@ -536,7 +546,7 @@ const Combobox = memo(
                         ) : (
                           <>
                             {SelectedIcon && (
-                              <SelectedIcon className='mr-[8px] h-3 w-3 flex-shrink-0' />
+                              <SelectedIcon className='mr-2 h-3 w-3 flex-shrink-0' />
                             )}
                             <span className='truncate text-[var(--text-primary)]'>
                               {selectedOption?.label}
@@ -586,12 +596,12 @@ const Combobox = memo(
                     </span>
                     <ChevronDown
                       className={cn(
-                        'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
+                        'ml-2 h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
                         open && 'rotate-180'
                       )}
                     />
                     {overlayContent && (
-                      <div className='pointer-events-none absolute inset-y-0 right-[24px] left-0 flex items-center px-[8px]'>
+                      <div className='pointer-events-none absolute inset-y-0 right-[24px] left-0 flex items-center px-2'>
                         <div className='w-full truncate'>{overlayContent}</div>
                       </div>
                     )}
@@ -605,7 +615,7 @@ const Combobox = memo(
               align={align}
               sideOffset={4}
               className={cn(
-                'rounded-[6px] border border-[var(--border-1)] p-0',
+                'rounded-md border border-[var(--border-1)] p-0',
                 dropdownWidth === 'trigger' && 'w-[var(--radix-popover-trigger-width)]'
               )}
               style={
@@ -629,11 +639,11 @@ const Combobox = memo(
               }}
             >
               {searchable && (
-                <div className='flex items-center px-[10px] pt-[8px] pb-[4px]'>
+                <div className='flex items-center px-2.5 pt-2 pb-1'>
                   <Search className='mr-[7px] ml-[1px] h-[13px] w-[13px] shrink-0 text-[var(--text-muted)]' />
                   <input
                     ref={searchInputRef}
-                    className='w-full bg-transparent font-base text-[13px] text-[var(--text-primary)] placeholder:text-[var(--text-muted)] focus:outline-none'
+                    className='w-full bg-transparent font-base text-[var(--text-primary)] text-small placeholder:text-[var(--text-muted)] focus:outline-none'
                     placeholder={searchPlaceholder}
                     value={searchQuery}
                     onChange={(e) => setSearchQuery(e.target.value)}
@@ -660,7 +670,7 @@ const Combobox = memo(
                 </div>
               )}
               <PopoverScrollArea
-                className='!flex-none p-[4px]'
+                className='!flex-none p-1'
                 style={{ maxHeight: `${maxHeight}px` }}
                 onWheelCapture={(e) => {
                   const target = e.currentTarget
@@ -677,18 +687,18 @@ const Combobox = memo(
               >
                 <div ref={dropdownRef} role='listbox' id={listboxId}>
                   {isLoading ? (
-                    <div className='flex items-center justify-center py-[14px]'>
+                    <div className='flex items-center justify-center py-3.5'>
                       <Loader2 className='h-[16px] w-[16px] animate-spin text-[var(--text-muted)]' />
-                      <span className='ml-[8px] font-base text-[12px] text-[var(--text-muted)]'>
+                      <span className='ml-2 font-base text-[var(--text-muted)] text-caption'>
                         Loading options...
                       </span>
                     </div>
                   ) : error ? (
-                    <div className='px-[6px] py-[14px] text-center font-base text-[12px] text-red-500'>
+                    <div className='px-1.5 py-3.5 text-center font-base text-caption text-red-500'>
                       {error}
                     </div>
                   ) : filteredOptions.length === 0 ? (
-                    <div className='py-[14px] text-center font-base text-[12px] text-[var(--text-muted)]'>
+                    <div className='py-3.5 text-center font-base text-[var(--text-muted)] text-caption'>
                       {emptyMessage ||
                         (searchQuery || (editable && value)
                           ? 'No matching options found'
@@ -696,13 +706,13 @@ const Combobox = memo(
                     </div>
                   ) : filteredGroups ? (
                     // Render grouped options with section headers
-                    <div className='space-y-[2px]'>
+                    <div className='space-y-0.5'>
                       {filteredGroups.map((group, groupIndex) => (
                         <div key={group.section || `group-${groupIndex}`}>
                           {group.sectionElement
                             ? group.sectionElement
                             : group.section && (
-                                <div className='px-[6px] py-[4px] font-base text-[11px] text-[var(--text-tertiary)] first:pt-[4px]'>
+                                <div className='px-1.5 py-1 font-base text-[var(--text-tertiary)] text-xs first:pt-1'>
                                   {group.section}
                                 </div>
                               )}
@@ -734,9 +744,9 @@ const Combobox = memo(
                                   !option.disabled && setHighlightedIndex(globalIndex)
                                 }
                                 className={cn(
-                                  'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
-                                  size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                                  'hover:bg-[var(--border-1)]',
+                                  'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-medium font-sans',
+                                  size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                                  'hover-hover:bg-[var(--border-1)]',
                                   (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
                                   option.disabled && 'cursor-not-allowed opacity-50'
                                 )}
@@ -751,7 +761,7 @@ const Combobox = memo(
                                 </span>
                                 {option.suffixElement}
                                 {multiSelect && isSelected && (
-                                  <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                                  <Check className='ml-2 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
                                 )}
                               </div>
                             )
@@ -761,7 +771,7 @@ const Combobox = memo(
                     </div>
                   ) : (
                     // Render flat options (no groups)
-                    <div className='space-y-[2px]'>
+                    <div className='space-y-0.5'>
                       {showAllOption && multiSelect && (
                         <div
                           role='option'
@@ -774,9 +784,9 @@ const Combobox = memo(
                           }}
                           onMouseEnter={() => setHighlightedIndex(-1)}
                           className={cn(
-                            'relative flex cursor-pointer select-none items-center rounded-[4px] px-[6px] font-medium font-sans',
-                            size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                            'hover:bg-[var(--border-1)]',
+                            'relative flex cursor-pointer select-none items-center rounded-sm px-1.5 font-medium font-sans',
+                            size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                            'hover-hover:bg-[var(--border-1)]',
                             !multiSelectValues?.length && 'bg-[var(--border-1)]'
                           )}
                         >
@@ -808,9 +818,9 @@ const Combobox = memo(
                             }}
                             onMouseEnter={() => !option.disabled && setHighlightedIndex(index)}
                             className={cn(
-                              'relative flex cursor-pointer select-none items-center gap-[8px] rounded-[4px] px-[6px] font-medium font-sans',
-                              size === 'sm' ? 'py-[5px] text-[12px]' : 'py-[6px] text-sm',
-                              'hover:bg-[var(--border-1)]',
+                              'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-medium font-sans',
+                              size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm',
+                              'hover-hover:bg-[var(--border-1)]',
                               (isHighlighted || isSelected) && 'bg-[var(--border-1)]',
                               option.disabled && 'cursor-not-allowed opacity-50'
                             )}
@@ -825,7 +835,7 @@ const Combobox = memo(
                             </span>
                             {option.suffixElement}
                             {multiSelect && isSelected && (
-                              <Check className='ml-[8px] h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
+                              <Check className='ml-2 h-[12px] w-[12px] flex-shrink-0 text-[var(--text-primary)]' />
                             )}
                           </div>
                         )
diff --git a/apps/sim/components/emcn/components/date-picker/date-picker.tsx b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
index 0a597dec581..9ccbf7d45aa 100644
--- a/apps/sim/components/emcn/components/date-picker/date-picker.tsx
+++ b/apps/sim/components/emcn/components/date-picker/date-picker.tsx
@@ -40,15 +40,15 @@ import { cn } from '@/lib/core/utils/cn'
  * Matches the combobox and input styling patterns.
  */
 const datePickerVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)]',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)]',
   {
     variants: {
       variant: {
         default: '',
       },
       size: {
-        default: 'py-[6px] text-sm',
-        sm: 'py-[5px] text-[12px]',
+        default: 'py-1.5 text-sm',
+        sm: 'py-[5px] text-caption',
       },
     },
     defaultVariants: {
@@ -381,11 +381,11 @@ function CalendarMonth({
   return (
     <div className='flex flex-col'>
       {/* Calendar Header */}
-      <div className='flex items-center justify-between border-[var(--border-1)] border-b px-[12px] py-[10px]'>
+      <div className='flex items-center justify-between border-[var(--border-1)] border-b px-3 py-2.5'>
         {showNavigation === 'left' || showNavigation === 'both' ? (
           <button
             type='button'
-            className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+            className='flex h-[24px] w-[24px] items-center justify-center rounded-sm text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
             onClick={onPrevMonth}
           >
             <ChevronLeft className='h-4 w-4' />
@@ -393,13 +393,13 @@ function CalendarMonth({
         ) : (
           <div className='h-[24px] w-[24px]' />
         )}
-        <span className='font-medium text-[13px] text-[var(--text-primary)]'>
+        <span className='font-medium text-[var(--text-primary)] text-small'>
           {MONTHS[viewMonth]} {viewYear}
         </span>
         {showNavigation === 'right' || showNavigation === 'both' ? (
           <button
             type='button'
-            className='flex h-[24px] w-[24px] items-center justify-center rounded-[4px] text-[var(--text-muted)] transition-colors hover:bg-[var(--surface-5)] hover:text-[var(--text-primary)]'
+            className='flex h-[24px] w-[24px] items-center justify-center rounded-sm text-[var(--text-muted)] transition-colors hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]'
             onClick={onNextMonth}
           >
             <ChevronRight className='h-4 w-4' />
@@ -410,11 +410,11 @@ function CalendarMonth({
       </div>
 
       {/* Day Headers */}
-      <div className='grid grid-cols-7 px-[8px] pt-[8px]'>
+      <div className='grid grid-cols-7 px-2 pt-2'>
         {DAYS.map((day) => (
           <div
             key={day}
-            className='flex h-[28px] items-center justify-center text-[11px] text-[var(--text-muted)]'
+            className='flex h-[28px] items-center justify-center text-[var(--text-muted)] text-xs'
           >
             {day}
           </div>
@@ -422,7 +422,7 @@ function CalendarMonth({
       </div>
 
       {/* Calendar Grid */}
-      <div className='grid grid-cols-7 px-[8px] pb-[8px]'>
+      <div className='grid grid-cols-7 px-2 pb-2'>
         {calendarDays.map((day, index) => {
           const inRange = day !== null && isInRange(day)
           const isStart = day !== null && isRangeStart(day)
@@ -440,25 +440,25 @@ function CalendarMonth({
                 isRangeMode && isStart && 'before:left-[2px] before:rounded-l-[4px]',
                 isRangeMode && isEnd && 'before:right-[2px] before:rounded-r-[4px]',
                 isRangeMode && isStart && !rangeEnd && 'before:right-[2px] before:rounded-r-[4px]',
-                isRangeMode && isStart && isEnd && 'before:rounded-[4px]'
+                isRangeMode && isStart && isEnd && 'before:rounded-sm'
               )}
             >
               {day !== null && (
                 <button
                   type='button'
                   className={cn(
-                    'relative z-10 flex h-[28px] w-[28px] items-center justify-center rounded-[4px] text-[12px] transition-colors',
+                    'relative z-10 flex h-[28px] w-[28px] items-center justify-center rounded-sm text-caption transition-colors',
                     isRangeMode
                       ? isStart || isEnd
                         ? 'bg-[var(--brand-secondary)] text-[var(--bg)]'
                         : inRange
-                          ? 'text-[var(--text-primary)] hover:bg-[#60a5fa]/40'
-                          : 'text-[var(--text-primary)] hover:bg-[var(--surface-5)]'
+                          ? 'text-[var(--text-primary)] hover-hover:bg-[#60a5fa]/40'
+                          : 'text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)]'
                       : isSelected(day)
                         ? 'bg-[var(--brand-secondary)] text-[var(--bg)]'
                         : isToday(day)
                           ? 'bg-[var(--surface-5)] text-[var(--text-primary)]'
-                          : 'text-[var(--text-primary)] hover:bg-[var(--surface-5)]'
+                          : 'text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)]'
                   )}
                   onClick={() => onSelectDate(day)}
                   onMouseEnter={() => onHoverDate?.(day)}
@@ -755,17 +755,17 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       </div>
 
       {/* Actions */}
-      <div className='flex items-center justify-between border-[var(--border-1)] border-t px-[12px] py-[8px]'>
+      <div className='flex items-center justify-between border-[var(--border-1)] border-t px-3 py-2'>
         <Button
           variant='ghost'
           size='sm'
           onClick={handleClearRange}
           disabled={!rangeStart && !rangeEnd}
-          className='text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
+          className='text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]'
         >
           Clear
         </Button>
-        <div className='flex items-center gap-[8px]'>
+        <div className='flex items-center gap-2'>
           <Button variant='outline' size='sm' onClick={handleCancelRange}>
             Cancel
           </Button>
@@ -787,7 +787,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       />
 
       {/* Today Button */}
-      <div className='border-[var(--border-1)] border-t px-[8px] py-[8px]'>
+      <div className='border-[var(--border-1)] border-t px-2 py-2'>
         <Button variant='active' className='w-full' onClick={handleSelectToday}>
           Today
         </Button>
@@ -802,7 +802,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       sideOffset={4}
       collisionPadding={16}
       className={cn(
-        'rounded-[6px] border border-[var(--border-1)] p-0',
+        'rounded-md border border-[var(--border-1)] p-0',
         isRangeMode ? 'w-auto' : 'w-[280px]'
       )}
     >
@@ -815,7 +815,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
       <div
         ref={ref}
         className={cn(
-          'rounded-[6px] border border-[var(--border-1)] bg-[var(--surface-2)]',
+          'rounded-md border border-[var(--border-1)] bg-[var(--surface-2)]',
           isRangeMode ? 'w-auto' : 'w-[280px]',
           className
         )}
@@ -861,7 +861,7 @@ const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>((props, ref
             </span>
             <ChevronDown
               className={cn(
-                'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
+                'ml-2 h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
                 open && 'rotate-180'
               )}
             />
diff --git a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
index ba3829a5af4..c48675b9002 100644
--- a/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
+++ b/apps/sim/components/emcn/components/dropdown-menu/dropdown-menu.tsx
@@ -26,7 +26,7 @@ import { Check, ChevronRight, Circle, Search } from 'lucide-react'
 import { cn } from '@/lib/core/utils/cn'
 
 const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in'
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
 const DropdownMenu = DropdownMenuPrimitive.Root
 
@@ -38,7 +38,7 @@ const DropdownMenuGroup = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Group
     ref={ref}
-    className={cn('flex flex-col gap-[2px]', className)}
+    className={cn('flex flex-col gap-0.5', className)}
     {...props}
   />
 ))
@@ -59,8 +59,8 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex min-w-0 cursor-default select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)] [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
-      inset && 'pl-[28px]',
+      'flex min-w-0 cursor-default select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[state=open]:bg-[var(--surface-active)] [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
+      inset && 'pl-7',
       className
     )}
     {...props}
@@ -79,7 +79,7 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       ANIMATION_CLASSES,
-      'z-50 max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm',
+      'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[280px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm',
       className
     )}
     {...props}
@@ -97,7 +97,7 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         ANIMATION_CLASSES,
-        'z-50 max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] p-[6px] text-[var(--text-body)] shadow-sm',
+        'z-[var(--z-dropdown)] max-h-[240px] min-w-[8rem] max-w-[220px] origin-[--radix-dropdown-menu-content-transform-origin] overflow-y-auto overflow-x-hidden rounded-lg border border-[var(--border)] bg-[var(--bg)] p-1.5 text-[var(--text-body)] shadow-sm',
         className
       )}
       {...props}
@@ -115,8 +115,8 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex min-w-0 cursor-pointer select-none items-center gap-[8px] rounded-[5px] px-[8px] py-[5px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
-      inset && 'pl-[28px]',
+      'relative flex min-w-0 cursor-pointer select-none items-center gap-2 rounded-[5px] px-2 py-[5px] font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>span]:min-w-0 [&>span]:truncate [&_svg]:pointer-events-none [&_svg]:size-[14px] [&_svg]:shrink-0 [&_svg]:text-[var(--text-icon)]',
+      inset && 'pl-7',
       className
     )}
     {...props}
@@ -131,7 +131,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-[8px] pl-[28px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-2 pl-7 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     checked={checked}
@@ -154,7 +154,7 @@ const DropdownMenuRadioItem = React.forwardRef<
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-[8px] pl-[28px] font-medium text-[12px] text-[var(--text-body)] outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      'relative flex cursor-default select-none items-center rounded-[5px] py-[5px] pr-2 pl-7 font-medium text-[var(--text-body)] text-caption outline-none transition-colors focus:bg-[var(--surface-active)] data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
       className
     )}
     {...props}
@@ -178,8 +178,8 @@ const DropdownMenuLabel = React.forwardRef<
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn(
-      'px-[8px] py-[5px] font-medium text-[11px] text-[var(--text-tertiary)]',
-      inset && 'pl-[28px]',
+      'px-2 py-[5px] font-medium text-[var(--text-tertiary)] text-xs',
+      inset && 'pl-7',
       className
     )}
     {...props}
@@ -193,7 +193,7 @@ const DropdownMenuSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
-    className={cn('-mx-[6px] my-[6px] h-px bg-[var(--border-1)]', className)}
+    className={cn('-mx-1.5 my-1.5 h-px bg-[var(--border-1)]', className)}
     {...props}
   />
 ))
@@ -221,7 +221,7 @@ const DropdownMenuSearchInput = React.forwardRef<
   )
 
   return (
-    <div className='mx-[2px] mt-[2px] mb-[2px] flex shrink-0 items-center gap-[8px] rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] dark:bg-[var(--surface-4)]'>
+    <div className='mx-0.5 mt-0.5 mb-0.5 flex shrink-0 items-center gap-2 rounded-[5px] border border-[var(--border-1)] bg-[var(--surface-5)] px-2 dark:bg-[var(--surface-4)]'>
       <Search className='h-[14px] w-[14px] shrink-0 text-[var(--text-muted)]' />
       <input
         ref={setRefs}
@@ -230,7 +230,7 @@ const DropdownMenuSearchInput = React.forwardRef<
           onKeyDown?.(e)
         }}
         className={cn(
-          'w-full bg-transparent py-[4px] font-medium text-[12px] text-[var(--text-primary)] outline-none placeholder:text-[var(--text-muted)] focus:outline-none',
+          'w-full bg-transparent py-1 font-medium text-[var(--text-primary)] text-caption outline-none placeholder:text-[var(--text-muted)] focus:outline-none',
           className
         )}
         {...props}
@@ -243,7 +243,7 @@ DropdownMenuSearchInput.displayName = 'DropdownMenuSearchInput'
 const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      className={cn('ml-auto text-[11px] text-[var(--text-muted)] tracking-widest', className)}
+      className={cn('ml-auto text-[var(--text-muted)] text-xs tracking-widest', className)}
       {...props}
     />
   )
diff --git a/apps/sim/components/emcn/components/expandable/expandable.tsx b/apps/sim/components/emcn/components/expandable/expandable.tsx
new file mode 100644
index 00000000000..7e07dcfe82d
--- /dev/null
+++ b/apps/sim/components/emcn/components/expandable/expandable.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import * as React from 'react'
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'
+import { cn } from '@/lib/core/utils/cn'
+
+/**
+ * Expandable root that controls the open/closed state.
+ * Wraps Radix Collapsible.Root with the `open` prop mapped from `expanded`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * <button onClick={() => setOpen(!open)}>Toggle</button>
+ * <Expandable expanded={open}>
+ *   <ExpandableContent>
+ *     <p>This content animates in/out smoothly.</p>
+ *   </ExpandableContent>
+ * </Expandable>
+ * ```
+ */
+interface ExpandableProps
+  extends Omit<React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>, 'open'> {
+  /** Whether the content is expanded */
+  expanded: boolean
+}
+
+const Expandable = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Root>,
+  ExpandableProps
+>(({ expanded, className, ...props }, ref) => (
+  <CollapsiblePrimitive.Root
+    ref={ref}
+    open={expanded}
+    className={cn('w-full', className)}
+    {...props}
+  />
+))
+Expandable.displayName = 'Expandable'
+
+/**
+ * Animated content container for the Expandable.
+ * Uses Radix Collapsible.Content with CSS height animation via
+ * `--radix-collapsible-content-height` custom property.
+ */
+const ExpandableContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <CollapsiblePrimitive.Content
+    ref={ref}
+    className={cn(
+      'overflow-hidden transition-[height] duration-300 ease-[cubic-bezier(0.4,0,0.2,1)] data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </CollapsiblePrimitive.Content>
+))
+ExpandableContent.displayName = 'ExpandableContent'
+
+export { Expandable, ExpandableContent }
diff --git a/apps/sim/components/emcn/components/index.ts b/apps/sim/components/emcn/components/index.ts
index d60092e49f4..7f3792599f6 100644
--- a/apps/sim/components/emcn/components/index.ts
+++ b/apps/sim/components/emcn/components/index.ts
@@ -55,6 +55,7 @@ export {
   DropdownMenuSubTrigger,
   DropdownMenuTrigger,
 } from './dropdown-menu/dropdown-menu'
+export { Expandable, ExpandableContent } from './expandable/expandable'
 export { Input, type InputProps, inputVariants } from './input/input'
 export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from './input-otp/input-otp'
 export { Label } from './label/label'
diff --git a/apps/sim/components/emcn/components/input-otp/input-otp.tsx b/apps/sim/components/emcn/components/input-otp/input-otp.tsx
index 12edabec592..8951c415895 100644
--- a/apps/sim/components/emcn/components/input-otp/input-otp.tsx
+++ b/apps/sim/components/emcn/components/input-otp/input-otp.tsx
@@ -77,7 +77,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        'relative flex h-12 w-12 items-center justify-center rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] font-medium text-[var(--text-primary)] text-lg transition-colors',
+        'relative flex h-12 w-12 items-center justify-center rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] font-medium text-[var(--text-primary)] text-lg transition-colors',
         isActive && 'z-10 border-[var(--text-muted)] ring-1 ring-[var(--text-muted)]',
         className
       )}
@@ -86,7 +86,7 @@ const InputOTPSlot = React.forwardRef<
       {char}
       {hasFakeCaret && (
         <div className='pointer-events-none absolute inset-0 flex items-center justify-center'>
-          <div className='h-6 w-px animate-caret-blink bg-[var(--text-primary)] duration-1000' />
+          <div className='h-6 w-px animate-caret-blink bg-[var(--text-primary)] duration-1000 motion-reduce:animate-none' />
         </div>
       )}
     </div>
diff --git a/apps/sim/components/emcn/components/input/input.tsx b/apps/sim/components/emcn/components/input/input.tsx
index 516e929315a..b3649a34e86 100644
--- a/apps/sim/components/emcn/components/input/input.tsx
+++ b/apps/sim/components/emcn/components/input/input.tsx
@@ -26,7 +26,7 @@ import { cn } from '@/lib/core/utils/cn'
  * Currently supports a 'default' variant.
  */
 const inputVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/sim/components/emcn/components/label/label.tsx b/apps/sim/components/emcn/components/label/label.tsx
index a1e05d5c4ad..aad8b54b381 100644
--- a/apps/sim/components/emcn/components/label/label.tsx
+++ b/apps/sim/components/emcn/components/label/label.tsx
@@ -25,7 +25,7 @@ function Label({ className, ...props }: LabelProps) {
   return (
     <LabelPrimitive.Root
       className={cn(
-        'inline-flex items-center font-medium text-[13px] text-[var(--text-primary)] leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        'inline-flex items-center font-medium text-[var(--text-primary)] text-small leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/modal/modal.tsx b/apps/sim/components/emcn/components/modal/modal.tsx
index d4f92699640..e0140d19e56 100644
--- a/apps/sim/components/emcn/components/modal/modal.tsx
+++ b/apps/sim/components/emcn/components/modal/modal.tsx
@@ -48,14 +48,14 @@ import { Button } from '../button/button'
  * Mirrors the legacy `Modal` component to ensure consistent behavior.
  */
 const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
 /**
  * Modal content animation classes.
  * We keep only the slide animations (no zoom) to stabilize positioning while avoiding scale effects.
  */
 const CONTENT_ANIMATION_CLASSES =
-  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
+  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none'
 
 /**
  * Root modal component. Manages open state.
@@ -90,7 +90,7 @@ const ModalOverlay = React.forwardRef<
       <DialogPrimitive.Overlay
         ref={ref}
         className={cn(
-          'fixed inset-0 z-[500] bg-black/10 backdrop-blur-[2px]',
+          'fixed inset-0 z-[var(--z-modal)] bg-black/10 backdrop-blur-[2px]',
           ANIMATION_CLASSES,
           className
         )}
@@ -159,7 +159,7 @@ const ModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] z-[500] flex max-h-[84vh] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-[13px] ring-1 ring-foreground/10 duration-200',
+          'fixed top-[50%] z-[var(--z-modal)] flex max-h-[84vh] translate-x-[-50%] translate-y-[-50%] flex-col overflow-hidden rounded-xl bg-[var(--bg)] text-small ring-1 ring-foreground/10 duration-200',
           MODAL_SIZES[size],
           className
         )}
@@ -204,7 +204,10 @@ const ModalHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
         {children}
       </DialogPrimitive.Title>
       <DialogPrimitive.Close asChild>
-        <Button variant='ghost' className='h-[16px] w-[16px] flex-shrink-0 p-0'>
+        <Button
+          variant='ghost'
+          className='relative h-[16px] w-[16px] flex-shrink-0 p-0 before:absolute before:inset-[-14px] before:content-[""]'
+        >
           <X className='h-[16px] w-[16px]' />
           <span className='sr-only'>Close</span>
         </Button>
@@ -296,19 +299,19 @@ const ModalTabsList = React.forwardRef<
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        'relative flex gap-[16px] px-4 pt-1',
+        'relative flex gap-4 px-4 pt-1',
         disabled && 'pointer-events-none opacity-50',
         className
       )}
       {...props}
     >
-      <div ref={listRef} className='flex gap-[16px]'>
+      <div ref={listRef} className='flex gap-4'>
         {children}
       </div>
       <span
         className={cn(
           'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
-          ready && 'transition-all duration-200 ease-out'
+          ready ? 'opacity-100 transition-[left,width,opacity] duration-200 ease-out' : 'opacity-0'
         )}
         style={{ left: indicator.left, width: indicator.width }}
       />
@@ -328,8 +331,8 @@ const ModalTabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
-      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
+      'px-1 pb-2 font-medium text-[var(--text-secondary)] text-small transition-colors',
+      'hover-hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
       className
     )}
     {...props}
@@ -346,7 +349,7 @@ const ModalTabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn('pb-[10px]', className)} {...props} />
+  <TabsPrimitive.Content ref={ref} className={cn('pb-2.5', className)} {...props} />
 ))
 
 ModalTabsContent.displayName = 'ModalTabsContent'
@@ -370,7 +373,7 @@ const ModalFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDi
     <div
       ref={ref}
       className={cn(
-        'flex justify-end gap-2 rounded-b-xl border-t bg-muted/50 px-4 py-3',
+        'flex justify-end gap-2 rounded-b-xl border-[var(--border)] border-t bg-[var(--surface-3)]/50 px-4 py-3',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/popover/popover.tsx b/apps/sim/components/emcn/components/popover/popover.tsx
index 8702c41a5ac..f300444f2a9 100644
--- a/apps/sim/components/emcn/components/popover/popover.tsx
+++ b/apps/sim/components/emcn/components/popover/popover.tsx
@@ -67,18 +67,18 @@ type PopoverVariant = 'default' | 'secondary'
 const STYLES = {
   /** Base classes shared by all interactive items */
   itemBase:
-    'flex min-w-0 cursor-pointer items-center gap-[8px] rounded-[6px] px-[6px] font-medium disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed',
+    'flex min-w-0 cursor-pointer items-center gap-2 rounded-md px-1.5 font-medium disabled:pointer-events-none disabled:opacity-50 disabled:cursor-not-allowed',
 
   /** Content container */
-  content: 'px-[6px] py-[6px] rounded-[6px]',
+  content: 'px-1.5 py-1.5 rounded-md',
 
   /** Size variants */
   size: {
-    sm: { item: 'h-[22px] text-[11px]', icon: 'h-3 w-3', section: 'px-[6px] py-[4px] text-[11px]' },
+    sm: { item: 'h-[22px] text-xs', icon: 'h-3 w-3', section: 'px-1.5 py-1 text-xs' },
     md: {
-      item: 'h-[26px] text-[12px]',
+      item: 'h-[26px] text-caption',
       icon: 'h-3.5 w-3.5',
-      section: 'px-[6px] py-[4px] text-[11px]',
+      section: 'px-1.5 py-1 text-xs',
     },
   } satisfies Record<PopoverSize, { item: string; icon: string; section: string }>,
 
@@ -98,8 +98,8 @@ const STYLES = {
       search: 'text-[var(--text-muted-inverse)] dark:text-[var(--text-muted)]',
       searchInput:
         'text-white placeholder:text-[var(--text-muted-inverse)] dark:text-[var(--text-primary)] dark:placeholder:text-[var(--text-muted)]',
-      content: 'bg-[#1b1b1b] text-white dark:bg-[var(--surface-3)] dark:text-foreground',
-      divider: 'border-[#363636] dark:border-[var(--border-1)]',
+      content: 'bg-[var(--bg)] text-white dark:bg-[var(--surface-3)] dark:text-foreground',
+      divider: 'border-[var(--surface-5)] dark:border-[var(--border-1)]',
     },
   } satisfies Record<
     PopoverColorScheme,
@@ -118,17 +118,18 @@ const STYLES = {
     default: {
       active: 'bg-[var(--border-1)] text-[var(--text-primary)] [&_svg]:text-[var(--text-primary)]',
       hover:
-        'hover:bg-[var(--border-1)] hover:text-[var(--text-primary)] hover:[&_svg]:text-[var(--text-primary)]',
+        'hover-hover:bg-[var(--border-1)] hover-hover:text-[var(--text-primary)] hover-hover:[&_svg]:text-[var(--text-primary)]',
     },
     secondary: {
       active: 'bg-[var(--brand-secondary)] text-white [&_svg]:text-white',
-      hover: 'hover:bg-[var(--brand-secondary)] hover:text-white hover:[&_svg]:text-white',
+      hover:
+        'hover-hover:bg-[var(--brand-secondary)] hover-hover:text-white hover-hover:[&_svg]:text-white',
     },
     inverted: {
       active:
-        'bg-[#363636] text-white [&_svg]:text-white dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]',
+        'bg-[var(--surface-5)] text-white [&_svg]:text-white dark:bg-[var(--surface-5)] dark:text-[var(--text-primary)] dark:[&_svg]:text-[var(--text-primary)]',
       hover:
-        'hover:bg-[#363636] hover:text-white hover:[&_svg]:text-white dark:hover:bg-[var(--surface-5)] dark:hover:text-[var(--text-primary)] dark:hover:[&_svg]:text-[var(--text-primary)]',
+        'hover-hover:bg-[var(--surface-5)] hover-hover:text-white hover-hover:[&_svg]:text-white dark:hover-hover:bg-[var(--surface-5)] dark:hover-hover:text-[var(--text-primary)] dark:hover-hover:[&_svg]:text-[var(--text-primary)]',
     },
   },
 } as const
@@ -414,6 +415,18 @@ export interface PopoverContentProps
    * @default true
    */
   avoidCollisions?: boolean
+  /**
+   * Show an arrow pointing toward the anchor element.
+   * The arrow color matches the popover background based on the current color scheme.
+   * @default false
+   */
+  showArrow?: boolean
+  /**
+   * Custom className for the arrow element.
+   * Overrides the default color-scheme-based fill when provided.
+   * Useful when the popover background is overridden via className.
+   */
+  arrowClassName?: string
 }
 
 /**
@@ -438,6 +451,8 @@ const PopoverContent = React.forwardRef<
       collisionPadding = 8,
       border = false,
       avoidCollisions = true,
+      showArrow = false,
+      arrowClassName,
       onOpenAutoFocus,
       onCloseAutoFocus,
       ...restProps
@@ -592,7 +607,8 @@ const PopoverContent = React.forwardRef<
         onCloseAutoFocus={handleCloseAutoFocus}
         {...restProps}
         className={cn(
-          'z-[10000200] flex flex-col overflow-auto outline-none will-change-transform',
+          'z-[var(--z-popover)] flex flex-col outline-none will-change-transform',
+          showArrow ? 'overflow-visible' : 'overflow-auto',
           STYLES.colorScheme[colorScheme].content,
           STYLES.content,
           hasUserWidthConstraint && '[&_.flex-1]:truncate [&_[data-popover-section]]:truncate',
@@ -613,7 +629,37 @@ const PopoverContent = React.forwardRef<
           ...style,
         }}
       >
-        {children}
+        {showArrow ? (
+          <div
+            className='flex flex-1 flex-col overflow-auto'
+            style={{ maxHeight: `${maxHeight || 400}px` }}
+          >
+            {children}
+          </div>
+        ) : (
+          children
+        )}
+        {showArrow && (
+          <PopoverPrimitive.Arrow width={14} height={7} asChild>
+            <svg
+              width={14}
+              height={7}
+              viewBox='0 0 14 7'
+              preserveAspectRatio='none'
+              className={
+                arrowClassName ??
+                cn(
+                  colorScheme === 'inverted'
+                    ? 'fill-[#242424] stroke-[var(--surface-5)] dark:fill-[var(--surface-3)] dark:stroke-[var(--border-1)]'
+                    : 'fill-[var(--surface-3)] stroke-[var(--border-1)] dark:fill-[var(--surface-3)]'
+                )
+              }
+            >
+              <polygon points='0,0 14,0 7,7' className='stroke-none' />
+              <polyline points='0,0 7,7 14,0' fill='none' strokeWidth={1} />
+            </svg>
+          </PopoverPrimitive.Arrow>
+        )}
       </PopoverPrimitive.Content>
     )
 
@@ -635,7 +681,7 @@ const PopoverScrollArea = React.forwardRef<HTMLDivElement, PopoverScrollAreaProp
     <div
       className={cn(
         'min-h-0 overflow-auto overscroll-contain',
-        '[&>div:has([data-popover-section]):not(:first-child)]:mt-[6px]',
+        '[&>div:has([data-popover-section]):not(:first-child)]:mt-1.5',
         className
       )}
       ref={ref}
@@ -748,7 +794,7 @@ const PopoverItem = React.forwardRef<HTMLDivElement, PopoverItemProps>(
           STYLES.colorScheme[colorScheme].text,
           STYLES.size[size].item,
           getItemStateClasses(variant, colorScheme, !!isActive),
-          suppressHover && 'hover:!bg-transparent',
+          suppressHover && 'hover-hover:!bg-transparent',
           disabled && 'pointer-events-none cursor-not-allowed opacity-50',
           className
         )}
@@ -787,7 +833,7 @@ const PopoverSection = React.forwardRef<HTMLDivElement, PopoverSectionProps>(
     return (
       <div
         className={cn(
-          'mt-[6px] min-w-0 font-medium first:mt-0 first:pt-0',
+          'mt-1.5 min-w-0 font-medium first:mt-0 first:pt-0',
           STYLES.colorScheme[colorScheme].section,
           STYLES.size[size].section,
           className
@@ -942,7 +988,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
             STYLES.colorScheme[colorScheme].text,
             STYLES.size[size].item,
             getItemStateClasses(variant, colorScheme, isActive || isHoverOpen),
-            suppressHover && 'hover:!bg-transparent',
+            suppressHover && 'hover-hover:!bg-transparent',
             className
           )}
           role='menuitem'
@@ -964,7 +1010,7 @@ const PopoverFolder = React.forwardRef<HTMLDivElement, PopoverFolderProps>(
           createPortal(
             <DismissableLayerBranch
               className={cn(
-                'fixed z-[10000201] min-w-[120px]',
+                'fixed z-[calc(var(--z-popover)+1)] min-w-[120px]',
                 STYLES.content,
                 STYLES.colorScheme[colorScheme].content,
                 'shadow-lg'
@@ -1096,7 +1142,7 @@ const PopoverSearch = React.forwardRef<HTMLDivElement, PopoverSearchProps>(
     }, [setSearchQuery, onValueChange])
 
     return (
-      <div ref={ref} className={cn('flex items-center px-[8px] py-[6px]', className)} {...props}>
+      <div ref={ref} className={cn('flex items-center px-2 py-1.5', className)} {...props}>
         <Search
           className={cn(
             'mr-2 shrink-0',
@@ -1109,7 +1155,7 @@ const PopoverSearch = React.forwardRef<HTMLDivElement, PopoverSearchProps>(
           className={cn(
             'w-full bg-transparent font-medium focus:outline-none',
             STYLES.colorScheme[colorScheme].searchInput,
-            size === 'sm' ? 'text-[11px]' : 'text-[12px]'
+            size === 'sm' ? 'text-xs' : 'text-caption'
           )}
           placeholder={placeholder}
           value={searchQuery}
@@ -1140,7 +1186,7 @@ const PopoverDivider = React.forwardRef<HTMLDivElement, PopoverDividerProps>(
     return (
       <div
         ref={ref}
-        className={cn('my-[6px] border-t', STYLES.colorScheme[colorScheme].divider, className)}
+        className={cn('my-1.5 border-t', STYLES.colorScheme[colorScheme].divider, className)}
         role='separator'
         {...props}
       />
diff --git a/apps/sim/components/emcn/components/s-modal/s-modal.tsx b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
index 0eada188ff1..9ed6172c27d 100644
--- a/apps/sim/components/emcn/components/s-modal/s-modal.tsx
+++ b/apps/sim/components/emcn/components/s-modal/s-modal.tsx
@@ -33,10 +33,10 @@ import { Button } from '../button/button'
 import { Modal, type ModalContentProps, ModalOverlay, ModalPortal } from '../modal/modal'
 
 const ANIMATION_CLASSES =
-  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in'
+  'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:animate-out data-[state=open]:animate-in motion-reduce:animate-none'
 
 const CONTENT_ANIMATION_CLASSES =
-  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%]'
+  'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[50%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[50%] motion-reduce:animate-none'
 
 /**
  * Root sidebar modal component.
@@ -75,7 +75,7 @@ const SModalContent = React.forwardRef<
         className={cn(
           ANIMATION_CLASSES,
           CONTENT_ANIMATION_CLASSES,
-          'fixed top-[50%] z-[500] flex h-[min(calc(100vh-8rem),900px)] min-h-[400px] w-[min(calc(100vw-8rem),1080px)] min-w-[520px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-[8px] border bg-[var(--bg)] shadow-sm duration-200',
+          'fixed top-[50%] z-[var(--z-modal)] flex h-[min(calc(100vh-8rem),900px)] min-h-[400px] w-[min(calc(100vw-8rem),1080px)] min-w-[520px] translate-x-[-50%] translate-y-[-50%] flex-row rounded-lg border bg-[var(--bg)] shadow-sm duration-200',
           className
         )}
         style={{
@@ -112,7 +112,7 @@ const SModalSidebar = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTML
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn('flex min-h-0 w-[166px] flex-col overflow-y-auto py-[12px]', className)}
+      className={cn('flex min-h-0 w-[166px] flex-col overflow-y-auto py-3', className)}
       {...props}
     />
   )
@@ -127,10 +127,7 @@ const SModalSidebarHeader = React.forwardRef<HTMLDivElement, React.HTMLAttribute
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn(
-        'mb-[16px] px-[12px] font-medium text-[16px] text-[var(--text-primary)]',
-        className
-      )}
+      className={cn('mb-4 px-3 font-medium text-[var(--text-primary)] text-md', className)}
       {...props}
     />
   )
@@ -143,11 +140,7 @@ SModalSidebarHeader.displayName = 'SModalSidebarHeader'
  */
 const SModalSidebarSection = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn('flex flex-col gap-[4px] px-[12px] [&+&]:mt-[12px]', className)}
-      {...props}
-    />
+    <div ref={ref} className={cn('flex flex-col gap-1 px-3 [&+&]:mt-3', className)} {...props} />
   )
 )
 
@@ -162,7 +155,7 @@ const SModalSidebarSectionTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <div
     ref={ref}
-    className={cn('mb-[2px] font-medium text-[12px] text-[var(--text-muted)]', className)}
+    className={cn('mb-0.5 font-medium text-[var(--text-muted)] text-caption', className)}
     {...props}
   />
 ))
@@ -190,9 +183,9 @@ function SModalSidebarItem({
     <Button
       variant={active ? 'active' : 'ghost'}
       className={cn(
-        'w-full justify-start gap-[8px] rounded-[6px] border-0 text-[13px]',
+        'w-full justify-start gap-2 rounded-md border-0 text-small',
         !active &&
-          'text-[var(--text-tertiary)] hover:bg-[var(--surface-6)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--border)]',
+          'text-[var(--text-tertiary)] hover-hover:bg-[var(--surface-6)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--border)]',
         className
       )}
       {...props}
@@ -215,7 +208,7 @@ const SModalMain = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDiv
     <div
       ref={ref}
       className={cn(
-        'flex min-w-0 flex-1 flex-col gap-[16px] overflow-hidden rounded-[8px] border-l bg-[var(--surface-2)] p-[14px]',
+        'flex min-w-0 flex-1 flex-col gap-4 overflow-hidden rounded-lg border-l bg-[var(--surface-2)] p-3.5',
         className
       )}
       {...props}
@@ -231,9 +224,12 @@ SModalMain.displayName = 'SModalMain'
 const SModalMainHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, children, ...props }, ref) => (
     <div ref={ref} className={cn('flex items-center justify-between', className)} {...props}>
-      <span className='font-base text-[14px] text-[var(--text-muted)]'>{children}</span>
+      <span className='font-base text-[var(--text-muted)] text-sm'>{children}</span>
       <DialogPrimitive.Close asChild>
-        <Button variant='ghost' className='h-[16px] w-[16px] p-0'>
+        <Button
+          variant='ghost'
+          className='relative h-[16px] w-[16px] p-0 before:absolute before:inset-[-14px] before:content-[""]'
+        >
           <X className='h-[16px] w-[16px]' />
           <span className='sr-only'>Close</span>
         </Button>
@@ -316,19 +312,19 @@ const SModalTabsList = React.forwardRef<
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        'relative flex gap-[16px] px-4',
+        'relative flex gap-4 px-4',
         disabled && 'pointer-events-none opacity-50',
         className
       )}
       {...props}
     >
-      <div ref={listRef} className='flex gap-[16px]'>
+      <div ref={listRef} className='flex gap-4'>
         {children}
       </div>
       <span
         className={cn(
           'pointer-events-none absolute bottom-0 h-[1px] rounded-full bg-[var(--text-primary)]',
-          ready && 'transition-all duration-200 ease-out'
+          ready ? 'opacity-100 transition-[left,width,opacity] duration-200 ease-out' : 'opacity-0'
         )}
         style={{ left: indicator.left, width: indicator.width }}
       />
@@ -348,8 +344,8 @@ const SModalTabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'px-1 pb-[8px] font-medium text-[13px] text-[var(--text-secondary)] transition-colors',
-      'hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
+      'px-1 pb-2 font-medium text-[var(--text-secondary)] text-small transition-colors',
+      'hover-hover:text-[var(--text-primary)] data-[state=active]:text-[var(--text-primary)]',
       className
     )}
     {...props}
@@ -365,7 +361,7 @@ const SModalTabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
 >(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content ref={ref} className={cn('pb-[10px]', className)} {...props} />
+  <TabsPrimitive.Content ref={ref} className={cn('pb-2.5', className)} {...props} />
 ))
 
 SModalTabsContent.displayName = 'SModalTabsContent'
@@ -379,7 +375,7 @@ const SModalTabsBody = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTM
     <div
       ref={ref}
       className={cn(
-        'min-h-0 flex-1 overflow-y-auto border-[var(--border)] border-t pt-[10px]',
+        'min-h-0 flex-1 overflow-y-auto border-[var(--border)] border-t pt-2.5',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/skeleton/skeleton.tsx b/apps/sim/components/emcn/components/skeleton/skeleton.tsx
index 59a4393d208..7dbee5edc01 100644
--- a/apps/sim/components/emcn/components/skeleton/skeleton.tsx
+++ b/apps/sim/components/emcn/components/skeleton/skeleton.tsx
@@ -7,7 +7,10 @@ import { cn } from '@/lib/core/utils/cn'
 function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn('animate-pulse rounded-md bg-[var(--surface-active)]', className)}
+      className={cn(
+        'animate-pulse rounded-md bg-[var(--surface-active)] motion-reduce:animate-none',
+        className
+      )}
       {...props}
     />
   )
diff --git a/apps/sim/components/emcn/components/slider/slider.tsx b/apps/sim/components/emcn/components/slider/slider.tsx
index 71a84a9120d..bf85ab21567 100644
--- a/apps/sim/components/emcn/components/slider/slider.tsx
+++ b/apps/sim/components/emcn/components/slider/slider.tsx
@@ -30,7 +30,7 @@ const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, S
       <SliderPrimitive.Track className='relative h-[6px] w-full grow overflow-hidden rounded-[20px] bg-[var(--border-1)] transition-colors'>
         <SliderPrimitive.Range className='absolute h-full bg-[var(--text-primary)]' />
       </SliderPrimitive.Track>
-      <SliderPrimitive.Thumb className='block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors focus-visible:outline-none' />
+      <SliderPrimitive.Thumb className='relative block h-[14px] w-[14px] cursor-pointer rounded-full bg-[var(--text-primary)] shadow-sm transition-colors before:absolute before:inset-[-15px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--text-muted)]/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]' />
     </SliderPrimitive.Root>
   )
 )
diff --git a/apps/sim/components/emcn/components/switch/switch.tsx b/apps/sim/components/emcn/components/switch/switch.tsx
index c61ae0e69a4..9fe7023e678 100644
--- a/apps/sim/components/emcn/components/switch/switch.tsx
+++ b/apps/sim/components/emcn/components/switch/switch.tsx
@@ -16,7 +16,7 @@ const Switch = React.memo(
     <SwitchPrimitives.Root
       disabled={disabled}
       className={cn(
-        'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors focus-visible:outline-none data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
+        'peer relative inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full bg-[var(--border-1)] transition-colors before:absolute before:inset-[-12px] before:content-[""] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--text-muted)]/30 focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)] data-[disabled]:cursor-not-allowed data-[state=checked]:bg-[var(--text-primary)] data-[disabled]:opacity-50',
         className
       )}
       {...props}
diff --git a/apps/sim/components/emcn/components/table/table.tsx b/apps/sim/components/emcn/components/table/table.tsx
index 11012778f8b..34c32f3d73f 100644
--- a/apps/sim/components/emcn/components/table/table.tsx
+++ b/apps/sim/components/emcn/components/table/table.tsx
@@ -27,7 +27,7 @@ import { cn } from '@/lib/core/utils/cn'
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
     <div className='relative w-full overflow-auto'>
-      <table ref={ref} className={cn('w-full caption-bottom text-[13px]', className)} {...props} />
+      <table ref={ref} className={cn('w-full caption-bottom text-small', className)} {...props} />
     </div>
   )
 )
@@ -82,7 +82,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      'h-10 px-[12px] py-[8px] text-left align-middle font-medium text-[var(--text-secondary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'h-10 px-3 py-2 text-left align-middle font-medium text-[var(--text-secondary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
@@ -97,7 +97,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      'px-[12px] py-[8px] align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
+      'px-3 py-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]',
       className
     )}
     {...props}
diff --git a/apps/sim/components/emcn/components/tag-input/tag-input.tsx b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
index 461f5e10131..53799d7b5d1 100644
--- a/apps/sim/components/emcn/components/tag-input/tag-input.tsx
+++ b/apps/sim/components/emcn/components/tag-input/tag-input.tsx
@@ -49,13 +49,13 @@ import { cn } from '@/lib/core/utils/cn'
  * Uses colored badge-style variants (blue for valid, red for invalid).
  */
 const tagVariants = cva(
-  'flex w-auto cursor-default items-center gap-[3px] rounded-[4px] px-[4px] font-medium font-sans text-[13px] leading-[20px] transition-colors',
+  'flex w-auto cursor-default items-center gap-[3px] rounded-sm px-1 font-medium font-sans text-small leading-[20px] transition-colors',
   {
     variants: {
       variant: {
         default: 'bg-[#bfdbfe] text-[#1d4ed8] dark:bg-[rgba(59,130,246,0.2)] dark:text-[#93c5fd]',
         secondary:
-          'border border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover:text-[var(--text-primary)]',
+          'border border-[var(--border-1)] bg-[var(--surface-4)] text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)]',
         invalid:
           'bg-[#fecaca] text-[var(--text-error)] dark:bg-[#551a1a] dark:text-[var(--text-error)]',
       },
@@ -102,7 +102,7 @@ const Tag = React.memo(function Tag({
           type='button'
           onClick={onRemove}
           className={cn(
-            'flex-shrink-0 opacity-80 transition-opacity hover:opacity-100 focus:outline-none',
+            'relative flex-shrink-0 opacity-80 transition-opacity before:absolute before:inset-[-8px] before:content-[""] hover-hover:opacity-100 focus:outline-none',
             variant === 'invalid'
               ? 'text-[var(--text-error)]'
               : variant === 'secondary'
@@ -123,7 +123,7 @@ const Tag = React.memo(function Tag({
  * Matches the Input component styling exactly for consistent height.
  */
 const tagInputVariants = cva(
-  'scrollbar-hide flex w-full cursor-text flex-wrap items-center gap-x-[8px] gap-y-[4px] overflow-y-auto rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[6px] transition-colors focus-within:outline-none dark:bg-[var(--surface-5)]',
+  'scrollbar-hide flex w-full cursor-text flex-wrap items-center gap-x-2 gap-y-1 overflow-y-auto rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-1.5 transition-colors focus-within:outline-none dark:bg-[var(--surface-5)]',
   {
     variants: {
       variant: {
@@ -382,7 +382,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           tagInputVariants({ variant }),
           maxHeight,
           'relative',
-          fileInputEnabled && 'pr-[28px]',
+          fileInputEnabled && 'pr-7',
           isDragging && 'border-[var(--border)] border-dashed bg-[var(--surface-5)]',
           className
         )}
@@ -401,8 +401,8 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           />
         )}
         {isDragging && (
-          <div className='absolute inset-0 flex items-center justify-center rounded-[4px] bg-[var(--surface-5)]/90'>
-            <span className='text-[13px] text-[var(--text-tertiary)]'>Drop file here</span>
+          <div className='absolute inset-0 flex items-center justify-center rounded-sm bg-[var(--surface-5)]/90'>
+            <span className='text-[var(--text-tertiary)] text-small'>Drop file here</span>
           </div>
         )}
         {items.map((item, index) => (
@@ -419,13 +419,13 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
           className={cn(
             'flex items-center',
             inputValue.trim() &&
-              cn(tagVariants({ variant: tagVariant }), 'gap-0 py-0 pr-0 pl-[4px] opacity-80')
+              cn(tagVariants({ variant: tagVariant }), 'gap-0 py-0 pr-0 pl-1 opacity-80')
           )}
         >
           <div className='relative inline-flex'>
             {inputValue.trim() && (
               <span
-                className='invisible whitespace-pre font-medium font-sans text-[13px] leading-[20px]'
+                className='invisible whitespace-pre font-medium font-sans text-small leading-[20px]'
                 aria-hidden='true'
               >
                 {inputValue}
@@ -449,7 +449,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
               className={cn(
                 'border-none bg-transparent font-medium font-sans outline-none placeholder:text-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50',
                 inputValue.trim()
-                  ? 'absolute top-0 left-0 h-full w-full p-0 text-[13px] text-inherit leading-[20px]'
+                  ? 'absolute top-0 left-0 h-full w-full p-0 text-inherit text-small leading-[20px]'
                   : 'w-auto min-w-0 p-0 text-foreground text-sm',
                 inputClassName
               )}
@@ -474,7 +474,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                   inputRef.current?.focus()
                 }
               }}
-              className='flex items-center px-[3px] opacity-80 transition-opacity hover:opacity-100 focus:outline-none'
+              className='relative flex items-center px-[3px] opacity-80 transition-opacity before:absolute before:inset-[-10px] before:content-[""] hover-hover:opacity-100 focus:outline-none'
               disabled={disabled}
               aria-label='Add tag'
             >
@@ -491,7 +491,7 @@ const TagInput = React.forwardRef<HTMLInputElement, TagInputProps>(
                   e.stopPropagation()
                   fileInputRef.current?.click()
                 }}
-                className='absolute right-[8px] bottom-[9px] text-[var(--text-tertiary)] transition-colors hover:text-[var(--text-secondary)]'
+                className='-m-1.5 absolute right-[8px] bottom-[9px] p-1.5 text-[var(--text-tertiary)] transition-colors hover-hover:text-[var(--text-secondary)]'
                 aria-label={fileInputOptions?.tooltip ?? 'Upload file'}
               >
                 <FileIcon className='h-[14px] w-[14px]' strokeWidth={2} />
diff --git a/apps/sim/components/emcn/components/textarea/textarea.tsx b/apps/sim/components/emcn/components/textarea/textarea.tsx
index de56797c8ea..a92cee7edf7 100644
--- a/apps/sim/components/emcn/components/textarea/textarea.tsx
+++ b/apps/sim/components/emcn/components/textarea/textarea.tsx
@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/lib/core/utils/cn'
 
 const textareaVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] py-[8px] font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
+  'flex w-full touch-manipulation rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 py-2 font-medium font-sans text-sm text-[var(--text-primary)] transition-colors placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] resize-none overflow-auto disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {
diff --git a/apps/sim/components/emcn/components/time-picker/time-picker.tsx b/apps/sim/components/emcn/components/time-picker/time-picker.tsx
index 4bc776b347a..a73ae17a67d 100644
--- a/apps/sim/components/emcn/components/time-picker/time-picker.tsx
+++ b/apps/sim/components/emcn/components/time-picker/time-picker.tsx
@@ -40,15 +40,15 @@ import { cn } from '@/lib/core/utils/cn'
  * Matches the input and combobox styling patterns.
  */
 const timePickerVariants = cva(
-  'flex w-full rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[8px] font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 hover:border-[var(--surface-7)] hover:bg-[var(--surface-5)] dark:hover:border-[var(--surface-7)] dark:hover:bg-[var(--border-1)] transition-colors',
+  'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none focus-visible:border-[var(--text-muted)] disabled:cursor-not-allowed disabled:opacity-50 hover-hover:border-[var(--surface-7)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:border-[var(--surface-7)] dark:hover-hover:bg-[var(--border-1)] transition-colors',
   {
     variants: {
       variant: {
         default: '',
       },
       size: {
-        default: 'py-[6px] text-sm',
-        sm: 'py-[5px] text-[12px]',
+        default: 'py-1.5 text-sm',
+        sm: 'py-[5px] text-caption',
       },
     },
     defaultVariants: {
@@ -240,7 +240,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
               </span>
               <ChevronDown
                 className={cn(
-                  'ml-[8px] h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
+                  'ml-2 h-4 w-4 flex-shrink-0 opacity-50 transition-transform',
                   open && 'rotate-180'
                 )}
               />
@@ -251,12 +251,12 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
             side='bottom'
             align='start'
             sideOffset={4}
-            className='w-auto rounded-[6px] border border-[var(--border-1)] p-[8px]'
+            className='w-auto rounded-md border border-[var(--border-1)] p-2'
           >
-            <div className='flex items-center gap-[6px]'>
+            <div className='flex items-center gap-1.5'>
               <input
                 ref={hourInputRef}
-                className='w-[40px] rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[5px] text-center font-medium font-sans text-[13px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none focus-visible:ring-0'
+                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-medium font-sans text-[var(--text-primary)] text-small outline-none transition-colors placeholder:text-[var(--text-muted)] focus-visible:border-[var(--text-muted)]'
                 value={hour}
                 onChange={handleHourChange}
                 onBlur={handleHourBlur}
@@ -266,9 +266,9 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
                 maxLength={2}
                 autoComplete='off'
               />
-              <span className='font-medium text-[13px] text-[var(--text-muted)]'>:</span>
+              <span className='font-medium text-[var(--text-muted)] text-small'>:</span>
               <input
-                className='w-[40px] rounded-[4px] border border-[var(--border-1)] bg-[var(--surface-5)] px-[6px] py-[5px] text-center font-medium font-sans text-[13px] text-[var(--text-primary)] outline-none transition-colors placeholder:text-[var(--text-muted)] focus:outline-none focus-visible:outline-none focus-visible:ring-0'
+                className='w-[40px] rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-1.5 py-[5px] text-center font-medium font-sans text-[var(--text-primary)] text-small outline-none transition-colors placeholder:text-[var(--text-muted)] focus-visible:border-[var(--text-muted)]'
                 value={minute}
                 onChange={handleMinuteChange}
                 onBlur={handleMinuteBlur}
@@ -278,7 +278,7 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
                 maxLength={2}
                 autoComplete='off'
               />
-              <div className='ml-[2px] flex overflow-hidden rounded-[4px] border border-[var(--border-1)]'>
+              <div className='ml-0.5 flex overflow-hidden rounded-sm border border-[var(--border-1)]'>
                 {(['AM', 'PM'] as const).map((period) => (
                   <button
                     key={period}
@@ -288,10 +288,10 @@ const TimePicker = React.forwardRef<HTMLDivElement, TimePickerProps>(
                       updateTime(undefined, undefined, period)
                     }}
                     className={cn(
-                      'px-[8px] py-[5px] font-medium font-sans text-[12px] transition-colors',
+                      'px-2 py-[5px] font-medium font-sans text-caption transition-colors',
                       ampm === period
                         ? 'bg-[var(--brand-secondary)] text-[var(--bg)]'
-                        : 'bg-[var(--surface-5)] text-[var(--text-secondary)] hover:bg-[var(--surface-7)] hover:text-[var(--text-primary)] dark:hover:bg-[var(--surface-5)]'
+                        : 'bg-[var(--surface-5)] text-[var(--text-secondary)] hover-hover:bg-[var(--surface-7)] hover-hover:text-[var(--text-primary)] dark:hover-hover:bg-[var(--surface-5)]'
                     )}
                   >
                     {period}
diff --git a/apps/sim/components/emcn/components/toast/toast.tsx b/apps/sim/components/emcn/components/toast/toast.tsx
index 163f05858b5..c5d86537fab 100644
--- a/apps/sim/components/emcn/components/toast/toast.tsx
+++ b/apps/sim/components/emcn/components/toast/toast.tsx
@@ -14,7 +14,7 @@ import { X } from 'lucide-react'
 import { createPortal } from 'react-dom'
 import { cn } from '@/lib/core/utils/cn'
 
-const AUTO_DISMISS_MS = 0
+const AUTO_DISMISS_MS = 5000
 const EXIT_ANIMATION_MS = 200
 const MAX_VISIBLE = 20
 
@@ -23,6 +23,12 @@ const RING_CIRCUMFERENCE = 2 * Math.PI * RING_RADIUS
 
 type ToastVariant = 'default' | 'success' | 'error'
 
+const VARIANT_STYLES: Record<ToastVariant, string> = {
+  default: 'border-[var(--border)] bg-[var(--bg)]',
+  success: 'border-[var(--border)] bg-[var(--bg)]',
+  error: 'border-[var(--border)] bg-[var(--bg)]',
+}
+
 interface ToastAction {
   label: string
   onClick: () => void
@@ -31,6 +37,7 @@ interface ToastAction {
 interface ToastData {
   id: string
   message: string
+  description?: string
   variant: ToastVariant
   action?: ToastAction
   duration: number
@@ -38,6 +45,7 @@ interface ToastData {
 
 type ToastInput = {
   message: string
+  description?: string
   variant?: ToastVariant
   action?: ToastAction
   duration?: number
@@ -137,48 +145,52 @@ function ToastItem({ toast: t, onDismiss }: { toast: ToastData; onDismiss: (id:
   return (
     <div
       className={cn(
-        'pointer-events-auto w-[240px] overflow-hidden rounded-[8px] border border-[var(--border)] bg-[var(--bg)] shadow-sm',
+        'pointer-events-auto flex w-[min(100vw-2rem,320px)] flex-col gap-2 overflow-hidden rounded-lg border px-3 py-2.5 shadow-md transition-[transform,opacity]',
+        VARIANT_STYLES[t.variant],
         exiting
-          ? 'animate-[toast-exit_200ms_ease-in_forwards]'
-          : 'animate-[toast-enter_200ms_ease-out_forwards]'
+          ? 'animate-[toast-exit_200ms_ease-in_forwards] motion-reduce:animate-none'
+          : 'animate-[toast-enter_200ms_ease-out_forwards] motion-reduce:animate-none'
       )}
     >
-      <div className='flex flex-col gap-[8px] p-[8px]'>
-        <div className='flex items-start gap-[8px]'>
-          <div className='line-clamp-2 min-w-0 flex-1 font-medium text-[12px] text-[var(--text-body)]'>
+      <div className='flex items-start gap-2'>
+        <div className='min-w-0 flex-1'>
+          <div className='line-clamp-2 font-medium text-[var(--text-body)] text-small leading-[18px]'>
             {t.variant === 'error' && (
-              <span className='mr-[8px] mb-[2px] inline-block h-[8px] w-[8px] rounded-[2px] bg-[var(--text-error)] align-middle' />
+              <span className='mr-2 mb-0.5 inline-block h-2 w-2 rounded-[2px] bg-[var(--text-error)] align-middle' />
             )}
             {t.variant === 'success' && (
-              <span className='mr-[8px] mb-[2px] inline-block h-[8px] w-[8px] rounded-[2px] bg-[var(--text-success)] align-middle' />
+              <span className='mr-2 mb-0.5 inline-block h-2 w-2 rounded-[2px] bg-[var(--text-success)] align-middle' />
             )}
             {t.message}
           </div>
-          <div className='flex shrink-0 items-start gap-[2px]'>
-            {t.duration > 0 && <CountdownRing duration={t.duration} />}
-            <button
-              type='button'
-              onClick={dismiss}
-              aria-label='Dismiss notification'
-              className='-m-[2px] shrink-0 rounded-[5px] p-[4px] hover:bg-[var(--surface-active)]'
-            >
-              <X className='h-[14px] w-[14px] text-[var(--text-icon)]' />
-            </button>
-          </div>
+          {t.description ? (
+            <p className='mt-0.5 text-caption leading-4 opacity-80'>{t.description}</p>
+          ) : null}
         </div>
-        {t.action && (
+        <div className='flex shrink-0 items-start gap-0.5'>
+          {t.duration > 0 ? <CountdownRing duration={t.duration} /> : null}
           <button
             type='button'
-            onClick={() => {
-              t.action!.onClick()
-              dismiss()
-            }}
-            className='w-full rounded-[5px] bg-[var(--surface-active)] px-[8px] py-[4px] font-medium text-[12px] hover:bg-[var(--surface-hover)]'
+            onClick={dismiss}
+            aria-label='Dismiss notification'
+            className='-m-0.5 shrink-0 rounded-sm p-1 text-[var(--text-icon)] hover:bg-[var(--surface-active)]'
           >
-            {t.action.label}
+            <X className='h-[14px] w-[14px]' />
           </button>
-        )}
+        </div>
       </div>
+      {t.action ? (
+        <button
+          type='button'
+          onClick={() => {
+            t.action!.onClick()
+            dismiss()
+          }}
+          className='w-full rounded-md bg-[var(--surface-active)] px-2 py-1 font-medium text-small hover:bg-[var(--surface-hover)]'
+        >
+          {t.action.label}
+        </button>
+      ) : null}
     </div>
   )
 }
@@ -205,6 +217,7 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
     const data: ToastData = {
       id,
       message: input.message,
+      description: input.description,
       variant: input.variant ?? 'default',
       action: input.action,
       duration: input.duration ?? AUTO_DISMISS_MS,
@@ -240,7 +253,7 @@ export function ToastProvider({ children }: { children?: ReactNode }) {
           <div
             aria-live='polite'
             aria-label='Notifications'
-            className='pointer-events-none fixed right-[16px] bottom-[16px] z-[10000400] flex flex-col-reverse items-end gap-[8px]'
+            className='pointer-events-none fixed right-[16px] bottom-4 z-[var(--z-toast)] flex flex-col-reverse items-end gap-2'
           >
             {toasts.map((t) => (
               <ToastItem key={t.id} toast={t} onDismiss={dismissToast} />
diff --git a/apps/sim/components/emcn/components/tooltip/tooltip.tsx b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
index af1b14309ae..5f78becfc4e 100644
--- a/apps/sim/components/emcn/components/tooltip/tooltip.tsx
+++ b/apps/sim/components/emcn/components/tooltip/tooltip.tsx
@@ -50,13 +50,13 @@ const Content = React.forwardRef<
       collisionPadding={8}
       avoidCollisions={true}
       className={cn(
-        'z-[10000300] rounded-[4px] bg-[#1b1b1b] px-[8px] py-[3.5px] font-base text-white text-xs shadow-sm dark:bg-[#fdfdfd] dark:text-black',
+        'z-[var(--z-tooltip)] rounded-sm bg-[var(--bg)] px-2 py-[3.5px] font-base text-white text-xs shadow-sm dark:bg-[#fdfdfd] dark:text-black',
         className
       )}
       {...props}
     >
       {props.children}
-      <TooltipPrimitive.Arrow className='fill-[#1b1b1b] dark:fill-[#fdfdfd]' />
+      <TooltipPrimitive.Arrow className='fill-[var(--bg)] dark:fill-[#fdfdfd]' />
     </TooltipPrimitive.Content>
   </TooltipPrimitive.Portal>
 ))
@@ -82,7 +82,7 @@ interface ShortcutProps {
  * ```
  */
 const Shortcut = ({ keys, className, children }: ShortcutProps) => (
-  <span className={cn('flex items-center gap-[8px]', className)}>
+  <span className={cn('flex items-center gap-2', className)}>
     {children && <span>{children}</span>}
     <span className='opacity-70'>{keys}</span>
   </span>
diff --git a/apps/sim/components/emcn/icons/animate/copy.module.css b/apps/sim/components/emcn/icons/animate/copy.module.css
index 7b652378d8c..e3d52509b92 100644
--- a/apps/sim/components/emcn/icons/animate/copy.module.css
+++ b/apps/sim/components/emcn/icons/animate/copy.module.css
@@ -65,3 +65,10 @@
   animation: segment-cycle 2s ease-in-out infinite;
   transform-box: fill-box;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-copy-svg .rect-bottom-right,
+  .animated-copy-svg .rect-top-left {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/download.module.css b/apps/sim/components/emcn/icons/animate/download.module.css
index 0f279d3ff00..3c1cc6c1402 100644
--- a/apps/sim/components/emcn/icons/animate/download.module.css
+++ b/apps/sim/components/emcn/icons/animate/download.module.css
@@ -20,3 +20,9 @@
   animation: arrow-pulse 1.5s ease-in-out infinite;
   transform-origin: center center;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-download-svg {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/layout.module.css b/apps/sim/components/emcn/icons/animate/layout.module.css
index 4230456a9e0..364d4a3028c 100644
--- a/apps/sim/components/emcn/icons/animate/layout.module.css
+++ b/apps/sim/components/emcn/icons/animate/layout.module.css
@@ -177,3 +177,12 @@
 .animated-layout-svg.clockwise .block-bottom-left {
   animation: move-bottom-left-cw 2.5s ease-in-out infinite;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-layout-svg .block-top-left,
+  .animated-layout-svg .block-top-right,
+  .animated-layout-svg .block-bottom-right,
+  .animated-layout-svg .block-bottom-left {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/loader.module.css b/apps/sim/components/emcn/icons/animate/loader.module.css
index c18e027f57a..ebe4f368f54 100644
--- a/apps/sim/components/emcn/icons/animate/loader.module.css
+++ b/apps/sim/components/emcn/icons/animate/loader.module.css
@@ -18,3 +18,9 @@
   transform-origin: center center;
   will-change: transform;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-loader-svg {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/animate/pills-ring.module.css b/apps/sim/components/emcn/icons/animate/pills-ring.module.css
index 20e46e6fd4b..5ba88317291 100644
--- a/apps/sim/components/emcn/icons/animate/pills-ring.module.css
+++ b/apps/sim/components/emcn/icons/animate/pills-ring.module.css
@@ -20,3 +20,9 @@
   animation: pill-fade 1.2s ease-in-out infinite;
   will-change: opacity;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .animated-pills-ring-svg .pill {
+    animation: none;
+  }
+}
diff --git a/apps/sim/components/emcn/icons/arrow-down.tsx b/apps/sim/components/emcn/icons/arrow-down.tsx
index d419ea8962d..e1cbbd85595 100644
--- a/apps/sim/components/emcn/icons/arrow-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-down.tsx
@@ -16,6 +16,7 @@ export function ArrowDown(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M4 11.25L10.25 17.5L16.5 11.25' />
diff --git a/apps/sim/components/emcn/icons/arrow-left.tsx b/apps/sim/components/emcn/icons/arrow-left.tsx
index adf57187cfb..729fd5547a6 100644
--- a/apps/sim/components/emcn/icons/arrow-left.tsx
+++ b/apps/sim/components/emcn/icons/arrow-left.tsx
@@ -16,6 +16,7 @@ export function ArrowLeft(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M9.25 4L3 10.25L9.25 16.5' />
diff --git a/apps/sim/components/emcn/icons/arrow-right.tsx b/apps/sim/components/emcn/icons/arrow-right.tsx
index 992adacd545..2d98246046a 100644
--- a/apps/sim/components/emcn/icons/arrow-right.tsx
+++ b/apps/sim/components/emcn/icons/arrow-right.tsx
@@ -16,6 +16,7 @@ export function ArrowRight(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M11.25 4L17.5 10.25L11.25 16.5' />
diff --git a/apps/sim/components/emcn/icons/arrow-up-down.tsx b/apps/sim/components/emcn/icons/arrow-up-down.tsx
index 86729d15345..012511c209f 100644
--- a/apps/sim/components/emcn/icons/arrow-up-down.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up-down.tsx
@@ -16,6 +16,7 @@ export function ArrowUpDown(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M1.5 8L5.5 4L9.5 8' />
diff --git a/apps/sim/components/emcn/icons/arrow-up.tsx b/apps/sim/components/emcn/icons/arrow-up.tsx
index 24430bd4bcc..f4272c4fa42 100644
--- a/apps/sim/components/emcn/icons/arrow-up.tsx
+++ b/apps/sim/components/emcn/icons/arrow-up.tsx
@@ -16,6 +16,7 @@ export function ArrowUp(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M4 9.25L10.25 3L16.5 9.25' />
diff --git a/apps/sim/components/emcn/icons/asterisk.tsx b/apps/sim/components/emcn/icons/asterisk.tsx
index e443ff6f341..d6bc5a52925 100644
--- a/apps/sim/components/emcn/icons/asterisk.tsx
+++ b/apps/sim/components/emcn/icons/asterisk.tsx
@@ -16,6 +16,7 @@ export function Asterisk(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 3V17.5' />
diff --git a/apps/sim/components/emcn/icons/bell.tsx b/apps/sim/components/emcn/icons/bell.tsx
index d9d4b0f2b9f..ebbf72ad849 100644
--- a/apps/sim/components/emcn/icons/bell.tsx
+++ b/apps/sim/components/emcn/icons/bell.tsx
@@ -16,6 +16,7 @@ export function Bell(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M15.25 6.75C15.25 5.35761 14.6969 4.02226 13.7123 3.03769C12.7277 2.05312 11.3924 1.5 10 1.5C8.60761 1.5 7.27226 2.05312 6.28769 3.03769C5.30312 4.02226 4.75 5.35761 4.75 6.75C4.75 12.75 2.25 14.5 2.25 14.5H17.75C17.75 14.5 15.25 12.75 15.25 6.75Z' />
diff --git a/apps/sim/components/emcn/icons/blimp.tsx b/apps/sim/components/emcn/icons/blimp.tsx
index d361451ea99..8c3b34d750c 100644
--- a/apps/sim/components/emcn/icons/blimp.tsx
+++ b/apps/sim/components/emcn/icons/blimp.tsx
@@ -15,6 +15,7 @@ export function Blimp(props: SVGProps<SVGSVGElement>) {
       strokeWidth='0.75'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/book-open.tsx b/apps/sim/components/emcn/icons/book-open.tsx
index 2981f290e8a..f83e0922a4e 100644
--- a/apps/sim/components/emcn/icons/book-open.tsx
+++ b/apps/sim/components/emcn/icons/book-open.tsx
@@ -16,6 +16,7 @@ export function BookOpen(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 2.75C0.75 2.75 3.25 0.75 6.25 0.75C9.25 0.75 10.25 2.75 10.25 2.75V18.75C10.25 18.75 9.25 17.25 6.25 17.25C3.25 17.25 0.75 18.75 0.75 18.75V2.75Z' />
diff --git a/apps/sim/components/emcn/icons/bubble-chat-close.tsx b/apps/sim/components/emcn/icons/bubble-chat-close.tsx
index a8792b2ab04..db8e7c2cf2c 100644
--- a/apps/sim/components/emcn/icons/bubble-chat-close.tsx
+++ b/apps/sim/components/emcn/icons/bubble-chat-close.tsx
@@ -12,6 +12,7 @@ export function BubbleChatClose(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/bubble-chat-preview.tsx b/apps/sim/components/emcn/icons/bubble-chat-preview.tsx
index 54c6a7a1b1b..b3eae3e1b23 100644
--- a/apps/sim/components/emcn/icons/bubble-chat-preview.tsx
+++ b/apps/sim/components/emcn/icons/bubble-chat-preview.tsx
@@ -12,6 +12,7 @@ export function BubbleChatPreview(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/bug.tsx b/apps/sim/components/emcn/icons/bug.tsx
index 912274a3f93..1f64918e473 100644
--- a/apps/sim/components/emcn/icons/bug.tsx
+++ b/apps/sim/components/emcn/icons/bug.tsx
@@ -16,6 +16,7 @@ export function Bug(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M6.25 4.75L4.25 2.75' />
diff --git a/apps/sim/components/emcn/icons/calendar.tsx b/apps/sim/components/emcn/icons/calendar.tsx
index d1b4c25d1a3..d986f323d9a 100644
--- a/apps/sim/components/emcn/icons/calendar.tsx
+++ b/apps/sim/components/emcn/icons/calendar.tsx
@@ -16,6 +16,7 @@ export function Calendar(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 5.25C0.75 3.86929 1.86929 2.75 3.25 2.75H17.25C18.6307 2.75 19.75 3.86929 19.75 5.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V5.25Z' />
diff --git a/apps/sim/components/emcn/icons/card.tsx b/apps/sim/components/emcn/icons/card.tsx
index 74d1c4ea8b1..fe546a578b7 100644
--- a/apps/sim/components/emcn/icons/card.tsx
+++ b/apps/sim/components/emcn/icons/card.tsx
@@ -12,6 +12,7 @@ export function Card(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 15 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/check.tsx b/apps/sim/components/emcn/icons/check.tsx
index bae60bf4b06..6d26915e200 100644
--- a/apps/sim/components/emcn/icons/check.tsx
+++ b/apps/sim/components/emcn/icons/check.tsx
@@ -16,6 +16,7 @@ export function Check(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M18.25 2.75L7.25 15.75L1.75 10.25' />
diff --git a/apps/sim/components/emcn/icons/chevron-down.tsx b/apps/sim/components/emcn/icons/chevron-down.tsx
index a52666136c3..56dc176d2c1 100644
--- a/apps/sim/components/emcn/icons/chevron-down.tsx
+++ b/apps/sim/components/emcn/icons/chevron-down.tsx
@@ -12,6 +12,7 @@ export function ChevronDown(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 10 6'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/clipboard-list.tsx b/apps/sim/components/emcn/icons/clipboard-list.tsx
index d5fd088ebce..5ca14380e77 100644
--- a/apps/sim/components/emcn/icons/clipboard-list.tsx
+++ b/apps/sim/components/emcn/icons/clipboard-list.tsx
@@ -16,6 +16,7 @@ export function ClipboardList(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.75 4.25C3.75 2.86929 4.86929 1.75 6.25 1.75H14.25C15.6307 1.75 16.75 2.86929 16.75 4.25V17.25C16.75 18.6307 15.6307 19.75 14.25 19.75H6.25C4.86929 19.75 3.75 18.6307 3.75 17.25V4.25Z' />
diff --git a/apps/sim/components/emcn/icons/columns2.tsx b/apps/sim/components/emcn/icons/columns2.tsx
index 5672efeb191..fb697639bcf 100644
--- a/apps/sim/components/emcn/icons/columns2.tsx
+++ b/apps/sim/components/emcn/icons/columns2.tsx
@@ -16,6 +16,7 @@ export function Columns2(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/columns3.tsx b/apps/sim/components/emcn/icons/columns3.tsx
index d4213bf36d2..9c041cef65a 100644
--- a/apps/sim/components/emcn/icons/columns3.tsx
+++ b/apps/sim/components/emcn/icons/columns3.tsx
@@ -16,6 +16,7 @@ export function Columns3(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/connections.tsx b/apps/sim/components/emcn/icons/connections.tsx
index 5baed700406..a9d4d248419 100644
--- a/apps/sim/components/emcn/icons/connections.tsx
+++ b/apps/sim/components/emcn/icons/connections.tsx
@@ -12,6 +12,7 @@ export function Connections(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 13 13'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/copy.tsx b/apps/sim/components/emcn/icons/copy.tsx
index e331aab9c6a..ee18707e537 100644
--- a/apps/sim/components/emcn/icons/copy.tsx
+++ b/apps/sim/components/emcn/icons/copy.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/copy.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface CopyProps extends SVGProps<SVGSVGElement> {
   /**
@@ -16,9 +17,7 @@ export interface CopyProps extends SVGProps<SVGSVGElement> {
  * @param props - SVG properties including className, animate, etc.
  */
 export function Copy({ animate = false, className, ...props }: CopyProps) {
-  const svgClassName = animate
-    ? `${styles['animated-copy-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-copy-svg'], className)
 
   return (
     <svg
@@ -32,6 +31,7 @@ export function Copy({ animate = false, className, ...props }: CopyProps) {
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <rect
diff --git a/apps/sim/components/emcn/icons/cursor.tsx b/apps/sim/components/emcn/icons/cursor.tsx
index 313731f0fda..039cbb7d0db 100644
--- a/apps/sim/components/emcn/icons/cursor.tsx
+++ b/apps/sim/components/emcn/icons/cursor.tsx
@@ -8,6 +8,7 @@ export function Cursor(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/database-x.tsx b/apps/sim/components/emcn/icons/database-x.tsx
index e6f955de8e0..93a66829e06 100644
--- a/apps/sim/components/emcn/icons/database-x.tsx
+++ b/apps/sim/components/emcn/icons/database-x.tsx
@@ -16,6 +16,7 @@ export function DatabaseX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
diff --git a/apps/sim/components/emcn/icons/database.tsx b/apps/sim/components/emcn/icons/database.tsx
index ed1423016bd..40d29d35d89 100644
--- a/apps/sim/components/emcn/icons/database.tsx
+++ b/apps/sim/components/emcn/icons/database.tsx
@@ -16,6 +16,7 @@ export function Database(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <ellipse cx='10.25' cy='3.75' rx='8.5' ry='3' />
diff --git a/apps/sim/components/emcn/icons/document-attachment.tsx b/apps/sim/components/emcn/icons/document-attachment.tsx
index 5b54d0e1fab..fea7b7f209b 100644
--- a/apps/sim/components/emcn/icons/document-attachment.tsx
+++ b/apps/sim/components/emcn/icons/document-attachment.tsx
@@ -12,6 +12,7 @@ export function DocumentAttachment(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 13'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/download.tsx b/apps/sim/components/emcn/icons/download.tsx
index 74737dbd704..dc3418b1941 100644
--- a/apps/sim/components/emcn/icons/download.tsx
+++ b/apps/sim/components/emcn/icons/download.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/download.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface DownloadProps extends SVGProps<SVGSVGElement> {
   /**
@@ -17,9 +18,7 @@ export interface DownloadProps extends SVGProps<SVGSVGElement> {
  * @param props - SVG properties including className, animate, etc.
  */
 export function Download({ animate = false, className, ...props }: DownloadProps) {
-  const svgClassName = animate
-    ? `${styles['animated-download-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-download-svg'], className)
 
   return (
     <svg
@@ -33,6 +32,7 @@ export function Download({ animate = false, className, ...props }: DownloadProps
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <path d='M12 5v14' />
diff --git a/apps/sim/components/emcn/icons/duplicate.tsx b/apps/sim/components/emcn/icons/duplicate.tsx
index 4278a4e446c..6c9a888e8e6 100644
--- a/apps/sim/components/emcn/icons/duplicate.tsx
+++ b/apps/sim/components/emcn/icons/duplicate.tsx
@@ -12,6 +12,7 @@ export function Duplicate(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 15 15'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/expand.tsx b/apps/sim/components/emcn/icons/expand.tsx
index c6939685b4c..45d86e2dce9 100644
--- a/apps/sim/components/emcn/icons/expand.tsx
+++ b/apps/sim/components/emcn/icons/expand.tsx
@@ -8,6 +8,7 @@ export function Expand(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/eye.tsx b/apps/sim/components/emcn/icons/eye.tsx
index 78ab41c2830..f95e152b92c 100644
--- a/apps/sim/components/emcn/icons/eye.tsx
+++ b/apps/sim/components/emcn/icons/eye.tsx
@@ -12,6 +12,7 @@ export function Eye(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 11'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/file-x.tsx b/apps/sim/components/emcn/icons/file-x.tsx
index 07175014715..634bb689335 100644
--- a/apps/sim/components/emcn/icons/file-x.tsx
+++ b/apps/sim/components/emcn/icons/file-x.tsx
@@ -16,6 +16,7 @@ export function FileX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.25 12.5V2.75C3.25 1.64543 4.14543 0.75 5.25 0.75H12.25L17.25 5.75V16.75C17.25 17.8546 16.3546 18.75 15.25 18.75H9.5' />
diff --git a/apps/sim/components/emcn/icons/file.tsx b/apps/sim/components/emcn/icons/file.tsx
index 03dfa8dd1a7..a7d738cff13 100644
--- a/apps/sim/components/emcn/icons/file.tsx
+++ b/apps/sim/components/emcn/icons/file.tsx
@@ -16,6 +16,7 @@ export function File(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M12.25 0.75H5.25C4.14543 0.75 3.25 1.64543 3.25 2.75V16.75C3.25 17.8546 4.14543 18.75 5.25 18.75H15.25C16.3546 18.75 17.25 17.8546 17.25 16.75V5.75L12.25 0.75Z' />
diff --git a/apps/sim/components/emcn/icons/fingerprint.tsx b/apps/sim/components/emcn/icons/fingerprint.tsx
index ed0fc0642cb..09a0cb5c41a 100644
--- a/apps/sim/components/emcn/icons/fingerprint.tsx
+++ b/apps/sim/components/emcn/icons/fingerprint.tsx
@@ -16,6 +16,7 @@ export function Fingerprint(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M12 10a2 2 0 0 0-2 2c0 1.02-.1 2.51-.26 4' />
diff --git a/apps/sim/components/emcn/icons/folder-code.tsx b/apps/sim/components/emcn/icons/folder-code.tsx
index 1f0ee590d66..c957fe39187 100644
--- a/apps/sim/components/emcn/icons/folder-code.tsx
+++ b/apps/sim/components/emcn/icons/folder-code.tsx
@@ -12,6 +12,7 @@ export function FolderCode(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 15 13'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/folder-plus.tsx b/apps/sim/components/emcn/icons/folder-plus.tsx
index 77358832dcc..eec8607afca 100644
--- a/apps/sim/components/emcn/icons/folder-plus.tsx
+++ b/apps/sim/components/emcn/icons/folder-plus.tsx
@@ -12,6 +12,7 @@ export function FolderPlus(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/hammer.tsx b/apps/sim/components/emcn/icons/hammer.tsx
index 1be9331d932..ba2954ca1c4 100644
--- a/apps/sim/components/emcn/icons/hammer.tsx
+++ b/apps/sim/components/emcn/icons/hammer.tsx
@@ -16,6 +16,7 @@ export function Hammer(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M7 6.75L10.25 3.5L16.75 10L13.5 13.25Z' />
diff --git a/apps/sim/components/emcn/icons/hand.tsx b/apps/sim/components/emcn/icons/hand.tsx
index 9197f1e10b0..d57c9304bcc 100644
--- a/apps/sim/components/emcn/icons/hand.tsx
+++ b/apps/sim/components/emcn/icons/hand.tsx
@@ -8,6 +8,7 @@ export function Hand(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/help-circle.tsx b/apps/sim/components/emcn/icons/help-circle.tsx
index 0a2d5166fc0..1e81e3eda83 100644
--- a/apps/sim/components/emcn/icons/help-circle.tsx
+++ b/apps/sim/components/emcn/icons/help-circle.tsx
@@ -16,6 +16,7 @@ export function HelpCircle(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='12' cy='12' r='10' />
diff --git a/apps/sim/components/emcn/icons/hex-simple.tsx b/apps/sim/components/emcn/icons/hex-simple.tsx
index fb8c7cf0363..84c806d7c16 100644
--- a/apps/sim/components/emcn/icons/hex-simple.tsx
+++ b/apps/sim/components/emcn/icons/hex-simple.tsx
@@ -12,6 +12,7 @@ export function HexSimple(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 24 24'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/home.tsx b/apps/sim/components/emcn/icons/home.tsx
index 95b06289166..d80197776f0 100644
--- a/apps/sim/components/emcn/icons/home.tsx
+++ b/apps/sim/components/emcn/icons/home.tsx
@@ -16,6 +16,7 @@ export function Home(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 9.5L10.25 1L19.75 9.5V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V9.5Z' />
diff --git a/apps/sim/components/emcn/icons/integration.tsx b/apps/sim/components/emcn/icons/integration.tsx
index 8dffca68c31..1fa3e0cb1bb 100644
--- a/apps/sim/components/emcn/icons/integration.tsx
+++ b/apps/sim/components/emcn/icons/integration.tsx
@@ -16,6 +16,7 @@ export function Integration(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1' y='6.5' width='7' height='7' rx='1.5' />
diff --git a/apps/sim/components/emcn/icons/key-square.tsx b/apps/sim/components/emcn/icons/key-square.tsx
index 566c00c46d0..53fbedde978 100644
--- a/apps/sim/components/emcn/icons/key-square.tsx
+++ b/apps/sim/components/emcn/icons/key-square.tsx
@@ -16,6 +16,7 @@ export function KeySquare(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1.25' y='0.75' width='18' height='18' rx='2.5' />
diff --git a/apps/sim/components/emcn/icons/key.tsx b/apps/sim/components/emcn/icons/key.tsx
index 02dffdf376f..11950dfbd9a 100644
--- a/apps/sim/components/emcn/icons/key.tsx
+++ b/apps/sim/components/emcn/icons/key.tsx
@@ -16,6 +16,7 @@ export function Key(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='6.75' cy='10.25' r='3.5' />
diff --git a/apps/sim/components/emcn/icons/layout.tsx b/apps/sim/components/emcn/icons/layout.tsx
index 649de0124c9..163a8944bca 100644
--- a/apps/sim/components/emcn/icons/layout.tsx
+++ b/apps/sim/components/emcn/icons/layout.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/layout.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export type LayoutAnimationVariant = 'clockwise' | 'counterclockwise'
 
@@ -28,9 +29,11 @@ export function Layout({
   className,
   ...props
 }: LayoutProps) {
-  const svgClassName = animate
-    ? `${styles['animated-layout-svg']} ${variant === 'clockwise' ? styles.clockwise : ''} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(
+    animate && styles['animated-layout-svg'],
+    animate && variant === 'clockwise' && styles.clockwise,
+    className
+  )
 
   return (
     <svg
@@ -44,6 +47,7 @@ export function Layout({
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <rect
diff --git a/apps/sim/components/emcn/icons/library.tsx b/apps/sim/components/emcn/icons/library.tsx
index 7411e6e342d..16f19208f8a 100644
--- a/apps/sim/components/emcn/icons/library.tsx
+++ b/apps/sim/components/emcn/icons/library.tsx
@@ -16,6 +16,7 @@ export function Library(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 4.75C0.75 3.34987 0.75 2.6498 1.02248 2.11502C1.26217 1.64462 1.64462 1.26217 2.11502 1.02248C2.6498 0.75 3.34987 0.75 4.75 0.75C6.15013 0.75 6.8502 0.75 7.38498 1.02248C7.85538 1.26217 8.23783 1.64462 8.47752 2.11502C8.75 2.6498 8.75 3.34987 8.75 4.75V14.75C8.75 16.1501 8.75 16.8502 8.47752 17.385C8.23783 17.8554 7.85538 18.2378 7.38498 18.4775C6.8502 18.75 6.15013 18.75 4.75 18.75C3.34987 18.75 2.6498 18.75 2.11502 18.4775C1.64462 18.2378 1.26217 17.8554 1.02248 17.385C0.75 16.8502 0.75 16.1501 0.75 14.75V4.75Z' />
diff --git a/apps/sim/components/emcn/icons/list-filter.tsx b/apps/sim/components/emcn/icons/list-filter.tsx
index f50b54f04bd..9d883ef33cb 100644
--- a/apps/sim/components/emcn/icons/list-filter.tsx
+++ b/apps/sim/components/emcn/icons/list-filter.tsx
@@ -16,6 +16,7 @@ export function ListFilter(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M1.5 4.5H19' />
diff --git a/apps/sim/components/emcn/icons/loader.tsx b/apps/sim/components/emcn/icons/loader.tsx
index 362cd370427..1f91b4fb717 100644
--- a/apps/sim/components/emcn/icons/loader.tsx
+++ b/apps/sim/components/emcn/icons/loader.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/loader.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
@@ -17,9 +18,7 @@ export interface LoaderProps extends SVGProps<SVGSVGElement> {
  * @param props - SVG properties including className, animate, etc.
  */
 export function Loader({ animate = false, className, ...props }: LoaderProps) {
-  const svgClassName = animate
-    ? `${styles['animated-loader-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-loader-svg'], className)
 
   return (
     <svg
@@ -33,6 +32,7 @@ export function Loader({ animate = false, className, ...props }: LoaderProps) {
       strokeLinecap='round'
       strokeLinejoin='round'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74' />
diff --git a/apps/sim/components/emcn/icons/lock.tsx b/apps/sim/components/emcn/icons/lock.tsx
index d43cff5c2b2..60bad9b33ae 100644
--- a/apps/sim/components/emcn/icons/lock.tsx
+++ b/apps/sim/components/emcn/icons/lock.tsx
@@ -16,6 +16,7 @@ export function Lock(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
diff --git a/apps/sim/components/emcn/icons/log-in.tsx b/apps/sim/components/emcn/icons/log-in.tsx
index dff8045ecd6..43c0da5ccc8 100644
--- a/apps/sim/components/emcn/icons/log-in.tsx
+++ b/apps/sim/components/emcn/icons/log-in.tsx
@@ -16,6 +16,7 @@ export function LogIn(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M11.75 0.75H16.25C17.3546 0.75 18.25 1.64543 18.25 2.75V16.75C18.25 17.8546 17.3546 18.75 16.25 18.75H11.75' />
diff --git a/apps/sim/components/emcn/icons/log-out.tsx b/apps/sim/components/emcn/icons/log-out.tsx
index 57f333cfcbb..b9a0da87c44 100644
--- a/apps/sim/components/emcn/icons/log-out.tsx
+++ b/apps/sim/components/emcn/icons/log-out.tsx
@@ -16,6 +16,7 @@ export function LogOut(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M8.75 0.75H3.75C2.64543 0.75 1.75 1.64543 1.75 2.75V16.75C1.75 17.8546 2.64543 18.75 3.75 18.75H8.75' />
diff --git a/apps/sim/components/emcn/icons/mail.tsx b/apps/sim/components/emcn/icons/mail.tsx
index 84ea279f171..59f76e53eef 100644
--- a/apps/sim/components/emcn/icons/mail.tsx
+++ b/apps/sim/components/emcn/icons/mail.tsx
@@ -16,6 +16,7 @@ export function Mail(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='0.75' y='2.75' width='19' height='14' rx='2' />
diff --git a/apps/sim/components/emcn/icons/more-horizontal.tsx b/apps/sim/components/emcn/icons/more-horizontal.tsx
index d30562f5fc8..06a08d1aaab 100644
--- a/apps/sim/components/emcn/icons/more-horizontal.tsx
+++ b/apps/sim/components/emcn/icons/more-horizontal.tsx
@@ -12,6 +12,7 @@ export function MoreHorizontal(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 3'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/no-wrap.tsx b/apps/sim/components/emcn/icons/no-wrap.tsx
index 26d9a3fc8a2..01e62e1ca65 100644
--- a/apps/sim/components/emcn/icons/no-wrap.tsx
+++ b/apps/sim/components/emcn/icons/no-wrap.tsx
@@ -16,6 +16,7 @@ export function NoWrap(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 8h18' />
diff --git a/apps/sim/components/emcn/icons/palette.tsx b/apps/sim/components/emcn/icons/palette.tsx
index 49e71507f46..e33264e28c5 100644
--- a/apps/sim/components/emcn/icons/palette.tsx
+++ b/apps/sim/components/emcn/icons/palette.tsx
@@ -16,6 +16,7 @@ export function Palette(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 0.75C5.56 0.75 0.75 4.25 0.75 9.75C0.75 14.97 5.03 18.75 10.25 18.75C11.08 18.75 11.75 18.08 11.75 17.25C11.75 16.87 11.6 16.52 11.35 16.26C11.1 15.99 10.95 15.64 10.95 15.25C10.95 14.42 11.62 13.75 12.45 13.75H14.25C17.01 13.75 19.75 11.51 19.75 8.75C19.75 4.47 15.45 0.75 10.25 0.75Z' />
diff --git a/apps/sim/components/emcn/icons/panel-left.tsx b/apps/sim/components/emcn/icons/panel-left.tsx
index 0f9ab71dc59..4b3cc6b9c69 100644
--- a/apps/sim/components/emcn/icons/panel-left.tsx
+++ b/apps/sim/components/emcn/icons/panel-left.tsx
@@ -16,6 +16,7 @@ export function PanelLeft(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/pause.tsx b/apps/sim/components/emcn/icons/pause.tsx
index b06fd7169ac..c5ed4b10627 100644
--- a/apps/sim/components/emcn/icons/pause.tsx
+++ b/apps/sim/components/emcn/icons/pause.tsx
@@ -16,6 +16,7 @@ export function Pause(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M6.25 2.75V16.75' />
diff --git a/apps/sim/components/emcn/icons/pencil.tsx b/apps/sim/components/emcn/icons/pencil.tsx
index fa05bfd975b..7f521c3618d 100644
--- a/apps/sim/components/emcn/icons/pencil.tsx
+++ b/apps/sim/components/emcn/icons/pencil.tsx
@@ -16,6 +16,7 @@ export function Pencil(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M14.75 1.25L19.25 5.75L7.25 17.75H2.75V13.25L14.75 1.25Z' />
diff --git a/apps/sim/components/emcn/icons/pills-ring.tsx b/apps/sim/components/emcn/icons/pills-ring.tsx
index 94167283fc9..f77bf7d52e7 100644
--- a/apps/sim/components/emcn/icons/pills-ring.tsx
+++ b/apps/sim/components/emcn/icons/pills-ring.tsx
@@ -1,5 +1,6 @@
 import type { SVGProps } from 'react'
 import styles from '@/components/emcn/icons/animate/pills-ring.module.css'
+import { cn } from '@/lib/core/utils/cn'
 
 export interface PillsRingProps extends SVGProps<SVGSVGElement> {
   /**
@@ -19,9 +20,7 @@ const DURATION_S = 1.2
  * @param props - SVG properties including className, animate, etc.
  */
 export function PillsRing({ animate = false, className, ...props }: PillsRingProps) {
-  const svgClassName = animate
-    ? `${styles['animated-pills-ring-svg']} ${className || ''}`.trim()
-    : className
+  const svgClassName = cn(animate && styles['animated-pills-ring-svg'], className)
 
   return (
     <svg
@@ -31,6 +30,7 @@ export function PillsRing({ animate = false, className, ...props }: PillsRingPro
       viewBox='0 0 24 24'
       fill='currentColor'
       className={svgClassName}
+      aria-hidden='true'
       {...props}
     >
       {Array.from({ length: PILL_COUNT }).map((_, i) => (
diff --git a/apps/sim/components/emcn/icons/play.tsx b/apps/sim/components/emcn/icons/play.tsx
index 2e4a30d9c95..cf22598ba03 100644
--- a/apps/sim/components/emcn/icons/play.tsx
+++ b/apps/sim/components/emcn/icons/play.tsx
@@ -12,6 +12,7 @@ export function Play(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 10 10'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
@@ -38,6 +39,7 @@ export function PlayOutline(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M7.5 3.5C7.5 2.672 8.452 2.18 9.128 2.66L18.128 9.16C18.72 9.58 18.72 10.46 18.128 10.88L9.128 17.38C8.452 17.86 7.5 17.368 7.5 16.54V3.5Z' />
diff --git a/apps/sim/components/emcn/icons/plus.tsx b/apps/sim/components/emcn/icons/plus.tsx
index f2bcfbb0308..48fb9d84b7d 100644
--- a/apps/sim/components/emcn/icons/plus.tsx
+++ b/apps/sim/components/emcn/icons/plus.tsx
@@ -16,6 +16,7 @@ export function Plus(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 3V17.5' />
diff --git a/apps/sim/components/emcn/icons/redo.tsx b/apps/sim/components/emcn/icons/redo.tsx
index f5c57f0fa55..754b008cba1 100644
--- a/apps/sim/components/emcn/icons/redo.tsx
+++ b/apps/sim/components/emcn/icons/redo.tsx
@@ -12,6 +12,7 @@ export function Redo(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/rocket.tsx b/apps/sim/components/emcn/icons/rocket.tsx
index 7cb13d15d94..1e6f4621e72 100644
--- a/apps/sim/components/emcn/icons/rocket.tsx
+++ b/apps/sim/components/emcn/icons/rocket.tsx
@@ -16,6 +16,7 @@ export function Rocket(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M11 1.75C8.5 4.75 7.25 8.75 7.25 12.75V15.75H14.75V12.75C14.75 8.75 13.5 4.75 11 1.75Z' />
diff --git a/apps/sim/components/emcn/icons/rows3.tsx b/apps/sim/components/emcn/icons/rows3.tsx
index 56e76984675..84a5f4ea778 100644
--- a/apps/sim/components/emcn/icons/rows3.tsx
+++ b/apps/sim/components/emcn/icons/rows3.tsx
@@ -16,6 +16,7 @@ export function Rows3(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/search.tsx b/apps/sim/components/emcn/icons/search.tsx
index d90687351fd..75ab4694a3a 100644
--- a/apps/sim/components/emcn/icons/search.tsx
+++ b/apps/sim/components/emcn/icons/search.tsx
@@ -16,6 +16,7 @@ export function Search(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='8.5' cy='8.5' r='7.5' />
diff --git a/apps/sim/components/emcn/icons/send.tsx b/apps/sim/components/emcn/icons/send.tsx
index 87546abb807..ef7c3b904f8 100644
--- a/apps/sim/components/emcn/icons/send.tsx
+++ b/apps/sim/components/emcn/icons/send.tsx
@@ -16,6 +16,7 @@ export function Send(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M19.5 1.5L9 12' />
diff --git a/apps/sim/components/emcn/icons/server.tsx b/apps/sim/components/emcn/icons/server.tsx
index 6d47d0b27bf..05413e5ad51 100644
--- a/apps/sim/components/emcn/icons/server.tsx
+++ b/apps/sim/components/emcn/icons/server.tsx
@@ -16,6 +16,7 @@ export function Server(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1.75' y='0.75' width='17' height='7.5' rx='1.5' />
diff --git a/apps/sim/components/emcn/icons/settings.tsx b/apps/sim/components/emcn/icons/settings.tsx
index c174d3109ea..04ab7788f25 100644
--- a/apps/sim/components/emcn/icons/settings.tsx
+++ b/apps/sim/components/emcn/icons/settings.tsx
@@ -16,6 +16,7 @@ export function Settings(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='12' cy='12' r='3' />
diff --git a/apps/sim/components/emcn/icons/shield-check.tsx b/apps/sim/components/emcn/icons/shield-check.tsx
index 7f36905e0c7..4dea50ea79b 100644
--- a/apps/sim/components/emcn/icons/shield-check.tsx
+++ b/apps/sim/components/emcn/icons/shield-check.tsx
@@ -16,6 +16,7 @@ export function ShieldCheck(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 1.25L2.25 5.25V10.25C2.25 15.25 5.65 19.85 10.25 20.75C14.85 19.85 18.25 15.25 18.25 10.25V5.25L10.25 1.25Z' />
diff --git a/apps/sim/components/emcn/icons/sim.tsx b/apps/sim/components/emcn/icons/sim.tsx
index 6d8206765b5..9ba70e8e876 100644
--- a/apps/sim/components/emcn/icons/sim.tsx
+++ b/apps/sim/components/emcn/icons/sim.tsx
@@ -12,6 +12,7 @@ export function Sim(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 222 222'
       fill='#33C482'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
index a29ce86a54a..898a22f5b3b 100644
--- a/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
+++ b/apps/sim/components/emcn/icons/square-arrow-up-right.tsx
@@ -16,6 +16,7 @@ export function SquareArrowUpRight(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='1.25' y='0.75' width='18' height='18' rx='2.5' />
diff --git a/apps/sim/components/emcn/icons/table-x.tsx b/apps/sim/components/emcn/icons/table-x.tsx
index 4418df7c462..8880b586b15 100644
--- a/apps/sim/components/emcn/icons/table-x.tsx
+++ b/apps/sim/components/emcn/icons/table-x.tsx
@@ -16,6 +16,7 @@ export function TableX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 12.5V3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H7.5' />
diff --git a/apps/sim/components/emcn/icons/table.tsx b/apps/sim/components/emcn/icons/table.tsx
index 4aa54c84843..1b38aa9383b 100644
--- a/apps/sim/components/emcn/icons/table.tsx
+++ b/apps/sim/components/emcn/icons/table.tsx
@@ -16,6 +16,7 @@ export function Table(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H17.25C18.6307 0.75 19.75 1.86929 19.75 3.25V16.25C19.75 17.6307 18.6307 18.75 17.25 18.75H3.25C1.86929 18.75 0.75 17.6307 0.75 16.25V3.25Z' />
diff --git a/apps/sim/components/emcn/icons/tag.tsx b/apps/sim/components/emcn/icons/tag.tsx
index 8f988387a8c..57ac6c8ed9b 100644
--- a/apps/sim/components/emcn/icons/tag.tsx
+++ b/apps/sim/components/emcn/icons/tag.tsx
@@ -16,6 +16,7 @@ export function TagIcon(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M0.75 9.75V3.25C0.75 1.86929 1.86929 0.75 3.25 0.75H9.75L19.25 10.25L10.25 19.25L0.75 9.75Z' />
diff --git a/apps/sim/components/emcn/icons/terminal-window.tsx b/apps/sim/components/emcn/icons/terminal-window.tsx
index 670c8c83c73..38e5e796bc7 100644
--- a/apps/sim/components/emcn/icons/terminal-window.tsx
+++ b/apps/sim/components/emcn/icons/terminal-window.tsx
@@ -12,6 +12,7 @@ export function TerminalWindow(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 16 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/trash-outline.tsx b/apps/sim/components/emcn/icons/trash-outline.tsx
index 075574ae4b5..fef836dcbc1 100644
--- a/apps/sim/components/emcn/icons/trash-outline.tsx
+++ b/apps/sim/components/emcn/icons/trash-outline.tsx
@@ -16,6 +16,7 @@ export function TrashOutline(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 6h18' />
diff --git a/apps/sim/components/emcn/icons/trash.tsx b/apps/sim/components/emcn/icons/trash.tsx
index 07e191b2cfa..88c1a3dd87a 100644
--- a/apps/sim/components/emcn/icons/trash.tsx
+++ b/apps/sim/components/emcn/icons/trash.tsx
@@ -12,6 +12,7 @@ export function Trash(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 14'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/trash2.tsx b/apps/sim/components/emcn/icons/trash2.tsx
index b23eaea4bbc..fbf62e63911 100644
--- a/apps/sim/components/emcn/icons/trash2.tsx
+++ b/apps/sim/components/emcn/icons/trash2.tsx
@@ -12,6 +12,7 @@ export function Trash2(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 14 15'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/type-boolean.tsx b/apps/sim/components/emcn/icons/type-boolean.tsx
index 60f93befabe..099d3f48cc0 100644
--- a/apps/sim/components/emcn/icons/type-boolean.tsx
+++ b/apps/sim/components/emcn/icons/type-boolean.tsx
@@ -16,6 +16,7 @@ export function TypeBoolean(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='2.5' y='2.75' width='15.5' height='15.5' rx='2.5' />
diff --git a/apps/sim/components/emcn/icons/type-json.tsx b/apps/sim/components/emcn/icons/type-json.tsx
index bb9988199b3..f7f481f2b76 100644
--- a/apps/sim/components/emcn/icons/type-json.tsx
+++ b/apps/sim/components/emcn/icons/type-json.tsx
@@ -16,6 +16,7 @@ export function TypeJson(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M5.75 1.25C3.54086 1.25 1.75 3.04086 1.75 5.25V7.75C1.75 9.13071 0.630712 10.25 -0.75 10.25C0.630712 10.25 1.75 11.3693 1.75 12.75V15.25C1.75 17.4591 3.54086 19.25 5.75 19.25' />
diff --git a/apps/sim/components/emcn/icons/type-number.tsx b/apps/sim/components/emcn/icons/type-number.tsx
index 706c874678e..cb192038559 100644
--- a/apps/sim/components/emcn/icons/type-number.tsx
+++ b/apps/sim/components/emcn/icons/type-number.tsx
@@ -16,6 +16,7 @@ export function TypeNumber(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.25 7.25H17.75' />
diff --git a/apps/sim/components/emcn/icons/type-text.tsx b/apps/sim/components/emcn/icons/type-text.tsx
index 4d81dfcc0db..65e53fc03c1 100644
--- a/apps/sim/components/emcn/icons/type-text.tsx
+++ b/apps/sim/components/emcn/icons/type-text.tsx
@@ -16,6 +16,7 @@ export function TypeText(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3.25 2.25H17.25' />
diff --git a/apps/sim/components/emcn/icons/undo.tsx b/apps/sim/components/emcn/icons/undo.tsx
index 3e0f4fe622a..a2352d0ee86 100644
--- a/apps/sim/components/emcn/icons/undo.tsx
+++ b/apps/sim/components/emcn/icons/undo.tsx
@@ -12,6 +12,7 @@ export function Undo(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path
diff --git a/apps/sim/components/emcn/icons/unlock.tsx b/apps/sim/components/emcn/icons/unlock.tsx
index 0c6e42beb27..09af49b9361 100644
--- a/apps/sim/components/emcn/icons/unlock.tsx
+++ b/apps/sim/components/emcn/icons/unlock.tsx
@@ -16,6 +16,7 @@ export function Unlock(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <rect x='2.75' y='8.75' width='15' height='10' rx='2' />
diff --git a/apps/sim/components/emcn/icons/upload.tsx b/apps/sim/components/emcn/icons/upload.tsx
index 444cf7a383c..626d6ad8b89 100644
--- a/apps/sim/components/emcn/icons/upload.tsx
+++ b/apps/sim/components/emcn/icons/upload.tsx
@@ -16,6 +16,7 @@ export function Upload(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M10.25 14V3.5' />
diff --git a/apps/sim/components/emcn/icons/user-plus.tsx b/apps/sim/components/emcn/icons/user-plus.tsx
index ab55c2af803..c551815c8df 100644
--- a/apps/sim/components/emcn/icons/user-plus.tsx
+++ b/apps/sim/components/emcn/icons/user-plus.tsx
@@ -16,6 +16,7 @@ export function UserPlus(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2' />
diff --git a/apps/sim/components/emcn/icons/user.tsx b/apps/sim/components/emcn/icons/user.tsx
index 57cb2eb1f9a..94767907604 100644
--- a/apps/sim/components/emcn/icons/user.tsx
+++ b/apps/sim/components/emcn/icons/user.tsx
@@ -16,6 +16,7 @@ export function User(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='10.25' cy='6.25' r='4' />
diff --git a/apps/sim/components/emcn/icons/users.tsx b/apps/sim/components/emcn/icons/users.tsx
index 29e19dfff19..8f3f9545fd8 100644
--- a/apps/sim/components/emcn/icons/users.tsx
+++ b/apps/sim/components/emcn/icons/users.tsx
@@ -16,6 +16,7 @@ export function Users(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='8.25' cy='5.75' r='3.5' />
diff --git a/apps/sim/components/emcn/icons/workflow-x.tsx b/apps/sim/components/emcn/icons/workflow-x.tsx
index 9ae1f4c4707..354b046a34b 100644
--- a/apps/sim/components/emcn/icons/workflow-x.tsx
+++ b/apps/sim/components/emcn/icons/workflow-x.tsx
@@ -16,6 +16,7 @@ export function WorkflowX(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle cx='10.25' cy='3.5' r='2.75' />
diff --git a/apps/sim/components/emcn/icons/wrap.tsx b/apps/sim/components/emcn/icons/wrap.tsx
index 0814f0e4f82..b36a4555592 100644
--- a/apps/sim/components/emcn/icons/wrap.tsx
+++ b/apps/sim/components/emcn/icons/wrap.tsx
@@ -16,6 +16,7 @@ export function Wrap(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M3 6h18' />
diff --git a/apps/sim/components/emcn/icons/wrench.tsx b/apps/sim/components/emcn/icons/wrench.tsx
index 5b2a7dfbb2c..3eae7c8162e 100644
--- a/apps/sim/components/emcn/icons/wrench.tsx
+++ b/apps/sim/components/emcn/icons/wrench.tsx
@@ -16,6 +16,7 @@ export function Wrench(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M15.09 1.41C13.78 0.74 12.25 0.63 10.85 1.11C9.45 1.59 8.3 2.62 7.68 3.96C7.06 5.3 7.02 6.84 7.57 8.2L1.25 14.52C0.86 14.91 0.86 15.54 1.25 15.93L3.57 18.25C3.96 18.64 4.59 18.64 4.98 18.25L11.3 11.93C12.66 12.48 14.2 12.44 15.54 11.82C16.88 11.2 17.91 10.05 18.39 8.65C18.87 7.25 18.76 5.72 18.09 4.41L14.87 7.63L12.25 7.25L11.87 4.63L15.09 1.41Z' />
diff --git a/apps/sim/components/emcn/icons/x.tsx b/apps/sim/components/emcn/icons/x.tsx
index abc16a198b0..d5bc45a5bab 100644
--- a/apps/sim/components/emcn/icons/x.tsx
+++ b/apps/sim/components/emcn/icons/x.tsx
@@ -16,6 +16,7 @@ export function X(props: SVGProps<SVGSVGElement>) {
       strokeLinecap='round'
       strokeLinejoin='round'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <path d='M15.25 4.75L4.75 15.25' />
diff --git a/apps/sim/components/emcn/icons/zoom-in.tsx b/apps/sim/components/emcn/icons/zoom-in.tsx
index 12561e39c82..50e7240ee52 100644
--- a/apps/sim/components/emcn/icons/zoom-in.tsx
+++ b/apps/sim/components/emcn/icons/zoom-in.tsx
@@ -12,6 +12,7 @@ export function ZoomIn(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle
diff --git a/apps/sim/components/emcn/icons/zoom-out.tsx b/apps/sim/components/emcn/icons/zoom-out.tsx
index aca3a248269..45dcdcb266b 100644
--- a/apps/sim/components/emcn/icons/zoom-out.tsx
+++ b/apps/sim/components/emcn/icons/zoom-out.tsx
@@ -12,6 +12,7 @@ export function ZoomOut(props: SVGProps<SVGSVGElement>) {
       viewBox='0 0 12 12'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
+      aria-hidden='true'
       {...props}
     >
       <circle
diff --git a/apps/sim/components/ui/button.tsx b/apps/sim/components/ui/button.tsx
index 735d5d909e4..a5606a7cb06 100644
--- a/apps/sim/components/ui/button.tsx
+++ b/apps/sim/components/ui/button.tsx
@@ -8,12 +8,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
-        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
-        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'text-primary underline-offset-4 hover:underline',
+        default: 'bg-primary text-primary-foreground hover-hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground hover-hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover-hover:bg-accent hover-hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover-hover:bg-secondary/80',
+        ghost: 'hover-hover:bg-accent hover-hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover-hover:underline',
       },
       size: {
         default: 'h-10 px-4 py-2',
diff --git a/apps/sim/components/ui/select.tsx b/apps/sim/components/ui/select.tsx
index bf6e2ece629..22c1b1c0955 100644
--- a/apps/sim/components/ui/select.tsx
+++ b/apps/sim/components/ui/select.tsx
@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      'flex h-10 w-full items-center justify-between rounded-[8px] border border-input bg-input-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+      'flex h-10 w-full items-center justify-between rounded-lg border border-input bg-input-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
       className
     )}
     {...props}
@@ -43,7 +43,7 @@ const SelectScrollUpButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronUp className='h-4 w-4 opacity-70 transition-opacity hover:opacity-100' />
+    <ChevronUp className='h-4 w-4 opacity-70 transition-opacity hover-hover:opacity-100' />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -60,7 +60,7 @@ const SelectScrollDownButton = React.forwardRef<
     )}
     {...props}
   >
-    <ChevronDown className='h-4 w-4 opacity-70 transition-opacity hover:opacity-100' />
+    <ChevronDown className='h-4 w-4 opacity-70 transition-opacity hover-hover:opacity-100' />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName
diff --git a/apps/sim/ee/access-control/components/access-control.tsx b/apps/sim/ee/access-control/components/access-control.tsx
index f91ceaff1d7..fcc9a4b76d4 100644
--- a/apps/sim/ee/access-control/components/access-control.tsx
+++ b/apps/sim/ee/access-control/components/access-control.tsx
@@ -122,21 +122,21 @@ function AddMembersModal({
     >
       <ModalContent size='sm'>
         <ModalHeader>Add Members</ModalHeader>
-        <ModalBody className='!pb-[16px]'>
+        <ModalBody className='!pb-4'>
           {availableMembers.length === 0 ? (
-            <p className='text-[14px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-sm'>
               All organization members are already in this group.
             </p>
           ) : (
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex items-center gap-[8px]'>
-                <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+            <div className='flex flex-col gap-3'>
+              <div className='flex items-center gap-2'>
+                <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                   <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                   <BaseInput
                     placeholder='Search members...'
                     value={searchTerm}
                     onChange={(e) => setSearchTerm(e.target.value)}
-                    className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                    className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                   />
                 </div>
                 <Button variant='primary' onClick={handleToggleAll}>
@@ -146,7 +146,7 @@ function AddMembersModal({
 
               <div className='max-h-[280px] overflow-y-auto'>
                 {filteredMembers.length === 0 ? (
-                  <p className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+                  <p className='py-4 text-center text-[var(--text-muted)] text-sm'>
                     No members found matching "{searchTerm}"
                   </p>
                 ) : (
@@ -162,7 +162,7 @@ function AddMembersModal({
                           key={member.userId}
                           type='button'
                           onClick={() => handleToggleMember(member.userId)}
-                          className='flex items-center gap-[10px] rounded-[4px] px-[8px] py-[6px] hover:bg-[var(--surface-2)]'
+                          className='flex items-center gap-2.5 rounded-sm px-2 py-1.5 hover:bg-[var(--surface-2)]'
                         >
                           <Checkbox checked={isSelected} />
                           <Avatar size='sm'>
@@ -171,18 +171,16 @@ function AddMembersModal({
                             )}
                             <AvatarFallback
                               style={{ background: getUserColor(member.userId || email) }}
-                              className='border-0 text-[10px] text-white'
+                              className='border-0 text-micro text-white'
                             >
                               {avatarInitial}
                             </AvatarFallback>
                           </Avatar>
                           <div className='min-w-0 flex-1 text-left'>
-                            <div className='truncate text-[14px] text-[var(--text-primary)]'>
+                            <div className='truncate text-[var(--text-primary)] text-sm'>
                               {name}
                             </div>
-                            <div className='truncate text-[11px] text-[var(--text-muted)]'>
-                              {email}
-                            </div>
+                            <div className='truncate text-[var(--text-muted)] text-xs'>{email}</div>
                           </div>
                         </button>
                       )
@@ -218,18 +216,18 @@ function AddMembersModal({
 
 function AccessControlSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
-      <div className='flex flex-col gap-[8px]'>
+    <div className='flex h-full flex-col gap-4.5'>
+      <div className='flex flex-col gap-2'>
         <Skeleton className='h-[14px] w-[100px]' />
         <div className='flex items-center justify-between'>
-          <div className='flex items-center gap-[12px]'>
-            <Skeleton className='h-9 w-9 rounded-[6px]' />
-            <div className='flex flex-col gap-[4px]'>
+          <div className='flex items-center gap-3'>
+            <Skeleton className='h-9 w-9 rounded-md' />
+            <div className='flex flex-col gap-1'>
               <Skeleton className='h-[14px] w-[120px]' />
               <Skeleton className='h-[12px] w-[80px]' />
             </div>
           </div>
-          <Skeleton className='h-[32px] w-[60px] rounded-[6px]' />
+          <Skeleton className='h-[32px] w-[60px] rounded-md' />
         </div>
       </div>
     </div>
@@ -688,10 +686,10 @@ export function AccessControl() {
   if (viewingGroup) {
     return (
       <>
-        <div className='flex h-full flex-col gap-[18px]'>
-          <div className='flex flex-col gap-[4px]'>
+        <div className='flex h-full flex-col gap-4.5'>
+          <div className='flex flex-col gap-1'>
             <div className='flex items-center justify-between'>
-              <h3 className='font-medium text-[15px] text-[var(--text-primary)]'>
+              <h3 className='font-medium text-[var(--text-primary)] text-base'>
                 {viewingGroup.name}
               </h3>
               <Button variant='default' onClick={handleOpenConfigModal}>
@@ -699,16 +697,16 @@ export function AccessControl() {
               </Button>
             </div>
             {viewingGroup.description && (
-              <p className='text-[14px] text-[var(--text-muted)]'>{viewingGroup.description}</p>
+              <p className='text-[var(--text-muted)] text-sm'>{viewingGroup.description}</p>
             )}
           </div>
 
           <div className='flex items-center justify-between'>
-            <div className='flex flex-col gap-[2px]'>
-              <span className='font-medium text-[14px] text-[var(--text-primary)]'>
+            <div className='flex flex-col gap-0.5'>
+              <span className='font-medium text-[var(--text-primary)] text-sm'>
                 Auto-add new members
               </span>
-              <span className='text-[13px] text-[var(--text-muted)]'>
+              <span className='text-[var(--text-muted)] text-small'>
                 Automatically add new organization members to this group
               </span>
             </div>
@@ -720,24 +718,22 @@ export function AccessControl() {
           </div>
 
           <div className='min-h-0 flex-1 overflow-y-auto'>
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <div className='flex items-center justify-between'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Members
-                </span>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>Members</span>
                 <Button variant='primary' onClick={handleOpenAddMembersModal}>
-                  <Plus className='mr-[6px] h-[13px] w-[13px]' />
+                  <Plus className='mr-1.5 h-[13px] w-[13px]' />
                   Add
                 </Button>
               </div>
 
               {membersLoading ? (
-                <div className='flex flex-col gap-[18px]'>
+                <div className='flex flex-col gap-4.5'>
                   {[1, 2].map((i) => (
                     <div key={i} className='flex items-center justify-between'>
-                      <div className='flex items-center gap-[12px]'>
+                      <div className='flex items-center gap-3'>
                         <Skeleton className='h-8 w-8 rounded-full' />
-                        <div className='flex flex-col gap-[4px]'>
+                        <div className='flex flex-col gap-1'>
                           <Skeleton className='h-[14px] w-[100px]' />
                           <Skeleton className='h-[12px] w-[150px]' />
                         </div>
@@ -746,18 +742,18 @@ export function AccessControl() {
                   ))}
                 </div>
               ) : members.length === 0 ? (
-                <p className='text-[14px] text-[var(--text-muted)]'>
+                <p className='text-[var(--text-muted)] text-sm'>
                   No members yet. Click "Add" to get started.
                 </p>
               ) : (
-                <div className='flex flex-col gap-[18px]'>
+                <div className='flex flex-col gap-4.5'>
                   {members.map((member) => {
                     const name = member.userName || 'Unknown'
                     const avatarInitial = name.charAt(0).toUpperCase()
 
                     return (
                       <div key={member.id} className='flex items-center justify-between'>
-                        <div className='flex flex-1 items-center gap-[12px]'>
+                        <div className='flex flex-1 items-center gap-3'>
                           <Avatar size='md'>
                             {member.userImage && <AvatarImage src={member.userImage} alt={name} />}
                             <AvatarFallback
@@ -771,12 +767,12 @@ export function AccessControl() {
                           </Avatar>
 
                           <div className='min-w-0'>
-                            <div className='flex items-center gap-[8px]'>
-                              <span className='truncate font-medium text-[15px] text-[var(--text-primary)]'>
+                            <div className='flex items-center gap-2'>
+                              <span className='truncate font-medium text-[var(--text-primary)] text-base'>
                                 {name}
                               </span>
                             </div>
-                            <div className='truncate text-[13px] text-[var(--text-muted)]'>
+                            <div className='truncate text-[var(--text-muted)] text-small'>
                               {member.userEmail}
                             </div>
                           </div>
@@ -831,15 +827,15 @@ export function AccessControl() {
 
               <ModalTabsContent value='providers'>
                 <ModalBody className='h-[400px]'>
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='flex items-center gap-[8px]'>
-                      <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                         <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                         <BaseInput
                           placeholder='Search providers...'
                           value={providerSearchTerm}
                           onChange={(e) => setProviderSearchTerm(e.target.value)}
-                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                         />
                       </div>
                       <Button
@@ -859,14 +855,14 @@ export function AccessControl() {
                           : 'Select All'}
                       </Button>
                     </div>
-                    <div className='grid max-h-[340px] grid-cols-3 gap-[8px] overflow-y-auto'>
+                    <div className='grid max-h-[340px] grid-cols-3 gap-2 overflow-y-auto'>
                       {filteredProviders.map((providerId) => {
                         const ProviderIcon = PROVIDER_DEFINITIONS[providerId]?.icon
                         const providerName =
                           PROVIDER_DEFINITIONS[providerId]?.name ||
                           providerId.replace(/-/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())
                         return (
-                          <div key={providerId} className='flex items-center gap-[8px]'>
+                          <div key={providerId} className='flex items-center gap-2'>
                             <Checkbox
                               checked={isProviderAllowed(providerId)}
                               onCheckedChange={() => toggleProvider(providerId)}
@@ -874,7 +870,7 @@ export function AccessControl() {
                             <div className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center'>
                               {ProviderIcon && <ProviderIcon className='!h-[16px] !w-[16px]' />}
                             </div>
-                            <span className='truncate font-medium text-[14px]'>{providerName}</span>
+                            <span className='truncate font-medium text-sm'>{providerName}</span>
                           </div>
                         )
                       })}
@@ -885,15 +881,15 @@ export function AccessControl() {
 
               <ModalTabsContent value='blocks'>
                 <ModalBody className='h-[400px]'>
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='flex items-center gap-[8px]'>
-                      <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                         <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                         <BaseInput
                           placeholder='Search blocks...'
                           value={integrationSearchTerm}
                           onChange={(e) => setIntegrationSearchTerm(e.target.value)}
-                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                         />
                       </div>
                       <Button
@@ -918,24 +914,24 @@ export function AccessControl() {
                           : 'Select All'}
                       </Button>
                     </div>
-                    <div className='grid max-h-[340px] grid-cols-3 gap-[8px] overflow-y-auto'>
+                    <div className='grid max-h-[340px] grid-cols-3 gap-2 overflow-y-auto'>
                       {filteredBlocks.map((block) => {
                         const BlockIcon = block.icon
                         return (
-                          <div key={block.type} className='flex items-center gap-[8px]'>
+                          <div key={block.type} className='flex items-center gap-2'>
                             <Checkbox
                               checked={isIntegrationAllowed(block.type)}
                               onCheckedChange={() => toggleIntegration(block.type)}
                             />
                             <div
-                              className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-[4px]'
+                              className='relative flex h-[16px] w-[16px] flex-shrink-0 items-center justify-center overflow-hidden rounded-sm'
                               style={{ background: block.bgColor }}
                             >
                               {BlockIcon && (
                                 <BlockIcon className='!h-[10px] !w-[10px] text-white' />
                               )}
                             </div>
-                            <span className='truncate font-medium text-[14px]'>{block.name}</span>
+                            <span className='truncate font-medium text-sm'>{block.name}</span>
                           </div>
                         )
                       })}
@@ -946,15 +942,15 @@ export function AccessControl() {
 
               <ModalTabsContent value='platform'>
                 <ModalBody className='h-[400px]'>
-                  <div className='flex flex-col gap-[8px]'>
-                    <div className='flex items-center gap-[8px]'>
-                      <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px]'>
+                  <div className='flex flex-col gap-2'>
+                    <div className='flex items-center gap-2'>
+                      <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px]'>
                         <Search className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]' />
                         <BaseInput
                           placeholder='Search features...'
                           value={platformSearchTerm}
                           onChange={(e) => setPlatformSearchTerm(e.target.value)}
-                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-[14px] leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
+                          className='h-auto flex-1 border-0 bg-transparent p-0 font-base text-sm leading-none placeholder:text-[var(--text-tertiary)] focus-visible:ring-0 focus-visible:ring-offset-0'
                         />
                       </div>
                       <Button
@@ -1028,15 +1024,15 @@ export function AccessControl() {
                           : 'Select All'}
                       </Button>
                     </div>
-                    <div className='grid max-h-[340px] grid-cols-3 gap-x-[24px] gap-y-[16px] overflow-y-auto'>
+                    <div className='grid max-h-[340px] grid-cols-3 gap-x-6 gap-y-4 overflow-y-auto'>
                       {Object.entries(platformCategories).map(([category, features]) => (
-                        <div key={category} className='flex flex-col gap-[8px]'>
-                          <span className='font-medium text-[11px] text-[var(--text-tertiary)] uppercase tracking-wide'>
+                        <div key={category} className='flex flex-col gap-2'>
+                          <span className='font-medium text-[var(--text-tertiary)] text-xs uppercase tracking-wide'>
                             {category}
                           </span>
-                          <div className='flex flex-col gap-[8px]'>
+                          <div className='flex flex-col gap-2'>
                             {features.map((feature) => (
-                              <div key={feature.id} className='flex items-center gap-[8px]'>
+                              <div key={feature.id} className='flex items-center gap-2'>
                                 <Checkbox
                                   id={feature.id}
                                   checked={!editingConfig?.[feature.configKey]}
@@ -1050,7 +1046,7 @@ export function AccessControl() {
                                 />
                                 <Label
                                   htmlFor={feature.id}
-                                  className='cursor-pointer font-normal text-[14px]'
+                                  className='cursor-pointer font-normal text-sm'
                                 >
                                   {feature.label}
                                 </Label>
@@ -1142,9 +1138,9 @@ export function AccessControl() {
 
   return (
     <>
-      <div className='flex h-full flex-col gap-[18px]'>
-        <div className='flex items-center gap-[8px]'>
-          <div className='flex flex-1 items-center gap-[8px] rounded-[8px] border border-[var(--border)] bg-transparent px-[8px] py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
+      <div className='flex h-full flex-col gap-4.5'>
+        <div className='flex items-center gap-2'>
+          <div className='flex flex-1 items-center gap-2 rounded-lg border border-[var(--border)] bg-transparent px-2 py-[5px] transition-colors duration-100 dark:bg-[var(--surface-4)] dark:hover:border-[var(--border-1)] dark:hover:bg-[var(--surface-5)]'>
             <Search
               className='h-[14px] w-[14px] flex-shrink-0 text-[var(--text-tertiary)]'
               strokeWidth={2}
@@ -1157,38 +1153,38 @@ export function AccessControl() {
             />
           </div>
           <Button variant='primary' onClick={() => setShowCreateModal(true)}>
-            <Plus className='mr-[6px] h-[13px] w-[13px]' />
+            <Plus className='mr-1.5 h-[13px] w-[13px]' />
             Create
           </Button>
         </div>
 
         <div className='relative min-h-0 flex-1 overflow-y-auto'>
           {filteredGroups.length === 0 && searchTerm.trim() ? (
-            <div className='py-[16px] text-center text-[14px] text-[var(--text-muted)]'>
+            <div className='py-4 text-center text-[var(--text-muted)] text-sm'>
               No results found matching "{searchTerm}"
             </div>
           ) : permissionGroups.length === 0 ? (
-            <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+            <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
               Click "Create" above to get started
             </div>
           ) : (
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               {filteredGroups.map((group) => (
                 <div key={group.id} className='flex items-center justify-between'>
                   <div className='flex flex-col'>
-                    <div className='flex items-center gap-[8px]'>
-                      <span className='font-medium text-[15px]'>{group.name}</span>
+                    <div className='flex items-center gap-2'>
+                      <span className='font-medium text-base'>{group.name}</span>
                       {group.autoAddNewMembers && (
-                        <span className='rounded-[4px] bg-[var(--surface-3)] px-[6px] py-[2px] text-[10px] text-[var(--text-muted)]'>
+                        <span className='rounded-sm bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
                           Auto-enrolls
                         </span>
                       )}
                     </div>
-                    <span className='text-[14px] text-[var(--text-muted)]'>
+                    <span className='text-[var(--text-muted)] text-sm'>
                       {group.memberCount} member{group.memberCount !== 1 ? 's' : ''}
                     </span>
                   </div>
-                  <div className='flex flex-shrink-0 items-center gap-[8px]'>
+                  <div className='flex flex-shrink-0 items-center gap-2'>
                     <Button variant='default' onClick={() => setViewingGroup(group)}>
                       Details
                     </Button>
@@ -1211,8 +1207,8 @@ export function AccessControl() {
         <ModalContent size='sm'>
           <ModalHeader>Create Permission Group</ModalHeader>
           <ModalBody>
-            <div className='flex flex-col gap-[12px]'>
-              <div className='flex flex-col gap-[4px]'>
+            <div className='flex flex-col gap-3'>
+              <div className='flex flex-col gap-1'>
                 <Label>Name</Label>
                 <Input
                   value={newGroupName}
@@ -1223,7 +1219,7 @@ export function AccessControl() {
                   placeholder='e.g., Marketing Team'
                 />
               </div>
-              <div className='flex flex-col gap-[4px]'>
+              <div className='flex flex-col gap-1'>
                 <Label>Description (optional)</Label>
                 <Input
                   value={newGroupDescription}
@@ -1231,7 +1227,7 @@ export function AccessControl() {
                   placeholder='e.g., Limited access for marketing users'
                 />
               </div>
-              <div className='flex items-center gap-[8px]'>
+              <div className='flex items-center gap-2'>
                 <Checkbox
                   id='auto-add-members'
                   checked={newGroupAutoAdd}
@@ -1241,7 +1237,7 @@ export function AccessControl() {
                   Auto-add new organization members
                 </Label>
               </div>
-              {createError && <p className='text-[13px] text-[var(--text-error)]'>{createError}</p>}
+              {createError && <p className='text-[var(--text-error)] text-small'>{createError}</p>}
             </div>
           </ModalBody>
           <ModalFooter>
diff --git a/apps/sim/ee/sso/components/sso-auth.tsx b/apps/sim/ee/sso/components/sso-auth.tsx
index 586b922f582..0caab5603d8 100644
--- a/apps/sim/ee/sso/components/sso-auth.tsx
+++ b/apps/sim/ee/sso/components/sso-auth.tsx
@@ -97,18 +97,18 @@ export default function SSOAuth({ identifier }: SSOAuthProps) {
 
   return (
     <AuthBackground className='dark font-[430] font-season'>
-      <main className='relative flex min-h-screen flex-col text-[#ECECEC]'>
-        <header className='shrink-0 bg-[#1C1C1C]'>
+      <main className='relative flex min-h-screen flex-col text-[var(--text-primary)]'>
+        <header className='shrink-0 bg-[var(--landing-bg)]'>
           <Navbar logoOnly />
         </header>
         <div className='relative z-30 flex flex-1 items-center justify-center px-4 pb-24'>
           <div className='w-full max-w-lg px-4'>
             <div className='flex flex-col items-center justify-center'>
               <div className='space-y-1 text-center'>
-                <h1 className='font-[500] text-[#ECECEC] text-[32px] tracking-tight'>
+                <h1 className='font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'>
                   SSO Authentication
                 </h1>
-                <p className='font-[380] text-[#999] text-[16px]'>
+                <p className='font-[380] text-[var(--text-subtle)] text-md'>
                   This chat requires SSO authentication
                 </p>
               </div>
diff --git a/apps/sim/ee/sso/components/sso-form.tsx b/apps/sim/ee/sso/components/sso-form.tsx
index 8e8ee3e0be3..2de8b07e9b0 100644
--- a/apps/sim/ee/sso/components/sso-form.tsx
+++ b/apps/sim/ee/sso/components/sso-form.tsx
@@ -134,8 +134,12 @@ export default function SSOForm() {
   return (
     <>
       <div className='space-y-1 text-center'>
-        <h1 className={'font-[500] text-[#ECECEC] text-[32px] tracking-tight'}>Sign in with SSO</h1>
-        <p className={'font-[380] text-[#999] text-[16px]'}>Enter your work email to continue</p>
+        <h1 className={'font-[500] text-[32px] text-[var(--text-primary)] tracking-tight'}>
+          Sign in with SSO
+        </h1>
+        <p className={'font-[380] text-[var(--text-subtle)] text-md'}>
+          Enter your work email to continue
+        </p>
       </div>
 
       <form onSubmit={onSubmit} className={'mt-8 space-y-8'}>
@@ -186,10 +190,12 @@ export default function SSOForm() {
         <>
           <div className='relative my-6 font-light'>
             <div className='absolute inset-0 flex items-center'>
-              <div className='w-full border-[#2A2A2A] border-t' />
+              <div className='w-full border-[var(--border)] border-t' />
             </div>
             <div className='relative flex justify-center text-sm'>
-              <span className='bg-[#1C1C1C] px-4 font-[340] text-[#999]'>Or</span>
+              <span className='bg-[var(--text-primary)] px-4 font-[340] text-[var(--text-subtle)]'>
+                Or
+              </span>
             </div>
           </div>
 
@@ -207,24 +213,24 @@ export default function SSOForm() {
 
       {/* Only show signup link if email/password signup is enabled */}
       {!isFalsy(env.NEXT_PUBLIC_EMAIL_PASSWORD_SIGNUP_ENABLED) && (
-        <div className='pt-6 text-center font-light text-[15px]'>
+        <div className='pt-6 text-center font-light text-base'>
           <span className='font-normal'>Don't have an account? </span>
           <Link
             href={`/signup${callbackUrl ? `?callbackUrl=${encodeURIComponent(callbackUrl)}` : ''}`}
-            className='font-medium text-[#ECECEC] underline-offset-4 transition hover:text-white hover:underline'
+            className='font-medium text-[var(--text-primary)] underline-offset-4 transition hover:text-white hover:underline'
           >
             Sign up
           </Link>
         </div>
       )}
 
-      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[#999] text-[14px] leading-relaxed sm:px-8 md:px-[44px]'>
+      <div className='absolute right-0 bottom-0 left-0 px-8 pb-8 text-center font-[340] text-[var(--text-subtle)] text-sm leading-relaxed sm:px-8 md:px-[44px]'>
         By signing in, you agree to our{' '}
         <Link
           href='/terms'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--text-primary)] hover:underline'
         >
           Terms of Service
         </Link>{' '}
@@ -233,7 +239,7 @@ export default function SSOForm() {
           href='/privacy'
           target='_blank'
           rel='noopener noreferrer'
-          className='text-[#999] underline-offset-4 transition hover:text-[#ECECEC] hover:underline'
+          className='text-[var(--text-subtle)] underline-offset-4 transition hover:text-[var(--text-primary)] hover:underline'
         >
           Privacy Policy
         </Link>
diff --git a/apps/sim/ee/sso/components/sso-settings.tsx b/apps/sim/ee/sso/components/sso-settings.tsx
index abb7f120d6f..2f8ae92da01 100644
--- a/apps/sim/ee/sso/components/sso-settings.tsx
+++ b/apps/sim/ee/sso/components/sso-settings.tsx
@@ -96,7 +96,7 @@ export function SSO() {
   if (isBillingEnabled) {
     if (!activeOrganization) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           You must be part of an organization to configure Single Sign-On.
         </div>
       )
@@ -104,7 +104,7 @@ export function SSO() {
 
     if (!hasEnterprisePlan) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           Single Sign-On is available on Enterprise plans only.
         </div>
       )
@@ -112,7 +112,7 @@ export function SSO() {
 
     if (!canManageSSO) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           Only organization owners and admins can configure Single Sign-On settings.
         </div>
       )
@@ -120,7 +120,7 @@ export function SSO() {
   } else {
     if (!isLoadingProviders && isSSOProviderOwner === false && providers.length > 0) {
       return (
-        <div className='flex h-full items-center justify-center text-[14px] text-[var(--text-muted)]'>
+        <div className='flex h-full items-center justify-center text-[var(--text-muted)] text-sm'>
           Only the user who configured SSO can manage these settings.
         </div>
       )
@@ -378,54 +378,48 @@ export function SSO() {
     const providerCallbackUrl = `${getBaseUrl()}/api/auth/sso/callback/${existingProvider.providerId}`
 
     return (
-      <div className='flex h-full flex-col gap-[18px]'>
+      <div className='flex h-full flex-col gap-4.5'>
         {/* Scrollable Content */}
         <div className='min-h-0 flex-1 overflow-y-auto'>
-          <div className='flex flex-col gap-[18px]'>
+          <div className='flex flex-col gap-4.5'>
             {/* Provider Info */}
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Provider ID
-              </span>
-              <p className='text-[15px] text-[var(--text-primary)]'>
-                {existingProvider.providerId}
-              </p>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Provider ID</span>
+              <p className='text-[var(--text-primary)] text-base'>{existingProvider.providerId}</p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>
                 Provider Type
               </span>
-              <p className='text-[15px] text-[var(--text-primary)]'>
+              <p className='text-[var(--text-primary)] text-base'>
                 {existingProvider.providerType.toUpperCase()}
               </p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Domain</span>
-              <p className='text-[15px] text-[var(--text-primary)]'>{existingProvider.domain}</p>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Domain</span>
+              <p className='text-[var(--text-primary)] text-base'>{existingProvider.domain}</p>
             </div>
 
-            <div className='flex flex-col gap-[8px]'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Issuer URL
-              </span>
-              <p className='break-all font-mono text-[14px] text-[var(--text-primary)]'>
+            <div className='flex flex-col gap-2'>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Issuer URL</span>
+              <p className='break-all font-mono text-[var(--text-primary)] text-sm'>
                 {existingProvider.issuer}
               </p>
             </div>
 
             {/* Callback URL */}
-            <div className='flex flex-col gap-[8px]'>
+            <div className='flex flex-col gap-2'>
               <div className='flex items-center justify-between'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Callback URL
                 </span>
                 <Button
                   type='button'
                   variant='ghost'
                   onClick={() => copyToClipboard(providerCallbackUrl)}
-                  className='h-[22px] w-[22px] rounded-[4px] p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='h-[22px] w-[22px] rounded-sm p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
                 >
                   {copied ? (
                     <Check className='h-[13px] w-[13px]' />
@@ -436,7 +430,7 @@ export function SSO() {
                 </Button>
               </div>
               <Input value={providerCallbackUrl} readOnly className='h-9' />
-              <p className='text-[14px] text-[var(--text-muted)]'>
+              <p className='text-[var(--text-muted)] text-sm'>
                 Configure this in your identity provider
               </p>
             </div>
@@ -454,7 +448,7 @@ export function SSO() {
   }
 
   return (
-    <form onSubmit={handleSubmit} autoComplete='off' className='flex h-full flex-col gap-[18px]'>
+    <form onSubmit={handleSubmit} autoComplete='off' className='flex h-full flex-col gap-4.5'>
       {/* Hidden dummy inputs to prevent browser password manager autofill */}
       <input
         type='text'
@@ -484,12 +478,10 @@ export function SSO() {
 
       {/* Scrollable Content */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[18px]'>
+        <div className='flex flex-col gap-4.5'>
           {/* Provider Type Selection */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Provider Type
-            </span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Provider Type</span>
             <Combobox
               value={formData.providerType}
               onChange={(value: string) =>
@@ -503,7 +495,7 @@ export function SSO() {
               editable={false}
               className='h-9'
             />
-            <p className='text-[14px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-sm'>
               {formData.providerType === 'oidc'
                 ? 'OpenID Connect (Okta, Azure AD, Auth0, etc.)'
                 : 'Security Assertion Markup Language (ADFS, Shibboleth, etc.)'}
@@ -511,10 +503,8 @@ export function SSO() {
           </div>
 
           {/* Provider ID */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-              Provider ID
-            </span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Provider ID</span>
             <Combobox
               value={formData.providerId}
               onChange={(value: string) => handleInputChange('providerId', value)}
@@ -532,15 +522,15 @@ export function SSO() {
               )}
             />
             {showErrors && errors.providerId.length > 0 && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {errors.providerId.join(' ')}
               </p>
             )}
           </div>
 
           {/* Issuer URL */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Issuer URL</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Issuer URL</span>
             <Input
               type='url'
               placeholder='https://your-identity-provider.com/oauth2/default'
@@ -560,15 +550,15 @@ export function SSO() {
               )}
             />
             {showErrors && errors.issuerUrl.length > 0 && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {errors.issuerUrl.join(' ')}
               </p>
             )}
           </div>
 
           {/* Domain */}
-          <div className='flex flex-col gap-[8px]'>
-            <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Domain</span>
+          <div className='flex flex-col gap-2'>
+            <span className='font-medium text-[var(--text-secondary)] text-sm'>Domain</span>
             <Input
               type='text'
               placeholder='your-domain.identityprovider.com'
@@ -588,7 +578,7 @@ export function SSO() {
               )}
             />
             {showErrors && errors.domain.length > 0 && (
-              <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+              <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                 {errors.domain.join(' ')}
               </p>
             )}
@@ -597,10 +587,8 @@ export function SSO() {
           {/* Provider-specific fields */}
           {formData.providerType === 'oidc' ? (
             <>
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                  Client ID
-                </span>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>Client ID</span>
                 <Input
                   type='text'
                   placeholder='Enter Client ID'
@@ -620,14 +608,14 @@ export function SSO() {
                   )}
                 />
                 {showErrors && errors.clientId.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.clientId.join(' ')}
                   </p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Client Secret
                 </span>
                 <div className='relative'>
@@ -652,7 +640,7 @@ export function SSO() {
                         : undefined
                     }
                     className={cn(
-                      'h-9 pr-[36px]',
+                      'h-9 pr-9',
                       showErrors &&
                         errors.clientSecret.length > 0 &&
                         'border-[var(--text-error)] focus:border-[var(--text-error)]'
@@ -673,14 +661,14 @@ export function SSO() {
                   </Button>
                 </div>
                 {showErrors && errors.clientSecret.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.clientSecret.join(' ')}
                   </p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>Scopes</span>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>Scopes</span>
                 <Input
                   type='text'
                   placeholder='openid,profile,email'
@@ -697,19 +685,19 @@ export function SSO() {
                   )}
                 />
                 {showErrors && errors.scopes.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.scopes.join(' ')}
                   </p>
                 )}
-                <p className='text-[14px] text-[var(--text-muted)]'>
+                <p className='text-[var(--text-muted)] text-sm'>
                   Comma-separated list of OIDC scopes to request
                 </p>
               </div>
             </>
           ) : (
             <>
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Entry Point URL
                 </span>
                 <Input
@@ -728,14 +716,14 @@ export function SSO() {
                   )}
                 />
                 {showErrors && errors.entryPoint.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.entryPoint.join(' ')}
                   </p>
                 )}
               </div>
 
-              <div className='flex flex-col gap-[8px]'>
-                <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+              <div className='flex flex-col gap-2'>
+                <span className='font-medium text-[var(--text-secondary)] text-sm'>
                   Identity Provider Certificate
                 </span>
                 <Textarea
@@ -754,20 +742,20 @@ export function SSO() {
                   rows={3}
                 />
                 {showErrors && errors.cert.length > 0 && (
-                  <p className='text-[#DC2626] text-[11px] leading-tight dark:text-[#F87171]'>
+                  <p className='text-[var(--error)] text-xs leading-tight dark:text-[var(--error)]'>
                     {errors.cert.join(' ')}
                   </p>
                 )}
               </div>
 
               {/* Advanced SAML Options */}
-              <div className='flex flex-col gap-[8px]'>
+              <div className='flex flex-col gap-2'>
                 <button
                   type='button'
                   onClick={() =>
                     handleInputChange('showAdvanced', formData.showAdvanced ? 'false' : 'true')
                   }
-                  className='flex w-fit items-center gap-[6px] text-[14px] text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                  className='flex w-fit items-center gap-1.5 text-[var(--text-muted)] text-sm hover:text-[var(--text-primary)]'
                 >
                   <ChevronDown
                     className={cn(
@@ -779,9 +767,9 @@ export function SSO() {
                 </button>
 
                 {formData.showAdvanced && (
-                  <div className='flex flex-col gap-[18px] pt-[8px]'>
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                  <div className='flex flex-col gap-4.5 pt-2'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         Audience (Entity ID)
                       </span>
                       <Input
@@ -796,8 +784,8 @@ export function SSO() {
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         Callback URL Override
                       </span>
                       <Input
@@ -812,8 +800,8 @@ export function SSO() {
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         Require signed SAML assertions
                       </span>
                       <Switch
@@ -824,8 +812,8 @@ export function SSO() {
                       />
                     </div>
 
-                    <div className='flex flex-col gap-[8px]'>
-                      <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
+                    <div className='flex flex-col gap-2'>
+                      <span className='font-medium text-[var(--text-secondary)] text-sm'>
                         IDP Metadata XML
                       </span>
                       <Textarea
@@ -846,16 +834,14 @@ export function SSO() {
           )}
 
           {/* Callback URL display */}
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <div className='flex items-center justify-between'>
-              <span className='font-medium text-[14px] text-[var(--text-secondary)]'>
-                Callback URL
-              </span>
+              <span className='font-medium text-[var(--text-secondary)] text-sm'>Callback URL</span>
               <Button
                 type='button'
                 variant='ghost'
                 onClick={() => copyToClipboard(callbackUrl)}
-                className='h-[22px] w-[22px] rounded-[4px] p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
+                className='h-[22px] w-[22px] rounded-sm p-0 text-[var(--text-muted)] hover:text-[var(--text-primary)]'
               >
                 {copied ? (
                   <Check className='h-[13px] w-[13px]' />
@@ -866,7 +852,7 @@ export function SSO() {
               </Button>
             </div>
             <Input value={callbackUrl} readOnly className='h-9' />
-            <p className='text-[14px] text-[var(--text-muted)]'>
+            <p className='text-[var(--text-muted)] text-sm'>
               Configure this in your identity provider
             </p>
           </div>
@@ -874,8 +860,8 @@ export function SSO() {
       </div>
 
       {/* Footer */}
-      <div className='mt-auto flex items-center justify-end gap-[8px]'>
-        {error && <p className='mr-auto text-[13px] text-[var(--text-error)]'>{error}</p>}
+      <div className='mt-auto flex items-center justify-end gap-2'>
+        {error && <p className='mr-auto text-[var(--text-error)] text-small'>{error}</p>}
         <Button
           type='submit'
           variant='primary'
@@ -896,32 +882,32 @@ export function SSO() {
 
 function SsoSkeleton() {
   return (
-    <div className='flex h-full flex-col gap-[18px]'>
+    <div className='flex h-full flex-col gap-4.5'>
       {/* Form fields skeleton */}
       <div className='min-h-0 flex-1 overflow-y-auto'>
-        <div className='flex flex-col gap-[18px]'>
-          <div className='flex flex-col gap-[8px]'>
+        <div className='flex flex-col gap-4.5'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[80px]' />
             <Skeleton className='h-9 w-full' />
             <Skeleton className='h-[13px] w-[200px]' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[70px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[60px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[50px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[60px]' />
             <Skeleton className='h-9 w-full' />
           </div>
-          <div className='flex flex-col gap-[8px]'>
+          <div className='flex flex-col gap-2'>
             <Skeleton className='h-[13px] w-[80px]' />
             <Skeleton className='h-9 w-full' />
           </div>
diff --git a/apps/sim/lib/blog/code.tsx b/apps/sim/lib/blog/code.tsx
index fd405f7feee..b1bac0c4920 100644
--- a/apps/sim/lib/blog/code.tsx
+++ b/apps/sim/lib/blog/code.tsx
@@ -9,7 +9,7 @@ interface CodeBlockProps {
 
 export function CodeBlock({ code, language }: CodeBlockProps) {
   return (
-    <div className='dark w-full overflow-hidden rounded-md border border-[#2a2a2a] bg-[#1F1F1F] text-sm'>
+    <div className='dark w-full overflow-hidden rounded-md border border-[var(--landing-bg-elevated)] bg-[var(--code-bg)] text-sm'>
       <Code.Viewer
         code={code}
         showGutter
diff --git a/apps/sim/lib/blog/faq.tsx b/apps/sim/lib/blog/faq.tsx
index 4e6fa5c0fe0..5c92d4d640f 100644
--- a/apps/sim/lib/blog/faq.tsx
+++ b/apps/sim/lib/blog/faq.tsx
@@ -2,12 +2,12 @@ export function FAQ({ items }: { items: { q: string; a: string }[] }) {
   if (!items || items.length === 0) return null
   return (
     <section className='mt-12'>
-      <h2 className='mb-4 font-medium text-[#ECECEC] text-[24px]'>FAQ</h2>
+      <h2 className='mb-4 font-medium text-[24px] text-[var(--landing-text)]'>FAQ</h2>
       <div className='space-y-6'>
         {items.map((it, i) => (
           <div key={i}>
-            <h3 className='mb-2 font-medium text-[#ECECEC] text-[20px]'>{it.q}</h3>
-            <p className='text-[#999] text-[19px] leading-relaxed'>{it.a}</p>
+            <h3 className='mb-2 font-medium text-[20px] text-[var(--landing-text)]'>{it.q}</h3>
+            <p className='text-[19px] text-[var(--text-subtle)] leading-relaxed'>{it.a}</p>
           </div>
         ))}
       </div>
diff --git a/apps/sim/lib/blog/mdx.tsx b/apps/sim/lib/blog/mdx.tsx
index 67302696f58..53eee7d086b 100644
--- a/apps/sim/lib/blog/mdx.tsx
+++ b/apps/sim/lib/blog/mdx.tsx
@@ -20,7 +20,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <h2
       {...props}
       style={{ fontSize: '30px', marginTop: '3rem', marginBottom: '1.5rem' }}
-      className={clsx('font-medium text-[#ECECEC] leading-tight', className)}
+      className={clsx('font-medium text-[var(--landing-text)] leading-tight', className)}
     >
       {children}
     </h2>
@@ -29,7 +29,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <h3
       {...props}
       style={{ fontSize: '24px', marginTop: '1.5rem', marginBottom: '0.75rem' }}
-      className={clsx('font-medium text-[#ECECEC] leading-tight', className)}
+      className={clsx('font-medium text-[var(--landing-text)] leading-tight', className)}
     >
       {children}
     </h3>
@@ -38,7 +38,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <h4
       {...props}
       style={{ fontSize: '19px', marginTop: '1.5rem', marginBottom: '0.75rem' }}
-      className={clsx('font-medium text-[#ECECEC] leading-tight', className)}
+      className={clsx('font-medium text-[var(--landing-text)] leading-tight', className)}
     >
       {children}
     </h4>
@@ -47,14 +47,17 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     <p
       {...props}
       style={{ fontSize: '19px', marginBottom: '1.5rem', fontWeight: '400' }}
-      className={clsx('text-[#999] leading-relaxed', props.className)}
+      className={clsx('text-[var(--text-subtle)] leading-relaxed', props.className)}
     />
   ),
   ul: (props: any) => (
     <ul
       {...props}
       style={{ fontSize: '19px', marginBottom: '1rem', fontWeight: '400' }}
-      className={clsx('list-outside list-disc pl-6 text-[#999] leading-relaxed', props.className)}
+      className={clsx(
+        'list-outside list-disc pl-6 text-[var(--text-subtle)] leading-relaxed',
+        props.className
+      )}
     />
   ),
   ol: (props: any) => (
@@ -62,14 +65,17 @@ export const mdxComponents: MDXRemoteProps['components'] = {
       {...props}
       style={{ fontSize: '19px', marginBottom: '1rem', fontWeight: '400' }}
       className={clsx(
-        'list-outside list-decimal pl-6 text-[#999] leading-relaxed',
+        'list-outside list-decimal pl-6 text-[var(--text-subtle)] leading-relaxed',
         props.className
       )}
     />
   ),
   li: (props: any) => <li {...props} className={clsx('mb-1', props.className)} />,
   strong: (props: any) => (
-    <strong {...props} className={clsx('font-semibold text-[#ECECEC]', props.className)} />
+    <strong
+      {...props}
+      className={clsx('font-semibold text-[var(--landing-text)]', props.className)}
+    />
   ),
   em: (props: any) => <em {...props} className={clsx('text-[#bbb] italic', props.className)} />,
   a: (props: any) => {
@@ -80,7 +86,10 @@ export const mdxComponents: MDXRemoteProps['components'] = {
     return (
       <a
         {...props}
-        className={clsx('font-medium text-[#ECECEC] underline hover:text-white', props.className)}
+        className={clsx(
+          'font-medium text-[var(--landing-text)] underline hover:text-white',
+          props.className
+        )}
       />
     )
   },
@@ -90,7 +99,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
   hr: (props: any) => (
     <hr
       {...props}
-      className={clsx('my-8 border-[#2A2A2A]', props.className)}
+      className={clsx('my-8 border-[var(--landing-bg-elevated)]', props.className)}
       style={{ marginBottom: '1.5rem' }}
     />
   ),
@@ -134,7 +143,7 @@ export const mdxComponents: MDXRemoteProps['components'] = {
         <code
           {...props}
           className={clsx(
-            'rounded bg-[#2A2A2A] px-1.5 py-0.5 font-mono font-normal text-[#ECECEC] text-[0.9em]',
+            'rounded bg-[var(--surface-4)] px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-[var(--landing-text)]',
             props.className
           )}
           style={{ fontWeight: 400 }}
diff --git a/apps/sim/tailwind.config.ts b/apps/sim/tailwind.config.ts
index f12f246837f..bf22dfe4e77 100644
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -37,9 +37,15 @@ export default {
         ],
       },
       fontSize: {
+        micro: '10px',
         xs: '11px',
-        small: '13px', // Override default 14px to 13px
-        base: '15px', // Override default 16px to 15px
+        caption: '12px',
+        small: '13px',
+        base: '15px',
+        md: '16px',
+      },
+      spacing: {
+        '4.5': '18px',
       },
       colors: {
         background: 'hsl(var(--background))',
@@ -106,9 +112,19 @@ export default {
         semibold: 'var(--font-weight-semibold)',
       },
       borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
+        xs: '2px',
         sm: 'calc(var(--radius) - 4px)',
+        md: 'calc(var(--radius) - 2px)',
+        lg: 'var(--radius)',
+      },
+      boxShadow: {
+        subtle: 'var(--shadow-subtle)',
+        medium: 'var(--shadow-medium)',
+        overlay: 'var(--shadow-overlay)',
+        kbd: 'var(--shadow-kbd)',
+        'kbd-sm': 'var(--shadow-kbd-sm)',
+        'brand-inset': 'var(--shadow-brand-inset)',
+        card: 'var(--shadow-card)',
       },
       transitionProperty: {
         width: 'width',
@@ -180,6 +196,14 @@ export default {
           from: { opacity: '0', transform: 'translateY(20px)' },
           to: { opacity: '1', transform: 'translateY(0)' },
         },
+        'collapsible-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-collapsible-content-height)' },
+        },
+        'collapsible-up': {
+          from: { height: 'var(--radix-collapsible-content-height)' },
+          to: { height: '0' },
+        },
       },
       animation: {
         'caret-blink': 'caret-blink 1.25s ease-out infinite',
@@ -193,8 +217,18 @@ export default {
         'thinking-block': 'thinking-block 1.6s ease-in-out infinite',
         'slide-in-right': 'slide-in-right 350ms ease-out forwards',
         'slide-in-bottom': 'slide-in-bottom 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        'collapsible-down': 'collapsible-down 300ms cubic-bezier(0.4, 0, 0.2, 1)',
+        'collapsible-up': 'collapsible-up 300ms cubic-bezier(0.4, 0, 0.2, 1)',
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
+  plugins: [
+    require('tailwindcss-animate'),
+    require('@tailwindcss/typography'),
+    require('tailwindcss/plugin')(
+      ({ addVariant }: { addVariant: (name: string, definition: string) => void }) => {
+        addVariant('hover-hover', '@media (hover: hover) and (pointer: fine) { &:hover }')
+      }
+    ),
+  ],
 } satisfies Config