diff --git a/packages/clerk-js/sandbox/app.ts b/packages/clerk-js/sandbox/app.ts
index e2752c2f7b3..c04981e2b77 100644
--- a/packages/clerk-js/sandbox/app.ts
+++ b/packages/clerk-js/sandbox/app.ts
@@ -156,16 +156,17 @@ function appearanceVariableOptions() {
     'colorPrimary',
     'colorNeutral',
     'colorBackground',
-    'colorTextOnPrimaryBackground',
+    'colorPrimaryForeground',
+    'colorForeground',
     'colorDanger',
     'colorSuccess',
     'colorWarning',
-    'colorText',
-    'colorTextSecondary',
-    'colorInputText',
-    'colorInputBackground',
+    'colorForeground',
+    'colorMutedForeground',
+    'colorInputForeground',
+    'colorInput',
     'colorShimmer',
-    'spacingUnit',
+    'spacing',
     'borderRadius',
   ] as const;
 
diff --git a/packages/clerk-js/sandbox/template.html b/packages/clerk-js/sandbox/template.html
index 0e5003dd7dd..315482ffc8d 100644
--- a/packages/clerk-js/sandbox/template.html
+++ b/packages/clerk-js/sandbox/template.html
@@ -216,11 +216,11 @@
           />
         </label>
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorTextOnPrimaryBackground</span>
+          <span class="font-mono text-xs">colorPrimaryForeground</span>
           <input
             class="border border-gray-200"
             type="color"
-            id="colorTextOnPrimaryBackground"
+            id="colorPrimaryForeground"
             value="#ffffff"
           />
         </label>
@@ -252,38 +252,38 @@
           />
         </label>
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorText</span>
+          <span class="font-mono text-xs">colorForeground</span>
           <input
             class="border border-gray-200"
             type="color"
-            id="colorText"
+            id="colorForeground"
             value="#212126"
           />
         </label>
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorTextSecondary</span>
+          <span class="font-mono text-xs">colorMutedForeground</span>
           <input
             class="border border-gray-200"
             type="color"
-            id="colorTextSecondary"
+            id="colorMutedForeground"
             value="#747686"
           />
         </label>
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorInputText</span>
+          <span class="font-mono text-xs">colorInputForeground</span>
           <input
             class="border border-gray-200"
             type="color"
-            id="colorInputText"
+            id="colorInputForeground"
             value="#000000"
           />
         </label>
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">colorInputBackground</span>
+          <span class="font-mono text-xs">colorInput</span>
           <input
             class="border border-gray-200"
             type="color"
-            id="colorInputBackground"
+            id="colorInput"
             value="#ffffff"
           />
         </label>
@@ -297,10 +297,10 @@
           />
         </label>
         <label class="flex items-center justify-between border-t border-gray-100 py-2">
-          <span class="font-mono text-xs">spacingUnit</span>
+          <span class="font-mono text-xs">spacing</span>
           <input
             type="text"
-            id="spacingUnit"
+            id="spacing"
             value="1rem"
             class="text-sm outline-none [field-sizing:content]"
           />
diff --git a/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx b/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx
index 4cf2d30ca5d..c179a6b0d66 100644
--- a/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx
+++ b/packages/clerk-js/src/ui/common/ProviderInitialIcon.tsx
@@ -22,7 +22,7 @@ export const ProviderInitialIcon = (props: ProviderInitialIconProps) => {
         width: t.space.$4,
         height: t.space.$4,
         borderRadius: t.radii.$sm,
-        color: t.colors.$colorTextOnPrimaryBackground,
+        color: t.colors.$colorPrimaryForeground,
         backgroundColor: t.colors.$primary500,
       })}
       {...rest}
