diff --git a/.changeset/cuddly-heads-battle.md b/.changeset/cuddly-heads-battle.md
new file mode 100644
index 00000000000..c1041747f41
--- /dev/null
+++ b/.changeset/cuddly-heads-battle.md
@@ -0,0 +1,37 @@
+---
+'@clerk/clerk-js': minor
+'@clerk/themes': minor
+'@clerk/types': minor
+---
+
+Expose Clerk CSS variables as an option for theming Clerk's components. This change introduces CSS custom properties that allow developers to customize Clerk's appearance using standard CSS variables, providing a more flexible theming approach.
+
+
+```css
+:root {
+  --clerk-color-primary: #6D47FF;
+  --clerk-color-primary-foreground: #FFFFFF;
+}
+```
+
+## Deprecated variables
+
+
+| Deprecated | New |
+|--------|--------|
+| `colorText` | `colorForeground` |
+| `colorTextOnPrimaryBackground` | `colorPrimaryForeground` |
+| `colorTextSecondary` | `colorMutedForeground` |
+| `spacingUnit` | `spacing` |
+| `colorInputText` | `colorInputForeground` |
+| `colorInputBackground` | `colorInput` |
+
+Deprecated variables will continue to work but will be removed in the next major version.
+
+## New variables
+
+- `colorRing` - The color of the ring when an interactive element is focused.
+- `colorMuted` - The background color for elements of lower importance, eg: a muted background.
+- `colorShadow` - The base shadow color used in the components.
+- `colorBorder` - The base border color used in the components.
+- `colorModalBackdrop` - The background color of the modal backdrop.
\ No newline at end of file
diff --git a/packages/clerk-js/bundlewatch.config.json b/packages/clerk-js/bundlewatch.config.json
index c057b996f26..c2337fff6e8 100644
--- a/packages/clerk-js/bundlewatch.config.json
+++ b/packages/clerk-js/bundlewatch.config.json
@@ -1,11 +1,11 @@
 {
   "files": [
-    { "path": "./dist/clerk.js", "maxSize": "616kB" },
+    { "path": "./dist/clerk.js", "maxSize": "616.27KB" },
     { "path": "./dist/clerk.browser.js", "maxSize": "72.2KB" },
-    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115KB" },
+    { "path": "./dist/clerk.legacy.browser.js", "maxSize": "115.08KB" },
     { "path": "./dist/clerk.headless*.js", "maxSize": "55KB" },
-    { "path": "./dist/ui-common*.js", "maxSize": "111KB" },
-    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "115KB" },
+    { "path": "./dist/ui-common*.js", "maxSize": "111.52KB" },
+    { "path": "./dist/ui-common*.legacy.*.js", "maxSize": "115.33KB" },
     { "path": "./dist/vendors*.js", "maxSize": "40.2KB" },
     { "path": "./dist/coinbase*.js", "maxSize": "38KB" },
     { "path": "./dist/stripe-vendors*.js", "maxSize": "1KB" },
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 934a526b196..e26e3e3c563 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..6bfa96623bf 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>
@@ -236,7 +236,7 @@ export const CreateApiKeyForm: React.FC<CreateApiKeyFormProps> = ({ onCreate, is
             sx={t => ({
               borderTopWidth: t.borderWidths.$normal,
               borderTopStyle: t.borderStyles.$solid,
-              borderTopColor: t.colors.$neutralAlpha100,
+              borderTopColor: t.colors.$borderAlpha100,
               paddingTop: t.space.$4,
               paddingBottom: t.space.$4,
             })}
diff --git a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
index 4240e528ca5..6d5bd306a10 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutComplete.tsx
@@ -246,7 +246,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',
@@ -320,7 +320,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 31a987c7195..4b207ee818a 100644
--- a/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/CheckoutForm.tsx
@@ -43,7 +43,7 @@ export const CheckoutForm = withCardStateProvider(() => {
           padding: t.space.$4,
           borderBottomWidth: t.borderWidths.$normal,
           borderBottomStyle: t.borderStyles.$solid,
-          borderBottomColor: t.colors.$neutralAlpha100,
+          borderBottomColor: t.colors.$borderAlpha100,
         })}
       >
         <LineItems.Root>
@@ -230,7 +230,7 @@ export const PayWithTestPaymentSource = () => {
         borderRadius: t.radii.$md,
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
-        borderColor: t.colors.$neutralAlpha100,
+        borderColor: t.colors.$borderAlpha100,
         display: 'flex',
         flexDirection: 'column',
         rowGap: t.space.$2,
@@ -375,7 +375,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/Checkout/parts.tsx b/packages/clerk-js/src/ui/components/Checkout/parts.tsx
index f8db48b2019..cd46f31f895 100644
--- a/packages/clerk-js/src/ui/components/Checkout/parts.tsx
+++ b/packages/clerk-js/src/ui/components/Checkout/parts.tsx
@@ -64,7 +64,7 @@ export const InvalidPlanScreen = () => {
             padding: t.space.$4,
             borderBottomWidth: t.borderWidths.$normal,
             borderBottomStyle: t.borderStyles.$solid,
-            borderBottomColor: t.colors.$neutralAlpha100,
+            borderBottomColor: t.colors.$borderAlpha100,
           })}
         >
           <LineItems.Root>
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index bde621e62ac..b7d653ce884 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,
                       })}
                     />
@@ -173,7 +173,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
                     borderRadius: t.radii.$md,
                     borderWidth: t.borderWidths.$normal,
                     borderStyle: t.borderStyles.$dashed,
-                    borderColor: t.colors.$neutralAlpha200,
+                    borderColor: t.colors.$borderAlpha200,
                     backgroundColor: t.colors.$neutralAlpha50,
                     ':hover': {
                       backgroundColor: t.colors.$neutralAlpha50,
diff --git a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
index 1db5f4580c0..6841e39dc2a 100644
--- a/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/clerk-js/src/ui/components/OAuthConsent/OAuthConsent.tsx
@@ -113,7 +113,7 @@ export function OAuthConsentInternal() {
               textAlign: 'left',
               borderWidth: t.borderWidths.$normal,
               borderStyle: t.borderStyles.$solid,
-              borderColor: t.colors.$neutralAlpha100,
+              borderColor: t.colors.$borderAlpha100,
               borderRadius: t.radii.$lg,
               overflow: 'hidden',
             })}
@@ -146,13 +146,13 @@ export function OAuthConsentInternal() {
                     paddingBlock: t.space.$2,
                     borderTopWidth: t.borderWidths.$normal,
                     borderTopStyle: t.borderStyles.$solid,
-                    borderTopColor: t.colors.$neutralAlpha100,
+                    borderTopColor: t.colors.$borderAlpha100,
                     '&::before': {
                       content: '""',
                       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,
@@ -340,7 +340,7 @@ function ConnectionIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Themable
           borderRadius: t.radii.$circle,
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
-          borderColor: t.colors.$neutralAlpha100,
+          borderColor: t.colors.$borderAlpha100,
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
@@ -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/OrganizationListPage.tsx b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
index 6bf1dcc6c1f..5b6ca5fee23 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/OrganizationListPage.tsx
@@ -64,7 +64,7 @@ const CreateOrganizationButton = ({
       sx={t => ({
         borderTopWidth: t.borderWidths.$normal,
         borderTopStyle: t.borderStyles.$solid,
-        borderTopColor: t.colors.$neutralAlpha100,
+        borderTopColor: t.colors.$borderAlpha100,
         padding: `${t.space.$5} ${t.space.$5}`,
       })}
       iconSx={t => ({
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
index 693f8b627e6..46875207cad 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
@@ -19,7 +19,7 @@ export const PreviewListItems = (props: PropsWithChildren) => {
         overflowY: 'auto',
         borderTopWidth: t.borderWidths.$normal,
         borderTopStyle: t.borderStyles.$solid,
-        borderTopColor: t.colors.$neutralAlpha100,
+        borderTopColor: t.colors.$borderAlpha100,
         ...common.unstyledScrollbar(t),
       })}
     >
@@ -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,
   },
 });
 
@@ -54,7 +54,7 @@ export const PreviewListItem = (
           justifyContent: 'space-between',
           borderTopWidth: t.borderWidths.$normal,
           borderTopStyle: t.borderStyles.$solid,
-          borderTopColor: t.colors.$neutralAlpha100,
+          borderTopColor: t.colors.$borderAlpha100,
         }),
         sharedStyles,
       ]}
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..27405986aa3 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -38,7 +38,7 @@ export const OrganizationMembersTabInvitations = withCardStateProvider(() => {
               paddingRight: t.space.$1,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
-              borderBottomColor: t.colors.$neutralAlpha100,
+              borderBottomColor: t.colors.$borderAlpha100,
               [mqu.md]: {
                 flexDirection: 'column',
                 gap: t.space.$2,
@@ -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..c05f7ae6b5a 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -37,7 +37,7 @@ export const OrganizationMembersTabRequests = () => {
               paddingRight: t.space.$1,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
-              borderBottomColor: t.colors.$neutralAlpha100,
+              borderBottomColor: t.colors.$borderAlpha100,
               [mqu.md]: {
                 flexDirection: 'column',
                 gap: t.space.$2,
@@ -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/OrganizationProfile/OrganizationPlansPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx
index 93b8acefdc4..39e60eeb446 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationPlansPage.tsx
@@ -17,7 +17,7 @@ const OrganizationPlansPageInternal = () => {
         sx={t => ({
           borderBottomWidth: t.borderWidths.$normal,
           borderBottomStyle: t.borderStyles.$solid,
-          borderBottomColor: t.colors.$neutralAlpha100,
+          borderBottomColor: t.colors.$borderAlpha100,
           marginBlockEnd: t.space.$4,
           paddingBlockEnd: t.space.$4,
         })}
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 56fd77dc31f..541546f0c6f 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -146,7 +146,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
             sx={t => ({
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
-              borderBottomColor: t.colors.$neutralAlpha100,
+              borderBottomColor: t.colors.$borderAlpha100,
             })}
           >
             <Flex
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/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
index 3da9ac03f0a..fd347bedc05 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -67,7 +67,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
         // 4 items + 4px border (four 1px borders)
         maxHeight: `calc((4 * ${t.sizes.$17}) + 4px)`,
         overflowY: 'auto',
-        '> button,div': { border: `0 solid ${t.colors.$neutralAlpha100}` },
+        '> button,div': { border: `0 solid ${t.colors.$borderAlpha100}` },
         '>:not([hidden])~:not([hidden])': {
           borderTopWidth: '1px',
           borderBottomWidth: '0',
@@ -101,7 +101,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           onClick={() => onOrganizationClick(organization)}
           role='menuitem'
           sx={t => ({
-            border: `0 solid ${t.colors.$neutralAlpha100}`,
+            border: `0 solid ${t.colors.$borderAlpha100}`,
           })}
         >
           <OrganizationPreview
diff --git a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
index 16e99a1343b..77b3c7f0e5c 100644
--- a/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentAttempts/PaymentAttemptPage.tsx
@@ -48,7 +48,7 @@ export const PaymentAttemptPage = () => {
         sx={t => ({
           borderBlockEndWidth: t.borderWidths.$normal,
           borderBlockEndStyle: t.borderStyles.$solid,
-          borderBlockEndColor: t.colors.$neutralAlpha100,
+          borderBlockEndColor: t.colors.$borderAlpha100,
           marginBlockEnd: t.space.$4,
           paddingBlockEnd: t.space.$4,
         })}
@@ -72,7 +72,7 @@ export const PaymentAttemptPage = () => {
           sx={t => ({
             borderWidth: t.borderWidths.$normal,
             borderStyle: t.borderStyles.$solid,
-            borderColor: t.colors.$neutralAlpha100,
+            borderColor: t.colors.$borderAlpha100,
             borderRadius: t.radii.$lg,
             overflow: 'clip',
           })}
@@ -102,7 +102,7 @@ export const PaymentAttemptPage = () => {
                   display: 'flex',
                   alignItems: 'center',
                   gap: t.space.$0x25,
-                  color: t.colors.$colorTextSecondary,
+                  color: t.colors.$colorMutedForeground,
                 })}
               >
                 <CopyButton
@@ -171,7 +171,7 @@ export const PaymentAttemptPage = () => {
               background: t.colors.$neutralAlpha25,
               borderBlockStartWidth: t.borderWidths.$normal,
               borderBlockStartStyle: t.borderStyles.$solid,
-              borderBlockStartColor: t.colors.$neutralAlpha100,
+              borderBlockStartColor: t.colors.$borderAlpha100,
               display: 'flex',
               justifyContent: 'space-between',
             })}
@@ -228,7 +228,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
         borderRadius: t.radii.$sm,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: t.colors.$neutralAlpha200,
+          outlineColor: t.colors.$colorRing,
         },
       })}
       focusRing={false}
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/AddPaymentSource.tsx
index d9222209a1b..c6e04711752 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/PaymentSources/PaymentSources.tsx b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx
index 24f3ca99ffe..88af4c5f158 100644
--- a/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentSources/PaymentSources.tsx
@@ -130,7 +130,7 @@ export const PaymentSources = withCardStateProvider(() => {
         flex: 1,
         borderTopWidth: t.borderWidths.$normal,
         borderTopStyle: t.borderStyles.$solid,
-        borderTopColor: t.colors.$neutralAlpha100,
+        borderTopColor: t.colors.$borderAlpha100,
       })}
     >
       <Action.Root>
