diff --git a/.changeset/violet-roses-look.md b/.changeset/violet-roses-look.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/violet-roses-look.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
index daa9ad7d683..5d5da2f863a 100644
--- a/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
+++ b/packages/clerk-js/src/ui/components/CreateOrganization/CreateOrganizationForm.tsx
@@ -148,7 +148,7 @@ export const CreateOrganizationForm = withCardStateProvider((props: CreateOrgani
                       size='md'
                       icon={Upload}
                       sx={t => ({
-                        color: t.colors.$blackAlpha400,
+                        color: t.colors.$textTertiary,
                         transitionDuration: t.transitionDuration.$controls,
                       })}
                     />
diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
index 3bd6e1d920b..b930e7cd8b6 100644
--- a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
@@ -29,9 +29,9 @@ const sharedStyles: ThemableCssProp = t => ({
 });
 
 export const sharedMainIdentifierSx: ThemableCssProp = t => ({
-  color: t.colors.$blackAlpha950,
+  color: t.colors.$text,
   ':hover': {
-    color: t.colors.$blackAlpha950,
+    color: t.colors.$text,
   },
 });
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
index 901817a1a88..67a676d8b37 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/MemberListTable.tsx
@@ -190,7 +190,7 @@ export const RoleSelect = (props: {
         sx={
           triggerSx ||
           (t => ({
-            color: t.colors.$colorTextSecondary,
+            color: t.colors.$text,
             backgroundColor: 'transparent',
             textWrap: 'nowrap',
           }))
@@ -205,13 +205,13 @@ export const RoleSelect = (props: {
             {prefixLocalizationKey && (
               <Text
                 as='span'
-                sx={t => ({ color: t.colors.$blackAlpha400 })}
+                sx={t => ({ color: t.colors.$textTertiary })}
                 localizationKey={prefixLocalizationKey}
               />
             )}
             <Text
               as='span'
-              sx={t => ({ color: t.colors.$blackAlpha950 })}
+              sx={t => ({ color: t.colors.$text })}
             >
               {localizeCustomRole(selectedRole?.value) || selectedRole?.label}
             </Text>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx
index 484d9c3d34a..6c4c0b68b94 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationGeneralPage.tsx
@@ -148,20 +148,20 @@ const OrganizationDomainsSection = () => {
 
         <Protect permission='org:sys_domains:manage'>
           <Action.Trigger value='add'>
-            <Col>
-              <ProfileSection.ArrowButton
-                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
-                id='organizationDomains'
-              />
-              <Text
-                localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
-                sx={t => ({
-                  paddingLeft: t.space.$9,
-                  color: t.colors.$colorTextSecondary,
-                })}
-              />
-            </Col>
+            <ProfileSection.ArrowButton
+              localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.primaryButton')}
+              id='organizationDomains'
+            />
           </Action.Trigger>
+          <Action.Closed value='add'>
+            <Text
+              localizationKey={localizationKeys('organizationProfile.profilePage.domainSection.subtitle')}
+              sx={t => ({
+                paddingLeft: t.space.$9,
+                color: t.colors.$textSecondary,
+              })}
+            />
+          </Action.Closed>
 
           <Action.Open value='add'>
             <Action.Card>
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
index 1a206e7988b..2a3e70459da 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabInvitations.tsx
@@ -65,7 +65,7 @@ export const OrganizationMembersTabInvitations = () => {
                       )}
                       sx={t => ({
                         paddingLeft: t.space.$10,
-                        color: t.colors.$colorTextSecondary,
+                        color: t.colors.$textSecondary,
                         [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 4d817ce9e16..7bae94507af 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationMembersTabRequests.tsx
@@ -65,7 +65,7 @@ export const OrganizationMembersTabRequests = () => {
                       )}
                       sx={t => ({
                         paddingLeft: t.space.$10,
-                        color: t.colors.$colorTextSecondary,
+                        color: t.colors.$textSecondary,
                         [mqu.md]: {
                           paddingLeft: 0,
                         },
diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
index b605be8dce4..0441b93d7d9 100644
--- a/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationProfile/OrganizationProfileAvatarUploader.tsx
@@ -17,7 +17,7 @@ export const OrganizationProfileAvatarUploader = (
         sx={t => ({
           textAlign: 'left',
           marginBottom: t.space.$2,
-          color: t.colors.$blackAlpha700,
+          color: t.colors.$textSecondary,
         })}
         localizationKey={localizationKeys('organizationProfile.start.profileSection.uploadAction__title')}
       />
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
index 7059868d528..1dd0d9dc745 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx
@@ -185,7 +185,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
               padding: `${t.space.$4} ${t.space.$5}`,
             })}
           />
-          <Actions role='menu'>{manageOrganizationSmallIconButton}</Actions>
+          {manageOrganizationSmallIconButton}
         </Flex>
       );
 
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
index 06c1a3ceef6..7394ce6d458 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx
@@ -37,7 +37,6 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
           t => ({
             padding: `${t.space.$1} ${t.space.$2}`,
             position: 'relative',
-            color: t.colors.$colorText,
           }),
           sx,
         ]}
@@ -54,7 +53,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
             size='xs'
             fetchRoles
             organization={organization}
-            sx={t => ({ maxWidth: '30ch', color: t.colors.$blackAlpha600 })}
+            sx={{ maxWidth: '30ch' }}
           />
         )}
         {!organization && (
@@ -63,7 +62,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
             gap={3}
             user={userWithoutIdentifiers}
             showAvatar={!hidePersonal}
-            sx={t => ({ color: t.colors.$blackAlpha600 })}
+            sx={t => ({ color: t.colors.$textSecondary })}
             title={
               hidePersonal
                 ? localizationKeys('organizationSwitcher.notSelected')
@@ -77,7 +76,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
         <Icon
           elementDescriptor={descriptors.organizationSwitcherTriggerIcon}
           icon={ChevronDown}
-          sx={t => ({ color: t.colors.$blackAlpha400, marginLeft: `${t.space.$2}` })}
+          sx={t => ({ marginLeft: `${t.space.$2}` })}
         />
       </Button>
     );
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
index 3cebe146409..e1189fd5c55 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/OtherOrganizationActions.tsx
@@ -34,10 +34,10 @@ const CreateOrganizationButton = ({
       onClick={onCreateOrganizationClick}
       sx={t => ({
         borderBottom: 'none',
-        color: t.colors.$blackAlpha500,
+        color: t.colors.$textSecondary,
         padding: `${t.space.$5} ${t.space.$5}`,
         ':hover': {
-          color: t.colors.$blackAlpha600,
+          color: t.colors.$textSecondary,
         },
       })}
       iconSx={t => ({
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
index f0b7eca3cb6..57bb3ce80da 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -114,9 +114,9 @@ const Preview = (
         elementId='organizationSwitcherListedOrganization'
         organization={publicOrganizationData}
         sx={t => ({
-          color: t.colors.$blackAlpha600,
+          color: t.colors.$textSecondary,
           ':hover': {
-            color: t.colors.$blackAlpha600,
+            color: t.colors.$textSecondary,
           },
         })}
       />
@@ -177,9 +177,9 @@ const InvitationPreview = withCardStateProvider(
             elementId='organizationSwitcherListedOrganization'
             organization={publicOrganizationData}
             sx={t => ({
-              color: t.colors.$blackAlpha600,
+              color: t.colors.$textSecondary,
               ':hover': {
-                color: t.colors.$blackAlpha600,
+                color: t.colors.$textSecondary,
               },
             })}
           />
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
index 349db5141c9..c06b8c1d664 100644
--- a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
+++ b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx
@@ -81,9 +81,9 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
             mainIdentifierVariant={'buttonLarge'}
             title={localizationKeys('organizationSwitcher.personalWorkspace')}
             mainIdentifierSx={t => ({
-              color: t.colors.$blackAlpha600,
+              color: t.colors.$textSecondary,
               ':hover': {
-                color: t.colors.$blackAlpha600,
+                color: t.colors.$textSecondary,
               },
             })}
           />
@@ -101,9 +101,9 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
             elementId='organizationSwitcherListedOrganization'
             organization={organization}
             sx={t => ({
-              color: t.colors.$blackAlpha600,
+              color: t.colors.$textSecondary,
               ':hover': {
-                color: t.colors.$blackAlpha600,
+                color: t.colors.$textSecondary,
               },
             })}
           />
diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
index fe3e81607ea..51ea9528d84 100644
--- a/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
+++ b/packages/clerk-js/src/ui/components/SignIn/SignInAccountSwitcher.tsx
@@ -44,7 +44,7 @@ const _SignInAccountSwitcher = () => {
                     justifyContent: 'flex-start',
                     borderRadius: 0,
                     borderBottom: `${theme.borders.$normal} ${theme.colors.$blackAlpha100}`,
-                    backgroundColor: theme.colors.$colorBackground,
+                    backgroundColor: theme.colors.$background,
                   })}
                   icon={SwitchArrowRight}
                 >
@@ -68,7 +68,7 @@ const _SignInAccountSwitcher = () => {
                 label={localizationKeys('userButton.action__addAccount')}
                 onClick={handleAddAccountClicked}
                 iconSx={t => ({
-                  color: t.colors.$blackAlpha400,
+                  color: t.colors.$textTertiary,
                   width: t.sizes.$9,
                   height: t.sizes.$6,
                 })}
@@ -107,7 +107,7 @@ const _SignInAccountSwitcher = () => {
               onClick={handleSignOutAllClicked}
               variant='ghostDanger'
               sx={t => ({
-                color: t.colors.$blackAlpha600,
+                color: t.colors.$textSecondary,
                 padding: `${t.space.$2} ${t.space.$3}`,
                 borderBottom: 'none',
                 width: '100%',
diff --git a/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx b/packages/clerk-js/src/ui/components/UserButton/SessionActions.tsx
index 35ce409e777..cd4c724a93e 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: SessionActionsProps) => {
         onClick={handleManageAccountClicked}
         sx={t => ({
           borderTop: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-          backgroundColor: t.colors.$colorBackground,
+          backgroundColor: t.colors.$background,
           padding: `${t.space.$4} ${t.space.$5}`,
         })}
       />
@@ -51,8 +51,7 @@ export const SingleSessionActions = (props: SessionActionsProps) => {
             borderBottomRightRadius: t.radii.$lg,
             padding: `${t.space.$4} ${t.space.$5}`,
             ':hover': {
-              backgroundColor: t.colors.$dangerAlpha50,
-              color: t.colors.$danger400,
+              background: t.colors.$dangerAlpha50,
             },
           }),
         ]}
@@ -98,11 +97,9 @@ export const MultiSessionActions = (props: SessionActionsProps) => {
           icon={SignOut}
           label={localizationKeys('userButton.action__signOut')}
           onClick={handleSignOutSessionClicked(session)}
+          variant='secondaryDanger'
           sx={t => ({
-            ':hover': {
-              backgroundColor: t.colors.$dangerAlpha50,
-              color: t.colors.$danger400,
-            },
+            color: t.colors.$secondaryForeground,
           })}
         />
       </Flex>
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
index adaf1ff0f72..7c8d3796a2c 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonPopover.tsx
@@ -38,11 +38,11 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
       label={localizationKeys('userButton.action__addAccount')}
       onClick={handleAddAccountClicked}
       sx={t => ({
-        backgroundColor: t.colors.$colorBackground,
+        backgroundColor: t.colors.$background,
         borderBottom: 'none',
       })}
       iconSx={t => ({
-        color: t.colors.$blackAlpha400,
+        color: t.colors.$textSecondary,
         width: t.sizes.$9,
         height: t.sizes.$6,
       })}
@@ -75,7 +75,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
         onClick={handleSignOutAllClicked}
         variant='ghostDanger'
         sx={t => ({
-          color: t.colors.$blackAlpha600,
+          color: t.colors.$textSecondary,
           padding: `${t.space.$2} ${t.space.$3}`,
           borderBottom: 'none',
           borderRadius: t.radii.$lg,
@@ -94,7 +94,7 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
           sx={t => ({
             borderRadius: 0,
             borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
-            backgroundColor: t.colors.$colorBackground,
+            backgroundColor: t.colors.$background,
           })}
           onClick={handleSessionClicked(session)}
           role='menuitem'
diff --git a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
index 40defd3dfe9..624ceb36e54 100644
--- a/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
+++ b/packages/clerk-js/src/ui/components/UserButton/UserButtonTrigger.tsx
@@ -21,7 +21,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.$text }), 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 0171c0939e5..d3c580dfb61 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/AccountPage.tsx
@@ -25,10 +25,7 @@ export const AccountPage = withCardStateProvider(() => {
   return (
     <Col
       elementDescriptor={descriptors.page}
-      sx={t => ({
-        gap: t.space.$8,
-        color: t.colors.$blackAlpha950,
-      })}
+      sx={t => ({ gap: t.space.$8, color: t.colors.$text })}
     >
       <Card.Alert>{card.error}</Card.Alert>
       <Col
diff --git a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
index ab2727df95f..f9496eccb06 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/ConnectedAccountsSection.tsx
@@ -73,14 +73,13 @@ export const ConnectedAccountsSection = withCardStateProvider(() => {
                         gap={2}
                         center
                       >
-                        <Text
-                          truncate
-                          sx={t => ({ color: t.colors.$blackAlpha700 })}
-                        >{`${providerToDisplayData[account.provider].name}`}</Text>
+                        <Text sx={t => ({ color: t.colors.$text })}>{`${
+                          providerToDisplayData[account.provider].name
+                        }`}</Text>
                         <Text
                           truncate
                           as='span'
-                          sx={t => ({ color: t.colors.$blackAlpha400 })}
+                          sx={t => ({ color: t.colors.$textTertiary })}
                         >
                           {label ? `• ${label}` : ''}
                         </Text>
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
index 86498cf9ab2..b70438c163d 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EmailsSection.tsx
@@ -54,7 +54,7 @@ export const EmailsSection = () => {
                   sx={t => ({ overflow: 'hidden', gap: t.space.$2 })}
                 >
                   <Text
-                    sx={t => ({ color: t.colors.$blackAlpha700 })}
+                    sx={t => ({ color: t.colors.$text })}
                     truncate
                   >
                     {email.emailAddress}
@@ -66,7 +66,6 @@ export const EmailsSection = () => {
                     <Badge localizationKey={localizationKeys('badge__unverified')} />
                   )}
                 </Flex>
-
                 <EmailMenu email={email} />
               </ProfileSection.Item>
 
diff --git a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
index ca2613f069d..c76df748ffb 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/EnterpriseAccountsSection.tsx
@@ -43,9 +43,7 @@ export const EnterpriseAccountsSection = () => {
                   gap={2}
                   center
                 >
-                  <Text sx={t => ({ color: t.colors.$blackAlpha700 })}>{`${providerName} ${
-                    label ? `(${label})` : ''
-                  }`}</Text>
+                  <Text sx={t => ({ color: t.colors.$text })}>{`${providerName} ${label ? `(${label})` : ''}`}</Text>
                   {error && (
                     <Badge
                       colorScheme='danger'
diff --git a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
index 5d8724a771c..2055fcd6092 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/PhoneSection.tsx
@@ -55,7 +55,7 @@ export const PhoneSection = () => {
                       gap={2}
                       center
                     >
-                      <Text sx={t => ({ color: t.colors.$blackAlpha700 })}>
+                      <Text sx={t => ({ color: t.colors.$text })}>
                         {stringToFormattedPhoneString(phone.phoneNumber)}
                       </Text>
                       {user?.primaryPhoneNumberId === phone.id && (
diff --git a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
index fb78794bdcd..9d413fb56cd 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UserProfileSection.tsx
@@ -39,7 +39,7 @@ export const UserProfileSection = () => {
               user={userWithoutIdentifiers}
               size='lg'
               mainIdentifierVariant='subtitle'
-              sx={t => ({ color: t.colors.$blackAlpha700 })}
+              sx={t => ({ color: t.colors.$text })}
             />
 
             <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 6a58cf16b6a..bdebf0fabd1 100644
--- a/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
+++ b/packages/clerk-js/src/ui/components/UserProfile/UsernameSection.tsx
@@ -36,7 +36,7 @@ export const UsernameSection = () => {
             {user.username && (
               <Text
                 truncate
-                sx={t => ({ color: t.colors.$blackAlpha700 })}
+                sx={t => ({ color: t.colors.$text })}
               >
                 {user.username}
               </Text>
diff --git a/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx b/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx
index 95ca7788fea..6a3f4267386 100644
--- a/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx
+++ b/packages/clerk-js/src/ui/customizables/__tests__/makeCustomizable.test.tsx
@@ -12,7 +12,7 @@ describe('Theme used in sx callback', () => {
     render(
       <AppearanceProvider
         appearanceKey='signIn'
-        globalAppearance={{ variables: { colorPrimary: 'blue' } }}
+        globalAppearance={{ variables: { colors: { primary: 'blue' } } }}
       >
         <InternalThemeProvider>
           <Box
@@ -30,7 +30,7 @@ describe('Theme used in sx callback', () => {
     render(
       <AppearanceProvider
         appearanceKey='signIn'
-        appearance={{ variables: { colorPrimary: 'red' } }}
+        appearance={{ variables: { colors: { primary: 'red' } } }}
       >
         <InternalThemeProvider>
           <Box
@@ -48,8 +48,8 @@ describe('Theme used in sx callback', () => {
     render(
       <AppearanceProvider
         appearanceKey='signIn'
-        globalAppearance={{ variables: { colorPrimary: 'blue' } }}
-        appearance={{ variables: { colorPrimary: 'red' } }}
+        globalAppearance={{ variables: { colors: { primary: 'blue' } } }}
+        appearance={{ variables: { colors: { primary: 'red' } } }}
       >
         <InternalThemeProvider>
           <Box
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 8c6a3e2a416..896b6df90ac 100644
--- a/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
+++ b/packages/clerk-js/src/ui/customizables/__tests__/parseAppearance.test.tsx
@@ -10,16 +10,19 @@ import { knownColors } from './testUtils';
 const themeAColor = 'blue';
 const themeA = {
   variables: {
-    colorPrimary: themeAColor,
-    colorDanger: themeAColor,
-    colorSuccess: themeAColor,
-    colorWarning: themeAColor,
-    colorBackground: themeAColor,
-    colorInputBackground: themeAColor,
-    colorInputText: themeAColor,
-    colorText: themeAColor,
-    colorTextOnPrimaryBackground: themeAColor,
-    colorTextSecondary: themeAColor,
+    colors: {
+      primary: themeAColor,
+      danger: themeAColor,
+      success: themeAColor,
+      warning: themeAColor,
+      background: themeAColor,
+      input: themeAColor,
+      inputForeground: themeAColor,
+      text: themeAColor,
+      primaryForeground: themeAColor,
+      textSecondary: themeAColor,
+      textTertiary: themeAColor,
+    },
     borderRadius: '1rem',
     fontFamily: 'Comic Sans',
     fontFamilyButtons: 'Comic Sans',
@@ -33,16 +36,19 @@ const themeA = {
 const themeBColor = 'red';
 const themeB = {
   variables: {
-    colorPrimary: themeBColor,
-    colorDanger: themeBColor,
-    colorSuccess: themeBColor,
-    colorWarning: themeBColor,
-    colorBackground: themeBColor,
-    colorInputBackground: themeBColor,
-    colorInputText: themeBColor,
-    colorText: themeBColor,
-    colorTextOnPrimaryBackground: themeBColor,
-    colorTextSecondary: themeBColor,
+    colors: {
+      primary: themeBColor,
+      danger: themeBColor,
+      success: themeBColor,
+      warning: themeBColor,
+      background: themeBColor,
+      input: themeBColor,
+      inputForeground: themeBColor,
+      text: themeBColor,
+      primaryForeground: themeBColor,
+      textSecondary: themeBColor,
+      textTertiary: themeBColor,
+    },
     borderRadius: '2rem',
     fontFamily: 'Arial',
     fontFamilyButtons: 'Arial',
@@ -80,12 +86,12 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.colors.$danger500).toBe(knownColors[themeAColor]);
     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.$background).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$input).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$inputForeground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$text).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$primaryForeground).toBe(knownColors[themeAColor]);
+    expect(result.current.parsedInternalTheme.colors.$textSecondary).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);
@@ -111,12 +117,12 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.colors.$danger500).toBe(knownColors[themeBColor]);
     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.$background).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$input).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$inputForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$text).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$primaryForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$textSecondary).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);
@@ -143,12 +149,12 @@ describe('AppearanceProvider internalTheme flows', () => {
     expect(result.current.parsedInternalTheme.colors.$danger500).toBe(knownColors[themeBColor]);
     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.$background).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$input).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$inputForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$text).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$primaryForeground).toBe(knownColors[themeBColor]);
+    expect(result.current.parsedInternalTheme.colors.$textSecondary).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);
@@ -208,7 +214,7 @@ describe('AppearanceProvider element flows', () => {
         appearanceKey='signIn'
         globalAppearance={{
           variables: {
-            colorPrimary: themeAColor,
+            colors: { primary: themeAColor },
           },
           elements: ({ theme }) => ({
             alert: { backgroundColor: theme.colors.$primary500 },
diff --git a/packages/clerk-js/src/ui/customizables/parseVariables.ts b/packages/clerk-js/src/ui/customizables/parseVariables.ts
index ad95a6c2a7e..7f516d4dcca 100644
--- a/packages/clerk-js/src/ui/customizables/parseVariables.ts
+++ b/packages/clerk-js/src/ui/customizables/parseVariables.ts
@@ -11,24 +11,33 @@ import {
 } from '../utils';
 
 export const createColorScales = (theme: Theme) => {
-  const variables = theme.variables || {};
+  const variables = theme.variables;
+
+  //values dependent on other values
+  const textSecondary =
+    toHSLA(variables?.colors?.textSecondary) || colors.makeTransparent(variables?.colors?.text, 0.15);
+  const textTertiary = toHSLA(variables?.colors?.textTertiary) || colors.makeTransparent(textSecondary, 0.4);
+
   return removeUndefinedProps({
-    ...colorOptionToHslaLightnessScale(variables.colorPrimary, 'primary'),
-    ...colorOptionToHslaAlphaScale(variables.colorPrimary, 'primaryAlpha'),
-    ...colorOptionToHslaLightnessScale(variables.colorDanger, 'danger'),
-    ...colorOptionToHslaAlphaScale(variables.colorDanger, 'dangerAlpha'),
-    ...colorOptionToHslaLightnessScale(variables.colorSuccess, 'success'),
-    ...colorOptionToHslaAlphaScale(variables.colorSuccess, 'successAlpha'),
-    ...colorOptionToHslaLightnessScale(variables.colorWarning, 'warning'),
-    ...colorOptionToHslaAlphaScale(variables.colorWarning, 'warningAlpha'),
-    ...colorOptionToHslaAlphaScale(variables.colorAlphaShade, 'blackAlpha'),
-    colorText: toHSLA(variables.colorText),
-    colorTextOnPrimaryBackground: toHSLA(variables.colorTextOnPrimaryBackground),
-    colorTextSecondary: toHSLA(variables.colorTextSecondary) || colors.makeTransparent(variables.colorText, 0.35),
-    colorInputText: toHSLA(variables.colorInputText),
-    colorBackground: toHSLA(variables.colorBackground),
-    colorInputBackground: toHSLA(variables.colorInputBackground),
-    colorShimmer: toHSLA(variables.colorShimmer),
+    ...colorOptionToHslaLightnessScale(variables?.colors?.primary, 'primary'),
+    ...colorOptionToHslaAlphaScale(variables?.colors?.primary, 'primaryAlpha'),
+    ...colorOptionToHslaLightnessScale(variables?.colors?.secondary, 'secondary'),
+    ...colorOptionToHslaLightnessScale(variables?.colors?.danger, 'danger'),
+    ...colorOptionToHslaAlphaScale(variables?.colors?.danger, 'dangerAlpha'),
+    ...colorOptionToHslaLightnessScale(variables?.colors?.success, 'success'),
+    ...colorOptionToHslaAlphaScale(variables?.colors?.success, 'successAlpha'),
+    ...colorOptionToHslaLightnessScale(variables?.colors?.warning, 'warning'),
+    ...colorOptionToHslaAlphaScale(variables?.colors?.warning, 'warningAlpha'),
+    ...colorOptionToHslaAlphaScale(variables?.colors?.alphaShade, 'blackAlpha'),
+    primaryForeground: toHSLA(variables?.colors?.primaryForeground),
+    secondaryForeground: toHSLA(variables?.colors?.secondaryForeground),
+    text: toHSLA(variables?.colors?.text),
+    textSecondary: textSecondary,
+    textTertiary: textTertiary,
+    inputForeground: toHSLA(variables?.colors?.inputForeground),
+    background: toHSLA(variables?.colors?.background),
+    input: toHSLA(variables?.colors?.input),
+    shimmer: toHSLA(variables?.colors?.shimmer),
   });
 };
 
@@ -102,8 +111,8 @@ export const createFonts = (theme: Theme) => {
 };
 
 export const createShadows = (theme: Theme) => {
-  const { shadowShimmer } = theme.variables || {};
-  return removeUndefinedProps({ shadowShimmer });
+  const { shimmerShadow } = theme.variables?.colors || {};
+  return removeUndefinedProps({ shimmerShadow });
 };
 
 const splitCssUnit = (str: string) => {
diff --git a/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx b/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx
index 83f6fa25a05..6dcff7704f9 100644
--- a/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx
+++ b/packages/clerk-js/src/ui/elements/Action/ActionCard.tsx
@@ -9,7 +9,7 @@ type ActionCardProps = ComponentProps<typeof Col> & {
 
 const styles = (t: InternalTheme) => ({
   neutral: {
-    backgroundColor: t.colors.$colorBackground,
+    backgroundColor: t.colors.$background,
   },
   destructive: {
     backgroundColor: t.colors.$blackAlpha50,
diff --git a/packages/clerk-js/src/ui/elements/Actions.tsx b/packages/clerk-js/src/ui/elements/Actions.tsx
index ceaacdd7a05..19276b7db03 100644
--- a/packages/clerk-js/src/ui/elements/Actions.tsx
+++ b/packages/clerk-js/src/ui/elements/Actions.tsx
@@ -191,7 +191,6 @@ export const Action = (props: ActionProps) => {
         t => ({
           flex: '1',
           borderRadius: 0,
-          borderBottom: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
           gap: t.space.$3,
           justifyContent: 'flex-start',
         }),
diff --git a/packages/clerk-js/src/ui/elements/Avatar.tsx b/packages/clerk-js/src/ui/elements/Avatar.tsx
index 9a30961169c..492cacc6951 100644
--- a/packages/clerk-js/src/ui/elements/Avatar.tsx
+++ b/packages/clerk-js/src/ui/elements/Avatar.tsx
@@ -77,7 +77,7 @@ export const Avatar = (props: AvatarProps) => {
       <Box
         sx={t => ({
           overflow: 'hidden',
-          background: t.colors.$colorShimmer,
+          background: t.colors.$shimmer,
           position: 'absolute',
           width: '25%',
           height: '100%',
@@ -93,7 +93,7 @@ export const Avatar = (props: AvatarProps) => {
             transform: 'var(--cl-shimmer-hover-after-transform, skewX(45deg) translateX(75%))',
             transition: `all ${t.transitionDuration.$slower} ${t.transitionTiming.$easeOut}`,
             border: t.borders.$heavy,
-            borderColor: t.colors.$colorShimmer,
+            borderColor: t.colors.$shimmer,
             borderRadius: rounded ? t.radii.$circle : t.radii.$md,
           },
         })}
diff --git a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
index ef3d2c6b76d..c1f87598a0f 100644
--- a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
+++ b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
@@ -117,7 +117,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
             )}
           </Flex>
           <Text
-            sx={t => ({ color: t.colors.$blackAlpha400, fontSize: t.fontSizes.$sm })}
+            sx={t => ({ color: t.colors.$textTertiary, fontSize: t.fontSizes.$sm })}
             localizationKey={localizationKeys('userProfile.profilePage.fileDropAreaHint')}
           />
         </Col>
diff --git a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
index 01d596c29ed..e69510c570a 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardClerkAndPagesTag.tsx
@@ -36,7 +36,7 @@ export const CardClerkAndPagesTag = React.memo(
             gap={1}
             align='center'
             justify='center'
-            sx={t => ({ color: t.colors.$blackAlpha500 })}
+            sx={t => ({ color: t.colors.$textTertiary })}
           >
             <>
               <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 ceb53782037..f20f353dfa5 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardContent.tsx
@@ -23,7 +23,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
       elementDescriptor={descriptors.card}
       sx={[
         t => ({
-          backgroundColor: t.colors.$colorBackground,
+          backgroundColor: t.colors.$background,
           transitionProperty: t.transitionProperty.$common,
           transitionDuration: '200ms',
           textAlign: 'center',
@@ -54,7 +54,7 @@ export const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>((p
             />
           }
           sx={t => ({
-            color: t.colors.$colorTextTertiary,
+            color: t.colors.$textTertiary,
             zIndex: t.zIndices.$modal,
             position: 'absolute',
             top: t.space.$none,
diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index 9dabd24fa2e..79afb7cc788 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -22,10 +22,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
         t => ({
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 0.8),
-            t.colors.$blackAlpha50,
-          ),
+          background: common.mergedColorsBackground(colors.setAlpha(t.colors.$background, 0.8), t.colors.$blackAlpha50),
           backdropFilter: t.backdropFilters.$defaultBlur,
           '>:first-of-type': {
             padding: `${t.space.$4} ${t.space.$8} ${t.space.$4} ${t.space.$8}`,
diff --git a/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx b/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
index 86f63432e8e..b69f7278639 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardRoot.tsx
@@ -35,7 +35,7 @@ export const CardRoot = React.forwardRef<HTMLDivElement, CardRootProps>((props,
             width: t.sizes.$100,
             boxShadow: t.shadows.$cardBoxShadow,
             borderRadius: t.radii.$lg,
-            color: t.colors.$colorText,
+            color: t.colors.$text,
             position: 'relative',
             overflow: 'hidden',
           }),
diff --git a/packages/clerk-js/src/ui/elements/FieldControl.tsx b/packages/clerk-js/src/ui/elements/FieldControl.tsx
index 2d09dd2edba..256fcbd9b5f 100644
--- a/packages/clerk-js/src/ui/elements/FieldControl.tsx
+++ b/packages/clerk-js/src/ui/elements/FieldControl.tsx
@@ -130,7 +130,7 @@ const FieldLabel = (props: PropsWithChildren<{ localizationKey?: LocalizationKey
       sx={t => ({
         display: 'flex',
         alignItems: 'center',
-        color: t.colors.$blackAlpha700,
+        color: t.colors.$text,
       })}
     >
       {props.children}
diff --git a/packages/clerk-js/src/ui/elements/InformationBox.tsx b/packages/clerk-js/src/ui/elements/InformationBox.tsx
index 6d3d2fe02c6..74732a64206 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.$blackAlpha700 })}
+        sx={t => ({ color: t.colors.$textSecondary })}
       />
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/elements/Menu.tsx b/packages/clerk-js/src/ui/elements/Menu.tsx
index 912865c7ebe..296d492d602 100644
--- a/packages/clerk-js/src/ui/elements/Menu.tsx
+++ b/packages/clerk-js/src/ui/elements/Menu.tsx
@@ -123,7 +123,7 @@ export const MenuList = (props: MenuListProps) => {
         onKeyDown={onKeyDown}
         sx={[
           theme => ({
-            backgroundColor: colors.makeSolid(theme.colors.$colorBackground),
+            backgroundColor: colors.makeSolid(theme.colors.$background),
             border: theme.borders.$normal,
             outline: 'none',
             borderRadius: theme.radii.$lg,
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index 8a787ed0fdd..02fa05a033b 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -141,14 +141,11 @@ const NavbarContainer = (
         flex: `0 0 ${t.space.$57}`,
         width: t.sizes.$57,
         maxWidth: t.space.$57,
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 0.8),
-          t.colors.$blackAlpha50,
-        ),
+        background: common.mergedColorsBackground(colors.setAlpha(t.colors.$background, 0.8), t.colors.$blackAlpha50),
         backdropFilter: t.backdropFilters.$defaultBlur,
         padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
         marginRight: `-${t.space.$2}`,
-        color: t.colors.$colorText,
+        color: t.colors.$text,
         justifyContent: 'space-between',
       })}
     >
@@ -216,7 +213,7 @@ const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<R
           zIndex: t.zIndices.$navbar,
           borderRadius: t.radii.$xl,
           overflow: 'hidden',
-          color: t.colors.$colorText,
+          color: t.colors.$text,
         })}
       >
         <Col
@@ -229,7 +226,7 @@ const MobileNavbarContainer = withFloatingTree((props: React.PropsWithChildren<R
             top: 0,
             bottom: 0,
             width: t.space.$60,
-            backgroundColor: colors.makeSolid(t.colors.$colorBackground),
+            backgroundColor: colors.makeSolid(t.colors.$background),
             borderTopRightRadius: t.radii.$lg,
             borderBottomRightRadius: t.radii.$lg,
             borderRight: `${t.borders.$normal} ${t.colors.$blackAlpha100}`,
@@ -302,10 +299,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
       elementDescriptor={descriptors.navbarMobileMenuRow}
       sx={t => ({
         display: 'none',
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 0.8),
-          t.colors.$blackAlpha50,
-        ),
+        background: common.mergedColorsBackground(colors.setAlpha(t.colors.$background, 0.8), t.colors.$blackAlpha50),
         backdropFilter: t.backdropFilters.$defaultBlur,
         padding: `${t.space.$2} ${t.space.$3} ${t.space.$4} ${t.space.$3}`,
         marginBottom: `-${t.space.$2}`,
@@ -322,7 +316,7 @@ export const NavbarMenuButtonRow = ({ navbarTitleLocalizationKey, ...props }: Na
         textVariant='h2'
         variant='ghost'
         sx={t => ({
-          color: t.colors.$colorText,
+          color: t.colors.$text,
           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 8064b9cadea..145bcc96c9f 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='secondary'
       sx={t => [
         {
-          color: t.colors.$colorText,
+          color: t.colors.$text,
           opacity: isActive ? 1 : t.opacity.$inactive,
           padding: `${t.space.$0x5} ${t.space.$0x5}`,
         },
@@ -117,7 +117,7 @@ const shouldShowDots = (currentPage: number, pageToShow: number, siblingCount: n
 
 const ThreeDots = () => (
   <Flex center>
-    <Text sx={t => ({ color: t.colors.$blackAlpha500 })}>...</Text>
+    <Text sx={t => ({ color: t.colors.$textTertiary })}>...</Text>
   </Flex>
 );
 
diff --git a/packages/clerk-js/src/ui/elements/PopoverCard.tsx b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
index 9e4fd09116b..25a556a9775 100644
--- a/packages/clerk-js/src/ui/elements/PopoverCard.tsx
+++ b/packages/clerk-js/src/ui/elements/PopoverCard.tsx
@@ -35,7 +35,7 @@ const PopoverCardContent = (props: PropsOfComponent<typeof Flex>) => {
       direction='col'
       sx={[
         t => ({
-          backgroundColor: t.colors.$colorBackground,
+          backgroundColor: t.colors.$background,
           overflow: 'hidden',
           borderRadius: t.radii.$lg,
           zIndex: t.zIndices.$card,
@@ -61,10 +61,7 @@ const PopoverCardFooter = (props: PropsOfComponent<typeof Flex>) => {
       justify='between'
       sx={[
         t => ({
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 0.8),
-            t.colors.$blackAlpha50,
-          ),
+          background: common.mergedColorsBackground(colors.setAlpha(t.colors.$background, 0.8), t.colors.$blackAlpha50),
           marginTop: `-${t.space.$2}`,
           paddingTop: t.space.$2,
           borderBottomLeftRadius: 'inherit',
diff --git a/packages/clerk-js/src/ui/elements/PreviewButton.tsx b/packages/clerk-js/src/ui/elements/PreviewButton.tsx
index 92f9f993fbe..d096b70cb5f 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.$blackAlpha500,
+              color: t.colors.$textTertiary,
               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 36555ae8722..76deda3cd20 100644
--- a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
+++ b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardContent.tsx
@@ -31,7 +31,7 @@ export const ProfileCardContent = (props: ProfileCardContentProps) => {
     <Col
       elementDescriptor={descriptors.scrollBox}
       sx={t => ({
-        backgroundColor: t.colors.$colorBackground,
+        backgroundColor: t.colors.$background,
         position: 'relative',
         borderRadius: t.radii.$lg,
         width: '100%',
diff --git a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx
index 2479f0af320..970043c9a71 100644
--- a/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx
+++ b/packages/clerk-js/src/ui/elements/ProfileCard/ProfileCardRoot.tsx
@@ -58,7 +58,7 @@ export const ProfileCardRoot = React.forwardRef<HTMLDivElement, PropsOfComponent
               />
             }
             sx={t => ({
-              color: t.colors.$colorTextTertiary,
+              color: t.colors.$textTertiary,
               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..9930bda972a 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.$text,
         fontFamily: t.fonts.$main,
         fontStyle: t.fontStyles.$normal,
       })}
diff --git a/packages/clerk-js/src/ui/elements/Select.tsx b/packages/clerk-js/src/ui/elements/Select.tsx
index 71f5f77fba4..70e292261b6 100644
--- a/packages/clerk-js/src/ui/elements/Select.tsx
+++ b/packages/clerk-js/src/ui/elements/Select.tsx
@@ -299,7 +299,7 @@ export const SelectOptionList = (props: SelectOptionListProps) => {
         justify='start'
         sx={[
           theme => ({
-            backgroundColor: colors.makeSolid(theme.colors.$colorBackground),
+            backgroundColor: colors.makeSolid(theme.colors.$background),
             borderRadius: theme.radii.$lg,
             overflow: 'hidden',
             animation: `${animations.dropdownSlideInScaleAndFade} ${theme.transitionDuration.$slower} ${theme.transitionTiming.$slowBezier}`,
@@ -369,11 +369,7 @@ export const SelectButton = (
 
   let show: React.ReactNode = children;
   if (!children) {
-    show = selectedOption ? (
-      buttonRenderOption(selectedOption)
-    ) : (
-      <Text sx={t => ({ opacity: t.opacity.$inactive })}>{placeholder}</Text>
-    );
+    show = selectedOption ? buttonRenderOption(selectedOption) : <Text>{placeholder}</Text>;
   }
 
   return (
diff --git a/packages/clerk-js/src/ui/elements/TagInput.tsx b/packages/clerk-js/src/ui/elements/TagInput.tsx
index 277d1517562..f18adc489b2 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.$input,
+          color: t.colors.$inputForeground,
           minHeight: t.sizes.$20,
           maxHeight: t.sizes.$60,
           overflowY: 'auto',
@@ -164,7 +164,7 @@ export const TagInput = (props: TagInputProps) => {
           lineHeight: t.space.$5,
           paddingLeft: t.space.$1,
           '::placeholder': {
-            color: t.colors.$colorTextTertiary,
+            color: t.colors.$textTertiary,
           },
           boxShadow: 'none',
           ':hover': {
@@ -217,7 +217,7 @@ const TagPill = (props: TagPillProps) => {
         elementDescriptor={descriptors.tagPillIcon}
         size='md'
         icon={Plus}
-        sx={t => ({ color: t.colors.$colorTextTertiary, transform: 'translateY(0px) rotate(45deg)' })}
+        sx={t => ({ color: t.colors.$textTertiary, transform: 'translateY(0px) rotate(45deg)' })}
       />
     </Flex>
   );
diff --git a/packages/clerk-js/src/ui/elements/UserPreview.tsx b/packages/clerk-js/src/ui/elements/UserPreview.tsx
index 6fcc0d61a34..1de4f53c97e 100644
--- a/packages/clerk-js/src/ui/elements/UserPreview.tsx
+++ b/packages/clerk-js/src/ui/elements/UserPreview.tsx
@@ -141,14 +141,12 @@ export const UserPreview = (props: UserPreviewProps) => {
           elementDescriptor={descriptors.userPreviewMainIdentifier}
           elementId={descriptors.userPreviewMainIdentifier.setId(elementId)}
           variant={mainIdentifierSize}
-          colorScheme='inherit'
           sx={[theme => ({ display: 'flex', gap: theme.sizes.$1, alignItems: 'center' }), mainIdentifierSx]}
         >
           <Text
             as='span'
             truncate
-            colorScheme='inherit'
-            sx={{ fontSize: 'inherit', fontWeight: 'inherit' }}
+            sx={{ fontWeight: 'inherit' }}
           >
             {localizedTitle || name || identifier}
           </Text>
@@ -160,8 +158,8 @@ export const UserPreview = (props: UserPreviewProps) => {
           <Text
             elementDescriptor={descriptors.userPreviewSecondaryIdentifier}
             elementId={descriptors.userPreviewSecondaryIdentifier.setId(elementId)}
-            colorScheme='neutral'
             truncate
+            colorScheme='neutral'
             localizationKey={subtitle || identifier}
           />
         )}
diff --git a/packages/clerk-js/src/ui/elements/withAvatarShimmer.tsx b/packages/clerk-js/src/ui/elements/withAvatarShimmer.tsx
index 33816c1abc8..1816ff969b3 100644
--- a/packages/clerk-js/src/ui/elements/withAvatarShimmer.tsx
+++ b/packages/clerk-js/src/ui/elements/withAvatarShimmer.tsx
@@ -20,7 +20,7 @@ export const withAvatarShimmer = <T extends { sx?: ThemableCssProp }>(Component:
           parsedLayout.shimmer
             ? t => ({
                 ':hover': {
-                  '--cl-shimmer-hover-shadow': t.shadows.$shadowShimmer,
+                  '--cl-shimmer-hover-shadow': t.shadows.$shimmerShadow,
                   '--cl-shimmer-hover-transform': 'skew(-45deg) translateX(600%)',
                   '--cl-shimmer-hover-after-transform': 'skewX(45deg) translateX(-150%)',
                 },
diff --git a/packages/clerk-js/src/ui/foundations/colors.ts b/packages/clerk-js/src/ui/foundations/colors.ts
index c04a760391e..d464a1f50a8 100644
--- a/packages/clerk-js/src/ui/foundations/colors.ts
+++ b/packages/clerk-js/src/ui/foundations/colors.ts
@@ -45,14 +45,13 @@ export const colors = Object.freeze({
   // Themable colors
   ...blackAlpha,
   ...whiteAlpha,
-  colorBackground: 'white',
-  colorInputBackground: 'white',
-  colorText: 'black',
-  colorTextOnPrimaryBackground: 'white',
-  colorTextSecondary: blackAlpha.blackAlpha500,
-  colorTextTertiary: 'rgba(147,148,161,1)',
-  colorInputText: 'black',
-  colorShimmer: 'rgba(255, 255, 255, 0.36)',
+  background: 'white',
+  input: 'white',
+  text: '#131316',
+  textSecondary: '#747686',
+  textTertiary: '#9394A1',
+  inputForeground: 'black',
+  shimmer: 'rgba(255, 255, 255, 0.36)',
   transparent: 'transparent',
   white: 'white',
   black: 'black',
@@ -67,6 +66,20 @@ export const colors = Object.freeze({
   primary800: '#201D23',
   primary900: '#1B171C',
   ...colorOptionToHslaAlphaScale('#2F3037', 'primaryAlpha'),
+  primaryForeground: '#FFFFFF',
+  secondary25: '#FFFFFF',
+  secondary50: '#FFFFFF',
+  secondary100: '#FFFFFF',
+  secondary200: '#FFFFFF',
+  secondary300: '#FFFFFF',
+  secondary400: '#FFFFFF',
+  secondary500: '#FFFFFF',
+  secondary525: '#F7F7F8',
+  secondary600: '#DFDFDF',
+  secondary700: '#BFBFBF',
+  secondary800: '#9F9F9F',
+  secondary900: '#808080',
+  secondaryForeground: '#42434D',
   danger50: '#FEF2F2',
   danger100: '#FEE5E5',
   danger200: '#FECACA',
diff --git a/packages/clerk-js/src/ui/foundations/shadows.ts b/packages/clerk-js/src/ui/foundations/shadows.ts
index cdb019b3431..c7ee4e1552f 100644
--- a/packages/clerk-js/src/ui/foundations/shadows.ts
+++ b/packages/clerk-js/src/ui/foundations/shadows.ts
@@ -9,7 +9,7 @@ export const shadows = Object.freeze({
     '0px 0px 2px 0px rgba(0, 0, 0, 0.08), 0px 1px 2px 0px rgba(25, 28, 33, 0.06), 0px 0px 0px 1px rgba(25, 28, 33, 0.04)',
   actionCardShadow: '0px 1px 4px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.06)',
   secondaryButtonShadow: '0px 2px 3px -1px rgba(0, 0, 0, 0.08), 0px 1px 0px 0px rgba(0, 0, 0, 0.02)',
-  shadowShimmer: '1px 1px 2px rgba(0, 0, 0, 0.36)',
+  shimmerShadow: '1px 1px 2px rgba(0, 0, 0, 0.36)',
   sm: '0 1px 1px 0 rgb(0 0 0 / 0.05)',
   input: '0px 0px 1px 0px {{color}}',
   focusRing: '0px 0px 0px 4px {{color}}',
diff --git a/packages/clerk-js/src/ui/foundations/transitions.ts b/packages/clerk-js/src/ui/foundations/transitions.ts
index 094bc7b3341..5642e9dc57a 100644
--- a/packages/clerk-js/src/ui/foundations/transitions.ts
+++ b/packages/clerk-js/src/ui/foundations/transitions.ts
@@ -9,7 +9,7 @@ const transitionDuration = Object.freeze({
 } as const);
 
 const transitionProperty = Object.freeze({
-  common: 'background-color,border-color,color,fill,stroke,opacity,box-shadow,transform',
+  common: 'background-color,background,border-color,color,fill,stroke,opacity,box-shadow,transform',
 } as const);
 
 const transitionTiming = Object.freeze({
diff --git a/packages/clerk-js/src/ui/primitives/Button.tsx b/packages/clerk-js/src/ui/primitives/Button.tsx
index 01b871a8e68..11e5ba80140 100644
--- a/packages/clerk-js/src/ui/primitives/Button.tsx
+++ b/packages/clerk-js/src/ui/primitives/Button.tsx
@@ -46,7 +46,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
       variant: {
         primary: {
           backgroundColor: theme.colors.$primary500,
-          color: theme.colors.$colorTextOnPrimaryBackground,
+          color: theme.colors.$primaryForeground,
           boxShadow: theme.shadows.$buttonShadow,
           border: theme.borders.$normal,
           borderColor: theme.colors.$primary500,
@@ -78,7 +78,7 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
         },
         primaryDanger: {
           backgroundColor: theme.colors.$danger500,
-          color: theme.colors.$colorTextOnPrimaryBackground,
+          color: theme.colors.$primaryForeground,
           boxShadow: theme.shadows.$buttonShadow,
           border: theme.borders.$normal,
           borderColor: theme.colors.$danger500,
@@ -109,54 +109,70 @@ const { applyVariants, filterProps } = createVariants((theme, props: OwnProps) =
           },
         },
         secondary: {
-          backgroundColor: theme.colors.$colorBackground,
-          color: theme.colors.$blackAlpha700,
+          color: theme.colors.$secondaryForeground,
+          background: theme.colors.$secondary500,
           '&:hover': {
-            backgroundColor: theme.colors.$blackAlpha50,
-            color: theme.colors.$blackAlpha950,
+            color: theme.colors.$secondaryForeground,
+            background: common.mergedColorsBackground(theme.colors.$secondary500, theme.colors.$blackAlpha50),
           },
           '&:focus': props.hoverAsFocus
-            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 }
+            ? {
+                color: theme.colors.$secondaryForeground,
+                background: common.mergedColorsBackground(theme.colors.$secondary500, theme.colors.$blackAlpha50),
+              }
             : undefined,
-          '&:active': { backgroundColor: theme.colors.$colorBackground },
+          '&:active': { backgroundColor: theme.colors.$secondary500 },
           boxShadow: theme.shadows.$secondaryButtonShadow,
           border: theme.borders.$normal,
-          borderColor: theme.colors.$blackAlpha100,
+          borderColor: theme.colors.$blackAlpha200,
         },
         secondaryDanger: {
-          backgroundColor: theme.colors.$colorBackground,
+          backgroundColor: theme.colors.$secondary500,
           color: theme.colors.$danger500,
           '&:hover': {
-            backgroundColor: theme.colors.$dangerAlpha50,
             color: theme.colors.$danger500,
+            backgroundColor: theme.colors.$dangerAlpha50,
           },
           '&:focus': props.hoverAsFocus
-            ? { backgroundColor: theme.colors.$dangerAlpha50, color: theme.colors.$danger500 }
+            ? { color: theme.colors.$danger500, backgroundColor: theme.colors.$dangerAlpha50 }
             : undefined,
-          '&:active': { backgroundColor: theme.colors.$colorBackground },
+          '&:active': { backgroundColor: theme.colors.$secondary500 },
           boxShadow: theme.shadows.$secondaryButtonShadow,
           border: theme.borders.$normal,
-          borderColor: theme.colors.$blackAlpha100,
+          borderColor: theme.colors.$blackAlpha200,
         },
         ghost: {
-          color: theme.colors.$blackAlpha700,
-          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 },
+          color: theme.colors.$secondaryForeground,
+          '&:hover': {
+            color: theme.colors.$secondaryForeground,
+            background: common.mergedColorsBackground(theme.colors.$secondary500, theme.colors.$blackAlpha50),
+          },
           '&:focus': props.hoverAsFocus
-            ? { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$blackAlpha950 }
+            ? {
+                background: common.mergedColorsBackground(theme.colors.$secondary500, theme.colors.$blackAlpha50),
+                color: theme.colors.$secondaryForeground,
+              }
             : undefined,
-          '&:active': { backgroundColor: theme.colors.$transparent },
         },
         ghostPrimary: {
           color: theme.colors.$primary500,
-          '&:hover': { backgroundColor: theme.colors.$blackAlpha50, color: theme.colors.$primary500 },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$blackAlpha50 } : undefined,
-          '&:active': { backgroundColor: theme.colors.$transparent },
+          '&:hover': {
+            color: theme.colors.$primary500,
+            backgroundColor: theme.colors.$primaryAlpha50,
+          },
+          '&:focus': props.hoverAsFocus
+            ? {
+                color: theme.colors.$primary500,
+                backgroundColor: theme.colors.$primaryAlpha50,
+              }
+            : undefined,
         },
         ghostDanger: {
           color: theme.colors.$danger500,
-          '&:hover': { backgroundColor: theme.colors.$dangerAlpha50, color: theme.colors.$danger500 },
-          '&:focus': props.hoverAsFocus ? { backgroundColor: theme.colors.$danger50 } : undefined,
-          '&:active': { backgroundColor: theme.colors.$transparent },
+          '&:hover': { color: theme.colors.$danger500, backgroundColor: theme.colors.$dangerAlpha50 },
+          '&:focus': props.hoverAsFocus
+            ? { color: theme.colors.$danger500, backgroundColor: theme.colors.$danger50 }
+            : undefined,
         },
         link: {
           ...common.textVariants(theme).buttonSmall,
diff --git a/packages/clerk-js/src/ui/primitives/FormLabel.tsx b/packages/clerk-js/src/ui/primitives/FormLabel.tsx
index 4f6300fd6df..7e980c7f093 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';
 
 const { applyVariants } = createVariants(theme => ({
   base: {
-    color: theme.colors.$colorText,
+    color: theme.colors.$text,
     ...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 b8c8fa6a4dc..3c19e52135f 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.$text}`,
     margin: 0,
   },
   variants: {
diff --git a/packages/clerk-js/src/ui/primitives/Input.tsx b/packages/clerk-js/src/ui/primitives/Input.tsx
index 0c33ecafe03..54716f6c5ae 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: 'inherit',
     margin: 0,
     padding: `${theme.space.$1x5} ${theme.space.$3}`,
-    backgroundColor: theme.colors.$colorInputBackground,
-    color: theme.colors.$colorInputText,
+    backgroundColor: theme.colors.$input,
+    color: theme.colors.$inputForeground,
     // outline support for Windows contrast themes
     outline: 'transparent solid 2px',
     outlineOffset: '2px',
diff --git a/packages/clerk-js/src/ui/primitives/Link.tsx b/packages/clerk-js/src/ui/primitives/Link.tsx
index 08ef6d89f95..9eeb117a748 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.$textSecondary,
       },
       inherit: { color: 'inherit' },
     },
diff --git a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
index 55569cdf82a..4593dfad4e8 100644
--- a/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
+++ b/packages/clerk-js/src/ui/primitives/NotificationBadge.tsx
@@ -18,7 +18,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     textVariant: { ...common.textVariants(theme) },
     colorScheme: {
       primary: {
-        [vars.accent]: theme.colors.$colorTextOnPrimaryBackground,
+        [vars.accent]: theme.colors.$primaryForeground,
         [vars.bg]: `linear-gradient(180deg, ${theme.colors.$whiteAlpha300} 0%, ${theme.colors.$transparent} 100%), ${theme.colors.$primary500}`,
       },
     },
diff --git a/packages/clerk-js/src/ui/primitives/Td.tsx b/packages/clerk-js/src/ui/primitives/Td.tsx
index 51357ef6d36..9df7180b8ca 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.$text,
   },
   variants: {},
 }));
diff --git a/packages/clerk-js/src/ui/primitives/Text.tsx b/packages/clerk-js/src/ui/primitives/Text.tsx
index bd3e5869af1..7e1b84bc6dd 100644
--- a/packages/clerk-js/src/ui/primitives/Text.tsx
+++ b/packages/clerk-js/src/ui/primitives/Text.tsx
@@ -10,7 +10,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
       boxSizing: 'border-box',
       // TODO: this should probably be inherited
       // and handled through cards
-      color: theme.colors.$colorText,
+      color: theme.colors.$text,
       margin: 0,
       fontSize: 'inherit',
       ...common.disabled(theme),
@@ -18,12 +18,12 @@ const { applyVariants, filterProps } = createVariants(theme => {
     variants: {
       variant: common.textVariants(theme),
       colorScheme: {
-        primary: { color: theme.colors.$colorText },
-        onPrimaryBg: { color: theme.colors.$colorTextOnPrimaryBackground },
+        primary: { color: theme.colors.$text },
+        onPrimaryBg: { color: theme.colors.$primaryForeground },
         danger: { color: theme.colors.$danger500 },
         success: { color: theme.colors.$success500 },
-        neutral: { color: theme.colors.$colorTextSecondary },
-        tertiary: { color: theme.colors.$colorTextTertiary },
+        neutral: { color: theme.colors.$textSecondary },
+        tertiary: { color: theme.colors.$textTertiary },
         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 320dace655f..e33ea17aa05 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.$text, 0.62),
     padding: `${theme.space.$2} ${theme.space.$4}`,
   },
   variants: {},
diff --git a/packages/clerk-js/src/ui/utils/colorOptionToHslaScale.ts b/packages/clerk-js/src/ui/utils/colorOptionToHslaScale.ts
index 57c13a1db29..f48d52c25ed 100644
--- a/packages/clerk-js/src/ui/utils/colorOptionToHslaScale.ts
+++ b/packages/clerk-js/src/ui/utils/colorOptionToHslaScale.ts
@@ -6,7 +6,7 @@ import { fromEntries } from './fromEntries';
 type InternalColorScale<T> = ColorScale<T> & Partial<Record<20, T>>;
 
 const LIGHT_SHADES = ['25', '50', '100', '150', '200', '300', '400'].reverse();
-const DARK_SHADES = ['600', '700', '750', '800', '850', '900', '950'];
+const DARK_SHADES = ['525', '600', '700', '750', '800', '850', '900', '950'];
 
 const TARGET_L_50_SHADE = 97;
 const TARGET_L_900_SHADE = 12;
@@ -21,6 +21,7 @@ function createEmptyColorScale<T = undefined>(): InternalColorScale<T | undefine
     '300': undefined,
     '400': undefined,
     '500': undefined,
+    '525': undefined,
     '600': undefined,
     '700': undefined,
     '750': undefined,
diff --git a/packages/themes/src/themes/dark.ts b/packages/themes/src/themes/dark.ts
index cc1654abadd..1373ff76a11 100644
--- a/packages/themes/src/themes/dark.ts
+++ b/packages/themes/src/themes/dark.ts
@@ -2,16 +2,19 @@ import { experimental_createTheme } from '../createTheme';
 
 export const dark = experimental_createTheme({
   variables: {
-    colorBackground: '#19191A',
-    colorInputBackground: '#19191A',
-    colorAlphaShade: 'white',
-    colorPrimary: '#ffffff',
-    colorTextOnPrimaryBackground: 'black',
-    colorTextSecondary: 'white',
-    colorText: 'white',
-    colorInputText: 'white',
-    colorShimmer: 'rgba(255,255,255,0.36)',
-    shadowShimmer: '1px 1px 2px rgba(0,0,0,0.36)',
+    colors: {
+      background: '#19191A',
+      input: '#19191A',
+      alphaShade: 'white',
+      primary: '#ffffff',
+      primaryForeground: 'black',
+      secondary: 'black',
+      secondaryForeground: 'white',
+      text: 'white',
+      inputForeground: 'white',
+      shimmer: 'rgba(255,255,255,0.36)',
+      shimmerShadow: '1px 1px 2px rgba(0,0,0,0.36)',
+    },
   },
   elements: {
     providerIcon__apple: { filter: 'invert(1)' },
diff --git a/packages/themes/src/themes/neobrutalism.ts b/packages/themes/src/themes/neobrutalism.ts
index f79bd940938..b0da786ecc2 100644
--- a/packages/themes/src/themes/neobrutalism.ts
+++ b/packages/themes/src/themes/neobrutalism.ts
@@ -16,15 +16,17 @@ const buttonStyle = {
 
 export const neobrutalism = experimental_createTheme({
   variables: {
-    colorPrimary: '#DF1B1B',
-    colorTextSecondary: '#000',
+    colors: {
+      primary: '#DF1B1B',
+      secondary: '#000',
+      shimmer: 'rgba(255,255,255,0.64)',
+      shimmerShadow: '2px 2px 0px #000',
+    },
     fontWeight: {
       normal: 500,
       medium: 600,
       bold: 700,
     },
-    colorShimmer: 'rgba(255,255,255,0.64)',
-    shadowShimmer: '2px 2px 0px #000',
   },
   elements: {
     card: {
diff --git a/packages/themes/src/themes/shadesOfPurple.ts b/packages/themes/src/themes/shadesOfPurple.ts
index c61d7d9a2e1..d80dcc8122a 100644
--- a/packages/themes/src/themes/shadesOfPurple.ts
+++ b/packages/themes/src/themes/shadesOfPurple.ts
@@ -4,11 +4,13 @@ import { dark } from './dark';
 export const shadesOfPurple = experimental_createTheme({
   baseTheme: dark,
   variables: {
-    colorBackground: '#3f3c77',
-    colorPrimary: '#f8d80d',
-    colorTextOnPrimaryBackground: '#38375f',
-    colorInputText: '#a1fdfe',
-    colorShimmer: 'rgba(161,253,254,0.36)',
-    shadowShimmer: '1px 1px 2px rgba(0,0,0,0.36)',
+    colors: {
+      background: '#3f3c77',
+      primary: '#f8d80d',
+      primaryForeground: '#38375f',
+      inputForeground: '#a1fdfe',
+      shimmer: 'rgba(161,253,254,0.36)',
+      shimmerShadow: '1px 1px 2px rgba(0,0,0,0.36)',
+    },
   },
 });
diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
index b8330057066..7e9e7f27c3b 100644
--- a/packages/types/src/appearance.ts
+++ b/packages/types/src/appearance.ts
@@ -33,6 +33,7 @@ type Shade =
   | '300'
   | '400'
   | '500'
+  | '525'
   | '600'
   | '700'
   | '750'
@@ -393,58 +394,83 @@ export type Elements = {
 }[keyof ElementsConfig];
 
 export type Variables = {
-  /**
-   * The primary color used throughout the components. Set this to your brand color.
-   */
-  colorPrimary?: CssColorOrScale;
-  /**
-   * The color used to indicate errors or destructive actions. Set this to your brand's danger color.
-   */
-  colorDanger?: CssColorOrScale;
-  /**
-   * The color used to indicate an action that completed successfully or a positive result.
-   */
-  colorSuccess?: CssColorOrScale;
-  /**
-   * The color used for potentially destructive actions or when the user's attention is required.
-   */
-  colorWarning?: CssColorOrScale;
-  /**
-   * The color that will be used for all to generate the alpha shades the components use. To achieve sufficient contrast,
-   * light themes should be using dark shades (`black`), while dark themes should be using light (`white`) shades. This option applies to borders,
-   * backgrounds for hovered elements, hovered dropdown options etc.
-   * @default 'black'
-   */
-  colorAlphaShade?: CssColorOrAlphaScale;
-  /**
-   * The default text color.
-   * @default black
-   */
-  colorText?: 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
-   */
-  colorTextOnPrimaryBackground?: CssColor;
-  /**
-   * The text color for elements of lower importance, eg: a subtitle text.
-   * @default A lighter shade of {@link Variables.colorText}
-   */
-  colorTextSecondary?: CssColor;
-  /**
-   * The background color for the card container.
-   */
-  colorBackground?: CssColor;
-  /**
-   * The default text color inside input elements. To customise the input background color instead, use {@link Variables.colorInputBackground}.
-   * @default The value of {@link Variables.colorText}
-   */
-  colorInputText?: CssColor;
-  /**
-   * The background color for all input elements.
-   */
-  colorInputBackground?: CssColor;
+  colors?: {
+    /**
+     * The primary color used throughout the components. Set this to your brand color.
+     */
+    primary?: CssColorOrScale;
+    /**
+     * The color of text appearing on top of an element that with a background color of {@link Variables.primary},
+     * eg: solid primary buttons.
+     * @default white
+     */
+    primaryForeground?: CssColor;
+    /**
+     * The secondary color used throughout the components.
+     */
+    secondary?: CssColorOrScale;
+    /**
+     * The secondary color used throughout the components.
+     */
+    secondaryForeground?: CssColor;
+    /**
+     * The color used to indicate errors or destructive actions. Set this to your brand's danger color.
+     */
+    danger?: CssColorOrScale;
+    /**
+     * The color used to indicate an action that completed successfully or a positive result.
+     */
+    success?: CssColorOrScale;
+    /**
+     * The color used for potentially destructive actions or when the user's attention is required.
+     */
+    warning?: CssColorOrScale;
+    /**
+     * The color that will be used for all to generate the alpha shades the components use. To achieve sufficient contrast,
+     * light themes should be using dark shades (`black`), while dark themes should be using light (`white`) shades. This option applies to borders,
+     * backgrounds for hovered elements, hovered dropdown options etc.
+     * @default 'black'
+     */
+    alphaShade?: CssColorOrAlphaScale;
+    /**
+     * The default text color.
+     * @default black
+     */
+    text?: CssColor;
+    /**
+     * The text color for elements of lower importance, eg: a subtitle text.
+     * @default A lighter shade of {@link Variables.text}
+     */
+    textSecondary?: CssColor;
+    /**
+     * The text color for elements of even lower importance.
+     * @default An lighter shade of {@link Variables.textSecondary}
+     */
+    textTertiary?: CssColor;
+    /**
+     * The background color for the card container.
+     */
+    background?: CssColor;
+    /**
+     * The default text color inside input elements. To customise the input background color instead, use {@link Variables.colorInputBackground}.
+     * @default The value of {@link Variables.inputForeground}
+     */
+    inputForeground?: CssColor;
+    /**
+     * The background color for all input elements.
+     */
+    input?: CssColor;
+    /**
+     * The color of the avatar shimmer
+     * @default rgba(255, 255, 255, 0.36)
+     */
+    shimmer?: CssColor;
+    /**
+     * The shadow that appears on the avatar when hovered
+     * @default rgba(0, 0, 0, 0.36)
+     */
+    shimmerShadow?: 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})
@@ -489,16 +515,6 @@ export type Variables = {
    * @default 1rem
    */
   spacingUnit?: CssLengthUnit;
-  /**
-   * The color of the avatar shimmer
-   * @default rgba(255, 255, 255, 0.36)
-   */
-  colorShimmer?: CssColor;
-  /**
-   * The shadow that appears on the avatar when hovered
-   * @default rgba(0, 0, 0, 0.36)
-   */
-  shadowShimmer?: CssColor;
 };
 
 export type BaseThemeTaggedType = { __type: 'prebuilt_appearance' };
diff --git a/playground/nextjs/pages/_app.tsx b/playground/nextjs/pages/_app.tsx
index 8505d965c80..43a58c4a9f4 100644
--- a/playground/nextjs/pages/_app.tsx
+++ b/playground/nextjs/pages/_app.tsx
@@ -52,7 +52,9 @@ function MyApp({ Component, pageProps }: AppProps) {
       appearance={{
         baseTheme: themes[selectedTheme],
         variables: {
-          colorPrimary:primaryColor,
+          colors:{
+            primary:primaryColor,
+          }
         },
         layout: {
           helpPageUrl: '/help',