diff --git a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx b/packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
index fc6917bc9f7..f1d9f080e49 100644
--- a/packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
+++ b/packages/clerk-js/src/ui/components/ApiKeys/ApiKeysTable.tsx
@@ -99,7 +99,7 @@ const SecretInputWithToggle = ({ apiKeyID }: { apiKeyID: string }) => {
       >
         <Icon
           icon={revealed ? EyeSlash : Eye}
-          sx={t => ({ color: t.colors.$colorTextSecondary })}
+          sx={t => ({ color: t.colors.$colorMutedForeground })}
         />
       </Button>
     </Flex>
diff --git a/packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx b/packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx
index b5453ef0aec..7900c3d5a44 100644
--- a/packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx
+++ b/packages/clerk-js/src/ui/components/ApiKeys/CreateApiKeyForm.tsx
@@ -110,7 +110,7 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
       <SelectOptionList
         sx={t => ({
           paddingBlock: t.space.$1,
-          color: t.colors.$colorText,
+          color: t.colors.$colorForeground,
         })}
       />
     </Select>
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
index 6b5dad5fd62..36632bf8ec2 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
@@ -245,7 +245,7 @@ export const CheckoutComplete = () => {
               borderRadius: t.radii.$circle,
               backgroundImage: `linear-gradient(180deg, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0.30) 95.31%)`,
               boxShadow: '0px 4px 12px 0px rgba(0, 0, 0, 0.35), 0px 1px 0px 0px rgba(255, 255, 255, 0.05) inset',
-              color: canHover ? t.colors.$success500 : t.colors.$colorText,
+              color: canHover ? t.colors.$success500 : t.colors.$colorForeground,
               ':before': {
                 content: '""',
                 position: 'absolute',
@@ -319,7 +319,7 @@ export const CheckoutComplete = () => {
                 animationDuration: `${transitionDurationValues.slowest}ms`,
                 animationTimingFunction: transitionTiming.bezier,
                 animationFillMode: 'forwards',
-                color: t.colors.$colorText,
+                color: t.colors.$colorForeground,
                 '@keyframes slideUp': {
                   '0%': {
                     transform: 'translateY(30px)',
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
index 5e605dcb55c..147fe70b492 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -383,7 +383,7 @@ const ExistingPaymentSourceForm = withCardStateProvider(
             <SelectOptionList
               sx={t => ({
                 paddingBlock: t.space.$1,
-                color: t.colors.$colorText,
+                color: t.colors.$colorForeground,
               })}
             />
           </Select>
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index bde621e62ac..e85e459e987 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -162,7 +162,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
                       size='md'
                       icon={Upload}
                       sx={t => ({
-                        color: t.colors.$colorTextSecondary,
+                        color: t.colors.$colorMutedForeground,
                         transitionDuration: t.transitionDuration.$controls,
                       })}
                     />
diff --git a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
index 1db5f4580c0..a453a1d223a 100644
--- a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
@@ -152,7 +152,7 @@ export function OAuthConsentInternal() {
                       display: 'inline-block',
                       width: t.space.$1,
                       height: t.space.$1,
-                      background: t.colors.$colorTextSecondary,
+                      background: t.colors.$colorMutedForeground,
                       borderRadius: t.radii.$circle,
                       transform: 'translateY(-0.1875rem)',
                       marginRight: t.space.$2,
@@ -369,7 +369,7 @@ function ConnectionSeparator() {
       height={2}
       aria-hidden
       sx={t => ({
-        color: t.colors.$colorTextSecondary,
+        color: t.colors.$colorMutedForeground,
       })}
     >
       <path
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
index 693f8b627e6..36bd022c4ba 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
@@ -33,9 +33,9 @@ const sharedStyles: ThemableCssProp = t => ({
 });
 
 export const sharedMainIdentifierSx: ThemableCssProp = t => ({
-  color: t.colors.$colorText,
+  color: t.colors.$colorForeground,
   ':hover': {
-    color: t.colors.$colorText,
+    color: t.colors.$colorForeground,
   },
 });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
index 79a48b8ee25..b6ed9140d68 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -193,7 +193,7 @@ export const RoleSelect = (props: {
         sx={
           triggerSx ||
           (t => ({
-            color: t.colors.$colorText,
+            color: t.colors.$colorForeground,
             backgroundColor: 'transparent',
             textWrap: 'nowrap',
           }))
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
index 67e3b272fc1..1fcc2d647c1 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationBillingPage.tsx
@@ -26,7 +26,7 @@ const OrganizationBillingPageInternal = withCardStateProvider(() => {
   return (
     <Col
       elementDescriptor={descriptors.page}
-      sx={t => ({ gap: t.space.$8, color: t.colors.$colorText })}
+      sx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground })}
     >
       <Col
         elementDescriptor={descriptors.profilePage}
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
index 5798a4db86d..6471f11c274 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -73,7 +73,7 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => {
                       )}
                       sx={t => ({
                         paddingLeft: t.space.$10,
-                        color: t.colors.$colorTextSecondary,
+                        color: t.colors.$colorMutedForeground,
                         [mqu.md]: {
                           paddingLeft: 0,
                         },
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
index 02bf9752110..4392b97460f 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -72,7 +72,7 @@ export const OrganizationMembersTabRequests = () => {
                       )}
                       sx={t => ({
                         paddingLeft: t.space.$10,
-                        color: t.colors.$colorTextSecondary,
+                        color: t.colors.$colorMutedForeground,
                         [mqu.md]: {
                           paddingLeft: 0,
                         },
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 1c09ebe39e0..5ed37744642 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -67,7 +67,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
             gap={3}
             user={userWithoutIdentifiers}
             showAvatar={!hidePersonal}
-            sx={t => ({ color: t.colors.$colorTextSecondary })}
+            sx={t => ({ color: t.colors.$colorMutedForeground })}
             title={
               hidePersonal
                 ? localizationKeys('organizationSwitcher.notSelected')
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index a6fa3e0f2b7..171866d20ca 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -120,9 +120,9 @@ const Preview = (
         elementId='organizationSwitcherListedOrganization'
         organization={publicOrganizationData}
         sx={t => ({
-          color: t.colors.$colorTextSecondary,
+          color: t.colors.$colorMutedForeground,
           ':hover': {
-            color: t.colors.$colorTextSecondary,
+            color: t.colors.$colorMutedForeground,
           },
         })}
       />
@@ -186,9 +186,9 @@ const InvitationPreview = withCardStateProvider(
             elementId='organizationSwitcherListedOrganization'
             organization={publicOrganizationData}
             sx={t => ({
-              color: t.colors.$colorTextSecondary,
+              color: t.colors.$colorMutedForeground,
               ':hover': {
-                color: t.colors.$colorTextSecondary,
+                color: t.colors.$colorMutedForeground,
               },
             })}
           />
diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 16e99a1343b..9e853d65eb1 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -102,7 +102,7 @@ export const PaymentAttemptPage = () => {
                   display: 'flex',
                   alignItems: 'center',
                   gap: t.space.$0x25,
-                  color: t.colors.$colorTextSecondary,
+                  color: t.colors.$colorMutedForeground,
                 })}
               >
                 <CopyButton
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
index af2bee8f80b..b1a30e33e64 100644
--- a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
@@ -30,9 +30,9 @@ const useStripeAppearance = (node: HTMLElement | null) => {
     const { colors, fontWeights, fontSizes, radii, space } = theme;
     return {
       colorPrimary: resolveComputedCSSColor(node, colors.$primary500, colors.$colorBackground),
-      colorBackground: resolveComputedCSSColor(node, colors.$colorInputBackground, colors.$colorBackground),
-      colorText: resolveComputedCSSColor(node, colors.$colorText, colors.$colorBackground),
-      colorTextSecondary: resolveComputedCSSColor(node, colors.$colorTextSecondary, colors.$colorBackground),
+      colorBackground: resolveComputedCSSColor(node, colors.$colorInput, colors.$colorBackground),
+      colorText: resolveComputedCSSColor(node, colors.$colorForeground, colors.$colorBackground),
+      colorTextSecondary: resolveComputedCSSColor(node, colors.$colorMutedForeground, colors.$colorBackground),
       colorSuccess: resolveComputedCSSColor(node, colors.$success500, colors.$colorBackground),
       colorDanger: resolveComputedCSSColor(node, colors.$danger500, colors.$colorBackground),
       colorWarning: resolveComputedCSSColor(node, colors.$warning500, colors.$colorBackground),
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx
index 19a6a7f0f93..5e538d3e4b5 100644
--- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSourceRow.tsx
@@ -17,14 +17,14 @@ export const PaymentSourceRow = ({ paymentSource }: { paymentSource: CommercePay
         elementDescriptor={descriptors.paymentSourceRowIcon}
       />
       <Text
-        sx={t => ({ color: t.colors.$colorText, textTransform: 'capitalize' })}
+        sx={t => ({ color: t.colors.$colorForeground, textTransform: 'capitalize' })}
         truncate
         elementDescriptor={descriptors.paymentSourceRowType}
       >
         {paymentSource.paymentMethod === 'card' ? paymentSource.cardType : paymentSource.paymentMethod}
       </Text>
       <Text
-        sx={t => ({ color: t.colors.$colorTextSecondary })}
+        sx={t => ({ color: t.colors.$colorMutedForeground })}
         variant='caption'
         truncate
         elementDescriptor={descriptors.paymentSourceRowValue}
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index 27db2422f13..c66bebdeccc 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import { Switch } from '@/ui/elements/Switch';
 import { Tooltip } from '@/ui/elements/Tooltip';
-import { colors } from '@/ui/utils/colors';
 import { getClosestProfileScrollBox } from '@/ui/utils/getClosestProfileScrollBox';
 
 import { useProtect } from '../../common';
@@ -168,10 +167,7 @@ function Card(props: CardProps) {
         gap: 0,
         gridTemplateRows: 'subgrid',
         gridRow: 'span 5',
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 1),
-          t.colors.$neutralAlpha50,
-        ),
+        background: common.mutedBackground(t),
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
         borderColor: t.colors.$neutralAlpha100,
diff --git a/packages/clerk-js/src/ui/components/Statements/Statement.tsx b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
index 1192e5328ab..52a91601b5f 100644
--- a/packages/clerk-js/src/ui/components/Statements/Statement.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
@@ -54,7 +54,7 @@ function Header({ title, id, status }: { title: string | LocalizationKey; id: st
             display: 'flex',
             alignItems: 'center',
             gap: t.space.$0x25,
-            color: t.colors.$colorTextSecondary,
+            color: t.colors.$colorMutedForeground,
           })}
         >
           <CopyButton
@@ -329,7 +329,7 @@ function SectionContentDetailsListItem({
           display: 'flex',
           alignItems: 'center',
           gap: t.space.$0x25,
-          color: t.colors.$colorTextSecondary,
+          color: t.colors.$colorMutedForeground,
         })}
       >
         {typeof value === 'string' ? (
diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
index 9c08b9f1258..2a05dc36eb4 100644
--- a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
+++ b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
@@ -158,7 +158,7 @@ export function SubscriptionsList({
                     {(subscription.plan.amount > 0 || subscription.plan.annualAmount > 0) && (
                       <Span
                         sx={t => ({
-                          color: t.colors.$colorTextSecondary,
+                          color: t.colors.$colorMutedForeground,
                           textTransform: 'lowercase',
                           ':before': {
                             content: '"/"',
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index d91adb8795d..7a99d4bb645 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -23,7 +23,7 @@ export const UserButtonTrigger = withAvatarShimmer(
       <Button
         elementDescriptor={descriptors.userButtonTrigger}
         variant='roundWrapper'
-        sx={[t => ({ borderRadius: showName ? t.radii.$md : t.radii.$circle, color: t.colors.$colorText }), sx]}
+        sx={[t => ({ borderRadius: showName ? t.radii.$md : t.radii.$circle, color: t.colors.$colorForeground }), sx]}
         ref={ref}
         aria-label={`${props.isOpen ? 'Close' : 'Open'} user button`}
         aria-expanded={props.isOpen}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
index 04dbbca8810..e7e5a455b7f 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
@@ -36,7 +36,7 @@ export const AccountPage = withCardStateProvider(() => {
   return (
     <Col
       elementDescriptor={descriptors.page}
-      sx={t => ({ gap: t.space.$8, color: t.colors.$colorText })}
+      sx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground })}
     >
       <Col
         elementDescriptor={descriptors.profilePage}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx
index 1b4fbe9f368..6f70e5494c8 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/BillingPage.tsx
@@ -24,7 +24,7 @@ const BillingPageInternal = withCardStateProvider(() => {
   return (
     <Col
       elementDescriptor={descriptors.page}
-      sx={t => ({ gap: t.space.$8, color: t.colors.$colorText })}
+      sx={t => ({ gap: t.space.$8, color: t.colors.$colorForeground })}
     >
       <Col
         elementDescriptor={descriptors.profilePage}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index 09df04ae60c..0ea07127ba6 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -179,7 +179,7 @@ const ConnectedAccount = ({ account }: { account: ExternalAccountResource }) =>
               gap={1}
               center
             >
-              <Text sx={t => ({ color: t.colors.$colorText })}>{`${
+              <Text sx={t => ({ color: t.colors.$colorForeground })}>{`${
                 providerToDisplayData[account.provider].name
               }`}</Text>
               <Text
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
index 90972c03a5f..d560ee42be4 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
@@ -57,7 +57,7 @@ export const EmailsSection = ({ shouldAllowCreation = true }) => {
                 <ProfileSection.Item id='emailAddresses'>
                   <Flex sx={t => ({ overflow: 'hidden', gap: t.space.$1 })}>
                     <Text
-                      sx={t => ({ color: t.colors.$colorText })}
+                      sx={t => ({ color: t.colors.$colorForeground })}
                       truncate
                     >
                       {email.emailAddress}
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index f8f1ff0142d..584d2b31aae 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -66,7 +66,7 @@ export const PhoneSection = ({ shouldAllowCreation = true }: { shouldAllowCreati
                       gap={2}
                       center
                     >
-                      <Text sx={t => ({ color: t.colors.$colorText })}>
+                      <Text sx={t => ({ color: t.colors.$colorForeground })}>
                         {stringToFormattedPhoneString(phone.phoneNumber)}
                       </Text>
                       {user?.primaryPhoneNumberId === phoneId && (
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
index 7df6d558bc0..544489db673 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
@@ -41,7 +41,7 @@ export const UserProfileSection = () => {
               user={userWithoutIdentifiers}
               size='lg'
               mainIdentifierVariant='subtitle'
-              sx={t => ({ color: t.colors.$colorText })}
+              sx={t => ({ color: t.colors.$colorForeground })}
             />
 
             <Action.Trigger value='edit'>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
index 245ec6ffcc9..2e74ce56c66 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
@@ -42,7 +42,7 @@ export const UsernameSection = () => {
             {user.username && (
               <Text
                 truncate
-                sx={t => ({ color: t.colors.$colorText })}
+                sx={t => ({ color: t.colors.$colorForeground })}
               >
                 {user.username}
               </Text>
diff --git a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
index bc3982c82b0..0ea3b198e88 100644
--- a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
+++ b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
@@ -15,17 +15,17 @@ const themeA = {
     colorSuccess: themeAColor,
     colorWarning: themeAColor,
     colorBackground: themeAColor,
-    colorInputBackground: themeAColor,
-    colorInputText: themeAColor,
+    colorInput: themeAColor,
+    colorInputForeground: themeAColor,
     colorText: themeAColor,
-    colorTextOnPrimaryBackground: themeAColor,
+    colorPrimaryForeground: themeAColor,
     colorTextSecondary: themeAColor,
     borderRadius: '1rem',
     fontFamily: 'Comic Sans',
     fontFamilyButtons: 'Comic Sans',
     fontSize: '1rem',
     fontWeight: { normal: 600 },
-    spacingUnit: 'px',
+    spacing: '1px',
   },
 } as const;
 
@@ -37,17 +37,17 @@ const themeB = {
     colorSuccess: themeBColor,
     colorWarning: themeBColor,
     colorBackground: themeBColor,
-    colorInputBackground: themeBColor,
-    colorInputText: themeBColor,
+    colorInput: themeBColor,
+    colorInputForeground: themeBColor,
     colorText: themeBColor,
-    colorTextOnPrimaryBackground: themeBColor,
+    colorPrimaryForeground: themeBColor,
     colorTextSecondary: themeBColor,
     borderRadius: '2rem',
     fontFamily: 'Arial',
     fontFamilyButtons: 'Arial',
     fontSize: '2rem',
     fontWeight: { normal: 700 },
-    spacingUnit: 'px',
+    spacing: '2px',
   },
 } as const;
 
@@ -79,17 +79,17 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.colors.$success500).toBe(knownColors[themeAColor]);
     expect(result.current.parsedInternalTheme.colors.$warning500).toBe(knownColors[themeAColor]);
     expect(result.current.parsedInternalTheme.colors.$colorBackground).toBe(knownColors[themeAColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorInputBackground).toBe(knownColors[themeAColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorInputText).toBe(knownColors[themeAColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorText).toBe(knownColors[themeAColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorTextOnPrimaryBackground).toBe(knownColors[themeAColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorTextSecondary).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInput).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputForeground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorForeground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorPrimaryForeground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorMutedForeground).toBe(knownColors[themeAColor]);
     expect(result.current.parsedInternalTheme.radii.$md).toBe(themeA.variables.borderRadius);
     expect(result.current.parsedInternalTheme.fonts.$main).toBe(themeA.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeA.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fontSizes.$md).toBe('1rem');
     expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeA.variables.fontWeight.normal);
-    expect(result.current.parsedInternalTheme.space.$1).toContain(themeA.variables.spacingUnit);
+    expect(result.current.parsedInternalTheme.space.$1).toContain(themeA.variables.spacing);
   });
 
   it('sets the theme correctly from the appearance prop', () => {
@@ -109,17 +109,17 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.colors.$success500).toBe(knownColors[themeBColor]);
     expect(result.current.parsedInternalTheme.colors.$warning500).toBe(knownColors[themeBColor]);
     expect(result.current.parsedInternalTheme.colors.$colorBackground).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorInputBackground).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorInputText).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorText).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorTextOnPrimaryBackground).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorTextSecondary).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInput).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorPrimaryForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorMutedForeground).toBe(knownColors[themeBColor]);
     expect(result.current.parsedInternalTheme.radii.$md).toBe(themeB.variables.borderRadius);
     expect(result.current.parsedInternalTheme.fonts.$main).toBe(themeB.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeB.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fontSizes.$md).toBe('2rem');
     expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeB.variables.fontWeight.normal);
-    expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacingUnit);
+    expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacing);
   });
 
   it('merges the globalAppearance with the appearance in the theme', () => {
@@ -140,17 +140,17 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.colors.$success500).toBe(knownColors[themeBColor]);
     expect(result.current.parsedInternalTheme.colors.$warning500).toBe(knownColors[themeBColor]);
     expect(result.current.parsedInternalTheme.colors.$colorBackground).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorInputBackground).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorInputText).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorText).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorTextOnPrimaryBackground).toBe(knownColors[themeBColor]);
-    expect(result.current.parsedInternalTheme.colors.$colorTextSecondary).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInput).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorInputForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorPrimaryForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$colorMutedForeground).toBe(knownColors[themeBColor]);
     expect(result.current.parsedInternalTheme.radii.$md).toBe(themeB.variables.borderRadius);
     expect(result.current.parsedInternalTheme.fonts.$main).toBe(themeB.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fonts.$buttons).toBe(themeB.variables.fontFamily);
     expect(result.current.parsedInternalTheme.fontSizes.$md).toBe('2rem');
     expect(result.current.parsedInternalTheme.fontWeights.$normal).toBe(themeB.variables.fontWeight.normal);
-    expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacingUnit);
+    expect(result.current.parsedInternalTheme.space.$1).toContain(themeB.variables.spacing);
   });
 });
 
diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index 9a8a49017a7..6fe2163f2d9 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -33,14 +33,28 @@ export const createColorScales = (theme: Theme) => {
     ...successAlphaScale,
     ...warningAlphaScale,
     primaryHover: colors.adjustForLightness(primaryScale?.primary500),
-    colorTextOnPrimaryBackground: colors.toHslaString(variables.colorTextOnPrimaryBackground),
-    colorText: colors.toHslaString(variables.colorText),
-    colorTextSecondary:
-      colors.toHslaString(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
-    colorInputText: colors.toHslaString(variables.colorInputText),
+    colorPrimaryForeground: variables.colorPrimaryForeground
+      ? colors.toHslaString(variables.colorPrimaryForeground)
+      : variables.colorTextOnPrimaryBackground
+        ? colors.toHslaString(variables.colorTextOnPrimaryBackground)
+        : undefined,
+    colorForeground: variables.colorForeground
+      ? colors.toHslaString(variables.colorForeground)
+      : colors.toHslaString(variables.colorText),
+    colorMutedForeground: variables.colorMutedForeground
+      ? colors.toHslaString(variables.colorMutedForeground)
+      : variables.colorTextSecondary
+        ? colors.toHslaString(variables.colorTextSecondary)
+        : colors.makeTransparent(variables.colorText, 0.35),
+    colorInputForeground: variables.colorInputForeground
+      ? colors.toHslaString(variables.colorInputForeground)
+      : colors.toHslaString(variables.colorInputText),
     colorBackground: colors.toHslaString(variables.colorBackground),
-    colorInputBackground: colors.toHslaString(variables.colorInputBackground),
+    colorInput: variables.colorInput
+      ? colors.toHslaString(variables.colorInput)
+      : colors.toHslaString(variables.colorInputBackground),
     colorShimmer: colors.toHslaString(variables.colorShimmer),
+    colorMuted: variables.colorMuted ? colors.toHslaString(variables.colorMuted) : undefined,
   });
 };
 
@@ -103,15 +117,16 @@ export const createRadiiUnits = (theme: Theme) => {
 };
 
 export const createSpaceScale = (theme: Theme) => {
-  const { spacingUnit } = theme.variables || {};
-  if (spacingUnit === undefined) {
+  const { spacing, spacingUnit } = theme.variables || {};
+  const spacingValue = spacing ?? spacingUnit;
+  if (spacingValue === undefined) {
     return;
   }
   return fromEntries(
     spaceScaleKeys.map(k => {
       const num = Number.parseFloat(k.replace('x', '.'));
       const percentage = (num / 0.5) * 0.125;
-      return [k, `calc(${spacingUnit} * ${percentage})`];
+      return [k, `calc(${spacingValue} * ${percentage})`];
     }),
   );
 };
diff --git a/packages/clerk-js/src/ui/elements/Avatar.tsx b/packages/clerk-js/src/ui/elements/Avatar.tsx
index d87c691fa2e..7f691fa032e 100644
--- a/packages/clerk-js/src/ui/elements/Avatar.tsx
+++ b/packages/clerk-js/src/ui/elements/Avatar.tsx
@@ -107,7 +107,7 @@ const InitialsAvatarFallback = (props: { initials: string }) => {
   return (
     <Text
       as='span'
-      sx={t => ({ ...common.centeredFlex('inline-flex'), width: '100%', color: t.colors.$colorText })}
+      sx={t => ({ ...common.centeredFlex('inline-flex'), width: '100%', color: t.colors.$colorForeground })}
     >
       {initials}
     </Text>
diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 9de7fac141a..9008f1d498f 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -70,7 +70,7 @@ export const CardClerkAndPagesTag = React.memo(
                   gap={1}
                   align='center'
                   justify='center'
-                  sx={t => ({ color: t.colors.$colorTextSecondary })}
+                  sx={t => ({ color: t.colors.$colorMutedForeground })}
                 >
                   <>
                     <Text variant='buttonSmall'>Secured by</Text>
diff --git a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
index f18454620ae..ff409108145 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -66,7 +66,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
             />
           }
           sx={t => ({
-            color: t.colors.$colorTextSecondary,
+            color: t.colors.$colorMutedForeground,
             zIndex: t.zIndices.$modal,
             position: 'absolute',
             top: t.space.$2,
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index cd21424ede7..3e0e8015671 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { colors } from '@/ui/utils/colors';
-
 import { useEnvironment } from '../../contexts';
 import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
 import { useDevMode } from '../../hooks/useDevMode';
@@ -51,10 +49,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
         t => ({
           marginTop: `calc(${t.space.$2} * -1)`,
           paddingTop: t.space.$2,
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 1),
-            t.colors.$neutralAlpha50,
-          ),
+          background: common.mutedBackground(t),
           '&:empty': {
             padding: 0,
             marginTop: 0,
diff --git a/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx b/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
index 629a4019a0f..e88b4407c8f 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
@@ -43,7 +43,7 @@ export const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props,
             borderColor: t.colors.$neutralAlpha100,
             boxShadow: t.shadows.$cardBoxShadow,
             borderRadius: t.radii.$xl,
-            color: t.colors.$colorText,
+            color: t.colors.$colorForeground,
             position: 'relative',
             overflow: 'hidden',
           }),
diff --git a/packages/clerk-js/src/ui/elements/Disclosure.tsx b/packages/clerk-js/src/ui/elements/Disclosure.tsx
index 0d3494f3a20..46864b2a427 100644
--- a/packages/clerk-js/src/ui/elements/Disclosure.tsx
+++ b/packages/clerk-js/src/ui/elements/Disclosure.tsx
@@ -95,7 +95,7 @@ const Trigger = React.forwardRef<HTMLButtonElement, TriggerProps>(({ text }, ref
         fontSize: t.fontSizes.$md,
         justifyContent: 'space-between',
         padding: t.sizes.$3,
-        color: t.colors.$colorText,
+        color: t.colors.$colorForeground,
         borderRadius: t.radii.$lg,
         zIndex: 2,
       })}
diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx
index 49622abc644..d0612f4a1a6 100644
--- a/packages/clerk-js/src/ui/elements/Drawer.tsx
+++ b/packages/clerk-js/src/ui/elements/Drawer.tsx
@@ -419,7 +419,7 @@ const Close = React.forwardRef<HTMLButtonElement>((_, ref) => {
         />
       }
       sx={t => ({
-        color: t.colors.$colorTextSecondary,
+        color: t.colors.$colorMutedForeground,
         padding: t.space.$3,
         marginInlineStart: 'auto',
       })}
diff --git a/packages/clerk-js/src/ui/elements/Header.tsx b/packages/clerk-js/src/ui/elements/Header.tsx
index e79e47d272a..9c1c85ea812 100644
--- a/packages/clerk-js/src/ui/elements/Header.tsx
+++ b/packages/clerk-js/src/ui/elements/Header.tsx
@@ -93,7 +93,7 @@ const BackLink = React.memo((props: PropsOfComponent<typeof Link>): JSX.Element
     >
       <Icon
         icon={ArrowLeftIcon}
-        sx={t => ({ color: t.colors.$colorText })}
+        sx={t => ({ color: t.colors.$colorForeground })}
       />
       {children}
     </Link>
diff --git a/packages/clerk-js/src/ui/elements/InformationBox.tsx b/packages/clerk-js/src/ui/elements/InformationBox.tsx
index db080a53548..81a65e0c905 100644
--- a/packages/clerk-js/src/ui/elements/InformationBox.tsx
+++ b/packages/clerk-js/src/ui/elements/InformationBox.tsx
@@ -22,7 +22,7 @@ export function InformationBox(props: InformationBoxProps) {
       />
       <Text
         localizationKey={props.message}
-        sx={t => ({ color: t.colors.$colorTextSecondary })}
+        sx={t => ({ color: t.colors.$colorMutedForeground })}
       />
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/elements/LineItems.tsx b/packages/clerk-js/src/ui/elements/LineItems.tsx
index 461806babf4..8c9f3762ef2 100644
--- a/packages/clerk-js/src/ui/elements/LineItems.tsx
+++ b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -100,7 +100,7 @@ const Title = React.forwardRef<HTMLTableCellElement, TitleProps>(({ title, descr
       elementId={descriptors.lineItemsTitle.setId(variant)}
       sx={t => ({
         display: 'grid',
-        color: variant === 'primary' ? t.colors.$colorText : t.colors.$colorTextSecondary,
+        color: variant === 'primary' ? t.colors.$colorForeground : t.colors.$colorMutedForeground,
         ...common.textVariants(t)[textVariant],
       })}
     >
@@ -126,7 +126,7 @@ const Title = React.forwardRef<HTMLTableCellElement, TitleProps>(({ title, descr
           elementDescriptor={descriptors.lineItemsTitleDescription}
           sx={t => ({
             fontSize: t.fontSizes.$sm,
-            color: t.colors.$colorTextSecondary,
+            color: t.colors.$colorMutedForeground,
           })}
         />
       ) : null}
@@ -172,7 +172,7 @@ function Description({ text, prefix, suffix, truncateText = false, copyText = fa
       sx={t => ({
         display: 'grid',
         justifyContent: 'end',
-        color: variant === 'tertiary' ? t.colors.$colorTextSecondary : t.colors.$colorText,
+        color: variant === 'tertiary' ? t.colors.$colorMutedForeground : t.colors.$colorForeground,
       })}
     >
       <Span
@@ -190,7 +190,7 @@ function Description({ text, prefix, suffix, truncateText = false, copyText = fa
             localizationKey={prefix}
             elementDescriptor={descriptors.lineItemsDescriptionPrefix}
             sx={t => ({
-              color: t.colors.$colorTextSecondary,
+              color: t.colors.$colorMutedForeground,
               ...common.textVariants(t).caption,
             })}
           />
@@ -222,7 +222,7 @@ function Description({ text, prefix, suffix, truncateText = false, copyText = fa
           localizationKey={suffix}
           elementDescriptor={descriptors.lineItemsDescriptionSuffix}
           sx={t => ({
-            color: t.colors.$colorTextSecondary,
+            color: t.colors.$colorMutedForeground,
             ...common.textVariants(t).caption,
             justifySelf: 'flex-end',
           })}
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index 5abd510aefc..12b162e5a71 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -154,13 +154,10 @@ const NavbarContainer = (
         width: t.sizes.$57,
         position: 'relative',
         maxWidth: t.space.$57,
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 1),
-          t.colors.$neutralAlpha50,
-        ),
+        background: common.mutedBackground(t),
         padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
         marginRight: `calc(${t.space.$2} * -1)`,
-        color: t.colors.$colorText,
+        color: t.colors.$colorForeground,
         justifyContent: 'space-between',
       })}
     >
@@ -228,7 +225,7 @@ const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<R
           width: '100%',
           zIndex: t.zIndices.$navbar,
           overflow: 'hidden',
-          color: t.colors.$colorText,
+          color: t.colors.$colorForeground,
         })}
       >
         <Col
@@ -327,10 +324,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
       elementDescriptor={descriptors.navbarMobileMenuRow}
       sx={t => ({
         display: 'none',
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 1),
-          t.colors.$neutralAlpha50,
-        ),
+        background: common.mutedBackground(t),
         padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
         marginBottom: `calc(${t.space.$2} * -1)`,
         [mqu.md]: {
@@ -346,7 +340,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
         textVariant='h2'
         variant='ghost'
         sx={t => ({
-          color: t.colors.$colorText,
+          color: t.colors.$colorForeground,
           gap: t.space.$2x5,
           width: 'fit-content',
           alignItems: 'center',
diff --git a/packages/clerk-js/src/ui/elements/Pagination.tsx b/packages/clerk-js/src/ui/elements/Pagination.tsx
index f53bc521eab..d975478b8fd 100644
--- a/packages/clerk-js/src/ui/elements/Pagination.tsx
+++ b/packages/clerk-js/src/ui/elements/Pagination.tsx
@@ -35,7 +35,7 @@ const PageButton = (props: PageButtonProps) => {
       variant='outline'
       sx={t => [
         {
-          color: t.colors.$colorText,
+          color: t.colors.$colorForeground,
           opacity: isActive ? 1 : t.opacity.$inactive,
           padding: `${t.space.$0x5} ${t.space.$0x5}`,
         },
diff --git a/packages/clerk-js/src/ui/elements/PhoneInput/index.tsx b/packages/clerk-js/src/ui/elements/PhoneInput/index.tsx
index a0609bf7fee..8c546cf314b 100644
--- a/packages/clerk-js/src/ui/elements/PhoneInput/index.tsx
+++ b/packages/clerk-js/src/ui/elements/PhoneInput/index.tsx
@@ -223,7 +223,7 @@ const CountryCodeListItem = memo((props: CountryCodeListItemProps) => {
           width: '100%',
           gap: theme.space.$2,
           padding: `${theme.space.$1x5} ${theme.space.$4}`,
-          color: theme.colors.$colorText,
+          color: theme.colors.$colorForeground,
         }),
         sx,
       ]}
diff --git a/packages/clerk-js/src/ui/elements/PreviewButton.tsx b/packages/clerk-js/src/ui/elements/PreviewButton.tsx
index f8d170a3754..06a420ac938 100644
--- a/packages/clerk-js/src/ui/elements/PreviewButton.tsx
+++ b/packages/clerk-js/src/ui/elements/PreviewButton.tsx
@@ -45,7 +45,7 @@ export const PreviewButton = (props: PreviewButtonProps) => {
           icon={icon}
           sx={[
             t => ({
-              color: t.colors.$colorTextSecondary,
+              color: t.colors.$colorMutedForeground,
               marginLeft: t.space.$2,
               visibility: showIconOnHover ? 'hidden' : 'initial',
             }),
diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx
index 561c4e0f556..2ff26582860 100644
--- a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx
+++ b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx
@@ -59,7 +59,7 @@ export const ProfileCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent
               />
             }
             sx={t => ({
-              color: t.colors.$colorTextSecondary,
+              color: t.colors.$colorMutedForeground,
               padding: t.space.$3,
             })}
           />
diff --git a/packages/clerk-js/src/ui/elements/RootBox.tsx b/packages/clerk-js/src/ui/elements/RootBox.tsx
index b076028e34b..5fbcb675024 100644
--- a/packages/clerk-js/src/ui/elements/RootBox.tsx
+++ b/packages/clerk-js/src/ui/elements/RootBox.tsx
@@ -8,7 +8,7 @@ export const RootBox = (props: PropsOfComponent<typeof Col>) => {
       sx={t => ({
         boxSizing: 'border-box',
         width: 'fit-content',
-        color: t.colors.$colorText,
+        color: t.colors.$colorForeground,
         fontFamily: t.fonts.$main,
         fontStyle: t.fontStyles.$normal,
       })}
diff --git a/packages/clerk-js/src/ui/elements/SegmentedControl.tsx b/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
index b80cb2054f9..35833dcfdf6 100644
--- a/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
+++ b/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
@@ -136,7 +136,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(({ text, value }
               position: 'relative',
               width: fullWidth ? '100%' : 'auto',
               backgroundColor: isSelected ? t.colors.$colorBackground : 'transparent',
-              color: isSelected ? t.colors.$colorText : t.colors.$colorTextSecondary,
+              color: isSelected ? t.colors.$colorForeground : t.colors.$colorMutedForeground,
               fontSize: size === 'lg' ? t.fontSizes.$md : t.fontSizes.$xs,
               minHeight: t.sizes.$6,
               boxShadow: isSelected ? t.shadows.$segmentedControl : 'none',
diff --git a/packages/clerk-js/src/ui/elements/TagInput.tsx b/packages/clerk-js/src/ui/elements/TagInput.tsx
index 9623f649c25..d6e3c27da98 100644
--- a/packages/clerk-js/src/ui/elements/TagInput.tsx
+++ b/packages/clerk-js/src/ui/elements/TagInput.tsx
@@ -121,8 +121,8 @@ export const TagInput = (props: TagInputProps) => {
         t => ({
           maxWidth: '100%',
           padding: `${t.space.$1x5} ${t.space.$2}`,
-          backgroundColor: t.colors.$colorInputBackground,
-          color: t.colors.$colorInputText,
+          backgroundColor: t.colors.$colorInput,
+          color: t.colors.$colorInputForeground,
           minHeight: t.sizes.$20,
           maxHeight: t.sizes.$60,
           overflowY: 'auto',
@@ -165,7 +165,7 @@ export const TagInput = (props: TagInputProps) => {
           lineHeight: t.space.$5,
           paddingLeft: t.space.$1,
           '::placeholder': {
-            color: t.colors.$colorTextSecondary,
+            color: t.colors.$colorMutedForeground,
           },
           boxShadow: 'none',
           ':hover': {
@@ -219,7 +219,7 @@ const TagPill = (props: TagPillProps) => {
         elementDescriptor={descriptors.tagPillIcon}
         size='md'
         icon={Plus}
-        sx={t => ({ color: t.colors.$colorTextSecondary, transform: 'translateY(0px) rotate(45deg)' })}
+        sx={t => ({ color: t.colors.$colorMutedForeground, transform: 'translateY(0px) rotate(45deg)' })}
       />
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index 773294f9c04..7c7a4369418 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -71,10 +71,10 @@ const warningAlphaScale = colorOptionToThemedAlphaScale(
   'warningAlpha',
 ) as AlphaScale<'warningAlpha'>;
 
-const colorText = clerkCssVar('color-text', '#212126');
-const colorTextSecondary = clerkCssVar(
-  'color-text-secondary',
-  colorUtils.makeTransparent(colorText, 0.35) || '#747686',
+const colorForeground = clerkCssVar('color-foreground', '#212126');
+const colorMutedForeground = clerkCssVar(
+  'color-muted-foreground',
+  colorUtils.makeTransparent(colorForeground, 0.35) || '#747686',
 );
 
 const colors = Object.freeze({
@@ -82,11 +82,12 @@ const colors = Object.freeze({
   avatarBackground: neutralAlphaScale.neutralAlpha400,
   modalBackdrop: neutralAlphaScale.neutralAlpha700,
   colorBackground: clerkCssVar('color-background', 'white'),
-  colorInputBackground: clerkCssVar('color-input-background', 'white'),
-  colorText,
-  colorTextSecondary,
-  colorInputText: clerkCssVar('color-input-text', '#131316'),
-  colorTextOnPrimaryBackground: clerkCssVar('color-text-on-primary-background', 'white'),
+  colorInput: clerkCssVar('color-input', 'white'),
+  colorForeground,
+  colorMutedForeground,
+  colorMuted: undefined,
+  colorInputForeground: clerkCssVar('color-input-foreground', '#131316'),
+  colorPrimaryForeground: clerkCssVar('color-primary-foreground', 'white'),
   colorShimmer: clerkCssVar('color-shimmer', 'rgba(255, 255, 255, 0.36)'),
   transparent: 'transparent',
   white: 'white',
diff --git a/packages/clerk-js/src/ui/foundations/sizes.ts b/packages/clerk-js/src/ui/foundations/sizes.ts
index 374bac79c9b..31da53f95b8 100644
--- a/packages/clerk-js/src/ui/foundations/sizes.ts
+++ b/packages/clerk-js/src/ui/foundations/sizes.ts
@@ -1,90 +1,192 @@
 import { clerkCssVar } from '../utils/cssVariables';
 
+const SPACING_BASE_UNIT = '1rem';
+const SPACING_MULTIPLIER = 0.25; // ((num / 0.5) * 0.125)
+const BORDER_RADIUS_DEFAULT = '0.375rem';
+
 const baseSpaceUnits = Object.freeze({
   none: '0',
   xxs: '0.5px',
   px: '1px',
 } as const);
 
-const dynamicSpaceUnitsDefaultVar = clerkCssVar('spacing-unit', '1rem');
-const calcDynamicSpaceUnits = (num: number) => `calc(${dynamicSpaceUnitsDefaultVar} * ((${num} / 0.5) * 0.125))`;
-
-const dynamicSpaceUnits = Object.freeze({
-  '0x25': calcDynamicSpaceUnits(0.25), // 0.0625rem
-  '0x5': calcDynamicSpaceUnits(0.5), // 0.125rem
-  '1': calcDynamicSpaceUnits(1), // 0.25rem
-  '1x5': calcDynamicSpaceUnits(1.5), // 0.375rem
-  '2': calcDynamicSpaceUnits(2), // 0.5rem
-  '2x5': calcDynamicSpaceUnits(2.5), // 0.625rem
-  '3': calcDynamicSpaceUnits(3), // 0.75rem
-  '3x25': calcDynamicSpaceUnits(3.25), // 0.8125rem
-  '3x5': calcDynamicSpaceUnits(3.5), // 0.875rem
-  '4': dynamicSpaceUnitsDefaultVar, // 1rem
-  '4x25': calcDynamicSpaceUnits(4.5), // 1.0625rem
-  '5': calcDynamicSpaceUnits(5), // 1.25rem
-  '5x5': calcDynamicSpaceUnits(5.5), // 1.375rem
-  '6': calcDynamicSpaceUnits(6), // 1.5rem
-  '7': calcDynamicSpaceUnits(7), // 1.75rem
-  '7x5': calcDynamicSpaceUnits(7.5), // 1.875rem
-  '8': calcDynamicSpaceUnits(8), // 2rem
-  '8x5': calcDynamicSpaceUnits(8.5), // 2.125rem
-  '8x75': calcDynamicSpaceUnits(8.75), // 2.1875rem
-  '9': calcDynamicSpaceUnits(9), // 2.25rem
-  '10': calcDynamicSpaceUnits(10), // 2.5rem
-  '12': calcDynamicSpaceUnits(12), // 3rem
-  '13': calcDynamicSpaceUnits(13), // 3.5rem
-  '16': calcDynamicSpaceUnits(16), // 4rem
-  '17': calcDynamicSpaceUnits(17), // 4.25rem
-  '20': calcDynamicSpaceUnits(20), // 5rem
-  '24': calcDynamicSpaceUnits(24), // 6rem
-  '28': calcDynamicSpaceUnits(28), // 7rem
-  '32': calcDynamicSpaceUnits(32), // 8rem
-  '36': calcDynamicSpaceUnits(36), // 9rem
-  '40': calcDynamicSpaceUnits(40), // 10rem
-  '44': calcDynamicSpaceUnits(44), // 11rem
-  '48': calcDynamicSpaceUnits(48), // 12rem
-  '52': calcDynamicSpaceUnits(52), // 13rem
-  '56': calcDynamicSpaceUnits(56), // 14rem
-  '57': calcDynamicSpaceUnits(57), // 14.25rem
-  '60': calcDynamicSpaceUnits(60), // 15rem
-  '66': calcDynamicSpaceUnits(66), // 16.5rem
-  '94': calcDynamicSpaceUnits(94), // 23.5rem
-  '100': calcDynamicSpaceUnits(100), // 25rem
-  '108': calcDynamicSpaceUnits(108), // 27rem
-  '120': calcDynamicSpaceUnits(120), // 30rem
-  '140': calcDynamicSpaceUnits(140), // 35rem
-  '160': calcDynamicSpaceUnits(160), // 40rem
-  '176': calcDynamicSpaceUnits(176), // 44rem
-  '220': calcDynamicSpaceUnits(220), // 55rem
+/**
+ * Spacing scale configuration
+ * Maps scale keys to their rem values and multipliers for dynamic calculation
+ */
+const spacingScale = Object.freeze({
+  '0x25': { rem: '0.0625rem', multiplier: 0.25 },
+  '0x5': { rem: '0.125rem', multiplier: 0.5 },
+  '1': { rem: '0.25rem', multiplier: 1 },
+  '1x5': { rem: '0.375rem', multiplier: 1.5 },
+  '2': { rem: '0.5rem', multiplier: 2 },
+  '2x5': { rem: '0.625rem', multiplier: 2.5 },
+  '3': { rem: '0.75rem', multiplier: 3 },
+  '3x25': { rem: '0.8125rem', multiplier: 3.25 },
+  '3x5': { rem: '0.875rem', multiplier: 3.5 },
+  '4': { rem: '1rem', multiplier: 4 },
+  '4x25': { rem: '1.0625rem', multiplier: 4.25 },
+  '5': { rem: '1.25rem', multiplier: 5 },
+  '5x5': { rem: '1.375rem', multiplier: 5.5 },
+  '6': { rem: '1.5rem', multiplier: 6 },
+  '7': { rem: '1.75rem', multiplier: 7 },
+  '7x5': { rem: '1.875rem', multiplier: 7.5 },
+  '8': { rem: '2rem', multiplier: 8 },
+  '8x5': { rem: '2.125rem', multiplier: 8.5 },
+  '8x75': { rem: '2.1875rem', multiplier: 8.75 },
+  '9': { rem: '2.25rem', multiplier: 9 },
+  '10': { rem: '2.5rem', multiplier: 10 },
+  '12': { rem: '3rem', multiplier: 12 },
+  '13': { rem: '3.5rem', multiplier: 13 },
+  '16': { rem: '4rem', multiplier: 16 },
+  '17': { rem: '4.25rem', multiplier: 17 },
+  '20': { rem: '5rem', multiplier: 20 },
+  '24': { rem: '6rem', multiplier: 24 },
+  '28': { rem: '7rem', multiplier: 28 },
+  '32': { rem: '8rem', multiplier: 32 },
+  '36': { rem: '9rem', multiplier: 36 },
+  '40': { rem: '10rem', multiplier: 40 },
+  '44': { rem: '11rem', multiplier: 44 },
+  '48': { rem: '12rem', multiplier: 48 },
+  '52': { rem: '13rem', multiplier: 52 },
+  '56': { rem: '14rem', multiplier: 56 },
+  '57': { rem: '14.25rem', multiplier: 57 },
+  '60': { rem: '15rem', multiplier: 60 },
+  '66': { rem: '16.5rem', multiplier: 66 },
+  '94': { rem: '23.5rem', multiplier: 94 },
+  '100': { rem: '25rem', multiplier: 100 },
+  '108': { rem: '27rem', multiplier: 108 },
+  '120': { rem: '30rem', multiplier: 120 },
+  '140': { rem: '35rem', multiplier: 140 },
+  '160': { rem: '40rem', multiplier: 160 },
+  '176': { rem: '44rem', multiplier: 176 },
+  '220': { rem: '55rem', multiplier: 220 },
 } as const);
 
+type SpacingScaleKey = keyof typeof spacingScale;
+
+const dynamicSpaceUnitsDefaultVar = clerkCssVar('spacing', SPACING_BASE_UNIT);
+
 /**
- * Instead of generating these values with the helpers of parseVariables,
- * we hard code them in order to have better intellisense support while developing
+ * Calculates a dynamic spacing unit based on the CSS variable
+ * @param multiplier - The multiplier to apply to the base spacing unit
+ * @returns CSS calc() expression for dynamic spacing
+ */
+const calcDynamicSpaceUnits = (multiplier: number): string => {
+  // Special case for the base unit (4 = 1rem)
+  if (multiplier === 4) {
+    return dynamicSpaceUnitsDefaultVar;
+  }
+  return `calc(${dynamicSpaceUnitsDefaultVar} * ${multiplier * SPACING_MULTIPLIER})`;
+};
+
+/**
+ * Type helper to extract rem values while preserving literal types
+ */
+type ExtractRemValues<T> = {
+  readonly [K in keyof T]: T[K] extends { rem: infer R } ? R : never;
+};
+
+/**
+ * Generate static spacing units from the spacing scale
+ * Uses mapped types to preserve literal string types for better intellisense
+ */
+const spaceUnits = Object.freeze({
+  '0x25': spacingScale['0x25'].rem,
+  '0x5': spacingScale['0x5'].rem,
+  '1': spacingScale['1'].rem,
+  '1x5': spacingScale['1x5'].rem,
+  '2': spacingScale['2'].rem,
+  '2x5': spacingScale['2x5'].rem,
+  '3': spacingScale['3'].rem,
+  '3x25': spacingScale['3x25'].rem,
+  '3x5': spacingScale['3x5'].rem,
+  '4': spacingScale['4'].rem,
+  '4x25': spacingScale['4x25'].rem,
+  '5': spacingScale['5'].rem,
+  '5x5': spacingScale['5x5'].rem,
+  '6': spacingScale['6'].rem,
+  '7': spacingScale['7'].rem,
+  '7x5': spacingScale['7x5'].rem,
+  '8': spacingScale['8'].rem,
+  '8x5': spacingScale['8x5'].rem,
+  '8x75': spacingScale['8x75'].rem,
+  '9': spacingScale['9'].rem,
+  '10': spacingScale['10'].rem,
+  '12': spacingScale['12'].rem,
+  '13': spacingScale['13'].rem,
+  '16': spacingScale['16'].rem,
+  '17': spacingScale['17'].rem,
+  '20': spacingScale['20'].rem,
+  '24': spacingScale['24'].rem,
+  '28': spacingScale['28'].rem,
+  '32': spacingScale['32'].rem,
+  '36': spacingScale['36'].rem,
+  '40': spacingScale['40'].rem,
+  '44': spacingScale['44'].rem,
+  '48': spacingScale['48'].rem,
+  '52': spacingScale['52'].rem,
+  '56': spacingScale['56'].rem,
+  '57': spacingScale['57'].rem,
+  '60': spacingScale['60'].rem,
+  '66': spacingScale['66'].rem,
+  '94': spacingScale['94'].rem,
+  '100': spacingScale['100'].rem,
+  '108': spacingScale['108'].rem,
+  '120': spacingScale['120'].rem,
+  '140': spacingScale['140'].rem,
+  '160': spacingScale['160'].rem,
+  '176': spacingScale['176'].rem,
+  '220': spacingScale['220'].rem,
+} as const) satisfies ExtractRemValues<typeof spacingScale>;
+
+/**
+ * Generate dynamic spacing units from the spacing scale
+ */
+const dynamicSpaceUnits = Object.freeze(
+  Object.fromEntries(
+    Object.entries(spacingScale).map(([key, { multiplier }]) => [key, calcDynamicSpaceUnits(multiplier)]),
+  ),
+) as Record<SpacingScaleKey, string>;
+
+/**
+ * Complete spacing scale combining base units and dynamic spacing
+ * Used for responsive spacing that adapts to the CSS variable
  */
 const space = Object.freeze({
   ...baseSpaceUnits,
   ...dynamicSpaceUnits,
 } as const);
 
-const sizes = Object.freeze({ ...space } as const);
+/**
+ * Static sizes combining base units and fixed spacing values
+ * Used for non-responsive sizing
+ */
+const sizes = Object.freeze({
+  ...baseSpaceUnits,
+  ...spaceUnits,
+} as const);
+
+const radiiDefaultVar = clerkCssVar('border-radius', BORDER_RADIUS_DEFAULT);
 
-const radiiDefaultVar = clerkCssVar('border-radius', '0.375rem');
+/**
+ * Border radius scale with CSS variables for theming
+ */
 const radii = Object.freeze({
   none: '0px',
   circle: '50%',
-  avatar: clerkCssVar('radius-avatar', radiiDefaultVar), // 0.375rem
-  sm: clerkCssVar('radius-sm', `calc(${radiiDefaultVar} * 0.666)`), // 0.25rem
-  md: clerkCssVar('radius-md', radiiDefaultVar), // 0.375rem
-  lg: clerkCssVar('radius-lg', `calc(${radiiDefaultVar} * 1.333)`), // 0.5rem
-  xl: clerkCssVar('radius-xl', `calc(${radiiDefaultVar} * 2)`), // 0.75rem
+  avatar: clerkCssVar('border-radius-avatar', radiiDefaultVar),
+  sm: clerkCssVar('border-radius-sm', `calc(${radiiDefaultVar} * 0.666)`),
+  md: clerkCssVar('border-radius-md', radiiDefaultVar),
+  lg: clerkCssVar('border-radius-lg', `calc(${radiiDefaultVar} * 1.333)`),
+  xl: clerkCssVar('border-radius-xl', `calc(${radiiDefaultVar} * 2)`),
   halfHeight: '99999px',
 } as const);
 
 /**
  * Used by the space scale generation helpers.
- * These keys should always match {@link space}
+ * These keys should always match the spacing scale
  */
-const spaceScaleKeys = Object.keys(dynamicSpaceUnits) as Array<keyof typeof dynamicSpaceUnits>;
+const spaceScaleKeys = Object.keys(spacingScale) as SpacingScaleKey[];
 
 export { sizes, space, radii, spaceScaleKeys };
diff --git a/packages/clerk-js/src/ui/foundations/typography.ts b/packages/clerk-js/src/ui/foundations/typography.ts
index e177e36978b..fd146c26edb 100644
--- a/packages/clerk-js/src/ui/foundations/typography.ts
+++ b/packages/clerk-js/src/ui/foundations/typography.ts
@@ -26,7 +26,7 @@ const fontSizesDefaultVar = clerkCssVar('font-size', '0.8125rem');
 const fontSizes = Object.freeze({
   xs: clerkCssVar('font-size-xs', `calc(${fontSizesDefaultVar} * 0.8)`), // 0.6875rem
   sm: clerkCssVar('font-size-sm', `calc(${fontSizesDefaultVar} * 0.9)`), // 0.75rem
-  md: clerkCssVar('font-size-md', fontSizesDefaultVar),
+  md: fontSizesDefaultVar,
   lg: clerkCssVar('font-size-lg', `calc(${fontSizesDefaultVar} * 1.3)`), // 1.0625rem
   xl: clerkCssVar('font-size-xl', `calc(${fontSizesDefaultVar} * 1.85)`), // 1.5rem
 } as const);
diff --git a/packages/clerk-js/src/ui/primitives/AlertIcon.tsx b/packages/clerk-js/src/ui/primitives/AlertIcon.tsx
index 093d63853d9..eb0c9e0ccd3 100644
--- a/packages/clerk-js/src/ui/primitives/AlertIcon.tsx
+++ b/packages/clerk-js/src/ui/primitives/AlertIcon.tsx
@@ -14,7 +14,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
       warning: { color: theme.colors.$warning500 },
       success: { color: theme.colors.$success500 },
       primary: { color: theme.colors.$primary500 },
-      info: { color: theme.colors.$colorTextSecondary },
+      info: { color: theme.colors.$colorMutedForeground },
     },
   },
 }));
diff --git a/packages/clerk-js/src/ui/primitives/Badge.tsx b/packages/clerk-js/src/ui/primitives/Badge.tsx
index f0636b485d4..d196bf0a4aa 100644
--- a/packages/clerk-js/src/ui/primitives/Badge.tsx
+++ b/packages/clerk-js/src/ui/primitives/Badge.tsx
@@ -27,7 +27,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
         [vars.borderColor]: theme.colors.$neutralAlpha150,
       },
       secondary: {
-        [vars.accent]: theme.colors.$colorTextOnPrimaryBackground,
+        [vars.accent]: theme.colors.$colorPrimaryForeground,
         [vars.bg]: theme.colors.$primary500,
         [vars.borderColor]: theme.colors.$primary500,
       },
diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
index b012d4d3e66..93eab244948 100644
--- a/packages/clerk-js/src/ui/primitives/Button.tsx
+++ b/packages/clerk-js/src/ui/primitives/Button.tsx
@@ -51,14 +51,14 @@ const { applyVariants, filterProps } = createVariants(
             [vars.accent]: theme.colors.$primary500,
             [vars.accentHover]: theme.colors.$primaryHover,
             [vars.border]: theme.colors.$primary500,
-            [vars.accentContrast]: theme.colors.$colorTextOnPrimaryBackground,
+            [vars.accentContrast]: theme.colors.$colorPrimaryForeground,
             [vars.alpha]: theme.colors.$neutralAlpha50,
           },
           secondary: {
             [vars.accent]: theme.colors.$colorBackground,
             [vars.accentHover]: `color-mix(in srgb, ${vars.accent}, ${theme.colors.$neutralAlpha50})`,
             [vars.border]: theme.colors.$primary500,
-            [vars.accentContrast]: theme.colors.$colorText,
+            [vars.accentContrast]: theme.colors.$colorForeground,
             [vars.alpha]: theme.colors.$neutralAlpha50,
           },
           neutral: {
diff --git a/packages/clerk-js/src/ui/primitives/FormLabel.tsx b/packages/clerk-js/src/ui/primitives/FormLabel.tsx
index 0ebd122ef57..49698e6a029 100644
--- a/packages/clerk-js/src/ui/primitives/FormLabel.tsx
+++ b/packages/clerk-js/src/ui/primitives/FormLabel.tsx
@@ -7,7 +7,7 @@ import { useFormField } from './hooks/useFormField';
 
 const { applyVariants } = createVariants(theme => ({
   base: {
-    color: theme.colors.$colorText,
+    color: theme.colors.$colorForeground,
     ...common.textVariants(theme).subtitle,
     ...common.disabled(theme),
   },
diff --git a/packages/clerk-js/src/ui/primitives/Heading.tsx b/packages/clerk-js/src/ui/primitives/Heading.tsx
index 3be852f4bce..0495f241eb9 100644
--- a/packages/clerk-js/src/ui/primitives/Heading.tsx
+++ b/packages/clerk-js/src/ui/primitives/Heading.tsx
@@ -4,7 +4,7 @@ import { common, createVariants } from '../styledSystem';
 const { applyVariants, filterProps } = createVariants(theme => ({
   base: {
     boxSizing: 'border-box',
-    color: `${theme.colors.$colorText}`,
+    color: `${theme.colors.$colorForeground}`,
     margin: 0,
   },
   variants: {
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index d40862fc173..37043335ebb 100644
--- a/packages/clerk-js/src/ui/primitives/Input.tsx
+++ b/packages/clerk-js/src/ui/primitives/Input.tsx
@@ -10,8 +10,8 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
     boxSizing: 'border-box',
     margin: 0,
     padding: `${theme.space.$1x5} ${theme.space.$3}`,
-    backgroundColor: theme.colors.$colorInputBackground,
-    color: theme.colors.$colorInputText,
+    backgroundColor: theme.colors.$colorInput,
+    color: theme.colors.$colorInputForeground,
     // outline support for Windows contrast themes
     outline: 'transparent solid 2px',
     outlineOffset: '2px',
@@ -32,7 +32,7 @@ const { applyVariants, filterProps } = createVariants((theme, props) => ({
       animationName: 'onAutoFillStart',
     },
     '::placeholder': {
-      color: theme.colors.$colorTextSecondary,
+      color: theme.colors.$colorMutedForeground,
     },
   },
   variants: {
diff --git a/packages/clerk-js/src/ui/primitives/Link.tsx b/packages/clerk-js/src/ui/primitives/Link.tsx
index 08ef6d89f95..136ef88fa1a 100644
--- a/packages/clerk-js/src/ui/primitives/Link.tsx
+++ b/packages/clerk-js/src/ui/primitives/Link.tsx
@@ -29,7 +29,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
         '&:active': { color: theme.colors.$danger600 },
       },
       neutral: {
-        color: theme.colors.$colorTextSecondary,
+        color: theme.colors.$colorMutedForeground,
       },
       inherit: { color: 'inherit' },
     },
diff --git a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
index d43015df94b..a76d3d56dbb 100644
--- a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
+++ b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
@@ -21,7 +21,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     textVariant: { ...common.textVariants(theme) },
     colorScheme: {
       primary: {
-        [vars.accent]: theme.colors.$colorTextOnPrimaryBackground,
+        [vars.accent]: theme.colors.$colorPrimaryForeground,
         [vars.bg]: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%), ${theme.colors.$primary500}`,
         borderWidth: 0,
       },
diff --git a/packages/clerk-js/src/ui/primitives/Td.tsx b/packages/clerk-js/src/ui/primitives/Td.tsx
index 51357ef6d36..82d1815076f 100644
--- a/packages/clerk-js/src/ui/primitives/Td.tsx
+++ b/packages/clerk-js/src/ui/primitives/Td.tsx
@@ -9,7 +9,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
   base: {
     fontSize: theme.fontSizes.$xs,
     fontWeight: theme.fontWeights.$normal,
-    color: theme.colors.$colorText,
+    color: theme.colors.$colorForeground,
   },
   variants: {},
 }));
diff --git a/packages/clerk-js/src/ui/primitives/Text.tsx b/packages/clerk-js/src/ui/primitives/Text.tsx
index d81f3548477..93ec00b736d 100644
--- a/packages/clerk-js/src/ui/primitives/Text.tsx
+++ b/packages/clerk-js/src/ui/primitives/Text.tsx
@@ -15,12 +15,12 @@ const { applyVariants, filterProps } = createVariants(theme => {
     variants: {
       variant: common.textVariants(theme),
       colorScheme: {
-        body: { color: theme.colors.$colorText },
-        onPrimaryBg: { color: theme.colors.$colorTextOnPrimaryBackground },
+        body: { color: theme.colors.$colorForeground },
+        onPrimaryBg: { color: theme.colors.$colorPrimaryForeground },
         danger: { color: theme.colors.$danger500 },
         success: { color: theme.colors.$success500 },
         warning: { color: theme.colors.$warning500 },
-        secondary: { color: theme.colors.$colorTextSecondary },
+        secondary: { color: theme.colors.$colorMutedForeground },
         inherit: { color: 'inherit' },
       },
       truncate: {
diff --git a/packages/clerk-js/src/ui/primitives/Th.tsx b/packages/clerk-js/src/ui/primitives/Th.tsx
index 6a416b6e1a3..f018c67c24c 100644
--- a/packages/clerk-js/src/ui/primitives/Th.tsx
+++ b/packages/clerk-js/src/ui/primitives/Th.tsx
@@ -11,7 +11,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     textAlign: 'left',
     fontSize: theme.fontSizes.$sm,
     fontWeight: theme.fontWeights.$normal,
-    color: colors.setAlpha(theme.colors.$colorText, 0.62),
+    color: colors.setAlpha(theme.colors.$colorForeground, 0.62),
     padding: `${theme.space.$2} ${theme.space.$4}`,
   },
   variants: {},
diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
index 471711397ab..c4daabeb3e8 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -1,3 +1,6 @@
+import { colors } from '../utils/colors';
+import { cssSupports } from '../utils/cssSupports';
+import { clerkCssVar } from '../utils/cssVariables';
 import type { InternalTheme } from './types';
 
 const textVariants = (t: InternalTheme) => {
@@ -190,6 +193,15 @@ const mergedColorsBackground = (colorBack: string, colorFront: string) => {
   return `linear-gradient(${colorFront},${colorFront}), linear-gradient(${colorBack}, ${colorBack})`;
 };
 
+const mutedBackground = (t: InternalTheme) => {
+  return cssSupports.colorMix()
+    ? clerkCssVar(
+        'color-muted',
+        t.colors.$colorMuted || `color-mix(in srgb, ${t.colors.$colorBackground}, ${t.colors.$neutralAlpha50})`,
+      )
+    : mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha50);
+};
+
 const visuallyHidden = () =>
   ({
     clip: 'rect(0 0 0 0)',
@@ -210,6 +222,7 @@ export const common = {
   borderColor,
   centeredFlex,
   maxHeightScroller,
+  mutedBackground,
   unstyledScrollbar,
   mergedColorsBackground,
   visuallyHidden,
diff --git a/packages/themes/src/themes/dark.ts b/packages/themes/src/themes/dark.ts
index 59f1f1cb7c2..3e560d7f0dc 100644
--- a/packages/themes/src/themes/dark.ts
+++ b/packages/themes/src/themes/dark.ts
@@ -5,10 +5,10 @@ export const dark = experimental_createTheme({
     colorBackground: '#212126',
     colorNeutral: 'white',
     colorPrimary: '#ffffff',
-    colorTextOnPrimaryBackground: 'black',
-    colorText: 'white',
-    colorInputText: 'white',
-    colorInputBackground: '#26262B',
+    colorPrimaryForeground: 'black',
+    colorForeground: 'white',
+    colorInputForeground: 'white',
+    colorInput: '#26262B',
   },
   elements: {
     providerIcon__apple: { filter: 'invert(1)' },
diff --git a/packages/themes/src/themes/shadesOfPurple.ts b/packages/themes/src/themes/shadesOfPurple.ts
index 7099a2639e8..f99f111d306 100644
--- a/packages/themes/src/themes/shadesOfPurple.ts
+++ b/packages/themes/src/themes/shadesOfPurple.ts
@@ -6,8 +6,8 @@ export const shadesOfPurple = experimental_createTheme({
   variables: {
     colorBackground: '#3f3c77',
     colorPrimary: '#f8d80d',
-    colorTextOnPrimaryBackground: '#38375f',
-    colorInputText: '#a1fdfe',
+    colorPrimaryForeground: '#38375f',
+    colorInputForeground: '#a1fdfe',
     colorShimmer: 'rgba(161,253,254,0.36)',
   },
 });
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index a4e427dfd3b..b3a4e777209 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -624,9 +624,16 @@ export type Variables = {
   /**
    * The color of text appearing on top of an element that with a background color of {@link Variables.colorPrimary},
    * eg: solid primary buttons.
+   * @deprecated Use {@link Variables.colorPrimaryForeground} instead.
    * @default 'white'
    */
   colorTextOnPrimaryBackground?: CssColor;
+  /**
+   * The color of text appearing on top of an element that with a background color of {@link Variables.colorPrimary},
+   * eg: solid primary buttons.
+   * @default 'white'
+   */
+  colorPrimaryForeground?: CssColor;
   /**
    * The color used to indicate errors or destructive actions. Set this to your brand's danger color.
    * @default '#EF4444'
@@ -651,15 +658,33 @@ export type Variables = {
   colorNeutral?: CssColorOrAlphaScale;
   /**
    * The default text color.
+   * @deprecated Use {@link Variables.colorForeground} instead.
    * @default '#212126'
    */
   colorText?: CssColor;
+  /**
+   * The default text color.
+   * @default 'inherit'
+   */
+  colorForeground?: CssColor;
+  /**
+   * The background color for elements of lower importance, eg: a muted background.
+   * his color is a lighter shade of {@link Variables.background} and {@link Variables.colorNeutral}.
+   */
+  colorMuted?: CssColor;
   /**
    * The text color for elements of lower importance, eg: a subtitle text.
    * This color is a lighter shade of {@link Variables.colorText}.
+   * @deprecated Use {@link Variables.colorMutedForeground} instead.
    * @default '#747686'
    */
   colorTextSecondary?: CssColor;
+  /**
+   * The text color for elements of lower importance, eg: a subtitle text.
+   * This color is a lighter shade of {@link Variables.colorText}.
+   * @default '#747686'
+   */
+  colorMutedForeground?: CssColor;
   /**
    * The background color for the card container.
    * @default 'white'
@@ -667,14 +692,26 @@ export type Variables = {
   colorBackground?: CssColor;
   /**
    * The default text color inside input elements. To customise the input background color instead, use {@link Variables.colorInputBackground}.
+   * @deprecated Use {@link Variables.colorInputForeground} instead.
    * @default 'black'
    */
   colorInputText?: CssColor;
+  /**
+   * The default text color inside input elements. To customise the input background color instead, use {@link Variables.colorInputBackground}.
+   * @default 'black'
+   */
+  colorInputForeground?: CssColor;
   /**
    * The background color for all input elements.
+   * @deprecated Use {@link Variables.colorInput} instead.
    * @default 'white'
    */
   colorInputBackground?: CssColor;
+  /**
+   * The background color for all input elements.
+   * @default 'white'
+   */
+  colorInput?: CssColor;
   /**
    * The color of the avatar shimmer
    * @default 'rgba(255, 255, 255, 0.36)'
@@ -717,9 +754,15 @@ export type Variables = {
   borderRadius?: CssLengthUnit;
   /**
    * The base spacing unit that all margins, paddings and gaps between the elements are derived from.
+   * @deprecated Use {@link Variables.spacing} instead.
    * @default '1rem'
    */
   spacingUnit?: CssLengthUnit;
+  /**
+   * The base spacing that all margins, paddings and gaps between the elements are derived from.
+   * @default '1rem'
+   */
+  spacing?: CssLengthUnit;
 };
 
 export type BaseThemeTaggedType = { __type: 'prebuilt_appearance' };