diff --git a/packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx b/packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx
index 973a3c71bba..66a9968ac29 100644
--- a/packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx
+++ b/packages/clerk-js/src/ui/components/PaymentSources/TestPaymentSource.tsx
@@ -12,7 +12,7 @@ export const TestPaymentSource = () => {
         borderRadius: t.radii.$md,
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
-        borderColor: t.colors.$neutralAlpha100,
+        borderColor: t.colors.$borderAlpha100,
         display: 'flex',
         flexDirection: 'column',
         rowGap: t.space.$2,
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableDefault.tsx
index f70faa325a1..94519af5c42 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';
@@ -167,13 +166,10 @@ 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,
+        borderColor: t.colors.$borderAlpha100,
         boxShadow: !isCompact ? t.shadows.$cardBoxShadow : t.shadows.$tableBodyShadow,
         borderRadius: t.radii.$xl,
         overflow: 'hidden',
@@ -209,7 +205,7 @@ function Card(props: CardProps) {
               backgroundColor: hasFeatures ? t.colors.$colorBackground : 'transparent',
               borderTopWidth: hasFeatures ? t.borderWidths.$normal : 0,
               borderTopStyle: t.borderStyles.$solid,
-              borderTopColor: t.colors.$neutralAlpha100,
+              borderTopColor: t.colors.$borderAlpha100,
             })}
             data-variant={isCompact ? 'compact' : 'default'}
           >
@@ -229,7 +225,7 @@ function Card(props: CardProps) {
               padding: isCompact ? t.space.$3 : t.space.$4,
               borderTopWidth: t.borderWidths.$normal,
               borderTopStyle: t.borderStyles.$solid,
-              borderTopColor: t.colors.$neutralAlpha100,
+              borderTopColor: t.colors.$borderAlpha100,
               order: ctaPosition === 'top' ? -1 : undefined,
             })}
           >
diff --git a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
index 138f37fb540..16169a43d0a 100644
--- a/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
+++ b/packages/clerk-js/src/ui/components/PricingTable/PricingTableMatrix.tsx
@@ -102,7 +102,7 @@ export function PricingTableMatrix({
               backgroundColor: t.colors.$colorBackground,
               borderBottomWidth: t.borderWidths.$normal,
               borderBottomStyle: t.borderStyles.$solid,
-              borderBottomColor: t.colors.$neutralAlpha100,
+              borderBottomColor: t.colors.$borderAlpha100,
               zIndex: 1,
             })}
           >
@@ -351,7 +351,7 @@ export function PricingTableMatrix({
                     gridTemplateColumns,
                     borderBottomWidth: t.borderWidths.$normal,
                     borderBottomStyle: t.borderStyles.$solid,
-                    borderBottomColor: t.colors.$neutralAlpha100,
+                    borderBottomColor: t.colors.$borderAlpha100,
                     ':after': {
                       content: '""',
                       position: 'absolute',
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
index b046da272aa..bd4385f4afd 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -41,7 +41,7 @@ const SignInAccountSwitcherInternal = () => {
             sx={t => ({
               borderTopWidth: t.borderWidths.$normal,
               borderTopStyle: t.borderStyles.$solid,
-              borderTopColor: t.colors.$neutralAlpha100,
+              borderTopColor: t.colors.$borderAlpha100,
             })}
           >
             <Actions role='menu'>
diff --git a/packages/clerk-js/src/ui/components/Statements/Statement.tsx b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
index 1192e5328ab..1e5b0614272 100644
--- a/packages/clerk-js/src/ui/components/Statements/Statement.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/Statement.tsx
@@ -16,7 +16,7 @@ function Root({ children }: { children: React.ReactNode }) {
       sx={t => ({
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
-        borderColor: t.colors.$neutralAlpha100,
+        borderColor: t.colors.$borderAlpha100,
         borderRadius: t.radii.$lg,
         overflow: 'clip',
       })}
@@ -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
@@ -116,7 +116,7 @@ function SectionHeader({ text }: { text: string | LocalizationKey }) {
         background: t.colors.$neutralAlpha50,
         borderBlockWidth: t.borderWidths.$normal,
         borderBlockStyle: t.borderStyles.$solid,
-        borderBlockColor: t.colors.$neutralAlpha100,
+        borderBlockColor: t.colors.$borderAlpha100,
       })}
     >
       <Heading
@@ -154,7 +154,7 @@ function SectionContentItem({ children }: { children: React.ReactNode }) {
         '&:not(:first-child)': {
           borderBlockStartWidth: t.borderWidths.$normal,
           borderBlockStartStyle: t.borderStyles.$solid,
-          borderBlockStartColor: t.colors.$neutralAlpha100,
+          borderBlockStartColor: t.colors.$borderAlpha100,
         },
       })}
     >
@@ -255,7 +255,7 @@ function SectionContentDetailsList({ children }: { children: React.ReactNode })
         padding: 0,
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
-        borderColor: t.colors.$neutralAlpha100,
+        borderColor: t.colors.$borderAlpha100,
         borderRadius: t.radii.$md,
         overflow: 'hidden',
       })}
@@ -299,7 +299,7 @@ function SectionContentDetailsListItem({
         '&:not(:first-child)': {
           borderBlockStartWidth: t.borderWidths.$normal,
           borderBlockStartStyle: t.borderStyles.$solid,
-          borderBlockStartColor: t.colors.$neutralAlpha100,
+          borderBlockStartColor: t.colors.$borderAlpha100,
         },
       })}
     >
@@ -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' ? (
@@ -376,7 +376,7 @@ function Footer({ label, value }: { label: string | LocalizationKey; value: stri
         background: t.colors.$neutralAlpha25,
         borderBlockStartWidth: t.borderWidths.$normal,
         borderBlockStartStyle: t.borderStyles.$solid,
-        borderBlockStartColor: t.colors.$neutralAlpha100,
+        borderBlockStartColor: t.colors.$borderAlpha100,
         display: 'flex',
         justifyContent: 'space-between',
       })}
@@ -428,7 +428,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
         borderRadius: t.radii.$sm,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: t.colors.$neutralAlpha200,
+          outlineColor: t.colors.$colorRing,
         },
       })}
       focusRing={false}
diff --git a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
index 31d7ce85901..e7e71184626 100644
--- a/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
+++ b/packages/clerk-js/src/ui/components/Statements/StatementPage.tsx
@@ -33,7 +33,7 @@ export const StatementPage = () => {
         sx={t => ({
           borderBlockEndWidth: t.borderWidths.$normal,
           borderBlockEndStyle: t.borderStyles.$solid,
-          borderBlockEndColor: t.colors.$neutralAlpha100,
+          borderBlockEndColor: t.colors.$borderAlpha100,
           marginBlockEnd: t.space.$4,
           paddingBlockEnd: t.space.$4,
         })}
diff --git a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
index 410f52ece60..669001e7058 100644
--- a/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
+++ b/packages/clerk-js/src/ui/components/SubscriptionDetails/index.tsx
@@ -471,7 +471,7 @@ const SubscriptionCard = ({ subscription }: { subscription: CommerceSubscription
             sx={t => ({
               fontSize: t.fontSizes.$lg,
               fontWeight: t.fontWeights.$semibold,
-              color: t.colors.$colorText,
+              color: t.colors.$colorForeground,
               marginInlineEnd: 'auto',
             })}
           >
@@ -554,7 +554,7 @@ const DetailRow = ({ label, value }: { label: LocalizationKey; value: string })
       paddingBlock: t.space.$3,
       borderBlockStartWidth: t.borderWidths.$normal,
       borderBlockStartStyle: t.borderStyles.$solid,
-      borderBlockStartColor: t.colors.$neutralAlpha100,
+      borderBlockStartColor: t.colors.$borderAlpha100,
     })}
   >
     <Text
diff --git a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
index effb90e695b..9d6dcd6ee33 100644
--- a/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
+++ b/packages/clerk-js/src/ui/components/Subscriptions/SubscriptionsList.tsx
@@ -140,7 +140,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/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
index 4815a00384a..b8d36543744 100644
--- a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
@@ -31,7 +31,7 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
   const commonActionSx: ThemableCssProp = t => ({
     borderTopWidth: t.borderWidths.$normal,
     borderTopStyle: t.borderStyles.$solid,
-    borderTopColor: t.colors.$neutralAlpha100,
+    borderTopColor: t.colors.$borderAlpha100,
     padding: `${t.space.$4} ${t.space.$5}`,
   });
 
@@ -60,7 +60,7 @@ export const SingleSessionActions = (props: SingleSessionActionsProps) => {
       sx={t => ({
         borderTopWidth: t.borderWidths.$normal,
         borderTopStyle: t.borderStyles.$solid,
-        borderTopColor: t.colors.$neutralAlpha100,
+        borderTopColor: t.colors.$borderAlpha100,
       })}
     >
       {menutItems?.map((item: MenuItem) => {
@@ -269,7 +269,7 @@ export const MultiSessionActions = (props: MultiSessionActionsProps) => {
         sx={t => ({
           borderTopStyle: t.borderStyles.$solid,
           borderTopWidth: t.borderWidths.$normal,
-          borderTopColor: t.colors.$neutralAlpha100,
+          borderTopColor: t.colors.$borderAlpha100,
         })}
       >
         {otherSessions.map(session => (
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/MfaBackupCodeList.tsx b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
index 89244ccd0c1..c94fb66c146 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/MfaBackupCodeList.tsx
@@ -59,7 +59,7 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
         sx={t => ({
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
-          borderColor: t.colors.$neutralAlpha100,
+          borderColor: t.colors.$borderAlpha100,
           borderRadius: t.radii.$lg,
         })}
       >
@@ -82,13 +82,13 @@ export const MfaBackupCodeList = (props: MfaBackupCodeListProps) => {
           sx={t => ({
             borderTopWidth: t.borderWidths.$normal,
             borderTopStyle: t.borderStyles.$solid,
-            borderTopColor: t.colors.$neutralAlpha100,
+            borderTopColor: t.colors.$borderAlpha100,
             gridTemplateColumns: `repeat(3, minmax(0, 1fr))`,
             '>:not([hidden])~:not([hidden])': {
               borderRightWidth: '0px',
               borderLeftWidth: '1px',
               borderStyle: 'solid',
-              borderColor: t.colors.$neutralAlpha100,
+              borderColor: t.colors.$borderAlpha100,
             },
             '>:first-child': {
               borderBottomLeftRadius: t.radii.$lg,
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/PlansPage.tsx b/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx
index cf2ea151153..63749bf2676 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PlansPage.tsx
@@ -14,7 +14,7 @@ const PlansPageInternal = () => {
         sx={t => ({
           borderBottomWidth: t.borderWidths.$normal,
           borderBottomStyle: t.borderStyles.$solid,
-          borderBottomColor: t.colors.$neutralAlpha100,
+          borderBottomColor: t.colors.$borderAlpha100,
           marginBlockEnd: t.space.$4,
           paddingBlockEnd: t.space.$4,
         })}
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/parseAppearance.ts b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
index d0ee1606443..be3e2c45b01 100644
--- a/packages/clerk-js/src/ui/customizables/parseAppearance.ts
+++ b/packages/clerk-js/src/ui/customizables/parseAppearance.ts
@@ -10,6 +10,7 @@ import {
   createFontSizeScale,
   createFontWeightScale,
   createRadiiUnits,
+  createShadowsUnits,
   createSpaceScale,
 } from './parseVariables';
 
@@ -144,5 +145,6 @@ const createInternalThemeFromVariables = (theme: Theme | undefined): DeepPartial
   const fontSizes = { ...createFontSizeScale(theme) };
   const fontWeights = { ...createFontWeightScale(theme) };
   const fonts = { ...createFonts(theme) };
-  return createInternalTheme({ colors, radii, space, fontSizes, fontWeights, fonts } as any);
+  const shadows = { ...createShadowsUnits(theme) };
+  return createInternalTheme({ colors, radii, space, fontSizes, fontWeights, fonts, shadows } as any);
 };
diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index 9a8a49017a7..e8665a841c7 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -1,13 +1,31 @@
 import type { Theme } from '@clerk/types';
 
-import { spaceScaleKeys } from '../foundations/sizes';
-import type { fontSizes, fontWeights } from '../foundations/typography';
+import { createShadowSet, generateShadow } from '../foundations/shadows';
+import { BORDER_RADIUS_SCALE_RATIOS, spaceScaleKeys } from '../foundations/sizes';
+import { FONT_SIZE_SCALE_RATIOS, type FontSizeKey, type fontWeights } from '../foundations/typography';
 import { colors } from '../utils/colors';
 import { colorOptionToThemedAlphaScale, colorOptionToThemedLightnessScale } from '../utils/colors/scales';
+import { createAlphaColorMixString } from '../utils/colors/utils';
 import { cssSupports } from '../utils/cssSupports';
 import { fromEntries } from '../utils/fromEntries';
 import { removeUndefinedProps } from '../utils/removeUndefinedProps';
 
+const createMutedForegroundColor = (variables: NonNullable<Theme['variables']>) => {
+  if (variables.colorMutedForeground) {
+    return colors.toHslaString(variables.colorMutedForeground);
+  }
+
+  if (variables.colorTextSecondary) {
+    return colors.toHslaString(variables.colorTextSecondary);
+  }
+
+  if (variables.colorForeground) {
+    return colors.makeTransparent(variables.colorForeground, 0.35);
+  }
+
+  return colors.makeTransparent(variables.colorText, 0.35);
+};
+
 export const createColorScales = (theme: Theme) => {
   const variables = removeInvalidValues(theme.variables || {});
 
@@ -21,6 +39,10 @@ export const createColorScales = (theme: Theme) => {
   const primaryAlphaScale = colorOptionToThemedAlphaScale(primaryScale?.primary500, 'primaryAlpha');
   const successAlphaScale = colorOptionToThemedAlphaScale(successScale?.success500, 'successAlpha');
   const warningAlphaScale = colorOptionToThemedAlphaScale(warningScale?.warning500, 'warningAlpha');
+  const borderAlphaScale = colorOptionToThemedAlphaScale(
+    variables.colorBorder || variables.colorNeutral,
+    'borderAlpha',
+  );
 
   return removeUndefinedProps({
     ...dangerScale,
@@ -32,15 +54,29 @@ export const createColorScales = (theme: Theme) => {
     ...primaryAlphaScale,
     ...successAlphaScale,
     ...warningAlphaScale,
+    ...borderAlphaScale,
     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: createMutedForegroundColor(variables),
+    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,
+    colorRing: variables.colorRing ? colors.toHslaString(variables.colorRing) : undefined,
+    colorShadow: variables.colorShadow ? colors.toHslaString(variables.colorShadow) : undefined,
+    colorModalBackdrop: variables.colorModalBackdrop ? colors.toHslaString(variables.colorModalBackdrop) : undefined,
   });
 };
 
@@ -95,23 +131,24 @@ export const createRadiiUnits = (theme: Theme) => {
 
   const md = borderRadius === 'none' ? '0' : borderRadius;
   return {
-    sm: `calc(${md} * 0.66)`,
+    sm: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.sm})`,
     md,
-    lg: `calc(${md} * 1.33)`,
-    xl: `calc(${md} * 2)`,
+    lg: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.lg})`,
+    xl: `calc(${md} * ${BORDER_RADIUS_SCALE_RATIOS.xl})`,
   };
 };
 
 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})`];
     }),
   );
 };
@@ -119,21 +156,32 @@ export const createSpaceScale = (theme: Theme) => {
 // We want to keep the same ratio between the font sizes we have for the default theme
 // This is directly related to the fontSizes object in the theme default foundations
 // ref: src/ui/foundations/typography.ts
-export const createFontSizeScale = (theme: Theme): Record<keyof typeof fontSizes, string> | undefined => {
+export const createFontSizeScale = (theme: Theme): Partial<Record<FontSizeKey, string>> | undefined => {
   const { fontSize } = theme.variables || {};
   if (fontSize === undefined) {
     return;
   }
-  return {
-    xs: `calc(${fontSize} * 0.8)`,
-    sm: `calc(${fontSize} * 0.9)`,
-    md: fontSize,
-    lg: `calc(${fontSize} * 1.3)`,
-    xl: `calc(${fontSize} * 1.85)`,
-  };
+
+  if (typeof fontSize === 'object') {
+    // When fontSize is an object, filter out undefined values and return only defined properties
+    return removeUndefinedProps(
+      Object.fromEntries(
+        Object.entries(FONT_SIZE_SCALE_RATIOS).map(([key, _ratio]) => [key, fontSize[key as FontSizeKey] ?? undefined]),
+      ) as Record<FontSizeKey, string | undefined>,
+    );
+  }
+
+  // When fontSize is a string, calculate all sizes based on the base value and fractions for precision
+  // Using fractions instead of decimal ratios to avoid floating-point precision issues
+  return Object.fromEntries(
+    Object.entries(FONT_SIZE_SCALE_RATIOS).map(([key, fraction]) => [
+      key,
+      fraction === '1' ? fontSize : `calc(${fontSize} * ${fraction})`,
+    ]),
+  ) as Record<FontSizeKey, string>;
 };
 
-export const createFontWeightScale = (theme: Theme): Record<keyof typeof fontWeights, any> => {
+export const createFontWeightScale = (theme: Theme): Partial<Record<keyof typeof fontWeights, string | number>> => {
   const { fontWeight } = theme.variables || {};
   return removeUndefinedProps({ ...fontWeight });
 };
@@ -142,3 +190,20 @@ export const createFonts = (theme: Theme) => {
   const { fontFamily, fontFamilyButtons } = theme.variables || {};
   return removeUndefinedProps({ main: fontFamily, buttons: fontFamilyButtons });
 };
+
+export const createShadowsUnits = (theme: Theme) => {
+  const { colorShadow } = theme.variables || {};
+  if (!colorShadow) {
+    return;
+  }
+
+  const shadowColor = colors.toHslaString(colorShadow);
+  if (!shadowColor) {
+    return;
+  }
+
+  return createShadowSet(
+    shadowColor,
+    generateShadow((color, alpha) => createAlphaColorMixString(color, alpha * 100)),
+  );
+};
diff --git a/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx b/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx
index 9c726b8f165..6bbbf3ed7ed 100644
--- a/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx
+++ b/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx
@@ -30,7 +30,7 @@ export const ActionCard = (props: ActionCardProps) => {
           padding: `${t.space.$4} ${t.space.$5}`,
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
-          borderColor: t.colors.$neutralAlpha100,
+          borderColor: t.colors.$borderAlpha100,
           ...styles(t)[variant],
         }),
         sx,
diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
index e9215b21e17..ca5959372a3 100644
--- a/packages/clerk-js/src/ui/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -13,7 +13,7 @@ export const Actions = (props: PropsOfComponent<typeof Flex>) => {
     <Col
       sx={[
         t => ({
-          '> button,div': { border: `0 solid ${t.colors.$neutralAlpha100}` },
+          '> button,div': { border: `0 solid ${t.colors.$borderAlpha100}` },
           '>:not([hidden],:empty)~:not([hidden],:empty)': {
             borderTopWidth: '1px',
             borderBottomWidth: '0',
diff --git a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
index d792f4294f2..68f8905f267 100644
--- a/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
+++ b/packages/clerk-js/src/ui/elements/ApplicationLogo.tsx
@@ -5,23 +5,20 @@ import { descriptors, Flex, Image, useAppearance } from '../customizables';
 import type { PropsOfComponent } from '../styledSystem';
 import { RouterLink } from './RouterLink';
 
-type WidthInRem = `${string}rem`;
-const getContainerHeightForImageRatio = (imageRef: React.RefObject<HTMLImageElement>, remWidth: WidthInRem) => {
-  const baseFontSize = 16;
-  const base = Number.parseFloat(remWidth.replace('rem', '')) * baseFontSize;
+const getContainerHeightForImageRatio = (imageRef: React.RefObject<HTMLImageElement>, width: string) => {
   if (!imageRef.current) {
-    return base;
+    return `calc(${width} * 2)`;
   }
   const ratio = imageRef.current.naturalWidth / imageRef.current.naturalHeight;
-  let newHeight = `${base}px`;
+
   if (ratio <= 1) {
     // logo is taller than it is wide
-    newHeight = `${2 * base}px`;
+    return `calc(${width} * 2)`;
   } else if (ratio > 1 && ratio <= 2) {
     // logo is up to 2x wider than it is tall
-    newHeight = `${(2 * base) / ratio}px`;
+    return `calc((${width} * 2) / ${ratio})`;
   }
-  return newHeight;
+  return width;
 };
 
 type ApplicationLogoProps = PropsOfComponent<typeof Flex>;
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/BlockWithTrailingComponent.tsx b/packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx
index b4561a08ab5..027a431071b 100644
--- a/packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx
+++ b/packages/clerk-js/src/ui/elements/BlockWithTrailingComponent.tsx
@@ -37,7 +37,7 @@ export const BlockWithTrailingComponent = (props: BlockWithTrailingComponentProp
           gap: theme.space.$4,
           position: 'relative',
           justifyContent: 'flex-start',
-          borderColor: theme.colors.$neutralAlpha200,
+          borderColor: theme.colors.$borderAlpha200,
         },
         props.sx,
       ]}
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..65fc71ace39 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -39,7 +39,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
           zIndex: t.zIndices.$card,
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
-          borderColor: t.colors.$neutralAlpha50,
+          borderColor: t.colors.$borderAlpha50,
           boxShadow: t.shadows.$cardContentShadow,
           borderRadius: t.radii.$lg,
           position: 'relative',
@@ -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..344d18bba8d 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';
@@ -33,7 +31,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
       padding: `${t.space.$4} ${t.space.$8}`,
       borderTopWidth: t.borderWidths.$normal,
       borderTopStyle: t.borderStyles.$solid,
-      borderTopColor: t.colors.$neutralAlpha100,
+      borderTopColor: t.colors.$borderAlpha100,
     },
   });
 
@@ -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..37e6fff1ced 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
@@ -40,10 +40,10 @@ export const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props,
             width: t.sizes.$100,
             borderWidth: t.borderWidths.$normal,
             borderStyle: t.borderStyles.$solid,
-            borderColor: t.colors.$neutralAlpha100,
+            borderColor: t.colors.$borderAlpha100,
             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..ad88e6b8130 100644
--- a/packages/clerk-js/src/ui/elements/Disclosure.tsx
+++ b/packages/clerk-js/src/ui/elements/Disclosure.tsx
@@ -54,7 +54,7 @@ const Root = React.forwardRef<HTMLDivElement, RootProps>(
           sx={t => ({
             width: '100%',
             borderRadius: t.radii.$lg,
-            boxShadow: `inset 0 0 0 1px ${t.colors.$neutralAlpha100}`,
+            boxShadow: `inset 0 0 0 1px ${t.colors.$borderAlpha100}`,
             backgroundColor: t.colors.$colorBackground,
             isolation: 'isolate',
           })}
@@ -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,
       })}
@@ -167,7 +167,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
             borderRadius: t.radii.$lg,
             borderWidth: t.borderWidths.$normal,
             borderStyle: t.borderStyles.$solid,
-            borderColor: t.colors.$neutralAlpha100,
+            borderColor: t.colors.$borderAlpha100,
             background: common.mergedColorsBackground(
               colors.setAlpha(t.colors.$colorBackground, 1),
               t.colors.$neutralAlpha50,
diff --git a/packages/clerk-js/src/ui/elements/Divider.tsx b/packages/clerk-js/src/ui/elements/Divider.tsx
index caba5a2cfb5..f278fabfa66 100644
--- a/packages/clerk-js/src/ui/elements/Divider.tsx
+++ b/packages/clerk-js/src/ui/elements/Divider.tsx
@@ -58,7 +58,7 @@ const DividerLine = (props?: DividerLineProps) => {
       elementDescriptor={descriptors.dividerLine}
       sx={t => ({
         flex: '1',
-        backgroundColor: t.colors.$neutralAlpha100,
+        backgroundColor: t.colors.$borderAlpha100,
         ...styles,
       })}
     />
diff --git a/packages/clerk-js/src/ui/elements/Drawer.tsx b/packages/clerk-js/src/ui/elements/Drawer.tsx
index f20e4c44d93..6ba9d4d1172 100644
--- a/packages/clerk-js/src/ui/elements/Drawer.tsx
+++ b/packages/clerk-js/src/ui/elements/Drawer.tsx
@@ -264,7 +264,7 @@ const Content = React.forwardRef<HTMLDivElement, ContentProps>(({ children }, re
             borderStartEndRadius: strategy === 'fixed' ? t.radii.$lg : 0,
             borderWidth: t.borderWidths.$normal,
             borderStyle: t.borderStyles.$solid,
-            borderColor: t.colors.$neutralAlpha100,
+            borderColor: t.colors.$borderAlpha100,
             boxShadow: t.shadows.$cardBoxShadow,
             overflow: 'hidden',
             pointerEvents: 'auto',
@@ -304,7 +304,7 @@ const Header = React.forwardRef<HTMLDivElement, HeaderProps>(({ title, children,
           ),
           borderBlockEndWidth: t.borderWidths.$normal,
           borderBlockEndStyle: t.borderStyles.$solid,
-          borderBlockEndColor: t.colors.$neutralAlpha100,
+          borderBlockEndColor: t.colors.$borderAlpha100,
           borderStartStartRadius: t.radii.$lg,
           borderStartEndRadius: t.radii.$lg,
           paddingBlock: title ? t.space.$3 : undefined,
@@ -388,7 +388,7 @@ const Footer = React.forwardRef<HTMLDivElement, FooterProps>(({ children, sx, ..
           ),
           borderBlockStartWidth: t.borderWidths.$normal,
           borderBlockStartStyle: t.borderStyles.$solid,
-          borderBlockStartColor: t.colors.$neutralAlpha100,
+          borderBlockStartColor: t.colors.$borderAlpha100,
           borderEndStartRadius: t.radii.$xl,
           borderEndEndRadius: t.radii.$xl,
           paddingBlock: t.space.$3,
@@ -423,7 +423,7 @@ const Close = React.forwardRef<HTMLButtonElement>((_, ref) => {
         />
       }
       sx={t => ({
-        color: t.colors.$colorTextSecondary,
+        color: t.colors.$colorMutedForeground,
         padding: t.space.$3,
         marginInlineStart: 'auto',
       })}
@@ -532,7 +532,7 @@ const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(
               padding: t.space.$4,
               borderStartStartRadius: t.radii.$md,
               borderStartEndRadius: t.radii.$md,
-              boxShadow: `0 0 0 1px ${t.colors.$neutralAlpha100}`,
+              boxShadow: `0 0 0 1px ${t.colors.$borderAlpha100}`,
             })}
           >
             {children}
diff --git a/packages/clerk-js/src/ui/elements/Form.tsx b/packages/clerk-js/src/ui/elements/Form.tsx
index 20a62c60d8e..1b82595dd9a 100644
--- a/packages/clerk-js/src/ui/elements/Form.tsx
+++ b/packages/clerk-js/src/ui/elements/Form.tsx
@@ -232,7 +232,7 @@ const RadioGroup = (
             sx={t => ({
               borderWidth: t.borderWidths.$normal,
               borderStyle: t.borderStyles.$solid,
-              borderColor: t.colors.$neutralAlpha100,
+              borderColor: t.colors.$borderAlpha100,
               borderRadius: t.radii.$md,
               padding: t.space.$2,
             })}
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 71bf56673fa..f7cbe03eddb 100644
--- a/packages/clerk-js/src/ui/elements/LineItems.tsx
+++ b/packages/clerk-js/src/ui/elements/LineItems.tsx
@@ -64,7 +64,7 @@ function Group({ children, borderTop = false, variant = 'primary' }: GroupProps)
             ? {
                 borderTopWidth: t.borderWidths.$normal,
                 borderTopStyle: t.borderStyles.$solid,
-                borderTopColor: t.colors.$neutralAlpha100,
+                borderTopColor: t.colors.$borderAlpha100,
                 paddingTop: t.space.$2,
               }
             : {}),
@@ -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],
       })}
     >
@@ -128,7 +128,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}
@@ -174,7 +174,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
@@ -192,7 +192,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,
             })}
           />
@@ -224,7 +224,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',
           })}
@@ -269,7 +269,7 @@ function CopyButton({ text, copyLabel = 'Copy' }: { text: string; copyLabel?: st
         borderRadius: t.radii.$sm,
         '&:focus-visible': {
           outline: '2px solid',
-          outlineColor: t.colors.$neutralAlpha200,
+          outlineColor: t.colors.$colorRing,
         },
       })}
       focusRing={false}
diff --git a/packages/clerk-js/src/ui/elements/Menu.tsx b/packages/clerk-js/src/ui/elements/Menu.tsx
index 4948f27161b..fa5a1d0cba0 100644
--- a/packages/clerk-js/src/ui/elements/Menu.tsx
+++ b/packages/clerk-js/src/ui/elements/Menu.tsx
@@ -130,7 +130,7 @@ export const MenuList = (props: MenuListProps) => {
             backgroundColor: colors.makeSolid(t.colors.$colorBackground),
             borderWidth: t.borderWidths.$normal,
             borderStyle: t.borderStyles.$solid,
-            borderColor: t.colors.$neutralAlpha50,
+            borderColor: t.colors.$borderAlpha50,
             outline: 'none',
             borderRadius: t.radii.$md,
             padding: t.space.$0x5,
diff --git a/packages/clerk-js/src/ui/elements/Modal.tsx b/packages/clerk-js/src/ui/elements/Modal.tsx
index ed98cf0aaad..193bf40d4f3 100644
--- a/packages/clerk-js/src/ui/elements/Modal.tsx
+++ b/packages/clerk-js/src/ui/elements/Modal.tsx
@@ -68,7 +68,7 @@ export const Modal = withFloatingTree((props: ModalProps) => {
             t => ({
               animation: `${animations.fadeIn} 150ms ${t.transitionTiming.$common}`,
               zIndex: t.zIndices.$modal,
-              backgroundColor: t.colors.$modalBackdrop,
+              backgroundColor: t.colors.$colorModalBackdrop,
               alignItems: 'flex-start',
               justifyContent: 'center',
               overflow: 'auto',
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index 5abd510aefc..4a79632afc3 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
@@ -248,7 +245,7 @@ const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<R
             animation: `${animations.navbarSlideIn} ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
             borderRightWidth: t.borderWidths.$normal,
             borderRightStyle: t.borderStyles.$solid,
-            borderRightColor: t.colors.$neutralAlpha150,
+            borderRightColor: t.colors.$borderAlpha150,
             boxShadow: t.shadows.$cardContentShadow,
           })}
         >
@@ -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/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index f9dd69aa961..ef82c146b56 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -58,7 +58,7 @@ const PopoverCardContent = (props: PropsOfComponent<typeof Flex>) => {
           zIndex: t.zIndices.$card,
           borderWidth: t.borderWidths.$normal,
           borderStyle: t.borderStyles.$solid,
-          borderColor: t.colors.$neutralAlpha50,
+          borderColor: t.colors.$borderAlpha50,
           boxShadow: t.shadows.$cardContentShadow,
         }),
         sx,
@@ -95,7 +95,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
             padding: `${t.space.$4} ${t.space.$8}`,
             borderTopWidth: t.borderWidths.$normal,
             borderTopStyle: t.borderStyles.$solid,
-            borderTopColor: t.colors.$neutralAlpha100,
+            borderTopColor: t.colors.$borderAlpha100,
           },
         }),
         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/ProfileCardContent.tsx b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
index 3a851219175..2e6890487c5 100644
--- a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
@@ -42,7 +42,7 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
         overflow: 'hidden',
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
-        borderColor: t.colors.$neutralAlpha50,
+        borderColor: t.colors.$borderAlpha50,
         boxShadow: t.shadows.$cardContentShadow,
       })}
       data-clerk-profile-scroll-box-root={scrollBoxId}
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/Section.tsx b/packages/clerk-js/src/ui/elements/Section.tsx
index 958cc0eeac1..c223657156e 100644
--- a/packages/clerk-js/src/ui/elements/Section.tsx
+++ b/packages/clerk-js/src/ui/elements/Section.tsx
@@ -38,7 +38,7 @@ const ProfileSectionRoot = (props: ProfileSectionProps) => {
           flexDirection: 'row-reverse',
           borderTopWidth: t.borderWidths.$normal,
           borderTopStyle: t.borderStyles.$solid,
-          borderTopColor: t.colors.$neutralAlpha100,
+          borderTopColor: t.colors.$borderAlpha100,
           paddingTop: t.space.$4,
           paddingBottom: t.space.$4,
           gap: t.space.$6,
diff --git a/packages/clerk-js/src/ui/elements/SegmentedControl.tsx b/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
index b80cb2054f9..f7d7df7824e 100644
--- a/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
+++ b/packages/clerk-js/src/ui/elements/SegmentedControl.tsx
@@ -88,7 +88,7 @@ const Root = React.forwardRef<HTMLDivElement, RootProps>(
                   borderRadius: t.radii.$md,
                   borderWidth: t.borderWidths.$normal,
                   borderStyle: t.borderStyles.$solid,
-                  borderColor: t.colors.$neutralAlpha100,
+                  borderColor: t.colors.$borderAlpha100,
                   isolation: 'isolate',
                 }),
                 sx,
@@ -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/Tabs.tsx b/packages/clerk-js/src/ui/elements/Tabs.tsx
index 4fb80446ba4..8a1cdbff217 100644
--- a/packages/clerk-js/src/ui/elements/Tabs.tsx
+++ b/packages/clerk-js/src/ui/elements/Tabs.tsx
@@ -105,7 +105,7 @@ export const TabsList = (props: TabsListProps) => {
         t => ({
           borderBottomStyle: t.borderStyles.$solid,
           borderBottomWidth: t.borderWidths.$normal,
-          borderColor: t.colors.$neutralAlpha100,
+          borderColor: t.colors.$borderAlpha100,
         }),
         sx,
       ]}
diff --git a/packages/clerk-js/src/ui/elements/TagInput.tsx b/packages/clerk-js/src/ui/elements/TagInput.tsx
index 9623f649c25..95c60fe3adc 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': {
@@ -196,7 +196,7 @@ const TagPill = (props: TagPillProps) => {
         boxShadow: t.shadows.$badge,
         borderWidth: t.borderWidths.$normal,
         borderStyle: t.borderStyles.$solid,
-        borderColor: t.colors.$neutralAlpha100,
+        borderColor: t.colors.$borderAlpha100,
         display: 'inline-flex',
         marginRight: '1px',
         cursor: 'pointer',
@@ -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/elements/TileButton.tsx b/packages/clerk-js/src/ui/elements/TileButton.tsx
index ec5c0e5c49f..00707c7b89f 100644
--- a/packages/clerk-js/src/ui/elements/TileButton.tsx
+++ b/packages/clerk-js/src/ui/elements/TileButton.tsx
@@ -11,7 +11,7 @@ export const TileButton = (props: PropsOfComponent<typeof Button> & { icon: Reac
       variant='outline'
       sx={[
         t => ({
-          borderColor: t.colors.$neutralAlpha200,
+          borderColor: t.colors.$borderAlpha200,
         }),
         props.sx,
       ]}
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index 4e97cfdb197..02cbc38142c 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -1,6 +1,8 @@
-import { colorOptionToThemedAlphaScale } from '../utils/colors/scales';
+import { colors as colorUtils } from '../utils/colors';
+import { colorOptionToThemedAlphaScale, colorOptionToThemedLightnessScale } from '../utils/colors/scales';
+import { clerkCssVar } from '../utils/cssVariables';
 
-export const whiteAlpha = Object.freeze({
+const whiteAlpha = Object.freeze({
   whiteAlpha25: 'hsla(0, 0%, 100%, 0.02)',
   whiteAlpha50: 'hsla(0, 0%, 100%, 0.03)',
   whiteAlpha100: 'hsla(0, 0%, 100%, 0.07)',
@@ -18,91 +20,99 @@ export const whiteAlpha = Object.freeze({
   whiteAlpha950: 'hsla(0, 0%, 100%, 0.92)',
 } as const);
 
-export const neutralAlpha = Object.freeze({
-  neutralAlpha25: 'hsla(0, 0%, 0%, 0.02)',
-  neutralAlpha50: 'hsla(0, 0%, 0%, 0.03)',
-  neutralAlpha100: 'hsla(0, 0%, 0%, 0.07)',
-  neutralAlpha150: 'hsla(0, 0%, 0%, 0.11)',
-  neutralAlpha200: 'hsla(0, 0%, 0%, 0.15)',
-  neutralAlpha300: 'hsla(0, 0%, 0%, 0.28)',
-  neutralAlpha400: 'hsla(0, 0%, 0%, 0.41)',
-  neutralAlpha500: 'hsla(0, 0%, 0%, 0.53)',
-  neutralAlpha600: 'hsla(0, 0%, 0%, 0.62)',
-  neutralAlpha700: 'hsla(0, 0%, 0%, 0.73)',
-  neutralAlpha750: 'hsla(0, 0%, 0%, 0.78)',
-  neutralAlpha800: 'hsla(0, 0%, 0%, 0.81)',
-  neutralAlpha850: 'hsla(0, 0%, 0%, 0.84)',
-  neutralAlpha900: 'hsla(0, 0%, 0%, 0.87)',
-  neutralAlpha950: 'hsla(0, 0%, 0%, 0.92)',
-} as const);
+type LightnessScale<T extends string> = NonNullable<ReturnType<typeof colorOptionToThemedLightnessScale<T>>>;
+type AlphaScale<T extends string> = NonNullable<ReturnType<typeof colorOptionToThemedAlphaScale<T>>>;
 
-export const colors = Object.freeze({
-  avatarBorder: neutralAlpha.neutralAlpha200,
-  avatarBackground: neutralAlpha.neutralAlpha400,
-  modalBackdrop: neutralAlpha.neutralAlpha700,
-  // Themable colors
-  ...neutralAlpha,
-  ...whiteAlpha,
-  colorBackground: 'white',
-  colorInputBackground: 'white',
-  colorText: '#212126',
-  colorTextSecondary: '#747686',
-  colorInputText: '#131316',
-  colorTextOnPrimaryBackground: 'white',
-  colorShimmer: 'rgba(255, 255, 255, 0.36)',
+/**
+ * Color scale generation with clerkCssVar
+ *
+ * These functions will never return undefined because:
+ * 1. clerkCssVar always provides a fallback value (e.g., 'var(--clerk-color-danger, #EF4444)')
+ * 2. The fallback ensures a valid color string is always passed to the scale generation functions
+ * 3. Valid color strings always produce complete color scales
+ *
+ * Therefore, it's safe to assert these as NonNullable.
+ */
+
+const defaultColorNeutral = clerkCssVar('color-neutral', '#000000');
+
+const dangerScale = colorOptionToThemedLightnessScale(
+  clerkCssVar('color-danger', '#EF4444'),
+  'danger',
+) as LightnessScale<'danger'>;
+const primaryScale = colorOptionToThemedLightnessScale(
+  clerkCssVar('color-primary', '#2F3037'),
+  'primary',
+) as LightnessScale<'primary'>;
+const successScale = colorOptionToThemedLightnessScale(
+  clerkCssVar('color-success', '#22C543'),
+  'success',
+) as LightnessScale<'success'>;
+const warningScale = colorOptionToThemedLightnessScale(
+  clerkCssVar('color-warning', '#F36B16'),
+  'warning',
+) as LightnessScale<'warning'>;
+
+const dangerAlphaScale = colorOptionToThemedAlphaScale(
+  clerkCssVar('color-danger', '#EF4444'),
+  'dangerAlpha',
+) as AlphaScale<'dangerAlpha'>;
+const neutralAlphaScale = colorOptionToThemedAlphaScale(
+  defaultColorNeutral,
+  'neutralAlpha',
+) as AlphaScale<'neutralAlpha'>;
+const primaryAlphaScale = colorOptionToThemedAlphaScale(
+  clerkCssVar('color-primary', '#2F3037'),
+  'primaryAlpha',
+) as AlphaScale<'primaryAlpha'>;
+const successAlphaScale = colorOptionToThemedAlphaScale(
+  clerkCssVar('color-success', '#22C543'),
+  'successAlpha',
+) as AlphaScale<'successAlpha'>;
+const warningAlphaScale = colorOptionToThemedAlphaScale(
+  clerkCssVar('color-warning', '#F36B16'),
+  'warningAlpha',
+) as AlphaScale<'warningAlpha'>;
+
+const borderAlphaScale = colorOptionToThemedAlphaScale(
+  clerkCssVar('color-border', defaultColorNeutral),
+  'borderAlpha',
+) as AlphaScale<'borderAlpha'>;
+
+const colorForeground = clerkCssVar('color-foreground', '#212126');
+const colorMutedForeground = clerkCssVar(
+  'color-muted-foreground',
+  colorUtils.makeTransparent(colorForeground, 0.35) || '#747686',
+);
+
+const colors = Object.freeze({
+  avatarBorder: neutralAlphaScale.neutralAlpha200,
+  avatarBackground: neutralAlphaScale.neutralAlpha400,
+  colorModalBackdrop: clerkCssVar('color-modal-backdrop', neutralAlphaScale.neutralAlpha700),
+  colorBackground: clerkCssVar('color-background', 'white'),
+  colorInput: clerkCssVar('color-input', 'white'),
+  colorForeground,
+  colorMutedForeground,
+  colorMuted: undefined,
+  colorRing: clerkCssVar('color-ring', neutralAlphaScale.neutralAlpha200),
+  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',
   black: 'black',
-  primary50: '#B9BDBC',
-  primary100: '#9EA1A2',
-  primary200: '#828687',
-  primary300: '#66696D',
-  primary400: '#4B4D52',
-  primary500: '#2F3037',
-  primary600: '#2A2930',
-  primary700: '#25232A',
-  primary800: '#201D23',
-  primary900: '#1B171C',
-  primaryHover: '#3B3C45', //primary 500 adjusted for lightness
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToThemedAlphaScale('#2F3037', 'primaryAlpha')!,
-  danger50: '#FEF2F2',
-  danger100: '#FEE5E5',
-  danger200: '#FECACA',
-  danger300: '#FCA5A5',
-  danger400: '#F87171',
-  danger500: '#EF4444',
-  danger600: '#DC2626',
-  danger700: '#B91C1C',
-  danger800: '#991B1B',
-  danger900: '#7F1D1D',
-  danger950: '#450A0A',
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToThemedAlphaScale('#EF4444', 'dangerAlpha')!,
-  warning50: '#FFF6ED',
-  warning100: '#FFEBD5',
-  warning200: '#FED1AA',
-  warning300: '#FDB674',
-  warning400: '#F98C49',
-  warning500: '#F36B16',
-  warning600: '#EA520C',
-  warning700: '#C23A0C',
-  warning800: '#9A2F12',
-  warning900: '#7C2912',
-  warning950: '#431207',
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToThemedAlphaScale('#F36B16', 'warningAlpha')!,
-  success50: '#F0FDF2',
-  success100: '#DCFCE2',
-  success200: '#BBF7C6',
-  success300: '#86EF9B',
-  success400: '#4ADE68',
-  success500: '#22C543',
-  success600: '#16A332',
-  success700: '#15802A',
-  success800: '#166527',
-  success900: '#145323',
-  success950: '#052E0F',
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  ...colorOptionToThemedAlphaScale('#22C543', 'successAlpha')!,
+  ...neutralAlphaScale,
+  ...whiteAlpha,
+  ...primaryScale,
+  primaryHover: colorUtils.adjustForLightness(primaryScale.primary500),
+  ...primaryAlphaScale,
+  ...dangerScale,
+  ...dangerAlphaScale,
+  ...warningScale,
+  ...warningAlphaScale,
+  ...successScale,
+  ...successAlphaScale,
+  ...borderAlphaScale,
 } as const);
+
+export { colors, neutralAlphaScale as neutralAlpha, whiteAlpha };
diff --git a/packages/clerk-js/src/ui/foundations/shadows.ts b/packages/clerk-js/src/ui/foundations/shadows.ts
index 96f46a467c2..d187c82b6cd 100644
--- a/packages/clerk-js/src/ui/foundations/shadows.ts
+++ b/packages/clerk-js/src/ui/foundations/shadows.ts
@@ -1,18 +1,46 @@
-export const shadows = Object.freeze({
-  menuShadow: '0px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20)',
-  fabShadow: '0px 12px 24px rgba(0, 0, 0, 0.32)',
-  buttonShadow:
-    '0px 1px 1px 0px rgba(255, 255, 255, 0.07) inset, 0px 2px 3px 0px rgba(34, 42, 53, 0.20), 0px 1px 1px 0px rgba(0, 0, 0, 0.24)',
-  cardBoxShadow: '0px 5px 15px 0px rgba(0, 0, 0, 0.08), 0px 15px 35px -5px rgba(25, 28, 33, 0.20)',
-  cardContentShadow: '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.06)',
-  actionCardShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(106, 115, 133, 0.12)',
-  outlineButtonShadow: '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(0, 0, 0, 0.02)',
-  input: '0px 0px 1px 0px {{color}}',
-  focusRing: '0px 0px 0px 4px {{color}}',
-  badge: '0px 2px 0px -1px rgba(0, 0, 0, 0.04)',
-  tableBodyShadow:
-    '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.12), 0px 0px 0px 1px rgba(0, 0, 0, 0.06)',
-  segmentedControl: '0px 1px 2px 0px rgba(0, 0, 0, 0.08)',
-  switchControl:
-    '0px 2px 2px -1px rgba(0, 0, 0, 0.06), 0px 0px 0px 1px rgba(0, 0, 0, 0.06), 0px 4px 4px -2px rgba(0, 0, 0, 0.06)',
-} as const);
+import { createAlphaColorMixString } from '../utils/colors/utils';
+import { cssSupports } from '../utils/cssSupports';
+import { clerkCssVar } from '../utils/cssVariables';
+
+type ShadowGenerator = (color: string, alpha: number) => string;
+
+const generateShadow =
+  (fn: (color: string, alpha: number) => string): ShadowGenerator =>
+  (color: string, alpha: number) =>
+    cssSupports.modernColor() ? fn(color, alpha) : `rgba(0, 0, 0, ${alpha})`;
+
+/**
+ * Creates a complete set of shadows using the provided shadow color
+ * @param shadowColor - The base color to use for shadows (defaults to black)
+ * @param shadowGenerator - Function to generate shadow colors with alpha (defaults to CSS variable-based generator)
+ * @returns Object containing all shadow definitions
+ */
+export const createShadowSet = (
+  shadowColor: string = '#000000',
+  shadowGenerator: ShadowGenerator = generateShadow((color, alpha) =>
+    createAlphaColorMixString(clerkCssVar('color-shadow', color), alpha * 100),
+  ),
+) => {
+  const highlightColor = '#FFFFFF';
+  return {
+    menuShadow: `0px 5px 15px 0px ${shadowGenerator(shadowColor, 0.08)}, 0px 15px 35px -5px ${shadowGenerator(shadowColor, 0.2)}`,
+    fabShadow: `0px 12px 24px ${shadowGenerator(shadowColor, 0.32)}`,
+    buttonShadow: `0px 1px 1px 0px ${shadowGenerator(highlightColor, 0.07)} inset, 0px 2px 3px 0px ${shadowGenerator(shadowColor, 0.2)}, 0px 1px 1px 0px ${shadowGenerator(shadowColor, 0.24)}`,
+    cardBoxShadow: `0px 5px 15px 0px ${shadowGenerator(shadowColor, 0.08)}, 0px 15px 35px -5px ${shadowGenerator(shadowColor, 0.2)}`,
+    cardContentShadow: `0px 0px 2px 0px ${shadowGenerator(shadowColor, 0.08)}, 0px 1px 2px 0px ${shadowGenerator(shadowColor, 0.06)}`,
+    actionCardShadow: `0px 1px 4px 0px ${shadowGenerator(shadowColor, 0.12)}, 0px 4px 8px 0px ${shadowGenerator(shadowColor, 0.12)}`,
+    outlineButtonShadow: `0px 2px 3px -1px ${shadowGenerator(shadowColor, 0.08)}, 0px 1px 0px 0px ${shadowGenerator(shadowColor, 0.02)}`,
+    input: '0px 0px 1px 0px {{color}}',
+    focusRing: '0px 0px 0px 4px {{color}}',
+    badge: `0px 2px 0px -1px ${shadowGenerator(shadowColor, 0.04)}`,
+    tableBodyShadow: `0px 0px 2px 0px ${shadowGenerator(shadowColor, 0.08)}, 0px 1px 2px 0px ${shadowGenerator(shadowColor, 0.12)}, 0px 0px 0px 1px ${shadowGenerator(shadowColor, 0.06)}`,
+    segmentedControl: `0px 1px 2px 0px ${shadowGenerator(shadowColor, 0.08)}`,
+    switchControl: `0px 2px 2px -1px ${shadowGenerator(shadowColor, 0.06)}, 0px 0px 0px 1px ${shadowGenerator(shadowColor, 0.06)}, 0px 4px 4px -2px ${shadowGenerator(shadowColor, 0.06)}`,
+  };
+};
+
+// Default shadows using black shadow color
+export const shadows = Object.freeze(createShadowSet());
+
+// Export the generator functions for use in other modules
+export { generateShadow };
diff --git a/packages/clerk-js/src/ui/foundations/sizes.ts b/packages/clerk-js/src/ui/foundations/sizes.ts
index 9faf2dded28..ebf1a86b600 100644
--- a/packages/clerk-js/src/ui/foundations/sizes.ts
+++ b/packages/clerk-js/src/ui/foundations/sizes.ts
@@ -1,84 +1,198 @@
+import { clerkCssVar } from '../utils/cssVariables';
+
+const SPACING_BASE_UNIT = '1rem';
+const SPACING_MULTIPLIER = 0.25; // ((num / 0.5) * 0.125)
+
 const baseSpaceUnits = Object.freeze({
   none: '0',
   xxs: '0.5px',
   px: '1px',
 } as const);
 
-const dynamicSpaceUnits = Object.freeze({
-  '0x25': '0.0625rem',
-  '0x5': '0.125rem',
-  '1': '0.25rem',
-  '1x5': '0.375rem',
-  '2': '0.5rem',
-  '2x5': '0.625rem',
-  '3': '0.75rem',
-  '3x25': '0.8125rem',
-  '3x5': '0.875rem',
-  '4': '1rem',
-  '4x25': '1.0625rem',
-  '5': '1.25rem',
-  '5x5': '1.375rem',
-  '6': '1.5rem',
-  '7': '1.75rem',
-  '7x5': '1.875rem',
-  '8': '2rem',
-  '8x5': '2.125rem',
-  '8x75': '2.1875rem',
-  '9': '2.25rem',
-  '10': '2.5rem',
-  '12': '3rem',
-  '13': '3.5rem',
-  '16': '4rem',
-  '17': '4.25rem',
-  '20': '5rem',
-  '24': '6rem',
-  '28': '7rem',
-  '32': '8rem',
-  '36': '9rem',
-  '40': '10rem',
-  '44': '11rem',
-  '48': '12rem',
-  '52': '13rem',
-  '56': '14rem',
-  '57': '14.25rem',
-  '60': '15rem',
-  '66': '16.5rem',
-  '94': '23.5rem',
-  '100': '25rem',
-  '108': '27rem',
-  '120': '30rem',
-  '140': '35rem',
-  '160': '40rem',
-  '176': '44rem',
-  '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);
+
+/**
+ * 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})`;
+};
+
 /**
- * Instead of generating these values with the helpers of parseVariables,
- * we hard code them in order to have better intellisense support while developing
+ * 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);
+
+/**
+ * Border radius scale with CSS variables for theming
+ */
+export const BORDER_RADIUS_SCALE_RATIOS = Object.freeze({
+  sm: '2 / 3', // 0.66
+  md: '1', // 1.0
+  lg: '4 / 3', // 1.33
+  xl: '2', // 2.0
+} as const);
+
+const radiiDefaultVar = clerkCssVar('border-radius', '0.375rem');
 
 const radii = Object.freeze({
   none: '0px',
   circle: '50%',
-  avatar: '0.375rem',
-  sm: '0.25rem',
-  md: '0.375rem',
-  lg: '0.5rem',
-  xl: '0.75rem',
+  avatar: clerkCssVar('border-radius-avatar', radiiDefaultVar),
+  sm: clerkCssVar('border-radius-sm', `calc(${radiiDefaultVar} * ${BORDER_RADIUS_SCALE_RATIOS.sm})`), // Use fraction for precision
+  md: clerkCssVar('border-radius-md', radiiDefaultVar),
+  lg: clerkCssVar('border-radius-lg', `calc(${radiiDefaultVar} * ${BORDER_RADIUS_SCALE_RATIOS.lg})`), // Use fraction for precision
+  xl: clerkCssVar('border-radius-xl', `calc(${radiiDefaultVar} * ${BORDER_RADIUS_SCALE_RATIOS.xl})`),
   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 fdf4f87e109..6528d346cc5 100644
--- a/packages/clerk-js/src/ui/foundations/typography.ts
+++ b/packages/clerk-js/src/ui/foundations/typography.ts
@@ -1,8 +1,10 @@
+import { clerkCssVar } from '../utils/cssVariables';
+
 const fontWeights = Object.freeze({
-  normal: 400,
-  medium: 500,
-  semibold: 600,
-  bold: 700,
+  normal: clerkCssVar('font-weight-normal', clerkCssVar('font-weight', '400')),
+  medium: clerkCssVar('font-weight-medium', '500'),
+  semibold: clerkCssVar('font-weight-semibold', '600'),
+  bold: clerkCssVar('font-weight-bold', '700'),
 } as const);
 
 const lineHeights = Object.freeze({
@@ -17,15 +19,23 @@ const letterSpacings = Object.freeze({
   normal: 'normal',
 } as const);
 
-// We want to achieve the md size to be 13px for root font size of 16px
-// This is directly related to the createFontSizeScale function in the theme
-// ref: src/ui/customizables/parseVariables.ts
+export const FONT_SIZE_SCALE_RATIOS = Object.freeze({
+  xs: '11 / 13', // 0.846154
+  sm: '12 / 13', // 0.923077
+  md: '1', // 1.0
+  lg: '17 / 13', // 1.307692
+  xl: '24 / 13', // 1.846154
+} as const);
+
+export type FontSizeKey = keyof typeof FONT_SIZE_SCALE_RATIOS;
+
+const fontSizesDefaultVar = clerkCssVar('font-size', '0.8125rem');
 const fontSizes = Object.freeze({
-  xs: '0.6875rem',
-  sm: '0.75rem',
-  md: '0.8125rem',
-  lg: '1.0625rem',
-  xl: '1.5rem',
+  xs: clerkCssVar('font-size-xs', `calc(${fontSizesDefaultVar} * ${FONT_SIZE_SCALE_RATIOS.xs})`), // 0.6875rem
+  sm: clerkCssVar('font-size-sm', `calc(${fontSizesDefaultVar} * ${FONT_SIZE_SCALE_RATIOS.sm})`), // 0.75rem
+  md: clerkCssVar('font-size-md', fontSizesDefaultVar), // 0.8125rem
+  lg: clerkCssVar('font-size-lg', `calc(${fontSizesDefaultVar} * ${FONT_SIZE_SCALE_RATIOS.lg})`), // 1.0625rem
+  xl: clerkCssVar('font-size-xl', `calc(${fontSizesDefaultVar} * ${FONT_SIZE_SCALE_RATIOS.xl})`), // 1.5rem
 } as const);
 
 const fontStyles = Object.freeze({
@@ -33,8 +43,8 @@ const fontStyles = Object.freeze({
 } as const);
 
 const fonts = Object.freeze({
-  main: 'inherit',
-  buttons: 'inherit',
+  main: clerkCssVar('font-family', 'inherit'),
+  buttons: clerkCssVar('font-family-buttons', clerkCssVar('font-family', 'inherit')),
 } as const);
 
 export { fontSizes, fontWeights, letterSpacings, lineHeights, fonts, fontStyles };
diff --git a/packages/clerk-js/src/ui/polishedAppearance.ts b/packages/clerk-js/src/ui/polishedAppearance.ts
index fca86438754..ec11e86666f 100644
--- a/packages/clerk-js/src/ui/polishedAppearance.ts
+++ b/packages/clerk-js/src/ui/polishedAppearance.ts
@@ -64,11 +64,11 @@ const checkboxShadowStyles = (
 const inputStyles = (theme: InternalTheme) => ({
   borderWidth: 0,
   ...inputShadowStyles(theme, {
-    idle1: theme.colors.$neutralAlpha150,
-    idle2: theme.colors.$neutralAlpha100,
-    hover1: theme.colors.$neutralAlpha300,
-    hover2: theme.colors.$neutralAlpha150,
-    focus: theme.colors.$neutralAlpha150,
+    idle1: theme.colors.$borderAlpha150,
+    idle2: theme.colors.$borderAlpha100,
+    hover1: theme.colors.$borderAlpha300,
+    hover2: theme.colors.$borderAlpha150,
+    focus: theme.colors.$colorRing,
   }),
   '&[data-feedback="error"]': inputShadowStyles(theme, {
     idle1: theme.colors.$dangerAlpha400,
@@ -121,7 +121,7 @@ export const polishedAppearance: Appearance = {
             '&:focus': {
               boxShadow: [
                 BUTTON_SOLID_SHADOW(theme.colors.$primary500),
-                theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200),
+                theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
               ].toString(),
             },
           },
@@ -137,21 +137,21 @@ export const polishedAppearance: Appearance = {
         },
         '&[data-variant="outline"]': {
           borderWidth: 0,
-          boxShadow: BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100),
+          boxShadow: BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
           '&:focus': {
             boxShadow: [
-              BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100),
-              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200),
+              BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
+              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
             ].toString(),
           },
         },
         '&[data-variant="bordered"]': {
           borderWidth: 0,
-          boxShadow: BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100),
+          boxShadow: BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
           '&:focus': {
             boxShadow: [
-              BUTTON_OUTLINE_SHADOW(theme.colors.$neutralAlpha100),
-              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$neutralAlpha200),
+              BUTTON_OUTLINE_SHADOW(theme.colors.$borderAlpha100),
+              theme.shadows.$focusRing.replace('{{color}}', theme.colors.$colorRing),
             ].toString(),
           },
         },
@@ -160,7 +160,7 @@ export const polishedAppearance: Appearance = {
         borderWidth: 0,
         margin: '1px',
         '&[data-color="primary"]': {
-          boxShadow: `${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha150}, ${theme.shadows.$badge}`,
+          boxShadow: `${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}, ${theme.shadows.$badge}`,
         },
         '&[data-color="danger"]': {
           boxShadow: `${BORDER_SHADOW_LENGTH} ${theme.colors.$dangerAlpha300}, ${theme.shadows.$badge}`,
@@ -205,7 +205,7 @@ export const polishedAppearance: Appearance = {
       },
       tagPillContainer: {
         borderWidth: 0,
-        boxShadow: `${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha150}, ${theme.shadows.$badge}`,
+        boxShadow: `${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}, ${theme.shadows.$badge}`,
       },
       phoneInputBox: {
         ...inputStyles(theme),
@@ -219,15 +219,15 @@ export const polishedAppearance: Appearance = {
       },
       cardBox: {
         borderWidth: 0,
-        boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
+        boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}`,
       },
       drawerContent: {
         borderWidth: 0,
-        boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
+        boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}`,
       },
       popoverBox: {
         borderWidth: 0,
-        boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
+        boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}`,
       },
       card: {
         ...cardContentStyles(theme),
@@ -235,11 +235,11 @@ export const polishedAppearance: Appearance = {
       pricingTableCard: {
         '&[data-variant="default"]': {
           borderWidth: 0,
-          boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
+          boxShadow: `${theme.shadows.$cardBoxShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}`,
         },
         '&[data-variant="compact"]': {
           borderWidth: 0,
-          boxShadow: `0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.12), 0px 0px 0px 1px ${theme.colors.$neutralAlpha100}`,
+          boxShadow: `0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.12), 0px 0px 0px 1px ${theme.colors.$borderAlpha100}`,
         },
       },
       scrollBox: {
@@ -253,15 +253,15 @@ export const polishedAppearance: Appearance = {
       },
       menuList: {
         borderWidth: 0,
-        boxShadow: `${theme.shadows.$menuShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
+        boxShadow: `${theme.shadows.$menuShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}`,
       },
       actionCard: {
         borderWidth: 0,
-        boxShadow: `${theme.shadows.$actionCardShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$neutralAlpha100}`,
+        boxShadow: `${theme.shadows.$actionCardShadow}, ${BORDER_SHADOW_LENGTH} ${theme.colors.$borderAlpha100}`,
       },
       table: {
         borderWidth: 0,
-        boxShadow: `0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.12), 0px 0px 0px 1px ${theme.colors.$neutralAlpha100}`,
+        boxShadow: `0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.12), 0px 0px 0px 1px ${theme.colors.$borderAlpha100}`,
       },
     };
   },
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..82216c5c04e 100644
--- a/packages/clerk-js/src/ui/primitives/Badge.tsx
+++ b/packages/clerk-js/src/ui/primitives/Badge.tsx
@@ -22,12 +22,12 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     textVariant: { ...common.textVariants(theme) },
     colorScheme: {
       primary: {
-        [vars.accent]: theme.colors.$neutralAlpha600,
-        [vars.bg]: theme.colors.$neutralAlpha50,
-        [vars.borderColor]: theme.colors.$neutralAlpha150,
+        [vars.accent]: theme.colors.$borderAlpha600,
+        [vars.bg]: theme.colors.$borderAlpha50,
+        [vars.borderColor]: theme.colors.$borderAlpha150,
       },
       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..2c526ded34b 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: {
@@ -96,7 +96,7 @@ const { applyVariants, filterProps } = createVariants(
           outline: {
             borderWidth: theme.borderWidths.$normal,
             borderStyle: theme.borderStyles.$solid,
-            borderColor: theme.colors.$neutralAlpha100,
+            borderColor: theme.colors.$borderAlpha100,
             color: theme.colors.$neutralAlpha600,
             '&:hover': { backgroundColor: theme.colors.$neutralAlpha50 },
             '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$neutralAlpha50 } : undefined,
@@ -105,7 +105,7 @@ const { applyVariants, filterProps } = createVariants(
           bordered: {
             borderWidth: theme.borderWidths.$normal,
             borderStyle: theme.borderStyles.$solid,
-            borderColor: theme.colors.$neutralAlpha100,
+            borderColor: theme.colors.$borderAlpha100,
             color: vars.accentContrast,
             backgroundColor: vars.accent,
             '&:hover': { backgroundColor: vars.accentHover },
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..0a26006424a 100644
--- a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
+++ b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
@@ -21,14 +21,14 @@ 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,
       },
       outline: {
         [vars.accent]: theme.colors.$neutralAlpha600,
         [vars.bg]: 'transparent',
-        [vars.borderColor]: theme.colors.$neutralAlpha150,
+        [vars.borderColor]: theme.colors.$borderAlpha150,
       },
     },
   },
diff --git a/packages/clerk-js/src/ui/primitives/Spinner.tsx b/packages/clerk-js/src/ui/primitives/Spinner.tsx
index 7b97448132f..dff56a32194 100644
--- a/packages/clerk-js/src/ui/primitives/Spinner.tsx
+++ b/packages/clerk-js/src/ui/primitives/Spinner.tsx
@@ -27,8 +27,8 @@ const { applyVariants, filterProps } = createVariants(theme => {
       colorScheme: {
         primary: { borderTopColor: theme.colors.$primary500, borderRightColor: theme.colors.$primary500, opacity: 1 },
         neutral: {
-          borderTopColor: theme.colors.$neutralAlpha700,
-          borderRightColor: theme.colors.$neutralAlpha700,
+          borderTopColor: theme.colors.$borderAlpha700,
+          borderRightColor: theme.colors.$borderAlpha700,
           opacity: 1,
         },
       },
diff --git a/packages/clerk-js/src/ui/primitives/Table.tsx b/packages/clerk-js/src/ui/primitives/Table.tsx
index 5781b07f714..4dc2f43c7af 100644
--- a/packages/clerk-js/src/ui/primitives/Table.tsx
+++ b/packages/clerk-js/src/ui/primitives/Table.tsx
@@ -13,7 +13,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
       borderCollapse: 'separate',
       borderWidth: theme.borderWidths.$normal,
       borderStyle: theme.borderStyles.$solid,
-      borderColor: theme.colors.$neutralAlpha100,
+      borderColor: theme.colors.$borderAlpha100,
       borderRadius: theme.radii.$lg,
       boxShadow: theme.shadows.$tableBodyShadow,
       width: '100%',
@@ -23,7 +23,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
         borderStyle: 'solid',
         borderLeftWidth: '0px',
         borderRightWidth: '0px',
-        borderColor: theme.colors.$neutralAlpha100,
+        borderColor: theme.colors.$borderAlpha100,
       },
       'td:not(:first-of-type)': {
         paddingLeft: theme.space.$2,
@@ -34,7 +34,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
       'tr > td': {
         borderTopWidth: theme.borderWidths.$normal,
         borderTopStyle: theme.borderStyles.$solid,
-        borderTopColor: theme.colors.$neutralAlpha100,
+        borderTopColor: theme.colors.$borderAlpha100,
         paddingBottom: theme.space.$2,
         paddingTop: theme.space.$2,
         paddingLeft: theme.space.$4,
@@ -46,7 +46,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
         borderStyle: 'solid',
         borderLeftWidth: '0px',
         borderRightWidth: '0px',
-        borderColor: theme.colors.$neutralAlpha100,
+        borderColor: theme.colors.$borderAlpha100,
       },
       'tr:hover td:first-of-type': {
         borderBottomLeftRadius: theme.radii.$lg,
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..a6f61f5035a 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -1,3 +1,5 @@
+import { colors } from '../utils/colors';
+import { clerkCssVar } from '../utils/cssVariables';
 import type { InternalTheme } from './types';
 
 const textVariants = (t: InternalTheme) => {
@@ -77,10 +79,10 @@ const textVariants = (t: InternalTheme) => {
 };
 
 const borderVariants = (t: InternalTheme, props?: any) => {
-  const hoverBorderColor = !props?.hasError ? t.colors.$neutralAlpha300 : t.colors.$dangerAlpha500;
+  const hoverBorderColor = !props?.hasError ? t.colors.$borderAlpha300 : t.colors.$dangerAlpha500;
   const hoverBoxShadow = t.shadows.$input.replace(
     '{{color}}',
-    !props?.hasError ? t.colors.$neutralAlpha150 : t.colors.$dangerAlpha200,
+    !props?.hasError ? t.colors.$borderAlpha150 : t.colors.$dangerAlpha200,
   );
   const hoverStyles = {
     '&:hover': {
@@ -100,7 +102,7 @@ const borderVariants = (t: InternalTheme, props?: any) => {
               hoverBoxShadow,
               t.shadows.$focusRing.replace(
                 '{{color}}',
-                !props?.hasError ? t.colors.$neutralAlpha150 : (t.colors.$dangerAlpha200 as string),
+                !props?.hasError ? t.colors.$borderAlpha150 : (t.colors.$dangerAlpha200 as string),
               ),
             ].toString(),
           },
@@ -110,10 +112,10 @@ const borderVariants = (t: InternalTheme, props?: any) => {
       borderRadius: t.radii.$md,
       borderWidth: t.borderWidths.$normal,
       borderStyle: t.borderStyles.$solid,
-      borderColor: !props?.hasError ? t.colors.$neutralAlpha150 : t.colors.$dangerAlpha500,
+      borderColor: !props?.hasError ? t.colors.$borderAlpha150 : t.colors.$dangerAlpha500,
       boxShadow: t.shadows.$input.replace(
         '{{color}}',
-        !props?.hasError ? t.colors.$neutralAlpha100 : t.colors.$neutralAlpha150,
+        !props?.hasError ? t.colors.$borderAlpha100 : t.colors.$borderAlpha150,
       ),
       transitionProperty: t.transitionProperty.$common,
       transitionTimingFunction: t.transitionTiming.$common,
@@ -126,7 +128,7 @@ const borderVariants = (t: InternalTheme, props?: any) => {
 
 const borderColor = (t: InternalTheme, props?: any) => {
   return {
-    borderColor: props?.hasError ? t.colors.$dangerAlpha500 : t.colors.$neutralAlpha150,
+    borderColor: props?.hasError ? t.colors.$dangerAlpha500 : t.colors.$borderAlpha150,
   } as const;
 };
 
@@ -134,7 +136,7 @@ const focusRingStyles = (t: InternalTheme) => {
   return {
     '&::-moz-focus-inner': { border: '0' },
     WebkitTapHighlightColor: 'transparent',
-    boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$neutralAlpha200),
+    boxShadow: t.shadows.$focusRing.replace('{{color}}', t.colors.$colorRing),
     transitionProperty: t.transitionProperty.$common,
     transitionTimingFunction: t.transitionTiming.$common,
     transitionDuration: t.transitionDuration.$focusRing,
@@ -190,6 +192,13 @@ const mergedColorsBackground = (colorBack: string, colorFront: string) => {
   return `linear-gradient(${colorFront},${colorFront}), linear-gradient(${colorBack}, ${colorBack})`;
 };
 
+const mutedBackground = (t: InternalTheme) => {
+  const defaultColor =
+    t.colors.$colorMuted ||
+    mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha50);
+  return clerkCssVar('color-muted', defaultColor);
+};
+
 const visuallyHidden = () =>
   ({
     clip: 'rect(0 0 0 0)',
@@ -210,6 +219,7 @@ export const common = {
   borderColor,
   centeredFlex,
   maxHeightScroller,
+  mutedBackground,
   unstyledScrollbar,
   mergedColorsBackground,
   visuallyHidden,
diff --git a/packages/clerk-js/src/ui/utils/__tests__/cssVariables.spec.ts b/packages/clerk-js/src/ui/utils/__tests__/cssVariables.spec.ts
index 83a57ed898a..b044d39511f 100644
--- a/packages/clerk-js/src/ui/utils/__tests__/cssVariables.spec.ts
+++ b/packages/clerk-js/src/ui/utils/__tests__/cssVariables.spec.ts
@@ -1,6 +1,7 @@
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 
 import {
+  clerkCssVar,
   extractCSSVariableValue,
   extractCSSVariableValueWithFallback,
   extractMultipleCSSVariables,
@@ -185,6 +186,175 @@ describe('CSS Variable Utilities', () => {
       expect(result).toBe('purple');
       expect(mockGetComputedStyle).toHaveBeenCalledWith(mockElement);
     });
+
+    describe('nested CSS variables', () => {
+      it('should resolve nested CSS variables in fallback', () => {
+        // First call: --primary-color is not found
+        // Second call: --fallback-color is found
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce('blue'); // --fallback-color found
+
+        const result = resolveCSSVariable('var(--primary-color, var(--fallback-color))');
+
+        expect(result).toBe('blue');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--fallback-color');
+      });
+
+      it('should resolve multiple levels of nested CSS variables', () => {
+        // First call: --primary-color is not found
+        // Second call: --secondary-color is not found
+        // Third call: --tertiary-color is found
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce('') // --secondary-color not found
+          .mockReturnValueOnce('green'); // --tertiary-color found
+
+        const result = resolveCSSVariable('var(--primary-color, var(--secondary-color, var(--tertiary-color)))');
+
+        expect(result).toBe('green');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--secondary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--tertiary-color');
+      });
+
+      it('should fall back to final static value when all variables are not found', () => {
+        // All CSS variables return empty
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce('') // --secondary-color not found
+          .mockReturnValueOnce(''); // --tertiary-color not found
+
+        const result = resolveCSSVariable(
+          'var(--primary-color, var(--secondary-color, var(--tertiary-color, #FF0000)))',
+        );
+
+        expect(result).toBe('#FF0000');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--secondary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--tertiary-color');
+      });
+
+      it('should handle nested variables with complex static fallbacks', () => {
+        // First call: --border-color is not found
+        // Second call: --neutral-color is not found
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --border-color not found
+          .mockReturnValueOnce(''); // --neutral-color not found
+
+        const result = resolveCSSVariable('var(--border-color, var(--neutral-color, rgba(0, 0, 0, 0.1)))');
+
+        expect(result).toBe('rgba(0, 0, 0, 0.1)');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--border-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--neutral-color');
+      });
+
+      it('should handle nested variables with whitespace', () => {
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce('yellow'); // --fallback-color found
+
+        const result = resolveCSSVariable('var( --primary-color , var( --fallback-color , red ) )');
+
+        expect(result).toBe('yellow');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--fallback-color');
+      });
+
+      it('should return the first resolved variable in the chain', () => {
+        // First call: --primary-color is found
+        mockGetPropertyValue.mockReturnValueOnce('purple');
+
+        const result = resolveCSSVariable('var(--primary-color, var(--fallback-color, red))');
+
+        expect(result).toBe('purple');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledTimes(1); // Should not call fallback variables
+      });
+
+      it('should handle real-world Clerk CSS variable patterns', () => {
+        // Test the specific pattern from the issue: var(--clerk-color-border, var(--clerk-color-neutral, #000000))
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --clerk-color-border not found
+          .mockReturnValueOnce(''); // --clerk-color-neutral not found
+
+        const result = resolveCSSVariable('var(--clerk-color-border, var(--clerk-color-neutral, #000000))');
+
+        expect(result).toBe('#000000');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--clerk-color-border');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--clerk-color-neutral');
+      });
+
+      it('should handle nested variables where intermediate variable is found', () => {
+        // First call: --primary-color is not found
+        // Second call: --secondary-color is found
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce('orange'); // --secondary-color found
+
+        const result = resolveCSSVariable('var(--primary-color, var(--secondary-color, var(--tertiary-color, red)))');
+
+        expect(result).toBe('orange');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--secondary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledTimes(2); // Should not call tertiary variable
+      });
+
+      it('should handle mixed nested and static fallbacks', () => {
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce('cyan'); // --fallback-color found
+
+        const result = resolveCSSVariable('var(--primary-color, var(--fallback-color, #FF0000))');
+
+        expect(result).toBe('cyan');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--fallback-color');
+      });
+
+      it('should return null when nested variables cannot be resolved and no static fallback', () => {
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce(''); // --fallback-color not found
+
+        const result = resolveCSSVariable('var(--primary-color, var(--fallback-color))');
+
+        expect(result).toBe(null);
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--primary-color');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--fallback-color');
+      });
+
+      it('should handle deeply nested variables (4+ levels)', () => {
+        // Test with 4 levels of nesting
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --level1 not found
+          .mockReturnValueOnce('') // --level2 not found
+          .mockReturnValueOnce('') // --level3 not found
+          .mockReturnValueOnce('magenta'); // --level4 found
+
+        const result = resolveCSSVariable('var(--level1, var(--level2, var(--level3, var(--level4))))');
+
+        expect(result).toBe('magenta');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--level1');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--level2');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--level3');
+        expect(mockGetPropertyValue).toHaveBeenCalledWith('--level4');
+      });
+
+      it('should use custom element for nested variable resolution', () => {
+        const mockElement = document.createElement('div');
+        mockGetPropertyValue
+          .mockReturnValueOnce('') // --primary-color not found
+          .mockReturnValueOnce('teal'); // --fallback-color found
+
+        const result = resolveCSSVariable('var(--primary-color, var(--fallback-color))', mockElement);
+
+        expect(result).toBe('teal');
+        expect(mockGetComputedStyle).toHaveBeenCalledWith(mockElement);
+        expect(mockGetComputedStyle).toHaveBeenCalledTimes(2); // Once for each variable
+      });
+    });
   });
 
   describe('resolveComputedCSSProperty', () => {
@@ -519,4 +689,10 @@ describe('CSS Variable Utilities', () => {
       expect(mockGetComputedStyle).toHaveBeenCalledWith(mockCreatedElement);
     });
   });
+
+  describe('clerkCssVar', () => {
+    it('should return a CSS variable string', () => {
+      expect(clerkCssVar('color', 'red')).toBe('var(--clerk-color, red)');
+    });
+  });
 });
diff --git a/packages/clerk-js/src/ui/utils/colors/__tests__/legacy.spec.ts b/packages/clerk-js/src/ui/utils/colors/__tests__/legacy.spec.ts
index e4b38c5b02a..a642c53abec 100644
--- a/packages/clerk-js/src/ui/utils/colors/__tests__/legacy.spec.ts
+++ b/packages/clerk-js/src/ui/utils/colors/__tests__/legacy.spec.ts
@@ -211,6 +211,160 @@ describe('Legacy Colors', () => {
         const result = colors.toHslaColor('var(--brand, red)');
         expect(result).toEqual({ h: 0, s: 100, l: 50, a: 1 });
       });
+
+      describe('nested CSS variables', () => {
+        it('should resolve nested CSS variables in fallback', () => {
+          // Mock first variable not found, second variable found
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --primary-color not found
+              .mockReturnValueOnce('#0000ff'), // --fallback-color found
+          });
+
+          const result = colors.toHslaColor('var(--primary-color, var(--fallback-color))');
+          expect(result).toEqual({ h: 240, s: 100, l: 50, a: 1 });
+        });
+
+        it('should resolve multiple levels of nested CSS variables', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --level1 not found
+              .mockReturnValueOnce('') // --level2 not found
+              .mockReturnValueOnce('#00ff00'), // --level3 found
+          });
+
+          const result = colors.toHslaColor('var(--level1, var(--level2, var(--level3)))');
+          expect(result).toEqual({ h: 120, s: 100, l: 50, a: 1 });
+        });
+
+        it('should fall back to final static value when all variables are not found', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --primary-color not found
+              .mockReturnValueOnce('') // --secondary-color not found
+              .mockReturnValueOnce(''), // --tertiary-color not found
+          });
+
+          const result = colors.toHslaColor(
+            'var(--primary-color, var(--secondary-color, var(--tertiary-color, #ff0000)))',
+          );
+          expect(result).toEqual({ h: 0, s: 100, l: 50, a: 1 });
+        });
+
+        it('should handle the specific Clerk CSS variable pattern', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --clerk-color-border not found
+              .mockReturnValueOnce(''), // --clerk-color-neutral not found
+          });
+
+          const result = colors.toHslaColor('var(--clerk-color-border, var(--clerk-color-neutral, #000000))');
+          expect(result).toEqual({ h: 0, s: 0, l: 0, a: 1 });
+        });
+
+        it('should resolve nested variables with complex static fallbacks', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --border-color not found
+              .mockReturnValueOnce(''), // --neutral-color not found
+          });
+
+          const result = colors.toHslaColor('var(--border-color, var(--neutral-color, rgba(255, 0, 0, 0.5)))');
+          expect(result).toEqual({ h: 0, s: 100, l: 50, a: 0.5 });
+        });
+
+        it('should handle nested variables with whitespace', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --primary-color not found
+              .mockReturnValueOnce('hsl(60, 100%, 50%)'), // --fallback-color found
+          });
+
+          const result = colors.toHslaColor('var( --primary-color , var( --fallback-color , red ) )');
+          expect(result).toEqual({ h: 60, s: 100, l: 50, a: 1 });
+        });
+
+        it('should return the first resolved variable in the chain', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi.fn().mockReturnValueOnce('#800080'), // --primary-color found
+          });
+
+          const result = colors.toHslaColor('var(--primary-color, var(--fallback-color, red))');
+          expect(result).toEqual({ h: 300, s: 100, l: 25, a: 1 });
+        });
+
+        it('should handle nested variables where intermediate variable is found', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --primary-color not found
+              .mockReturnValueOnce('rgb(255, 165, 0)'), // --secondary-color found
+          });
+
+          const result = colors.toHslaColor('var(--primary-color, var(--secondary-color, var(--tertiary-color, red)))');
+          expect(result).toEqual({ h: 38, s: 100, l: 50, a: 1 });
+        });
+
+        it('should handle deeply nested variables (4+ levels)', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --level1 not found
+              .mockReturnValueOnce('') // --level2 not found
+              .mockReturnValueOnce('') // --level3 not found
+              .mockReturnValueOnce('#ff00ff'), // --level4 found
+          });
+
+          const result = colors.toHslaColor('var(--level1, var(--level2, var(--level3, var(--level4))))');
+          expect(result).toEqual({ h: 300, s: 100, l: 50, a: 1 });
+        });
+
+        it('should throw error when nested variables cannot be resolved and no static fallback', () => {
+          mockGetComputedStyle.mockReturnValue({
+            getPropertyValue: vi
+              .fn()
+              .mockReturnValueOnce('') // --primary-color not found
+              .mockReturnValueOnce(''), // --fallback-color not found
+          });
+
+          expect(() => colors.toHslaColor('var(--primary-color, var(--fallback-color))')).toThrow();
+        });
+
+        it('should handle real-world Clerk color variable patterns', () => {
+          const testCases = [
+            {
+              input: 'var(--clerk-color-danger, #ef4444)',
+              mockValue: '#ef4444',
+              expected: { h: 0, s: 84, l: 60, a: 1 },
+            },
+            {
+              input: 'var(--clerk-color-success, #22c543)',
+              mockValue: '#22c543',
+              expected: { h: 132, s: 70, l: 45, a: 1 },
+            },
+            {
+              input: 'var(--clerk-color-warning, #f36b16)',
+              mockValue: '#f36b16',
+              expected: { h: 23, s: 90, l: 51, a: 1 },
+            },
+          ];
+
+          testCases.forEach(({ input, mockValue, expected }) => {
+            mockGetComputedStyle.mockReturnValue({
+              getPropertyValue: vi.fn().mockReturnValue(mockValue),
+            });
+
+            const result = colors.toHslaColor(input);
+            expect(result).toEqual(expected);
+          });
+        });
+      });
     });
 
     describe('error cases', () => {
diff --git a/packages/clerk-js/src/ui/utils/cssVariables.ts b/packages/clerk-js/src/ui/utils/cssVariables.ts
index 40ce87f6353..4c264ef7d41 100644
--- a/packages/clerk-js/src/ui/utils/cssVariables.ts
+++ b/packages/clerk-js/src/ui/utils/cssVariables.ts
@@ -175,8 +175,17 @@ export function resolveCSSVariable(value: string, element?: Element): string | n
     return resolvedValue;
   }
 
-  // If variable couldn't be resolved, return the fallback value if provided
-  return fallbackValue;
+  // If variable couldn't be resolved, check if fallback is also a CSS variable
+  if (fallbackValue) {
+    if (isCSSVariable(fallbackValue)) {
+      // Recursively resolve nested CSS variables
+      const recursiveResult = resolveCSSVariable(fallbackValue, element);
+      return recursiveResult;
+    }
+    return fallbackValue;
+  }
+
+  return null;
 }
 
 /**
@@ -233,3 +242,11 @@ export function resolveComputedCSSColor(parentElement: HTMLElement, color: strin
   const { data } = ctx.getImageData(0, 0, 1, 1);
   return `#${data[0].toString(16).padStart(2, '0')}${data[1].toString(16).padStart(2, '0')}${data[2].toString(16).padStart(2, '0')}`;
 }
+
+/**
+ * Creates a CSS variable prefixed with `clerk-` with a default value
+ * @param name - The name of the CSS variable
+ * @param defaultValue - The default value
+ * @returns The CSS variable string
+ */
+export const clerkCssVar = (name: string, defaultValue: string) => `var(--clerk-${name}, ${defaultValue})`;
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 17c872df239..a06bb37d847 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -54,6 +54,14 @@ export type CssColorOrAlphaScale = string | AlphaColorScale;
 type CssColor = string | TransparentColor | BuiltInColors;
 type CssLengthUnit = string;
 
+type FontSizeScale = {
+  xs?: string;
+  sm?: string;
+  md?: string;
+  lg?: string;
+  xl?: string;
+};
+
 type FontWeightNamedValue = CSS.Properties['fontWeight'];
 type FontWeightNumericValue = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
 
@@ -636,9 +644,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'
@@ -663,15 +678,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'
@@ -679,19 +712,51 @@ 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)'
    */
   colorShimmer?: CssColor;
+  /**
+   * The color of the ring when an interactive element is focused.
+   * @default {@link Variables.colorNeutral} at 15% opacity
+   */
+  colorRing?: CssColor;
+  /**
+   * The base shadow color used in the components.
+   * @default '#000000'
+   */
+  colorShadow?: CssColor;
+  /**
+   * The base border color used in the components.
+   * @default {@link Variables.colorNeutral}
+   */
+  colorBorder?: CssColor;
+  /**
+   * The background color of the modal backdrop.
+   * @default {@link Variables.colorNeutral} at 70% opacity
+   */
+  colorModalBackdrop?: CssColor;
   /**
    * The default font that will be used in all components.
    * This can be the name of a custom font loaded by your code or the name of a web-safe font ((@link WebSafeFont})
@@ -712,7 +777,7 @@ export type Variables = {
    * By default, this value is relative to the root fontSize of the html element.
    * @default '0.8125rem'
    */
-  fontSize?: CssLengthUnit;
+  fontSize?: CssLengthUnit | FontSizeScale;
   /**
    * The font weight the components will use. By default, the components will use the 400, 500, 600 and 700 weights
    * for normal, medium, semibold and bold text respectively.
@@ -729,9 +794,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' };